Powered By
Claude Opus 4.7
Claude Design Playbook
Claude Design Playbook
一份寫給 solo founder、PM、非設計出身工作者的完整教學:從 claude.ai/design 入口、Anthropic 設計師 Ryan Mather 公開的 8 個實戰工作流、到 GitHub 55K+ star 的社群 Skill、再到 Reddit 使用者踩過的坑 — 全部整理在一個頁面裡,給 2026 年的你直接開工。
Claude Design 是 Anthropic Labs 在 2026 年 4 月 17 日推出的對話式設計工具。你用自然語言描述需求,Claude 直接在畫布上生成可互動的原型、Landing Page、簡報、UI mockup。由 Claude Opus 4.7 的視覺模型驅動,目前以 research preview 形式開放。最關鍵的本質差異是 — 它不是在「畫」像素,它在「寫 code」。
| 面向 | Figma / Canva | Claude Design |
|---|---|---|
| 操作方式 | 拖拉、點選、圖層操作 | 對話、inline comment、滑桿微調 |
| 產出本質 | 像素/向量圖 | 可互動的 HTML/CSS/JS code |
| 設計系統 | 手動建立與維護 | 讀 codebase 或素材自動生成 |
| 協作模式 | 多人即時編輯 | 組織內共享 URL、評論、檢視權限 |
| 交付流程 | 設計交付 → 工程師重寫 | Handoff bundle 直送 Claude Code |
| 適合對象 | 專業設計師 + 團隊 | Solo founder · PM · 非設計出身 |
把靜態 mockup 轉成可點擊的 prototype,不用跑 code review 或 PR。分享連結讓使用者直接測試。
PM 在一次會議內把 feature flow 跑完;過去要一週的來回 brief、mockup、review 被壓縮成一次對話。
Landing Page、One-pager、投資人簡報、社群貼文 — 全部能從同一套設計系統衍生,保持視覺一致。
前提:需要 Claude Pro (每月 $20) 以上方案。Enterprise 預設關閉,需要 admin 手動啟用。Claude Design 的用量獨立計算,不會吃掉 chat 或 Claude Code 額度。
直接打開網址,或從 Claude 左側導覽列的「調色盤」圖示進入。初次使用會問「你是做什麼的?」— 選 Design / Engineering / Product / Marketing / Other,系統會依此調整介面提示。
這一步值得花整整一小時 — 打磨好之後,後面幾天省下的時間遠遠超過。三種上傳方式任選:
好 prompt 包含目標 (what) + 版面 (layout) + 內容 (content) + 受眾 (audience)。不用擔心寫錯 — Claude 會主動問 clarifying questions 把盲點挖出來。
結構性變更用 chat、元件級調整用 inline comment。滿意後點右上 Export 按鈕,可以選六種輸出:
Ryan Mather (@Flomerboy) 是 Anthropic 垂直產品團隊的設計師,RISD 出身,一個人支援 Anthropic 旗下 7 個產品線。他在 Claude Design 發布當晚公開的 8 條工作流,兩天內被書籤 1.7 萬次 — 書籤數是讚的兩倍,意味著大家把它存起來當工作手冊用。
如果你在 Instagram 工作,你會希望 Claude 先有一份像素級精確的 home screen、capture、DMs、Reels 拷貝。之後你說「重新設計首頁」,Claude 已經有起跑優勢。對創作者來說,就是先把自己品牌網站的關鍵頁面匯入。
mockup 生成夠快,你可以跟工程師保持在高抽象層級的討論 — 概念、限制、可行性 — 然後直接看東西被做出來。從前「設計師回去畫、兩天後再 review」的模式被徹底翻轉成一次會議搞定。
初稿出來後有幾十個細節要調。不要用文字描述位置 — 直接點元件、留評論。Anthropic 官方的經驗法則:targeted 元件級修改用 Comment、結構性或美學變更用 chat。
反直覺點:Claude Design 能做的事遠超靜態 mockup。它的行為更像 Claude Code,可以生動態 demo、互動玩具、動畫原型。所以當你有一個「解釋影片」或「功能預告」的需求,先試試直接叫它做。
接上 MCP connector 後,prompt 可以是:「請讀產品 review 會議的筆記,針對提到的所有問題,各生一組不同的設計解法做成 deck。」然後 — 去散個步、摸摸草 — 回來用新鮮的眼睛看結果。這是典型的 async 工作流。
不要用以前用 canvas 工具的慣性來用 Claude Design。它是不同的動物,有不同的超能力。實驗、玩起來 — 你會發現自己的設計速度比以前快一個級距,也會發現它能生出傳統工具做不到的東西 (像是現場客製的滑桿或互動元件)。
Thread 最老成的一條。三件事該自己做:新圖示、重點插畫、命名。這些「不成比例影響」的細節永遠值得你的時間。容易被 agentic design 的速度感吸進去 — 懂得什麼時候慢下來,是一種獨立的藝術。
Ryan 說最喜歡 Claude Design 的不是效率,而是它讓設計重新變得 delightful。因為生成成本低,你可以試更發散的方向,也能更寬鬆地放下不對的。和傳統設計工具的關係相反 — 拖拉工具會讓你每小時都在成本線上、傾向收斂;對話工具讓你敢發散。
印出來貼在螢幕旁的那一頁。
目標、版面、內容、受眾 — 每個好 prompt 都該有這四件事。
「換成深色配色」「把 metrics 搬到上排」「給我 2–3 個替代版本」。
「這個 button padding 放大」「這裡改成下拉選單」「用主色」。
重要:Reddit 社群最大的抱怨是 — 所有 Claude Design 輸出都長一樣 (預設 serif、米白背景、閃爍狀態點、terracotta 色系)。解法是先讓 Claude 幫你建設計系統,再開始生畫面。以下是可以直接複製的 prompt。
Claude Opus 4.7 的預設美學是「米白 + serif + terracotta」編輯風,在 fintech、dashboard、工業場景會顯得不搭。用這招強制它先給選項。
Claude Design 的生態不只官方工具 — 社群已經做出一批高品質的 Skill 與 DESIGN.md 模板,直接解決 Reddit 在吐槽的「輸出都長一樣」問題。
社群最紅的 UI/UX 設計智能 Skill。內含 50+ 種風格 (glassmorphism、brutalism、bento grid、dark mode)、161 組配色、57 組字型搭配、99 條 UX 準則、25 種圖表類型、對應 161 種產品類型的 reasoning rules。自動依你的產品特性選風格,不再每次都是 Anthropic 預設那個樣子。
68 個現成的 DESIGN.md 模板 — 一種 plain-text markdown 格式,專為 AI agent 設計,把 tokens、規則、設計理由放在同一個檔案裡。丟一個進 Claude Design,一次生出完整 UI kit (README.md、colors_and_type.css、預覽頁、portable SKILL.md)。
Claude Design 底層跑的就是這個官方 Skill。它明確 ban 掉 Inter、Roboto、Arial、system fonts、Space Grotesk (被標為「AI 濫用字體」)。設計前會先過 4 個維度:purpose、tone、constraints、differentiation。Pro Max 可以和它搭配使用 — 不衝突,互補。
Vercel 的技術品質 Skill 套組。不管風格,專攻 100+ 條 accessibility 規則、57 條 React 效能準則、composition patterns、React Native 優化。和任一視覺 Skill (Pro Max、Taste、frontend-design) 搭配 = 視覺 + 技術雙層保證。
雙人格 Skill — 「bold creative」與「systematic controlled」兩種模式任選。強調 direct manipulation pattern、100ms 反饋、progressive disclosure、forgiveness pattern。適合要做有互動複雜度的產品。
上百個 Claude Skill 分類索引,設計類特別豐富。剛入門的建議路徑:先裝官方 frontend-design → 不夠時加 Pro Max → 要技術品質再加 Vercel 那組。永遠不要裝兩個會打架的視覺 Skill。
Claude Design 發布後 r/ClaudeAI 的反應大致介於「驚艷」和「resounding meh」之間。把討論整理成你該知道的幾件事 — 用之前先讀。
預設就是 serif 字體、米白背景、閃爍狀態點、colored accent bar、還有「container soup」一堆 pill 和 card。沒給 reference screenshot 或 design tokens,輸出就「screams I just used one Claude prompt」。
解法: 先建 design system。上傳 3–5 張你喜歡 App 的截圖,明確命名你要的 tokens (font family、color palette、border-radius、spacing scale),逼 Claude 先建系統再生畫面。這個 pattern 在 Ryan Mather 的 8 條工作流裡排第一、在 ui-ux-pro-max Skill 裡是強制行為 — 兩邊都同意:system first, screens second。
花一小時做 design system setup,整週額度用完了。Ryan Mather 本人回覆:「團隊正在看這個問題。」
建議: 認真探索階段要預期開 Extra Usage。2–3 個完整的 prompt 可能就吃掉 Pro 方案一週額度。若你只想 demo 試試,Max 方案會安心很多。
寫完 comment 但 Claude 沒讀到。官方 workaround:把 comment 文字貼回 chat 輸入框再送出。
緊湊版面模式會出存檔錯誤。切到 full view 重試即可。
連整個 monorepo 會 lag。官方建議只 link 特定子資料夾,不要整包丟。
訊號不穩時會跳「chat upstream error」。在同一個專案內開新 chat tab 就能繞過。
教育科技公司 Brilliant 以互動動畫複雜出名。他們資深產品設計師 Olivia Xu 報告:過去在其他工具需要 20+ 個 prompt 才能重現的複雜頁面,在 Claude Design 只要 2 個。
Datadog 產品團隊把原本一週「brief → mockup → review」的循環,壓縮到一次會議完成。這個不是宣傳稿,是他們 PM 的實際使用回饋。
這份指南整理了 Claude Design 的官方工作流、社群最強 Skill、Reddit 使用者踩過的坑。但從「讀懂工具」到「讓團隊真的用起來」,中間還有設計系統的建構、Shopify / Webflow 前端對接、Claude Code handoff 到 production 的那一段路 — 這是 Tenten 過去 15+ 年服務 300+ 品牌的核心業務。