Claude Design, 訂閱內建的設計工具。
依作者所述,Claude Design 內建於現有的 Claude 訂閱中,位於 claude.ai/design,至少需要 Pro 方案才能使用。它不只是網站產生器:可以產出動畫網站與落地頁、簡報、LinkedIn 輪播與資訊圖、銷售提案與單頁、上手指南與 PDF,以及產品 UI 與 app 設計。
打開後有四種模式:Prototype(線框或高擬真 UI)、Slide deck(描述後由 Claude 生成)、From template(從預建範例開始)、Other(自訂)。在 Prototype 內,可在 Wireframe(粗略結構)與 High Fidelity(可直接微調的成品)之間選擇。
但作者強調:工具本身不是重點。多數人打開 Claude Design 後直接輸入「幫我做一個 AI 代理商的落地頁」,得到的結果差強人意,於是反覆 prompt,每次都消耗額度、版面不斷位移、文案空泛。問題的根源是一次要 Claude 決定太多事——顏色、字體、版面、文案、結構全擠在一個 prompt 裡。這份工作流就是為了解決這件事。
設計系統
範本
文案 Skill
建立設計
微調
交給 Claude Code
Claude Design is not the workflow. The workflow is what makes Claude Design work.
問題不在工具, 在你讓它一次決定太多。
作者把多數人的用法稱為「vibe designing」:打開 Claude Design,輸入一句模糊的需求,得到一個還可以但不太對的結果,接著反覆 prompt。每次迭代都消耗額度,版面持續位移,文案空泛。兩小時後,週額度去了一半,成品仍不滿意。這是大多數人對 Claude Design 的共同經驗。
原因只有一個:你在同一個 prompt 裡要 Claude 同時決定顏色、字體、版面、文案與結構。修正的方法很直接——在打開 Claude Design 之前,盡可能把一切先定義好。
定義得越多,Claude 需要猜的就越少;猜得越少,第一版輸出越好;第一版越好,需要的迭代就越少。這就是整套工作流背後的原則。後面四個步驟,前三步都發生在打開 Claude Design 之前。
多數人跳過前三步, 然後抱怨結果平庸。
整套流程有四個步驟。前三步——設計系統、範本、文案——都在打開 Claude Design 之前完成;第四步才進入工具。作者的說法是:前三步正是讓第四步變快的原因。下面先看四步全貌,再逐步拆解操作與 prompt。
STEP · 01
Design System
先建設計系統
品牌的藍圖:顏色、字體、按鈕、間距、風格。連上之後,所有產出自動符合品牌。最常被跳過,也最重要。
STEP · 02
Templates
為重複用途建範本
預先定義某類設計的版面與結構。結構先決定好,Claude 只負責填入品牌與內容,避免在版面上反覆迭代。
STEP · 03
Copy Skill
用 Skill 預寫文案
在 Claude Code 或 Claude desktop 建一個 skill,知道你的品牌語氣與範本,進工具前先寫好每段文案。
STEP · 04
Build
進 Claude Design 建立
選範本、連設計系統、貼上 skill 產出的 prompt。結構、品牌、文案都已定義,第一版完成度約 90%。
Step 1 — 永遠先建設計系統
設計系統是品牌的藍圖:你的顏色、字體、按鈕樣式、元素間距,以及讓成品「看起來像你的品牌、而非隨機 AI 範本」的整體風格。沒有它,Claude 每次都自行決定風格——可能好看,但不像你,而且每個專案都略有不同。連上設計系統後,每張落地頁、每份簡報、每個輪播都自動一致。
操作:在右側面板點 Design Systems 分頁 → Create new → 命名 → 用下列結構描述品牌:
Create a design system for [your brand name].
[One sentence about what the brand does.]
Brand personality: [3 words that describe the feel.]
Primary color: [your main color]
Accent color: [your secondary color]
Font feel: [modern/classic/bold/minimal]
Button style: [sharp/rounded/outlined]
Mode: [dark first/light first]Create a design system for IgnytLabs.
We build AI powered products for startups and businesses.
Brand personality: bold, clean, technical.
Primary color: deep navy blue.
Accent color: electric blue.
Font feel: modern and professional.
Button style: sharp not rounded.
Mode: dark first.Claude 會產出設計系統,顯示品牌色(含 hex)、字體、按鈕樣式與間距規則。若有不對,點 needs work 給回饋即可更新。之後每開新專案,先選這個設計系統再 prompt 任何內容。
Step 2 — 為每個重複用途建範本
範本預先定義某類設計的版面、格式與結構,是設計系統再為其穿上品牌外衣的骨架。沒有範本,Claude 每次都要從零判斷結構,你會在版面上反覆迭代——這是 Claude Design 最耗額度的地方之一。
操作:到 Examples 分頁瀏覽預建設計(也可從 Dribbble、Framer、Behance 找靈感),截圖想用的版面;開一個已連設計系統的新專案,附上截圖並說:
I want to create a template using these layouts.
Recreate them in our brand colors and visual identity.
Build it as a slide deck format so all layouts
are in one place. Use placeholders for copy.Claude 以你的品牌風格重建所有版面,來回調整滿意後,點 Share → Duplicate as Template 存到帳號。之後每開新專案走 From Template、選它、連設計系統,結構與品牌在你打字之前就都套用好了。
Step 3 — 用 Skill 預先定義文案
Claude Design 是設計工具,不是為寫文案優化的。在裡面迭代文案,等於把設計額度燒在寫作任務上。修正方式:進工具前先用一個 skill(在 Claude Code 或 Claude desktop)把文案寫好。Skill 是一個存好的工作流,建一次、用一輩子。
這個 copy skill 要知道:你的品牌語氣、你的範本版面與各類內容該用哪個、以及你喜歡的過往文案範例。需要新設計時先跑 skill,給它 brief——它會決定每段用哪個範本版面、為每段寫出可選的文案,最後輸出一份完整的設計 prompt:每段對應範本、每段文案都已寫好並經你確認,可直接貼進 Claude Design。
Step 4 — 進 Claude Design 建立
此時一切已就緒。依序:到 claude.ai/design → 點 From Template → 選範本 → 連設計系統 → 把 skill 的 prompt 貼進對話 → 回答澄清問題或直接說「decide for me」→ 檢視輸出。因為結構、品牌、文案都已定義,第一版會明顯優於冷啟動的單發 prompt,通常只需兩三處小調整即可完成。
第一版之後, 用四個工具收尾。
第一版出來後,需要調整的地方有四個工具可用,加上把設計交給 Claude Code 建置的交付方式。作者的說法是:這四個工具的組合,讓你從第一版到完成只需幾分鐘、而非數小時。
TOOL 01 · Direct edit — 直接改
點任意文字,手動修改內容。最快的微調方式,適合改錯字、換措辭,不需要任何 prompt。
來源 · @PrajwalTomar_ 推文
TOOL 02 · Comments — 描述要改什麼
點選某個特定元素,用文字描述你想要的變更。Claude 會依描述調整該元素,適合針對單一區塊的修正。
來源 · @PrajwalTomar_ 推文
TOOL 03 · Draw — 在畫布上畫
直接在畫布上手繪示意,Claude 會解讀你的草圖並轉成設計。適合用畫的比用講的更清楚的版面想法。
來源 · @PrajwalTomar_ 推文
TOOL 04 · Tweaks — 不用 prompt 的變體
不需要 prompt 就能切換配色、明暗模式、版面變體。用來快速試不同方向,而不消耗對話來回。
來源 · @PrajwalTomar_ 推文
SHIP 05 · 交給 Claude Code 建置
設計完成後點右上 Share → handoff to Claude Code,複製指令貼進 Claude Code。它會把設計變成可運作的應用:資料庫、帳號、金流、能真正送出的表單。Claude Design 做設計,Claude Code 做建置。
來源 · @PrajwalTomar_ 推文
FLOW 06 · 每次都先連設計系統
每開一個新專案,順序固定:選範本 → 連設計系統 → 再貼 skill 產出的 prompt。前置順序對了,第一版才會在結構、品牌、文案三方面都到位。
來源 · @PrajwalTomar_ 推文
一次 @ignytlabs 客戶概念的完整跑法。
作者描述其團隊用這套四步流程做客戶概念稿:客戶說明需求,跑完工作流後,一小時內就有高擬真概念稿可看。下面把「前置已備妥 → 進工具 → 微調 → 交付」的順序整理成一段操作流。
ok: ✓ 設計系統:IgnytLabs(deep navy + electric blue,dark first)
ok: ✓ 範本:落地頁 / 案例 / 提案 已存為 Template
ok: ✓ 文案 skill:依 brief 已輸出每段對應範本與文案
$ › 開啟 claude.ai/design
$ › From Template → 選擇 IgnytLabs 落地頁範本
$ › Connect design system → IgnytLabs
$ › 貼上 copy skill 產出的設計 prompt
$ › "decide for me" (回答澄清問題)
claude: 結構正確(來自範本)· 品牌正確(來自設計系統)
claude: 文案正確(來自 skill)
ok: → 第一版完成度約 70–90%,非從零開始
$ › Tweaks → 切換 dark / light、版面變體
$ › Comments → 點 hero 區塊調整間距
$ › Direct edit → 手動修兩處文字
$ › Share → Handoff to Claude Code → 複製指令
$ 貼進 Claude Code
ok: Claude Design 做設計 · Claude Code 做建置
ok: 客戶概念稿:一小時內可審閱
你不是從零開始, 而是在收尾一件已經完成七成的事—— 在 Claude Design 產出任何一個像素之前。
這段流程的重點
進工具時,結構、品牌、文案三件事都已經定好,所以 Claude Design 只需專注於執行——而不是同時猜五件事。第一版之所以接近完成,不是因為模型更聰明,而是因為前三步把不確定性都移到了工具之外。
作者也誠實標註:這套四步工作流改編自 Ben AI 在 YouTube 上的 Claude Design 影片,他實測多個專案後採用,並成為 @ignytlabs 實際的工作方式。
幾個誠實的提醒, 跑流程之前先知道。
瓶頸從來不是創意, 是產出。
作者的總結:設計的瓶頸從來不是創意,而是產出。把想法變成成品過去要花上好幾天——簡報設計師、等改稿、來回確認文案、付工作室時間。對任何願意把系統建好的人,這個瓶頸剛剛消失了。
一個單打獨鬥的 builder,只要有設計系統、一組範本、一個文案 skill,就能在一個下午產出過去一個設計團隊一週的量。不是因為 AI 全包,而是因為 AI 處理產出,你專注於判斷。@ignytlabs 過去要兩週的概念稿,現在一天就能準備好。
TLDR — 八條摘要
① 停止 vibe designing,在 prompt 之前先把一切定義好。 ② Step 1:先建設計系統,這是基礎。 ③ Step 2:為每個重複用途建範本,結構先於風格。 ④ Step 3:用 skill 在打開 Claude Design 之前先寫好文案。 ⑤ Step 4:選範本、連設計系統、貼 prompt,完成。 ⑥ 用 Direct edit、Comments、Draw、Tweaks 微調。 ⑦ 準備好實際建置時,用 Share 交給 Claude Code。 ⑧ 留意 token 用量;最後 20% 的人為判斷仍是關鍵。
原文出處
① @PrajwalTomar_ 推文——本文整理對象,完整四步工作流原文。 ② Ben AI(YouTube)——作者標註的原始工作流來源。 ③ claude.ai/design——Claude Design 產品本身(需至少 Pro 方案)。
瓶頸從來不是創意,而是產出。 這個瓶頸,對願意把系統建好的人,剛剛消失了。