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 Related Skills: frontend-design, ui-ux-pro-max, ai-multimodal, chrome-devtools