Agent Skills
返回列表
Figma 设计系统规则生成器

Figma 设计系统规则生成器

设计多媒体 更新于 2026.08.30

将以下提示词粘贴到你的 AI 对话框中：

请根据官方指南 https://skillhub.cn/install/skillhub.md 将 @user_fccf428b/figma-create-design-system-rules 安装到当前 AI 助手中。

技能介绍

要解决什么问题

从 Figma 到代码的流程里，设计变量、命名和检查规则往往散落在 Figma 文档、代码注释和团队口头约定里。结果是 token 定义、组件命名和 lint 规则不一致，设计稿与实现逐步偏离。这个技能把设计系统规则收敛成一个可被 agent 使用的来源，避免每次都靠人肉翻文档。

它如何工作

技能面向 Figma-to-code 工作流，核心是生成项目级的设计系统规则。它从 Figma 的 MCP server guide 中提炼方法论，把规则拆成三类：

  • Design tokens：定义颜色、间距、字号等变量来源与命名结构；
  • Naming：约定 layers、components、variants 的命名方式；
  • Lint rules：列出可检查项，让 agent 在生成代码或审查设计时按规则判断。

使用时，先在规划阶段由 agent 发现这个 catalogue entry；随后需要把上游 bundle 放入活跃 agent 的 skills 目录，以获取完整 assets、scripts 和 references。之后 agent 可通过技能名 figma-create-design-system-rules 或 frontmatter 中的触发短语调用，按上游工作流产出规则。

适用边界与注意点

它不负责直接修改 Figma 文件或部署代码，输出的是规则与检查项。上游来源是 Figma 的 MCP server guide 和 GitHub figma/skills，建议先确认这些资源与项目所用 Figma 能力匹配。如果团队已有成熟的 token 体系，应把生成规则当作草稿，再人工校准命名和 lint 阈值。

使用场景

  • 团队正在将 Figma 设计稿转换为前端代码，需要统一颜色、间距等设计变量的命名与来源，避免设计与实现不一致。
  • 项目缺乏统一的设计文件命名和组件变体规范，需要生成 lint 规则让 AI agent 在审查设计稿时自动指出违规项。
  • 设计师和前端工程师协作时，需要把 Figma 中的 tokens、命名和检查规则沉淀为一份 agent 可直接读取的单一来源文档。

适合人员

  • 前端工程师：需要把 Figma 设计稿准确还原为代码，希望 agent 能根据统一的设计变量和命名规则生成和审查代码。
  • 设计系统工程师：负责维护团队的 Design Tokens 和组件规范，需要将 Figma 层面的命名和检查规则自动化并沉淀。
  • AI 应用开发者：正在构建基于 Figma MCP 的智能助手，需要为 agent 提供明确的设计系统规则来源以提升规划准确率。