figma-design-to-code

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

TemPad Dev: Figma Design to Code

TemPad Dev：Figma设计转代码

This skill requires TemPad Dev MCP. If

tempad-dev:*

tools are unavailable/inactive/unauthorized, stop and tell the user to install TemPad Dev MCP and ensure it is activated in the TemPad Dev panel in the Figma design file.

TemPad Dev outputs Tailwind-like IR in either JSX or Vue. Treat MCP outputs as design facts. Never guess key styles.

本技能需要TemPad Dev MCP。若

tempad-dev:*

工具不可用/未激活/未授权，请停止操作并告知用户安装TemPad Dev MCP，确保其在Figma设计文件的TemPad Dev面板中已激活。

TemPad Dev会输出类Tailwind风格的JSX或Vue中间表示（IR）。请将MCP输出视为设计事实，绝不猜测关键样式。

Evidence rules

证据规则

Priority order:

```
tempad-dev:get_code
```
(authoritative: explicit values, layout intent, warnings, assets, tokens, codegen, lang)
```
tempad-dev:get_structure
```
(hierarchy, overlap, bounds clarification)

Never invent: colors, typography (size/weight/line-height/letter-spacing), spacing, radius, borders, shadows, gradients, opacity/overlays, blur.

Do not output

data-hint-*

attributes.

Treat advanced/rare style output as high-confidence evidence from TemPad codegen. Preserve it unless it directly conflicts with repo constraints.

优先级顺序：

```
tempad-dev:get_code
```
（权威来源：明确值、布局意图、警告、资源、令牌、代码生成配置、语言）
```
tempad-dev:get_structure
```
（层级、重叠、边界说明）

禁止自行编造：颜色、排版（字号/字重/行高/字符间距）、间距、圆角、边框、阴影、渐变、透明度/叠加层、模糊效果。

请勿输出

data-hint-*

属性。

将高级/罕见样式输出视为来自TemPad代码生成的高可信度证据。除非与代码库约束直接冲突，否则请保留这些样式。

Workflow

工作流程

1) Detect repo conventions

1) 检测代码库约定

From the repo (do not assume), identify what is needed to integrate cleanly:

Framework/runtime and file conventions (React/Vue, TS/JS, SFC conventions, naming)
Styling integration rules (utility allowed? class sorting? linting? extraction patterns?)
Token/theme system (CSS variables, token files, naming, dark mode/modes)
Asset policy (public folder vs imports, icon pipeline, hashing, directory rules)
Existing primitives/components (buttons, inputs, typography, layout wrappers), import path conventions

Only if the repo actually uses Tailwind (or Tailwind-compat tooling), also detect Tailwind version and conventions that affect class syntax/formatting.

If uncertain, ask up to 3 minimal questions; otherwise proceed and warn where inferred.

从代码库中（请勿假设）识别实现无缝集成所需的信息：

框架/运行时及文件约定（React/Vue、TS/JS、单文件组件（SFC）约定、命名规则）
样式集成规则（是否允许使用工具类？类排序？代码检查？样式提取模式？）
令牌/主题系统（CSS变量、令牌文件、命名规则、深色模式/多模式）
资源政策（公共文件夹vs导入、图标流水线、哈希处理、目录规则）
现有基础组件/原语（按钮、输入框、排版、布局包装器）、导入路径约定

仅当代码库实际使用Tailwind（或兼容Tailwind的工具）时，才需检测Tailwind版本及影响类语法/格式的约定。

若存在不确定性，最多可提出3个简洁问题；否则继续操作并对推断内容发出警告。

2) Fetch baseline design snapshot

2) 获取基准设计快照

Call

tempad-dev:get_code

with:

```
resolveTokens: false
```
pass
```
nodeId
```
only if user provided one; otherwise rely on the tool’s default behavior (current selection)
```
preferredLang
```
: choose what matches the repo (jsx or vue)

Important:

get_code.lang

is the language actually used by MCP after considering TemPad Dev plugin/config priority. A plugin may override

preferredLang

. Use returned

lang

plus

codegen

facts to interpret the IR correctly, then translate to the repo’s required output.

Record as design facts:

