Claude Code原生支持Claude Design！一個design命令，程序員也可以做原型 做優美的界面，挑戰Figma switch
整理版優先睇
Claude Code新增Design功能，程序員用自然語言生成界面，無需學Figma
呢篇文章講嘅係Claude新出嘅Design功能，主要係幫一啲唔擅長界面設計嘅程序員解決煩惱。作者本身都係程序員，知道好多同行對住產品經理同UI設計師覺得頭痛，而家終於有個工具可以將設計同程式碼直接打通，唔使再學Figma或者墨刀呢類設計軟件。
要開始用Design功能，首先要有Claude Pro以上嘅賬號，因為呢個功能暫時係網頁版先用到。然後你需要一個design system，入面定義好字體、顏色等設計規範，可以係一個叫design.md嘅檔案。你可以直接用別人整好嘅design system，例如去一個網站下載現成嘅design.md，再上載去Claude；亦可以透過/design-sync指令，根據自己嘅項目生成一個專屬嘅design system。成個流程幾順暢，但係消耗token會比較大。
實戰嘅時候，左邊可以用自然語言同Claude溝通，右邊即時顯示設計效果。你可以指出要改嘅地方，例如改字體大小或者顏色，甚至用畫筆圈出來叫AI修改。改好之後可以分享出去，再傳返去Claude Code度，真正實現設計到程式碼嘅無縫銜接。
- Design功能令程序員可以直接用自然語言生成界面，免除學習Figma等設計工具嘅需要。
- 使用前必需有Claude Pro賬號，並準備一個design.md檔案嚟定義設計規範。
- 可以導入現有嘅design system，或者用/design-sync指令根據自己項目自動生成。
- 呢個功能將設計同程式碼直接打通，改變咗傳統由UI設計師到開發者嘅工作流程。
- 實戰中可以用自然語言溝通，即時編輯修改，最後分享嵌入Claude Code項目，快捷高效。
現成design.md下載
可以從getdesign.md網站下載現成嘅design.md檔案，例如Binance嘅設計系統，直接導入Claude使用。
Design功能點解幫到程序員？
好多程序員喺開發時最大嘅煩惱就係
界面美觀
，呢部分一向係產品經理同UI設計師嘅範疇。
但而家Claude新出嘅
Design
功能，令到界面設計同程式碼直接打通，程序員唔使再學
Figma
或者
墨刀
呢啲設計工具，用起嚟好順手。
不過要注意，呢個功能消耗
token
比較大，而且暫時只喺網頁版用到，需要有
Claude Pro以上嘅賬號
先可以授權使用。
用現有Design System快速開始
如果你本身已經有Design System，可以直接導入去Claude嘅
create design system
功能。點擊網頁下面嘅掣，進入導入界面，有兩個選擇：
- 第一個選擇係上載一個準備好嘅design.md檔案，你可以從getdesign.md網站下載現成嘅，例如Binance嘅設計系統。
- 第二個選擇係直接由Claude幫你生成，不過需要等幾分鐘先會有結果。
上載完之後，Claude會顯示顏色、色號同好多設計要素，咁你就有一個自己嘅
design system
，後面所有設計都可以保持統一風格。
根據自己項目自訂Design System
如果你想用自己項目嘅風格，唔想用別人嘅，可以透過
/design-sync
指令，直接喺Claude Code終端輸入呢個命令。
完成之後，網頁端就會適配你嘅
design system
。不過留意，呢個過程需要等一段時間，因為要分析你嘅項目嚟生成對應嘅設計規範。
實戰：自然語言溝通即時設計
實際用嘅時候，左邊係自然語言對話框，你可以直接輸入要求，右邊會即時顯示生成嘅界面。頂層可以揀
edit
模式，直接改字體大小、顏色等；亦可以用
畫筆
圈出某個區域，叫AI幫你修改。
設計好之後，可以
share
出去，然後將結果發返去Claude Code，無論係終端版定網頁版嘅Claude Code都得。呢個流程真正做到
設計即程式碼
，大大縮短咗從設計到開發嘅時間。
