基于 MCP Server 的 Figma 设计稿自动转前端代码实践

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

在列表中找到 Figma AI Bridge，点击右侧 + 按钮。在 MCP 面板点击 + 添加 MCP Servers（或已添加时右侧的 + 添加）。

打开 Trae IDE，点击 AI 对话框右上角的 设置 图标，选择 MCP。

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

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

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

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

打开 Figma 设计稿页面，选中目标画板，右键 → Copy/Paste as > Copy link to selection，复制链接。

核心功能支持

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

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

小结

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