用 Claude Code 做設計。

Claude Code 究竟是什麼

Claude Code 是 Anthropic 的 agentic 編碼工具。它讀取你的程式碼庫、編輯檔案、執行命令、與你的開發工具整合 —— 從自然語言任務出發去規劃、編寫並驗證，而不只是補全幾行程式碼。

它有多個共享同一引擎的形態：終端 CLI、面向 VS Code / Cursor / JetBrains 的 IDE 擴充套件、帶視覺化 diff 審閱的桌面應用，以及用於長時任務的網頁端。你的 CLAUDE.md 檔案、設定與 MCP server 在所有形態間通用。

• 指令檔案: Claude Code 在每次會話開始時讀取專案根目錄下的 CLAUDE.md —— 這正是寫入你的設計規範、token 與審閱清單的天然位置。
• Skills: Agent Skills 把可複用的指令、指令碼與資源打包，由 Claude 按需載入，其中就包括 Anthropic 官方的 Frontend Design skill 來注入品味。
• Plan 與 subagent: 它能先規劃再動手，並可派生 subagent 並行處理任務的不同部分，從而讓大型 UI 重構保持連貫。

• 廠商：Anthropic
• 憑證：Anthropic API key（BYOK，經 Console）或 Claude 訂閱（Pro / Max）
• 形態：終端 CLI、VS Code / Cursor / JetBrains 擴充套件、桌面應用、網頁端

Claude Code 為何擅長設計

在一眾 coding agent 裡，Claude Code 在前端工作上以“有品味”著稱。原因有幾點。

• 決策具體，不含糊: Claude Code 傾向於落到確切的選擇 —— 精確的 hex 色值、間距階梯、字號 ramp 與元件層級，而不是泛泛而談，而這正是真實介面與佔位草稿的分水嶺。
• 理解程式碼庫的推理: 憑藉較大的工作上下文，它能一次性跨多檔案重構 UI，複用你已有的元件與 token，而不是另造一套一次性樣式。
• 官方前端 skill: Anthropic 提供 Frontend Design skill，讓 Claude 先寫出設計方向，並刻意避開泛用系統字型與可預料的紫色漸變。

這和 Anthropic 對自家模型的說法一致：Claude 預設並沒有品味 —— 放任不管，它會收斂到網頁設計的統計中心（Inter、紫色漸變、柔和陰影）。給它約束，它才能產出好設計。Open Design 恰恰把這些輸入打包好了，這也是兩者天然契合之處（詳見下文）。

從零搭建用於設計工作的 Claude Code

下面是從一臺乾淨機器到一個能構建並驗證 UI 的 Claude Code 的完整路徑。

# 1. 安裝 Claude Code（推薦原生安裝）
curl -fsSL https://claude.ai/install.sh | bash
# 或：brew install --cask claude-code
# Windows PowerShell：irm https://claude.ai/install.ps1 | iex

# 2. 在你的專案裡啟動，首次執行時登入
cd your-project
claude            # 用 Claude 訂閱或 API key 登入

# 3. 生成專案上下文
/init             # 為本專案建立 CLAUDE.md

# 4. 新增官方 Frontend Design skill
claude plugin install frontend-design@claude-plugins-official

# 5. 接入 Figma MCP server（可選，用於設計交付）
claude plugin install figma@claude-plugins-official

• 把設計規則寫進去: 把你的 token、基礎原語與約定放進 CLAUDE.md 並讓 Claude 指向它們，這樣產出會貼合品牌，而不是退回到泛用樣子。
• 加上瀏覽器驗證: 接入 Playwright 或 Chrome MCP，讓 Claude 在真實瀏覽器裡渲染，並跨斷點檢查產出，而不僅僅確認構建透過。

CLAUDE.md 與 Skills 工作流

用 Claude Code 做設計、槓桿最高的閉環，是把真實參考連同你的設計上下文一起餵給它，再迭代到 UI 對得上 —— 由 CLAUDE.md 和 Skills 承載約束，免得你每次 prompt 都重新解釋一遍。

