MCP 是什么？用 Figma MCP 辅助还原 Vue 页面

MCP 是什么？用 Figma MCP 辅助还原 Vue 页面

过去使用 AI 还原设计稿时，我们通常只能提供一张截图。AI 能看到页面大致长什么样，却不知道真实的节点层级、Auto Layout、组件实例和设计变量。

Figma MCP 解决的正是"让 AI 读取结构化设计上下文"这件事。本文先介绍 MCP 的基本概念，再用一个简化流程演示如何在 VS Code 的 Codex IDE 扩展中接入 Figma MCP，并根据指定的 UI 节点生成 Vue 页面初稿。

一、先说结论：这里是谁在连接 MCP

"前端连接 Figma MCP"很容易被理解成在 Vue 应用中请求 Figma。

但在本文的设计稿还原场景中，通常不是运行在浏览器里的业务页面连接 MCP，而是 VS Code 中的 Codex IDE 扩展连接 MCP：

Figma 设计稿
    ↓
Figma MCP Server
    ↓
VS Code 中的 Codex IDE 扩展
    ↓
AI Agent 读取设计上下文和现有代码
    ↓
生成或修改 Vue 项目文件

因此，MCP 主要参与的是开发阶段，而不是线上页面的运行阶段。页面生成完成后，Vue 项目本身并不需要依赖 Figma MCP 才能运行。

本文所说的"根据 UI 出图"，准确含义是：

根据 Figma UI 设计稿辅助生成前端页面代码，而不是让前端代码重新生成一张图片。

二、MCP 是什么

MCP 全称是 Model Context Protocol，即模型上下文协议。

可以把它理解成 AI 应用与外部系统之间的一套通用连接规范。外部系统按照统一协议暴露数据和能力，AI 客户端连接后，就可以在用户授权范围内读取信息或者执行操作。

官方 MCP 规范将服务端提供的核心能力主要分为三类：

能力	作用	示例
Tools	供模型调用的函数	查询 Figma 节点、获取截图
Resources	提供给模型的上下文数据	文件内容、文档、设计数据
Prompts	可复用的提示模板	代码评审、页面生成流程

如果没有 MCP，不同 AI 工具想要访问 Figma、数据库或者项目管理系统，往往要分别开发一套私有接入方式。

有了 MCP，可以形成相对统一的关系：

Codex = MCP Host
Codex 内部的 MCP 连接 = MCP Client
Figma 提供的服务 = MCP Server

它有点像 AI 工具领域的通用接口：AI Agent 不需要了解 Figma 内部如何存储设计文件，只需要知道 Figma MCP Server 提供了哪些工具、工具需要什么参数，以及会返回什么结果。

MCP 官方规范对 Tools、Resources 和 Prompts 的定义可以参考 Model Context Protocol Server 概览。

三、Figma MCP 解决了什么问题

直接把设计稿截图交给 AI，能够提供视觉参考，但截图是扁平的像素信息。AI 很难仅通过截图准确判断：

• 哪些元素属于同一个 Frame；
• 页面使用横向还是纵向 Auto Layout；
• padding 和 gap 的真实值；
• 某个按钮是不是设计系统中的组件实例；
• 颜色对应哪个设计变量；
• 节点在不同尺寸下应该如何拉伸；
• 图片是背景、填充还是独立资源。

Figma MCP 可以把选中节点的结构化设计上下文交给 Agent，例如：

OrderDetailPage
├── PageHeader
├── OrderInfoCard
│   ├── OrderNumber
│   ├── CustomerName
│   └── DeliveryTime
└── ActionBar
    ├── CancelButton
    └── ConfirmButton

同时还可以提供布局、变量和组件信息：

layout: vertical
padding: 24
gap: 16
background: color/bg/page
card-radius: radius/medium
button-component: Button / Primary / Medium

这两种输入方式的差异可以概括为：

输入方式	AI 能获得的信息	常见问题
设计稿截图	页面外观和大致比例	容易猜错结构、间距和组件关系
Figma MCP	节点、布局、变量、组件和视觉参考	仍需结合代码仓库和人工校验

Figma 官方将 MCP 定位为 Figma 与开发环境之间的桥梁：它向 AI 提供设计上下文，最终代码仍然由 AI Coding Agent 结合提示词和代码仓库生成，并不是"一键输出完美生产代码"。可以参考 Figma MCP 的职责边界。

