🚀 快速安装

复制以下命令并运行，立即安装此 Skill：

npx @anthropic-ai/skills install figma/mcp-server-guide/implement-design

💡 提示：需要 Node.js 和 NPM

实施设计

概述

此技能提供了一个结构化的流程，用于将 Figma 设计精确转化为生产就绪的代码，确保像素级精度。它保证了与 Figma MCP 服务器的一致集成、设计令牌的正确使用以及与设计稿的 1:1 视觉对等。

先决条件

  • Figma MCP 服务器必须已连接并可访问
    • 在继续之前，通过检查 Figma MCP 工具（例如 get_design_context）是否可用，来验证 Figma MCP 服务器是否已连接。
    • 如果工具不可用，则 Figma MCP 服务器可能未启用。引导用户启用插件附带的 Figma MCP 服务器。之后他们可能需要重启 MCP 客户端。
  • 用户必须提供 Figma URL，格式为：https://figma.com/design/:文件密钥/:文件名?node-id=1-2
    • :文件密钥 是文件密钥
    • 1-2 是节点 ID（要实施的特定组件或画板）
  • 项目应已建立设计系统或组件库（首选）

必需的工作流程

按顺序执行以下步骤。请勿跳过任何步骤。

步骤 1：获取节点 ID

选项 A：从 Figma URL 解析

当用户提供 Figma URL 时，提取文件密钥和节点 ID，作为参数传递给 MCP 工具。

URL 格式： https://figma.com/design/:文件密钥/:文件名?node-id=1-2

提取：

  • 文件密钥： :文件密钥（/design/ 之后的部分）
  • 节点 ID： 1-2（node-id 查询参数的值）

示例：

  • URL: https://figma.com/design/kL9xQn2VwM8pYrTb4ZcHjF/DesignSystem?node-id=42-15
  • 文件密钥：kL9xQn2VwM8pYrTb4ZcHjF
  • 节点 ID：42-15

步骤 2：获取设计上下文

使用提取的文件密钥和节点 ID 运行 get_design_context。

get_design_context(fileKey=":文件密钥", nodeId="1-2")

这将提供结构化数据，包括：

  • 布局属性（自动布局、约束、尺寸）
  • 排版规格
  • 颜色值和设计令牌
  • 组件结构和变体
  • 间距和内边距值

如果响应过大或被截断：

  1. 运行 get_metadata(fileKey=":文件密钥", nodeId="1-2") 获取高级节点映射
  2. 从元数据中识别所需的特定子节点
  3. 使用 get_design_context(fileKey=":文件密钥", nodeId=":子节点ID") 分别获取各个子节点

步骤 3：捕获视觉参考

使用相同的文件密钥和节点 ID 运行 get_screenshot，以获取视觉参考。

get_screenshot(fileKey=":文件密钥", nodeId="1-2")

此屏幕截图将作为视觉验证的事实来源。在实施过程中保持其可访问性。

步骤 4：下载所需素材

下载 Figma MCP 服务器返回的任何素材（图片、图标、SVG）。

重要提示： 遵循以下素材规则：

  • 如果 Figma MCP 服务器为图片或 SVG 返回了 localhost 源，请直接使用该源
  • 不要导入或添加新的图标包——所有素材都应来自 Figma 负载
  • 如果提供了 localhost 源，请不要使用或创建占位符
  • 素材通过 Figma MCP 服务器内置的素材端点提供服务

步骤 5：转换为项目约定

将 Figma 输出转换为此项目的框架、样式和约定。

关键原则：

  • 将 Figma MCP 输出（通常是 React + Tailwind）视为设计和行为的表示，而非最终的代码风格
  • 用项目偏好的工具类或设计系统令牌替换 Tailwind 实用工具类
  • 复用现有组件（按钮、输入框、排版、图标包装器），而不是重复实现功能
  • 一致地使用项目的颜色系统、排版比例和间距令牌
  • 尊重现有的路由、状态管理和数据获取模式

步骤 6：实现 1:1 视觉对等

力求与 Figma 设计实现像素级的视觉对等。

指南：

  • 优先考虑 Figma 的保真度，以精确匹配设计
  • 避免硬编码值——尽可能使用 Figma 提供的设计令牌
  • 当设计系统令牌与 Figma 规范冲突时，优先使用设计系统令牌，但可以微调间距或尺寸以匹配视觉效果
  • 遵循 WCAG 可访问性要求
  • 根据需要添加组件文档

步骤 7：对照 Figma 验证

在标记完成之前，将最终的 UI 与 Figma 截图进行验证。

验证检查清单：

  • 布局匹配（间距、对齐、尺寸）
  • 排版匹配（字体、字号、字重、行高）
  • 颜色完全匹配
  • 交互状态按设计工作（悬停、激活、禁用）
  • 响应式行为遵循 Figma 约束
  • 素材正确渲染
  • 满足可访问性标准

实施规则

组件组织

  • 将 UI 组件放置在项目指定的设计系统目录中
  • 遵循项目的组件命名约定
  • 除非动态值确实需要，否则避免使用内联样式

