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

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 Logo: Search Styles/Colors/Industries Logo: Generate with AI ALWAYS generate output logo images with white background. 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 CIP: Search Domains CIP: Generate Mockups Models: flash (default, gemini 2.5 flash image ), pro ( gemini 3 pro image preview ) CIP: Render HTML Presentation 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 1. Gather requirements via AskUserQuestion — purpose, platform, content, brand, style, quantity 2. Research — Activate ui ux pro max , browse Pinterest for references 3. Design — Create HTML/CSS banner with frontend design , generate visuals with ai artist / ai multimodal 4. Export — Screenshot to PNG at exact dimensions via chrome devtools 5. 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 Icon: Generate Batch Variations Icon: Multi size Export 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 1. Orchestrate — project management skill for TODO tasks; parallel subagents for independent work 2. Analyze — Parse prompt: subject, platforms, style, brand context, content elements 3. Ideate — 3 5 concepts, present via AskUserQuestion 4. Design — /ckm:brand → /ckm:design system → randomly invoke /ck:ui ux pro max OR /ck:frontend design ; HTML per idea × size 5. Export — chrome devtools or Playwright screenshot at exact px (2x deviceScaleFactor) 6. Verify — Use Chrome MCP or chrome devtools skill to visually inspect exported designs; fix layout/styling issues and re export 7. Report — Summary to plans/reports/ with design decisions 8. 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 1. Logo → scripts/logo/generate.py → Generate logo variants 2. CIP → scripts/cip/generate.py logo ... → Create deliverable mockups 3. Presentation → Load references/slides create.md → Build pitch deck New Design System 1. Brand (brand skill) → Define colors, typography, voice 2. Tokens (design system skill) → Create semantic token layers 3. 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: Setup MuAPI uses the asynchronous model endpoint and prediction result API. See the [MuAPI API reference](https://muapi.ai/docs/api reference) for authentication and the [nano banana model contract](https://api.muapi.ai/api/v1/models/nano banana) or [nano banana pro model contract](https://api.muapi.ai/api/v1/models/nano banana pro) for the current model specific schemas. The logo generator supports both documented model slugs and sends their shared required prompt plus optional aspect ratio fields; the Pro model also accepts an optional resolution field that this focused logo workflow leaves at the provider default. Note for Windows: Use python instead of pip where needed (e.g., python m pip install ... ). Integration External sub skills: brand, design system, ui styling Related Skills: frontend design, ui ux pro max, ai multimodal, chrome devtools