不開 Figma 也能畫 App：用 Claude Design 一段 prompt 做出 6 個點得動的 App 畫面

為什麼別人用 Claude 畫 App 設計稿，你還在 Figma 裡一格一格拉框？不是 Figma 不好，是第一版畫面其實可以用一段話先生出來。這篇用 Claude Design 的 Mobile app design 模板，替一間虛構的大稻埕手搖飲店「浮島茶室 FLOAT ISLE」做了 6 個點餐 App 畫面：菜單、客製化、購物車、集點卡、取餐通知，全部連在一起、點得動。下面每一張圖，都是 Claude Design 實際做出來的畫面。

01先打開 Claude Design（1 分鐘）

到 claude.ai/design，用你的 Claude 帳號登入。
Claude 官方 2026 年 10 月 8 日的文章寫到：Design 已經結束 beta，每個方案都能用，包括免費方案。
claude.ai/design 這個獨立網站會開到 2026 年 12 月 14 日；現在在一般的 Claude 對話裡，也已經可以直接用 Claude Design。

Claude Design 官方介紹 — 方案和網站開放日期

02第 1 步：選「Mobile app design」模板

新專案的輸入框下面有一排模板。畫 App 就選「Mobile app design」，它會直接用手機畫面的尺寸來排版，不用自己設定畫板。

Claude Design 新專案畫面：上方是 prompt 輸入框，下方模板清單選了 Mobile app design — 我們選的是 Mobile app design。Design system 先選 None，模型用 Opus 5.5。

在「CHOOSE A TEMPLATE」點「Mobile app design」。
左下角的 Design system：還沒有品牌規範就選 None；已經做好一套品牌系統，可以在這裡選它，App 就會照你的顏色和字體畫。
先不要按送出，下一步把 prompt 寫好再貼上。

03第 2 步：prompt 寫清楚三件事：品牌、畫面、風格

只寫「幫我做一個點餐 App」，它就只能自己猜。我們把 prompt 拆成三件事：品牌是誰、要哪幾個畫面、長什麼風格。畫面要編號，照顧客實際使用的順序列出來。

App 設計稿提示詞（把［］換成你的）

幫我設計一個［類型，例如 手搖飲點餐］App，品牌叫「［品牌名＋英文名］」，開在［城市＋地區］。介面文字全部用繁體中文（台灣用語）。
做 6 個畫面：1［畫面一］、2［畫面二］、3［畫面三］、4［畫面四］、5［畫面五］、6［畫面六］。
風格：［主色＋輔色＋一點亮色］，大圓角，大標題字，留白多，像［你喜歡的 App 類型］，每個畫面都要有視覺重點，縮小看也要很完整。

我們做浮島茶室時，實際貼的是這段：

我們實際用的 prompt

幫我設計一個手搖飲點餐 App，品牌叫「浮島茶室 FLOAT ISLE」，開在台北大稻埕。介面文字全部用繁體中文（台灣用語）。做 6 個畫面：1 開場歡迎頁、2 菜單（茶款照片卡片＋價格）、3 客製化（甜度、冰塊、加料）、4 購物車、5 集點卡、6 取餐通知。風格：奶茶米色＋深墨綠＋一點橘，超大圓角，大標題字，留白多，像精品咖啡 App，每個畫面都要有視覺重點，縮小看也要很完整。

04第 3 步：看它邊畫邊檢查，讀它的「交代清單」

送出後，左邊是對話，右邊的畫布會一塊一塊長出來。你會看到它寫著正在加哪一個元件，例如「開始點餐」按鈕。

Claude Design 正在畫浮島茶室 App，菜單畫面的卡片還是空的 — 畫到一半：歡迎頁已經好了，菜單的卡片還在填。

畫完它會把 6 個畫面排在同一張板子上，最上面是品牌名、一句說明和三個主色：奶茶米、深墨綠、夕陽橘。

浮島茶室 App 的總覽板：開場歡迎頁、菜單、客製化、購物車、集點卡並排 — 總覽板：01 開場歡迎頁到 05 集點卡，第 6 個取餐通知在下一排。

接著它會寫一段交代，這段一定要讀。我們這次它說了三件事：

