figma-code-workflows

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Import a project into Figma

将项目导入 Figma

Only use this workflow for an explicitly requested Figma output (standalone Code/Make, runnable Code Layer, or editable Design layers), or a Figma file key/link given as its destination. Generic “make a code project” or “create a code component” requests, and Figma Code/Make names alone, do not specify that output. If output intent is unclear, ask whether the user wants local code or a Figma output, then wait before starting this workflow.

Preserve the user's project. Use each tool's current description and schema for prerequisites and parameters.

Keep the user updated at the main stages: preparing and validating the project, uploading the archive, and completing the import in Figma. Report pending imports, recovery work and blockers as they occur; do not describe an unconfirmed stage as complete.

仅在用户明确要求 Figma 输出（独立的 Code/Make、可运行的 Code Layer 或可编辑的 Design 图层），或明确提供 Figma 文件密钥/链接作为目标位置时，才使用此工作流。泛泛的“制作代码项目”或“创建代码组件”请求，以及仅提及 Figma Code/Make 名称，都无法确定所需输出。如果输出意图不明确，请询问用户希望生成本地代码还是 Figma 输出，然后等待用户回答，再开始此工作流。

保留用户的项目。根据每个工具当前的描述和 schema 确认前置条件与参数。

在主要阶段及时向用户提供进度：准备并验证项目、上传压缩包，以及在 Figma 中完成导入。遇到待处理的导入任务、恢复工作或阻塞问题时，应立即报告；不要将尚未确认的阶段描述为已完成。

1. Choose the output and destination

1. 选择输出和目标位置

Identify the user's intended output, then load the appropriate skill according to the table below. If the output is unclear, ask the user before proceeding.

Input	User's requested output	Next action
Running app or static HTML	Unspecified — just put/import it in Figma	Ask "Editable design layers or a code layer?" and end your turn. Wait for the answer.
Running app	Editable Design layers	Load `figma-generate-design` , then call `generate_figma_design` in a Design file.
Static HTML	Editable Design layers	Call `html_to_figma` in a Design file.
Running app	Runnable Code Layer or standalone Code/Make	Continue with this skill and call `send_code_to_figma` .
Static HTML	Runnable Code Layer or standalone Code/Make	Continue with this skill and call `send_code_to_figma` .

An HTML project with working buttons is still ambiguous when the user has not chosen the output. A Design link only chooses the destination, not the output.

Before choosing a runnable destination, call

whoami

. Only choose or import a Design Code Layer when

whoami.code_layers_enabled

is true; otherwise use standalone Code/Make, or explain the limitation and ask before changing an explicitly supplied Design destination.

Honor an explicit code-layer or standalone request before applying the screen-count heuristic. For runnable code with a Design link, use a Code Layer. For a standalone Code link, use standalone. With no destination or explicit code-layer/standalone choice, estimate screens: fewer than 10 or unknown → Code Layer; 10 or more → standalone. Never ask Code Layer versus standalone or ask the user to count screens. Explicit destinations and links take precedence after the output choice.

Use the supplied file URL. If a new file is needed, use

create_new_file

with the selected destination type and the user's chosen plan.

Create a Design file for a requested code layer when no destination is provided.

Keep the confirmed output choice fixed; do not ask the user to choose again after creating the file.

For editable Design layers, follow the selected tool's instructions:

generate_figma_design

captures the running app's rendered page;

html_to_figma

converts a self-contained static HTML document. Inspect the resulting layers and share the Design link. Continue below only for runnable code output.

确定用户期望的输出，然后根据下表加载相应的 skill。如果输出不明确，请在继续操作前询问用户。

输入	用户请求的输出	下一步操作
运行中的应用或静态 HTML	未明确——只需将其放入/导入 Figma	询问 “可编辑的设计图层还是代码图层？”并结束本轮对话。等待用户回答。
运行中的应用	可编辑的 Design 图层	加载 `figma-generate-design` ，然后在 Design 文件中调用 `generate_figma_design` 。
静态 HTML	可编辑的 Design 图层	在 Design 文件中调用 `html_to_figma` 。
运行中的应用	可运行的 Code Layer 或独立的 Code/Make	继续使用此 skill，并调用 `send_code_to_figma` 。
静态 HTML	可运行的 Code Layer 或独立的 Code/Make	继续使用此 skill，并调用 `send_code_to_figma` 。

即使用户没有选择输出，包含可用按钮的 HTML 项目仍然存在歧义。Design 链接仅决定目标位置，并不能决定输出类型。

在选择可运行输出的目标位置之前，调用

whoami

。仅当

whoami.code_layers_enabled

为 true 时，才选择或导入 Design Code Layer；否则应使用独立的 Code/Make，或者说明相关限制，并在更改用户明确指定的 Design 目标之前征求用户同意。

在应用屏幕数量估算规则之前，优先满足用户明确提出的 Code Layer 或独立输出请求。对于带 Design 链接的可运行代码，使用 Code Layer；对于独立的 Code 链接，使用独立 Code。如果既未提供目标位置，也未明确选择 Code Layer 或独立输出，则估算屏幕数量：少于 10 个或数量未知时使用 Code Layer；10 个或更多时使用独立 Code。不要询问用户选择 Code Layer 还是独立输出，也不要要求用户统计屏幕数量。确定输出类型后，应优先采用用户明确指定的目标位置和链接。

使用提供的文件 URL。如果需要新建文件，则使用

create_new_file

，并传入所选的目标类型和用户选择的方案。

当用户请求 Code Layer 但未提供目标位置时，创建一个 Design 文件。

确定输出选择后保持不变；创建文件后，不要再次要求用户选择。

对于可编辑的 Design 图层，遵循所选工具的说明：

generate_figma_design

会捕获运行中应用的已渲染页面；

html_to_figma

会转换自包含的静态 HTML 文档。检查生成的图层并分享 Design 链接。仅当输出为可运行代码时，才继续执行以下步骤。

2. Follow the import response

2. 遵循导入响应

Call

send_code_to_figma

with the selected local source and destination using its current schema. Follow the returned preparation and archive instructions; preserve the app and validate locally before uploading when instructed.

Follow each response's instructions and returned

nextStep

exactly for preparation, validation, upload, pending imports and setup recovery. Complete the returned prerequisites before advancing and pass complete continuation arguments unchanged. Do not invent a missing recovery step. When no

nextStep

is present, follow the response's instructions and the tool's current description.

Finish with the returned file/layer link and report only the import and preview outcomes established by the result.

按照

send_code_to_figma

当前的 schema，使用选定的本地源和目标位置调用该工具。遵循返回的准备和压缩包说明；按照指示保留应用，并在上传前进行本地验证。

严格按照每个响应的说明及返回的

nextStep

执行准备、验证、上传、待处理导入和设置恢复操作。完成返回的所有前置条件后再继续，并完整且不作修改地传递续接参数。不要自行补充缺失的恢复步骤。如果没有

nextStep

，则遵循响应中的说明以及工具当前的描述。

最后提供返回的文件/图层链接，并且只报告结果已确认的导入和预览结果。