Menú
建立與維護設計系統、Design Tokens、元件規範與文件結構,提升產品一致性與跨團隊協作效率。當任務涉及元件庫、樣式規範、token、文件化、系統治理或跨產品一致性時使用。
Instalar con Codex o Claude Copia este prompt, pégalo en Codex, Claude u otro asistente, y deja que revise la página de la skill y la instale por ti.
Basado en la clasificación ocupacional SOC
收斂洞察、界定問題、優先順序與成功指標，並確認限制條件（含可及性/a11y）。
蒐集使用者洞察、執行訪談並萃取人物誌與需求背景，建立對目標族群的同理心。
發散解法、繪製線框並探索視覺方向；內含 20 種 UI 風格參考以快速收斂。
將優選解法轉成可操作原型，設定互動、轉場與狀態，為測試與示範做準備。
評估與改善介面、內容與互動的無障礙品質,使產品更符合 WCAG 與包容性設計原則。當任務涉及對比度、鍵盤操作、語意化、表單可用性、螢幕閱讀器支援或 a11y 檢查時使用。
規劃資訊架構、內容層級與導航結構,讓使用者更容易理解與找到資訊。當任務涉及網站地圖、內容分類、導航重組、卡片分類、tree testing 或大型內容結構設計時使用。
| name | design-system |
| description | 建立與維護設計系統、Design Tokens、元件規範與文件結構,提升產品一致性與跨團隊協作效率。當任務涉及元件庫、樣式規範、token、文件化、系統治理或跨產品一致性時使用。 |
| license | MIT |
| metadata | {"author":"goodux","version":"1.0.0","category":"design-systems","language":"zh-TW"} |
建立可重複使用的設計規則、tokens、元件規範與治理方式,降低不一致與重複建設成本。
accessibility-design: 把無障礙要求納入元件與規範基準wireframing: 用一致元件快速組裝頁面骨架prototyping: 驗證元件在真實流程中的互動完整性information-architecture: 若系統涵蓋大型後台,同步整理頁面與模組結構# Design System 核心規格
Tokens:
- primary: #2563EB
- neutral-900: #111827
- spacing-md: 16px
- radius-md: 8px
核心元件:
- Button: primary / secondary / danger
- Input: default / focus / error / disabled
- Card: default / elevated / outlined
治理:
- 新增元件需經設計與前端共同審查
- 變更需附版本記錄與遷移說明
本技能提供完整的設計系統範例庫，請參考 examples.yaml：
使用方式：參考 token 定義建立設計變數，使用元件範例快速建立元件庫。
TEMPLATE.md，確認欄位結構、最小必要欄位、品質標準與驗證方式。examples.yaml，從既有 token、元件規格、命名規範與治理流程中選取最適合的內容。TEMPLATE.md 的格式與命名規則，避免建立重複 token、重疊元件或不一致的治理定義。TEMPLATE.md 的格式要求，其次再引用 examples.yaml 的內容細節。