plugin87/ux-ui-agent-skills

解決的問題

本專案提供一個全面的知識與指令層，可將AI代理（特別是Claude）轉化為高階UX/UI設計架構師。它解決了AI生成UI存在不一致、不可存取或『粗糙』的問題，透過提供結構化的設計標籤、無障礙標準（WCAG 2.2）以及138個設計系統庫，確保在任何前端框架中都能產生生產就緒、基於標籤的輸出。

如何運作

此工具包作為純指令與知識層，透過 CLAUDE.md 檔案與Claude Code或Claude驅動的IDE整合。它使用 請求路由器 按需載入特定規則與知識。該系統圍繞三個主要驅動構建：

1. 知識層：包含大量設計標籤（DTCG格式）、遵循原子設計的元件規格，以及包含美學原型的「品味層」。
2. 可執行技能：17個可呼叫的 /skills（例如 /brandkit、/a11y-audit、/design-code），用於協調複雜的設計流程。
3. 目標關卡：一套Python與Node.js腳本，可程式化驗證標籤有效性、亮暗模式下的WCAG對比度比率以及無障礙要求，以確保輸出正確性。

適用對象

需要專業級設計系統、嚴格無障礙合規性以及與框架無關實作的前端開發者、產品設計師及團隊，他們使用AI代理生成UI程式碼。

主要亮點

• 框架無關：使用適配器協定可支援任何技術堆疊，包括React、Next.js、SwiftUI、Vue、Svelte與Flutter。
• 無障礙優先：內建WCAG 2.2 AA/AAA審核功能與自動對比度驗證腳本。
• 設計標籤架構：採用DTCG標準實作三層階層結構（Primitive → Semantic → Component）。
• 豐富的資源庫：包含138個品牌級設計系統以提供視覺方向，以及50個詳細的元件規格。
• 對抗性審查：配備由 design-critic 代理驅動的 /critique 技能，可渲染作品並基於高階設計證據提出拒絕理由。