implement-design

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Implement Design

实现设计

Overview

概述

This skill provides a structured workflow for translating Figma designs into production-ready code with pixel-perfect accuracy. It ensures consistent integration with the Figma MCP server, proper use of design tokens, and 1:1 visual parity with designs.

本技能提供了一套结构化工作流，可将Figma设计稿转换为像素级精准的生产环境可用代码。它确保与Figma MCP服务器的一致集成、设计令牌的正确使用，以及与设计稿的1:1视觉匹配。

Prerequisites

前提条件

Figma MCP server must be connected and accessible
User must provide a Figma URL in the format:
```
https://figma.com/design/:fileKey/:fileName?node-id=1-2
```
- ```
:fileKey
```
  is the file key
- ```
1-2
```
  is the node ID (the specific component or frame to implement)
OR when using
```
figma-desktop
```
MCP: User can select a node directly in the Figma desktop app (no URL required)
Project should have an established design system or component library (preferred)

必须已连接并可访问Figma MCP服务器
用户需提供格式为
```
https://figma.com/design/:fileKey/:fileName?node-id=1-2
```
的Figma链接
- ```
:fileKey
```
  为文件密钥
- ```
1-2
```
  为节点ID（要实现的特定组件或框架）
或使用
```
figma-desktop
```
MCP时：用户可直接在Figma桌面应用中选择节点（无需链接）
项目应已建立设计系统或组件库（优先推荐）

Required Workflow

必选工作流

Follow these steps in order. Do not skip steps.

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

Step 1: Get Node ID

步骤1：获取节点ID

Option A: Parse from Figma URL

选项A：从Figma链接解析

When the user provides a Figma URL, extract the file key and node ID to pass as arguments to MCP tools.

URL format:

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

Extract:

File key:
```
:fileKey
```
(the segment after
```
/design/
```
)
Node ID:
```
1-2
```
(the value of the
```
node-id
```
query parameter)

