mcpField
F
figma-code-workflows

figma-code-workflows

github.com/figma设计与 UI2.1k200 次安装今天更新
代码仓库

关于 figma-code-workflows

figma-code-workflows 是将运行中的应用或静态 HTML 项目导入 Figma 的技能,可生成可编辑设计图层或可运行代码。它会先确认输出形式,再指导目标选择、项目准备、验证和导入。

主要功能

  1. 01确认所需的 Figma 输出形式
  2. 02选择设计图层或可运行代码
  3. 03根据请求选择目标文件
  4. 04指导项目准备和验证
  5. 05跟踪导入及恢复进度

适用场景

  1. 01将运行中的应用导入为 Code Layer
  2. 02将静态 HTML 转为设计图层
  3. 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,请遵循响应说明和工具的当前描述。

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

评论

支持 Markdown