Claude Design：新工具，還是 Claude Code 套殼？
整理版優先睇
Claude Design 只係 Claude Code 套殼，唔需要特登轉過去
呢篇文章係由竇竇寫嘅，佢係一個重度 AI 研究愛好者，平時會試好多 AI 工具同方法。佢見到 X 上好多人話 Claude Design 係 Figma 殺手，但佢自己做咗對比測試之後，發現 Claude Design 同 Claude Code 嘅產出高度趨同，只係多咗一層包裝，唔係全新工具。文章主要想解決讀者「應唔應該由 Claude Code 轉去 Claude Design」嘅問題，最終結論係：如果你已經用緊 Claude Code，完全唔需要 switch，用 Skill 同 worktree 就可以做到甚至超越 Claude Design 嘅設計工作流。
作者先由官方資料確認 Claude Design 係用 Opus 4.7 驅動，額度獨立但燒得好快。然後佢設計兩輪測試：第一輪自然測試發現兩邊提問深度唔同，唔可以直接比較；第二輪鎖變量測試將所有條件寫死，結果兩個工具輸出嘅設計方向幾乎一樣，證明背後模型相同。之後佢揭露成本陷阱——Max 計劃大約 20 次迭代就用完 quota，設計師最需要嘅反覆試方向反而俾限制。
最後佢提供用 Claude Code 取代 Claude Design 嘅完整方法：寫一個 design questioning skill 模仿提問流程、接 shadcn MCP 自動裝組件、加 front-end skill 定義項目規範、用 git worktree 並行跑多個設計方案。…
- Claude Design 唔係 Figma 殺手，只係 Claude Code 加咗個 UI 層
- 鎖變量測試證實兩者輸出趨同，背後都係同一代模型
- Claude Design 限額燒得好快，Max 計劃約 20 次迭代就用曬
- 用 Skill 同 worktree 可以喺 Claude Code 復現甚至超越 Claude Design
- Claude Code 嘅真正優勢：接組件庫、MCP、完整 Git 操作、成本更低
內容片段
幫我做一個社區網站首頁。
目標用戶是剛搬到新城市的年輕人，
核心功能是發現附近活動、加入興趣小組、組織線下見面。
風格現代、友好、可信。先問我你需要知道的問題，再開始設計。一開波就講結論：Claude Design 只係套殼
Claude Design 上線嗰日，X 上歡呼聲一片，個個話係 Figma 殺手。但作者做咗對比測試，發現同一 prompt 下，Claude Design 同 Claude Code 嘅產出高度趨同。
官方文檔確認：Claude Design 默認由 Opus 4.7 驅動，使用額度獨立計算。但佢燒 quota 嘅速度比想像中快得多——Max 計劃大約 20 次設計迭代就見底，有啲人一個鐘就燒曬限額，換來嘅設計 Claude Code 一次就搞掂。
作者親測：兩輪對比，結果一樣
自然測試暴露問題：兩邊提問深度唔同，後續回答漂移
第一輪自然測試，作者只俾一條 prompt：「幫我做一個社區網站首頁」。結果 Claude Code 更傾向補齊 brief，Claude Design 提問少，更快進入多方向探索。呢個差異令結果唔可以直接比較。
- 1 鎖變量測試：將品牌、城市、語言、風格、必要模塊全部寫死，要求直接開始，唔再追問。
- 2 兩邊最終都落到幾乎同一組方向上：一個偏歸屬敍事，一個偏活動發現，一個做平衡。
- 3 證明背後跑嘅係同一代模型，Claude Design 只係包裝唔同。
最大嘅坑：成本限額燒得快
Claude Design 嘅限額係按周計，獨立計算，聽落好正。但佢燒 quota 嘅速度快過你想像。
Max 計劃上大約 20 次設計迭代就用完限額
有設計師一個鐘就燒曬限額，只換來一個簡單設計。設計師最需要嘅係反覆試方向，而 Claude Design 限制嘅正正係呢樣嘢。
Claude Code 用標準 quota，成本平好多
用 Skill 喺 Claude Code 復現 Claude Design
作者話，Claude Design 最大特色係問得深，呢個用一個 Skill 就可以模仿。Skill 入面寫清楚：幾時觸發提問、提問庫（5–10 個典型問題）、唔同網站嘅常見佈局。
- 接 shadcn / Aceternity / Hero UI 等組件庫，模型唔使從零諗按鈕設計
- 用 shadcn 官方 MCP server，模型自己分析需要咩組件自動裝
- 加 project-specific skill，等模型知道現有棧、規範、token，唔會浪費 token 重複探索
- Git 集成完整：可以 commit、branch、revert、merge，設計唔滿意直接 revert
Claude Design Git 只讀，Claude Code 可以做完整操作
升級玩法：並行 Agent + Worktree
唔用 Claude Design 都可以探索多種設計方向。喺 Claude Code 直接俾 prompt，叫佢喺唔同 worktree 啟動多個 sub agent，每個實現一個方案。
- 1 跑完後你拿到 N 種設計方案
- 2 揀一個最滿意嘅合併到 main
- 3 其他 worktree 刪掉
作者建議嘅動手步驟：
- 1 寫一個 design questioning skill，模仿提問流程
- 2 接 shadcn MCP，自動安裝組件
- 3 加一個 front-end skill，針對你個項目棧
- 4 用 worktree 玩並行方案，一次跑 3 個方向
- 5 如果要做動效，裝 Lenis + GSAP
做完呢五步，你嘅 Claude Code 就係一個比 Claude Design 更強嘅設計工作流
Claude Design 上線嗰日，X 上好多人歡呼，話係Figma殺手。我做咗個對比測試：同一個prompt之下，Claude Design 一次，Claude Code一次。
結果：兩邊產出高度相似。Claude Design 唔係新工具，似係 Claude Code 加咗層殼。
呢兩個輸出嘅差異似係交互同工作流包裝，而唔係令我明確覺得能力斷層嘅新工具。
一、先講結論
如果你已經用緊 Claude Code，唔需要轉去 Claude Design。繼續落去，我將每條結論嘅依據都講清楚。
通俗啲講：Claude Design 預設由 Claude Opus 4.7 驅動。佢嘅使用額度同 Claude Chat、Claude Code 分開計，唔會消耗普通對話或 Claude Code 嘅額度；但 Claude Design 本身有獨立嘅每週額度，超額之後可以透過 extra usage 繼續用，但要額外收費。
以上資訊官方文檔可以查到。
二、我做咗個對比測試
為咗證明呢點，我跑咗兩輪 prompt：
2.1 自然測試
幫我做一個社區網站首頁。
目標用戶是剛搬到新城市的年輕人，
核心功能是發現附近活動、加入興趣小組、組織線下見面。
風格現代、友好、可信。先問我你需要知道的問題，再開始設計。第一輪係自然測試：兩邊都只收到上面呢條初始 prompt。呢一輪好快暴露一個問題：兩邊嘅提問深度唔一樣，我後續回答都出現漂移。
所以它唔可以直接攞嚟比較邊個首頁好啲。
上圖係 Claude design 第一輪 prompt 首頁設計結果截圖。
下圖係 Claude code 第一輪 prompt 首頁設計結果截圖。
佢真正說明嘅係另一件事：Claude Code 更加傾向先將 brief 補完，Claude Design 提問少啲，更快進入多方向探索。
上圖係 Claude code 終端顯示嘅問題同我嘅回答；下圖係 Claude design 我嘅回答記錄：
2.2 鎖變量測試
第二輪係鎖變量測試。我將品牌、城市、語言、風格、必要模塊、變體要求一次過寫入同一條 prompt，要求兩邊都直接開始，唔再繼續追問。呢個版本先係後面真正拎嚟比結果嘅依據。
幫我做一個社區網站首頁首版。以下條件已經確定，請不要繼續追問，直接開始：
- 品牌名：Herewe / 同鄰（臨時）
- 目標用戶：剛搬到新城市的 22-35 歲年輕人
- 核心功能：發現附近活動、加入興趣小組、組織線下見面
- 城市範圍：上海
- 語言：中文為主，少量英文點綴，不做完整雙語
- 風格：現代、友好、可信，偏温暖剋制，參考 Airbnb / Notion 的氣質
- Hero 重點：發現附近活動、加入興趣小組、認識新人三者並重
- 內容要求：使用真實風格佔位內容，不用 lorem ipsum
- 必要模塊：Hero + CTA、附近活動、興趣小組、新人引導、用戶故事/信任背書、熱門
話題、Footer
- 變體要求：首版給 2-3 個不同方向，但不要省略關鍵模塊；差異主要體現在 Hero 敍
事、視覺基調、模塊順序
- 交付方式：按你的默認最自然方式給首版結果
- 設備優先級：桌面優先，移動端先不強求
請嚴格遵守以上約束，不要自行改成全國城市、完整雙語，或增刪核心模塊。開始後直接
給出首版結果，並簡要說明每個方向各自的側重點。
如果你想測“純視覺探索”而不是“默認工作方式”，只把其中一行改成：
- 交付方式：先不要寫代碼，只給 2-3 個首頁方向方案結果好有趣：兩邊最後都落到幾乎同一組方向上
一個偏「歸屬敍事」，一個偏「活動發現」，一個喺「活動 / 小組 / 認識新人」之間做平衡。
呢個係 Claude code 跑出嚟俾嘅索引截圖。
Claude design 感覺未跑完，因為三個方向嘅 deck 切換展示功能冇真實噉進行切換展示。
今次兩邊可以打得咁接近，一個重要原因係：背後跑嘅係同一代模型。
至少喺呢輪首頁任務入面，Claude Design 俾我嘅感覺，似係俾產品化包裝過嘅一套能力，而唔係一個明顯斷層嘅新品種。
補充：
好多睇落似一鍵生成嘅神級 Demo，實際上係靠多輪工作流，而唔係 Claude Design 呢個殼本身。
三、最大嘅陷阱：成本
Claude Design 嘅限額係按星期計，獨立計算，唔佔用其他 Claude 限額。
聽落好美好。但佢燒 quota 嘅速度比你諗嘅快好多。
真實回饋：喺 Max 計劃上，做咗大約 20 次設計迭代就用曬額度。仲有人 1 小時就用曬限額，最後只換到一個簡單設計——呢個設計 Claude Code 一次就搞掂。
設計師最需要係乜？係反覆試唔同方向。
而 Claude Design 限制嘅正正就係呢個能力。
四、用 Skill 喺 Claude Code 入面復現 Claude Design
Claude Design 最大嘅「特色」係佢會問你一堆問題，比 Claude Code 嘅 plan mode 問得深入好多。
呢件事喺 Claude Code 入面用一個 Skill 就搞掂。
Skill 入面寫清楚呢幾件事：
幾時觸發提問 提問嘅庫（典型問題 5-10 個，按場景分類） 唔同類型網站嘅常見佈局（等模型有 layout 直覺） 資訊收集完先開始實現
效果幾乎一樣，分別喺呢度：
| 直接係代碼 | ||
| 完整操作 | ||
五、Claude Code 嘅真正優勢喺呢度
1. 接組件庫
shadcn / Aceternity / Hero UI 呢啲已經做好動效嘅組件庫都直接用到。
模型唔使由零諗「按鈕應該係點樣」，將心思放喺整體設計上面。
2. 接 MCP
shadcn 有官方 MCP server。你唔使話佢知裝邊個組件，佢自己分析需要乜、自己裝。
呢樣係 Claude Design 做唔到嘅——佢冇 MCP 通道。
3. 接項目專屬 Skill
可以用 skill creator 寫一個針對目前項目嘅 front-end 設計 skill，等模型知道：
目前項目用咩棧 現有嘅組件、規範、token 邊啲地方唔可以改
咁佢就唔會浪費 token 去重複探索已有代碼。
4. Git 集成係真係用到
Claude Design 都話接咗 GitHub，但只限於讀——攞倉庫入面嘅文件做參考。
Claude Code 可以做完整 git 操作：
✓ commit✓ branch✓ revert✓ merge設計版本唔滿意？直接 git revert 返上一個版本。Claude Design 做唔到。
六、升級玩法：並行 Agent + Worktree
唔使 Claude Design 都可以探索多種設計方向。
喺 Claude Code 入面直接俾一個 prompt：等佢喺唔同 worktree 入面啟動多個 sub agent，每個 agent 實現一個唔同嘅設計方案。
跑完之後：
你拎到 N 種唔同方向嘅設計方案 揀一個最滿意嘅合併到 main 其他 worktree 刪咗
比 Claude Design 強嘅地方在於：每個方案都係真代碼，揀中嗰個直接就可以 ship，唔使再俾前端工程師重新做一次。
七、即刻動手
如果你而家用緊 Claude Code，下面呢幾件事按順序做完，就可以復現甚至超過 Claude Design：
寫一個 design questioning skill：模仿 Claude Design 嘅提問流程，問完先實現 接 shadcn MCP：等組件自動安裝，唔使手動指定 加一個 front-end skill：針對你項目棧寫一份，避免每次都解釋項目結構 用 worktree 玩並行方案：一次跑 3 個唔同方向，揀最好嘅合併 如果要造動效：裝 Lenis + GSAP，等 Claude Code 直接調用
做完呢五步，你嘅 Claude Code 就係一個比 Claude Design 更強嘅設計工作流。
最後
你買 Claude Design，買嘅唔係設計能力，買嘅係 Anthropic 將 Opus 4.7 重新裝一次盒嘅錢。
已經用緊 Claude Code 嘅人，唔需要轉。
完。
能夠識別代碼入面嘅陷阱、能夠判斷邊條路值得行、能夠將技術變成可用嘅嘢——呢啲先係 AI 時代真正值錢嘅能力。
「AI Native 實戰」訂閲說明
適合邊個：
想持續瞭解 AI 工具、Claude / Codex / Agent 實戰更新嘅人
你可以得到：
1. 每星期篩一次值得睇嘅 AI 工具同更新
2. 遇到部署、揀嘢、使用問題可以直接問我
3. 幫你少踩陷阱，節省自己揾資料同試錯時間
價格：
體驗價 19.9 元 /年
訂閲方式：
加我微信 kbhero21 / 直接私信我
備註：AI Native
更加鍾意分享我自己試過、踩過陷阱、最後覺得真係有用嘅嘢
關注我，一齊將複雜嘅 AI，變成普通人都用得到嘅日常。
Claude Design 上線那天，X 上一片歡呼，說是Figma殺手。我做了一個對比測試：同一個prompt下，Claude Design 一次，Claude Code一次。
結果：兩邊產出高度趨同。Claude Design 不是新工具，更像是 Claude Code 加了一層套殼。
這兩個輸出的差異更像交互和工作流包裝，而不是讓我明確感到能力斷層的新工具。
一、先說結論
如果你已經在用 Claude Code，不需要切到 Claude Design。繼續往下，我把每條結論的依據都講明白。
俗話說就是：Claude Design 默認由 Claude Opus 4.7 驅動。它的使用額度與 Claude Chat、Claude Code 分開計算，不會消耗普通對話或 Claude Code 的額度；但 Claude Design 本身有獨立的每週額度，超出後可通過 extra usage 繼續使用並額外計費。
以上信息官方文檔可查證。
二、我做了一個對比測試
為了證明這一點，我跑了兩輪 prompt：
2.1 自然測試
幫我做一個社區網站首頁。
目標用戶是剛搬到新城市的年輕人，
核心功能是發現附近活動、加入興趣小組、組織線下見面。
風格現代、友好、可信。先問我你需要知道的問題，再開始設計。第一輪是自然測試：兩邊都只收到上面這一條初始prompt。這一輪很快暴露出一個問題：兩邊的提問深度不一樣，我後續回答也出現了漂移。
所以它不能直接拿來比較誰的首頁更好。
上圖為Claude design 第一輪prompt首頁設計結果截圖。
下圖為Claude code 第一輪prompt 首頁設計結果截圖。
它真正說明的是另一件事：Claude Code 更傾向先把 brief 補全，Claude Design 提問更少，更快進入多方向探索。
上圖為Claude code終端顯示的問題和我的回答；下圖是Claude design我的回答記錄：
2.2 鎖變量測試
第二輪是鎖變量測試。我把品牌、城市、語言、風格、必要模塊、變體要求一次性寫進同一條 prompt，要求兩邊都直接開始，不再繼續追問。這個版本才是後面真正拿來比結果的依據。
幫我做一個社區網站首頁首版。以下條件已經確定，請不要繼續追問，直接開始：
- 品牌名：Herewe / 同鄰（臨時）
- 目標用戶：剛搬到新城市的 22-35 歲年輕人
- 核心功能：發現附近活動、加入興趣小組、組織線下見面
- 城市範圍：上海
- 語言：中文為主，少量英文點綴，不做完整雙語
- 風格：現代、友好、可信，偏温暖剋制，參考 Airbnb / Notion 的氣質
- Hero 重點：發現附近活動、加入興趣小組、認識新人三者並重
- 內容要求：使用真實風格佔位內容，不用 lorem ipsum
- 必要模塊：Hero + CTA、附近活動、興趣小組、新人引導、用戶故事/信任背書、熱門
話題、Footer
- 變體要求：首版給 2-3 個不同方向，但不要省略關鍵模塊；差異主要體現在 Hero 敍
事、視覺基調、模塊順序
- 交付方式：按你的默認最自然方式給首版結果
- 設備優先級：桌面優先，移動端先不強求
請嚴格遵守以上約束，不要自行改成全國城市、完整雙語，或增刪核心模塊。開始後直接
給出首版結果，並簡要說明每個方向各自的側重點。
如果你想測“純視覺探索”而不是“默認工作方式”，只把其中一行改成：
- 交付方式：先不要寫代碼，只給 2-3 個首頁方向方案結果很有意思：兩邊最後都落到了幾乎同一組方向上
一個偏“歸屬敍事”，一個偏“活動發現”，一個在“活動 / 小組 / 認識新人”之間做平衡。
這是Claude code跑出來給的索引截圖。
Claude design感覺沒有跑完，因為三個方向的deck切換展示功能並沒有真實地進行切換展示。
這次兩邊能打得這麼接近，一個重要原因是：背後跑的是同一代模型。
至少在這輪首頁任務裏，Claude Design 給我的感覺，更像是被產品化包裝過的一套能力，而不是一個明顯斷層的新物種。
補充：
很多看起來像一鍵生成的神級 Demo，實際靠的是多輪工作流，而不是 Claude Design 這個殼本身。
三、最大的坑：成本
Claude Design 的限額是按周算的，獨立計算，不佔用其他 Claude 限額。
聽起來很美好。但它燒 quota 的速度比你想象的快得多。
真實反饋：在 Max 計劃上，做了大約 20 次設計迭代就把額度跑完了。 還有人 1 小時就把限額燒光，最後只換來一個簡單設計——這設計 Claude Code 一次就能搞定。
設計師最需要的是什麼？是反覆試不同方向。
而 Claude Design 限制的恰恰就是這個能力。
四、用 Skill 在 Claude Code 裏復現 Claude Design
Claude Design 最大的「特色」是它會問你一堆問題，比 Claude Code 的 plan mode 問得深得多。
這件事在 Claude Code 裏用一個 Skill 就能搞定。
Skill 裏寫清楚這幾件事：
什麼時候觸發提問 提問的庫（典型問題 5–10 個，按場景分類） 不同類型網站的常見佈局（讓模型有 layout 直覺） 信息收集完才開始實現
效果幾乎一樣，區別在這裏：
| 直接是代碼 | ||
| 完整操作 | ||
五、Claude Code 的真正優勢在這裏
1. 接組件庫
shadcn / Aceternity / Hero UI 這些已經做好動效的組件庫都能直接用。
模型不用從零想「按鈕該長啥樣」，把心思花在整體設計上。
2. 接 MCP
shadcn 有官方 MCP server。你不用告訴它裝哪個組件，它自己分析需要什麼、自己裝。
這是 Claude Design 做不到的——它沒有 MCP 通道。
3. 接項目專屬 Skill
可以用 skill creator 寫一個針對當前項目的 front-end 設計 skill，讓模型知道：
當前項目用什麼棧 現有的組件、規範、token 哪些地方不能改
這樣它不會浪費 token 去重複探索已有代碼。
4. Git 集成是真的可用
Claude Design 也號稱接了 GitHub，但僅限於讀——拿倉庫裏的文件做參考。
Claude Code 可以做完整 git 操作：
✓ commit✓ branch✓ revert✓ merge設計版本不滿意？直接 git revert 回上一個版本。Claude Design 做不到。
六、升級玩法：並行 Agent + Worktree
不用 Claude Design 也能探索多種設計方向。
在 Claude Code 裏直接給一個 prompt：讓它在不同 worktree 裏啓動多個 sub agent，每個 agent 實現一個不同的設計方案。
跑完之後：
你拿到 N 種不同方向的設計方案 挑一個最滿意的合併到 main 其他 worktree 刪掉
比 Claude Design 強的點在於：每個方案都是真代碼，挑中的那個直接就能 ship，不用再讓前端工程師重做一遍。
七、馬上動手
如果你現在用 Claude Code，下面這幾件事按順序做完，就能復現甚至超過 Claude Design：
寫一個 design questioning skill：模仿 Claude Design 的提問流程，問完再實現 接 shadcn MCP：讓組件自動安裝，不用手動指定 加一個 front-end skill：針對你項目棧寫一份，避免每次都解釋項目結構 用 worktree 玩並行方案：一次跑 3 個不同方向，挑最好的合併 如果要做動效：裝 Lenis + GSAP，讓 Claude Code 直接調用
做完這五步，你的 Claude Code 就是一個比 Claude Design 更強的設計工作流。
最後
你買 Claude Design，買的不是設計能力，買的是 Anthropic 把 Opus 4.7 重新裝一次盒子的錢。
已經在用 Claude Code 的人，不需要切。
end.
能識別代碼裏的坑、能判斷哪條路值得走、能把技術變成可用的東西—這些才是 AI 時代真正值錢的能力。
「AI Native 實戰」訂閲說明
適合誰：
想持續瞭解 AI 工具、Claude / Codex / Agent 實戰更新的人
你能得到：
1. 每週篩一遍值得看的 AI 工具和更新
2. 遇到部署、選型、使用問題可直接問我
3. 幫你少踩坑，節省自己找資料和試錯時間
價格：
體驗價 19.9 元 /年
訂閲方式：
加我微信kbhero21 / 直接私信我
備註：AI Native
更喜歡分享 我自己試過、踩過坑、最後覺得真有用的東西
關注我，一起把複雜的 AI，過成普通人也能用上的日常。