```
code
```
,
```
lang
```
```
warnings
```
```
assets
```
(if present)
```
tokens
```
(if present)
```
codegen
```
(e.g. scale, length units, rootRem, and other normalization settings)

调用

tempad-dev:get_code

时需传入：

```
resolveTokens: false
```
仅当用户提供了
```
nodeId
```
时才传入该参数；否则依赖工具的默认行为（当前选中内容）
```
preferredLang
```
：选择与代码库匹配的语言（jsx或vue）

重要提示：

get_code.lang

是MCP在考虑TemPad Dev插件/配置优先级后实际使用的语言。插件可能会覆盖

preferredLang

。请使用返回的

lang

及

codegen

事实正确解读IR，再转换为代码库所需的输出格式。

记录以下设计事实：

```
code
```
、
```
lang
```
```
warnings
```
```
assets
```
（若存在）
```
tokens
```
（若存在）
```
codegen
```
（例如缩放比例、长度单位、rootRem及其他标准化设置）

3) Resolve warnings and uncertainty

3) 解决警告与不确定性

If warnings indicate missing/partial/uncertain evidence, act immediately:

```
depth-cap
```
: call
```
get_code
```
once per listed subtree root
```
nodeId
```
and stitch results before implementing.
- If warning data indicates overflow (for example
```
cappedNodeOverflow=true
```
  ), treat evidence as incomplete and stop full implementation. Ask for narrower scope or user-prioritized subtrees.
output budget exceeded error: pass a smaller subtree
```
nodeId
```
to narrow scope, then retry
```
get_code
```
.
- Always report current consumption, limit, and overage from the error text when asking for scope changes (for example
```
current ~7800 tokens / 31240 bytes; limit ~6000 tokens / 24000 bytes; over by ~1800 tokens / 7240 bytes
```
  ).
Layout/overlap uncertainty: call
```
get_structure
```
to resolve contradictions.
- If contradictions remain after structure (or cannot be narrowed), stop.

Retry policy:

Retry once only for transient transport/connectivity failures (e.g. timeout/disconnect/no active extension after reconnect/activation).
Do not blind-retry deterministic errors (
```
depth-cap
```
, budget exceeded, invalid selection, node not visible). Change scope or inputs first.

若警告显示证据缺失/不完整/存在不确定性，请立即采取行动：

```
depth-cap
```
：针对列出的每个子树根节点
```
nodeId
```
调用一次
```
get_code
```
，合并结果后再进行实现。
- 若警告数据显示溢出（例如
```
cappedNodeOverflow=true
```
  ），则视为证据不完整，停止完整实现。请用户缩小范围或优先处理指定子树。
输出预算超出错误：传入更小的子树
```
nodeId
```
以缩小范围，然后重试
```
get_code
```
。
- 请求调整范围时，务必报告当前消耗、限制和超出量（例如
```
当前约7800令牌 / 31240字节；限制约6000令牌 / 24000字节；超出约1800令牌 / 7240字节
```
  ）。
布局/重叠不确定性：调用
```
get_structure
```
解决矛盾。
- 若调用结构接口后矛盾仍未解决（或无法缩小范围），则停止操作。

重试规则：

仅对临时传输/连接故障（例如超时/断开连接/重新连接激活后无可用扩展）重试一次。
请勿盲目重试确定性错误（
```
depth-cap
```
、预算超出、无效选择、节点不可见）。请先调整范围或输入参数。

4) Assets handling (only if

assets

exists)

4) 资源处理（仅当

assets

存在时）

Follow repo asset policy first:

Download bytes via TemPad-provided
```
asset.url
```
, save into repo at policy-correct path, reference with repo conventions.
If policy forbids storing assets, you may reference TemPad URLs but must warn output depends on the local TemPad asset server.
Do not read image/SVG bytes into LLM context for analysis. Treat assets as files to download/reference, not text evidence to parse.

Never download assets from the public internet. Only TemPad-provided

asset.url

优先遵循代码库的资源政策：

