一個人服務七條產品線，他怎麼辦到的？
2026 年 4 月 17 日，Anthropic Labs 推出了 Claude Design——一個能用對話產出 prototype、簡報、one-pager 的設計工具，同時能接上 design system、codebase、文件與各種 connectors。
同一天，Anthropic 的 verticals team 設計師 Ryan Mather（@Flomerboy）在 X 上發了一串實戰心得。他一個人要服務 Anthropic 的七個產品線，而讓這件事成為可能的關鍵工具，就是 Claude Design。
這篇文章整理了 Ryan 的七個訣竅原文翻譯，每一點再加上我們從品牌設計實務出發的解讀，最後附上給設計師與工程師的工作流建議。
Claude Design 是什麼？
Claude Design 是 Anthropic 推出的 AI 設計工具，讓使用者透過自然語言對話，直接產出可互動的設計原型、簡報投影片、單頁式文件等視覺產出物。它不是傳統的畫布型設計軟體，而是更接近 Claude Code 的思維——用對話驅動產出，用上下文決定品質。
它的核心能力包括：
- 接入 design system，讓產出符合品牌規範
- 連接 codebase，理解技術限制
- 串接 docs、Slack 等 connectors，吃到真實產品脈絡
- 用 Comment 工具做精準的視覺回饋
- 產出影片 demo，不只是靜態 mockup
Tip 1：先建好 Design System 與核心畫面
不要一開始就急著產圖。前期花一小時把品牌樣式、元件規則、常見畫面骨架餵給 Claude，這一小時的投資絕對值得——因為後面每次生成都會站在同一套設計語言上。
Ryan 原文：「Set up your design system and your core screens. An hour of setup and refinement here is worth it.」
為什麼這一步最重要？
這跟我們在做品牌專案時的邏輯完全一樣。根據我們的經驗，很多客戶拿到 AI 工具的第一個反應是「快點產圖」，結果產出的東西風格不統一、元件不一致，最後花更多時間在修改上。
正確的順序是：先建規則，再建畫面。把色彩系統、字體層級、間距規範、按鈕樣式這些基礎設定好，後面每次產出都會自動套用。這跟 Claude Code 裡的 CLAUDE.md 是同一個道理——前期投資結構性資訊，下游每次迭代都在複利。
Tip 2：跟工程師一起即時迭代
設計不再需要「回去做」。Ryan 說他常常能在一場會議裡就跟工程師把新功能設計完成，因為 Claude 做 mockup 夠快，討論可以停留在高層次——聊概念、聊限制，看著想法當場變成畫面。
Ryan 原文：「Iterate with your engineers live. I’m usually able to design new features with an engineer in a single meeting.」
這改變了什麼？
傳統流程是：設計師開完會回去做稿 → 下次會議 review → 來回修改三四輪。現在變成：多人同步討論 → Claude 即時具象化 → 現場收斂。
這其實跟敏捷開發的核心主張一脈相承——品牌策略的價值不是預測成本，而是建立共同理解。當 AI 把具象化的成本壓到接近零，團隊建立共識的速度也會跟著飛快提升。
Tip 3：用 Comment 工具做外科手術式修改
別用嘴講，直接指。粗草稿出來後，要改的通常不是方向，而是幾十個細節——資訊層級、間距、文案措辭、某個 CTA 按鈕太搶眼。這些用口頭描述很難說清楚。
Ryan 原文：「Use the Comment tool to make rapid fire surgical edits. It’s tricky to describe all the changes you want verbally — so don’t! Point and crit.」
Point and Crit 的設計回饋哲學
「Point and crit」直譯是「指出來，然後批評」，但更精確的意思是：把回饋變得局部、可定位、低摩擦。
產品設計裡大部分問題不是方向錯，而是：
- 資訊層級（hierarchy）不夠清晰
- 元素間距不對
- 文案語氣需要調整
- 互動節點的位置不直覺
這些細節，與其打一大段描述，不如直接在畫面上點、標記、註解。Comment 工具讓這個過程變得極度高效。
Tip 4：請 Claude 做影片 Demo
Claude Design 能做的遠比你想像的多。Ryan 給了一個非常關鍵的定位判斷：「它其實更像 Claude Code，而不是 canvas 類的設計工具。」
Ryan 原文：「Ask Claude to make video demos of your ideas. Claude Design can do almost anything you can think of. It’s honestly more like Claude Code than a canvas-based design tool.」
Mockup 與 Demo 的差別
靜態 mockup 能展示「長什麼樣子」，但影片 demo 能展示「用起來是什麼感覺」。在我們的設計專案中，客戶最常問的問題就是「這個互動起來會怎樣？」——一段 30 秒的 demo 影片，比十頁靜態稿更能推進決策。
把 Claude Design 當成「幫你把想法推進成可展示、可溝通的體驗」的工具，而不只是「產圖工具」，你的使用方式會完全不同。
Tip 5：接上 Connectors，讓設計吃到真實脈絡
設計不該憑空長出來。Ryan 特別強調要接上 docs 與 Slack 等 connectors，並舉了一個很具體的 prompt 範例：
「請讀一下 product roast 會議的筆記，針對裡面提到的所有問題，產一份探索不同設計解法的 deck。」
Ryan 原文：「Use connectors (esp. docs/slack). Go for a walk and touch some grass and come back with fresh eyes!」
上下文決定產出品質
這個訣竅的關鍵不是 connectors 本身，而是背後的觀念：AI 設計工具的產出品質，取決於你餵它多少真實的產品脈絡。
把會議記錄、用戶回饋、競品分析、技術限制這些資訊都接進來，Claude 產出的設計就不是「好看但不切實際」的空中樓閣，而是「有根據的設計提案」。
Ryan 還補了一句很有意思的話：下完 prompt 之後，出去散步、摸摸草，回來用全新的視角看結果。讓 AI 跑，讓人腦休息——這本身就是一種新的設計節奏。
Tip 6：請 Claude 做量身打造的小工具
不要用 canvas 工具的思維來用它。Ryan 強調 Claude Design 是「不同物種、有不同的超能力」。你可以請它為當下的任務做一個臨時的專用小工具——計算器、互動原型、資料視覺化——任何你想得到的。
Ryan 原文：「Ask Claude to make bespoke on-the-fly tools. It’s a different animal with different superpowers. Experiment and get funky!」
從「使用工具」到「創造工具」
傳統設計師的工作流是：找一個現成工具 → 學會它 → 在它的框架內工作。Claude Design 打破了這個模式——你不需要去找工具，你可以為每個任務量身打造工具。
這聽起來很抽象，舉個例子：假設你在做一個品牌色彩系統，你可以請 Claude 做一個即時的色彩對比度檢查器，輸入兩個色碼就告訴你是否符合 WCAG 無障礙標準。用完即丟，但解決了當下的問題。
Tip 7：知道什麼時候該慢下來，親手做
這是整串最重要的一點。新的 icon、spot illustration、品牌命名——這些細節的影響力不成比例地大。在 AI 設計的高速節奏裡，很容易被效率拖著跑，忘了停下來。
Ryan 原文：「Know when to slow down and do things by hand. Knowing when to slow down is an art form of its own.」
AI 加速的年代，「慢」是一種競爭力
當所有人都能用 AI 快速產出 80 分的設計，那最後 20 分的手工打磨就變成真正的差異化來源。
根據我們的經驗，以下這些環節值得慢下來親手處理：
- 品牌命名與 tagline：AI 可以給你一百個選項，但最終的決定需要人的直覺與品味
- Icon 與插畫：細微的線條粗細、圓角弧度，決定了品牌的「手感」
- 關鍵頁面的排版：首頁、關於我們這種門面頁，值得花時間逐像素調整
- 動態與轉場：0.3 秒還是 0.5 秒的差別，只有人能感受
Ryan 說「知道什麼時候該慢下來，本身就是一門藝術」——這句話值得每個用 AI 做設計的人記住。
給設計師與工程師的工作流建議
把 Ryan 的七個訣竅整合成一套可執行的工作流程：
第一步：先餵上下文（最值錢的一步）
- Design tokens 與 components
- 2-3 個核心頁面的現有設計
- PRD 或需求摘要
- 現有 codebase 與參考設計
第二步：找夥伴一起 Live Iterate
開會時不要只講抽象需求。讓 Claude 邊出稿邊修，團隊專注在限制條件、邏輯與取捨——Claude 負責把想法具象化。
第三步：改稿用 Point-and-Crit
不要說「整體再精緻一點」，而是具體指出：
- 「這個 CTA 太搶眼，降一級」
- 「這段 hierarchy 不清楚」
- 「這張卡片 padding 太鬆」
- 「這裡補上 loading 與 empty state」
第四步：做 Demo，不只做 Mockup
請 Claude 產出可以給團隊、主管、甚至使用者測試的互動 flow 或 video demo。靜態圖推不動決策，動態體驗可以。
Claude Design 適合什麼樣的團隊？
根據 Ryan 的使用情境和我們的觀察，Claude Design 最能發揮價值的場景是：
- 一人多線的設計師：像 Ryan 一樣同時服務多個產品線，需要快速切換上下文
- 設計師 + 工程師的小團隊：即時迭代取代來回修稿，大幅縮短設計到開發的落差
- 品牌顧問與設計公司：快速產出提案探索，讓客戶在早期就能看到具體方向
- 需要頻繁產出簡報與文件的團隊：one-pager、pitch deck、內部溝通文件
常見問題 FAQ
Claude Design 跟 Figma 或 Canva 有什麼不同？
Claude Design 不是取代 Figma 或 Canva，而是填補不同的角色。Figma 是精確的設計交付工具，Canva 是快速的視覺編輯器，而 Claude Design 更像一個「用對話驅動的設計協作夥伴」。它的強項是快速探索、即時迭代、接入真實產品脈絡，適合概念階段和快速原型，最終的精修仍然可能需要專業設計工具。
不會設計的人也能用 Claude Design 嗎？
可以，但效果取決於你提供的上下文品質。如果你有現成的 design system 和品牌規範可以餵給它，產出品質會很穩定。如果完全從零開始，建議先跟設計師合作建立基礎規範，再用 Claude Design 加速日常產出。
Claude Design 可以直接產出可上線的程式碼嗎？
Claude Design 的定位更偏向設計探索與原型產出，而非直接產出生產環境的程式碼。如果需要將設計轉換為可部署的前端程式碼，建議搭配 Claude Code 使用——先用 Claude Design 確認設計方向，再用 Claude Code 實作。
如何讓 Claude Design 的產出風格一致？
這就是 Tip 1 的重點：先花時間建立 design system。把品牌色彩、字體、間距、元件規則都設定好，後續每次產出都會自動套用這套規範。前期投資一小時，後面省下數十小時的修改時間。
Claude Design 支援中文介面嗎？
Claude Design 透過自然語言對話操作，支援中文 prompt 輸入與中文內容產出。你可以用中文描述需求、用中文做 Comment 標註，產出的設計稿也能包含中文文字內容。
AI 不會取代設計師，但會重新定義設計的價值
讀完 Ryan 的七個訣竅，你可能會有一個疑問：如果 AI 什麼都能做，設計師還需要存在嗎？
我們的答案很明確：AI 從來不是要取代人，而是賦能——讓人把時間花在真正需要人的地方。
Claude Design 能在三十秒內產出十個版面配置，但它不知道哪一個最能打動你的客戶。它能快速建出互動原型，但它無法判斷哪個轉場節奏最符合品牌的氣質。它能讀完所有會議記錄再產出設計提案，但它無法在客戶欲言又止的表情裡讀出真正的需求。
美感、判斷力、對人的理解——這些才是設計師真正的武器。AI 把重複性的執行工作接走之後，設計師反而能更專注在這些高價值的能力上。
這也是我們在好心地文創一直在實踐的事。我們用 AI 工具加速流程，但品牌的核心靈魂——從策略定位、視覺識別到每一個與消費者接觸的細節——始終由具備美感訓練與產業經驗的設計師主導。
工具會不斷迭代，但對美的堅持不會過時。
如果你正在思考如何讓品牌在 AI 時代保有獨特的設計質感，或者想了解怎麼把 AI 工具融入你的品牌設計流程而不失去溫度，歡迎與我們聊聊。好心地文創的設計團隊，既懂 AI 工具的效率，也懂品牌設計的堅持——而這個組合，正是這個時代最需要的。