四、开始前需要准备什么

为了让教程保持简单，下面使用：

• 一个有访问权限的 Figma Design 文件；
• VS Code；
• 已安装并登录的 Codex IDE 扩展；
• 一个 Vue 3 + TypeScript 项目；
• Figma Remote MCP Server。

Figma 同时提供远程版和桌面版 MCP Server。远程版直接连接 Figma 托管的服务，能力覆盖更完整，也是官方更推荐的方式；桌面版需要启动 Figma Desktop，适合部分本地和组织场景。

另外，设计稿本身越规范，生成效果通常越稳定。建议设计侧尽量做到：

• 重复元素使用 Component，而不是复制多个普通 Frame；
• 颜色、间距、圆角和字体使用 Variable；
• 布局尽量使用 Auto Layout；
• 图层使用 OrderCard、SubmitButton 等语义化命名；
• 给复杂交互补充注释，不要只表达静态外观。

如果设计稿中充满 Frame 123、绝对定位和写死颜色，MCP 只能如实传递这些信息，无法自动补全缺失的设计语义。

五、第一步：在 VS Code 的 Codex 中连接 Figma MCP

这里需要特别注意：Codex 不使用 Copilot 的 mcp.json 配置。

Codex 将 MCP Server 和其他设置统一保存在 config.toml 中。Codex IDE 扩展与 Codex CLI 会共享同一套配置，因此在其中一个客户端配置完成后，通常不需要在另一个客户端重复添加。

方式一：通过 Codex IDE 扩展界面添加

在 VS Code 中打开 Codex 面板，然后按照下面的步骤操作：

1. 打开 Codex 右上角的齿轮菜单；
2. 进入 MCP servers；
3. 选择 Add server；
4. Server Name 填写 figma；
5. 连接类型选择 Streamable HTTP；
6. Server URL 填写 https://mcp.figma.com/mcp；
7. 保存配置并选择 Restart extension；
8. 如果服务器显示需要 OAuth，点击 Authenticate，在浏览器中完成 Figma 登录和授权。

完成后回到 MCP Server 列表，确认 figma 已启用并且不再提示未认证。

方式二：直接编辑 Codex 的 config.toml

如果希望直接管理配置，可以在 Codex 齿轮菜单中选择：

Codex Settings → Open config.toml

用户级配置默认位于：

~/.codex/config.toml

在文件中加入：

[mcp_servers.figma]
url = "https://mcp.figma.com/mcp"

保存后重新启动 Codex IDE 扩展，再回到 MCP Server 列表完成 OAuth 授权。

如果只希望该配置在当前代码仓库中生效，也可以写入项目根目录下的：

.codex/config.toml

项目级 Codex 配置只会在受信任的项目中加载。对于经常在多个前端项目中使用的 Figma MCP，放在用户级 ~/.codex/config.toml 中通常更方便。

验证连接是否成功

完成配置后，可以在 Codex 对话中先做一次只读检查：

请检查当前是否已经连接名为 figma 的 MCP Server，
并列出可以读取 Figma 设计信息的工具。
不要修改代码，也不要修改 Figma 文件。

如果 Codex 能够识别 Figma MCP 工具，说明服务器配置已经生效。真正读取节点时如果提示无权限，还需要检查刚才授权的 Figma 账号是否拥有目标文件的访问权限。

六、第二步：复制需要还原的 Figma 节点链接

远程 Figma MCP 主要通过链接确定要读取的文件或节点。

在 Figma 中选中需要还原的 Frame，例如"订单详情页"，右键选择 Copy link to selection，得到类似链接：

https://www.figma.com/design/FILE_KEY/Project?node-id=100-200

建议复制具体页面 Frame 的链接，而不是一开始就把整个大型设计文件交给 Agent。选择范围越准确，返回的上下文越聚焦，也越不容易占用过多上下文。

七、第三步：先分析设计稿，不要急着生成代码

拿到链接后，不建议第一句话就让 AI"把整个页面写完"。

更稳定的做法是先让 Agent 读取并总结设计结构：

请通过 Figma MCP 分析下面这个页面节点：
<Figma 节点链接>

