利用 MCP Server - Figma AI Bridge 一键生成前端代码

集成 MCP Server

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

在列表中找到 Figma AI Bridge，点击右侧的 + 按钮。将之前复制的 Figma Personal Access Token 粘贴到输入框，点击 确认。

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

构建自动化智能体

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

在配置面板中：

1. 输入智能体名称，例如：'Figma 助手'。
2. 在 工具-MCP 部分仅勾选 Figma AI Bridge。
3. 在 工具-内置 部分勾选文件系统、终端及联网搜索。
4. 点击 创建。

可以填写一段提示词来规范输出，例如：

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

执行设计与代码转换

准备工作完成后，就可以开始生成代码了。

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

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

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

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

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

核心能力概览

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

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

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