Comprehensive design skill: brand identity, design tokens, UI styling, logo generation (55 styles, Gemini 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.
How to install design?
nextlevelbuilder/ui-ux-pro-max-skill/design
$npx -y skills add nextlevelbuilder/ui-ux-pro-max-skill --skill designInstalls into the current project.
›Prefer a prompt? Paste this to your agent
Run `npx skills use "https://github.com/nextlevelbuilder/ui-ux-pro-max-skill" --skill "nextlevelbuilder/ui-ux-pro-max-skill/design"` and follow the generated skill instructions now. Read its complete output, redirecting it to a temporary file first if necessary. Resolve relative paths from the supporting-files directory it provides.
Use the skills in "https://github.com/nextlevelbuilder/ui-ux-pro-max-skill" that are relevant to the current task. Run `npx skills add "https://github.com/nextlevelbuilder/ui-ux-pro-max-skill"` and select the relevant skills, then follow their instructions.
SKILL.md
| 1 | # Design |
| 2 | |
| 3 | Unified design skill: brand, tokens, UI, logo, CIP, slides, banners, social photos, icons. |
| 4 | |
| 5 | ## When to Use |
| 6 | |
| 7 | - Brand identity, voice, assets |
| 8 | - Design system tokens and specs |
| 9 | - UI styling with shadcn/ui + Tailwind |
| 10 | - Logo design and AI generation |
| 11 | - Corporate identity program (CIP) deliverables |
| 12 | - Presentations and pitch decks |
| 13 | - Banner design for social media, ads, web, print |
| 14 | - Social photos for Instagram, Facebook, LinkedIn, Twitter, Pinterest, TikTok |
| 15 | |
| 16 | ## Sub-skill Routing |
| 17 | |
| 18 | | Task | Sub-skill | Details | |
| 19 | |------|-----------|---------| |
| 20 | | Brand identity, voice, assets | `brand` | External skill | |
| 21 | | Tokens, specs, CSS vars | `design-system` | External skill | |
| 22 | | shadcn/ui, Tailwind, code | `ui-styling` | External skill | |
| 23 | | Logo creation, AI generation | Logo (built-in) | `references/logo-design.md` | |
| 24 | | CIP mockups, deliverables | CIP (built-in) | `references/cip-design.md` | |
| 25 | | Presentations, pitch decks | Slides (built-in) | `references/slides.md` | |
| 26 | | Banners, covers, headers | Banner (built-in) | `references/banner-sizes-and-styles.md` | |
| 27 | | Social media images/photos | Social Photos (built-in) | `references/social-photos-design.md` | |
| 28 | | SVG icons, icon sets | Icon (built-in) | `references/icon-design.md` | |
| 29 | |
| 30 | ## Logo Design (Built-in) |
| 31 | |
| 32 | 55+ styles, 30 color palettes, 25 industry guides. Gemini Nano Banana models. |
| 33 | |
| 34 | ### Logo: Generate Design Brief |
| 35 | |
| 36 | ```bash |
| 37 | python3 ~/.claude/skills/design/scripts/logo/search.py "tech startup modern" --design-brief -p "BrandName" |
| 38 | ``` |
| 39 | |
| 40 | ### Logo: Search Styles/Colors/Industries |
| 41 | |
| 42 | ```bash |
| 43 | python3 ~/.claude/skills/design/scripts/logo/search.py "minimalist clean" --domain style |
| 44 | python3 ~/.claude/skills/design/scripts/logo/search.py "tech professional" --domain color |
| 45 | python3 ~/.claude/skills/design/scripts/logo/search.py "healthcare medical" --domain industry |
| 46 | ``` |
| 47 | |
| 48 | ### Logo: Generate with AI |
| 49 | |
| 50 | **ALWAYS** generate output logo images with white background. |
| 51 | |
| 52 | ```bash |
| 53 | python3 ~/.claude/skills/design/scripts/logo/generate.py --brand "TechFlow" --style minimalist --industry tech |
| 54 | python3 ~/.claude/skills/design/scripts/logo/generate.py --prompt "coffee shop vintage badge" --style vintage |
| 55 | ``` |
| 56 | |
| 57 | **IMPORTANT:** When scripts fail, try to fix them directly. |
| 58 | |
| 59 | After generation, **ALWAYS** ask user about HTML preview via `AskUserQuestion`. If yes, invoke `/ui-ux-pro-max` for gallery. |
| 60 | |
| 61 | ## CIP Design (Built-in) |
| 62 | |
| 63 | 50+ deliverables, 20 styles, 20 industries. Gemini Nano Banana (Flash/Pro). |
| 64 | |
| 65 | ### CIP: Generate Brief |
| 66 | |
| 67 | ```bash |
| 68 | python3 ~/.claude/skills/design/scripts/cip/search.py "tech startup" --cip-brief -b "BrandName" |
| 69 | ``` |
| 70 | |
| 71 | ### CIP: Search Domains |
| 72 | |
| 73 | ```bash |
| 74 | python3 ~/.claude/skills/design/scripts/cip/search.py "business card letterhead" --domain deliverable |
| 75 | python3 ~/.claude/skills/design/scripts/cip/search.py "luxury premium elegant" --domain style |
| 76 | python3 ~/.claude/skills/design/scripts/cip/search.py "hospitality hotel" --domain industry |
| 77 | python3 ~/.claude/skills/design/scripts/cip/search.py "office reception" --domain mockup |
| 78 | ``` |
| 79 | |
| 80 | ### CIP: Generate Mockups |
| 81 | |
| 82 | ```bash |
| 83 | # With logo (RECOMMENDED) |
| 84 | python3 ~/.claude/skills/design/scripts/cip/generate.py --brand "TopGroup" --logo /path/to/logo.png --deliverable "business card" --industry "consulting" |
| 85 | |
| 86 | # Full CIP set |
| 87 | python3 ~/.claude/skills/design/scripts/cip/generate.py --brand "TopGroup" --logo /path/to/logo.png --industry "consulting" --set |
| 88 | |
| 89 | # Pro model (4K text) |
| 90 | python3 ~/.claude/skills/design/scripts/cip/generate.py --brand "TopGroup" --logo logo.png --deliverable "business card" --model pro |
| 91 | |
| 92 | # Without logo |
| 93 | python3 ~/.claude/skills/design/scripts/cip/generate.py --brand "TechFlow" --deliverable "business card" --no-logo-prompt |
| 94 | ``` |
| 95 | |
| 96 | Models: `flash` (default, `gemini-2.5-flash-image`), `pro` (`gemini-3-pro-image-preview`) |
| 97 | |
| 98 | ### CIP: Render HTML Presentation |
| 99 | |
| 100 | ```bash |
| 101 | python3 ~/.claude/skills/design/scripts/cip/render-html.py --brand "TopGroup" --industry "consulting" --images /path/to/cip-output |
| 102 | ``` |
| 103 | |
| 104 | **Tip:** If no logo exists, use Logo Design section above first. |
| 105 | |
| 106 | ## Slides (Built-in) |
| 107 | |
| 108 | Strategic HTML presentations with Chart.js, design tokens, copywriting formulas. |
| 109 | |
| 110 | Load `references/slides-create.md` for the creation workflow. |
| 111 | |
| 112 | ### Slides: Knowledge Base |
| 113 | |
| 114 | | Topic | File | |
| 115 | |-------|------| |
| 116 | | Creation Guide | `references/slides-create.md` | |
| 117 | | Layout Patterns | `references/slides-layout-patterns.md` | |
| 118 | | HTML Template | `references/slides-html-template.md` | |
| 119 | | Copywriting | `references/slides-copywriting-formulas.md` | |
| 120 | | Strategies | `references/slides-strategies.md` | |
| 121 | |
| 122 | ## Banner Design (Built-in) |
| 123 | |
| 124 | 22 art direction styles across social, ads, web, print. Uses `frontend-design`, `ai-artist`, `ai-multimodal`, `chrome-devtools` skills. |
| 125 | |
| 126 | Load `references/banner-sizes-and-styles.md` for complete sizes and styles reference. |
| 127 | |
| 128 | ### Banner: Workflow |
| 129 | |
| 130 | 1. **Gather requirements** via `AskUserQuestion` — purpose, platform, content, brand, style, quantity |
| 131 | 2. **Research** — Activate `ui-ux-pro-max`, browse Pinterest for references |
| 132 | 3. **Design** — Create HTML/CSS banner with `frontend-design`, generate visuals with `ai-artist`/`ai-multimodal` |
| 133 | 4. **Export** — Screenshot to PNG at exact dimensions via `chrome-devtools` |
| 134 | 5. **Present** — Show all options side-by-side, iterate on feedback |
| 135 | |
| 136 | ### Banner: Quick Size Reference |
| 137 | |
| 138 | | Platform | Type | Size (px) | |
| 139 | |----------|------|-----------| |
| 140 | | Facebook | Cover | 820 x 312 | |
| 141 | | Twitter/X | Header | 1500 x 500 | |
| 142 | | LinkedIn | Personal | 1584 x 396 | |
| 143 | | YouTube | Channel art | 2560 x 1440 | |
| 144 | | Instagram | Story | 1080 x 1920 | |
| 145 | | Instagram | Post | 1080 x 1080 | |
| 146 | | Google Ads | Med Rectangle | 300 x 250 | |
| 147 | | Website | Hero | 1920 x 600-1080 | |
| 148 | |
| 149 | ### Banner: Top Art Styles |
| 150 | |
| 151 | | Style | Best For | |
| 152 | |-------|----------| |
| 153 | | Minimalist | SaaS, tech | |
| 154 | | Bold Typography | Announcements | |
| 155 | | Gradient | Modern brands | |
| 156 | | Photo-Based | Lifestyle, e-com | |
| 157 | | Geometric | Tech, fintech | |
| 158 | | Glassmorphism | SaaS, apps | |
| 159 | | Neon/Cyberpunk | Gaming, events | |
| 160 | |
| 161 | ### Banner: Design Rules |
| 162 | |
| 163 | - Safe zones: critical content in central 70-80% |
| 164 | - One CTA per banner, bottom-right, min 44px height |
| 165 | - Max 2 fonts, min 16px body, ≥32px headline |
| 166 | - Text under 20% for ads (Meta penalizes) |
| 167 | - Print: 300 DPI, CMYK, 3-5mm bleed |
| 168 | |
| 169 | ## Icon Design (Built-in) |
| 170 | |
| 171 | 15 styles, 12 categories. Gemini 3.1 Pro Preview generates SVG text output. |
| 172 | |
| 173 | ### Icon: Generate Single Icon |
| 174 | |
| 175 | ```bash |
| 176 | python3 ~/.claude/skills/design/scripts/icon/generate.py --prompt "settings gear" --style outlined |
| 177 | python3 ~/.claude/skills/design/scripts/icon/generate.py --prompt "shopping cart" --style filled --color "#6366F1" |
| 178 | python3 ~/.claude/skills/design/scripts/icon/generate.py --name "dashboard" --category navigation --style duotone |
| 179 | ``` |
| 180 | |
| 181 | ### Icon: Generate Batch Variations |
| 182 | |
| 183 | ```bash |
| 184 | python3 ~/.claude/skills/design/scripts/icon/generate.py --prompt "cloud upload" --batch 4 --output-dir ./icons |
| 185 | ``` |
| 186 | |
| 187 | ### Icon: Multi-size Export |
| 188 | |
| 189 | ```bash |
| 190 | python3 ~/.claude/skills/design/scripts/icon/generate.py --prompt "user profile" --sizes "16,24,32,48" --output-dir ./icons |
| 191 | ``` |
| 192 | |
| 193 | ### Icon: Top Styles |
| 194 | |
| 195 | | Style | Best For | |
| 196 | |-------|----------| |
| 197 | | outlined | UI interfaces, web apps | |
| 198 | | filled | Mobile apps, nav bars | |
| 199 | | duotone | Marketing, landing pages | |
| 200 | | rounded | Friendly apps, health | |
| 201 | | sharp | Tech, fintech, enterprise | |
| 202 | | flat | Material design, Google-style | |
| 203 | | gradient | Modern brands, SaaS | |
| 204 | |
| 205 | **Model:** `gemini-3.1-pro-preview` — text-only output (SVG is XML text). No image generation API needed. |
| 206 | |
| 207 | ## Social Photos (Built-in) |
| 208 | |
| 209 | Multi-platform social image design: HTML/CSS → screenshot export. Uses `ui-ux-pro-max`, `brand`, `design-system`, `chrome-devtools` skills. |
| 210 | |
| 211 | Load `references/social-photos-design.md` for sizes, templates, best practices. |
| 212 | |
| 213 | ### Social Photos: Workflow |
| 214 | |
| 215 | 1. **Orchestrate** — `project-management` skill for TODO tasks; parallel subagents for independent work |
| 216 | 2. **Analyze** — Parse prompt: subject, platforms, style, brand context, content elements |
| 217 | 3. **Ideate** — 3-5 concepts, present via `AskUserQuestion` |
| 218 | 4. **Design** — `/ckm:brand` → `/ckm:design-system` → randomly invoke `/ck:ui-ux-pro-max` OR `/ck:frontend-design`; HTML per idea × size |
| 219 | 5. **Export** — `chrome-devtools` or Playwright screenshot at exact px (2x deviceScaleFactor) |
| 220 | 6. **Verify** — Use Chrome MCP or `chrome-devtools` skill to visually inspect exported designs; fix layout/styling issues and re-export |
| 221 | 7. **Report** — Summary to `plans/reports/` with design decisions |
| 222 | 8. **Organize** — Invoke `assets-organizing` skill to sort output files and reports |
| 223 | |
| 224 | ### Social Photos: Key Sizes |
| 225 | |
| 226 | | Platform | Size (px) | Platform | Size (px) | |
| 227 | |----------|-----------|----------|-----------| |
| 228 | | IG Post | 1080×1080 | FB Post | 1200×630 | |
| 229 | | IG Story | 1080×1920 | X Post | 1200×675 | |
| 230 | | IG Carousel | 1080×1350 | LinkedIn | 1200×627 | |
| 231 | | YT Thumb | 1280×720 | Pinterest | 1000×1500 | |
| 232 | |
| 233 | ## Workflows |
| 234 | |
| 235 | ### Complete Brand Package |
| 236 | |
| 237 | 1. **Logo** → `scripts/logo/generate.py` → Generate logo variants |
| 238 | 2. **CIP** → `scripts/cip/generate.py --logo ...` → Create deliverable mockups |
| 239 | 3. **Presentation** → Load `references/slides-create.md` → Build pitch deck |
| 240 | |
| 241 | ### New Design System |
| 242 | |
| 243 | 1. **Brand** (brand skill) → Define colors, typography, voice |
| 244 | 2. **Tokens** (design-system skill) → Create semantic token layers |
| 245 | 3. **Implement** (ui-styling skill) → Configure Tailwind, shadcn/ui |
| 246 | |
| 247 | ## References |
| 248 | |
| 249 | | Topic | File | |
| 250 | |-------|------| |
| 251 | | Design Routing | `references/design-routing.md` | |
| 252 | | Logo Design Guide | `references/logo-design.md` | |
| 253 | | Logo Styles | `references/logo-style-guide.md` | |
| 254 | | Logo Colors | `references/logo-color-psychology.md` | |
| 255 | | Logo Prompts | `references/logo-prompt-engineering.md` | |
| 256 | | CIP Design Guide | `references/cip-design.md` | |
| 257 | | CIP Deliverables | `references/cip-deliverable-guide.md` | |
| 258 | | CIP Styles | `references/cip-style-guide.md` | |
| 259 | | CIP Prompts | `references/cip-prompt-engineering.md` | |
| 260 | | Slides Create | `references/slides-create.md` | |
| 261 | | Slides Layouts | `references/slides-layout-patterns.md` | |
| 262 | | Slides Template | `references/slides-html-template.md` | |
| 263 | | Slides Copy | `references/slides-copywriting-formulas.md` | |
| 264 | | Slides Strategy | `references/slides-strategies.md` | |
| 265 | | Banner Sizes & Styles | `references/banner-sizes-and-styles.md` | |
| 266 | | Social Photos Guide | `references/social-photos-design.md` | |
| 267 | | Icon Design Guide | `references/icon-design.md` | |
| 268 | |
| 269 | ## Scripts |
| 270 | |
| 271 | | Script | Purpose | |
| 272 | |--------|---------| |
| 273 | | `scripts/logo/search.py` | Search logo styles, colors, industries | |
| 274 | | `scripts/logo/generate.py` | Generate logos with Gemini AI | |
| 275 | | `scripts/logo/core.py` | BM25 search engine for logo data | |
| 276 | | `scripts/cip/search.py` | Search CIP deliverables, styles, industries | |
| 277 | | `scripts/cip/generate.py` | Generate CIP mockups with Gemini | |
| 278 | | `scripts/cip/render-html.py` | Render HTML presentation from CIP mockups | |
| 279 | | `scripts/cip/core.py` | BM25 search engine for CIP data | |
| 280 | | `scripts/icon/generate.py` | Generate SVG icons with Gemini 3.1 Pro | |
| 281 | |
| 282 | ## Prerequisites |
| 283 | |
| 284 | **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`). |
| 285 | |
| 286 | Check if Python is installed: |
| 287 | ```bash |
| 288 | python3 --version || python --version |
| 289 | ``` |
| 290 | |
| 291 | ## Setup |
| 292 | |
| 293 | ```bash |
| 294 | export GEMINI_API_KEY="your-key" # https://aistudio.google.com/apikey |
| 295 | pip install google-genai pillow |
| 296 | ``` |
| 297 | |
| 298 | > **Note for Windows:** Use `python` instead of `pip` where needed (e.g., `python -m pip install ...`). |
| 299 | |
| 300 | ## Integration |
| 301 | |
| 302 | **External sub-skills:** brand, design-system, ui-styling |
| 303 | **Related Skills:** frontend-design, ui-ux-pro-max, ai-multimodal, chrome-devtools |
Related
6 picksType
- web-design-guidelinesReview UI code for Web Interface Guidelines compliance. Use when asked to "review my UI", "check accessibility", "audit design", "review UX", or "check my site…Jul 2026
- prototypeBuild a throwaway prototype to answer a design question. Use when the user wants to sanity-check whether a state model or logic feels right, or explore what a…Jul 2026
- lark-whiteboard飞书画板：查询和编辑飞书云文档中的画板。支持导出画板为预览图片、导出原始节点结构、使用多种格式更新画板内容。 当用户需要查看画板内容、导出画板图片、编辑画板时使用此 skill。不负责：飞书云文档内容编辑（lark-doc）、文档内嵌电子表格/Base（lark-sheets / lark-base）。Jul 2026
- ui-ux-pro-maxUI/UX design intelligence for web and mobile. Searchable local database with 84 styles, 192 color palettes, 74 font pairings, 192 product types, 98 UX…Jul 2026
- design-guidePaperclip UI design system guide for building consistent, reusable frontend components.Jul 2026
- impeccableUse when the user wants to design, redesign, shape, critique, audit, polish, clarify, distill, harden, optimize, adapt, animate, colorize, extract, or…Jul 2026
