用 Figma MCP 还原 Vue 页面时，我遇到的三个问题

Figma MCP 接通以后，我原本以为只要把设计稿链接交给 Codex，就能直接得到一份可用的 Vue 页面。

实际生成后才发现：页面"看起来像"不等于代码"可以维护"。第一版最容易出现三个问题------没有复用项目组件、布局中出现大量绝对定位、颜色和间距被直接写死。

这三个问题并不完全是模型能力不足，它们分别对应设计稿中的三类上下文：

生成结果中的问题	缺少的上下文
重复实现项目已有组件	设计组件与代码组件的对应关系
大量绝对定位，页面不能响应式变化	Auto Layout 表达的布局关系
颜色、间距和圆角全部写成固定值	Variables 表达的设计 Token 语义

本文不再介绍如何安装 Figma MCP，而是复盘我在 VS Code 的 Codex 中使用它还原页面时，如何理解并处理这三个问题。

一、先明确 Figma MCP 的能力边界

Figma MCP 的核心作用，是把 Figma 中的结构化设计上下文提供给 Codex，例如：

节点层级和名称；
Frame 与组件实例；
Auto Layout、尺寸和间距；
颜色、字体、圆角和 Variables；
当前节点的视觉截图；
已配置的 Code Connect 信息。

它并不负责直接交付最终代码。真正读取代码仓库、选择 Vue 组件、组织业务结构并修改文件的，仍然是 Codex。

因此，完整链路并不是"Figma 自动生成 Vue"，而是：

txt 复制代码

Figma 提供设计事实
        ↓
Figma MCP 传递结构化上下文
        ↓
Codex 结合当前仓库生成代码
        ↓
前端进行工程与视觉验收

Figma 官方也明确区分了两者的职责：MCP Server 提供设计上下文，最终代码由 AI Agent 根据提示词和代码仓库生成。Figma MCP 与 Agent 的职责边界

理解这条边界以后，下面三个问题就比较容易定位了。

二、问题一：Figma 有 Button，为什么 Codex 没有复用项目按钮

Figma 页面里的 Button 通常是一个设计组件实例。Figma 知道它引用了哪个主组件，也知道当前使用的是 Primary、Medium 或 Disabled 等变体。

但 Figma 默认不知道这个设计组件在 Vue 项目中对应什么：

txt 复制代码

Figma/Button
       ?
Vue 项目中的 a-button 或 AppButton.vue

如果缺少这层关系，Codex 只能根据名称和外观自行判断。它可能搜索到项目组件，也可能重新生成一个普通 <button>，再写一套新的颜色、圆角和交互样式。

团队级方案：Code Connect

Code Connect 用于显式建立设计组件和代码组件之间的映射，例如：

txt 复制代码

Figma/Button    → a-button
Figma/AppHeader → src/components/AppHeader.vue
Figma/StatusTag → src/components/StatusTag.vue

进一步还可以描述属性关系：

txt 复制代码

Figma Type = Primary → type="primary"
Figma Disabled = true → :disabled="true"

当页面中出现已经连接的 Figma 组件实例时，Figma MCP 可以把组件名称、代码路径、导入方式和属性映射一并提供给 Agent。Figma MCP 的 Code Connect 集成

三、问题二：为什么生成代码里出现大量绝对定位

第二个问题来自设计稿的布局表达。

如果设计师只是把元素拖到某个坐标，Figma 记录的可能是：

txt 复制代码

标题：x=24，y=20
描述：x=24，y=52
按钮：x=320，y=120

这些数据只能说明当前画面中的位置，不能说明：

标题变成两行以后，下面的内容是否要自动下移；
容器变宽以后，按钮应该靠右还是拉伸；
卡片高度是固定值还是由内容撑开；
窄屏状态下，横向区域是否需要换行。

如果 Codex 为了匹配当前截图直接翻译坐标，就容易生成大量 position: absolute。页面在固定尺寸下看起来正确，但文案、数据和窗口宽度一变化就可能重叠。

Auto Layout 提供了什么

Auto Layout 是 Figma 中描述排列关系的能力，概念上接近 CSS Flexbox。它可以表达：

横向、纵向或网格排列；
gap 和 padding；
对齐与分布方式；
Hug contents、Fill container 和 Fixed；
内容增加或容器变化后的尺寸行为。

例如，一个操作区使用 Horizontal Auto Layout、间距 12px、整体右对齐，Codex 就更容易将它还原为 Flex，而不是给两个按钮分别计算 right 坐标。

Figma 官方也建议在面向代码生成的设计文件中使用 Auto Layout，因为它能更清楚地表达响应式意图，并减少不必要的绝对定位。Figma：为代码生成组织设计文件

需要强调的是，没有 Auto Layout 并不代表 MCP 无法读取设计稿。它仍然能获取节点、尺寸、颜色和截图，只是缺少"页面变化后应该怎么排列"的信息，因此需要 Codex 和前端做更多判断。

