Back to Details

design

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Design

设计

Unified design skill: brand, tokens, UI, logo, CIP, slides, banners, social photos, icons.
一体化设计技能：品牌、令牌、UI、Logo、CIP、幻灯片、横幅、社交图片、图标。

When to Use

使用场景

  • Brand identity, voice, assets
  • Design system tokens and specs
  • UI styling with shadcn/ui + Tailwind
  • Logo design and AI generation
  • Corporate identity program (CIP) deliverables
  • Presentations and pitch decks
  • Banner design for social media, ads, web, print
  • Social photos for Instagram, Facebook, LinkedIn, Twitter, Pinterest, TikTok
  • 品牌标识、品牌调性、品牌资产
  • 设计系统令牌与规范
  • 基于shadcn/ui + Tailwind的UI样式设计
  • Logo设计与AI生成
  • 企业视觉识别系统（CIP）交付物
  • 演示文稿与提案幻灯片
  • 适用于社交媒体、广告、网页、印刷的横幅设计
  • 适用于Instagram、Facebook、LinkedIn、Twitter、Pinterest、TikTok的社交图片

Sub-skill Routing

子技能路由

TaskSub-skillDetails
Brand identity, voice, assets
brand
External skill
Tokens, specs, CSS vars
design-system
External skill
shadcn/ui, Tailwind, code
ui-styling
External skill
Logo creation, AI generationLogo (built-in)
references/logo-design.md
CIP mockups, deliverablesCIP (built-in)
references/cip-design.md
Presentations, pitch decksSlides (built-in)
references/slides.md
Banners, covers, headersBanner (built-in)
references/banner-sizes-and-styles.md
Social media images/photosSocial Photos (built-in)
references/social-photos-design.md
SVG icons, icon setsIcon (built-in)
references/icon-design.md
任务子技能详情
品牌标识、调性、资产
brand
外部技能
令牌、规范、CSS变量
design-system
外部技能
shadcn/ui、Tailwind、代码实现
ui-styling
外部技能
Logo创建、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

Logo Design (Built-in)

Logo设计（内置）

55+ styles, 30 color palettes, 25 industry guides. Gemini Nano Banana models.
55+种风格、30种调色板、25个行业指南。基于Gemini Nano Banana模型。

Logo: Generate Design Brief

Logo：生成设计 brief

bash
python3 ~/.claude/skills/design/scripts/logo/search.py "tech startup modern" --design-brief -p "BrandName"
bash
python3 ~/.claude/skills/design/scripts/logo/search.py "tech startup modern" --design-brief -p "BrandName"

Logo: Search Styles/Colors/Industries

Logo：搜索风格/配色/行业

bash
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
bash
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

Logo: Generate with AI

Logo：AI生成

ALWAYS generate output logo images with white background.
bash
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
IMPORTANT: When scripts fail, try to fix them directly.
After generation, ALWAYS ask user about HTML preview via 
AskUserQuestion
. If yes, invoke 
/ui-ux-pro-max
for gallery.
务必生成白色背景的Logo图片。
bash
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 Design (Built-in)

CIP设计（内置）

50+ deliverables, 20 styles, 20 industries. Gemini Nano Banana (Flash/Pro).
50+项交付物、20种风格、20个行业。基于Gemini Nano Banana（Flash/Pro）模型。

CIP: Generate Brief

CIP：生成brief

bash
python3 ~/.claude/skills/design/scripts/cip/search.py "tech startup" --cip-brief -b "BrandName"
bash
python3 ~/.claude/skills/design/scripts/cip/search.py "tech startup" --cip-brief -b "BrandName"

CIP: Search Domains

CIP：搜索领域

bash
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
bash
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: Generate Mockups

CIP：生成样机

bash
undefined
bash
undefined

With logo (RECOMMENDED)

带Logo（推荐）

python3 ~/.claude/skills/design/scripts/cip/generate.py --brand "TopGroup" --logo /path/to/logo.png --deliverable "business card" --industry "consulting"
python3 ~/.claude/skills/design/scripts/cip/generate.py --brand "TopGroup" --logo /path/to/logo.png --deliverable "business card" --industry "consulting"

Full CIP set

完整CIP套件

python3 ~/.claude/skills/design/scripts/cip/generate.py --brand "TopGroup" --logo /path/to/logo.png --industry "consulting" --set
python3 ~/.claude/skills/design/scripts/cip/generate.py --brand "TopGroup" --logo /path/to/logo.png --industry "consulting" --set

Pro model (4K text)

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 "TopGroup" --logo logo.png --deliverable "business card" --model pro

Without logo

不带Logo

