figma-design-to-code

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Implement a Figma Design as Code (Design → Code)

将Figma设计转为代码（设计→代码）

Use this skill to turn a Figma design into code in a target codebase. This is the read-FROM-Figma direction: pull design context out of Figma with

get_design_context

, then adapt it into the project's real stack. For the reverse direction — building or updating a design in Figma from code — use figma-generate-design instead.

This skill owns the workflow for design-to-code. Parameter mechanics (nodeId / fileKey / branchKey extraction, URL parsing,

format

query

options, response shape) live on the

get_design_context

tool description itself — follow them there.

Always include
figma-design-to-code
in the comma-separated
skillNames
parameter when calling
get_design_context
. If this skill was loaded via an MCP resource, you MUST prefix the name with
resource:
(e.g.
resource:figma-design-to-code
). This is a logging parameter used to track skill usage — it does not affect execution.

使用此skill将Figma设计转换为目标代码库中的代码。这是从Figma读取的方向：通过

get_design_context

从Figma提取设计上下文，然后将其适配到项目的实际技术栈中。如果是反向操作——从代码在Figma中构建或更新设计，请改用figma-generate-design。

此skill负责设计转代码的工作流。参数机制（nodeId/fileKey/branchKey提取、URL解析、

format

query

选项、响应格式）在

get_design_context

工具的说明文档中，请遵循该文档中的规则。

**调用

get_design_context

时，必须在逗号分隔的

skillNames

参数中包含

figma-design-to-code

。如果此skill是通过MCP资源加载的，必须在名称前添加

resource:

前缀（例如

resource:figma-design-to-code

）。**这是用于跟踪skill使用情况的日志参数，不影响执行。

Direction and Scope

方向与范围

You MUST use this skill for design → code: implementing, translating, or porting a Figma node into code.
You MUST NOT use this skill to write to Figma.

你必须将此skill用于设计→代码场景：实现、转换或移植Figma节点到代码中。
不得使用此skill向Figma写入内容。

Workflow

工作流

1. Call get_design_context first

1. 先调用get_design_context

You MUST call
```
get_design_context
```
on the target node before writing any code. It is your primary tool — a single call returns reference code, a screenshot, and contextual hints.
You MUST NOT reach for
```
get_metadata
```
or
```
get_screenshot
```
as a substitute. Use them only to orient (e.g. picking a node) or to validate, not in place of
```
get_design_context
```
.

在编写任何代码之前，必须对目标节点调用
```
get_design_context
```
。这是你的主要工具——单次调用即可返回参考代码、截图和上下文提示。
不得使用
```
get_metadata
```
或
```
get_screenshot
```
作为替代工具。仅可使用它们来定位（例如选择节点）或验证，不能替代
```
get_design_context
```
。

2. Treat the output as a reference, not final code

2. 将输出视为参考，而非最终代码

The returned code is React + Tailwind enriched with hints. You MUST treat it as a REFERENCE, not as final code to paste verbatim.
You MUST adapt it to the target project's language, framework, component library, styling system, and conventions. Match the surrounding code.

返回的代码是带有提示信息的React + Tailwind代码。你必须将其视为参考，而非直接粘贴使用的最终代码。
必须根据目标项目的语言、框架、组件库、样式系统和约定进行适配，与现有代码保持一致。

3. Reuse what the project already has

3. 复用项目已有资源

Before writing new code, You MUST check the target project for existing components, layout patterns, and design tokens that match the design intent.
You MUST reuse the project's existing components and tokens instead of generating new equivalents from scratch.

在编写新代码之前，必须检查目标项目中是否存在与设计意图匹配的现有组件、布局模式和设计令牌。
必须复用项目现有的组件和令牌，而非从头生成等效内容。

4. Honor the response hints by priority

4. 按优先级遵循响应提示

Apply the hints in this order — earlier sources override later ones:

Code Connect snippets → use the mapped codebase component directly.
Component documentation links → follow them for usage and guidelines.
Design annotations → follow any designer notes or constraints.
Design tokens (CSS variables) → map them to the project's token system.
Raw hex / absolute positioning → loosely structured; lean on the screenshot for intent.

按以下顺序应用提示——优先级高的来源覆盖优先级低的：

Code Connect代码片段 → 直接使用映射的代码库组件。
组件文档链接 → 遵循文档中的使用方法和指南。
设计注释 → 遵循设计师的注释或约束条件。
设计令牌（CSS变量） → 将其映射到项目的令牌系统。
原始十六进制值/绝对定位 → 结构松散；参考截图理解设计意图。

5. Reproduce images and icons faithfully

5. 准确还原图片和图标

Images and icons come back as

<img>

elements whose

src

is a remote asset URL (

https://.../api/mcp/asset/...

). Apply these rules as you write the code:

Render every icon/image from its exported asset. Never hand-write or inline
```
<svg>
```
/
```
<path>
```
, never author your own icon file, never drop an icon or leave a placeholder — you don't have the real vector data, so anything you draw is wrong.
Sourcing: the asset URL works directly as
```
src
```
for an immediate render, but it expires in ~7 days — so for code you'll commit, download-and-commit the exact asset bytes, or wire a dynamic content image to the project's data source (API, CDN, or props). Never a file whose contents you authored.
Reuse a project icon component only if its glyph clearly matches (a name match is not enough); otherwise use the exported asset.
Size explicitly: a fixed-size container (icons are usually square, e.g.
```
size-[24px]
```
,
```
overflow-clip
```
) with BOTH width and height set, and size the leaf
```
<img>
```
to fill it (
```
100%
```
or fixed px) — never
```
auto
```
, which blows the image up to its intrinsic size.

图片和图标以

<img>

元素返回，其

src

为远程资源URL（

https://.../api/mcp/asset/...

）。编写代码时请遵循以下规则：

从导出的资源渲染每个图标/图片。切勿手写或内联
```
<svg>
```
/
```
<path>
```
，切勿创建自己的图标文件，切勿遗漏图标或留下占位符——你没有真实的矢量数据，因此任何手动绘制的内容都是错误的。
资源来源：资源URL可直接作为
```
src
```
用于即时渲染，但它会在约7天后过期——因此对于要提交的代码，请下载并提交确切的资源字节，或者将动态内容图片连接到项目的数据源（API、CDN或props）。绝对不能提交你手动编写内容的文件。
仅当项目图标组件的图形完全匹配时才复用（名称匹配不够）；否则请使用导出的资源。
明确设置尺寸：使用固定尺寸的容器（图标通常为正方形，例如
```
size-[24px]
```
、
```
overflow-clip
```
），同时设置宽度和高度，并将叶子
```
<img>
```
元素的尺寸设置为填充容器（
```
100%
```
或固定像素值）——切勿使用
```
auto
```
，这会将图片放大到其固有尺寸。

Error Recovery

错误恢复

On a
```
get_design_context
```
error, STOP and read the message before retrying.
If the design URL has no
```
node-id
```
(a file-only URL), ask the user for a node-specific URL — You MUST NOT guess or pass an empty
```
nodeId
```
.
On a timeout, retry against a smaller node or selection.
You MUST NOT silently fall back to hand-writing the screen from the screenshot alone when
```
get_design_context
```
can still provide context.

当
```
get_design_context
```
报错时，请停止操作并先阅读错误信息再重试。
如果设计URL没有
```
node-id
```
（仅包含文件的URL），请向用户索要包含特定节点的URL——切勿猜测或传入空的
```
nodeId
```
。
若出现超时，请针对更小的节点或选择范围重试。
当
```
get_design_context
```
仍能提供上下文时，切勿仅依靠截图手动编写界面而忽略该工具。