Figma-Context-MCP-Skill

实现设计（Context MCP）

概述

使用此技能，以 Figma-Context-MCP（figma-developer-mcp）作为数据源，高保真地实现 Figma 设计。 将 MCP 输出视为设计的准确信息来源，再将其转换为项目约定（组件、设计令牌、样式、架构）。

前置条件

• 已配置 Figma-Context-MCP 服务，且当前客户端可以访问
• 用户提供 Figma URL 或明确的 fileKey + nodeId
• 可使用 Figma 个人访问令牌（FIGMA_API_KEY）

典型的 MCP 服务配置（stdio）

{
  "mcpServers": {
    "Framelink MCP for Figma": {
      "command": "npx",
      "args": ["-y", "figma-developer-mcp", "--figma-api-key=YOUR-KEY", "--stdio"]
    }
  }
}

必需工作流

按顺序执行以下步骤。

第 1 步：探测 MCP 连接（必需）

开始实现前，直接调用 get_figma_data 验证 MCP 连接。

如果目标节点可用，请使用该节点：

get_figma_data(fileKey="<fileKey>", nodeId="<nodeId>")

成功标准：

• 工具返回节点数据（元数据／布局／样式），即使数据不完整或被截断
• 没有 MCP 传输／身份验证错误

故障处理：

• 如果调用失败，停止实现并报告确切错误
• 明确说明，“已在配置中启用”仍可能意味着“当前会话未连接”
• 请用户修复 MCP 会话／配置／令牌，然后重新探测

第 2 步：解析 Figma 链接

从 URL 中提取：

• fileKey：/design/ 或 /file/ 后的片段
• nodeId：node-id 查询参数的值

必要时，将 nodeId 转换为 MCP 接受的格式：

• URL 通常提供 1-2
• 工具接受 1:2，也支持 -；两种格式通常都有效

第 3 步：使用 get_figma_data 获取节点上下文

调用：

get_figma_data(fileKey="<fileKey>", nodeId="<nodeId>")

使用输出了解：

• 布局结构和自动布局规则
• 字体排版和颜色样式
• 组件层级和变体
• 用于提取资源的图像／矢量节点引用

如果负载过大：

• 从当前结果中请求目标子节点 ID，然后分别使用 get_figma_data 获取子节点
• 仅在用户明确要求限制遍历范围时使用 depth

第 4 步：使用 download_figma_images 下载资源

当 get_figma_data 返回图像／矢量引用时，调用：

download_figma_images(fileKey="<fileKey>", nodes=[...], localPath="<absolute-path>")

规则：

• 仅使用 Figma 输出中的资源
• 不要替换为第三方图标包
• localPath 使用绝对路径
• 保留导出的文件名和后缀，以便追溯

第 5 步：转换为项目约定

• 将 Figma 样式映射到现有设计令牌
• 将生成的／原始结构替换为项目组件
• 遵循框架惯例（状态、路由、数据流、样式系统）
• 若存在令牌／组件，则避免使用硬编码常量

第 6 步：实现 1:1 的视觉还原

根据 Figma 节点数据和比例进行验证：

• 间距和尺寸
• 字体排版（字体系列、字号、字重、行高）
• 颜色、边框、圆角、阴影
• 交互状态
• 响应式行为

如果精确还原与系统约束冲突，请保留系统基础组件，并进行最小范围的定向覆盖。

第 7 步：最终验证清单

• 布局和对齐方式与 Figma 一致
• 文本和字体排版与 Figma 一致
• 颜色／效果与 Figma 一致
• 图像／矢量资源完整，且未被替换
• 已实现交互和响应式行为
• 保留无障碍基线

实现规则

• 创建新组件前，先复用现有项目组件
• 保持组件可组合且类型明确
• 优先使用设计令牌值，而非字面值
• 在代码注释中简要说明有意偏离设计的部分

快速示例

用户请求：

Implement this page: https://figma.com/design/AbC12345XYZ/MyPage?node-id=10-22

执行概要：

1. 提取 fileKey=AbC12345XYZ、nodeId=10-22
2. 运行 MCP 连接探测：get_figma_data(fileKey="AbC12345XYZ", nodeId="10-22")
3. 如果探测成功，则根据需要，通过额外调用 get_figma_data 获取／展开节点上下文
4. 从响应中收集图像／矢量节点
5. 调用 download_figma_images(...)，将资源下载到项目资源目录
6. 使用现有组件系统和设计令牌实现
7. 验证还原度和交互行为