SuperAPI AI 工具集
合作ENAI 行业资讯收藏
Skill 广场implement-design

implement-design

前端与建站

查看项目

更新于 10-15 11:11

技能介绍

Implement Design 是一个将 Figma 设计稿转化为生产级代码的技能，强调 1:1 视觉保真度，并提供一套必须按顺序执行、不可跳步的工作流。

【用途】 用于从 Figma 文件实现 UI，或在用户提及“implement design”等场景时触发。核心目标是将设计稿以像素级精度翻译为符合项目规范的生产代码。

【前提条件】

  • 必须连接并可访问 Figma MCP 服务器。
  • 用户需提供格式如 https://figma.com/design/:fileKey/:fileName?node-id=1-2 的 Figma URL，其中 :fileKey 为文件键，1-2 为节点 ID（要实现的特定组件或画板）；或在使用 figma-desktop MCP 时，直接在 Figma 桌面应用中选中节点（无需 URL）。
  • 项目最好已有既定的设计系统或组件库。

【必需工作流】 步骤 1：获取节点 ID。选项 A 从 Figma URL 解析文件键与节点 ID；使用本地桌面 MCP（figma-desktop）时不传 fileKey，服务器自动使用当前打开的文件，仅需 nodeId。选项 B 在未提供 URL 时，仅 figma-desktop MCP 可使用桌面应用中当前选中的节点。注意：基于选择的提示仅适用于 figma-desktop MCP，远程服务器需要画板或图层的链接。 步骤 2：获取设计上下文。运行 get_design_context(fileKey, nodeId)，获得布局属性（Auto Layout、约束、尺寸）、字体规格、颜色值与设计令牌、组件结构与变体、间距与内边距等结构化数据。若响应过大或被截断，先运行 get_metadata 获取高层节点图，识别所需子节点，再逐个用 get_design_context 获取。 步骤 3：捕获视觉参考。运行 get_screenshot 获取视觉参考，该截图作为视觉验证的事实来源，实现过程中需始终可用。 步骤 4：下载所需资源。下载 Figma MCP 服务器返回的图片、图标、SVG 等资源。若返回 localhost 来源的图片或 SVG，直接使用该来源；不要导入或新增图标包；若已提供 localhost 来源，不要使用或创建占位符；资源通过 Figma MCP 服务器内置资源端点提供。 步骤 5：翻译为项目约定。将 Figma MCP 输出（通常为 React + Tailwind）视为设计与行为的表达，而非最终代码风格；用项目偏好工具或设计系统令牌替换 Tailwind 工具类；复用现有组件而非重复实现；一致使用项目的颜色系统、字体刻度与间距令牌；遵循现有路由、状态管理与数据获取模式。 步骤 6：实现 1:1 视觉一致。优先保证与 Figma 一致；避免硬编码值，尽量使用 Figma 中的设计令牌；当设计系统令牌与 Figma 规格冲突时，优先使用设计系统令牌，但最小幅度调整间距或尺寸以匹配视觉；遵循 WCAG 无障碍要求；按需补充组件文档。 步骤 7：对照 Figma 验证。在标记完成前，按清单对照 Figma 截图验证：布局（间距、对齐、尺寸）、字体（字体、字号、字重、行高）、颜色完全一致、交互状态（悬停、激活、禁用）符合设计、响应式行为遵循 Figma 约束、资源渲染正确、满足无障碍标准。

【实现规则】 组件组织：将 UI 组件放入项目指定的设计系统目录；遵循项目组件命名约定；除非动态值确有必要，避免内联样式。设计系统集成：尽可能始终使用项目设计系统中的组件；将 Figma 设计令牌映射到项目设计令牌；存在匹配组件时扩展而非新建；为设计系统新增组件补充文档。代码质量：避免硬编码，提取为常量或设计令牌；保持组件可组合、可复用；为组件 props 添加 TypeScript 类型；为导出组件添加 JSDoc 注释。

【示例】 示例 1（按钮组件）：解析 URL 得到 fileKey 与 nodeId，运行 get_design_context 与 get_screenshot，从资源端点下载按钮图标，检查项目是否已有按钮组件，有则扩展新变体、无则按项目约定新建，将 Figma 颜色映射为项目令牌，对照截图验证内边距、圆角与字体。 示例 2（仪表盘布局）：解析 URL，运行 get_metadata 了解页面结构，识别主要区块（头部、侧边栏、内容区、卡片）及其子节点 ID，对每个主要区块运行 get_design_context，运行 get_screenshot 获取整页，下载全部资源，使用项目布局原语搭建布局，尽量复用现有组件实现各区块，对照 Figma 约束验证响应式行为。

【最佳实践】 始终从上下文开始：不要基于假设实现，先获取 get_design_context 与 get_screenshot。增量验证：实现过程中频繁验证，而非仅在最后。记录偏差：若必须偏离 Figma 设计，在代码注释中说明原因。复用优先于重建：新建前先检查现有组件。设计系统优先：存疑时优先项目设计系统模式。

【常见问题与解决】 Figma 输出被截断：设计过于复杂或嵌套层过多，改用 get_metadata 获取节点结构后逐个获取。实现后设计不匹配：与步骤 3 截图并排比较，检查设计上下文数据中的间距、颜色与字体值。资源未加载：确认 Figma MCP 资源端点可访问，资源以 localhost URL 提供，直接使用不要修改。设计令牌值与 Figma 不同：优先项目令牌以保持一致，同时调整间距/尺寸维持视觉保真。

【适用场景】 需要对 Figma 设计稿进行高保真实现的前端/UI 开发场景，尤其适合已有设计系统或组件库、追求设计与代码一致性的团队。对设计师、开发者与团队分别提供实现可预期、结构化流程与一致性保障。

【限制】 必须连接并可访问 Figma MCP 服务器；远程服务器需链接，基于选择的提示仅适用于 figma-desktop MCP；资料未提供具体收费、价格、平台支持范围等信息。