这次做的是一个拉面品牌。从猫咪 Logo、品牌视觉，到网站开发和部署上线，整个过程我都在用 AI 完成。打开网站，先是一只正在吃拉面的猫咪；往下是菜单、品牌介绍、位置和营业时间，而且有日文、中文和英文三个版本。下面是视频版，也可以继续往下看文字版。
Play video这篇想讲清楚的，是一个角色怎么贯穿整个项目：这只猫怎么从一批概念图里被选出来，又怎么变成店面、包装，以及网站首屏里这段吃面的循环动画。
先确定项目要做什么
任务是：以猫咪为主要形象，为一个拉面品牌重新设计视觉，再把这套视觉应用到品牌网站里。
网站本身不复杂，主要让客人了解这家店、看菜单、找到门店信息。另外，从一开始就要考虑日文、中文和英文三个语言版本。
菜单内容不少（带汤拉面、无汤油拌面、加料、套餐），所以其中一部分工作，就是把菜品整理清楚，让人浏览起来方便。
需求明确以后，第一个问题是形象：这只猫，到底应该长什么样？
从参考图，到一只表情呆呆的黑猫
我先收集了各种风格的猫咪参考，看看自己更喜欢哪一种，再决定往哪个方向尝试。
接着把选好的参考图上传给 AI，告诉它：我想做一个以猫咪为形象的拉面品牌，请根据这些参考生成一些 Logo 概念。
这个阶段我会故意不把提示词写得太细。说清楚猫咪、拉面和大致的风格，给它留一些探索空间。这一轮没有喜欢的，就继续生成，或者换一组参考图。视频里看到的那批方案，就是这样一轮一轮积累下来的。
每一只猫的轮廓、表情，和拉面结合的方式都有一点不同。挑选的时候，我主要想两件事：
- 这只猫有没有记忆点？
- 除了 Logo，放到菜单、包装和网站里，还能不能继续展开？
最后我们选中了这只黑猫。它的表情有点呆，但正是这个表情，让我觉得它很适合继续做下去。
让一只猫撑起整套品牌视觉
下一步，是把 Logo 延展成一套品牌视觉。
我保留了完整的猫咪形象，同时把它的眼睛单独拆出来，做成一个可以独立使用的纯色图形。这样每种物料都多了一个选择：空间够的地方用完整的猫，空间小的地方只用眼睛，也能认出是同一个角色。
围绕这两个元素，我继续生成了店面招牌、灯箱、菜单、打包袋和餐具的视觉展示。
把这些画面放在一起，就能很直观地判断：这只猫能不能撑起整个品牌？不同物料之间有没有统一的感觉？（这里展示的是品牌应用效果图，不是已经施工或印刷的实物。）
先规划网站，再生成设计规范
动手设计之前，我先规划了结构。这是一个单页网站，从上到下分成四部分：
- 首屏主视觉（Hero），让人一打开就记住这只猫
- 菜单
- 关于我们
- 门店信息，包括位置、地图和营业时间
然后是准备工作：在 GitHub 创建仓库，在电脑上建好本地项目文件夹，再打开 Claude Design，新建这个项目的 Design System，也就是设计规范。
我把项目说明填进去，同时上传前面做好的品牌素材：Logo、猫咪形象和品牌应用参考。说明里写清楚网站有哪些内容、需要哪三种语言、希望怎样使用这些素材。前面做过的设计，都成了这一步的依据。
生成出来的是一份比较完整的设计文件，整理了整体风格、关键设计细节和相关规范。后面进入开发，就照着这份文件实现。
把设计交给 Claude Code
设计文件生成以后，我点击分享，选择发送给 Claude Code，再选本地模式，把相关文件一起带过去，复制它给出的交接提示词。
接着新建一个会话，确认工作目录是刚才的本地项目，粘贴交接提示词和 GitHub 仓库地址，再补上我自己的开发要求：单页结构、三种语言，以及品牌素材怎么用。
技术上，这是一个导出成纯静态文件的 Next.js 网站，滚动动画用 GSAP 和 Lenis。每种语言有自己的网址（/ja/、/zh/、/en/），整份菜单放在一个文件里，每道菜都带着三种语言的名字。
第一版的整体风格已经比较接近，结构也基本按规划搭了出来。但往下看，还有不少地方要处理：菜单还是纯文字，门店位置和营业信息也空着。这一版让我看到了网站的大样子，接下来就要一个区域一个区域地调整，让品牌素材和真实内容进到页面里。
重点打磨：让猫咪吃起拉面
我从首屏开始。这是打开网站最先看到的地方，也是我最想让猫咪有个性的地方。我想让它动起来，变成一只真的在吃拉面的猫。
为此，我先把主视觉拆成三层：文字、背景和猫咪。分开以后，猫咪的动作可以单独处理，文字和背景也能保持稳定。
然后我又生成了两张动作略有不同的猫咪图片，作为视频的首帧和尾帧，用来做循环动画。
我把这些分层素材交给 Claude，说明希望猫咪怎么动、最后要用在网站首屏，再让它调用 Higgsfield 完成动画。实际做法是两段短片：一段从动作 A 到动作 B，一段再从 B 回到 A，首尾相接就成了循环。两段都生成在纯蓝背景上，方便把猫干净地抠出来，接缝处再各做几帧交叉淡化。
不过，给了首帧和尾帧，也不代表循环一定自然。要看实际生成的动作，尤其是播放到结尾、重新回到开头的那一下，衔接是否顺。
下面就是最后放进网站的效果：
在网页上，它是透明背景叠在首屏上播放的，加载前先显示一张静态图。和最开始的静态首屏相比，整个网站一下子有了自己的性格。这也是我最喜欢的部分：一开始选出来的品牌形象，终于在网站里动起来了。
同样的思路后来也用在了页脚：一只从页面底边探出头的猫，首帧和尾帧用同一张图，循环自然就闭合了。
把其余细节补齐
首屏完成以后，我继续逐个区域调整。这个阶段我习惯把修改拆开说：先看菜单，再看门店信息，每次指出具体位置和想要的效果，改完再回到页面里看。
三种语言要分别打开看。同一个标题换一种语言，长短就可能变了，所以除了内容，还要留意标题换行、菜单排版，以及按钮和导航的显示。
上线前，还要分别看电脑和手机上的效果，确认菜单看得清楚，地图和营业时间这些实用信息也容易找到。这些才是客人真正会用到的东西。
部署到 Railway
部署我选了 Railway，觉得它比较容易上手。我把 Railway 部署文档的地址发给 Claude，让它按照文档部署当前项目。过程中需要自己处理的，比如选项目、账号授权和填写配置，就根据实际提示一步步完成。
上线以后，要打开真实的网址再看一遍：页面和图片能不能正常加载，动画有没有播放，语言切换和主要链接能不能用。本地能跑，不代表线上也没问题。
让前后步骤接得上
现在回头看，从一开始的猫咪参考图，到 Logo、品牌应用，再到这个可以访问的网站，我觉得最值得分享的是怎么让这些步骤接得上：
- 概念阶段放开探索，让 AI 多试一些方向。
- 选定一个角色，之后所有素材都围绕同一只猫来做。
- 把素材和明确的需求一起交出去，设计规范和开发都建立在前一步的成果上。
- 一处一处看实际效果，调整到自己满意为止。
完整的品牌和首页长图，可以在 Neko Ramen 项目页 里看到。
AI 参与了这个项目的每个阶段。我做得最多的，就是选方向、提要求，再判断结果是不是适合这个品牌。
品牌设计、网站开发，还是这段猫咪动画，你最想继续了解哪一部分？欢迎在 YouTube 评论区告诉我，也可以在下面订阅，下一篇发布时第一时间收到。
