102.3K+下载
跳转到使用指南
Figma Create Design System Rules作者 OpenAI

Figma Create Design System Rules Skill.

用具体路径和约定取代“遵循设计系统”这类模糊指示。

  • Figma
  • 设计系统
  • 代理规则
下载 OpenDesign查看使用指南
来源审查 · Figma Create Design System RulesSKILL.md
任务 Figma 产出内容 • 项目专属的 Figma 实现规则章节或文件 • 具体的组件、令牌和资源位置指南 • 用于完善规则的小型实现检查 开始之前 需要 Figma MCP 连接并具备目标代码库的访问权限；目标规则格式取决于编码代理宿主。
编辑摘要 · 来源审查于 2026-10-07 · 并非生成的示例

01 功能说明

将仓库约定转化为 Figma 实现规则

一种仓库分析工作流，用于编写并测试具体的 Figma 实现代理规则。

基于来源的工作流并非执行基准测试

工作方法

Figma Create Design System Rules 为未来的 Figma 转代码工作生成项目专属指南。它会分析组件的位置、样式的处理方式、令牌的定义位置，以及实现时必须保留哪些架构约定。其交付物是规则文件，而不是 Figma 组件库或重新设计的界面。

来源支持 Claude Code、Codex 和 Cursor 的规则格式。实用的规则会指出真实的组件路径和令牌来源，而不是对每个仓库都强行套用通用的 React 或 Tailwind 模式。工作流最后会在一个小型组件上试用这些规则，并完善未能奏效的部分，因为写下指示并不能证明代理会始终如一地遵循它。

预期交付物

  • 项目专属的 Figma 实现规则章节或文件
  • 具体的组件、令牌和资源位置指南
  • 用于完善规则的小型实现检查
查看示例任务说明

从任务说明到审查

  1. 01
    检查现有约定

    首先从 Figma MCP create_design_system_rules 工具获取基础模板。然后在起草项目专属的补充规则之前，阅读组件组织方式、样式、导入、路由和现有代理规则。

  2. 02
    编写可执行的映射规则

    指出实际的组件和令牌文件，说明所需的 Figma 上下文与截图流程，并保留项目的现有框架。

  3. 03
    保存并测试规则

    使用适合代理宿主的规则格式，不要覆盖无关的指示。测试一个小型 Figma 实现，并删除相互冲突或无用的指南。

02 适用场景

适用场景

需要 Figma MCP 连接并具备目标代码库的访问权限；目标规则格式取决于编码代理宿主。

适合的用途

  • 代理入门适用于新的实现会话反复创建重复组件，或对已有令牌的值进行硬编码的情况。
  • 记录团队约定适合希望将未成文的仓库知识转化为可审查指南的设计系统团队。

需要检查的限制

  • 规则并非强制机制规则文件可以指导代理，但不能取代代码检查、测试或视觉对比。
  • 必须保留现有指示添加 Figma 指南时，不应删除无关的仓库规则，也不应引入相互矛盾的架构要求。

请准备这些输入

  • 仓库访问权限提供实际项目，包括有代表性的组件和样式文件。
  • 代理宿主明确团队使用的规则格式，例如 AGENTS.md、CLAUDE.md 或 Cursor 规则。
  • 已知的团队决策提供无法可靠推断的约定，包括归属关系和已批准的例外情况。

03 关键决策

重要决策

  1. 具体路径胜过口号

    明确指出 Button 组件和令牌文件，比笼统要求保持一致更具可执行性。

  2. 适应仓库

    来源将 Figma 生成的表示形式视为设计上下文，应将其适配到仓库自身的框架和样式中。

04 示例任务

尝试聚焦的任务说明

以下示例任务说明尚未经过测试。使用前请检查该技能的设置。

检查设置

通过项目现有的指示机制使用精选技能。这些 Beta 材料受 Figma 开发者条款约束。请审查规则文件的更改会如何影响代理今后的行为。

上游源文件
https://github.com/openai/skills/blob/49f948faa9258a0c61caceaf225e179651397431/skills/.curated/figma-create-design-system-rules/SKILL.md

需要 Figma MCP 连接并具备目标代码库的访问权限；目标规则格式取决于编码代理宿主。

从一项交付物开始

运行该技能前，请根据需要调整此任务说明中的范围、来源材料和约束。

示例任务说明
使用 figma-create-design-system-rules 记录我们现有的 Figma 转代码约定。先检查仓库，保留当前的 AGENTS.md，并添加一个聚焦的章节，列出我们的组件、令牌和资源路径。不要引入新的样式框架。在一个小型组件上验证这些指南，并标记出需要团队决策的所有约定。

检查结果

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

  • 引用的每个组件和令牌路径均真实存在。
  • 新规则不与现有项目指示冲突，也不取代这些指示。
  • 一个小型实现遵循预期的复用和样式约定。

OpenDesign 为编码代理提供本地设计工作区。此条目并不表示已捆绑该技能，也不表示其中包含该技能所需的外部工具、凭据和软件依赖项。

下载 OpenDesign阅读快速入门指南

05 来源与许可证

来源和许可证

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

来源所有者
OpenAI
仓库
openai/skills
技能文件
skills/.curated/figma-create-design-system-rules/SKILL.md
许可证
Figma 条款
已审查的快照
2026-10-07 · 49f948faa925
编辑来源摘要
一种仓库分析工作流，用于编写并测试具体的 Figma 实现代理规则。

由 OpenDesign 根据所链接的来源撰写的原创摘要。仓库星标数只是特定日期的热度指标，并不代表技能使用量或质量评分。

06 开始前的问题

开始前需要考虑的问题

它会在 Figma 中创建令牌吗？

不会。其主要输出是代理可读的项目指南。在 Figma 中构建变量和组件库属于另一项技能。

我的项目必须使用 React 和 Tailwind 吗？

不必。来源明确要求代理检测仓库所用的框架和样式方法，并据此调整规则。

每项约定都应该转化为规则吗？

来源建议从最重要且反复出现的问题入手，并保持指南具体明确，而不是用极少派上用场的规则填满上下文。

OpenDesign

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

将任务说明、来源材料和设计工作集中保存在本地工作区中。将该技能加入工作流前，请检查其自身的设置。

下载 OpenDesign浏览设计技能
上游源文件
https://github.com/openai/skills/blob/49f948faa9258a0c61caceaf225e179651397431/skills/.curated/figma-create-design-system-rules/SKILL.md