Note: When using the local desktop MCP (

figma-desktop

fileKey

is not passed as a parameter to tool calls. The server automatically uses the currently open file, so only

nodeId

is needed.

Example:

URL:

https://figma.com/design/kL9xQn2VwM8pYrTb4ZcHjF/DesignSystem?node-id=42-15

File key:
```
kL9xQn2VwM8pYrTb4ZcHjF
```
Node ID:
```
42-15
```

当用户提供Figma链接时，提取文件密钥和节点ID，作为MCP工具的参数传入。

链接格式：

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

提取内容：

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

注意： 使用本地桌面版MCP（

figma-desktop

）时，工具调用无需传入

fileKey

。服务器会自动使用当前打开的文件，因此仅需

nodeId

。

示例：

链接：

https://figma.com/design/kL9xQn2VwM8pYrTb4ZcHjF/DesignSystem?node-id=42-15

文件密钥：
```
kL9xQn2VwM8pYrTb4ZcHjF
```
节点ID：
```
42-15
```

Option B: Use Current Selection from Figma Desktop App (figma-desktop MCP only)

选项B：从Figma桌面应用选择当前节点（仅适用于figma-desktop MCP）

When using the

figma-desktop

MCP and the user has NOT provided a URL, the tools automatically use the currently selected node from the open Figma file in the desktop app.

Note: Selection-based prompting only works with the

figma-desktop

MCP server. The remote server requires a link to a frame or layer to extract context. The user must have the Figma desktop app open with a node selected.

使用

figma-desktop

MCP且用户未提供链接时，工具会自动使用Figma桌面应用中当前打开文件里选中的节点。

注意： 基于选择的提示仅适用于

figma-desktop

MCP服务器。远程服务器需要框架或图层的链接来提取上下文。用户必须打开Figma桌面应用并选中一个节点。

Step 2: Fetch Design Context

步骤2：获取设计上下文

Run

get_design_context

with the extracted file key and node ID.

get_design_context(fileKey=":fileKey", nodeId="1-2")

This provides the structured data including:

Layout properties (Auto Layout, constraints, sizing)
Typography specifications
Color values and design tokens
Component structure and variants
Spacing and padding values

If the response is too large or truncated:

Run

get_metadata(fileKey=":fileKey", nodeId="1-2")

to get the high-level node map

Identify the specific child nodes needed from the metadata

Fetch individual child nodes with

get_design_context(fileKey=":fileKey", nodeId=":childNodeId")

运行

get_design_context

，传入提取的文件密钥和节点ID。

get_design_context(fileKey=":fileKey", nodeId="1-2")

该工具会返回结构化数据，包括：

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

如果响应内容过大或被截断：

运行

get_metadata(fileKey=":fileKey", nodeId="1-2")

获取高级节点映射

从元数据中确定所需的特定子节点

使用

get_design_context(fileKey=":fileKey", nodeId=":childNodeId")

单独获取各个子节点

Step 3: Capture Visual Reference

步骤3：获取视觉参考

Run

get_screenshot

with the same file key and node ID for a visual reference.

get_screenshot(fileKey=":fileKey", nodeId="1-2")

This screenshot serves as the source of truth for visual validation. Keep it accessible throughout implementation.

运行

get_screenshot

，传入相同的文件密钥和节点ID以获取视觉参考。

get_screenshot(fileKey=":fileKey", nodeId="1-2")

此截图将作为视觉验证的唯一标准，在整个实现过程中请随时查看。

Step 4: Download Required Assets

步骤4：下载所需资源

Download any assets (images, icons, SVGs) returned by the Figma MCP server.

IMPORTANT: Follow these asset rules:

If the Figma MCP server returns a
```
localhost
```
source for an image or SVG, use that source directly
DO NOT import or add new icon packages - all assets should come from the Figma payload
DO NOT use or create placeholders if a
```
localhost
```
source is provided
Assets are served through the Figma MCP server's built-in assets endpoint

下载Figma MCP服务器返回的所有资源（图片、图标、SVG）。

重要提示： 请遵循以下资源规则：

如果Figma MCP服务器返回的图片或SVG源为
```
localhost
```
链接，请直接使用该链接
请勿导入或添加新的图标包——所有资源均应来自Figma返回的数据
如果提供了
```
localhost
```
源，请勿使用或创建占位符
资源通过Figma MCP服务器内置的资源端点提供

Step 5: Translate to Project Conventions

步骤5：适配项目规范

Translate the Figma output into this project's framework, styles, and conventions.

Key principles:

Treat the Figma MCP output (typically React + Tailwind) as a representation of design and behavior, not as final code style
Replace Tailwind utility classes with the project's preferred utilities or design system tokens
Reuse existing components (buttons, inputs, typography, icon wrappers) instead of duplicating functionality
Use the project's color system, typography scale, and spacing tokens consistently
Respect existing routing, state management, and data-fetch patterns

将Figma输出转换为符合项目框架、样式与规范的代码。

核心原则：

将Figma MCP输出（通常为React + Tailwind）视为设计与交互的参考，而非最终代码风格
用项目偏好的工具类或设计系统令牌替换Tailwind工具类
复用现有组件（按钮、输入框、排版、图标容器），避免重复实现功能
始终使用项目的颜色系统、排版比例与间距令牌
遵循现有的路由、状态管理与数据获取模式

Step 6: Achieve 1:1 Visual Parity

步骤6：实现1:1视觉匹配

Strive for pixel-perfect visual parity with the Figma design.

Guidelines:

Prioritize Figma fidelity to match designs exactly
Avoid hardcoded values - use design tokens from Figma where available
When conflicts arise between design system tokens and Figma specs, prefer design system tokens but adjust spacing or sizes minimally to match visuals
Follow WCAG requirements for accessibility
Add component documentation as needed

力求与Figma设计稿实现像素级视觉匹配。

指南：

优先保证与Figma的还原度，完全匹配设计稿
避免硬编码值——尽可能使用Figma提供的设计令牌
当设计系统令牌与Figma规范冲突时，优先使用设计系统令牌，但可微调间距或尺寸以保持视觉还原
遵循WCAG无障碍要求
按需添加组件文档

Step 7: Validate Against Figma

步骤7：与Figma设计稿验证

Implementation Rules

实现规则

Component Organization

组件组织

Place UI components in the project's designated design system directory
Follow the project's component naming conventions
Avoid inline styles unless truly necessary for dynamic values

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

Design System Integration

设计系统集成

ALWAYS use components from the project's design system when possible
Map Figma design tokens to project design tokens
When a matching component exists, extend it rather than creating a new one
Document any new components added to the design system

尽可能始终使用项目设计系统中的组件
将Figma设计令牌映射到项目设计令牌
当存在匹配组件时，扩展该组件而非创建新组件
记录添加到设计系统的所有新组件

Code Quality

代码质量

Avoid hardcoded values - extract to constants or design tokens
Keep components composable and reusable
Add TypeScript types for component props
Include JSDoc comments for exported components

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

Examples

示例

Example 1: Implementing a Button Component

示例1：实现按钮组件

User says: "Implement this Figma button component: https://figma.com/design/kL9xQn2VwM8pYrTb4ZcHjF/DesignSystem?node-id=42-15"

Actions:

Parse URL to extract fileKey=
```
kL9xQn2VwM8pYrTb4ZcHjF
```
and nodeId=
```
42-15
```

Run

get_design_context(fileKey="kL9xQn2VwM8pYrTb4ZcHjF", nodeId="42-15")

Run

get_screenshot(fileKey="kL9xQn2VwM8pYrTb4ZcHjF", nodeId="42-15")

for visual reference

Download any button icons from the assets endpoint
Check if project has existing button component
If yes, extend it with new variant; if no, create new component using project conventions
Map Figma colors to project design tokens (e.g.,
```
primary-500
```
,
```
primary-hover
```
)
Validate against screenshot for padding, border radius, typography

Result: Button component matching Figma design, integrated with project design system.

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

操作步骤：

解析链接，提取fileKey=
```
kL9xQn2VwM8pYrTb4ZcHjF
```
和nodeId=
```
42-15
```

运行

get_design_context(fileKey="kL9xQn2VwM8pYrTb4ZcHjF", nodeId="42-15")

运行

get_screenshot(fileKey="kL9xQn2VwM8pYrTb4ZcHjF", nodeId="42-15")

获取视觉参考

从资源端点下载所有按钮图标
检查项目是否已有按钮组件
如果有，基于现有组件扩展新变体；如果没有，按照项目规范创建新组件
将Figma颜色映射到项目设计令牌（例如
```
primary-500
```
、
```
primary-hover
```
）
对照截图验证内边距、边框圆角、排版

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

Example 2: Building a Dashboard Layout

示例2：构建仪表板布局

User says: "Build this dashboard: https://figma.com/design/pR8mNv5KqXzGwY2JtCfL4D/Dashboard?node-id=10-5"

Actions:

Parse URL to extract fileKey=
```
pR8mNv5KqXzGwY2JtCfL4D
```
and nodeId=
```
10-5
```

Run

get_metadata(fileKey="pR8mNv5KqXzGwY2JtCfL4D", nodeId="10-5")

to understand the page structure

Identify main sections from metadata (header, sidebar, content area, cards) and their child node IDs

Run

get_design_context(fileKey="pR8mNv5KqXzGwY2JtCfL4D", nodeId=":childNodeId")

for each major section

Run

get_screenshot(fileKey="pR8mNv5KqXzGwY2JtCfL4D", nodeId="10-5")

for the full page

Download all assets (logos, icons, charts)
Build layout using project's layout primitives
Implement each section using existing components where possible
Validate responsive behavior against Figma constraints

Result: Complete dashboard matching Figma design with responsive layout.

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

操作步骤：

解析链接，提取fileKey=
```
pR8mNv5KqXzGwY2JtCfL4D
```
和nodeId=
```
10-5
```

运行

get_metadata(fileKey="pR8mNv5KqXzGwY2JtCfL4D", nodeId="10-5")

了解页面结构

从元数据中识别主要区域（页眉、侧边栏、内容区、卡片）及其子节点ID

为每个主要区域运行

get_design_context(fileKey="pR8mNv5KqXzGwY2JtCfL4D", nodeId=":childNodeId")

运行

get_screenshot(fileKey="pR8mNv5KqXzGwY2JtCfL4D", nodeId="10-5")

获取完整页面截图

下载所有资源（Logo、图标、图表）
使用项目的布局原语构建布局
尽可能使用现有组件实现各个区域
对照Figma约束条件验证响应式行为

结果： 生成与Figma设计匹配的完整仪表板，具备响应式布局。

Best Practices

最佳实践

Always Start with Context

始终从上下文开始

Never implement based on assumptions. Always fetch

get_design_context

and

get_screenshot

first.

切勿基于假设进行实现。务必先获取

get_design_context

和

get_screenshot

的结果。

Incremental Validation

增量验证

Validate frequently during implementation, not just at the end. This catches issues early.

在实现过程中频繁验证，而非仅在最后验证。这样可以尽早发现问题。

Document Deviations

记录偏差

If you must deviate from the Figma design (e.g., for accessibility or technical constraints), document why in code comments.

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

Reuse Over Recreation

复用优先于重建

Always check for existing components before creating new ones. Consistency across the codebase is more important than exact Figma replication.

在创建新组件前，务必检查是否已有现有组件。代码库的一致性比完全复刻Figma设计更重要。

Design System First

优先遵循设计系统

When in doubt, prefer the project's design system patterns over literal Figma translation.

如有疑问，优先采用项目的设计系统模式，而非完全直译Figma设计。

Common Issues and Solutions

常见问题与解决方案

Issue: Figma output is truncated

问题：Figma输出内容被截断

Cause: The design is too complex or has too many nested layers to return in a single response. Solution: Use

get_metadata

to get the node structure, then fetch specific nodes individually with

get_design_context

原因： 设计过于复杂或嵌套层级过多，无法在单次响应中返回全部内容。 解决方案： 使用

get_metadata

获取节点结构，然后使用

get_design_context

单独获取特定节点。

Issue: Design doesn't match after implementation

问题：实现后与设计稿不匹配

Cause: Visual discrepancies between the implemented code and the original Figma design. Solution: Compare side-by-side with the screenshot from Step 3. Check spacing, colors, and typography values in the design context data.

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

Issue: Assets not loading

问题：资源无法加载

Cause: The Figma MCP server's assets endpoint is not accessible or the URLs are being modified. Solution: Verify the Figma MCP server's assets endpoint is accessible. The server serves assets at

localhost

URLs. Use these directly without modification.

原因： Figma MCP服务器的资源端点不可访问，或链接被修改。 解决方案： 验证Figma MCP服务器的资源端点是否可访问。服务器通过

localhost

链接提供资源，请直接使用该链接，不要修改。

Issue: Design token values differ from Figma

问题：设计令牌值与Figma不一致

Cause: The project's design system tokens have different values than those specified in the Figma design. Solution: When project tokens differ from Figma values, prefer project tokens for consistency but adjust spacing/sizing to maintain visual fidelity.

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

Understanding Design Implementation

理解设计实现

The Figma implementation workflow establishes a reliable process for translating designs to code:

For designers: Confidence that implementations will match their designs with pixel-perfect accuracy. For developers: A structured approach that eliminates guesswork and reduces back-and-forth revisions. For teams: Consistent, high-quality implementations that maintain design system integrity.

By following this workflow, you ensure that every Figma design is implemented with the same level of care and attention to detail.

Figma实现工作流为设计转代码建立了可靠的流程：

对于设计师： 可以放心，实现的代码会与设计稿实现像素级精准匹配。 对于开发者： 提供了结构化的方法，消除猜测，减少反复修改。 对于团队： 实现一致、高质量的代码，同时保持设计系统的完整性。

遵循此工作流，你可以确保每一个Figma设计都能得到同等细致的实现。