AI+Figma
作者：微信文章把 Figma 变成代码生成器：AI + Figma 零成本上手指南
全程免费，支持 React / Vue / HTML 多格式导出。
前置准备
工具最低版本备注Node.js≥ 20.x官网下载Trae CN（或 其他能用Figma MCP的编辑器）最新版国内网络优先用 Trae CNFigma 账号免费版即可需科学上网 注册一键生成 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 工作量
页:
[1]