design

设计

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

适用场景

• 品牌形象、品牌语调、品牌素材
• 设计系统令牌和规范
• 使用 shadcn/ui + Tailwind 设计 UI 样式
• Logo 设计和 AI 生成
• 企业形象计划（CIP）交付物
• 演示文稿和融资演示文稿
• 社交媒体、广告、网页、印刷品横幅设计
• Instagram、Facebook、LinkedIn、Twitter、Pinterest、TikTok 社交照片

子技能路由

任务	子技能	详情
品牌形象、品牌语调、品牌素材	brand	随附的同级技能
令牌、规范、CSS vars	design-system	随附的同级技能
shadcn/ui、Tailwind、代码	ui-styling	随附的同级技能
Logo 创建、AI 生成	Logo（内置）	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

脚本路径

此技能及其 references/ 中的脚本路径，相对于包含此 SKILL.md 的目录，而不是项目目录：scripts/<file> 是此技能自己的 scripts/ 文件夹，../<skill>/scripts/<file> 是安装在其旁边的同级子技能的文件夹。请从该目录构建完整路径（Claude Code 加载技能时会将其报告为技能的基础目录），并将工作目录保留在项目根目录——脚本会根据该目录读写项目文件，例如 docs/brand-guidelines.md、assets/design-tokens.json 或 src/。

Logo 设计（内置）

55+ 种风格、30 种配色方案、25 份行业指南。支持 Gemini Nano Banana、Atlas Cloud 和 MuAPI 图像生成。

Logo：生成设计简报

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

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

python3 scripts/logo/search.py "minimalist clean" --domain style
python3 scripts/logo/search.py "tech professional" --domain color
python3 scripts/logo/search.py "healthcare medical" --domain industry

Logo：使用 AI 生成

始终生成白色背景的 Logo 图片。

python3 scripts/logo/generate.py --brand "TechFlow" --style minimalist --industry tech
python3 scripts/logo/generate.py --prompt "coffee shop vintage badge" --style vintage
python3 scripts/logo/generate.py --brand "TechFlow" --provider atlas
python3 scripts/logo/generate.py --brand "TechFlow" --provider muapi
python3 scripts/logo/generate.py --brand "TechFlow" --provider muapi --muapi-model nano-banana-pro

**重要：**脚本运行失败时，请尝试直接修复。

生成后，始终通过 AskUserQuestion 询问用户是否需要 HTML 预览。如果需要，请使用随附的 ui-ux-pro-max 技能生成画廊。

CIP 设计（内置）

50+ 种交付物、20 种风格、20 个行业。使用 Gemini Nano Banana（Flash/Pro）。

CIP：生成简报

python3 scripts/cip/search.py "tech startup" --cip-brief -b "BrandName"

CIP：搜索领域

python3 scripts/cip/search.py "business card letterhead" --domain deliverable
python3 scripts/cip/search.py "luxury premium elegant" --domain style
python3 scripts/cip/search.py "hospitality hotel" --domain industry
python3 scripts/cip/search.py "office reception" --domain mockup

CIP：生成样稿

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

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

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

# Without logo
python3 scripts/cip/generate.py --brand "TechFlow" --deliverable "business card" --no-logo-prompt

模型：flash（默认，gemini-2.5-flash-image）、pro（gemini-3-pro-image）。通过 GEMINI_FLASH_IMAGE_MODEL / GEMINI_PRO_IMAGE_MODEL 覆盖模型 ID。

CIP：渲染 HTML 演示文稿

python3 scripts/cip/render-html.py --brand "TopGroup" --industry "consulting" --images /path/to/cip-output

**提示：**如果没有 Logo，请先使用上方的 Logo 设计部分。

幻灯片（内置）

策略型 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 种艺术指导风格。此工作流无需使用套件之外的内容：references/banner-sizes-and-styles.md 和随附的 ui-ux-pro-max 技能可提供风格和配色方案指导。浏览器调研、图像生成和屏幕截图捕获均为可选的运行时功能；不可用时，请使用提供的素材、通过 CSS 构建视觉效果，并使用运行时的标准预览或捕获工作流。

加载 references/banner-sizes-and-styles.md，查看完整的尺寸和风格参考。

Banner：工作流