设计系统集成

  • 尽可能使用项目设计系统中的组件
  • 将 Figma 设计令牌映射到项目设计令牌
  • 当存在匹配的组件时，对其进行扩展而非创建新组件
  • 记录添加到设计系统中的任何新组件

代码质量

  • 避免硬编码值——提取为常量或设计令牌
  • 保持组件的可组合性和可复用性
  • 为组件属性添加 TypeScript 类型
  • 为导出的组件包含 JSDoc 注释

示例

示例 1：实现一个按钮组件

用户说：“实现这个 Figma 按钮组件：https://figma.com/design/kL9xQn2VwM8pYrTb4ZcHjF/DesignSystem?node-id=42-15”

操作：

  1. 解析 URL，提取文件密钥 kL9xQn2VwM8pYrTb4ZcHjF 和节点 ID 42-15
  2. 运行 get_design_context(fileKey="kL9xQn2VwM8pYrTb4ZcHjF", nodeId="42-15")
  3. 运行 get_screenshot(fileKey="kL9xQn2VwM8pYrTb4ZcHjF", nodeId="42-15") 获取视觉参考
  4. 从素材端点下载任何按钮图标
  5. 检查项目是否已有现有的按钮组件
  6. 如果有，用新变体扩展它；如果没有，使用项目约定创建新组件
  7. 将 Figma 颜色映射到项目设计令牌（例如 primary-500、primary-hover）
  8. 对照截图验证内边距、边框半径、排版

结果： 与 Figma 设计匹配的按钮组件，并与项目设计系统集成。

示例 2：构建一个仪表盘布局

用户说：“构建这个仪表盘：https://figma.com/design/pR8mNv5KqXzGwY2JtCfL4D/Dashboard?node-id=10-5”

操作：

  1. 解析 URL，提取文件密钥 pR8mNv5KqXzGwY2JtCfL4D 和节点 ID 10-5
  2. 运行 get_metadata(fileKey="pR8mNv5KqXzGwY2JtCfL4D", nodeId="10-5") 了解页面结构
  3. 从元数据中识别主要部分（头部、侧边栏、内容区、卡片）及其子节点 ID
  4. 为每个主要部分运行 get_design_context(fileKey="pR8mNv5KqXzGwY2JtCfL4D", nodeId=":子节点ID")
  5. 运行 get_screenshot(fileKey="pR8mNv5KqXzGwY2JtCfL4D", nodeId="10-5") 获取完整页面截图
  6. 下载所有素材（标志、图标、图表）
  7. 使用项目的布局基元构建布局
  8. 尽可能使用现有组件实现每个部分
  9. 对照 Figma 约束验证响应式行为

结果： 完整的仪表盘，与 Figma 设计匹配，并具有响应式布局。

最佳实践

始终从上下文开始

切勿基于假设进行实现。始终首先获取 get_design_context 和 get_screenshot。

增量验证

在实施过程中频繁验证，而不仅仅是在最后。这有助于及早发现问题。

记录偏差

如果必须偏离 Figma 设计（例如，出于可访问性或技术限制），请在代码注释中记录原因。

复用优于重创

在创建新组件之前，始终检查是否有现有组件。代码库的一致性比精确复制 Figma 更重要。

设计系统优先

如有疑问，优先考虑项目的设计系统模式，而非逐字翻译 Figma。

常见问题与解决方案

问题：Figma 输出被截断

原因： 设计过于复杂或嵌套层级过多，无法在一次响应中返回。
解决方案： 使用 get_metadata 获取节点结构，然后使用 get_design_context 单独获取特定节点。

问题：实施后设计与原稿不符

原因： 实现的代码与原始 Figma 设计之间存在视觉差异。
解决方案： 与步骤 3 中的截图进行并排比较。检查设计上下文数据中的间距、颜色和排版值。

问题：素材加载失败

原因： Figma MCP 服务器的素材端点不可访问，或 URL 被修改。
解决方案： 验证 Figma MCP 服务器的素材端点是否可访问。服务器在 localhost URL 上提供素材。直接使用这些 URL，无需修改。

问题：设计令牌值与 Figma 不同

原因： 项目的设计系统令牌值与 Figma 设计中指定的值不同。
解决方案： 当项目令牌与 Figma 值不同时，为了保持一致性，优先使用项目令牌，但可以调整间距/尺寸以保持视觉保真度。

理解设计实施

Figma 实施工作流建立了一个将设计转化为代码的可靠流程：

对于设计师： 相信他们的设计能够以像素级精度被实现。
对于开发者： 一种结构化的方法，消除了猜测并减少了来回修改。
对于团队： 一致、高质量的实现，维护了设计系统的完整性。

通过遵循此工作流，您可以确保每个 Figma 设计都得到同等细致的关注和照顾。

额外资源

📄 原始文档

完整文档（英文）：

https://skills.sh/figma/mcp-server-guide/implement-design

💡 提示：点击上方链接查看 skills.sh 原始英文文档，方便对照翻译。

声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。