关于 figma-code-workflows
figma-code-workflows 是将运行中的应用或静态 HTML 项目导入 Figma 的技能,可生成可编辑设计图层或可运行代码。它会先确认输出形式,再指导目标选择、项目准备、验证和导入。
主要功能
- 01确认所需的 Figma 输出形式
- 02选择设计图层或可运行代码
- 03根据请求选择目标文件
- 04指导项目准备和验证
- 05跟踪导入及恢复进度
适用场景
- 01将运行中的应用导入为 Code Layer
- 02将静态 HTML 转为设计图层
- 03将项目导入指定的 Figma 文件
安装
复制下面的命令,在终端中运行。
npx skills add https:/ / github.com/ figma/ mcp-server-guide --skill figma-code-workflows安装后在 Claude Code 中输入/figma-code-workflows确认已加载。
详细介绍
将项目导入 Figma
仅在用户明确要求输出到 Figma(独立的 Code/Make、可运行的 Code Layer 或可编辑的 Design 图层),或将 Figma 文件 key/链接指定为目标时,才使用此工作流。笼统的“创建一个代码项目”或“创建一个代码组件”请求,以及仅提及 Figma Code/Make 名称,都不足以指定此类输出。如果输出意图不明确,请询问用户是要本地代码还是 Figma 输出,然后等待回复,再启动此工作流。
保留用户的项目。使用各工具当前的说明和 schema 来确认前置条件和参数。
在主要阶段向用户同步进展:准备并验证项目、上传归档文件,以及在 Figma 中完成导入。出现待处理的导入、恢复工作和阻塞问题时,及时报告;不要把尚未确认的阶段说成已完成。
1. 选择输出类型和目标位置
确定用户想要的输出,然后根据下表加载相应的技能。如果输出意图不明确,请先询问用户再继续。
| 输入 | 用户要求的输出 | 后续操作 |
|---|---|---|
| 运行中的应用或静态 HTML | 未指定——只说放入/导入 Figma | 询问 “可编辑的设计图层还是代码图层?”并结束本轮对话。 等待用户回复。 |
| 运行中的应用 | 可编辑的 Design 图层 | 加载 figma-generate-design,然后在 Design 文件中调用 generate_figma_design。 |
| 静态 HTML | 可编辑的 Design 图层 | 在 Design 文件中调用 html_to_figma。 |
| 运行中的应用 | 可运行的 Code Layer 或独立的 Code/Make | 继续使用此技能并调用 send_code_to_figma。 |
| 静态 HTML | 可运行的 Code Layer 或独立的 Code/Make | 继续使用此技能并调用 send_code_to_figma。 |
如果用户尚未选择输出类型,即使 HTML 项目有可用的按钮,也仍然存在歧义。Design 链接只能指定目标位置,不能指定输出类型。
选择可运行输出的目标位置前,先调用 whoami。仅当 whoami.code_layers_enabled 为 true 时,才选择或导入 Design Code Layer;否则使用独立的 Code/Make,或者说明限制,并在更改用户明确指定的 Design 目标前征求同意。
在应用屏幕数量判断规则之前,优先遵循用户明确提出的代码图层或独立输出要求。对于带有 Design 链接的可运行代码,使用 Code Layer。对于独立的 Code 链接,使用独立模式。没有目标位置,且用户未明确选择代码图层或独立模式时,估算屏幕数量:少于 10 个或数量未知 → Code Layer;10 个或更多 → 独立模式。绝不要询问用户选择 Code Layer 还是独立模式,也不要让用户统计屏幕数量。用户明确指定的目标位置和链接,在确定输出类型后优先采用。
使用用户提供的文件 URL。如果需要新建文件,使用 create_new_file,并选择相应的目标类型和用户选定的方案。
如果用户要求代码图层但未提供目标位置,则创建 Design 文件。
确定输出类型后,不要在创建文件后再次询问用户选择。
对于可编辑的 Design 图层,遵循所选工具的说明:generate_figma_design 会捕获运行中应用的渲染页面;html_to_figma 会转换独立的静态 HTML 文档。检查生成的图层并分享 Design 链接。只有在输出为可运行代码时,才继续执行以下步骤。
2. 遵循导入响应
使用当前架构调用 send_code_to_figma,并指定选定的本地源和目标。遵循返回的准备工作和归档说明;如有要求,上传前请保留应用并在本地验证。
严格遵循每条响应的说明以及返回的 nextStep,完成准备、验证、上传、待处理导入和设置恢复。完成所有前置条件后再继续,并原样传递完整的后续步骤参数。不要编造缺失的恢复步骤。如果没有 nextStep,请遵循响应说明和工具的当前描述。
最后提供返回的文件/图层链接,并且只报告结果已确认的导入和预览情况。