SuperDesign

• 您需要一個 AI 代理來生成外觀精緻現代、而非模板化的 UI 程式碼（HTML/CSS/Tailwind）。
• 您正在構建登陸頁面、儀表板或元件密集型介面，並希望自動遵循結構化的設計流程。
• 您希望在亮色/暗色模式下保持一致的主題風格，並使用 oklch() 等現代色彩技術。
• 您需要開箱即用的無障礙、行動裝置優先的響應式排版，以及正確的語義化 HTML。

• 您正在原生行動環境（iOS/Android）中開發——這些指南以網頁為主。
• 您的專案使用嚴格的設計系統（例如，嚴格遵循 Material Design），與此處提供的主觀主題模式相衝突。

每個 UI 都依照版面設計、主題設計、動畫設計與實作的順序逐步進行。這能避免在結構與美學尚未確立前便直接跳入程式碼，從而產出更加一致且完整的成果。

此技能明確避免過時的通用調色盤（如 Bootstrap 藍），並推廣使用 oklch() 來定義感知均勻的現代色彩。內建多種預製主題樣式，包含深色模式（Vercel/Linear 風格）、新粗野主義與玻璃擬態，並附有可直接使用的 CSS 變數。

提供一份精心挑選的 Google Fonts 清單，涵蓋無襯線、等寬、襯線及展示型等多種字型類別，並搭配 Lucide 圖示與 Flowbite 元件的 CDN 即用整合方案——讓您在排版選擇上不再需要反覆摸索。

一套簡潔的標記系統，用於規劃微互動（例如 button: 150ms [S1→0.95→1] press），可確保動畫設計具有明確意圖。系統中定義了進場動畫、懸停狀態、按鈕按壓及頁面轉場的建議時序範圍。

指導方針強制執行語意化 HTML、正確的標題層級、ARIA 標籤、最低 4.5:1 色彩對比度，以及鍵盤導覽支援，確保輸出結果在無需額外提示的情況下，符合基本無障礙標準。

Cards、Buttons、Forms 和 Navigation 的最佳實踐已內建其中，涵蓋陰影深度、觸控目標尺寸、焦點狀態、載入／停用狀態，以及固定標題行為。

請您的代理人建立一個 SaaS 登陸頁面，SuperDesign 會確保其遵循結構化版面配置（頁首 → 主視覺區 → 功能介紹 → 頁尾），挑選現代字型搭配組合，套用一致的色彩主題，並生成以行動裝置優先的響應式 CSS — 全程無需手動設計指引。

在為分析或管理儀表板製作原型時，此技能會引導代理先繪製版面的線框圖，套用一致的間距與細緻的卡片陰影，並加入懸停／動畫狀態，最終產出一個看起來已達生產水準的原型。

使用此技能來生成一組具有一致性的按鈕、表單欄位和導覽元件，這些元件共用相同的設計令牌（用於顏色、圓角、陰影的 CSS 變數），並通過無障礙accessibility檢查。

在建立必須同時支援淺色與深色模式的介面時，SuperDesign 的 CSS 變數方法與 oklch() 色彩規範能幫助代理程式從一開始就建構出具備主題感知能力的系統，而無需事後再補充深色模式的支援。