Figma 设计稿转生产级 UI（Implement Design） Skill 技能

技能简介

Implement Design 是 Figma 官方推出的 Agent 技能，适用于 Claude、Codex、Claude Code。设计交付过程中，间距、素材与组件意图常常在还原时丢失，导致成品与设计稿偏差越来越大。该技能通过一套基于 Figma MCP 的可复现工作流，让 AI 按设计上下文与截图精确实现 UI，把设计还原从“凭感觉”变成“有依据”。

核心能力

• 解析设计链接：从 Figma 设计 URL 中提取文件 key 与节点 ID。
• 获取设计上下文：通过 Figma MCP 服务器拉取结构化设计信息。
• 截图对比：抓取 Figma 截图，用于实现过程中的视觉比对。
• 资产复用：直接使用 Figma 提供的图标、图片与 SVG 资产。
• 令牌映射：把 Figma 的设计令牌与布局数据映射到项目既有约定。
• 最终校验：对间距、字体、颜色、资产与可访问性做收尾验证。

安装配置

1. 使用命令安装：npx skillstore add figma/implement-design。
2. 确保已连接 Figma MCP 服务器，或在 Figma 桌面端选中目标节点。
3. 确认当前账号拥有目标 Figma 文件与画板的访问权限。

使用步骤

1. 在动手实现前，先获取设计上下文与截图作为依据。
2. 优先复用项目中已有的组件，再考虑新建 UI 基元。
3. 把 Figma 的设计令牌映射到项目令牌，而非直接复制生成的样式。
4. 实现后对照截图，校验响应式表现与可访问性，并记录与设计的偏差。

适用场景

• 构建产品组件：按项目既有模式实现按钮、表单、卡片等 Figma 组件。
• 评审设计交付：帮助开发者保留设计稿中的间距、字体、颜色与响应式行为。
• 搭建一致的 UI 页面：把仪表盘或工作流画板转化为可复用的页面区块。
• 集成复杂流程：将复杂 Figma 流程转成可复用组件，并记录偏差与可访问性验证结果。

适用人群

前端工程师、设计工程师、设计系统维护者，以及需要高质量还原设计稿的产品研发团队。

工作原理

技能通过 Figma MCP 服务器解析设计链接并拉取结构化上下文与截图，再将其映射到项目组件与设计令牌，最后以截图对比完成视觉校验。整个过程以设计上下文为唯一依据，避免“凭记忆实现”。

注意事项

需要已连接 Figma MCP 服务器或选中的桌面节点；需要目标文件与画板的访问权限；当项目令牌与设计稿刻意不同时，无法保证像素级一致；技能不能替代产品评审、设计师确认与可访问性测试。

官方链接

• 技能主页：https://skillstore.io/skills/figma-implement-design
• 仓库地址：https://github.com/figma/mcp-server-guide/tree/main/skills/implement-design/
• 作者：figma｜许可证：MIT