从 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将颜色格式化为语义名称（主色、次要色、强调色、中性色）。

1查看我的 Figma 文件中的 [组件名称]。
2
3生成一个 React 组件，要求：
4- 匹配精确的样式（颜色、间距、排版）
5- 使用 Tailwind CSS
6- 支持我定义的所有变体（如有）
7- 完全使用 TypeScript 类型化
8- 根据设计包含悬停/聚焦状态

1从我的 Figma 设计生成 [区域名称] 区域。
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 生成的 UI    │
12│  → 生产代码       │  │  用户流程 →       │  │  → 注入代码库    │
13│                   │  │  可运行的应用      │  │                   │
14│                   │  │                   │  │                   │
15│  ⭐ 最常用        │  │  🎯 强大          │  │  ⚡ 最快          │
16└───────────────────┘  └───────────────────┘  └───────────────────┘
17        │                       │                       │
18        ▼                       ▼                       ▼
19┌───────────────────┐  ┌───────────────────┐  ┌───────────────────┐
20│ "基于这个 Figma   │  │ "读取我的用户     │  │ "把这个 Make     │
21│ 设计构建我的      │  │ 流程并创建         │  │ 设计添加到我的   │
22│ 着陆页"          │  │ Next.js 路由结构"  │  │ 现有作品集应用"  │
23└───────────────────┘  └───────────────────┘  └───────────────────┘

1步骤 1                    步骤 2                    步骤 3
2───────────────────────────────────────────────────────────────────
3"读取我的设计             "生成基础               "使用这些组件
4系统文件并                组件：Button,             构建主页"
5提取所有令牌"             Card, 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 能力 ✓    绝对定位混乱 ✗     │
9│  [ ] 扁平层级结构（最少嵌套） 清晰 DOM ✓         Div 嵌套地狱 ✗       │
10│  [ ] 区域清晰分离           易于解析 ✓          混乱 ✗                 │
11├─────────────────────────────────────────────────────────────────────────┤
12│  令牌                                                                  │
13│  [ ] 颜色定义为样式          可提取 ✓          硬编码 ✗                │
14│  [ ] 排版定义为文本样式      一致 ✓            随机 ✗                  │
15│  [ ] 间距一致                系统化 ✓          随意 ✗                  │
16└─────────────────────────────────────────────────────────────────────────┘

11. 像 CSS 类名一样命名图层
2   nav-links ✓    Group 5 ✗
3
42. 逐区域工作
5   英雄区 → 功能特性 → 用户评价 → 页脚
6   （不要一次性要求整个页面）
7
83. 直接引用 Figma
9   "查看功能特性区域中的卡片"
10   （而不是："创建一个圆角卡片"）
11
124. 先导出资源
13   图片需要手动导出到 /public 文件夹
14   然后告诉 Claude："英雄区图片位于 /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我们一步步来。