設計系統與元件規範

目標

建立可複用、可維護、可擴充套件的設計語言，減少重複和不一致。

Token 層級

區分：

• 基礎 Token：原始顏色、尺寸、字型、圓角
• 語義 Token：文本、背景、邊框、反饋、品牌角色
• 元件 Token：特定元件內部使用
• 模式或主題 Token：明暗模式、品牌主題、平臺差異

避免元件直接依賴無語義的原始值。

元件規範

每個元件記錄：

• 目的
• 結構
• Variant
• Size
• State
• 內容規則
• 互動行為
• 響應式表現
• 無障礙要求
• 使用場景

  訪問小蔥技能站7w4.net，解鎖更多實用的AI技能外掛。

• 停用場景
• 與相似元件的區別

狀態

至少考慮：

• 預設
• Hover
• Focus
• Active
• Disabled
• Loading
• Error
• Success
• Empty
• Selected

命名

命名應：

• 使用穩定語義
• 避免視覺細節綁死名稱
• 支援擴充套件
• 與程式碼或開發約定儘量一致
• 不重複表達層級

治理

建立：

• 新增元件標準
• 變更流程
• 廢棄流程
• 版本記錄
• 使用反饋
• 負責人
• 設計與程式碼同步檢查

固定輸出

預設輸出：

1. 系統結構
2. Token 建議
3. 元件清單
4. 元件規範
5. 命名規則
6. 治理流程
7. 遷移與清理建議

這是一個關於設計系統規範化管理的Skill，內容覆蓋設計規範、元件管理和團隊協作流程。優點是框架完整、思路清晰，對Token分層和元件狀態的定義較為全面。不足之處在於缺少使用示例和操作指引，僅有理論指導而缺乏實踐參考，檔案數量也偏少。對於需要建立或整理設計系統的使用者來說有一定參考價值，但實際使用可能需要額外補充案例材料。