先不要修改代码，请输出：
1. 页面主要区域和节点层级；
2. Auto Layout 的方向、间距、内边距和对齐方式；
3. 使用到的颜色、字体、圆角等设计变量；
4. 设计稿中的组件实例及其变体；
5. 图片、图标等需要单独处理的资源；
6. 还原为响应式页面时存在的不确定点。

这一步可以提前发现问题，例如：

• Agent 读取了错误的节点；
• 设计稿中没有使用变量；
• 组件命名缺少语义；
• 页面尺寸只覆盖桌面端；
• 某些交互状态没有设计稿；
• 节点范围过大，需要继续拆分。

Figma MCP 提供的常见读取能力包括：

工具	作用
get_metadata	获取较轻量的节点名称、类型、位置和尺寸
get_design_context	获取选中节点的结构和设计上下文
get_variable_defs	获取节点使用的变量和样式
get_screenshot	获取视觉截图，辅助对比页面外观
download_assets	下载需要落到项目中的图片或导出资源

实际调用哪些工具通常由 Agent 决定。对于大型设计稿，可以先获取轻量元数据，再按子节点读取详细上下文，以减少一次性输入过多内容。最新工具列表可以查看 Figma MCP Tools and prompts。

八、第四步：让 Agent 结合项目生成 Vue 页面

确认设计结构没有问题后，再让 Agent 检查当前仓库并生成代码：

请根据刚才读取的 Figma 节点，在当前项目中实现对应页面。

工程要求：
1. 使用 Vue 3、TypeScript 和 <script setup>；
2. 先检查现有组件，优先复用项目中的按钮、表格、标签和表单组件；
3. 设计变量优先映射为项目中的 CSS 变量或主题 Token；
4. 不要为了匹配设计稿大量使用绝对定位；
5. 补充 loading、empty 和 error 状态；
6. 保留合理的响应式行为；
7. 完成后运行类型检查和 lint；
8. 说明哪些部分已经还原，哪些部分仍需人工确认。

Figma 节点：<Figma 节点链接>

这里最重要的不是"让 AI 写代码"，而是同时提供两类上下文：

Figma MCP：页面应该长什么样
项目代码和开发规范：页面应该怎么实现

例如，Figma 中存在一个 StatusTag，项目里也有对应的状态标签组件，那么正确结果应该是复用现有组件：

<StatusTag :status="order.status" />

而不是根据设计稿重新生成一套标签样式：

<span class="new-status-tag">处理中</span>

MCP 能告诉 Agent 设计中存在什么组件，但它不一定天然知道该组件在仓库中的真实路径和 API。因此，Agent 仍然需要搜索当前项目，或者通过 Code Connect、项目规范建立设计组件与代码组件之间的映射。

九、第五步：运行页面并进行二次校验

AI 生成完成不等于设计稿还原结束。至少需要进行两类检查。

1. 工程检查

检查生成代码是否符合项目约束：

• 是否通过 TypeScript 类型检查；
• 是否通过 ESLint；
• 是否复用了已有组件；
• 是否使用了正确的路由和接口层；
• 是否出现大量写死颜色和尺寸；
• 是否重复实现已有的基础能力；
• loading、empty、error 是否可用。

例如当前项目可以运行：

pnpm type-check
pnpm lint
pnpm build

2. 视觉检查

启动页面后，对照 Figma 截图检查：

• 页面整体宽度和留白；
• 栅格与对齐关系；
• 字体、行高和颜色；
• 卡片间距、圆角和阴影；
• 图片裁切方式；
• 不同窗口宽度下的布局；
• hover、disabled、loading 等交互状态。

如果发现差异，不要只说"继续优化一下"，而要给 Agent 明确反馈：

当前实现与 Figma 还有三个差异：
1. 信息卡片之间的间距应为 16px；
2. 操作栏应该固定在容器底部，但不能遮挡正文；
3. 小于 768px 时按钮需要纵向排列。

请只调整以上三项，不要改动接口和数据逻辑。

反馈越具体，Agent 越不容易在修复视觉问题时误改业务代码。

十、为什么生成结果仍然可能不理想

1. Agent 返回了类似 React 的结构

Figma MCP 提供的是便于模型理解的设计上下文，并不负责输出某个框架的生产代码。即使中间结果看起来像 React，也应该由 Agent 根据项目要求转换成 Vue。

