Skill detail
design
Comprehensive design skill covering brand identity, design tokens, UI styling, logo generation, CIP mockups, HTML presentations with Chart.js, banners, and icons.
Inspect before use
Read the source instructions and check the requirements before you install this skill.
SKILL.md
The saved excerpt is a snapshot from when this skill was listed. The external source remains the complete and most current version.
--- 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` | 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 ```bash python3 scripts/logo/search.py "tech startup modern" --design-brief -p "BrandName" ``` ### Logo: Search Styles/Colors/Industries ```bash 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. ```bash 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, 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 ```bash python3 scrRead the full source on GitHub (opens external page)