figma-generate-library

figma-generate-library 技能概览

figma-generate-library 的作用

figma-generate-library 是一个用于 Figma 设计系统编排的技能，目标是把代码库转化为 Figma 中结构化的库。它适合需要让 tokens、variables、组件集合、主题和文档与生产代码保持一致的团队，而不是从零手工写一套设计系统。

适合谁使用

如果你正在为产品设计、前端工程或设计运营搭建设计系统，或者对现有设计系统进行更新，就适合使用 figma-generate-library skill。它最适用于根据现有源码模式创建可复用的 Figma 库，而不是用来临时画几张单独页面。

它为什么不一样

这个技能对顺序和依赖关系有明确的判断：它的设计目标是引导你完成多步骤的库构建，而不是一次性回答一个提示词。这一点对 Design Systems 工作很重要，因为 tokens、variables、组件和文档如果生成顺序不对，或者缺少校验节点，就很容易出问题。

如何使用 figma-generate-library 技能

安装并加载正确的配套技能

在使用 figma-generate-library install 时，需要通过 OpenAI skills package 添加该技能，并在进行任何 Figma 工具调用之前，一并加载 figma-use。这个技能负责决定要构建什么、按什么顺序构建；figma-use 则提供执行每一步 use_figma 所需的 Plugin API 调用规则。

先从控制流程的仓库文件读起

先读 SKILL.md，然后查看 references/discovery-phase.md、references/token-creation.md、references/component-creation.md 和 references/documentation-creation.md。如果仓库里还有不寻常的命名或恢复需求，也要检查 references/naming-conventions.md 和 references/error-recovery.md。这些文件之所以重要，是因为这个技能本身就是围绕分阶段执行、校验和清理来设计的，而不是一段平铺直叙的脚本。

把模糊需求改写成可执行提示词

更好的 figma-generate-library usage 往往从一个范围明确的请求开始，比如：“基于 src/ui，搭建一套浅色/深色 token 系统，以及 Button、Input 和 Card 组件，保持与我们现有的间距和颜色尺度一致。” 不要只说“把我们的设计系统做好一点”这类模糊要求。这个技能在你明确框架、目标界面、主题范围，以及你希望它做的是生成、对齐还是清理时，表现会更好。

采用分阶段流程，不要一次性跑完

实用的 figma-generate-library guide 是先做 discovery，再做 token 映射，然后创建组件，再补文档，最后做验证。这和仓库结构是对应的，也能在代码与 Figma 不一致时减少返工。如果跳过 discovery，后面通常会在命名、变量作用域或组件依赖上耗费更多时间来修正。

figma-generate-library 技能常见问题

figma-generate-library 只适合 Design Systems 吗？

是的，它的主要适用场景就是 Design Systems。figma-generate-library 用在 Design Systems 上时，最擅长的是库架构：语义化 tokens、variables、已发布组件，以及配套文档。它不适合快速 mockup，也不适合只做几个孤立的营销页面。

我需要先很懂 Figma 吗？

不需要，但你需要足够了解源代码和设计意图，才能回答具体问题。初学者也能使用 figma-generate-library skill，只是他们要预期自己会参与审查命名、变体结构和主题方案等决策，而不是完全交给系统自动生成。

它和普通提示词有什么区别？

普通提示词通常只是在要一个结果。figma-generate-library 更像一个构建流程：它期待分阶段完成、逐步验证、发现问题后再修正。正因为如此，它在库创建场景里更可靠，尤其是代码库较大，或者设计系统有多个模式和依赖关系时。

什么情况下不该用它？

如果你只需要几个临时页面、代码库里没有稳定的 UI 模式，或者你无法审查并批准多步骤改动，就不适合用它。在这些情况下，更简单的提示词或更小的 Figma 任务会更快，也更不容易出风险。

如何改进 figma-generate-library 技能

一开始就提供更扎实的源材料

当你提供它能直接映射的真实设计输入时，figma-generate-library skill 的效果会更好，比如组件源码路径、token 文件、主题名称，以及现有的命名规则。像“使用 src/tokens、Button.tsx 和 Card.tsx；保留 light 和 dark 模式；维持 ds- 前缀”这样的请求，比泛泛地说“帮我们整体刷新一下库”更可执行。

明确什么才算通过

告诉这个技能，什么结果才会对你们团队有用：是否要和代码命名一致、减少变体膨胀、支持 code connect，或者把基础能力文档化以便交接。这样它就能优先处理取舍，而不是只追求视觉上的完整。

留意常见失败模式

最大的风险通常是过度构建、跳过依赖顺序，以及把语义化 tokens 和组件层细节混在一起。如果第一版看起来范围太大，就让它缩小范围、把 foundations 和组件分开，或者先重新做 discovery，再继续生成更多节点。

用校验来迭代，不要推倒重来

拿到第一版结果后，针对性提出修改通常更有效，比如“重命名以匹配我们的 token 规范”、“合并重复变体”或“补充间距和颜色语义的文档”。通常不需要从头开始，因为这个技能本来就已经按保留状态、延续前序决策的方式组织好了。