design

name design description Comprehensive design skill: brand identity, design tokens, UI styling, logo generation (55 styles, Gemini, Atlas Cloud, or MuAPI AI), corporate identity program (50 deliverables, CIP mockups), HTML presentations (Chart.js), banner design (22 styles, social/ads/web/print), icon design (15 styles, SVG, Gemini 3.1 Pro), social photos (HTML→screenshot, multi-platform). Actions: design logo, create CIP, generate mockups, build slides, design banner, generate icon, create social photos, social media images, brand identity, design system. Platforms: Facebook, Twitter, LinkedIn, YouTube, Instagram, Pinterest, TikTok, Threads, Google Ads. argument-hint [design-type] [context] license MIT metadata {"author":"claudekit","version":"2.1.0"} 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 Script Paths Script paths in this skill and its references/ are relative to the directory that contains this SKILL.md, not to the project: scripts/<file> is this skill's own scripts/ folder, and ../<skill>/scripts/<file> is a sibling sub-skill installed alongside it. Build the full path from that directory (Claude Code reports it as the skill's base directory when the skill loads) and keep the working directory at the project root — the scripts read and write project files such as docs/brand-guidelines.md , assets/design-tokens.json or src/ relative to it. Logo Design (Built-in) 55+ styles, 30 color palettes, 25 industry guides. Gemini Nano Banana, Atlas Cloud, and MuAPI image generation. Logo: Generate Design Brief python3 scripts/logo/search.py "tech startup modern" --design-brief -p "BrandName" Logo: Search Styles/Colors/Industries 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: Generate with AI ALWAYS generate output logo images with white background. 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 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 scripts/cip/search.py "tech startup" --cip-brief -b "BrandName" CIP: Search Domains 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: Generate Mockups # 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 Models: flash (default, gemini-2.5-flash-image ), pro ( gemini-3-pro-image-preview ) CIP: Render HTML Presentation python3 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 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 Icon: Generate Batch Variations python3 scripts/icon/generate.py --prompt "cloud upload" --batch 4 --output-dir ./icons Icon: Multi-size Export python3 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 Prerequisites Python: This skill uses Python scripts. On Windows, use python instead of python3 (e.g., python scripts/logo/search.py instead of python3 scripts/logo/search.py ). Check if Python is installed: python3 --version || python --version