配置字节 Trae 智能体调用 Figma MCP 的完整步骤
- [1,Figma 访问令牌](#1,Figma 访问令牌)
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 的集成，实现设计稿的自动还原功能。