Communitygithub.com

notesgpt/design

全面的设计技能：品牌识别、设计令牌、UI 样式、标志生成（55 种风格，Gemini AI）、企业识别计划（50 种交付物，CIP 样机）、HTML 演示文稿（Chart.js）、横幅设计（22 种风格，适用于社交媒体、广告、网页和印刷）、图标设计（15 种风格，SVG，Gemini 3.1 Pro）、社交照片（HTML 转截图，多平台）。行动：设计标志、创建 CIP、生成样机、制作幻灯片、设计横幅、生成图标、创建社交照片、社交媒体图像、品牌识别、设计系统。平台：Facebook、Twitter、LinkedIn、YouTube、Instagram、Pinterest、TikTok、Threads、Google Ads。

design 是什么？

此技能是一个统一的设计技能集，专为AI代理打造，涵盖从品牌识别、设计令牌、UI样式到标志、企业识别计划（CIP）、演示文稿、横幅、社交照片和SVG图标的全方位设计需求。它特别适合需要快速生成视觉资产的场景，例如初创公司建立品牌、营销团队制作多平台社交图片，或产品团队设计UI组件。 该技能的核心优势在于其模块化和自动化能力。它支持55种标志风格、22种横幅艺术方向、15种图标样式，并能生成多达50种CIP交付物。它深度集成Gemini AI（如Gemini Nano Banana、Gemini 3.1 Pro）进行AI图像生成，同时利用HTML/CSS和截图工具（如Chrome DevTools）产出高保真设计预览。 此技能通过子技能路由系统高效运作，对于品牌、设计系统和UI样式等任务，会调用外部专用技能。对于标志、CIP、幻灯片、横幅、社交照片和图标等核心设计任务，则内置了详细的参考指南和Python脚本，允许用户通过命令行参数快速查询风格、生成设计或创建HTML演示文稿，并支持将输出文件组织到指定目录。它主要运行在支持Python和Gemini API的Claude Code、Cursor或Codex等AI代理平台，但所有设计流程都通过本地执行脚本来实现跨平台兼容。

兼容平台✓Claude Code~Codex CLI~Cursor✓Gemini CLI
npx skills add https://github.com/notesgpt/iMedix-Interactive-Knowledge-Graph-Homepage/tree/claude/beautiful-davinci-ge2ure/.claude/skills/design
查看原文→浏览所有技能

在你喜欢的 AI 中提问

打开一个已预加载此 Agent Skill 的新对话。

OpenAIChatGPTClaudeClaudeGeminiGeminiGrokGrokPerplexityPerplexityDeepSeekDeepSeek

文档

设计

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

何时使用

  • 品牌标识、声音、资产
  • 设计系统令牌和规格
  • 使用 shadcn/ui + Tailwind 进行 UI 样式设计
  • 标志设计和 AI 生成
  • 企业识别计划 (CIP) 交付物
  • 演示文稿和推介幻灯片
  • 面向社交媒体、广告、网页和印刷的横幅设计
  • 用于 Instagram、Facebook、LinkedIn、Twitter、Pinterest、TikTok 的社交照片

子技能路由

任务子技能详情
品牌标识、声音、资产brand外部技能
令牌、规格、CSS 变量design-system外部技能
shadcn/ui、Tailwind、代码ui-styling外部技能
标志创建、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

标志设计（内置）

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 预览。如果需要，调用 /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：生成样机

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

横幅设计（内置）

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

图标：热门风格

风格最佳用途
outlinesUI 界面、Web 应用
filled移动应用、导航栏
duotone营销、落地页
rounded友好的应用、健康
sharp科技、金融科技、企业
flatMaterial Design、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 技能处理 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×1080FB 帖子1200×630
IG 快拍1080×1920X 帖子1200×675
IG 轮播1080×1350LinkedIn1200×627
YT 缩略图1280×720Pinterest1000×1500

工作流

完整品牌套餐

  1. 标志 → scripts/logo/generate.py → 生成标志变体
  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
标志设计指南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
横幅尺寸与风格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 样机
scripts/cip/render-html.py从 CIP 样机渲染 HTML 演示文稿
scripts/cip/core.pyCIP 数据的 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

相关技能

steipete/video-frames

Extract frames or short clips from videos using ffmpeg.

community

steipete/summarize

Summarize or transcribe URLs, YouTube/videos, podcasts, articles, transcripts, PDFs, and local files.

community

openclaw/openclaw

Use when testing, fixing, or extending the OpenClaw Control UI GUI with Vitest + Playwright end-to-end checks, mocked Gateway WebSocket flows, mocked dashboard runs, screenshots/videos, or agent-verifiable browser proof.

community

obra/superpowers

Obra superpowers agent skills.

community

affaan-m/ECC

See, Understand, Act on video and audio. See- ingest from local files, URLs, RTSP/live feeds, or live record desktop; return realtime context and playable stream links. Understand- extract frames, build visual/semantic/temporal indexes, and search moments with timestamps and auto-clips. Act- transcode and normalize (codec, fps, resolution, aspect ratio), perform timeline edits (subtitles, text/image overlays, branding, audio overlays, dubbing, translation), generate media assets (image, audio...

community

affaan-m/everything-claude-code

End-to-end marketing campaign planning and execution. Covers audience research, positioning, campaign angle definition, landing page copy, email sequences, social posts, ad copy, short-form video scripts, and content calendars. Use as the orchestration layer for multi-channel product launches. Use when planning or executing a multi-channel product launch, or producing landing page, email, social, or ad copy.

community