用 AI 把设计稿直接转成代码，一直是前端开发梦寐以求的效率提升方案。最近 Trae 编辑器整合了 Figma 的 MCP（Model Context Protocol），让这个过程变得更加丝滑。下面分享一下具体的配置和使用流程。
环境准备
首先确认你的 Trae 版本在 3.0 及以上，建议使用企业版账号以获取完整功能权限。打开设置面板，找到 MCP 配置项入口。
进入 MCP 界面后，可以看到相关配置选项。
继续向下查看，确保服务已就绪。
获取 Figma Token
这一步是关键，需要授权 Trae 访问你的 Figma 文件。登录 Figma 网页端，进入账户设置中的 Security 页面，点击 Generate New Token。Token 名称随便填，权限全部勾选上，生成后复制这个字符串。
回到 Trae 的设置里，将刚才生成的 Token 粘贴进去保存。
开始生成代码
配置完成后，切换到 MCP 模式，你也可以基于此创建专属智能体。接下来就是提问环节，这里有个提示词模板可以参考。
注意： 这里的 Figma 链接是 MCP 可识别的链接，不是普通的分享链接，通常需要你有该原型文件的编辑或查看权限才能获取。
推荐提示词： 我需要根据提供的 Figma 链接生成一个与设计稿高度一致的网页。请严格遵循以下详细要求：
- 还原布局结构、间距和层级关系。
- 字体大小、颜色值需与源文件保持一致。
- 输出 HTML 和 CSS 代码，保持响应式适配。
- 不要遗漏任何交互组件的基础样式。
实际运行时，AI 会读取设计稿信息并输出代码。如果效果不够完美，可以针对特定组件进行二次追问优化。整个过程下来，能节省不少重复写样式的工时，但最后还是要人工审查一遍代码逻辑。