python3 ~/.claude/skills/design/scripts/cip/generate.py --brand "TechFlow" --deliverable "business card" --no-logo-prompt

Models: `flash` (default, `gemini-2.5-flash-image`), `pro` (`gemini-3-pro-image-preview`)
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: Render HTML Presentation

CIP：渲染HTML演示文稿

bash
python3 ~/.claude/skills/design/scripts/cip/render-html.py --brand "TopGroup" --industry "consulting" --images /path/to/cip-output
Tip: If no logo exists, use Logo Design section above first.
bash
python3 ~/.claude/skills/design/scripts/cip/render-html.py --brand "TopGroup" --industry "consulting" --images /path/to/cip-output
提示： 如果没有Logo，请先使用上方的Logo设计模块生成。

Slides (Built-in)

幻灯片（内置）

Strategic HTML presentations with Chart.js, design tokens, copywriting formulas.
Load 
references/slides-create.md
for the creation workflow.
基于Chart.js、设计令牌、文案公式的策略型HTML演示文稿。
加载
references/slides-create.md
查看创建流程。

Slides: Knowledge Base

幻灯片：知识库

TopicFile
Creation Guide
references/slides-create.md
Layout Patterns
references/slides-layout-patterns.md
HTML Template
references/slides-html-template.md
Copywriting
references/slides-copywriting-formulas.md
Strategies
references/slides-strategies.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

Banner Design (Built-in)

横幅设计（内置）

22 art direction styles across social, ads, web, print. Uses 
frontend-design
, 
ai-artist
, 
ai-multimodal
, 
chrome-devtools
skills.
Load 
references/banner-sizes-and-styles.md
for complete sizes and styles reference.
覆盖社交平台、广告、网页、印刷场景的22种艺术风格。使用
frontend-design
、
ai-artist
、
ai-multimodal
、
chrome-devtools
技能。
加载
references/banner-sizes-and-styles.md
查看完整尺寸与风格参考。

Banner: Workflow

横幅：工作流程

  1. Gather requirements via 
    AskUserQuestion
    — purpose, platform, content, brand, style, quantity
  2. Research — Activate 
    ui-ux-pro-max
    , browse Pinterest for references
  3. Design — Create HTML/CSS banner with 
    frontend-design
    , generate visuals with 
    ai-artist
    /
    ai-multimodal
  4. Export — Screenshot to PNG at exact dimensions via 
    chrome-devtools
  5. Present — Show all options side-by-side, iterate on feedback
  1. 收集需求 — 通过
    AskUserQuestion
    获取用途、平台、内容、品牌、风格、数量
  2. 调研 — 激活
    ui-ux-pro-max
    ，浏览Pinterest获取参考案例
  3. 设计 — 使用
    frontend-design
    创建HTML/CSS横幅，通过
    ai-artist
    /
    ai-multimodal
    生成视觉元素
  4. 导出 — 通过
    chrome-devtools
    截图导出为精确尺寸的PNG图片
  5. 展示 — 并排展示所有方案，根据反馈迭代优化

Banner: Quick Size Reference

横幅：快速尺寸参考

PlatformTypeSize (px)
FacebookCover820 x 312
Twitter/XHeader1500 x 500
LinkedInPersonal1584 x 396
YouTubeChannel art2560 x 1440
InstagramStory1080 x 1920
InstagramPost1080 x 1080
Google AdsMed Rectangle300 x 250
WebsiteHero1920 x 600-1080
平台类型尺寸（像素）
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

Banner: Top Art Styles

横幅：热门艺术风格

StyleBest For
MinimalistSaaS, tech
Bold TypographyAnnouncements
GradientModern brands
Photo-BasedLifestyle, e-com
GeometricTech, fintech
GlassmorphismSaaS, apps
Neon/CyberpunkGaming, events
风格适用场景
极简风SaaS、科技行业
醒目排版公告类内容
渐变风现代品牌
图片主导生活方式、电商
几何风格科技、金融科技
毛玻璃效果SaaS、应用程序
霓虹/赛博朋克游戏、活动

Banner: Design Rules

横幅：设计规则

  • Safe zones: critical content in central 70-80%
  • One CTA per banner, bottom-right, min 44px height
  • Max 2 fonts, min 16px body, ≥32px headline
  • Text under 20% for ads (Meta penalizes)
  • Print: 300 DPI, CMYK, 3-5mm bleed
  • 安全区域：关键内容放置在中心70-80%区域
  • 每个横幅仅保留一个CTA，放置在右下角，高度不低于44px
  • 最多使用2种字体，正文字号不小于16px，标题字号≥32px
  • 广告类横幅文字占比不超过20%（Meta会对此进行惩罚）
  • 印刷品：300 DPI分辨率，CMYK色彩模式，3-5mm出血位

