figma-quarterback

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Figma Quarterback

Coordinate the full Figma workflow instead of jumping straight to code. Treat this skill as the entrypoint when the request is large enough that extraction quality, component boundaries, or implementation order will decide whether the result drifts.

Prefer the existing Figma plugin skills for raw tool usage:

Use
```
figma
```
/
```
figma:figma-implement-design
```
for direct design-to-code reads.
Use
```
figma:figma-use
```
before any write action inside a Figma file.
Use
```
figma:figma-generate-design
```
when the user wants code or a description pushed back into a Figma screen.
Use
```
figma:figma-generate-library
```
when the job is tokens, component library structure, or design-system buildout inside Figma.
Use
```
figma:figma-code-connect
```
when the user wants code components mapped back to Figma components.
Use this skill to decide sequencing, guardrails, and handoff contracts.

协调完整的Figma工作流，而非直接跳转至代码环节。当请求规模较大，提取质量、组件边界或实现顺序会影响最终结果是否偏离设计时，将本技能作为入口。

如需直接使用工具功能，优先选用现有Figma插件技能：

如需直接读取设计并转换为代码，使用
```
figma
```
/
```
figma:figma-implement-design
```
。
在Figma文件内执行任何写入操作前，需先使用
```
figma:figma-use
```
。
当用户希望将代码或描述推送回Figma页面时，使用
```
figma:figma-generate-design
```
。
当任务为在Figma内创建tokens、组件库结构或搭建设计系统时，使用
```
figma:figma-generate-library
```
。
当用户希望将代码组件映射回Figma组件时，使用
```
figma:figma-code-connect
```
。
使用本技能来确定工作顺序、设置约束规则及制定交接协议。

Workflow

工作流

Frame the request before touching code.

Classify the target as
```
layout
```
,
```
screen
```
,
```
dialog
```
,
```
drawer
```
, or
```
component-set
```
.
List every requested state up front: desktop/mobile, open/closed, active/inactive, empty/loaded, hover/focus if relevant.
Record the expected output: docs only, component implementation, full page implementation, or Figma update.

Build an extraction-first plan.

Run
```
$figma-design-extract
```
when component boundaries, states, tokens, regions, or traps are not already explicit.
Ask it for an implementation contract, not a narrative summary.
Do not let coding start while critical inputs are still ambiguous.

Decide whether the work is single-pass or wave-based.

Use a single pass only for one isolated component with clear states.
Use waves for layouts, compound surfaces, or any request with shared primitives.
Typical wave order: setup tokens and dependencies, independent components, dependent composites, final composition.

Route implementation to
```
$figma-convert-apply
```
.

Pass only stable facts: target files, reusable components, exact states, tokens, asset rules, and verification expectations.
Require explicit note of what is reused versus what is new.
Require responsive behavior to be stated as props, variants, or breakpoint rules before editing.

Enforce a completion receipt.

Surface type and target nodes used.
State matrix actually implemented.
Files changed.
Reuse decisions.
Verification performed.
Known degradations or manual checks still required.

开始编码前先梳理请求。

将目标分类为
```
layout
```
（布局）、
```
screen
```
（页面）、
```
dialog
```
（弹窗）、
```
drawer
```
（侧边栏）或
```
component-set
```
（组件集）。
提前列出所有要求的状态：桌面/移动端、展开/收起、激活/未激活、空状态/已加载状态，若相关还需包含hover（悬停）/focus（聚焦）状态。
记录预期输出：仅文档、组件实现、完整页面实现或Figma更新。

制定以提取为核心的计划。

当组件边界、状态、tokens、区域或潜在问题尚未明确时，运行
```
$figma-design-extract
```
。
要求其提供实现协议，而非叙述性总结。
在关键输入仍不明确时，禁止启动编码工作。

确定工作采用单次完成还是分阶段完成。

仅当任务为单个独立且状态清晰的组件时，采用单次完成方式。
对于布局、复合界面或任何包含共享基础组件的请求，采用分阶段方式。
典型的阶段顺序：设置tokens及依赖项、开发独立组件、开发依赖型复合组件、最终组合。

将实现任务路由至
```
$figma-convert-apply
```
。

