mcpField
F
figma-generative-plugins

figma-generative-plugins

github.com/figma开发2.1k527 次安装今天更新
代码仓库

关于 figma-generative-plugins

用于编写和更新 Figma Design 插件的技能，面向通过工具创建生成式插件的 Agent。它规定了从脚手架读取到替换源文件的完整流程，并强调功能界面与安全处理。

主要功能

  1. 01创建与更新插件流程
  2. 02读取脚手架源文件
  3. 03编写完整插件界面与逻辑
  4. 04保留现有交互与行为
  5. 05处理构建错误与完成反馈

适用场景

  1. 01根据需求创建 Figma 插件
  2. 02为现有插件修改功能
  3. 03为插件设计输入与验证反馈

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/figma/mcp-server-guide --skill figma-generative-plugins

安装后在 Claude Code 中输入/figma-generative-plugins确认已加载。

附带文件references/authoring.md

详细介绍

创建和更新生成式 Figma 插件

在每次调用 create_generative_plugin 或 update_generative_plugin 前，都要加载此技能。面向用户时，将结果称为“插件”。“生成式”这一限定词仅用于区分此账户库工具与其他插件系统。

预检

开始编写前，确认请求符合以下范围：

  • 插件在 Figma Design 编辑器中运行。
  • 每个插件都必须为其核心工作流提供可用的 UI。即使插件没有可配置的输入，也仍需提供明确的主要操作，以及有用的状态或验证反馈。
  • 绝不要嵌入 API 密钥、OAuth 令牌、签名 URL 或其他机密信息。能够访问插件的人都可以读取其源代码。对于需要身份验证的集成，请停止操作，并提供静态数据集、无需身份验证的公共端点或其他架构作为替代方案。

创建工作流

  1. 明确请求的工作流及其有用控件。只有在必需输入或行为确实含糊不清时，才简洁地提问。
  2. 确定 planKey。如果用户提供了值，就重复使用；否则调用 whoami。如果只有一个符合条件的方案，就自动使用；如果有多个差异显著的方案，则请用户选择。
  3. 调用一次 create_generative_plugin，并提供简洁的名称、描述和 planKey。这会创建一个可运行的绘制正方形脚手架，而不是用户要求的最终插件。
  4. 使用返回的 id 调用 get_generative_plugin，然后读取每个源 URI。这一步用于确认脚手架的清单、UI 消息约定以及当前 TypeScript 入口点。
  5. 用完整编写的文件替换脚手架，实现用户要求的行为和 UI。
  6. 使用返回的 id 调用 update_generative_plugin，并传入 files 数组，其中包含完整替换的 code.ts；如果 UI 有变更，还要包含完整替换的 ui.html，并提供具体的 commitMessage。如果要更改名称或描述，请使用 metadata。

绝不要在调用 create_generative_plugin 后就停止：必须替换入门脚手架，实现用户要求的体验。

更新工作流

  1. 确认插件。如果需要，调用 list_generative_plugins，然后调用 get_generative_plugin。
  2. 编辑前，读取 get 工具返回的每个源 URI。将这些文件视为当前真实来源。
  3. 除非用户要求修改，否则保留现有 UI、控件、重新运行行为、验证逻辑和用户可见的操作入口。
  4. 使用 update_generative_plugin 为每个已变更的现有文件提供完整替换内容。入口点使用 { path: "code.ts", content: "..." }，UI 使用 { path: "ui.html", content: "..." }。未指定的文件会保留。

编写规则

  • 编写替换文件前，先阅读 插件源代码编写指南。其中介绍了文件替换约定、UI/消息生命周期、PropsKit 控件、动态页面兼容性、字体、重新运行行为、有界工作、几何图形以及 Plugin API 注意事项。
  • 让插件的主要操作一目了然，并确保无效的选择或输入状态容易理解。
  • update_generative_plugin 可以替换现有的 code.ts 和 ui.html 文件，但不能替换 manifest.json，也不能创建新文件。请在 code.ts 中保留 figma.showUI(__html__, ...)；如果用户要求的工作流需要不同控件，则替换 ui.html。
  • 除非避免破坏画布内容就是插件的明确目的，且 UI 已清楚说明，否则应避免对画布进行破坏性修改。
  • 异步工作和 UI 消息完成前，不要关闭插件。
  • 将非错误的 update_generative_plugin 结果视为成功。有返回版本时，记录该版本；成功响应也可能不包含版本。
  • 如果构建出错，请使用返回的编译器输出进行最小限度的源代码修正，然后重试一次。如果仍然失败，应向用户说明错误，不要反复重写插件。

完成

报告插件名称和 ID，以及返回的版本（如果有），并简要说明其 UI 和主要操作。构造并附上一个可点击的 URL，用于打开一个新 Design 文件，其中的未发布插件已准备就绪，可供试用。使用确切的插件 ID 作为 try-tool-resource-content-id：

https://www.figma.com/file/new?try-tool-resource-content-id=<id>&try-tool-resource-type=gen_tool&type=design&mode=design

提供新建文件链接后，询问用户是否希望改为在现有 Figma Design 文件中打开插件。如果是，请复用已提供的文件 URL，或向用户索取一个 URL，然后将相同的 try-tool-resource-content-id 和 try-tool-resource-type 查询参数添加到该 URL 中。切勿猜测文件 URL。

评论

支持 Markdown