Claude 做的 App 不再像線框圖：給它吉祥物、產品照和一套顏色，5 個畫面直接像上架

01先打開 Claude Design（1 分鐘）

1. 打開 claude.ai/design，用你的 Claude 帳號登入。Claude 官方寫明 Design 每個方案都能用，包括免費方案。
2. claude.ai/design 這個獨立網站開到 2026 年 12 月 14 日；現在在一般的 Claude 對話裡，也已經可以用 Claude Design。
3. 開新專案，選手機 App 的模板。我們選的是「Mobile app design」，官方頁面沒有列出模板名稱，之後可能會改名。
4. 先不要打字。這篇的重點在送出之前：素材和 prompt 準備好，成品會差很多。

模板怎麼選、做完怎麼匯出和交給 Claude Code，我們在另一篇「浮島茶室」App 已經一步一步寫過。這篇只講一件事：怎樣讓畫面看起來像一個真的品牌，而不是線框圖。

• 不開 Figma 也能畫 App：Claude Design 做 6 個點得動的 App 畫面 — 模板、交代清單、匯出
• Claude Design 官方介紹 — 方案和網站開放日期

02第 1 步：先做品牌素材：一隻吉祥物＋一組產品照

App 會像線框圖，是因為畫面裡沒有東西可以放。所以第一步不是寫 prompt，是在 ChatGPT 先把素材做好：一個吉祥物插畫、一組產品照。我們做了一隻穿圍裙、拿著咖啡的貓咪咖啡師，一杯冰燕麥拿鐵，還有可頌、肉桂捲、熱拿鐵、巴斯克乳酪蛋糕。

幫我畫［店名］的品牌吉祥物：一隻［動物＋身份，例如 穿圍裙的貓咪咖啡師］，手上拿著［招牌商品］。
手繪粗墨線，只用［主色］和［底色］兩個顏色，表情開心。
全身、正面，透明背景，不要投影。

幫我生成［可頌、肉桂捲、熱拿鐵、巴斯克乳酪蛋糕］的商品照，四個放在同一張圖裡，彼此分開。
同樣的光線和角度，寫實棚拍，透明背景，不要投影。

1. 吉祥物的顏色就用你 App 的主色。我們的貓是鈷藍＋奶油白，跟 App 的配色一模一樣，放進畫面不會跳出來。
2. 菜單品項放在同一張圖裡一次生，光線和角度才會一致。我們的 4 個品項就是同一張圖，再切成 4 張去背 PNG。
3. 每張都存成透明背景的 PNG，放在任何底色上都乾淨。

03第 2 步：prompt 裡定一套顏色，說清楚每張圖用在哪

1. 在 Claude Design 的輸入框左下角按「＋」，把吉祥物和產品照附上。
2. 貼上下面的 prompt，把［］換成你的。
3. 參考方向寫成文字就好。我們先在 Pinterest 看了幾個咖啡 App，把喜歡的地方寫成一句一句，例如「歡迎頁整頁大色塊＋手繪插畫，標題超大、像海報不像表單」。別人的圖不要附上去。

做一個手機 App 設計：［店名＋英文名］的［點餐＋集點］App，iPhone 尺寸，做 5 個畫面：
1) 歡迎頁　2) 首頁（今日推薦、熱門［商品］）　3) ［商品］詳情（［大小、甜度、冰量］）　4) ［集點卡：集滿 10 點送一杯］　5) 訂單完成＋取餐號碼
參考方向：歡迎頁整頁［主色］大色塊＋手繪粗墨線插畫，標題超大、像海報不像表單；［主色］＋［奶油白］雙色系統，插畫角色貫穿每一頁；插畫貼紙散在畫面上，按鈕圓胖可愛；整頁單色背景＋巨大粗體標題，產品照疊在大字上。
配色：［主色 HEX］、［底色 HEX］、一點［點綴色］。標題用粗體大字。每個畫面都要有一個視覺重點（插畫、產品照或巨大數字），縮小看也要飽滿、不空。
附上的圖：［吉祥物.png］是品牌吉祥物（用在歡迎頁和集點卡）；［產品照.png］用在菜單。
全部繁體中文，價格用新台幣，不要留灰色佔位框。

