把 Figma 变成代码生成器：AI + Figma 零成本上手指南
全程免费，支持 React / Vue / HTML 多格式导出。
前置准备
| 工具 | 最低版本 | 备注 |
|---|---|---|
| Node.js | ≥ 20.x | 官网下载 |
| Trae CN（或 其他能用Figma MCP的编辑器） | 最新版 | 国内网络优先用 Trae CN |
| Figma 账号 | 免费版即可 | 需科学上网 注册 |
一键生成 Figma 个人访问令牌（Personal Access Token）
- 登录 Figma → 右上角头像 → Settings
- 左侧 Security → Personal Access Tokens → Create new token
- 权限勾选
file_contents:read（读文件最低权限即可，其余按需，或者无脑全部勾上，不要外泄你的密钥） - 复制备用，关闭页面后不再完整显示。
安装 Figma MCP 插件
在 Trae 内安装
打开编辑器 → 设置 → MCP → 添加 → 从市场安装 → 搜索 Figma → 点击安装 → 输入密钥 → 完成
我遇到的唯一报错是缺少sharp
Win + R 输入 cmd 回车，依次执行：
npm cache clean --force
npm install --include=optional sharp
npm install --os=win32 --cpu=x64 sharp
以上命令仅当插件启动失败才需执行，成功后无需重复。
让 AI 读懂你的设计
- 在 Figma 新建空白文件 → 从社区（Community）拖入任意模板
- 选中目标页面 → 右键 Copy/Paste as → Copy link to selection
- 链接必须是
https://www.figma.com/design/xxx开头，其它子路径暂不支持 API
- 链接必须是
- 回到编辑器
- 模型建议选带图片理解能力的，如
Doubao-Seed-Code或gpt-4-vision - 在输入框粘贴链接并附提示词：
访问该 Figma 地址，用 React + Tailwind 写出登录页，保留所有图标与配色。
- 模型建议选带图片理解能力的，如
- 回车等待。
迭代技巧：一次不成，这样聊
| 常见坑 | 解决话术示例 |
|---|---|
| 图标/图片丢失 | “所有图标先用本地占位图 placeholder.svg，宽高原样保留，后续我自行替换” |
| 配色偏差 | “严格使用 Figma 里取到的 HEX，不要自行推导主色” |
| 字体缺失 | “文字层优先用 Tailwind 默认 sans，保留字号与字重” |
| 布局错位 | “外层容器加 max-w-6xl mx-auto，内部保持 autolayout 结构” |
多轮对话是常态，3–4 轮即可达到 80% 可用代码。
小结
- 全程 0 费用，本地运行不泄露源码
- 设计 → 代码平均 5 min，省掉重复搬砖
- 复杂交互仍须人工微调，但已能覆盖 80% 静态 UI 工作量
