Castor6/tactus

設計風格技能

目的

此技能協助 Claude Code 建立美觀、風格獨特的前端介面，方法是自動從 prompts/ 目錄中檢索設計系統提示。此技能讓 Claude 能夠打造具有特定設計美學（如新粗獷主義、現代暗色、奢華、賽博龐克等）的介面，而非產出常見的通用 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：理解使用者意圖

當使用者要求進行前端工作時，首先判斷：

1. 技術棧 - 他們使用什麼框架？（React、Vue、Next.js 等）
2. 設計偏好 - 他們是否提及特定風格或美學？
3. 元件範圍 - 單一元件、完整頁面還是整個應用程式？

步驟 2：選擇設計風格

如果使用者指定了風格：

• 將他們的要求與可用風格進行匹配（例如「brutalist」→ Neo-brutalism）
• 不區分大小寫（brutalism、Brutalism、BRUTALISM 都適用）

如果使用者未指定：

• 對於現代、專業的專案 → ModernDark 或 Professional
• 對於創意、大膽的專案 → Neo-brutalism 或 BoldTypography
• 對於極簡、乾淨的專案 → FlatDesign 或 Swiss
• 對於企業/商業專案 → Enterprise

若不確定哪種風格符合他們的需求，請詢問使用者。

步驟 3：檢索設計系統

使用讀取工具載入適當的提示檔案：

Read: prompts/<StyleName>.md

例如：

• prompts/Neo-brutalism.md
• prompts/ModernDark.md
• prompts/Cyberpunk.md

步驟 4：套用設計系統

載入設計系統提示後：

1. 內化設計理念 - 理解核心原則、視覺特徵和差異化因素
2. 提取設計 token - 色彩、字體排印、間距、陰影、邊框
3. 遵循元件模式 - 使用指定的按鈕樣式、卡片佈局等
4. 套用「大膽因子」 - 實作使設計真實的標誌性元素
5. 避免反模式 - 不要使用破壞美學的技巧

步驟 5：在脈絡中進行建置

撰寫程式碼前：

• 識別使用者現有的技術棧
• 理解他們的元件架構
• 注意任何限制（CSS 框架、設計函式庫等）

撰寫程式碼時：

• 符合他們現有的模式和慣例
• 將設計 token 集中於 CSS 變數或設定檔中
• 建立可重複使用、可組合的元件
• 簡要說明你的架構選擇

品質標準：

• 保留或改善可及性
• 確保跨裝置的響應式設計
• 做出經過深思熟慮、富有創意的設計選擇（而非通用的樣板程式）
• 讓程式碼庫比你發現時更乾淨

範例

範例 1：使用者指定風格

使用者：「為我的 SaaS 產品建立一個帶有新粗獷主義設計的登陸頁面」

技能動作：

1. 檢測關鍵字：「登陸頁面」、「新粗獷主義」
2. 將「新粗獷主義」對應至 prompts/Neo-brutalism.md
3. 讀取設計系統提示
4. 詢問澄清問題：「您使用什麼技術棧？React、Vue 還是純 HTML/CSS？」
5. 依照新粗獷主義原則（粗邊框、硬陰影、大膽色彩等）建置登陸頁面

範例 2：使用者未指定風格

使用者：「幫我建立一個作品集網站」

技能動作：

1. 檢測：「作品集網站」（創意背景）
2. 建議選項：「您想要特定的設計風格嗎？我可以將其建立為現代暗色（精緻）、新粗獷主義（大膽且創意）或瑞士風格（極簡且乾淨）。」
3. 使用者回覆偏好
4. 載入適當的提示並開始建置

範例 3：元件要求

使用者：「在我的 Next.js 應用程式中新增一個聯絡表單。讓它看起來現代又專業。」

技能動作：

1. 關鍵字：「Next.js」、「現代又專業」
2. 選擇：ModernDark.md（現代）或 Professional.md（專業）
3. 讀取設計系統
4. 建立符合其 Next.js 模式的表單元件
5. 使用提示中的設計 token（色彩、字體排印、陰影等）

快速參考指令

實作時，你可以快速參考特定段落：

色彩：

Grep: pattern "Token|Value|Usage" path "prompts/<Style>.md"

字體排印：

Grep: pattern "Font|Weight|Size" path "prompts/<Style>.md"

元件模式：

Grep: pattern "Button|Card|Input" path "prompts/<Style>.md"

最佳成效秘訣

1. 讀取完整提示 - 不要只是瀏覽。設計理念和差異化段落至關重要。
2. 實作標誌性元素 - 每個設計系統都有一個「大膽因子」段落。這些元素是讓它真實的關鍵。
3. 避免反模式 - 每個提示都列出了「不該做」的事。嚴格遵守這些規則。
4. 提出問題 - 如果使用者的需求不明確，在開始建置前先詢問。
5. 符合既有程式碼 - 不要與他們的技術棧對抗。將設計系統整合到他們現有的模式中。

備註

• 所有設計系統提示都遵循相同的結構：<role> 和 <design-system> 段落
• 提示包含詳細的色彩調色盤、字體排印比例、元件模式和實作範例
• 每種風格都已準備好應用於生產環境，並經過精心打造以確保視覺獨特性
• 這些提示旨在防止產出通用、看起來像 AI 生成的介面

未來增強功能

此技能的潛在改進方向：

• 風格組合支援（例如「賽博龐克 + 極簡」）
• 自訂風格建立流程
• 將設計 token 提取為 JSON/CSS
• 從提示產生元件函式庫