通过TemPad提供的
```
asset.url
```
下载字节内容，按照政策要求的路径保存到代码库中，并使用代码库约定进行引用。
若政策禁止存储资源，可引用TemPad URL，但必须警告输出内容依赖本地TemPad资源服务器。
请勿将图片/SVG字节内容读取到LLM上下文进行分析。请将资源视为需下载/引用的文件，而非待解析的文本证据。

绝不从公共互联网下载资源，仅可使用TemPad提供的

asset.url

。

5) Tokens mapping (only if

tokens

exists)

5) 令牌映射（仅当

tokens

存在时）

Token evidence shape:

```
tokens
```
is a record keyed by canonical CSS variable names (e.g.
```
--...
```
).
Each token’s value is either a string or a record keyed by
```
Collection:Mode
```
strings whose values are strings.
Any value string may reference other variables; preserve references.

Mapping goal: integrate with repo tokens when safe; otherwise keep explicit values from

get_code

Rules:

Prefer existing repo tokens when you can justify equivalence using value equivalence (including references) plus semantic alignment in the repo. Token naming can be supporting evidence, but do not map solely because names look similar.
Add new tokens only if the repo already has an established token workflow and this change is expected.
If mode selection or mapping remains ambiguous, keep explicit values and warn.

Hints may be used only for reasoning about mode selection when present; never output hint attributes.

令牌证据结构：

```
tokens
```
是一个以标准CSS变量名（例如
```
--...
```
）为键的记录。
每个令牌的值要么是字符串，要么是以
```
Collection:Mode
```
字符串为键的记录，其值为字符串。
任何值字符串都可能引用其他变量；请保留这些引用关系。

映射目标：在安全情况下与代码库令牌集成；否则保留

get_code

返回的明确值。

规则：

当你能通过值等价性（包括引用关系）加上代码库中的语义对齐来证明等价性时，优先使用现有代码库令牌。令牌命名可作为辅助证据，但不得仅因名称相似就进行映射。
仅当代码库已有成熟的令牌工作流且此更改符合预期时，才可添加新令牌。
若模式选择或映射仍存在歧义，请保留明确值并发出警告。

仅当提示存在时，才可将其用于模式选择的推理；请勿输出提示属性。

6) Implement repo-native code

6) 实现代码库原生代码

Translate TemPad Dev IR into the repo’s conventions:

Utility-first repo (Tailwind/UnoCSS): keep utility classes; adjust ordering/formatting to match repo rules. If Tailwind is used, respect the repo’s Tailwind version/config before changing class syntax.
Non-utility repo: translate utilities into the repo’s styling approach (CSS Modules/scoped CSS/Sass/CSS-in-JS) while preserving explicit values.

Constraints:

Do not introduce new frameworks or styling systems.
New runtime/build dependencies require user confirmation unless the user explicitly says no confirmation is needed.
Implement base state only unless variants/states are provable from repo conventions or evidence.
Preserve high-fidelity style details from
```
get_code
```
(including pseudo-elements/pseudo-classes, uncommon style properties, filters/masks/blend/backdrop effects, and non-default compositing details). Do not simplify them away unless required by repo constraints.

Component extraction and primitives:

Extract only when repetition + repo patterns justify it.
Prefer existing repo primitives/components when they match intended semantics and do not require guessing styles.

将TemPad Dev IR转换为符合代码库约定的代码：

工具优先的代码库（Tailwind/UnoCSS）：保留工具类；根据代码库规则调整排序/格式。若使用Tailwind，请在修改类语法前遵循代码库的Tailwind版本/配置。
非工具优先的代码库：将工具类转换为代码库的样式方案（CSS Modules/作用域CSS/Sass/CSS-in-JS），同时保留明确值。

约束条件：

请勿引入新框架或样式系统。
新增运行时/构建依赖需获得用户确认，除非用户明确表示无需确认。
除非代码库约定或证据可证明变体/状态的存在，否则仅实现基础状态。
保留
```
get_code
```
中的高保真样式细节（包括伪元素/伪类、不常见的样式属性、滤镜/遮罩/混合/背景效果，以及非默认合成细节）。除非代码库约束要求，否则请勿简化这些细节。

组件提取与原语：

仅当存在重复代码且符合代码库模式时，才进行组件提取。
当现有代码库原语/组件匹配预期语义且无需猜测样式时，优先使用这些组件。

