frontend-design-review

frontend-design-review 技能使 AI 編碼代理能夠評估並製作在技術卓越性與高保真美學之間取得平衡的 UI 組件。它透過兩種主要模式運作：設計審查與創意前端設計。在設計審查模式中，代理會根據既定的設計系統對程式碼進行系統性審計，驗證標記使用、佈局規範及變體一致性，確保實作與 Figma 設計交付相符。它應用三大核心支柱：無縫洞察到行動（評估任務流程效率）、品質工藝（驗證無障礙 WCAG 2.1、美學凝聚力及程式碼品質），以及可信賴的建構（確保透明度與錯誤處理）。創意前端設計模式使代理能夠透過定義清晰的美學方向（如極簡主義、粗野主義或編輯風格），並使用 CSS 變數、精緻排版及有意識的動態效果來執行，從而生成獨特且非通用的介面，超越樣板程式碼。

• 執行嚴格的無障礙審計 (WCAG 2.1 A/AA) 並識別設計系統偏差。

• 自動化處理 PR 的 UI 程式碼審查、組件庫合規性及響應式設計穩定性。

• 根據設計規範生成生產級前端程式碼，確保語義化 HTML 和 CSS/Tailwind 架構。

• 應用品質支柱，根據用戶任務完成度和操作階層優先處理 UI 改進。

• 協作定義美學方向，防止生成通用的「AI 垃圾」並維持品牌特定的視覺完整性。

• 使用此技能進行設計系統合規性檢查、UI 程式碼審查及構建獨特的前端功能。

• 為獲取最佳準確度，請提供 Figma 設計、Storybook 文件或現有標記檔案的連結。

• 非常適合軟體工程師、UX 工程師及管理複雜組件庫的前端開發人員使用。

• 確保輸入內容包含特定的框架約束（如 React, Vue, Svelte），以接收符合框架的程式碼生成。

• 請勿將此技能用於後端 API 邏輯、基礎架構/DevOps 工作流程或資料庫架構管理；請嚴格限制在前端呈現與客戶端邏輯範圍內。