AI Skills
design

design

热门

综合设计技能：品牌标识、设计令牌、UI样式、Logo生成（55种风格，Gemini AI）、企业形象识别系统（50个交付物，CIP样机）、HTML演示文稿（Chart.js）、横幅设计（22种风格，社交/广告/网页/印刷）、图标设计（15种风格，SVG，Gemini 3.1 Pro）、社交照片（HTML→截图，多平台）。操作：设计Logo、创建CIP、生成样机、制作幻灯片、设计横幅、生成图标、创建社交照片、社交媒体图片、品牌标识、设计系统。平台：Facebook、Twitter、LinkedIn、YouTube、Instagram、Pinterest、TikTok、Threads、Google Ads。

11万Star
1.1万Fork
更新于 2026/7/14
获取 Skill源代码

相关 Skills

cro3.5万guizang-ppt-skill2万hunt6382
SKILL.md
readonly只读
name
design
description

综合设计技能：品牌标识、设计令牌、UI样式、Logo生成（55种风格，Gemini AI）、企业形象识别系统（50个交付物，CIP样机）、HTML演示文稿（Chart.js）、横幅设计（22种风格，社交/广告/网页/印刷）、图标设计（15种风格，SVG，Gemini 3.1 Pro）、社交照片（HTML→截图，多平台）。操作：设计Logo、创建CIP、生成样机、制作幻灯片、设计横幅、生成图标、创建社交照片、社交媒体图片、品牌标识、设计系统。平台：Facebook、Twitter、LinkedIn、YouTube、Instagram、Pinterest、TikTok、Threads、Google Ads。

设计

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

使用场景

  • 品牌标识、调性、资产
  • 设计系统令牌和规范
  • 使用 shadcn/ui + Tailwind 进行 UI 样式设计
  • Logo 设计与 AI 生成
  • 企业形象识别系统（CIP）交付物
  • 演示文稿和推介资料
  • 社交媒体、广告、网页、印刷品的横幅设计
  • Instagram、Facebook、LinkedIn、Twitter、Pinterest、TikTok 的社交照片

子技能路由

任务 子技能 详情
品牌标识、调性、资产 brand 外部技能
令牌、规范、CSS 变量 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

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

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

# 不带 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 技能。

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

图标：热门风格

风格 最适合
轮廓 UI 界面、网页应用
填充 移动应用、导航栏
双色 营销、着陆页
圆角 友好应用、健康
锐利 科技、金融科技、企业
扁平 Material Design、Google 风格
渐变 现代品牌、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 精确像素截图（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 → 生成 Logo 变体
  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
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