用 TRAE + Figma 自动生成前端代码，最推荐两种做法：Solo 模式直接导入 Figma ，以及 MCP Server / Figma AI Bridge 方案。前者适合快速出页面，后者适合接入 uni-app、Vue 组件库、Tailwind 等工程化项目。本篇文章使用的是二者的结合具体步骤如下~这边使用的是国际版的trae个人感觉国际版的比国内的要快而且不容易卡顿~
1. 准备环境
- 安装 Node.js 18+
- 安装并打开 TRAE IDE
2. 获取 Figma Access Token
- 打开 Figma，进入 Settings → Security
- 找到Personal access tokens
- 点击 Generate new token
- 勾选文件内容、开发资源读取等权限
- 生成后立即保存，因为 Token 只显示一次
3. 在 TRAE 中添加 Figma MCP
- 打开 TRAE IDE
- 进入设置 → MCP → MCP Server 市场
- 点击添加，并粘贴刚才生成的 Figma Access Token
- 确认连接状态正常
4. 生成前端代码
- 将trae切换至solo模式并打开figma
- 打开自己的figma中的内容，选中需要AI绘画的部分将其添加到对话（注意如果自己不是对应的设计师会导致后续无法将figma中的内容添加到对话，建议将UI稿copy到自己的草稿中）
这样子就可以根据UI自动生成对应的前端代码了