從 Figma 到 Claude Code：設計師實戰指南

1┌─────────────────────────────────────────────────────────────────────────┐
2│                                                                         │
3│   之前（交付地獄）                      之後（氛圍編碼）                    │
4│   ────────────────────                  ───────────────────              │
5│                                                                         │
6│   設計                                設計                               │
7│      ↓                                    ↓                             │
8│   規格文件                            Claude 直接讀取 Figma               │
9│      ↓                                    ↓                             │
10│   開發者自行解讀                     你下指令：「建構這個」                  │
11│      ↓                                    ↓                             │
12│   審查                                產出可用的程式碼                      │
13│      ↓                                    ↓                             │
14│   反饋循環 ×10                       直接上線 🚀                         │
15│      ↓                                                                  │
16│   「差不多就好」                       時間：幾分鐘                        │
17│                                                                         │
18│   時間：好幾週                                                           │
19│                                                                         │
20└─────────────────────────────────────────────────────────────────────────┘

1Figma.com → 點擊個人檔案（左上角）→ 設定 → 安全性
2→ 個人存取金鑰 → 產生新金鑰 → 立即複製

1claude mcp add figma -e FIGMA_PERSONAL_ACCESS_TOKEN=figd_xxxxxxxxxx

1在 Claude Code 中，輸入：/mcp
2你應該會看到：figma ✓ 已連線

1┌─────────────────────────────────────────────────────────────────────────┐
2│                         你的 FIGMA 檔案                                   │
3├─────────────────────────────────────────────────────────────────────────┤
4│                                                                         │
5│   ┌─────────────────────────────────────────────────────────────────┐   │
6│   │  CLAUDE 可以讀取的內容                                           │   │
7│   ├─────────────────────────────────────────────────────────────────┤   │
8│   │  ✓ 圖層名稱與階層    ✓ 自動佈局設定                              │   │
9│   │  ✓ 顏色（填色、描邊）    ✓ 元件變體                              │   │
10│   │  ✓ 字體樣式              ✓ 間距與內距                            │   │
11│   │  ✓ 效果（陰影、模糊）    ✓ 約束條件                              │   │
12│   │  ✓ 設計代碼/變數         ✓ 文字內容                              │   │
13│   └─────────────────────────────────────────────────────────────────┘   │
14│                                                                         │
15│   ┌─────────────────────────────────────────────────────────────────┐   │
16│   │  CLAUDE 無法讀取的內容                                           │   │
17│   ├─────────────────────────────────────────────────────────────────┤   │
18│   │  ✗ 實際圖片像素          ✗ 原型互動                              │   │
19│   │  ✗ 留言與反饋            ✗ 版本歷史                              │   │
20│   └─────────────────────────────────────────────────────────────────┘   │
21│                                                                         │
22└─────────────────────────────────────────────────────────────────────────┘

1讀取我的 Figma 設計：
2https://www.figma.com/design/[你的檔案ID]/[檔案名稱]
3
4請提供：
51. 頁面結構概覽
62. 主要區塊列表
73. 使用的色彩調色盤
84. 字體排版樣式
95. 你能辨識出的任何元件

1從 Figma 檔案中，提取並建立：
2
31. 一份 Tailwind 設定檔，包含：
4   - 與設計相符的自訂顏色
5   - 字體家族與大小
6   - 基於你所見的間距比例
7
82. 備用的 CSS 變數檔案
9
10將顏色格式化為語意名稱（primary、secondary、accent、neutral）。

1查看我的 Figma 檔案中的 [COMPONENT NAME] 元件。
2
3生成一個 React 元件，需符合：
4- 完全匹配的樣式（顏色、間距、字體）
5- 使用 Tailwind CSS
6- 支援我定義的所有變體（如果有的話）
7- 使用 TypeScript 進行完整類型定義
8- 根據設計包含懸停/焦點狀態

1根據我的 Figma 設計，生成 [SECTION NAME] 區塊。
2
3要求：
4- 完全匹配設計
5- 使其具備響應式：
6  - 行動裝置（<768px）：[描述佈局]
7  - 桌面裝置（≥768px）：[描述佈局]
8- 使用語意化 HTML（section、nav、main、article）
9- 包含設計中的所有文字內容

