elegant-design

「優雅設計」(Elegant Design) 技能為創建高效能、易於使用且精緻的網頁介面，提供了一套結構化且基於哲學指導的框架。此技能專為在 React 和 Next.js 生態系統中工作的軟體工程師和 UI 開發者所設計。它強調一種刻意的設計流程，在技術效能與使用者體驗之間取得平衡，確保從版面模式到複雜互動組件的每一個介面元素都具有明確的目的。

• 提供利用現代設計系統（包括 shadcn/ui、daisyUI 和 HeroUI）的專家指引，以進行快速且一致的組件開發。

• 針對複雜 UI 需求提供專門的實作模式，例如終端機模擬器、程式碼語法標示、即時串流內容以及 Markdown 渲染的聊天介面。

• 建立符合無障礙標準 (WCAG) 與響應式設計的強大工作流程，確保介面在各種裝置和螢幕閱讀器上皆能順暢運作。

• 整合 OODA 循環規劃範本（觀察、定位、決定、行動），在撰寫程式碼前繪製複雜的使用者旅程與狀態轉換。

• 涵蓋效能優化的最佳實踐，包括懶加載 (lazy loading)、程式碼分割，以及達成 Core Web Vitals 目標。

• 包含視覺基礎指導，涵蓋字體排版 (Geist, JetBrains Mono)、語意化顏色標記，以及 8px 間距系統以維持視覺一致性。

• 使用者在製作新技術介面原型或升級現有開發者工具時應啟用此技能，以確保達到專業水準。

• 預期的輸入包括專案需求、組件規格或無障礙目標；預期的輸出包括結構化的 React/Next.js 程式碼、組件架構計畫以及流程圖 (Graphviz/DOT)。

• 限制條件包括強烈偏好原子化設計原則（從原子到頁面）以及行動優先的響應式方法論。

• 透過直接引用排版、版面設計及專門互動模組（如差異比較檢視器與日誌控制台）的基礎指南，與現有的開發工作流程緊密結合。