設計
統一的設計技能：品牌、代碼、UI、標誌、CIP、簡報、橫幅、社交圖片、圖示。
使用時機
- 品牌識別、語調、資產
- 設計系統代碼與規格
- 使用 shadcn/ui + Tailwind 進行 UI 樣式設定
- 標誌設計與 AI 生成
- 企業識別計劃（CIP）交付物
- 簡報與募資簡報
- 社交媒體、廣告、網頁、印刷橫幅設計
- Instagram、Facebook、LinkedIn、Twitter、Pinterest、TikTok 社交圖片
子技能路由
| 任務 | 子技能 | 詳細資訊 |
|---|---|---|
| 品牌識別、語調、資產 | brand | 外部技能 |
| 代碼、規格、CSS 變數 | design-system | 外部技能 |
| shadcn/ui、Tailwind、程式碼 | ui-styling | 外部技能 |
| 標誌創作、AI 生成 | 標誌 (內建) | references/logo-design.md |
| CIP 模型、交付物 | CIP (內建) | references/cip-design.md |
| 簡報、募資簡報 | 簡報 (內建) | references/slides.md |
| 橫幅、封面、頁首 | 橫幅 (內建) | references/banner-sizes-and-styles.md |
| 社交媒體圖片/照片 | 社交圖片 (內建) | references/social-photos-design.md |
| SVG 圖示、圖示集 | 圖示 (內建) | references/icon-design.md |
標誌設計 (內建)
55+ 種風格、30 種色板、25 個產業指南。使用 Gemini Nano Banana 模型。
標誌：生成設計簡報
python3 ~/.claude/skills/design/scripts/logo/search.py "tech startup modern" --design-brief -p "BrandName"
標誌：搜尋風格/顏色/產業
python3 ~/.claude/skills/design/scripts/logo/search.py "minimalist clean" --domain style
python3 ~/.claude/skills/design/scripts/logo/search.py "tech professional" --domain color
python3 ~/.claude/skills/design/scripts/logo/search.py "healthcare medical" --domain industry
標誌：使用 AI 生成
務必使用白色背景生成輸出標誌圖片。
python3 ~/.claude/skills/design/scripts/logo/generate.py --brand "TechFlow" --style minimalist --industry tech
python3 ~/.claude/skills/design/scripts/logo/generate.py --prompt "coffee shop vintage badge" --style vintage
重要： 當腳本失敗時，請嘗試直接修復。
生成後，務必透過 AskUserQuestion 詢問使用者是否需要 HTML 預覽。如果回答是，則呼叫 /ui-ux-pro-max 以獲取圖庫。
CIP 設計 (內建)
50+ 項交付物、20 種風格、20 個產業。使用 Gemini Nano Banana (Flash/Pro)。
CIP：生成簡報
python3 ~/.claude/skills/design/scripts/cip/search.py "tech startup" --cip-brief -b "BrandName"
CIP：搜尋領域
python3 ~/.claude/skills/design/scripts/cip/search.py "business card letterhead" --domain deliverable
python3 ~/.claude/skills/design/scripts/cip/search.py "luxury premium elegant" --domain style
python3 ~/.claude/skills/design/scripts/cip/search.py "hospitality hotel" --domain industry
python3 ~/.claude/skills/design/scripts/cip/search.py "office reception" --domain mockup
CIP：生成模型
# 包含標誌 (建議使用)
python3 ~/.claude/skills/design/scripts/cip/generate.py --brand "TopGroup" --logo /path/to/logo.png --deliverable "business card" --industry "consulting"
# 完整 CIP 套件
python3 ~/.claude/skills/design/scripts/cip/generate.py --brand "TopGroup" --logo /path/to/logo.png --industry "consulting" --set
# Pro 模型 (4K 文字)
python3 ~/.claude/skills/design/scripts/cip/generate.py --brand "TopGroup" --logo logo.png --deliverable "business card" --model pro
# 不含標誌
python3 ~/.claude/skills/design/scripts/cip/generate.py --brand "TechFlow" --deliverable "business card" --no-logo-prompt
模型：flash (預設，gemini-2.5-flash-image)、pro (gemini-3-pro-image-preview)
CIP：呈現 HTML 簡報
python3 ~/.claude/skills/design/scripts/cip/render-html.py --brand "TopGroup" --industry "consulting" --images /path/to/cip-output
提示： 如果沒有標誌，請先參閱上方「標誌設計」章節。
簡報 (內建)
具策略性的 HTML 簡報，包含 Chart.js、設計代碼、文案撰寫公式。
載入 references/slides-create.md 以取得建立工作流程。
簡報：知識庫
| 主題 | 檔案 |
|---|---|
| 建立指南 | references/slides-create.md |
| 版面配置模式 | references/slides-layout-patterns.md |
| HTML 範本 | references/slides-html-template.md |
| 文案撰寫 | references/slides-copywriting-formulas.md |
| 策略 | references/slides-strategies.md |
橫幅設計 (內建)
22 種美術指導風格，適用於社交、廣告、網頁、印刷。使用 frontend-design、ai-artist、ai-multimodal、chrome-devtools 技能。
載入 references/banner-sizes-and-styles.md 以取得完整尺寸與風格參考。
橫幅：工作流程
- 收集需求 透過
AskUserQuestion— 目的、平台、內容、品牌、風格、數量 - 研究 — 啟用
ui-ux-pro-max，瀏覽 Pinterest 尋找參考 - 設計 — 使用
frontend-design建立 HTML/CSS 橫幅，使用ai-artist/ai-multimodal生成視覺效果 - 匯出 — 透過
chrome-devtools以精確尺寸截圖為 PNG - 呈現 — 並排顯示所有選項，根據反饋迭代
橫幅：快速尺寸參考
| 平台 | 類型 | 尺寸 (px) |
|---|---|---|
| 封面 | 820 x 312 | |
| Twitter/X | 頁首 | 1500 x 500 |
| 個人 | 1584 x 396 | |
| YouTube | 頻道藝術 | 2560 x 1440 |
| 限時動態 | 1080 x 1920 | |
| 貼文 | 1080 x 1080 | |
| Google Ads | 中等矩形 | 300 x 250 |
| 網站 | 英雄區 | 1920 x 600-1080 |
橫幅：頂尖藝術風格
| 風格 | 最適合 |
|---|---|
| 極簡主義 | SaaS、科技 |
| 粗體字體 | 公告 |
| 漸層 | 現代品牌 |
| 照片為主 | 生活風格、電子商務 |
| 幾何 | 科技、金融科技 |
| 玻璃形態 | SaaS、應用程式 |
| 霓虹/賽博龐克 | 遊戲、活動 |
橫幅：設計規則
- 安全區域：關鍵內容位於中央 70-80%
- 每個橫幅一個 CTA，右下角，最小高度 44px
- 最多 2 種字體，內文最小 16px，標題 ≥32px
- 廣告文字低於 20%（Meta 會懲罰）
- 印刷：300 DPI、CMYK、3-5mm 出血
圖示設計 (內建)
15 種風格、12 個類別。Gemini 3.1 Pro Preview 生成 SVG 文字輸出。
圖示：生成單一圖示
python3 ~/.claude/skills/design/scripts/icon/generate.py --prompt "settings gear" --style outlined
python3 ~/.claude/skills/design/scripts/icon/generate.py --prompt "shopping cart" --style filled --color "#6366F1"
python3 ~/.claude/skills/design/scripts/icon/generate.py --name "dashboard" --category navigation --style duotone
圖示：生成批次變體
python3 ~/.claude/skills/design/scripts/icon/generate.py --prompt "cloud upload" --batch 4 --output-dir ./icons
圖示：多尺寸匯出
python3 ~/.claude/skills/design/scripts/icon/generate.py --prompt "user profile" --sizes "16,24,32,48" --output-dir ./icons
圖示：頂尖風格
| 風格 | 最適合 |
|---|---|
| outlined | UI 介面、網頁應用程式 |
| filled | 行動應用程式、導覽列 |
| duotone | 行銷、登陸頁面 |
| rounded | 友善應用程式、健康 |
| sharp | 科技、金融科技、企業 |
| flat | Material Design、Google 風格 |
| gradient | 現代品牌、SaaS |
模型： gemini-3.1-pro-preview — 僅文字輸出 (SVG 是 XML 文字)。無需圖片生成 API。
社交圖片 (內建)
多平台社交圖片設計：HTML/CSS → 截圖匯出。使用 ui-ux-pro-max、brand、design-system、chrome-devtools 技能。
載入 references/social-photos-design.md 以取得尺寸、範本、最佳實踐。
社交圖片：工作流程
- 協調 —
project-management技能用於待辦任務；獨立子代理用於平行工作 - 分析 — 解析提示：主題、平台、風格、品牌背景、內容元素
- 構思 — 3-5 個概念，透過
AskUserQuestion呈現 - 設計 —
/ckm:brand→/ckm:design-system→ 隨機呼叫/ck:ui-ux-pro-max或/ck:frontend-design；每個想法 × 尺寸的 HTML - 匯出 — 使用
chrome-devtools或 Playwright 以精確 px (2x deviceScaleFactor) 截圖 - 驗證 — 使用 Chrome MCP 或
chrome-devtools技能視覺檢查已匯出的設計；修正版面/樣式問題並重新匯出 - 報告 — 將摘要輸出至
plans/reports/，包含設計決策 - 整理 — 呼叫
assets-organizing技能來分類輸出檔案與報告
社交圖片：主要尺寸
| 平台 | 尺寸 (px) | 平台 | 尺寸 (px) |
|---|---|---|---|
| IG 貼文 | 1080×1080 | FB 貼文 | 1200×630 |
| IG 限時動態 | 1080×1920 | X 貼文 | 1200×675 |
| IG 輪播 | 1080×1350 | 1200×627 | |
| YT 縮圖 | 1280×720 | 1000×1500 |
工作流程
完整品牌套件
- 標誌 →
scripts/logo/generate.py→ 生成標誌變體 - CIP →
scripts/cip/generate.py --logo ...→ 建立交付物模型 - 簡報 → 載入
references/slides-create.md→ 建立募資簡報
新的設計系統
- 品牌 (brand 技能) → 定義顏色、字體、語調
- 代碼 (design-system 技能) → 建立語意代碼層
- 實作 (ui-styling 技能) → 設定 Tailwind、shadcn/ui
參考資料
| 主題 | 檔案 |
|---|---|
| 設計路由 | references/design-routing.md |
| 標誌設計指南 | references/logo-design.md |
| 標誌風格 | references/logo-style-guide.md |
| 標誌顏色 | references/logo-color-psychology.md |
| 標誌提示 | references/logo-prompt-engineering.md |
| CIP 設計指南 | references/cip-design.md |
| CIP 交付物 | references/cip-deliverable-guide.md |
| CIP 風格 | references/cip-style-guide.md |
| CIP 提示 | references/cip-prompt-engineering.md |
| 簡報建立 | references/slides-create.md |
| 簡報版面 | references/slides-layout-patterns.md |
| 簡報範本 | references/slides-html-template.md |
| 簡報文案 | references/slides-copywriting-formulas.md |
| 簡報策略 | references/slides-strategies.md |
| 橫幅尺寸與風格 | references/banner-sizes-and-styles.md |
| 社交圖片指南 | references/social-photos-design.md |
| 圖示設計指南 | references/icon-design.md |
腳本
| 腳本 | 用途 |
|---|---|
scripts/logo/search.py | 搜尋標誌風格、顏色、產業 |
scripts/logo/generate.py | 使用 Gemini AI 生成標誌 |
scripts/logo/core.py | 標誌資料的 BM25 搜尋引擎 |
scripts/cip/search.py | 搜尋 CIP 交付物、風格、產業 |
scripts/cip/generate.py | 使用 Gemini 生成 CIP 模型 |
scripts/cip/render-html.py | 從 CIP 模型呈現 HTML 簡報 |
scripts/cip/core.py | CIP 資料的 BM25 搜尋引擎 |
scripts/icon/generate.py | 使用 Gemini 3.1 Pro 生成 SVG 圖示 |
先決條件
Python： 此技能使用 Python 腳本。在 Windows 上，使用 python 代替 python3（例如 python scripts/logo/search.py 而非 python3 scripts/logo/search.py）。
檢查 Python 是否已安裝：
python3 --version || python --version
設定
export GEMINI_API_KEY="your-key" # https://aistudio.google.com/apikey
pip install google-genai pillow
Windows 注意事項： 在需要時使用
python代替pip（例如python -m pip install ...）。
整合
外部子技能： brand、design-system、ui-styling 相關技能： frontend-design、ui-ux-pro-max、ai-multimodal、chrome-devtools