ui-ux-audit-skill 是做什麼的？
使用 AI 審查網頁和行動 UI 程式碼，在部署前偵測版面錯誤、回應式設計問題及設計系統偏差。
概述
這個技能能夠自動化 UI/UX 程式碼審查流程，透過分析原始碼來找出常見的 UI 問題，例如版面錯位、元素重疊、斷點錯誤、色彩不一致以及間距破損等。它支援多種框架，包括 React、Vue、Angular、Flutter 和 SwiftUI，並且可以整合到你的開發工作流程中。
使用方式
在支援的 AI 編碼工具（例如 Claude Code、Cursor 或 Codex）中，你可以呼叫此技能來分析指定的檔案或目錄。它會產生一份詳細的審查報告，列出問題的檔案、行號、嚴重程度以及建議的修正方式。
範例
# 審查整個專案
ui-ux-audit ./src
# 指定單一檔案
ui-ux-audit ./src/components/Button.tsx
支援的平台
- Claude Code：作為自訂技能載入
- Cursor：透過 rules 整合
- Codex：作為外掛程式執行
設定
你可以透過環境變數或組態檔來調整技能的行為：
| 變數名稱 | 說明 | 預設值 |
|---|---|---|
UI_AUDIT_STRICT | 啟用嚴格模式，偵測所有小問題 | false |
UI_AUDIT_DESIGN_TOKENS | 設計 token 檔案的路徑 | ./design-tokens.json |
UI_AUDIT_BREAKPOINTS | 回應式斷點設定（以逗號分隔） | 576,768,992,1200 |
如何運作
- 技能會掃描目標檔案，解析其結構與樣式。
- 比對設計系統規則（如果已設定）找出偏差。
- 模擬不同螢幕尺寸，測試回應式行為。
- 產生可讀的報告，包含問題描述與修復建議。
貢獻
歡迎提交問題與合併請求！請先閱讀 CONTRIBUTING.md 以了解貢獻指南。
授權
本專案採用 MIT 授權條款。