仅传递确定的信息：目标文件、可复用组件、明确的状态、tokens、资源规则及验证预期。
要求明确标注复用内容与新增内容。
在编辑前，要求将响应式行为明确为props、变体或断点规则。

强制执行完成回执。

列明所使用的类型及目标节点。
说明实际实现的状态矩阵。
列出已修改的文件。
说明复用决策。
说明已执行的验证操作。
说明已知的性能退化问题或仍需手动检查的内容。

Routing Matrix

路由矩阵

Route by user intent, not by whichever skill sounds closest.

```
Extract design truth from Figma
```
: Use
```
$figma-design-extract
```
plus the raw Figma read skills. This is the default lane for unclear or multi-node requests.
```
Implement code from an already stable design contract
```
: Use
```
$figma-convert-apply
```
. Keep quarterback ownership only if multiple waves or surfaces must stay coordinated.

Implement code directly from a Figma URL with minimal orchestration

: Use

figma:figma-implement-design

when the task is narrow and component-scoped.

Write or update a screen inside Figma from code or a page description

: Use

figma:figma-generate-design

, and make sure

figma:figma-use

is loaded before any write action.

Create or repair a design system inside Figma

: Use

figma:figma-generate-library

, optionally paired with

figma:figma-use

for file writes.

Map code components to Figma components

: Use

figma:figma-code-connect

Generate design-system rules for the repo

: Use

figma:figma-create-design-system-rules

```
Need both code changes and Figma updates
```
: Stay in quarterback mode. Extract once, implement code, then route the finalized structure back through the appropriate Figma write skill.

根据用户意图进行路由，而非选择听起来最接近的技能。

```
从Figma提取设计真相
```
：使用
```
$figma-design-extract
```
搭配原生Figma读取技能。对于不明确或多节点请求，这是默认路径。
```
根据已稳定的设计协议实现代码
```
：使用
```
$figma-convert-apply
```
。仅当需要协调多阶段或多界面工作时，保留总协调器的主导权。

通过Figma URL直接实现代码，仅需少量编排

：当任务范围较窄且聚焦于组件时，使用

figma:figma-implement-design

。

根据代码或页面描述在Figma内编写或更新页面

：使用

figma:figma-generate-design

，并确保在执行任何写入操作前已加载

figma:figma-use

。

在Figma内创建或修复设计系统

：使用

figma:figma-generate-library

，可选择性搭配

figma:figma-use

进行文件写入。

将代码组件映射至Figma组件

：使用

figma:figma-code-connect

。

为代码仓库生成设计系统规则

：使用

figma:figma-create-design-system-rules

。

```
同时需要修改代码与更新Figma
```
：保持总协调器模式。先提取设计，再实现代码，最后将最终结构通过合适的Figma写入技能路由回Figma。

Routing Rules

路由规则

Use

$figma-design-extract

first when:

The request references a whole screen, layout, or multiple Figma nodes.
Desktop and mobile differ materially.
You suspect hidden traps such as raster art, transparent roots, local-only fonts, or reused components with different props.
The codebase already contains related UI and you need an exact reuse map.
The user eventually wants either code changes or write-back to Figma, but the design truth is still not stable.

Use

$figma-convert-apply

directly when:

The extraction contract already exists in the conversation or docs.
The task is mostly implementation and verify.
The state set is small and already agreed.

Stay in quarterback mode when:

Multiple files or surfaces must stay consistent.
You need to re-scope the work because the extracted design is larger than the original ask.
Verification failure suggests the issue is in the plan rather than the code.
The job spans both repo implementation and Figma write-back.
You must coordinate design-system work, page generation, and code-connect mapping in one run.

在以下情况时，优先使用

$figma-design-extract

：

请求涉及整个页面、布局或多个Figma节点。
桌面端与移动端设计存在实质性差异。
你怀疑存在潜在问题，如光栅图、透明根节点、仅本地可用字体或具有不同props的复用组件。
代码库已包含相关UI，且你需要精准的复用映射。
用户最终需要修改代码或回写至Figma，但设计真相仍未稳定。

在以下情况时，直接使用

$figma-convert-apply

：