Icon Design (Built-in)

图标设计（内置）

15 styles, 12 categories. Gemini 3.1 Pro Preview generates SVG text output.
15种风格、12个分类。Gemini 3.1 Pro Preview生成SVG文本输出。

Icon: Generate Single Icon

图标：生成单个图标

bash
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
bash
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

Icon: Generate Batch Variations

图标：批量生成变体

bash
python3 ~/.claude/skills/design/scripts/icon/generate.py --prompt "cloud upload" --batch 4 --output-dir ./icons
bash
python3 ~/.claude/skills/design/scripts/icon/generate.py --prompt "cloud upload" --batch 4 --output-dir ./icons

Icon: Multi-size Export

图标：多尺寸导出

bash
python3 ~/.claude/skills/design/scripts/icon/generate.py --prompt "user profile" --sizes "16,24,32,48" --output-dir ./icons
bash
python3 ~/.claude/skills/design/scripts/icon/generate.py --prompt "user profile" --sizes "16,24,32,48" --output-dir ./icons

Icon: Top Styles

图标：热门风格

StyleBest For
outlinedUI interfaces, web apps
filledMobile apps, nav bars
duotoneMarketing, landing pages
roundedFriendly apps, health
sharpTech, fintech, enterprise
flatMaterial design, Google-style
gradientModern brands, SaaS
Model: 
gemini-3.1-pro-preview
— text-only output (SVG is XML text). No image generation API needed.
风格适用场景
轮廓型UI界面、网页应用
填充型移动应用、导航栏
双色调营销、着陆页
圆角型友好型应用、健康行业
锐利型科技、金融科技、企业级应用
扁平型Material Design、谷歌风格
渐变型现代品牌、SaaS
模型： 
gemini-3.1-pro-preview
— 仅输出文本（SVG为XML文本），无需图像生成API。

Social Photos (Built-in)

社交图片（内置）

Multi-platform social image design: HTML/CSS → screenshot export. Uses 
ui-ux-pro-max
, 
brand
, 
design-system
, 
chrome-devtools
skills.
Load 
references/social-photos-design.md
for sizes, templates, best practices.
多平台社交图像设计：HTML/CSS → 截图导出。使用
ui-ux-pro-max
、
brand
、
design-system
、
chrome-devtools
技能。
加载
references/social-photos-design.md
查看尺寸、模板与最佳实践。

Social Photos: Workflow

社交图片：工作流程

  1. Orchestrate — 
    project-management
    skill for TODO tasks; parallel subagents for independent work
  2. Analyze — Parse prompt: subject, platforms, style, brand context, content elements
  3. Ideate — 3-5 concepts, present via 
    AskUserQuestion
  4. Design — 
    /ckm:brand
    → 
    /ckm:design-system
    → randomly invoke 
    /ck:ui-ux-pro-max
    OR 
    /ck:frontend-design
    ; HTML per idea × size
  5. Export — 
    chrome-devtools
    or Playwright screenshot at exact px (2x deviceScaleFactor)
  6. Verify — Use Chrome MCP or 
    chrome-devtools
    skill to visually inspect exported designs; fix layout/styling issues and re-export
  7. Report — Summary to 
    plans/reports/
    with design decisions
  8. Organize — Invoke 
    assets-organizing
    skill to sort output files and reports
  1. 统筹规划 — 使用
    project-management
    技能创建任务清单；并行调用子代理处理独立工作
  2. 需求分析 — 解析提示：主题、平台、风格、品牌背景、内容元素
  3. 创意构思 — 生成3-5个概念方案，通过
    AskUserQuestion
    展示给用户
  4. 设计制作 — 
    /ckm:brand
    → 
    /ckm:design-system
    → 随机调用 
    /ck:ui-ux-pro-max
    或 
    /ck:frontend-design
    ；为每个概念方案生成对应尺寸的HTML文件
  5. 导出图片 — 使用
    chrome-devtools
    或Playwright截图导出为精确像素尺寸（2倍设备缩放因子）
  6. 验证检查 — 使用Chrome MCP或
    chrome-devtools
    技能视觉检查导出的设计；修复布局/样式问题后重新导出
  7. 结果汇报 — 将总结报告保存至
    plans/reports/
    ，记录设计决策
  8. 资源整理 — 调用
    assets-organizing
    技能整理输出文件与报告

Social Photos: Key Sizes

社交图片：核心尺寸

