設計風格技能
目的
此技能幫助 Claude Code 透過自動從 prompts/ 目錄中擷取設計系統提示，來建立美觀、獨特的前端介面。此技能使 Claude 能夠建構具有特定設計美學（如 Neo-brutalism、Modern Dark、Luxury、Cyberpunk 等）的介面，而非產出單調的通用 UI。
使用時機
此技能會在以下情況自動觸發：
- 使用者要求建立網頁、登陸頁面或網頁應用程式
- 使用者要求具有特定設計風格的 UI 元件
- 使用者提及前端、React、Vue 或網頁開發
- 使用者要求特定的美學風格（例如：「讓它看起來現代又暗色」或「使用粗獷風格」）
可用的設計風格
以下設計系統位於 prompts/ 目錄中：
- Academia - 學術、經典、精緻
- ArtDeco - 奢華的 1920 年代魅力
- Bauhaus - 功能主義、幾何極簡
- BoldTypography - 字型驅動設計
- Botanical - 自然啟發、有機
- Claymorphism - 柔和、黏土般的 3D 元素
- Cyberpunk - 未來感、霓虹、高科技
- Enterprise - 專業、企業級、可擴展
- FlatDesign - 乾淨、極簡、2D
- Fluent2 - Microsoft Fluent 2 設計系統
- HumanistLiterary - 溫暖、文學、對話式（Claude 美學）
- Industrial - 原始、機械、實用
- Kinetic - 動態、以動作為中心
- Luxury - 高端、優雅、精緻
- Material - Google Material Design
- Maximalism - 大膽、表現力、豐富
- MinimalDrak - 極簡暗色主題（注意：原始名稱有錯字）
- ModernDark - 具有深度的當代暗色 UI
- Monochrome - 黑白、高對比
- Neo-brutalism - 大膽、原始、色彩豐富的粗獷主義
- Neumorphism - 柔和 UI、擬物化
- Newsprint - 報紙啟發
- Organic - 自然、流暢的形式
- PlayfulGeometric - 有趣的幾何形狀
- Professional - 乾淨、以商業為導向
- Retro - 復古、懷舊
- Saas - 現代 SaaS 美學
- Sketch - 手繪、藝術
- Swiss - 國際字型排版風格
- TerminalCLI - 命令列介面美學
- Vaporwave - 80/90 年代美學、懷舊
- Web3 - 去中心化、加密貨幣啟發
運作方式
步驟 1：理解使用者意圖
當使用者要求前端工作時，首先確定：
- 技術棧 - 他們使用哪個框架？（React、Vue、Next.js 等）
- 設計偏好 - 他們是否提到特定風格或美學？
- 元件範圍 - 單一元件、完整頁面或整個應用程式？
步驟 2：選擇設計風格
如果使用者指定了風格：
- 將他們的要求與可用風格匹配（例如，「brutalist」→ Neo-brutalism）
- 不區分大小寫的匹配（brutalism、Brutalism、BRUTALISM 都可以）
如果使用者未指定：
- 對於現代、專業的專案 → ModernDark 或 Professional
- 對於創意、大膽的專案 → Neo-brutalism 或 BoldTypography
- 對於極簡、乾淨的專案 → FlatDesign 或 Swiss
- 對於企業級/公司專案 → Enterprise
如果您不確定哪種風格最符合他們的需求，請詢問使用者。
步驟 3：擷取設計系統
使用「讀取」工具載入適當的提示檔案：
讀取: prompts/<StyleName>.md
例如：
prompts/Neo-brutalism.mdprompts/ModernDark.mdprompts/Cyberpunk.md
步驟 4：套用設計系統
載入設計系統提示後：
- 內化設計理念 - 理解核心原則、視覺特徵和差異化因素
- 提取設計權杖 - 色彩、字型、間距、陰影、邊框
- 遵循元件模式 - 使用指定的按鈕樣式、卡片佈局等
- 套用「大膽要素」 - 實作使設計真實的簽名元素
- 避免反模式 - 不要使用破壞美學的技巧
步驟 5：在上下文中建構
在撰寫程式碼前：
- 識別使用者現有的技術棧
- 理解他們的元件架構
- 注意任何限制（CSS 框架、設計函式庫等）
撰寫程式碼時：
- 匹配他們現有的模式和慣例
- 將設計權杖集中在 CSS 變數或配置檔案中
- 建立可重複使用、可組合的元件
- 簡要說明您的架構選擇
品質標準：
- 維護或改善可存取性
- 確保跨裝置的響應式設計
- 做出深思熟慮、有創意的設計選擇（而非通用模板）
- 讓程式碼庫比您發現時更乾淨
範例
範例 1：使用者指定風格
使用者：「為我的 SaaS 產品建立一個帶有 neo-brutalist 設計的登陸頁面」
技能動作：
- 檢測關鍵字：「登陸頁面」、「neo-brutalist」
- 映射「neo-brutalist」→
prompts/Neo-brutalism.md - 讀取設計系統提示
- 詢問澄清問題：「您使用什麼技術棧？React、Vue 還是純 HTML/CSS？」
- 遵循 Neo-brutalism 原則（粗邊框、硬陰影、大膽色彩等）建立登陸頁面
範例 2：使用者未指定風格
使用者：「幫我建立一個作品集網站」
技能動作：
- 檢測：「作品集網站」（創意內容）
- 建議選項：「您想要特定的設計風格嗎？我可以製作 Modern Dark（精緻）、Neo-brutalism（大膽且創意）或 Swiss（極簡且乾淨）。」
- 使用者回覆偏好
- 載入適當的提示並建構
範例 3：元件請求
使用者：「在我的 Next.js 應用程式中新增一個聯絡表單。讓它看起來現代且專業。」
技能動作：
- 關鍵字：「Next.js」、「現代且專業」
- 選擇：
ModernDark.md（現代）或Professional.md（專業） - 讀取設計系統
- 建立符合他們 Next.js 模式的表單元件
- 使用提示中的設計權杖（色彩、字型、陰影等）
快速參考指令
實作時，您可以快速參考特定章節：
色彩：
Grep: pattern