7) Semantics and accessibility minimums

7) 语义与可访问性最低要求

Only apply when the IR would otherwise require plain container semantics (e.g. clickable

div

) and you are not already using an appropriate repo primitive/component:

Use native elements where appropriate (
```
button
```
,
```
a
```
,
```
input/label
```
).
Ensure keyboard interaction and focusability.
Add accessible names when needed (
```
aria-label
```
,
```
alt
```
).

Assume the repo’s existing CSS reset/normalize. Do not add new reset libraries or global CSS unless the repo already has a defined pattern for it.

仅当IR原本需要使用普通容器语义（例如可点击的

div

）且未使用合适的代码库原语/组件时，才需应用以下要求：

适当使用原生元素（
```
button
```
、
```
a
```
、
```
input/label
```
）。
确保键盘交互和可聚焦性。
在需要时添加可访问名称（
```
aria-label
```
、
```
alt
```
）。

假设代码库已存在CSS重置/标准化样式。除非代码库已有明确的模式，否则请勿添加新的重置库或全局CSS。

8) Exit and wrap-up

8) 退出与收尾

Stop (do not ship code) when:

TemPad Dev MCP is unavailable/unauthorized, or target cannot be read
Evidence is contradictory and cannot be resolved via structure or narrower scope
Required assets cannot be retrieved/stored under repo policy

Otherwise, ship the best-evidence base implementation and end with:

Evidence caveats: any
```
warnings
```
, omissions, or inferred repo conventions
Assets: stored vs TemPad URLs, and any policy-driven constraints
Tokens: mapped vs explicit values, and any ambiguity
Dependencies: whether any were added (and whether user confirmation was obtained)
If stopped: next required info (max 3 items)

在以下情况下停止操作（请勿交付代码）：

TemPad Dev MCP不可用/未授权，或无法读取目标内容
证据存在矛盾且无法通过结构接口或缩小范围解决
所需资源无法按照代码库政策获取/存储

否则，交付基于最佳证据的基础实现，并在结尾说明：

证据警告：所有
```
warnings
```
、遗漏内容或推断的代码库约定
资源：存储方式vs TemPad URL，以及任何基于政策的约束
令牌：映射情况vs明确值，以及任何歧义
依赖：是否添加了新依赖（以及是否获得用户确认）
若已停止操作：下一步所需的信息（最多3项）

figma-design-to-code

Original

Translation

TemPad Dev: Figma Design to Code

TemPad Dev：Figma设计转代码

Evidence rules

证据规则

Workflow

工作流程

1) Detect repo conventions

1) 检测代码库约定

2) Fetch baseline design snapshot

2) 获取基准设计快照

3) Resolve warnings and uncertainty

3) 解决警告与不确定性

4) Assets handling (only if
`assets`
exists)

4) 资源处理（仅当
`assets`
存在时）

5) Tokens mapping (only if
`tokens`
exists)

5) 令牌映射（仅当
`tokens`
存在时）

6) Implement repo-native code

6) 实现代码库原生代码

7) Semantics and accessibility minimums

7) 语义与可访问性最低要求

8) Exit and wrap-up

8) 退出与收尾

figma-design-to-code

Original

Translation

TemPad Dev: Figma Design to Code

TemPad Dev：Figma设计转代码

Evidence rules

证据规则

Workflow

工作流程

1) Detect repo conventions

1) 检测代码库约定

2) Fetch baseline design snapshot

2) 获取基准设计快照

3) Resolve warnings and uncertainty

3) 解决警告与不确定性

4) Assets handling (only if assets exists)

4) 资源处理（仅当assets存在时）

5) Tokens mapping (only if tokens exists)

5) 令牌映射（仅当tokens存在时）

6) Implement repo-native code

6) 实现代码库原生代码

7) Semantics and accessibility minimums

7) 语义与可访问性最低要求

8) Exit and wrap-up

8) 退出与收尾

4) Assets handling (only if
`assets`
exists)

4) 资源处理（仅当
`assets`
存在时）

5) Tokens mapping (only if
`tokens`
exists)

5) 令牌映射（仅当
`tokens`
存在时）