1,Figma 访问令牌

登录 Figma 账号
进入 Settings → Account

生成 Personal Access Token

权限范围选择：file_read, webhooks

2,申请注册下载开发者工具

这里使用的是 trae 国际版，注册的是个人

3,添加mcp

从市场添加
搜索Figma，并选择

4，配置 figma还原师 智能体

![在这里插入图片描述](https://i-blog.csdnimg.cn/direct/daddbd24b41341e0a8c2d4119a8ca5fc.png
新建 figma 还原师

提示词：

根据用户提供的 Figma 链接，精准还原 UI 设计，生成语义化、响应式的前端页面代码。代码结构清晰，遵循行业最佳实践，视觉细节与设计稿高度一致。禁止擅自修改设计内容，确保忠实还原

5，使用：

复制设计链接​
在 Figma 中选中目标画板或页面
右键 → Copy/Paste as → Copy link to selection
链接格式：https://www.figma.com/design/xxx
2， 在 Trae 中粘贴链接​
打开 Trae，在 AI 对话框中粘贴链接
附上需求说明，例如：
“请严格按照我提供的 Figma 链接内容生成 HTML 前端页面。UI 要严格还原设计稿，需要实现响应式设计。”
3，AI 生成代码​
智能体会调用 Figma AI Bridge 的 get_figma_data解析设计稿
自动生成 HTML、CSS、图片资源等文件
生成的文件会保存到当前项目目录

按照以上步骤顺序配置，即可完成字节 Trae 智能体与 Figma MCP 的集成，实现设计稿的自动还原功能。