figma-create-design-system-rules

figma-create-design-system-rules 技能概览

这个技能能做什么

figma-create-design-system-rules 可以帮助你把 Figma 的实现知识转化为项目专属规则，让 coding agents 按这些规则执行。figma-create-design-system-rules skill 最适合用于希望在整个代码库里统一组件选择、命名、tokens、文件位置，以及“哪些内容不要硬编码”这类决策的场景。

适合谁安装

如果你正在为某个 repo 搭建或优化 Design System，尤其是 Figma 到代码的工作总是滑向不一致的实现方式，这个技能就很适合。它很适合前端团队、design system 负责人，以及任何希望每次都套用同一套实现规范，而不是在 prompt 里反复解释的人。

它为什么不一样

figma-create-design-system-rules 的核心价值在于：它捕捉的是 repo 级别的约定，而不是泛泛而谈的设计系统建议。它是为 Figma MCP server 设计的，因此可以基于真实的设计上下文来生成规则，而不是靠猜。这让它比一次性的 prompt 更适合需要在多项任务中重复使用的指导。

如何使用 figma-create-design-system-rules 技能

安装并连接所需工具

在 figma-create-design-system-rules install 流程中，先通过你的 skills manager 添加该技能，并确保在请求规则生成前 Figma MCP server 已可用。这个技能依赖 Figma 工具连接；没有它，就拿不到生成可信项目规则所需的设计上下文。

从正确的输入开始

高质量的 figma-create-design-system-rules usage 一开始就要给出明确目标：repo、代码库区域，以及你希望被保护的实现方式。一个有力的 prompt 应该说明技术栈、组件事实来源、样式系统和约束条件，例如：

• “为我们的 Next.js 应用生成规则，使用 Tailwind 和 src/components 里的共享组件。”
• “为一个 React Native repo 创建 Design System Rules，tokens 存在 JSON 中，并且必须严格做无障碍检查。”

先读这些文件

要真正把 figma-create-design-system-rules guide 用好，先预览 SKILL.md，然后查看 agents/openai.yaml、references/rule-template.md 和 scripts/check_agents_md.sh。这些文件会告诉你预期输出的结构、规则模板，以及这个 repo 是否要求根目录下存在 AGENTS.md。如果你的目标是别的 agent，请使用技能里给出的对应规则文件路径：

• Claude Code: CLAUDE.md
• Codex CLI: AGENTS.md
• Cursor: .cursor/rules/figma-design-system-rules.mdc

从设计上下文走到 repo 规则

最有效的工作流是：先收集 Figma 上下文，再映射到代码库约定，最后写成足够具体、能改变行为的规则。重点关注 agent 绝不能凭空决定的内容，比如组件选择、token 使用、命名模式，以及实现文件应该放在哪里。不要只问宽泛的“最佳实践”；要问能反映你这个 repo 实际工作方式的规则。

figma-create-design-system-rules 技能 FAQ

这只适用于 Design Systems 吗？

不是。figma-create-design-system-rules for Design Systems 确实是主要使用场景，但这个技能本质上是在把设计实现知识转成可复用的 repo 规则。只要你的代码库里有可重复的 UI 约定，即使不是正式的 design system 团队，也依然能受益。

使用它必须有 Figma MCP 吗？

是的。这个技能明确要求连接 Figma MCP server，所以它不是纯文本 prompt 工作流。如果你无法连接 Figma，普通 prompt 可能更省事，但输出通常会更缺乏依据，也更难复用。

它比普通 prompt 更好吗？

通常是的，前提是你需要的是可重复执行的规则，而不是一次性的答案。普通 prompt 可以解释一个页面；figma-create-design-system-rules 更适合让模型在同一个 repo 里持续按同一套约定处理后续很多任务。

什么时候应该跳过它？

如果你只需要一个快速的、一次性的实现建议，如果你的 repo 还没有稳定约定，或者你无法确认目标规则文件和 agent 环境，就可以跳过它。在这些情况下，一个简短、聚焦的 prompt 往往比安装和配置完整技能更快。

如何改进 figma-create-design-system-rules 技能

提供更严格的仓库上下文

提升最大的地方，就是明确告诉技能你这个代码库里哪些内容必须保持一致。把组件路径、token 来源、样式系统、无障碍预期以及命名规则都写进去。例如，写成“基础组件放在 src/ui，组合组件放在 src/features，并且绝不内联颜色值”，比“帮我的 app 制定规则”能提供好得多的输入。

要求规则能阻止错误

figma-create-design-system-rules 最有价值的输出，是一组能防住常见 Figma-to-code 失误的护栏：硬编码间距、随手创建组件、token 漂移、文件放置混乱。让 agent 明确知道该选什么、该避免什么，以及当设计有歧义时应该先看哪里。

第一版之后要复查并收紧

把第一次输出当作你真实 repo 的草稿，而不是最终政策文件。如果生成的规则太宽泛，就加入你代码库里的更具体示例后重新生成。如果规则太死板，就放宽那些造成摩擦的部分，同时保留能保护一致性的内容。最好的 figma-create-design-system-rules usage 通常来自一到两轮基于真实仓库示例的修订。