這次做的是一個拉麵品牌。從貓咪 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 評論區告訴我，也可以在下面訂閱，下一篇發布時第一時間收到。
