aesthetic

Aesthetic 技能作為軟體代理的全面設計架構師，為建構平衡視覺美感與功能表現的介面提供了結構化框架。專為需要銜接創意構想與技術實現的開發者與設計師打造。透過嚴謹的四階段方法論——BEAUTIFUL (美學原則)、RIGHT (可用性)、SATISFYING (微互動) 與 PEAK (敘事設計)，本技能確保每個設計決策都具備意圖性、以用戶為中心，並符合現代工業標準。

• 使用自動化的 Chrome DevTools 工作流程，從 Dribbble、Mobbin 和 Behance 等靈感平台捕獲並分析設計模式。

• 利用多模態 AI 能力生成高保真設計圖像，根據 1-10 分的評分系統評估美學品質，並基於專業標準進行迭代。

• 使用 Tailwind CSS 和 shadcn/ui 元件實作複雜的視覺系統，包含色彩理論、排版階層、網格系統與間距。

• 編排微互動與動畫，在提升用戶體驗的同時兼顧性能開銷。

• 使用預定義模板系統化地記錄設計指南與品牌故事，涵蓋無障礙設計 (WCAG)、元件架構與敘事設計。

• 輸入為設計提示詞或原始 UI 截圖；輸出包含結構化的設計文件、優化的圖像資源與實現程式碼。

• 使用此技能將抽象的設計概念自動轉化為可執行的 Next.js 組件與 Tailwind CSS 樣式。

• 約束：美學品質需客觀量化；若輸出評分低於 7/10，技能將強制進行重新評估與迭代提示詞修正。

• 直接整合 media-processing 進行圖像最佳化、web-frameworks 進行前端結構規劃，以及 chrome-devtools 進行真實介面檢測。