把 Figma 变成代码生成器：AI + Figma 零成本上手指南

全程免费，支持 React / Vue / HTML 多格式导出。

前置准备

一键生成 Figma 个人访问令牌（Personal Access Token）

1. 登录 Figma → 右上角头像 → Settings
2. 左侧 Security → Personal Access Tokens → Create new token
3. 权限勾选 file_contents:read（读文件最低权限即可，其余按需，或者无脑全部勾上，不要外泄你的密钥）
4. 复制备用，​关闭页面后不再完整显示​。

安装 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 读懂你的设计

1. 在 Figma 新建空白文件 → 从社区（Community）拖入任意模板
2. 选中目标页面 → 右键 Copy/Paste as → Copy link to selection
   • 链接必须是 https://www.figma.com/design/xxx 开头，其它子路径暂不支持 API
3. 回到编辑器
   • 模型建议选带图片理解能力的，如 Doubao-Seed-Code 或 gpt-4-vision
   • 在输入框粘贴链接并附提示词：
     访问该 Figma 地址，用 React + Tailwind 写出登录页，保留所有图标与配色。
4. 回车等待。

迭代技巧：一次不成，这样聊

多轮对话是常态，3–4 轮即可达到 80% 可用代码。

小结

• 全程 0 费用，本地运行不泄露源码
• 设计 → 代码平均 5 min，省掉重复搬砖
• 复杂交互仍须人工微调，但已能覆盖 80% 静态 UI 工作量