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 Bundled sibling skill Tokens, specs, CSS vars design system Bundled sibling skill shadcn/ui, Tailwind, code ui styling Bundled sibling 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, use the bundled ui ux pro max skill for the 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 ). Override the ids with GEMINI FLASH IMAGE MODEL / GEMINI PRO IMAGE MODEL . 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. This workflow needs nothing outside the bundle: references/banner sizes and styles.md and the bundled ui ux pro max skill for style and palette guidance. Browser research, image generation, and screenshot capture are optional runtime capabilities; when unavailable, use supplied assets, CSS built visuals, and the runtime's standard preview or capture workflow. 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 — Read references/banner sizes and styles.md and use the bundled ui ux pro max skill for style and palette guidance; if browser research is available and permitted, collect 3–5 references 3. Design — Create the HTML/CSS banner at exact platform dimensions; use supplied assets or CSS built visuals, or an authorized image generation capability if the runtime provides one 4. Export — Capture PNG at exact dimensions with the runtime's browser or screenshot capability; if unavailable, deliver the HTML/CSS source and mark PNG export as pending 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 the bundled ui ux pro max , brand , and design system skills; screenshot export runs through Chrome headless, Playwright, or Puppeteer (see the reference). Load references/social photos design.md for sizes, templates, best practices. Social Photos: Workflow 1. Orchestrate — Track the steps below with the runtime's native task list; 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 — bundled brand → design system → ui ux pro max skills; HTML per idea × size 5. Export — Chrome headless, Playwright, or Puppeteer screenshot at exact px (2x device scale factor where the tool supports it; see the reference) 6. Verify — Open the exported PNGs in an available browser or image viewer and inspect them; fix layout/styling issues and re export 7. Report — Summary to plans/reports/ with design decisions 8. Organize — Sort output files and reports into the project's asset directories 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 Bundled sub skills: brand, design system, ui styling Related Skills: ui ux pro max