跳转到使用指南
Figma Generate Library作者 OpenAI

Figma Generate Library Skill.

从令牌模型开始,然后按可控顺序构建可复用组件。

  • Figma
  • 设计系统
  • 组件库
来源审查 · Figma Generate LibrarySKILL.md
任务 Figma 产出 • Figma 变量集合、语义别名以及文本或效果样式 • 具有可控变体集并配有文档的可复用组件 • 状态台账,以及最终的绑定、命名和视觉审查 开始之前 Figma MCP,具备可编辑文件访问权限、代码库访问权限,并配有配套的 figma-use 技能及辅助参考资料。
编辑摘要 · 已审查来源 2026-10-07 · 非生成示例

01 功能说明

基于代码基础构建 Figma 组件库

先构建 Figma 变量和样式,再构建组件;保存状态记录,并在每个阶段进行审批。

基于来源的工作流并非执行性能基准

工作方法

Figma Generate Library 是一个多阶段的设计系统工作流,而非一次性界面生成器。它会比较代码、现有 Figma 文件和已订阅的组件库,然后在写入之前锁定明确的令牌和组件范围。变量和样式先于组件创建,以便将视觉属性绑定到一致的基础体系。

该来源特别重视长时间运行任务的状态:已创建的 ID、确定性命名和保存的台账有助于在恢复工作时避免重复创建节点。组件工作包括变体布局、文本和布尔属性、图标替换以及文档。人工检查点是工作流的一部分,尤其是在代码与 Figma 不一致时;该技能不会擅自决定应以哪个系统为准。

预期交付物

  • Figma 变量集合、语义别名以及文本或效果样式
  • 具有可控变体集并配有文档的可复用组件
  • 状态台账,以及最终的绑定、命名和视觉审查
查看示例需求简述

从需求简述到审查

  1. 01
    发现并锁定范围

    清点代码和 Figma 资产、搜索组件库,并在创建之前就首批令牌和组件的确切集合达成一致。

  2. 02
    创建基础体系

    构建原始变量和语义变量、模式、作用域及代码语法,然后创建排版和效果。获得基础体系审批后,创建页面结构和基础体系文档,并在开始构建组件之前另行获得审批。

  3. 03
    逐步构建组件

    每次创建一个组件,并添加变量绑定、属性和文档。验证其结构和外观,展示截图并获得审批,然后再开始创建下一个组件。

  4. 04
    协调与审计

    审查命名、未解决的绑定以及可选的 Code Connect 映射;使用已记录的 ID,而不是猜测或进行大范围清理。

02 适用场景

适用场景

Figma MCP,具备可编辑文件访问权限、代码库访问权限,并配有配套的 figma-use 技能及辅助参考资料。

适合的情形

  • 代码与组件库对齐适用于已实现的令牌和组件需要一个可维护的 Figma 对应版本时。
  • 受控的组件库修复适合用于差距分析,其中部分资产可以复用,另一些可以封装,少数则需要重建。

需要核查的限制

  • 并非单次调用生成器来源明确要求分阶段工作和审批检查点。不应声称能够通过一次操作安全地创建大型组件库。
  • 冲突需要由负责人裁决当代码与 Figma 不一致时,必须由产品负责人或设计负责人决定应以哪个值或组件契约为准。

请提供这些输入

  • 代码与 Figma 清单提供代码库和可编辑的目标文件,包括现有的令牌约定。
  • 初始范围明确首个可用版本所需的令牌集合、模式和组件系列。
  • 审查负责人明确谁有权审批基础体系、组件以及现有系统之间的冲突。

03 关键决策

重要决策

  1. 语义别名

    该来源将原始基础令牌与模式感知的语义令牌分开,而不是在各组件中重复使用原始值。

  2. 可恢复的创建流程

    保存的节点台账和确定性命名,使中断后的组件库工作更容易恢复,同时避免创建重复项。

04 示例任务

尝试一份聚焦的需求简述

以下示例需求简述尚未经过测试。使用前请检查该技能的设置。

审查设置

使用完整的精选文件夹,包括辅助脚本和阶段参考资料。这些 Beta 资料受 Figma 开发者条款约束。应将 Figma 写入和组件库发布视为需要分别授权的操作。

上游源文件
https://github.com/openai/skills/blob/49f948faa9258a0c61caceaf225e179651397431/skills/.curated/figma-generate-library/SKILL.md

Figma MCP,具备可编辑文件访问权限、代码库访问权限,并配有配套的 figma-use 技能及辅助参考资料。

从一个交付物开始

运行该技能之前,请调整这份需求简述中的范围、来源材料和约束。

示例需求简述
使用 figma-generate-library 规划一个与我们的代码库匹配的小型组件库:包含浅色和深色模式的颜色令牌、间距、排版、Button 和 Input。先进行只读发现,并展示代码与 Figma 之间的冲突。等待范围获批后再执行写入,先构建基础体系,并保留状态台账,以便单独审查和恢复每个组件。

检查结果

根据以下可观察标准检查实际输出。

  • 语义变量引用原始变量,并承载预期的模式和作用域。
  • 组件变体和图标替换符合已商定的契约,不包含不必要的组合。
  • 记录的 ID、截图和绑定检查为每个已完成阶段提供依据。

OpenDesign 为编程智能体提供本地设计工作区。此条目并不表示该技能已被捆绑提供,也不表示其中包含其外部工具、凭据和软件依赖项。

05 来源与许可证

来源与许可证

本页面描述的是下方链接所指向的固定来源修订版本。上游行为和要求可能会发生变化。

来源所有者
OpenAI
代码库
openai/skills
许可证
Figma 条款
已审查的快照
2026-10-07 · 49f948faa925
编辑来源摘要
先构建 Figma 变量和样式,再构建组件;保存状态记录,并在每个阶段进行审批。

由 OpenDesign 根据链接来源撰写的原创摘要。代码库星标数是带日期的受欢迎程度指标,并不代表技能使用量或质量评分。

06 开始前的问题

开始之前的问题

这与生成界面有何不同?

它构建界面所使用的可复用基础体系和组件,包括令牌集合、变体和文档。

可以并行执行画布写入吗?

来源明确要求按顺序执行 Figma 变更,以确保状态和返回的节点 ID 保持可靠。

它会自动替换现有组件库吗?

不会。创建之前要先进行发现和范围审批,而且复用策略会优先使用现有本地资产,然后才考虑导入或创建新组件。

OpenDesign

为下一轮设计迭代留出空间。

将需求简述、来源材料和设计工作集中保存在本地工作区中。将该技能加入工作流之前,请检查其自身的设置。

上游源文件
https://github.com/openai/skills/blob/49f948faa9258a0c61caceaf225e179651397431/skills/.curated/figma-generate-library/SKILL.md