AI+Figma

我爱免费

作者：微信文章
把 Figma 变成代码生成器：AI + Figma 零成本上手指南

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

前置准备

工具	最低版本	备注
Node.js	≥ 20.x	官网下载
Trae CN（或 其他能用Figma MCP的编辑器）	最新版	国内网络优先用 Trae CN
Figma 账号	免费版即可	需科学上网 注册

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

1. 登录 Figma → 右上角头像 → Settings2. 左侧 Security → Personal Access Tokens → Create new token3. 权限勾选 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. 回车等待。

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

常见坑	解决话术示例
图标/图片丢失	“所有图标先用本地占位图 placeholder.svg，宽高原样保留，后续我自行替换”
配色偏差	“严格使用 Figma 里取到的 HEX，不要自行推导主色”
字体缺失	“文字层优先用 Tailwind 默认 sans，保留字号与字重”
布局错位	“外层容器加 max-w-6xl mx-auto，内部保持 autolayout 结构”

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

小结

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