Figma 设计集成专家

要解决的具体问题

Figma 设计稿到前端代码的还原过程中，最常见的问题是样式硬编码、设计 Token 遗漏、布局还原不一致。设计师在 Figma 里用 Auto Layout 定义了间距、对齐、响应式规则，前端开发拿到标注稿后往往手动抄写数值，导致组件库风格不统一、修改设计需全局搜索替换。

核心能力与关键步骤

该技能通过 Figma MCP Server 将设计稿直接转化为 Vue 3 + Naive UI 组件代码，流程如下：

1. 意图解析

从用户指令推断操作类型：完整实现、仅提取 Token、组件实现、设计分析，不需要每次追问。

1. 设计上下文获取

从用户消息中提取 https://www.figma.com/design/...?node-id= 格式的链接，调用 get_design_context 获取结构化数据；若需颜色、字体等变量，则调用 get_variable_defs。

1. 设计分析

- 识别组件层级：区分独立组件与布局容器
- 提取设计 Token：颜色、圆角、间距、字号
- 映射 Naive UI 组件：Figma 元素对应 NButton、NInput、NDataTable 等
- 识别响应式需求：Auto Layout 映射为 flex / grid

1. 组件实现与输出

按项目规范生成 Vue SFC，优先使用 n-config-provider 主题变量，避免硬编码；遵循 Auto Layout 布局规则（如 Horizontal → Gap 映射为 display: flex; gap: Xpx;）。输出包含设计分析摘要、组件代码、样式说明、集成指引。

适用边界与注意点

• MCP 必须可用：技能依赖 .qoder/mcp.json 中配置的 Figma MCP Server，若未配置需先完成认证。
• 无对应组件的处理：Figma 元素在 Naive UI 中无直接对应时，使用最接近的组件 + 样式覆盖。
• 数据不完整：MCP 返回数据缺失时，提示用户提供更精确的 node-id 或补充截图。
• 字体差异：设计稿使用非项目字体时，使用系统字体栈并告知用户差异。
• 交互状态：设计稿包含 hover/active 状态时，在代码中实现对应样式，参考 Naive UI 主题定制。