ui-design-review

UI Design Review 技能是為開發者、設計師與 QA 工程師打造的專業工具包，旨在利用 Gemini 的多模態視覺能力進行自動化介面分析。透過與 Claudish 及 Gemini API 整合，此技能可將靜態視覺資產（如截圖、線框圖與設計稿）轉化為結構化且具體的可操作建議。它適用於需要高度保真、設計系統一致性以及符合 WCAG 2.1 AA 等無障礙標準的專業工作流程。

本技能透過提供可重複的提示詞模式，簡化了從視覺設計到程式實作的過程，專注於核心可用性原則，包含視覺階層、組件一致性、間距精確度與色彩保真度。它支援多種輸入方式，包括直接檔案路徑、Base64 編碼內聯影像與遠端 URL 引用，方便整合至現有的 CI/CD 管線或本地開發環境。

• 自動化 UI 可用性審查：評估視覺階層、系統狀態回饋與互動式元件的可操作性。

• WCAG 2.1 AA 無障礙稽核：針對對比度、點擊目標大小與焦點狀態進行自動化掃描。

• 設計系統驗證：將實作截圖與設計系統的 Token、排版規則與陰影層級進行精確比對。

• 比較性設計分析：針對 Figma 導出圖與實際 UI 組件進行保真度檢查，以識別佈局偏差。

• 彈性路由機制：內建支援 Gemini 直連（透過 GEMINI_API_KEY）與 OpenRouter 路由邏輯。

• 使用者需提供有效的 API 金鑰（Gemini 或 OpenRouter）才能調用底層的多模態模型。

• 建議透過 OpenRouter 路由時使用 or/ 前綴，以避免與 Claudish 的自動路由邏輯發生命名衝突。

• 輸出格式為 Markdown 表格或分類列表，適合直接貼入專案管理工具或程式碼審查意見中。

• 建議結合清晰的高解析度原始影像與特定的設計文件或 Token 定義，以獲得最佳分析結果。

• 針對 Claudish CLI 優化，支援批次處理與自動化 auto-approve 工作流程。