四、问题三：为什么颜色、间距和圆角都被写死

第三个问题是样式值缺少语义。

如果 Figma 节点只保存：

txt 复制代码

颜色：#155EEF
背景：#F5F7FB
圆角：12

MCP 可以把这些值交给 Codex，但 Codex 不一定知道它们分别代表品牌色、页面背景和项目标准圆角，于是可能直接生成固定值。

Variables 提供了什么

Figma Variables 类似前端的 CSS Variables 或 Design Tokens。设计稿可以不直接绑定原始值，而是绑定有语义的名称：

txt 复制代码

color/brand/primary
color/bg/page
radius/medium
spacing/medium

Variables 还可以通过 Mode 为 Light、Dark、Desktop 或 Mobile 保存不同取值。它解决的是设计值的复用和语义问题，而不是布局问题。Figma Variables、Collections 与 Modes

我在当前项目中的处理方式

当前项目已经在 src/styles/tokens.css 中维护了一套 --zc-* CSS Variables，并通过 Ant Design Vue 的 ConfigProvider 配置组件主题。因此我的解决方式不是重新生成一套样式变量，而是先建立语义映射：

Figma 语义	项目 Token
`color/brand/primary`	`--zc-brand`
`color/bg/page`	`--zc-bg-page`
`color/bg/container`	`--zc-bg-shell`
`color/text/primary`	`--zc-text-primary`
`color/border/default`	`--zc-border`
`radius/medium`	`--zc-radius`

对于 Ant Design Vue 组件，则优先使用 ConfigProvider 中已有的 colorPrimary、colorText、colorBorder 和 borderRadius 等主题 Token，而不是在每一个组件里重新覆盖样式。

这里同样存在一个边界：Figma Variables 不会自动变成项目里的 CSS Variables。只有当命名约定、项目规则或者人工映射足够清楚时，Codex 才能稳定地复用正确 Token。

如果 Figma 没有定义 Variables，我会把原始值当作视觉参考，再结合用途选择项目 Token，而不是仅凭色值相同就直接判断两者语义一致。

五、我最终采用的生成流程

处理完这三个问题后，我把页面生成拆成了两个阶段。

第一阶段：只分析，不修改代码

先让 Codex 通过 Figma MCP 输出：

页面区域和节点层级；
哪些节点是组件实例；
哪些区域使用了 Auto Layout；
哪些样式绑定了 Variables；
页面缺少哪些响应式和交互说明；
设计组件与项目组件的候选映射。

这一步的目的，是在生成代码前暴露不确定性。

第二阶段：结合项目约束生成

我使用的提示词可以简化为：

txt 复制代码

请根据已读取的 Figma 节点实现当前 Vue 页面。

开始修改前：
1. 搜索现有组件、相似页面和样式 Token；
2. 输出 Figma 组件到项目组件的映射；
3. 列出无法从设计稿确认的响应式行为。

实现要求：
1. 使用 Vue 3、TypeScript 和 script setup；
2. 优先复用 Ant Design Vue 和项目公共组件；
3. 坐标只作为视觉参考，普通布局使用 Flex 或 Grid；
4. 优先复用 src/styles/tokens.css 中的变量；
5. 只对角标、浮层和重叠元素使用绝对定位；
6. 不确定的交互先说明，不要自行补造业务逻辑。

完成后运行类型检查、lint 和 build，并说明仍需人工确认的部分。

生成完成后，再从两个维度验收：

txt 复制代码

工程侧：组件复用、类型、lint、build、状态处理
视觉侧：层级、间距、字体、响应式、长文案和交互状态

相比一句"按照 Figma 还原页面"，这种分阶段流程虽然多了一次分析，但减少了生成完成后的整体返工。

六、三个概念放在一起怎么理解

这三个能力分别回答不同问题：

txt 复制代码

Code Connect → 这个设计组件应该使用哪个代码组件
Auto Layout  → 这些组件应该怎样排列和伸缩
Variables    → 颜色、间距和圆角应该使用哪些设计值

它们共同影响代码生成质量，但都不是 Figma MCP 本身的替代品：

MCP 负责把已有设计上下文传给 Codex；
Code Connect、Auto Layout 和 Variables 决定这份上下文是否包含足够明确的工程语义；
Codex 负责结合仓库生成代码；
前端负责最终的架构选择和质量验收。

七、总结

这次实践让我意识到，Figma MCP 的价值不是"一键把设计稿变成页面"，而是减少前端手动读取设计信息的成本。

如果设计稿只提供静态坐标和原始色值，MCP 只能忠实地传递这些信息，Agent 仍然需要大量推测。想得到更可维护的代码，需要同时补足三类上下文：

用仓库搜索、项目规则或 Code Connect 明确组件复用关系；
用 Auto Layout 或代码侧的语义化重建明确布局意图；
用 Variables 和项目 Token 映射统一样式语义。