设计与前端 ✓ OpenAI · 官方 figmadesign-systemsdesign-tokenscomponent-librarythemingmcp

Figma 设计系统构建器

从代码库构建并校验专业级 Figma 设计系统。

FollowSkills 评估 · FSRS-2.0
谨慎使用
49/ 100 五分制 2.5 / 5
1 2 3 4 5 6
1信任安全18 / 25 · 3.6/5

证据显示技能要求发现阶段、逐阶段用户明确批准、严格顺序执行、返回节点ID、避免猜测ID,并禁止无确认的破坏性清理;未见凭证窃取、隐蔽外传或恶意行为。扣分原因是其会对Figma产生大量外部写入,回滚方案仅为有限的清理和状态记录,且依赖远程MCP,数据流、权限边界和失败后的恢复责任说明仍不完整。

2可靠稳定6 / 20 · 1.5/5

证据显示有明确的多阶段流程、状态账本、幂等检查、验证步骤和错误恢复参考文档。扣分原因是主文档要求使用return且禁止closePlugin,但组件参考代码仍使用IIFE、closePlugin和closePluginWithFailure;主文档称getPluginData不支持,参考代码却使用setPluginData。脚本和关键依赖内容未在证据中给出,静态审查无法复现关键路径,因此不超过10分。

3适用触发8 / 15 · 2.7/5

证据显示目标用户、适用场景、阶段顺序、输入来源和不应直接开始组件构建的边界较清晰。扣分原因是必须同时加载figma-use,且核心能力依赖Figma MCP;未说明中文交互支持,也没有证明https://mcp.figma.com/mcp在中国大陆网络中的可达性。

4规范维护7 / 15 · 2.3/5

证据显示文档按阶段组织,提供参考文档、脚本目录、命名规则、限制、示例和依赖说明。扣分原因是许可证元数据未知,未见版本策略、变更日志或明确维护责任;maintainers.yml仅指向mcp_server,不能充分证明治理和更新路径。

5有效结果6 / 15 · 2.0/5

证据显示技能覆盖令牌、组件、变体、文档、代码连接和QA,并强调检查点,理论上可完成设计系统库构建。扣分原因是没有提交的测试套件、CI执行证据或代表性产物,且部分示例存在API冲突;静态校准下只能确认核心任务设计合理,不能确认输出可直接使用,因此不超过7分。

6证据核验4 / 10 · 2.0/5

证据包含完整流程、代码片段、参数说明和错误码表,具有一定可审计性。扣分原因是关键helper脚本本身未提供,未见真实CI、测试覆盖、第三方执行结果或独立复核材料;结论主要来自作者文档,静态证据覆盖不足,因此不超过5分。

证据充分度: 评估于 2026年7月20日 审查版本 49f948faa925
使用前请注意
  • 核心功能依赖远程Figma MCP;在中国大陆部署前应验证网络可达性、组织权限、数据驻留和敏感代码是否会发送到外部服务。
  • 修正主文档与参考代码之间的Plugin API冲突,尤其是return与closePlugin、getPluginData与setPluginData的矛盾。
  • 补充实际helper脚本、测试套件、CI结果、版本与变更记录,并明确许可证和维护责任。
  • 在执行清理或大规模写入前,应提供可验证的备份、变更预览和恢复流程。
查看完整评分方法 →

这个 Skill 能做什么,适合哪些场景?

该技能指导代理根据代码库和现有 Figma 文件构建设计系统。它覆盖发现、设计令牌、文件结构、组件创建以及最终质量检查,并要求按阶段推进。工作流通常涉及 20–100 次以上的 use_figma 调用,每个阶段和组件之间都需要用户确认。它必须与 figma-use 技能同时加载,因为后者提供 Plugin API 调用语法。

先读取代码库中的令牌、组件和命名约定,检查 Figma 文件结构,并通过 search_design_system 搜索可复用资源;随后创建变量集合、模式、原始和语义令牌、样式、文档页面及组件。组件按依赖顺序逐个创建,绑定变量,生成变体和组件属性,并通过 get_metadata 与 get_screenshot 验证。它还要求使用共享插件数据或名称维护状态,向 /tmp 写入状态账本,并执行 Code Connect、无障碍、命名和未解析绑定检查。

  1. 设计团队需要把已有代码库的颜色、间距和排版令牌同步到 Figma 时。
  2. 产品团队需要从零建立包含浅色和深色模式的组件库时。
  3. 维护者需要检查现有 Figma 组件与代码实现之间的差距时。
  4. 设计系统团队需要逐个创建、截图验证并审阅 Button、Input 等组件时。

这个 Skill 有哪些优点和局限?

优点
  • 提供明确的四阶段构建顺序和退出条件。
  • 强调令牌先于组件、变量绑定、可复现命名和状态账本。
  • 包含搜索复用、变体控制、截图验证和最终审计规则。
  • 提供多个可复用的 Figma Plugin API 辅助脚本。
