design

design 技能提供了一套結構化且協作性高的工作流程，旨在協助開發者創造獨特且非通用的 UI 設計。此技能適合希望擺脫生成式 AI 常見的通用布局、紫色漸層與樣板化設計的工程師與產品開發者。透過強調 Tailwind v4 標記與 utility-first 的實作方式，它能有效縮短視覺設計與生產環境程式碼之間的鴻溝。該技能支援多種模式：針對頁面與產品介面的完整設計模式（包含研究、線框圖與設計文件），以及針對重構、拆解元件與清理 UI 程式碼的優化模式。

• 完整的設計工作流程，包含視覺方向制定、線框圖繪製與 Tailwind 實作規格書。

• 內建參考資料庫，涵蓋 Refactoring UI 原則、UX 法則（如 Fitts's Law, Hick's Law）、字體排版與介面層級規範。

• 優化模式用於在實作後組織、去除重複與標準化元件程式碼。

• 整合 ui-builder、figma-builder 與 designer 子代理工具，用於建構與審核 UI。

• 嚴格遵守 Tailwind v4 主題標記、間距與響應式設計模式。

• 採用協作式互動模型，禁止透過自動產生代理進行設計決策，確保使用者在創意過程中擁有主導權。

• 在開始工作流程前，務必宣告所選的設計模式（完整模式或優化模式）。

• 在提議新視覺識別前，先檢查 docs/brand-system.md 或 docs/design-context.md 是否已有現存的品牌準則。

• 遵守 Tailwind-first 約束：當 Tailwind 工具類別足夠時，切勿建議使用自定義 CSS 或框架無關的樣式方案。

• 遵循指定的設計調研階段，包含閱讀 typography-opentype.md 與 ascii-ui-patterns.md 等核心參考文件。

• 在處理「設計 UI」、「建立布局」、「繪製線框圖」、「清理程式碼」或「元件化」等任務時使用此技能。

• 禁止使用 EnterPlanMode 等禁用工具；請直接執行工作流程中規定的設計階段。