figma-generate-library

figma-generate-library 技能概览

figma-generate-library 的作用

figma-generate-library 能帮助你从代码库中构建或更新 Figma design system，而且比凭感觉猜测要少得多。它最适合需要变量、semantic tokens、组件库、文档页面，以及与源代码高度一致的明暗主题的团队。不同于通用提示词，figma-generate-library skill 会为 Design Systems 提供一套有顺序的工作流，让你先决定先做什么、哪些可以后置，以及如何保持文件一致性。

适合谁使用

如果你要把产品代码库转成可维护的 Figma library，尤其是需要可复用基础设施而不是一次性 mockup 时，就适合用这个技能。它适合 design systems lead、产品设计师、design engineer，以及正在处理 token 对齐、组件发布或 library 清理的 agent。如果你只需要一个单独页面或快速视觉概念，这个技能通常就太重了。

它为什么不同

figma-generate-library 的核心价值在于 orchestration：它默认这是一个多步骤任务，会检查依赖关系，并在 variables、components 和 docs 之间保持构建顺序。它是为配合 figma-use 设计的，后者负责 Plugin API 调用，而这个技能决定应该先做什么、按什么顺序做。这让 figma-generate-library skill 比单纯的“创建一个 design system”提示词更有用，因为它减少的是结构性错误，而不只是输出波动。

如何使用 figma-generate-library 技能

安装并加载正确的技能

进行 figma-generate-library install 时，先添加这个技能，并且在任何 Figma 写入步骤之前先加载 figma-use。仓库预期在执行过程中始终存在技能上下文，而这些指令的设计目标是驱动许多更小的 use_figma 调用，而不是一次性的大批量处理。实际使用中，你应该把它当作一个工作流技能，而不是单命令生成器。

先做发现，再做创建

先阅读 SKILL.md，然后查看 references/discovery-phase.md、references/token-creation.md、references/component-creation.md 和 references/documentation-creation.md。如果你预期会失败，或者运行中可能被中断，也要读 references/error-recovery.md。这些辅助脚本本身就很明确地说明了，这套工作流依赖文件检查、状态恢复、验证和清理，而不是盲目生成。

把模糊目标变成可执行提示词

高质量的 figma-generate-library usage 提示词应该包含代码库、目标框架、需要生成的内容，以及 Figma 中已经存在什么。示例：“基于 src/styles/tokens.css 和 src/components 为我们的 React 应用构建 tokens 和核心组件，保留现有页面命名，并优先处理 Button、Input 和 Badge，再做文档页面。”这比“帮我做一个 design system”更有效，因为这个技能可以把你的真实约束映射成执行顺序，避免过度构建。

能明显提升结果的实际工作流

可以用这个 figma-generate-library guide 模式：1）发现 token 来源和命名规则，2）创建 variables 和 semantic aliases，3）按依赖顺序构建组件，4）补充文档，5）验证并清理。想理解这个技能如何看待结构和校验，可以先看一眼 scripts/inspectFileStructure.js、scripts/createVariableCollection.js、scripts/createComponentWithVariants.js 和 scripts/validateCreation.js。如果想要更好的输出，在让技能写入之前，先给它真实的 token 来源、现有页面名称，以及组件清单。

figma-generate-library 技能 FAQ

figma-generate-library 只适合 design system 吗？

是的，主要是这样。figma-generate-library skill 是为 Figma 里的 design system 准备的，尤其适合需要可复用基础、组件变体和代码到设计对齐的场景。它并不适合临时布局生成，或者单独做一个演示文件。

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

普通提示词可能会产出一个看起来合理的 Figma 方案，但 figma-generate-library 增加了强制顺序、依赖感知和恢复逻辑。当任务涉及大量节点、多组 collection 或反复编辑时，这一点尤其重要。如果你在意整个 library 的一致性，这个技能比从零开始临时提示更适合作为起点。

新手需要了解整个仓库吗？

不需要。只要能识别代码库和期望的 Figma 输出，新手也可以使用这个技能。新手最大的风险通常是范围定义不清，最后导致 library 不完整或命名不一致。如果你刚上手，先从少量 tokens 和一两个核心组件开始，再去尝试完整 library。

什么时候不该用这个技能？

如果你只需要快速探索视觉方向、一次性原型，或者任务根本不依赖代码对齐，就不要用 figma-generate-library。当你无法提供可靠的单一事实来源来定义 tokens、组件名称或主题规则时，它也不适合。

如何优化 figma-generate-library 技能

先把最有价值的输入给技能

figma-generate-library 想要拿到好结果，最关键的是具体的源材料：token 文件、theme variables、组件目录，以及已有的 Figma 文件结构。如果可以，尽量提供准确路径，并注明当代码和 Figma 不一致时以哪个来源为准。这样可以减少命名、mode 映射和组件优先级上的歧义。

说清楚你的 library 最重要的是什么

大多数用户最在意三件事：token 还原度、组件一致性，以及 library 是否可发布。最好一开始就明确优先级，比如“严格匹配代码 tokens”、“保留现有组件命名”或者“优先保证公开资产面板整洁”。这些优先级会改变技能处理权衡的方式，尤其是在源材料不完整时。

避开常见失败模式

最常见的问题包括一次想做太多、跳过发现阶段，以及混用不兼容的命名规则。另一个常见问题是，在底层 variables 还没准备好之前就要求生成组件。如果 figma-generate-library skill 的输出感觉不对，先检查你是否给了 token 来源、组件清单，以及清晰的文件状态快照。

在第一轮结果后继续迭代

把第一轮结果当作草稿级的 library 方案，而不是最终文件。先检查已经创建了什么，再通过补齐缺失的 token 层级、下一个依赖层，或者清理孤立节点来细化。如果初稿已经接近目标但还不完整，后续最有效的追问通常更聚焦，比如：“补上 semantic color modes”、“基于现有 atom 集合构建 Button 变体”或“只把已经创建的基础能力写成文档”。