design

设计

统一设计 skill：品牌、设计令牌、UI、Logo、CIP、幻灯片、横幅、社交媒体图片、图标。

适用场景

• 品牌标识、品牌调性、品牌资产
• 设计系统令牌与规范
• 基于 shadcn/ui + Tailwind 的 UI 样式设计
• Logo 设计与 AI 生成
• 企业视觉识别（CIP）交付物
• 演示文稿与路演 PPT
• 社交媒体、广告、网页、印刷用横幅设计
• Instagram、Facebook、LinkedIn、Twitter、Pinterest、TikTok 社交配图

子 skill 路由

任务	子 skill	详情
品牌标识、调性、资产	brand	外部 skill
令牌、规范、CSS 变量	design-system	外部 skill
shadcn/ui、Tailwind、代码	ui-styling	外部 skill
Logo 创作、AI 生成	Logo（内置）	references/logo-design.md
CIP 样机、交付物	CIP（内置）	references/cip-design.md
演示文稿、路演 PPT	幻灯片（内置）	references/slides.md
横幅、封面、页眉	横幅（内置）	references/banner-sizes-and-styles.md
社交媒体图片/配图	社交配图（内置）	references/social-photos-design.md
SVG 图标、图标集	图标（内置）	references/icon-design.md

Logo 设计（内置）

55+ 种风格、30 套配色方案、25 份行业指南。使用 Gemini Nano Banana 模型。

Logo：生成设计简报

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

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

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：AI 生成

务必 生成白色背景的 Logo 图片。

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：生成样机

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

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

# Pro model (4K text)
python3 ~/.claude/skills/design/scripts/cip/generate.py --brand "TopGroup" --logo logo.png --deliverable "business card" --model pro

# Without logo
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

提示： 若尚无 Logo，请先使用上方的 Logo 设计部分。

幻灯片（内置）

基于 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

横幅设计（内置）

涵盖社交、广告、网页、印刷的 22 种艺术指导风格。使用 frontend-design、ai-artist、ai-multimodal、chrome-devtools skills。

完整尺寸与风格参考请加载 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

Banner：热门艺术风格

风格	适用场景
极简风格	SaaS、科技
粗体排版	公告
渐变	现代品牌
摄影风格	生活方式、电商
几何风格	科技、金融科技
玻璃拟态	SaaS、应用
霓虹/赛博朋克	游戏、活动

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 界面、Web 应用
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. 编排 — 使用 project-management 技能处理待办任务；独立工作由并行子 Agent 完成
2. 分析 — 解析提示词：主题、平台、风格、品牌语境、内容元素
3. 构思 — 提出 3-5 个概念，通过 AskUserQuestion 呈现
4. 设计 — /ckm:brand → /ckm:design-system → 随机调用 /ck:ui-ux-pro-max 或 /ck:frontend-design；每个概念 × 尺寸生成 HTML
5. 导出 — 使用 chrome-devtools 或 Playwright 按精确像素截图（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
YouTube 缩略图	1280×720	Pinterest	1000×1500

工作流

完整品牌套件

1. Logo → scripts/logo/generate.py → 生成 Logo 变体
2. CIP → scripts/cip/generate.py --logo ... → 创建交付物样机
3. 演示文稿 → 加载 references/slides-create.md → 制作路演演示文稿

新建设计系统

1. 品牌（brand 技能）→ 定义颜色、字体排版、语调
2. Token（design-system 技能）→ 创建语义化 token 层
3. 实现（ui-styling 技能）→ 配置 Tailwind、shadcn/ui

参考资料

主题	文件
设计路由	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
幻灯片模板	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	检索 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 图标

前置条件

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