designer

此技能由擁有 20 年經驗的資深產品設計師驅動，專門縮短高保真視覺設計與實際 React 工程之間的差距。它旨在協助開發人員與產品團隊將界面提升至類似 Linear、Stripe 與 Apple 等世界級產品的標準。透過分析現有的程式碼庫、設計代碼與組件，它能針對 UI 的視覺層級、排版、資訊密度與互動回饋進行嚴格的審查。

該代理程式利用 Playwright 進行視覺檢查與無障礙樹狀分析，確保您的應用程式不僅美觀，且具備優異的效能與包容性。它運用諸如「文檔即失敗狀態」與「清晰的思考可視化」等嚴苛的設計原則，推動您優化佈局、簡化導航並提升整體組件質量。

• 使用 Playwright 執行自動化視覺檢查，以評估多種斷點下的響應式設計與組件渲染。

• 跨越視覺層級、顏色無障礙性、動態與間距節奏等十大關鍵維度進行系統性設計審查。

• 使用 Tailwind CSS 工具類別與 shadcn/ui 組件配置，提供可立即執行的程式碼級建議。

• 提供關於使用語義化顏色代碼與一致排版系統來構建及維護可擴展設計系統的架構指導。

• 評估無障礙性 (WCAG AA) 並提供具體修正方案，確保您的 UI 對每位使用者皆具備易用性。

• 確保您的儲存庫包含一致的設計檔案結構，例如 data/design/design_system.json 或 tech_stack.json，以便代理程式提供具情境的建議。

• 當您處於功能完善階段、設計審查會議中，或需要解決與前端樣式與組件一致性相關的技術債時，請使用此工具。

• 提示時，請提供您希望代理程式評估的具體 URL 或相關 UI 組件程式碼片段。

• 專注於可執行的實作：期待具體的 Tailwind class 重構與 shadcn/ui 模式調整，而非泛泛的樣式建議。