提取协议已存在于对话或文档中。
任务主要为实现与验证。
状态集规模较小且已达成共识。

在以下情况时，保持总协调器模式：

多个文件或界面必须保持一致。
由于提取的设计内容超出原始请求范围，你需要重新调整工作范围。
验证失败表明问题出在计划而非代码中。
任务同时涉及代码仓库实现与Figma回写。
你需要在一次运行中协调设计系统工作、页面生成及代码连接映射。

Figma Built-Ins

Figma内置技能

Use the built-in Figma skill set explicitly instead of recreating its job in prose:

```
figma
```
: Base read lane for Figma context retrieval and design-to-code assistance.
```
figma:figma-implement-design
```
: Best for turning one Figma component or screen into production code when orchestration overhead is small.
```
figma:figma-use
```
: Mandatory before any write operation inside a Figma file.
```
figma:figma-generate-design
```
: Best for pushing a full page, screen, or layout from code or description back into Figma.
```
figma:figma-generate-library
```
: Best for tokens, component libraries, themes, and design-system foundations in Figma.
```
figma:figma-code-connect
```
: Best for creating or maintaining Code Connect mappings.
```
figma:figma-create-design-system-rules
```
: Best for repo-specific design rules that help future Figma-to-code work.

明确使用Figma内置技能集，而非自行用文字描述其功能：

```
figma
```
：用于获取Figma上下文及设计转代码辅助的基础读取路径。
```
figma:figma-implement-design
```
：当编排开销较小时，最适合将单个Figma组件或页面转换为生产代码。
```
figma:figma-use
```
：在Figma文件内执行任何写入操作前必须使用。
```
figma:figma-generate-design
```
：最适合将完整页面、界面或布局从代码或描述推送回Figma。
```
figma:figma-generate-library
```
：最适合在Figma内创建tokens、组件库、主题及设计系统基础内容。
```
figma:figma-code-connect
```
：最适合创建或维护Code Connect映射。
```
figma:figma-create-design-system-rules
```
：最适合生成仓库专属的设计规则，以助力未来的Figma转代码工作。

Handoff Contract

交接协议

Hand off to downstream work with this structure:

```
Surface
```
: layout, screen, drawer, dialog, or component.
```
Node scope
```
: exact file key and node IDs, plus any parent or sibling nodes consulted.
```
States
```
: one flat list with dimensions or viewport assumptions.
```
Reuse map
```
: existing component, extend existing component, or build new.
```
Tokens
```
: colors, spacing, radii, typography, shadows, and gradients that matter.
```
Asset policy
```
: raster/vector URLs, masks, backgrounds, icons, and whether approximation is forbidden.
```
Verification
```
: structural, CSS, visual, or manual comparison.
```
Stop conditions
```
: missing assets, font mismatch, degraded baseline, or unresolved design ambiguity.
```
Next skill
```
: the exact downstream skill or built-in Figma lane to invoke next.

以下列格式将工作交接给下游环节：

```
界面类型
```
：布局、页面、侧边栏、弹窗或组件。
```
节点范围
```
：明确的文件密钥及节点ID，加上所有已参考的父节点或兄弟节点。
```
状态
```
：包含尺寸或视口假设的扁平列表。
```
复用映射
```
：使用现有组件、扩展现有组件或新建组件。
```
Tokens
```
：重要的颜色、间距、圆角、排版、阴影及渐变。
```
资源策略
```
：光栅/矢量URL、遮罩、背景、图标，以及是否禁止近似处理。
```
验证方式
```
：结构验证、CSS验证、视觉验证或手动对比。
```
终止条件
```
：资源缺失、字体不匹配、基线性能退化或未解决的设计歧义。
```
下一技能
```
：下一步需调用的具体下游技能或Figma内置路径。

References

参考资料

Read references/pipeline.md for the operating model.
Read references/triage.md when deciding split, reuse, and wave order.
Read references/builtin-routing.md when the request mixes extraction, code implementation, Figma writes, library work, or code-connect.

阅读references/pipeline.md了解操作模型。
在确定拆分、复用及阶段顺序时，阅读references/triage.md。
当请求同时涉及提取、代码实现、Figma写入、库工作或代码连接时，阅读references/builtin-routing.md。