Design Unified design skill: brand, tokens, UI, logo, CIP, slides, banners, social photos, icons. When to Use Brand identity, voice, assets Design system tokens and specs UI styling with shadcn/ui + Tailwind Logo design and AI generation Corporate identity program (CIP) deliverables Presentations and pitch decks Banner design for social media, ads, web, print Social photos for Instagram, Facebook, LinkedIn, Twitter, Pinterest, TikTok Sub-skill Routing Task Sub-skill Details Brand identity, voice, assets brand External skill Tokens, specs, CSS vars design-system External skill shadcn/ui, Tailwind, code ui-styling External skill Logo creation, AI generation Logo (built-in) references/logo-design.md CIP mockups, deliverables CIP (built-in) references/cip-design.md Presentations, pitch decks Slides (built-in) references/slides.md Banners, covers, headers Banner (built-in) references/banner-sizes-and-styles.md Social media images/photos Social Photos (built-in) references/social-photos-design.md SVG icons, icon sets Icon (built-in) references/icon-design.md Logo Design (Built-in) 55+ styles, 30 color palettes, 25 industry guides. Gemini Nano Banana models. Logo: Generate Design Brief python3 ~/.claude/skills/design/scripts/logo/search.py "tech startup modern" --design-brief -p "BrandName" Logo: Search Styles/Colors/Industries 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: Generate with AI ALWAYS generate output logo images with white background. 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 IMPORTANT: When scripts fail, try to fix them directly. After generation, ALWAYS ask user about HTML preview via AskUserQuestion . If yes, invoke /ui-ux-pro-max for gallery. CIP Design (Built-in) 50+ deliverables, 20 styles, 20 industries. Gemini Nano Banana (Flash/Pro). CIP: Generate Brief python3 ~/.claude/skills/design/scripts/cip/search.py "tech startup" --cip-brief -b "BrandName" CIP: Search Domains 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: Generate Mockups
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 Models: flash (default, gemini-2.5-flash-image ), pro ( gemini-3-pro-image-preview ) CIP: Render HTML Presentation python3 ~/.claude/skills/design/scripts/cip/render-html.py --brand "TopGroup" --industry "consulting" --images /path/to/cip-output Tip: If no logo exists, use Logo Design section above first. Slides (Built-in) Strategic HTML presentations with Chart.js, design tokens, copywriting formulas. Load references/slides-create.md for the creation workflow. Slides: Knowledge Base Topic File Creation Guide references/slides-create.md Layout Patterns references/slides-layout-patterns.md HTML Template references/slides-html-template.md Copywriting references/slides-copywriting-formulas.md Strategies references/slides-strategies.md Banner Design (Built-in) 22 art direction styles across social, ads, web, print. Uses frontend-design , ai-artist , ai-multimodal , chrome-devtools skills. Load references/banner-sizes-and-styles.md for complete sizes and styles reference. Banner: Workflow Gather requirements via AskUserQuestion — purpose, platform, content, brand, style, quantity Research — Activate ui-ux-pro-max , browse Pinterest for references Design — Create HTML/CSS banner with frontend-design , generate visuals with ai-artist / ai-multimodal Export — Screenshot to PNG at exact dimensions via chrome-devtools Present — Show all options side-by-side, iterate on feedback Banner: Quick Size Reference Platform Type Size (px) Facebook Cover 820 x 312 Twitter/X Header 1500 x 500 LinkedIn Personal 1584 x 396 YouTube Channel art 2560 x 1440 Instagram Story 1080 x 1920 Instagram Post 1080 x 1080 Google Ads Med Rectangle 300 x 250 Website Hero 1920 x 600-1080 Banner: Top Art Styles Style Best For Minimalist SaaS, tech Bold Typography Announcements Gradient Modern brands Photo-Based Lifestyle, e-com Geometric Tech, fintech Glassmorphism SaaS, apps Neon/Cyberpunk Gaming, events Banner: Design Rules Safe zones: critical content in central 70-80% One CTA per banner, bottom-right, min 44px height Max 2 fonts, min 16px body, ≥32px headline Text under 20% for ads (Meta penalizes) Print: 300 DPI, CMYK, 3-5mm bleed Icon Design (Built-in) 15 styles, 12 categories. Gemini 3.1 Pro Preview generates SVG text output. Icon: Generate Single Icon 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 Icon: Generate Batch Variations python3 ~/.claude/skills/design/scripts/icon/generate.py --prompt "cloud upload" --batch 4 --output-dir ./icons Icon: Multi-size Export python3 ~/.claude/skills/design/scripts/icon/generate.py --prompt "user profile" --sizes "16,24,32,48" --output-dir ./icons Icon: Top Styles Style Best For outlined UI interfaces, web apps filled Mobile apps, nav bars duotone Marketing, landing pages rounded Friendly apps, health sharp Tech, fintech, enterprise flat Material design, Google-style gradient Modern brands, SaaS Model: gemini-3.1-pro-preview — text-only output (SVG is XML text). No image generation API needed. Social Photos (Built-in) Multi-platform social image design: HTML/CSS → screenshot export. Uses ui-ux-pro-max , brand , design-system , chrome-devtools skills. Load references/social-photos-design.md for sizes, templates, best practices. Social Photos: Workflow Orchestrate — project-management skill for TODO tasks; parallel subagents for independent work Analyze — Parse prompt: subject, platforms, style, brand context, content elements Ideate — 3-5 concepts, present via AskUserQuestion Design — /ckm:brand → /ckm:design-system → randomly invoke /ck:ui-ux-pro-max OR /ck:frontend-design ; HTML per idea × size Export — chrome-devtools or Playwright screenshot at exact px (2x deviceScaleFactor) Verify — Use Chrome MCP or chrome-devtools skill to visually inspect exported designs; fix layout/styling issues and re-export Report — Summary to plans/reports/ with design decisions Organize — Invoke assets-organizing skill to sort output files and reports Social Photos: Key Sizes Platform Size (px) Platform Size (px) IG Post 1080×1080 FB Post 1200×630 IG Story 1080×1920 X Post 1200×675 IG Carousel 1080×1350 LinkedIn 1200×627 YT Thumb 1280×720 Pinterest 1000×1500 Workflows Complete Brand Package Logo → scripts/logo/generate.py → Generate logo variants CIP → scripts/cip/generate.py --logo ... → Create deliverable mockups Presentation → Load references/slides-create.md → Build pitch deck New Design System Brand (brand skill) → Define colors, typography, voice Tokens (design-system skill) → Create semantic token layers Implement (ui-styling skill) → Configure Tailwind, shadcn/ui References Topic File Design Routing references/design-routing.md Logo Design Guide references/logo-design.md Logo Styles references/logo-style-guide.md Logo Colors references/logo-color-psychology.md Logo Prompts references/logo-prompt-engineering.md CIP Design Guide references/cip-design.md CIP Deliverables references/cip-deliverable-guide.md CIP Styles references/cip-style-guide.md CIP Prompts references/cip-prompt-engineering.md Slides Create references/slides-create.md Slides Layouts references/slides-layout-patterns.md Slides Template references/slides-html-template.md Slides Copy references/slides-copywriting-formulas.md Slides Strategy references/slides-strategies.md Banner Sizes & Styles references/banner-sizes-and-styles.md Social Photos Guide references/social-photos-design.md Icon Design Guide references/icon-design.md Scripts Script Purpose scripts/logo/search.py Search logo styles, colors, industries scripts/logo/generate.py Generate logos with Gemini AI scripts/logo/core.py BM25 search engine for logo data scripts/cip/search.py Search CIP deliverables, styles, industries scripts/cip/generate.py Generate CIP mockups with Gemini scripts/cip/render-html.py Render HTML presentation from CIP mockups scripts/cip/core.py BM25 search engine for CIP data scripts/icon/generate.py Generate SVG icons with Gemini 3.1 Pro Setup export GEMINI_API_KEY = "your-key"
https://aistudio.google.com/apikey
pip install google-genai pillow Integration External sub-skills: brand, design-system, ui-styling