mcpField
I
implement-design

implement-design

github.com/figma设计与 UI2.1k5.9k 次安装今天更新
代码仓库

关于 implement-design

Implement Design 是将 Figma 设计转为项目代码的技能，面向根据 Figma 链接实现界面的开发者。它按步骤获取设计上下文、截图与素材，并结合项目规范进行实现和视觉检查。

主要功能

  1. 01从 Figma 链接提取文件和节点 ID
  2. 02获取设计上下文与截图
  3. 03下载 Figma MCP 提供的素材
  4. 04复用项目组件与设计令牌
  5. 05对照参考图检查实现效果

适用场景

  1. 01在现有项目中实现 Figma 按钮
  2. 02根据 Figma 画面构建仪表盘
  3. 03对照截图检查界面布局和样式

MCP 相关

需要连接可用的 Figma MCP 服务，使用 `get_design_context`、`get_screenshot` 和 `get_metadata` 等工具读取设计数据与素材。

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/figma/mcp-server-guide --skill implement-design

安装后在 Claude Code 中输入/implement-design确认已加载。

详细介绍

实现设计

概述

此技能提供一套结构化工作流，用于将 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/:fileKey/:fileName?node-id=1-2
    • :fileKey 是文件键
    • 1-2 是节点 ID（要实现的具体组件或画板）
  • 项目应已建立设计系统或组件库（优先）

必需工作流

请按顺序完成以下步骤。不要跳过任何步骤。

第 1 步：获取节点 ID
选项 A：从 Figma URL 解析

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

URL 格式： https://figma.com/design/:fileKey/:fileName?node-id=1-2

提取内容：

  • 文件键： :fileKey（/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=":fileKey", nodeId="1-2")

其中包含以下结构化数据：

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

如果响应过大或被截断：

  1. 运行 get_metadata(fileKey=":fileKey", nodeId="1-2") 获取高层级节点映射
  2. 根据元数据确定所需的具体子节点
  3. 使用 get_design_context(fileKey=":fileKey", nodeId=":childNodeId") 获取各个子节点
第 3 步：捕获视觉参考

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

get_screenshot(fileKey=":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 进行验证

标记为完成前，请对照 Figma 截图验证最终 UI。

验证清单：

  • 布局匹配（间距、对齐、尺寸）
  • 字体排版匹配（字体、字号、字重、行高）
  • 颜色完全一致
  • 交互状态符合设计（悬停、激活、禁用）
  • 响应式行为符合 Figma 约束
  • 资源渲染正确
  • 符合无障碍标准

实现规则

组件组织
  • 将 UI 组件放在项目指定的设计系统目录中
  • 遵循项目的组件命名规范
  • 除非确实需要处理动态数值，否则避免使用内联样式
设计系统集成
  • 尽可能始终使用项目设计系统中的组件
  • 将 Figma 设计令牌映射到项目设计令牌
  • 存在匹配的组件时，应扩展该组件，而不是新建组件
  • 为添加到设计系统中的任何新组件编写文档
代码质量
  • 避免硬编码数值；将其提取为常量或设计令牌
  • 确保组件可组合且可复用
  • 为组件属性添加 TypeScript 类型
  • 为导出的组件添加 JSDoc 注释

示例

示例 1：实现按钮组件

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

操作：

  1. 解析 URL，提取 fileKey=kL9xQn2VwM8pYrTb4ZcHjF 和 nodeId=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，提取 fileKey=pR8mNv5KqXzGwY2JtCfL4D 和 nodeId=10-5
  2. 运行 get_metadata(fileKey="pR8mNv5KqXzGwY2JtCfL4D", nodeId="10-5")，了解页面结构
  3. 从元数据中识别主要区域（页眉、侧边栏、内容区、卡片）及其子节点 ID
  4. 对每个主要区域运行 get_design_context(fileKey="pR8mNv5KqXzGwY2JtCfL4D", nodeId=":childNodeId")
  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 设计都得到同等细致、用心的实现。

其他资源

评论

支持 Markdown