1. 從你手頭最清晰的視覺參考出發 —— 而且要包含多種狀態（桌面與移動、hover、空態、載入態），不要只給一張 hero 圖。
2. 在 prompt 裡說具體；即便是強 agent，含糊的 prompt 也只會產出泛泛的 UI。
3. 把你的設計系統與約定放進 CLAUDE.md，並告訴 Claude token 與標準原語在哪裡。
4. 新增 Frontend Design skill，讓 Claude 在寫程式碼前先確定一個真實的美學方向。
5. 接好瀏覽器驗證，讓 Claude 渲染、調整到各斷點，並對照參考做比對 —— 而不只是確認能構建透過。

把一張參考圖丟進會話，並用具體約束去提示：

claude "把 reference-desktop.png 和 reference-mobile.png 用
  React + Vite + Tailwind + TypeScript 實現。
  複用 CLAUDE.md 裡描述的設計系統元件與 token。
  匹配間距、佈局與層級；做成響應式。
  在瀏覽器裡渲染，跨斷點驗證它與參考一致，
  並迭代到對得上為止。"

同時跑一個 dev server，prompt 保持小而聚焦，好的迭代就 commit、壞的就 revert（revert 時告訴 Claude 一聲），讓每一輪都在乾淨的基礎上推進。較大的重構用 plan 模式，這樣動檔案前你能先審一遍方案。

Claude Code + Figma：設計 ↔ 程式碼往返

2026 年 2 月，Anthropic 與 Figma 透過 Figma MCP server 推出了一流的雙向整合。它在兩個方向都能用。

• 設計 → 程式碼: 在 Figma 裡選中一個 frame，或把連結粘進 Claude Code，拉取設計上下文，讓它用你已有的元件庫來實現這份設計。Code Connect 會讓產出與你真實的元件保持對齊。
• 程式碼 → 設計: 在瀏覽器裡構建並預覽一個功能，然後說一句“Send this to Figma”，把執行中的 UI 捕獲為可編輯的 Figma 圖層 —— 整屏或選中的某個元素皆可。

用 claude plugin install figma@claude-plugins-official 安裝一次即可（Dev Mode MCP 需要 Figma 付費方案）。同一個 Figma MCP 對 Claude Code、Codex、Cursor 與 VS Code 都可用 —— 正是 Open Design 所要編排的那類可移植、多 agent 能力。

Claude Code vs Codex vs Cursor 做設計

設計工作沒有唯一贏家 —— 每個 agent 各有所長，有經驗的團隊會把它們疊著用。一個公允的概括：

社群反覆得出的結論是：品味來自人。三者在沒有 skill、參考與約束時都會預設滑向泛用美學。這才是真正要解決的問題 —— 它是設計工具形狀的，而非模型形狀的。

常見坑，以及如何避開“AI 套路感”

即便 Claude Code 以有品味著稱，對 AI 生成設計最常見的吐槽仍是它顯得套路 —— Inter 字型、白底上的紫色漸變、柔和陰影、過大的圓角，一種“一看就是 AI 做的”的觀感。Anthropic 自己把這歸因於分佈收斂：安全的選擇在網頁訓練資料裡佔主導。其他被反映的問題還包括移動端佈局錯亂、以及指令文字漏進了 UI 文案。

• 裝上 Frontend Design skill: 它會逼 Claude 確定一個真實方向，並明確避開被 AI 濫用的字型與漸變。
• 啟用瀏覽器驗證: 讓 Claude 渲染並跨斷點自檢，避免佈局在移動端悄悄崩掉。
• 提供 token 與參考: 真實的設計 token 與參考截圖，是對產出質量影響最大的單一槓杆。
• 把規則寫進 CLAUDE.md: 把“不用 hero 卡片、最多兩種字型、品牌優先的層級”這類規則，放在 agent 每次都會讀到的地方。

注意每一條緩解措施，本質都是在給 agent 一份精選的設計上下文。逐個專案手工維護這份上下文，正是 Open Design 替你省掉的苦差。