局限
  • 依赖 figma-use 技能、Figma MCP 和 Figma 环境。
  • 流程较重,明确要求多次调用和人工检查点,不适合一次性生成。
  • 源材料未提供测试套件、平台覆盖或实际运行结果。
  • 仓库元数据将许可证标为 unknown,且该技能的 LICENSE.txt 内容未提供。

如何安装这个 Skill?

该技能位于仓库的 skills/.curated/figma-generate-library。README 提供的安装方式是:在 Codex 中运行 $skill-installer figma-generate-library,安装后重启 Codex。源材料未说明其他安装目标或包管理器命令。

如何使用这个 Skill?

加载 figma-generate-library 与 figma-use,然后提出设计系统构建请求,例如“根据当前代码库和 Figma 文件,建立一套包含令牌、文档页面和组件库的设计系统”。必须先完成发现和范围确认,再按 Foundations、File Structure、Components、Integration + QA 顺序执行;每个阶段及每个组件后等待明确批准。所有 use_figma 调用都应传入 skillNames: "figma-generate-library",并严格顺序执行。

这个 Skill 与同类方案有什么区别?

该技能明确说明应与 figma-use 配合使用:本技能负责设计系统领域知识和工作流编排,figma-use 负责 Plugin API 调用方式。

常见问题

可以一次调用完成整个设计系统吗?
不可以。技能明确要求拆分为 20–100 次以上的调用,并在阶段和组件之间进行验证与用户确认。
是否必须使用 Figma MCP?
是。SKILL.md 直接要求使用 use_figma 和 search_design_system,因此需要相应的 Figma MCP 工具环境。
安装后是否立即可用?
README 要求安装后重启 Codex,之后再使用该技能。
它是否包含完整的 Figma API 能力?
不完全包含。它负责构建设计系统的内容与顺序,Plugin API 语法规则由 figma-use 提供。

同仓库的其他 Skills

均来自 openai/skills

设计与前端 ✓ OpenAI · 官方

Figma 设计系统页面构建器

用现有设计系统组件把代码或描述转换成可维护的 Figma 页面。

设计与前端 ✓ OpenAI · 官方

Figma 插件 API 操作助手

让智能代理按规则安全地读写 Figma 文件。

设计与前端 ✓ OpenAI · 官方

Figma 代码组件连接器

将 Figma 组件映射到代码实现,保持设计与代码关联。

设计与前端 ✓ OpenAI · 官方

Figma 设计实现助手

将 Figma 设计转化为可集成、可验证的高保真前端代码。

设计与前端 ✓ OpenAI · 官方

Figma 设计系统规则生成器

为 Figma-to-code 项目生成符合代码库约定的设计系统规则。

设计与前端 ✓ OpenAI · 官方

Figma 新建文件助手

在 Figma 草稿中快速创建空白设计或 FigJam 文件。

设计与前端 ✓ OpenAI · 官方

Figma 设计转代码助手

从 Figma 获取设计上下文并将节点实现为生产代码。

开发与工程 ✓ OpenAI · 官方

OpenAI 开发文档助手

为 OpenAI 产品、API 与 Codex 提供基于官方资料的当前指导。

效率与协作 ✓ OpenAI · 官方

Linear 项目协作助手

在 Codex 中统一管理 Linear 工单、项目与团队协作流程。

自动化与运维 ✓ OpenAI · 官方

Render 云部署助手

分析代码库并为 Render 生成部署配置,或创建单服务部署。

效率与协作 ✓ OpenAI · 官方

Notion 会议情报助手

结合 Notion 上下文与研究资料,快速准备定制化会议议程和会前材料。

开发与工程 ✓ OpenAI · 官方

OpenAI Skill Creator 指南

指导你设计、编写、验证和迭代可复用的 Codex 技能。

设计与前端 ✓ OpenAI · 官方

Hatch Pet 动画宠物工坊

把角色或品牌视觉转成可验证、可打包的 Codex 动画宠物。

开发与工程 ✓ OpenAI · 官方

Codex 迁移助手

将 Claude Code 的指令、技能、代理与 MCP 配置迁移到 Codex。

开发与工程 ✓ OpenAI · 官方

WinUI 3 应用开发助手

为 C# WinUI 3 应用提供从环境准备到部署的开发指导。

效率与协作 ✓ OpenAI · 官方

目标定义助手

把模糊意图转化为可验证、可量化且范围明确的工作目标。

开发与工程 ✓ OpenAI · 官方

Codex CLI 构建器

把 API、脚本或现有工具变成可复用的命令行接口。

设计与前端 ✓ OpenAI · 官方

Codex 图像生成与编辑

为项目生成和编辑可直接使用的栅格图像资产。

开发与工程 ✓ OpenAI · 官方

ASP.NET Core 开发指南

帮助构建、审查和升级 ASP.NET Core 应用。

开发与工程 ✓ OpenAI · 官方

ChatGPT Apps 构建助手

帮助开发者按文档构建带 MCP 服务端和组件界面的 ChatGPT 应用。

相关 Skills