在提示词中明确 Vue 版本、TypeScript、组件风格和样式方案即可。Figma 对这个问题也有专门说明：为什么返回结果看起来像 Web 或 React 代码。

2. 页面中出现大量绝对定位

常见原因包括：

• 原始设计稿没有使用 Auto Layout；
• 图层关系混乱；
• 只提供截图，没有提供结构化节点；
• 提示词只要求"像素级还原"，没有要求响应式布局。

应优先规范设计稿结构，同时在生成要求中明确使用 Flex、Grid 和正常文档流。

3. 颜色和间距全部被写死

需要同时检查两侧：

• Figma 是否使用了 Variables；
• 项目是否存在可映射的 CSS Variables 或 Design Tokens。

如果两边只有孤立的色值，Agent 很难自动判断 #1677ff 应该对应哪个业务 Token。

4. 生成了大量重复组件

Figma MCP 负责提供设计组件信息，但不一定知道仓库中的真实组件实现。生成前应该要求 Agent 先搜索项目组件，并明确"优先复用，无法复用时再新增"。

规模更大的团队还可以通过 Code Connect 建立 Figma 组件与代码组件的对应关系。

5. 设计稿太大，读取结果不完整

不要一次处理包含几十个页面的设计文件。可以按照下面的粒度拆分：

先读取页面 Frame
    ↓
识别 Header、Content、Sidebar 等区域
    ↓
按子节点获取详细上下文
    ↓
逐区域实现并校验

分段读取不仅减少上下文，也方便定位是哪一部分发生了偏差。

十一、Figma MCP 与项目级 Markdown 规则如何配合

如果项目已经维护了 AI Coding 规则，可以让两者形成互补：

Figma MCP
  提供节点、布局、组件、变量和视觉信息

项目级 Markdown
  提供技术栈、目录结构、组件复用、接口与样式规范

当前代码仓库
  提供真实组件、工具函数和业务上下文

例如项目规则可以写明：

- 页面统一使用 Vue 3 和 TypeScript。
- 优先复用 src/components 中的组件。
- 主题色必须使用 CSS Variables，禁止在业务组件中写死色值。
- 接口请求统一通过 src/api 目录封装。
- Figma 中的 Button、StatusTag 应先查找同名项目组件。

这时 Figma MCP 解决"设计是什么"，Markdown 规则解决"工程如何落地"。相比只提供一张截图或者一句"帮我还原页面"，生成结果会更贴近现有项目。

十二、能力边界：它是辅助工具，不是自动交付系统

Figma MCP 能明显减少以下重复工作：

• 手动查看和记录基础尺寸；
• 从截图猜测页面层级；
• 重复搭建相似页面骨架；
• 在设计和开发之间反复确认基础样式；
• 手动查找部分设计变量和组件信息。

但它无法替代前端对以下问题的判断：

• 组件边界是否合理；
• 接口和状态管理如何设计；
• 页面是否具备可访问性；
• 响应式策略是否符合真实业务；
• 极端数据和异常状态如何展示；
• 性能、权限和安全要求是否满足；
• 生成代码是否符合长期维护要求。

因此，一个更可靠的定位是：

Figma MCP 将"设计稿信息读取"从大量人工查看，变成 Agent 可以调用的结构化能力；它提高页面初稿的生成效率，但最终质量仍由设计稿规范、项目上下文、模型能力和人工验收共同决定。

十三、总结

使用 Figma MCP 还原前端页面，可以归纳为五个步骤：

1. VS Code 中的 Codex 连接 Figma MCP
2. 复制具体的 Figma Frame 或节点链接
3. 先读取节点、布局、变量与组件信息
4. 结合 Vue 项目和工程规范生成页面
5. 运行类型、代码和视觉检查并定向修正

这套流程真正有价值的地方，不是让 AI "照着截图写 CSS"，而是把设计上下文和工程上下文同时交给 Agent：

结构化设计信息 + 现有代码仓库 + 项目开发规范

当 Figma 文件具有清晰的节点命名、Auto Layout、Variables 和组件体系，项目侧又有稳定的组件库和工程规范时，AI 生成的页面才能从"看起来差不多"进一步接近"可以继续开发和维护"。