1. 收集需求，通过 AskUserQuestion：用途、平台、内容、品牌、风格、数量
2. 调研：阅读 references/banner-sizes-and-styles.md，并使用内置的 ui-ux-pro-max 技能获取风格和配色指导；如果运行时可用且获得许可，可收集 3–5 个参考案例
3. 设计：按平台精确尺寸创建 HTML/CSS 横幅；使用提供的素材或 CSS 构建的视觉元素，若运行时提供，也可使用经授权的图像生成能力
4. 导出：使用运行时的浏览器或截图能力，按精确尺寸截取 PNG；若不可用，则交付 HTML/CSS 源文件，并标记 PNG 导出为待完成
5. 呈现：并排展示所有方案，根据反馈迭代

Banner：快速尺寸参考

平台	类型	尺寸（px）
Facebook	封面	820 x 312
Twitter/X	页眉	1500 x 500
LinkedIn	个人主页	1584 x 396
YouTube	频道封面	2560 x 1440
Instagram	Story	1080 x 1920
Instagram	帖子	1080 x 1080
Google Ads	中型矩形	300 x 250
网站	首屏大图	1920 x 600-1080

Banner：热门艺术风格

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

Banner：设计规则

• 安全区：关键内容置于中央 70-80% 区域
• 每个横幅只有一个 CTA，位于右下角，最小高度 44px
• 最多 2 种字体，正文最小 16px，标题不小于 32px
• 广告文字占比低于 20%（Meta 会降权）
• 印刷：300 DPI，CMYK，3-5mm 出血

图标设计（内置）

共 15 种风格、12 个类别。Gemini 3.1 Pro Preview 生成 SVG 文本输出。

图标：生成单个图标

python3 scripts/icon/generate.py --prompt "settings gear" --style outlined
python3 scripts/icon/generate.py --prompt "shopping cart" --style filled --color "#6366F1"
python3 scripts/icon/generate.py --name "dashboard" --category navigation --style duotone

图标：批量生成变体

python3 scripts/icon/generate.py --prompt "cloud upload" --batch 4 --output-dir ./icons

图标：多尺寸导出

python3 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 headless、Playwright 或 Puppeteer 完成（参见参考文档）。

加载 references/social-photos-design.md 以获取尺寸、模板和最佳实践。

社交图片：工作流

1. 编排：使用运行时原生的任务列表跟踪以下步骤；独立工作可并行调用子 Agent
2. 分析：解析提示词，包括主体、平台、风格、品牌背景、内容元素
3. 构思：3-5 个概念，通过 AskUserQuestion 呈现
4. 设计：依次使用内置的 brand → design-system → ui-ux-pro-max 技能；每个创意 × 尺寸生成一份 HTML
5. 导出：使用 Chrome headless、Playwright 或 Puppeteer 按精确像素截图（工具支持时使用 2x 设备像素比，参见参考文档）
6. 验证：在可用的浏览器或图片查看器中打开导出的 PNG 并检查；修复布局或样式问题后重新导出
7. 报告：将设计决策摘要写入 plans/reports/
8. 整理：将输出文件和报告归类到项目的素材目录中

社交图片：关键尺寸

平台	尺寸（px）	平台	尺寸（px）
IG 帖子	1080×1080	FB 帖子	1200×630
IG Story	1080×1920	X 帖子	1200×675
IG 轮播	1080×1350	LinkedIn	1200×627
YT 缩略图	1280×720	Pinterest	1000×1500

工作流

完整品牌方案

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

新设计系统

1. 品牌（brand 技能）→ 定义配色、字体、品牌语调
2. Tokens（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
Banner 尺寸与风格	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

# Optional MuAPI provider (no extra Python package required)
export MUAPI_API_KEY="your-key"

MuAPI 使用异步模型端点和预测结果 API。鉴权方法参见 MuAPI API 参考，当前模型的具体 schema 参见 nano-banana 模型合约 或 nano-banana-pro 模型合约。 Logo 生成器支持两个已文档化的模型 slug，并发送两者共有的必填字段 prompt 以及可选字段 aspect_ratio； Pro 模型还接受可选字段 resolution，但本聚焦型 Logo 工作流保持服务商默认值。

Windows 提示： 需要时请使用 python 替代 pip（例如 python -m pip install ...）。

集成

内置子技能： brand、design-system、ui-styling 相关技能： ui-ux-pro-max