Appearance
用 Claude 连接 Figma 组件库，让 AI 直接在 Figma 里生成符合规范的 UI 界面。这篇文章手把手带你走完整个流程。
前提条件
开始之前，确保你满足以下条件：
| 条件 | 说明 |
|---|---|
| 1. Figma 团队版 | 需要团队功能 |
| 2. Claude Pro 以上 | 4.7 及以上版本（4.6 不支持） |
| 3. Claude-Figma 连接 | 需要提前配置好连接 |
| 4. 成熟的设计系统 | 规范完整的设计组件库 |
前情提要：如果还没配置好 Claude 和 Figma 的连接，可以先看这篇《Claude与FigJam打通，快速生成流程图》。
第一步：复制 Figma 开源设计系统
这里用的是 Figma 官方开源设计系统：
- 打开 Figma 官方设计系统
- 点击右上角 "Duplicate" 复制到你的团队项目
- 命名为
Design System
第二步：上传设计系统
- 进入你的 team project
- 新建一个设计文档（
design document） - 这个文档用来存放 Claude 生成的设计稿
bash
# 命名建议
Design Project/
├── Design System/ # 组件库
└── Generated UI/ # AI生成的设计稿第三步：关联组件库
- 进入新建的 design document
- 点击右侧面板 "Assets"
- 点击 "Library" → "Activate Library"
- 选择刚才上传的设计系统
第四步：让 Claude 分析设计系统
- 在 Figma 里打开设计系统文档
- 点击右上角 "Share"
- 权限设置为 "Anyone with the link can view" 或更开放
- 复制链接发给 Claude
提示词示例：
请分析这个设计系统，了解：
1. 包含哪些组件
2. 组件的命名规范
3. 设计风格和颜色系统
4. 组件的使用方式第五步：配置设计文档权限
- 回到刚才新建的 design document
- 点击右上角 "Share"
- 权限设置为 "Anyone with the link can edit"
- 复制链接，准备让 Claude 在这里生成界面
第六步：生成 UI 界面
提示词示例：
请根据这个设计系统，帮我生成一个用户登录页面，包含：
1. Logo区域
2. 用户名输入框
3. 密码输入框
4. 登录按钮
5. 记住密码复选框
6. 忘记密码链接
生成后直接放在这个 Figma 文档里：
[粘贴 design document 链接]检查生成结果
生成完成后，检查以下几点：
| 检查项 | 验证内容 |
|---|---|
| 组件完整性 | 所有元素是否完整显示 |
| 组件状态 | 按钮是否可以切换状态 |
| 样式一致性 | 颜色、间距是否符合设计系统 |
| 图层命名 | 图层命名是否规范 |
测试组件库连接性
验证设计稿和组件库的动态连接：
- 回到设计系统文档
- 修改一个组件的主色（如按钮颜色）
- 点击右上角 "Publish Updates"
- 回到生成的设计稿页面
- 如果看到小圆点图标，说明连接成功
- 点击 "Update" 同步最新组件
弊端和限制
| 弊端 | 说明 |
|---|---|
| Token 消耗大 | 生成复杂界面消耗大量 token |
| 需要设计系统 | 没有成熟设计系统效果大打折扣 |
| 生成质量不稳定 | 有时候生成的界面需要手动调整 |
| 适合简单界面 | 复杂页面还是需要设计师介入 |
适用场景
| 适合 | 不适合 |
|---|---|
| 快速原型 | 精细化设计 |
| 简单页面 | 复杂交互页面 |
| 组件库完善的项目 | 没有设计系统的项目 |
| 探索性设计 | 生产级设计 |
进阶技巧
1. 指定组件使用
请使用 Button/Primary 组件来生成登录按钮
使用 Input/Default 组件来生成输入框2. 指定设计规范
按钮圆角：8px
间距基准：8px
颜色：使用 design system 的 Primary 色3. 分步生成
不要一次性生成整个页面，分步生成效果更好：
第一步：先生成登录表单框架
第二步：添加 Logo 和标题
第三步：添加装饰元素一句话总结
Claude + Figma 组件库 = AI 帮你生成符合规范的 UI 界面。
核心前提：
- Figma 团队版
- Claude 4.7+
- 成熟的设计系统
- 提前配置好 Claude-Figma 连接
适合场景：快速原型、简单页面、设计系统完善的项目。
