利用 Trae IDE 与 MCP Server 将 Figma 设计稿转为前端代码

配置 Figma AI Bridge 时需要填写 Figma Personal Access Token。具体获取流程如下：

登录 Figma，在左上角点击用户头像，选择 Settings，进入顶部菜单的 Security 选项。

下滑至 Personal access tokens 区域，点击 Generate new token。在弹窗中输入 Token 名称、选择有效期并配置权限。

点击 Generate token，复制生成的 Token 字符串备用。

集成 MCP Server

将之前复制的 Figma Personal Access Token 粘贴到输入框，点击 确认。

在列表中找到 Figma AI Bridge，点击右侧 + 按钮添加。

打开 Trae IDE，点击 AI 对话框右上角的 设置 图标，选择 MCP，然后点击 + 添加 MCP Servers。

此时，MCP Server - Figma AI Bridge 已成功配置，并已自动添加到'Builder with MCP'智能体中。

配置智能体工作流

智能体（Agent）是你在不同场景下的 AI 助手。自定义智能体后，你可以灵活配置提示词和工具集，快速完成复杂任务。

1. 在配置面板中：
   • （可选）上传智能体头像。
   • 输入智能体名称，例如：'Figma 助手'。
   • 在 工具-MCP 部分仅勾选 Figma AI Bridge。
   • 在 工具-内置 部分勾选：
     • 文件系统（File System）
     • 终端（Terminal）
     • 联网搜索（Web Search）
2. 点击 创建，完成自定义智能体的创建。

预览效果如下：

（可选）填写提示词，建议内容如下：

'根据用户提供的 Figma 链接，精准还原 UI 设计，生成响应式 HTML 前端页面代码。结构清晰，视觉细节与设计稿高度一致，禁止擅自修改设计内容。'

点击 + 创建智能体。

在 AI 对话框右上角点击 设置，选择 智能体 进行切换。

执行代码生成

1. 在本地新建一个空文件夹，在 Trae IDE 中打开该文件夹。
2. 在 AI 对话框右下角选择模型（本文以 DeepSeek-V3-0324 为例）。
3. 打开 Figma 设计稿页面，选中目标画板，右键 → Copy/Paste as > Copy link to selection，复制链接。

在 Trae IDE AI 对话输入框中粘贴链接，并附上需求说明，例如：

'请严格按照我提供的 Figma 链接内容生成 HTML 前端页面，UI 要严格还原设计稿，需要实现响应式设计。'

智能体开始调用 Figma AI Bridge，读取设计稿并自动生成前端项目文件夹和 index.html。以下为生成过程示例：

生成完成后，双击输出的 index.html，在浏览器中预览最终效果。若需调整，可在 AI 对话框继续与智能体互动，优化样式或交互，直至满意为止。

核心能力概览

MCP Server - Figma AI Bridge 提供以下核心功能支持：

• 设计结构化解析：自动识别画板、组件、布局层级。
• 样式映射：将 Figma 中的颜色、字体、间距等属性转成 CSS。
• 响应式布局：根据设置自动生成媒体查询，支持多端适配。
• 资源导出：自动导出切图、SVG、字体等静态资源。
• 交互还原：根据原型中的交互描述生成简单的 JavaScript 逻辑。

通过 Trae IDE 与 MCP Server - Figma AI Bridge 的结合，设计稿到代码的流程实现了高度自动化。无需手动切图、编写样式、配置打包，即可快速完成初版页面交付。无论是快速打样，还是持续迭代，都能极大提升前端开发效率。