前言¶
用 AI 编程工具把 Figma 稿落地成前端代码时，常见问题往往不是「写不出来」，而是「写得不像你们项目」。间距随手敲、颜色写死十六进制、组件丢进随便一个目录、明明仓库里已有 Button 却又新建一份——这些都是设计系统只存在于团队口头约定、没有进入 Agent 可读上下文时的典型表现。
figma-create-design-system-rules 就是为这件事准备的 Agent Skill：它不直接画界面，而是帮你分析代码库，生成一套绑定本项目约定的设计系统规则，并落到 Cursor / Codex CLI / Claude Code 各自会加载的规则文件里。之后再做 Figma 到代码的实现时，Agent 会按这些规则走，而不是每次靠你口头重复「别硬编码颜色」。
这是什么¶
一句话定位：为当前项目生成自定义设计系统规则，约束 Agent 在 Figma-to-code 工作流中的组件选用、样式写法与目录结构。
该 Skill 收录在 OpenAI 的 openai/skills 仓库 skills/.curated/figma-create-design-system-rules 目录下；目录内 LICENSE.TXT 写明材料受 Figma Developer Terms 约束，属于 Figma 面向 Agent / MCP 场景提供的能力封装。Figma 官方 MCP 文档也单独说明了同名能力：create_design_system_rules，用于产出可指导设计稿转代码的规则文件。
前置条件很明确：需要已连接并可用的 Figma MCP Server，同时 Agent 要能读到你的项目代码，才能把规则写「贴地」。
触发场景包括（与 Skill 描述一致）：
- 说「create design system rules」「generate rules for my project」「set up design rules」「customize design system guidelines」
- 新项目准备长期用 Figma 驱动开发
- 给已有代码库里的 Agent「入职培训」，把团队惯例固化下来
- 统一团队的 Figma-to-code 流程，或迭代已有设计约定
核心功能与亮点¶
把「潜规则」写成 Agent 可读规则¶
官方说明里把 Design System Rules 定义为项目级指令，用来编码代码库里那些资深同学才会口口相传的知识，例如：
- 该用哪些布局原语与现成组件
- 新组件应放在哪个目录
- 命名与导出方式
- 什么内容绝不能硬编码
- Design Token / 样式体系怎么接
- 项目特有的架构习惯
规则一旦落盘，后续每次 Figma 实现任务都会自动带上这些约束，减少重复提示。
按 Agent 写入对应规则文件¶
Skill 明确支持三类目标文件：
| Agent | 规则文件 |
|---|---|
| Claude Code | 项目根目录 CLAUDE.md（也可用 .claude/rules/figma-design-system.md 做模块化） |
| Codex CLI | 项目根目录 AGENTS.md（已有文件则追加新章节；合并体积有 32 KiB 上限） |
| Cursor | .cursor/rules/figma-design-system.mdc（带 YAML frontmatter：description、globs、alwaysApply） |
不确定当前环境时，Skill 要求先检查仓库里已有规则文件，或直接询问使用者。
规定完整的 Figma MCP 落地流程¶
生成出的规则不只谈「组件放哪」，还会固化一套实现顺序（Skill 要求不得跳步），核心包括：
- 先用
get_design_context拉取目标节点的结构化表示 - 输出过大或被截断时，先用
get_metadata看节点地图，再按需回取 - 用
get_screenshot拿到视觉参照 - 同时具备上下文与截图后，再下载资源并开始写代码
- 把 MCP 常见的 React + Tailwind 输出，翻译成本项目的约定、样式与框架
- 对照 Figma 做 1:1 观感与行为校验，再宣告完成
同时强调：MCP 输出是设计与行为的表征，不是最终代码风格；颜色、间距、字体要落到项目 Token；资源优先使用 MCP 返回的 localhost 源，不要另装图标包或自制占位图。
安装与启用¶
该 Skill 采用通用 SKILL.md 格式，可在支持 Agent Skills 标准的工具中使用。不同工具的发现目录不同，按官方资料分别说明如下。
Codex CLI（openai/skills 策展目录）¶
openai/skills README 说明：.curated 下的 Skill 可用内置的 $skill-installer 按名称安装，例如：
$skill-installer figma-create-design-system-rules
也可以直接给出 GitHub 目录 URL。安装后需重启 Codex 才能加载新 Skill。
说明：该仓库 README 已标注 deprecated，并指向 openai/plugins 作为后续插件/Skill 示例入口；本文仍以当前可访问的 curated 路径与 SKILL.md 原文为准。
Cursor¶
Cursor 会自动发现项目级或用户级 Skill 目录，常见包括：
- 项目：
.cursor/skills/、.agents/skills/ - 用户全局：
~/.cursor/skills/、~/.agents/skills/ - 兼容加载：
.claude/skills/、.codex/skills/等
实操上可以把该 Skill 目录（至少包含 SKILL.md）放到上述某一路径下；也可以在 Cursor 的 Customize → Rules 中通过 Remote Rule（GitHub）导入仓库链接。启用后，在 Agent 对话里用自然语言说出「为我的项目生成设计系统规则」，或通过 / 手动点选 Skill 名称即可。
Claude Code¶
将 Skill 放到 Claude Code 会扫描的 skills 目录（例如项目内 .claude/skills/figma-create-design-system-rules/SKILL.md），由 Agent 按 description 自动匹配，或在对话中明确要求创建设计系统规则。
共用前置：接好 Figma MCP¶
无论用哪家 Agent，本 Skill 都要求 Figma MCP Server 已连接。规则生成阶段会调用其中的 create_design_system_rules（Skill 文中称为 tool；Figma 官方「Tools and prompts」文档将其归在 MCP Prompt 一类，并说明并非所有客户端都支持 Prompt）。若客户端不支持该 Prompt/工具，可退回 Figma 文档中的示例提示词，让 Agent 手动分析代码库并起草规则，再按下面路径保存。
典型用法¶
官方给出的工作流共五步，按顺序执行。
1. 调用 create_design_system_rules 拿模板¶
向 Figma MCP 传入项目语言与框架，例如：
clientLanguages："typescript,javascript"clientFrameworks："react"/"vue"/"svelte"/"angular"/"unknown"
返回内容是写规则用的基础提示与模板，后续结构应跟着模板走。
2. 分析代码库¶
落笔前先摸清现状，至少覆盖：
- 组件目录在哪、是否有独立 design system 包、按功能还是按类型组织
- 样式方案（Tailwind、CSS Modules、styled-components 等）与 Token 定义位置
- 命名、props、组合模式
- 状态管理、路由、路径别名等架构选择
3. 生成项目专属规则¶
按分析结果填入具体路径与约定。Skill 建议至少包含这些块：
组件规则示例：
- IMPORTANT: Always use components from `[YOUR_PATH]` when possible
- Place new UI components in `[COMPONENT_DIRECTORY]`
- Follow `[NAMING_CONVENTION]` for component names
- Components must export as `[EXPORT_PATTERN]`
样式规则示例：
- Use `[CSS_FRAMEWORK/APPROACH]` for styling
- Design tokens are defined in `[TOKEN_LOCATION]`
- IMPORTANT: Never hardcode colors - always use tokens from `[TOKEN_FILE]`
- Spacing values must use the `[SPACING_SYSTEM]` scale
Cursor 规则文件 frontmatter 示例：
---
description: Rules for implementing Figma designs using the Figma MCP server. Covers component organization, styling conventions, design tokens, asset handling, and the required Figma-to-code workflow.
globs: "src/components/**"
alwaysApply: false
---
[这里放入生成的规则正文]
globs 应改成你们真正会落 Figma 代码的目录，例如 "src/**/*.tsx"，或 ["src/components/**", "src/pages/**"]。
4. 保存到对应 Agent 规则文件¶
按上一节表格写入 CLAUDE.md、AGENTS.md 或 .cursor/rules/figma-design-system.mdc。保存后，Agent 在后续 Figma 实现任务中会自动加载。
5. 用小组件验收并迭代¶
官方建议：先拿一个简单组件（例如 Button）跑通一遍实现 → 检查 Agent 是否遵守规则 → 对失效条目改写得更具体 → 与同事对齐 → 随项目演进定期更新。
对话触发示例（来自 Skill 示例）：
- 「Create design system rules for my React project」
- 「Set up Figma rules for my Vue app」
- 「Generate rules for our design system library」
适用场景与注意事项¶
适合：
- 已有或正在建立组件库 / Design Token，希望 Figma 落地不再「各写各的」
- 前端团队多人共用同一 Agent，需要统一路径、命名与样式来源
- 设计系统包在 monorepo 中，需要把包路径、Storybook、测试约定一并写进规则
注意：
- 没有 Figma MCP 就跑不起来官方主流程。 先完成 MCP 连接，再谈生成规则。
- 规则要具体、可执行。 Skill 明确反对空泛表述：与其写「使用设计系统」，不如写「按钮一律用
src/components/ui/Button.tsx，variant只能是'primary' | 'secondary' | 'ghost'」。关键约束可用IMPORTANT:前缀提高优先级。 - 规则不是越多越好。 过多规则会撑大上下文、增加延迟；官方建议先抓能解决 80% 一致性问题的那 20%，再渐进补充。
- 规则会过时。 架构或 Token 位置变更后要同步改规则，并用版本管理跟踪；Codex 的
AGENTS.md还有 32 KiB 合并上限，追加时注意体积。 - 材料处于 Beta。 许可证说明 Figma 可能随时修改、暂停或下线相关材料，生产流程里应保留人工 Review。
- MCP 输出默认偏 React + Tailwind。 规则里必须写清如何映射到 Vue、CSS Modules、自有 Token 等，否则容易「照抄 Tailwind 工具类」。
小结¶
figma-create-design-system-rules 解决的是前端协作里最磨人的一层：把设计系统与仓库惯例，从人口口相传，变成 Agent 每次实现 Figma 时都会加载的规则文件。它依赖 Figma MCP，产出落到 CLAUDE.md / AGENTS.md / .cursor/rules/figma-design-system.mdc，再用小范围实现验证效果。
官方入口：
- Skill 目录：https://github.com/openai/skills/tree/main/skills/.curated/figma-create-design-system-rules
- Figma MCP 工具与 Prompt 说明：https://developers.figma.com/docs/figma-mcp-server/tools-and-prompts/
- 自定义规则指引：https://developers.figma.com/docs/figma-mcp-server/add-custom-rules/