在 Open Design 裡用 Claude Code 做設計

Open Design 就是上面那套工作流一直在呼喚的開源設計層。它把 Claude Code 當作一等介面卡，並在外面包上一層精選的 skill 與設計系統庫、一條結構化渲染流水線，以及一個本地桌面 UI —— 讓那份令 Claude Code 出彩的設計上下文，從第一次執行就在位，而不必每次手工拼裝。

1. 安裝 Open Design，並選擇 Claude Code 作為你的 agent。
2. 用你的 Anthropic API key（BYOK）或 Claude 訂閱認證 —— 憑證留在你自己機器上，絕不經我們中轉。
3. 挑一套設計系統與一個 skill，然後產出風格一致的 deck、原型與落地頁。
4. 每一件產物與 DESIGN.md 檔案都存在你自己的倉庫裡，而非託管雲端。

同一個 Claude Code agent、同一把 key —— 外加一套真實、可移植、開源的設計工作流。它本地優先、Apache-2.0，所以你的工作與憑證都不會離開你的機器。

常見問題

1. 01 Claude Code 適合做設計嗎？ +

   適合 —— 它被普遍認為是前端品味最好的 coding agent，會對 hex 色值、間距與字號階梯做出具體且理解程式碼庫的決策。配上 Frontend Design skill、一套設計系統與真實參考圖，它能產出生產級、響應式的 UI 並在瀏覽器裡驗證。缺了這份上下文，它就容易退回泛用樣子 —— 這正是 Open Design 要補的缺口。

2. 02 用 Claude Code 做設計需要 Claude 訂閱嗎？ +

   你可以用 Anthropic API key（BYOK，經 Console）或 Claude 訂閱（Pro / Max），兩者皆可。無論哪種，Open Design 都不會中轉你的憑證 —— 它們由你的 agent 在你機器上直接使用。

3. 03 前端設計該用 Claude Code 還是 Codex？ +

   兩者都很強。Claude Code 以具體、理解程式碼庫的設計決策與前端推理著稱；Codex 視覺打磨強，擅長委派式的沙箱構建。很多團隊兩者都用 —— Open Design 讓你切換 agent 而無需改動設計工作流。

4. 04 怎麼把 Claude Code 接到 Figma？ +

   用 claude plugin install figma@claude-plugins-official 安裝官方 Figma 外掛。之後你就能借助設計上下文在程式碼裡實現 Figma frame，並用“Send this to Figma”把執行中的 UI 推回成可編輯的 Figma 圖層。Dev Mode MCP 需要 Figma 付費方案。

5. 05 Skills 和 CLAUDE.md 是什麼？ +

   CLAUDE.md 是你專案根目錄裡的一個 markdown 檔案，Claude Code 在每次會話開始時都會讀它 —— 這是寫入設計規範的地方。Skills 把可複用的指令與資源打包，由 Claude 按需載入，其中包括 Anthropic 官方的 Frontend Design skill。Open Design 把兩者都做成精選庫，幫你免去逐專案搭建。

6. 06 怎麼避開泛用的“AI 套路感”？ +

   裝上 Frontend Design skill，提供真實的設計 token 與參考截圖，把品牌規則寫進 CLAUDE.md，並啟用瀏覽器驗證。Open Design 把這些做成精選庫，幫你免去逐專案搭建。

7. 07 Open Design 和 Anthropic 有從屬關係嗎？ +

   沒有。Claude Code 是 Anthropic 的產品；Open Design 是一個獨立的開源專案，把它作為一等介面卡來支援。Claude 與 Claude Code 是 Anthropic 的商標。

8. 08 我的檔案和憑證安全嗎？ +

   安全 —— Open Design 本地優先、Apache-2.0。你的檔案、產物與 DESIGN.md 都留在你自己的倉庫裡，你的 Anthropic 憑證由你的 agent 直接使用，絕不經 Open Design 伺服器中轉。