设计

统一设计技能：品牌、令牌、UI、标志、CIP、幻灯片、Banner、社交照片、图标。

何时使用

• 品牌识别、声音、资产
• 设计系统令牌和规格
• 使用shadcn/ui + Tailwind的UI样式
• 标志设计和AI生成
• 企业识别项目（CIP）交付物
• 演示和pitch deck
• 社交媒体、广告、网络、印刷的Banner设计
• Instagram、Facebook、LinkedIn、Twitter、Pinterest、TikTok的社交照片

子技能路由

| 任务 | 子技能 | 详情 | |------|---------|---------| | 品牌识别、声音、资产 | brand | 外部技能 | | 令牌、规格、CSS变量 | design-system | 外部技能 | | shadcn/ui、Tailwind、代码 | ui-styling | 外部技能 | | 标志创建、AI生成 | Logo（内置） | references/logo-design.md | | CIP mockup、交付物 | CIP（内置） | references/cip-design.md | | 演示、pitch deck | Slides（内置） | references/slides.md | | Banner、封面、头部 | 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预览。如果yes，调用/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：生成Mockup

# 带标志（推荐）
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

提示： 如果没有标志，先使用上面的标志设计部分。

幻灯片（内置）

使用Chart.js、设计令牌、文案公式的战略性HTML演示。

加载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 |

Banner设计（内置）

跨社交、广告、网络、印刷的22种艺术方向样式。使用frontend-design、ai-artist、ai-multimodal、chrome-devtools技能。

加载references/banner-sizes-and-styles.md获取完整尺寸和样式参考。

Banner：工作流程

1. 收集需求 — 通过AskUserQuestion获取目的、平台、内容、品牌、样式、数量
2. 研究 — 激活ui-ux-pro-max，浏览Pinterest获取参考
3. 设计 — 使用frontend-design创建HTML/CSS Banner，使用ai-artist/ai-multimodal生成视觉
4. 导出 — 通过chrome-devtools截图PNG按精确尺寸
5. 展示 — 并排展示所有选项，根据反馈迭代

Banner：快速尺寸参考

| 平台 | 类型 | 尺寸(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 | | Website | 英雄区 | 1920 x 600-1080 |

Banner：顶部艺术样式

| 样式 | 适合 | |-------|----------| | Minimalist | SaaS, tech | | Bold Typography | 公告 | | Gradient | 现代品牌 | | Photo-Based | 生活方式，电商 | | Geometric | 科技，金融科技 | | Glassmorphism | SaaS, apps | | Neon/Cyberpunk | 游戏，活动 |

Banner：设计规则

• 安全区：关键内容在中间70-80%
• 每个Banner一个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设计，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. 编排 — 用于TODO任务的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截图精确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. Logo → scripts/logo/generate.py → 生成标志变体
2. CIP → scripts/cip/generate.py --logo ... → 创建交付物mockup
3. 演示 → 加载references/slides-create.md → 构建pitch deck

新设计系统

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 | | Banner尺寸和样式 | 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 mockup | | scripts/cip/render-html.py | 从CIP mockup渲染HTML演示 | | scripts/cip/core.py | CIP数据的BM25搜索引擎 | | scripts/icon/generate.py | 使用Gemini 3.1 Pro生成SVG图标 |

设置

export GEMINI_API_KEY="your-key"  # https://aistudio.google.com/apikey
pip install google-genai pillow

集成

外部子技能： brand, design-system, ui-styling 相关技能： frontend-design, ui-ux-pro-max, ai-multimodal, chrome-devtools