figma-create-design-system-rules

figma-create-design-system-rules 技能總覽

figma-create-design-system-rules 的用途

figma-create-design-system-rules 技能會產出專案專屬的設計系統規則，協助程式碼代理以一致的方式實作 Figma 設計稿。這項技能最適合那些已經有既有 codebase、元件模式與命名慣例，並希望 AI 自動遵循的團隊。

誰適合使用

如果你是在把 Figma 轉成可上線的 production code，而且希望少一點一次性的提示詞，figma-create-design-system-rules skill 就很適合你。它特別適用於設計系統、共享 UI library，以及需要在多個畫面套用同一套實作規則的產品團隊。

為什麼它重要

這項技能不是每次都要你重新交代 AI 代理怎麼做，而是幫你把 repo 裡那些「默契知識」整理成可長期沿用的指引。這樣能提升版面基礎元素、元件重用、token 使用、檔案結構，以及 hardcoding 邊界的一致性。

主要限制

這不是一包通用的 Figma prompt。figma-create-design-system-rules 技能最適合搭配 Figma MCP server 連線，以及已經有清楚慣例、值得被正式化的 codebase。

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

安裝並連上正確的上下文

先從技能目錄執行 figma-create-design-system-rules install 流程，然後在開始產生規則之前，確認你的 Figma MCP server 已經連線。沒有這個連線，技能就無法檢視它原本要轉成 repository rules 的設計上下文。

從重要的 repo 檔案開始看

先讀 SKILL.md，再依照你的工具查看對應的 agent 規則目標：CLAUDE.md、AGENTS.md，或 .cursor/rules/figma-design-system-rules.mdc。如果你想先理解這項技能的結構，再把它套用到自己的 stack，請先完整讀過 SKILL.md。

給它明確的實作目標

figma-create-design-system-rules usage 這個用法，在你的 prompt 直接點明 app、介面範圍與限制條件時，效果最好。例如，與其只說「幫我做設計系統規則」，不如說「針對一個使用 Tailwind 與共用 Button/Card 元件的 Next.js app，產生 marketing pages 的規則」。目標越明確，輸出就越不會流於空泛。

用符合你 repo 的工作流程

先蒐集你真實的慣例：元件名稱、資料夾配置、token 來源與樣式規則。接著產生規則，拿來對照 codebase，再刪掉任何與既有架構衝突的內容。這項技能最有價值的地方，在於它能捕捉現行做法，而不是憑空創造新政策。

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

這只適用於設計系統嗎？

不是。figma-create-design-system-rules 技能適用於任何你希望 Figma 實作能遵守專案慣例的 codebase。它在設計系統上最強，但同樣能幫助需要可重複 UI 決策的產品團隊。

我需要非常成熟的 codebase 嗎？

不需要，但你至少要有足夠清楚的結構，才能定義出真正可執行的規則。如果你的 repository 還沒有穩定的元件模式，這項技能仍然有幫助，只是最後產出的規則會比較薄、價值也會比較有限。

這和一般 prompt 有什麼不同？

一般 prompt 只處理單一任務。figma-create-design-system-rules skill 的目標是產出可重複使用的指令，降低未來反覆下提示詞的成本，並減少多個設計轉程式碼任務之間的漂移。

對初學者友善嗎？

可以，只要你能辨識出專案裡主要的 UI 慣例就行。初學者最好的做法，是先從小範圍開始，例如一個產品區塊或一個元件家族，而不是一開始就想把整個 app 一次定義完。

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

提供真實限制，不要只給偏好

最好的輸出來自這類輸入：only 使用既有的 ui/ primitives、不要硬編碼 spacing 數值、所有按鈕都必須對應到 Button variants。像「保持一致」這種模糊目標，通常只會產生太鬆的規則，無法真正引導代理。

明確界定可重用的邊界

告訴技能哪些東西必須重用、哪些東西可以新建。舉例來說，哪些元件是 canonical、是否允許新增 variants、以及什麼情況下可以接受原始 CSS 或 layout primitives。這能減少規則衝突與實作來回修正。

檢查規則的可執行性

產出後，確認每條規則是否具體、可測、而且真的和 Figma-to-code 工作相關。刪掉代理無法可靠遵循的理想化敘述，保留那些能對應到可觀察程式碼模式的規則。

在第一次實作後再迭代

用第一次 Figma-to-code 的結果來修正規則。如果代理還是會 hardcode 數值、漏用共享元件，或把檔案放錯位置，就把這些失敗點回填到 figma-create-design-system-rules skill 的輸入裡，讓下一版更精準。