這是 Prajwal Tomar(@ignytlabs 創辦人)分享的 Claude Design 四步工作流。核心主張:不要邊想邊做(vibe designing),而是在打開 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 裡。這份工作流就是為了解決這件事。
作者把多數人的用法稱為「vibe designing」:打開 Claude Design,輸入一句模糊的需求,得到一個還可以但不太對的結果,接著反覆 prompt。每次迭代都消耗額度,版面持續位移,文案空泛。兩小時後,週額度去了一半,成品仍不滿意。這是大多數人對 Claude Design 的共同經驗。
原因只有一個:你在同一個 prompt 裡要 Claude 同時決定顏色、字體、版面、文案與結構。修正的方法很直接——在打開 Claude Design 之前,盡可能把一切先定義好。
定義得越多,Claude 需要猜的就越少;猜得越少,第一版輸出越好;第一版越好,需要的迭代就越少。這就是整套工作流背後的原則。後面四個步驟,前三步都發生在打開 Claude Design 之前。
整套流程有四個步驟。前三步——設計系統、範本、文案——都在打開 Claude Design 之前完成;第四步才進入工具。作者的說法是:前三步正是讓第四步變快的原因。下面先看四步全貌,再逐步拆解操作與 prompt。
設計系統是品牌的藍圖:你的顏色、字體、按鈕樣式、元素間距,以及讓成品「看起來像你的品牌、而非隨機 AI 範本」的整體風格。沒有它,Claude 每次都自行決定風格——可能好看,但不像你,而且每個專案都略有不同。連上設計系統後,每張落地頁、每份簡報、每個輪播都自動一致。
操作:在右側面板點 Design Systems 分頁 → Create new → 命名 → 用下列結構描述品牌:
Claude 會產出設計系統,顯示品牌色(含 hex)、字體、按鈕樣式與間距規則。若有不對,點 needs work 給回饋即可更新。之後每開新專案,先選這個設計系統再 prompt 任何內容。
範本預先定義某類設計的版面、格式與結構,是設計系統再為其穿上品牌外衣的骨架。沒有範本,Claude 每次都要從零判斷結構,你會在版面上反覆迭代——這是 Claude Design 最耗額度的地方之一。
操作:到 Examples 分頁瀏覽預建設計(也可從 Dribbble、Framer、Behance 找靈感),截圖想用的版面;開一個已連設計系統的新專案,附上截圖並說:
Claude 以你的品牌風格重建所有版面,來回調整滿意後,點 Share → Duplicate as Template 存到帳號。之後每開新專案走 From Template、選它、連設計系統,結構與品牌在你打字之前就都套用好了。
Claude Design 是設計工具,不是為寫文案優化的。在裡面迭代文案,等於把設計額度燒在寫作任務上。修正方式:進工具前先用一個 skill(在 Claude Code 或 Claude desktop)把文案寫好。Skill 是一個存好的工作流,建一次、用一輩子。
這個 copy skill 要知道:你的品牌語氣、你的範本版面與各類內容該用哪個、以及你喜歡的過往文案範例。需要新設計時先跑 skill,給它 brief——它會決定每段用哪個範本版面、為每段寫出可選的文案,最後輸出一份完整的設計 prompt:每段對應範本、每段文案都已寫好並經你確認,可直接貼進 Claude Design。
此時一切已就緒。依序:到 claude.ai/design → 點 From Template → 選範本 → 連設計系統 → 把 skill 的 prompt 貼進對話 → 回答澄清問題或直接說「decide for me」→ 檢視輸出。因為結構、品牌、文案都已定義,第一版會明顯優於冷啟動的單發 prompt,通常只需兩三處小調整即可完成。
第一版出來後,需要調整的地方有四個工具可用,加上把設計交給 Claude Code 建置的交付方式。作者的說法是:這四個工具的組合,讓你從第一版到完成只需幾分鐘、而非數小時。
點任意文字,手動修改內容。最快的微調方式,適合改錯字、換措辭,不需要任何 prompt。
來源 · @PrajwalTomar_ 推文點選某個特定元素,用文字描述你想要的變更。Claude 會依描述調整該元素,適合針對單一區塊的修正。
來源 · @PrajwalTomar_ 推文直接在畫布上手繪示意,Claude 會解讀你的草圖並轉成設計。適合用畫的比用講的更清楚的版面想法。
來源 · @PrajwalTomar_ 推文不需要 prompt 就能切換配色、明暗模式、版面變體。用來快速試不同方向,而不消耗對話來回。
來源 · @PrajwalTomar_ 推文設計完成後點右上 Share → handoff to Claude Code,複製指令貼進 Claude Code。它會把設計變成可運作的應用:資料庫、帳號、金流、能真正送出的表單。Claude Design 做設計,Claude Code 做建置。
來源 · @PrajwalTomar_ 推文每開一個新專案,順序固定:選範本 → 連設計系統 → 再貼 skill 產出的 prompt。前置順序對了,第一版才會在結構、品牌、文案三方面都到位。
來源 · @PrajwalTomar_ 推文作者描述其團隊用這套四步流程做客戶概念稿:客戶說明需求,跑完工作流後,一小時內就有高擬真概念稿可看。下面把「前置已備妥 → 進工具 → 微調 → 交付」的順序整理成一段操作流。
進工具時,結構、品牌、文案三件事都已經定好,所以 Claude Design 只需專注於執行——而不是同時猜五件事。第一版之所以接近完成,不是因為模型更聰明,而是因為前三步把不確定性都移到了工具之外。
作者也誠實標註:這套四步工作流改編自 Ben AI 在 YouTube 上的 Claude Design 影片,他實測多個專案後採用,並成為 @ignytlabs 實際的工作方式。
claude.ai/design,依作者所述需要至少 Pro 方案才能存取。
作者的總結:設計的瓶頸從來不是創意,而是產出。把想法變成成品過去要花上好幾天——簡報設計師、等改稿、來回確認文案、付工作室時間。對任何願意把系統建好的人,這個瓶頸剛剛消失了。
一個單打獨鬥的 builder,只要有設計系統、一組範本、一個文案 skill,就能在一個下午產出過去一個設計團隊一週的量。不是因為 AI 全包,而是因為 AI 處理產出,你專注於判斷。@ignytlabs 過去要兩週的概念稿,現在一天就能準備好。
① 停止 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 方案)。