茶杯圖：目前是用程式畫的簡單杯子，每杯有自己的茶色，有的加了珍珠，縮小看也清楚。有真的產品照可以換上去。
Tweaks：加了兩個展示用的控制項，一個調集點卡的起始點數，一個切換取餐通知的階段。
它自己補的內容：茶名、價格、會員福利、取餐時間、街名（迪化街一段）都是它填的假資料，要換成你的真菜單。

然後它會自己找問題、自己修。我們這次它抓到兩個排版問題：集點卡畫面的底部選單蓋住了「島民福利」清單，它改成可以捲動；取餐通知的「027」太大，擠到上下兩行字，它就把號碼縮小一點。

05第 4 步：點點看，它是一個能操作的原型

這 6 個畫面不是 6 張圖，而是共用同一份資料。在菜單點一杯飲料，會跳到客製化；加進購物車，購物車就更新；結帳後集點卡會加點，取餐通知會從「已接單」走到「製作中」再到「可取餐」。

菜單、客製化、購物車三個 App 畫面 — 點餐流程：菜單 → 客製化（尺寸、甜度、冰塊）→ 購物車，合計 NT$ 140。

集點卡畫面和取餐通知畫面 — 集點卡 7/10，再 3 杯換一杯；取餐通知從 15:08 接單到 15:20 可取餐。

畫布上方有它加的 Tweaks 列：initialStamps 是集點卡的起始點數（我們停在 7），pickupStatus 可以直接切到「可取餐」。要給別人看某個狀態，不用從頭點一次。

Claude Design 編輯畫面：左邊是對話和交代清單，右邊是 App 畫面，上方有 initialStamps 和 pickupStatus 兩個控制項 — 左邊是它的交代和修正紀錄，上方是 Tweaks 控制列。

06第 5 步：把假內容換成你的真菜單

照第 3 步的交代清單，一次講清楚要換什麼、哪些不要動。有產品照的話，用對話框左下角的「＋」加進來，請它換掉程式畫的杯子。

換成真內容的提示詞（把［］換成你的）

把 App 裡的假資料換成真的：
菜單：［品名＋價格，一行一個］
會員福利：［例如 每週三全品項 9 折］
店址：［你的地址］
茶杯插圖換成我附上的產品照，一張對一個品項。
版面、顏色、按鈕都不要動。

07第 6 步：按 Share，匯出或交給 Claude Code

右上角的 Share 選單分兩塊。上面是誰能看：我們的專案顯示「只有你看得到」，可以複製連結，或發布成公開的 Artifact。下面是 Export。

Claude Design 的 Share 選單：Claude Code、PNG、Project HTML、PowerPoint 等匯出選項 — 我們 10 月的 Share 選單：Claude Code（Send）、PNG、Project HTML、PowerPoint，往下還有更多。

要給客戶或同事看：匯出 PDF 或 PowerPoint（PPTX）。官方寫的匯出格式有 PDF、PPTX、獨立 HTML，也能送到 Canva。
要放上網頁或自己保存：選 Project HTML，可以下載 .zip 或單一 HTML 檔。
只要一張圖：我們的選單裡有 PNG，選一個元素就能匯出。官方頁面沒有列這一項，以你看到的介面為準。
要做成真的 App：按 Claude Code 旁邊的 Send。官方說會打包成 handoff bundle，交給 Claude Code 照這份設計寫程式。

08要注意

浮島茶室 FLOAT ISLE 是虛構品牌，6 個畫面由 Claude Design 生成，示範用。茶名、價格、會員福利、取餐時間、「迪化街一段」店址和「林小姐」都是 AI 填的假資料。
這篇是 2026 年 10 月 15 日在 claude.ai/design 做的。模板名稱和選單位置是我們當時看到的，之後介面可能會改。
claude.ai/design 獨立網站開到 2026 年 12 月 14 日，現在在一般 Claude 對話裡也能用 Claude Design。重要的專案記得先匯出備份。
點得動是原型，不是真的 App：不會真的下單或收款。要上架，還需要後端、金流、測試和 App Store／Google Play 審核。
要拿去商用，確認畫面用的字體可以商用，例如 Noto Sans TC（SIL OFL 授權）。