AI Skills
design

design

熱門

全方位的設計技能：品牌識別、設計代碼、UI 樣式、標誌生成（55 種風格、Gemini AI）、企業識別系統（50 項交付物、CIP 模型）、HTML 簡報（Chart.js）、橫幅設計（22 種風格、社群/廣告/網頁/印刷）、圖示設計（15 種風格、SVG、Gemini 3.1 Pro）、社群照片（HTML→截圖、多平台）。操作：設計標誌、建立 CIP、生成模型、製作簡報、設計橫幅、生成圖示、建立社群照片、社群媒體圖片、品牌識別、設計系統。平台：Facebook、Twitter、LinkedIn、YouTube、Instagram、Pinterest、TikTok、Threads、Google Ads。

11萬星標
1.1萬分支
更新於 2026/7/14
獲取技能源代碼

相關技能

cro3.5萬guizang-ppt-skill2萬hunt6382
SKILL.md
readonlyread-only
name
design
description

全方位的設計技能：品牌識別、設計代碼、UI 樣式、標誌生成（55 種風格、Gemini AI）、企業識別系統（50 項交付物、CIP 模型）、HTML 簡報（Chart.js）、橫幅設計（22 種風格、社群/廣告/網頁/印刷）、圖示設計（15 種風格、SVG、Gemini 3.1 Pro）、社群照片（HTML→截圖、多平台）。操作：設計標誌、建立 CIP、生成模型、製作簡報、設計橫幅、生成圖示、建立社群照片、社群媒體圖片、品牌識別、設計系統。平台：Facebook、Twitter、LinkedIn、YouTube、Instagram、Pinterest、TikTok、Threads、Google Ads。

Design

統一的設計技能：品牌、代碼、UI、標誌、CIP、簡報、橫幅、社群照片、圖示。

使用時機

  • 品牌識別、調性、素材
  • 設計系統代碼與規格
  • 使用 shadcn/ui + Tailwind 進行 UI 樣式設計
  • 標誌設計與 AI 生成
  • 企業識別系統（CIP）交付物
  • 簡報與提案簡報
  • 社群媒體、廣告、網頁、印刷橫幅設計
  • Instagram、Facebook、LinkedIn、Twitter、Pinterest、TikTok 社群照片

子技能路由

任務 子技能 詳細說明
品牌識別、調性、素材 brand 外部技能
代碼、規格、CSS 變數 design-system 外部技能
shadcn/ui、Tailwind、程式碼 ui-styling 外部技能
標誌建立、AI 生成 Logo（內建） references/logo-design.md
CIP 模型、交付物 CIP（內建） references/cip-design.md
簡報、提案簡報 Slides（內建） references/slides.md
橫幅、封面、頁首 Banner（內建） references/banner-sizes-and-styles.md
社群媒體圖片/照片 Social Photos（內建） references/social-photos-design.md
SVG 圖示、圖示集 Icon（內建） 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 以了解完整尺寸與風格參考。

橫幅：流程

  1. 收集需求：透過 AskUserQuestion 了解用途、平台、內容、品牌、風格、數量
  2. 研究：啟用 ui-ux-pro-max，瀏覽 Pinterest 尋找參考
  3. 設計：使用 frontend-design 建立 HTML/CSS 橫幅，使用 ai-artist/ai-multimodal 生成視覺
  4. 匯出：透過 chrome-devtools 截圖為 PNG，精確尺寸
  5. 展示：並排顯示所有選項，根據回饋迭代

橫幅：快速尺寸參考

平台 類型 尺寸（px）
Facebook 封面 820 x 312
Twitter/X 頁首 1500 x 500
LinkedIn 個人 1584 x 396
YouTube 頻道藝術 2560 x 1440
Instagram 限時動態 1080 x 1920
Instagram 貼文 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 以了解尺寸、範本、最佳實務。

社群照片：流程

  1. 統籌：project-management 技能處理 TODO 任務；平行子代理處理獨立工作
  2. 分析：解析提示：主題、平台、風格、品牌背景、內容元素
  3. 發想：3-5 個概念，透過 AskUserQuestion 呈現
  4. 設計：/ckm:brand → /ckm:design-system → 隨機呼叫 /ck:ui-ux-pro-max 或 /ck:frontend-design；每個想法 × 尺寸的 HTML
  5. 匯出：chrome-devtools 或 Playwright 截圖，精確 px（2x deviceScaleFactor）
  6. 驗證：使用 Chrome MCP 或 chrome-devtools 技能視覺檢查匯出的設計；修正版面/樣式問題並重新匯出
  7. 報告：將摘要輸出至 plans/reports/，包含設計決策
  8. 整理：呼叫 assets-organizing 技能分類輸出檔案與報告

社群照片：主要尺寸

平台 尺寸（px） 平台 尺寸（px）
IG 貼文 1080×1080 FB 貼文 1200×630
IG 限時動態 1080×1920 X 貼文 1200×675
IG 輪播 1080×1350 LinkedIn 1200×627
YT 縮圖 1280×720 Pinterest 1000×1500

流程

完整品牌套件

  1. 標誌 → scripts/logo/generate.py → 生成標誌變體
  2. CIP → scripts/cip/generate.py --logo ... → 建立交付物模型
  3. 簡報 → 載入 references/slides-create.md → 建立提案簡報

新設計系統

  1. 品牌（brand 技能）→ 定義顏色、字體、調性
  2. 代碼（design-system 技能）→ 建立語意代碼層
  3. 實作（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