我們實際用的配色是鈷藍 #1F3FBF、奶油白 #F6EFE3、一點暖橘。Claude Design 做完，還在板子上方寫了它自己的設計規則：雙色系統，暖橘只用在貼紙和行動按鈕；2.5px 墨色描邊加硬陰影，呼應吉祥物的手繪線條。

04第 3 步：一頁只放一個重點，縮小看也要飽滿

prompt 裡最有用的一句是「每個畫面都要有一個視覺重點（插畫、產品照或巨大數字），縮小看也要飽滿、不空」。它在板子上把這條規則寫成「一頁一焦點：吉祥物、產品照、巨大數字輪流當主角」。

1. 飲品詳情：整頁鈷藍，產品照疊在超大的英文品名上，右下角一個「人氣 No.1」貼紙。
2. 集點卡：一個巨大的「7」加橘色「/10」，旁邊是吉祥物，已經集到的章都是貓臉，最後一格寫 FREE。
3. 訂單完成：取餐號碼「A27」做到最大，旁邊放剛點的那杯拿鐵。

我們自己用縮小測試檢查：把畫面縮到手機螢幕上的大小，只看得到一樣東西就對了。集點卡和歡迎頁縮小後最清楚。詳情頁有一個小問題：拿鐵照把「ICED OAT LATTE」遮掉太多，縮小後字有點難認。

［飲品詳情］頁的產品照把標題遮掉太多，縮小後認不出字。把照片往［右下］移、縮小一點，標題每個字母都要看得到。其他畫面不要動。

05第 4 步：做成可以點，但先搞清楚哪些會動

我們的 prompt 沒有寫要互動，Claude Design 還是直接做成了可以點的原型。下面這些都是我們在它做出來的畫面上實際點出來的：

1. 飲品詳情：大小、甜度、冰量和數量都可以選。點大杯，價格從 NT$140 變成 NT$160；按「加入購物車」，按鈕會變成「已加入購物車 ✓」。
2. 首頁：熱門飲品那一排可以左右滑，上面的「全部、咖啡、甜點」可以點來篩選。
3. 訂單完成：取餐進度會自己從「已接單」走到「製作中」，再到「可取餐」，大約每 3 秒換一格，然後重來。這是展示用的動畫，不是真的在追蹤訂單。

但畫面和畫面之間不會跳轉。在首頁點一杯飲料，不會進到詳情頁；按「回到首頁」也不會回去。能動的只有每個畫面裡面的點選，和訂單頁自己播的進度。這一點 Claude 自己在對話裡就寫了：「畫面之間還不能點擊跳轉」。

1. 它另外加了兩個控制項：一個 0 到 10 的點數滑桿，集點卡、首頁點數和訂單頁的「+1 點」會一起變；一個開關可以把所有貼紙藏起來。
2. 它也列出需要你確認的內容：會員名「阿蓁」、門市「民生店」、取餐號碼「A27」和甜點價格，都是它暫定的。

做成可以點：換［大小］價格會變、［分類］可以篩選、訂單進度會自己動。其他版面和顏色不要動。

06要注意

1. 巷口貓咖啡 Alley Cat Coffee 是虛構品牌。App 畫面由 Claude Design 生成，貓咪插畫和產品照由 ChatGPT 生成，示範用。
2. 價格、會員名「阿蓁」、「民生店」、取餐號碼和集點數都是 AI 填的假資料，換成你店裡的真實資訊再給人看。
3. 這是原型，不是真的 App：5 個畫面之間不會跳轉，訂單進度是自己播的展示動畫，不會真的下單、收款或追蹤訂單。要上架還需要後端、金流、測試和 App Store／Google Play 審核。
4. 這篇是 2026 年 10 月 19 日在 claude.ai/design 用 Opus 5.5 做的。模板名稱和介面是我們當時看到的，之後可能會改。
5. 官方寫的匯出格式有 PDF、PPTX、獨立 HTML，也能送到 Canva。claude.ai/design 獨立網站開到 2026 年 12 月 14 日，重要的專案記得先匯出備份。
6. Pinterest 的圖只拿來定方向，寫成文字放進 prompt。畫面裡只放你自己的照片或自己生成的圖。
7. 要拿去商用，確認字體可以商用，例如 Noto Sans TC（SIL OFL 授權）。