1┌─────────────────────────────────────────────────────────────────────────┐
2│                           MCP 實際應用                                  │
3└───────────────────────────────┬─────────────────────────────────────────┘
4                                │
5        ┌───────────────────────┼───────────────────────┐
6        ▼                       ▼                       ▼
7┌───────────────────┐  ┌───────────────────┐  ┌───────────────────┐
8│  FIGMA 設計       │  │     FIGJAM        │  │   FIGMA MAKE      │
9│  ─────────────    │  │  ─────────────    │  │  ─────────────    │
10│                   │  │                   │  │                   │
11│  設計檔案         │  │  線框圖與          │  │  AI 生成的        │
12│  → 產出程式碼     │  │  使用者流程 →      │  │  使用者介面 →      │
13│                   │  │  可運作應用程式    │  │  注入程式碼庫      │
14│                   │  │                   │  │                   │
15│  ⭐ 最常用        │  │  🎯 強大          │  │  ⚡ 最快          │
16└───────────────────┘  └───────────────────┘  └───────────────────┘
17        │                       │                       │
18        ▼                       ▼                       ▼
19┌───────────────────┐  ┌───────────────────┐  ┌───────────────────┐
20│ 「根據這個         │  │ 「讀取我的         │  │ 「將這個 Make     │
21│ Figma 設計        │  │ 使用者流程，       │  │ 設計加入我        │
22│ 建構我的著陸頁」   │  │ 並建立 Next.js    │  │ 現有的作品集      │
23│                   │  │ 路由結構」         │  │ 應用程式」        │
24└───────────────────┘  └───────────────────┘  └───────────────────┘

1步驟 1                    步驟 2                    步驟 3
2───────────────────────────────────────────────────────────────────
3「讀取我的設計            「生成基礎元件：           「使用這些元件
4系統檔案，並               Button、Card、            建構首頁」
5提取所有代碼」            Input、Badge」
6        │                        │                        │
7        └────────────────────────┴────────────────────────┘
8                                 │
9                                 ▼
10                    步驟 4：逐一加入頁面
11                    「現在建構定價頁面」
12                    「現在建構關於頁面」

1「讀取 [URL]，提取代碼，生成包含所有區塊的完整頁面，
2使其具備響應式，使用 Next.js + Tailwind。開始。」
3
4     ┌──────────────────────────────────────────────────────────┐
5     │  ⚠️  當你的 Figma 檔案組織良好，命名恰當，               │
6     │     且全面使用自動佈局時，效果最佳                       │
7     └──────────────────────────────────────────────────────────┘

1┌─────────┐    ┌─────────┐    ┌─────────┐    ┌─────────┐    ┌─────────┐
2│ 代碼    │ → │ 原子    │ → │ 分子    │ → │ 區塊    │ → │ 頁面    │
3│（顏色、│    │（按鈕、 │    │（卡片、 │    │（主視覺、│    │（完整   │
4│  字體） │    │  輸入框）│    │  導航） │    │  頁尾） │    │  頁面） │
5└─────────┘    └─────────┘    └─────────┘    └─────────┘    └─────────┘

1┌─────────────────────────────────────────────────────────────────────────┐
2│  命名                                                                   │
3│  [ ] 圖層使用語意名稱         hero-section ✓   Frame 427 ✗             │
4│  [ ] 元件命名清晰             Button/Primary ✓  Component 1 ✗          │
5│  [ ] 變體有描述性屬性         size=lg ✓        variant=2 ✗             │
6├─────────────────────────────────────────────────────────────────────────┤
7│  結構                                                                   │
8│  [ ] 所有容器使用自動佈局     Flexbox 就緒 ✓  Absolute 混亂 ✗          │
9│  [ ] 扁平化階層（最少巢狀）   乾淨的 DOM ✓      Div 湯 ✗               │
10│  [ ] 區塊之間清楚分隔        易於解析 ✓       Chaos 混亂 ✗             │
11├─────────────────────────────────────────────────────────────────────────┤
12│  代碼                                                                   │
13│  [ ] 顏色定義為樣式          可提取 ✓         寫死 ✗                   │
14│  [ ] 字體排印為文字樣式      一致 ✓           隨機 ✗                   │
15│  [ ] 間距保持一致            系統化 ✓         任意 ✗                   │
16└─────────────────────────────────────────────────────────────────────────┘

11. 圖層命名像 CSS 類別一樣
2   nav-links ✓    Group 5 ✗
3
42. 逐區塊進行
5   Hero → 特色 → 推薦 → 頁尾
6   （不要一次要求整個頁面）
7
83. 直接參考 Figma 設計
9   「查看 Features 區塊中的卡片」
10   （不要說：「建立一個圓角卡片」）
11
124. 先匯出資源
13   圖片需要手動匯出 → 放到 /public 資料夾
14   然後告訴 Claude：「Hero 圖片在 /public/hero.png」
15
165. 事先說明你的技術棧
17   「我使用 Next.js 14 + Tailwind + TypeScript」
18   （Claude 會匹配你的慣例）

1我想將我的 Figma 設計轉換成程式碼。
2
3Figma 網址：[貼上你的網址]
4
5技術棧：Next.js 14 + Tailwind CSS + TypeScript
6
7請：
81. 首先，分析設計並告訴我你看到了什麼
92. 提取色彩調色盤並建立 Tailwind 設定檔
103. 然後我會告訴你優先建構哪個區塊
11
12我們一步一步來。