PlatformSize (px)PlatformSize (px)
IG Post1080×1080FB Post1200×630
IG Story1080×1920X Post1200×675
IG Carousel1080×1350LinkedIn1200×627
YT Thumb1280×720Pinterest1000×1500
平台尺寸（像素）平台尺寸（像素）
IG帖子1080×1080FB帖子1200×630
IG故事1080×1920X帖子1200×675
IG轮播帖1080×1350LinkedIn帖子1200×627
YT缩略图1280×720Pinterest帖子1000×1500

Workflows

工作流

Complete Brand Package

完整品牌包

  1. Logo → 
    scripts/logo/generate.py
    → Generate logo variants
  2. CIP → 
    scripts/cip/generate.py --logo ...
    → Create deliverable mockups
  3. Presentation → Load 
    references/slides-create.md
    → Build pitch deck
  1. Logo → 
    scripts/logo/generate.py
    → 生成Logo变体
  2. CIP → 
    scripts/cip/generate.py --logo ...
    → 创建交付物样机
  3. 演示文稿 → 加载
    references/slides-create.md
    → 制作提案幻灯片

New Design System

新设计系统

  1. Brand (brand skill) → Define colors, typography, voice
  2. Tokens (design-system skill) → Create semantic token layers
  3. Implement (ui-styling skill) → Configure Tailwind, shadcn/ui
  1. 品牌定义（brand技能）→ 定义色彩、排版、品牌调性
  2. 令牌创建（design-system技能）→ 创建语义化令牌层级
  3. 落地实现（ui-styling技能）→ 配置Tailwind、shadcn/ui

References

参考文档

TopicFile
Design Routing
references/design-routing.md
Logo Design Guide
references/logo-design.md
Logo Styles
references/logo-style-guide.md
Logo Colors
references/logo-color-psychology.md
Logo Prompts
references/logo-prompt-engineering.md
CIP Design Guide
references/cip-design.md
CIP Deliverables
references/cip-deliverable-guide.md
CIP Styles
references/cip-style-guide.md
CIP Prompts
references/cip-prompt-engineering.md
Slides Create
references/slides-create.md
Slides Layouts
references/slides-layout-patterns.md
Slides Template
references/slides-html-template.md
Slides Copy
references/slides-copywriting-formulas.md
Slides Strategy
references/slides-strategies.md
Banner Sizes & Styles
references/banner-sizes-and-styles.md
Social Photos Guide
references/social-photos-design.md
Icon Design Guide
references/icon-design.md
主题文件
设计路由
references/design-routing.md
Logo设计指南
references/logo-design.md
Logo风格指南
references/logo-style-guide.md
Logo色彩心理学
references/logo-color-psychology.md
Logo提示词工程
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
幻灯片HTML模板
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

脚本列表

ScriptPurpose
scripts/logo/search.py
Search logo styles, colors, industries
scripts/logo/generate.py
Generate logos with Gemini AI
scripts/logo/core.py
BM25 search engine for logo data
scripts/cip/search.py
Search CIP deliverables, styles, industries
scripts/cip/generate.py
Generate CIP mockups with Gemini
scripts/cip/render-html.py
Render HTML presentation from CIP mockups
scripts/cip/core.py
BM25 search engine for CIP data
scripts/icon/generate.py
Generate SVG icons with Gemini 3.1 Pro
脚本用途
scripts/logo/search.py
搜索Logo风格、配色、行业
scripts/logo/generate.py
使用Gemini AI生成Logo
scripts/logo/core.py
Logo数据的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图标

Prerequisites

前置要求

Python: This skill uses Python scripts. On Windows, use 
python
instead of 
python3
(e.g., 
python scripts/logo/search.py
instead of 
python3 scripts/logo/search.py
).
Check if Python is installed:
bash
python3 --version || python --version
Python： 本技能使用Python脚本。在Windows系统中，使用
python
替代
python3
（例如：
python scripts/logo/search.py
而非 
python3 scripts/logo/search.py
）。
检查Python是否安装：
bash
python3 --version || python --version

Setup

配置步骤

bash
export GEMINI_API_KEY="your-key"  # https://aistudio.google.com/apikey
pip install google-genai pillow
Note for Windows: Use 
python
instead of 
pip
where needed (e.g., 
python -m pip install ...
).
bash
export GEMINI_API_KEY="your-key"  # https://aistudio.google.com/apikey
pip install google-genai pillow
Windows系统注意事项： 必要时使用
python
替代
pip
（例如：
python -m pip install ...
）。

Integration

集成说明

External sub-skills: brand, design-system, ui-styling Related Skills: frontend-design, ui-ux-pro-max, ai-multimodal, chrome-devtools
外部子技能： brand、design-system、ui-styling 相关技能： frontend-design、ui-ux-pro-max、ai-multimodal、chrome-devtools