前言¶
用 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/
