Skills nextlevelbuilder ui-ux-pro-max-skill UI/UX Pro Max
design
- Use it when:
- You need brand assets made: a logo, business cards and stationery, icons, a pitch deck, banners or social media images.
- It does:
- Searches bundled style, color and industry data to write a brief, then runs Python scripts that generate the images with Gemini.
- You get:
- Logo images, identity mockups in an HTML presentation, SVG icons, HTML slides, and banners and social images exported as PNG.
- Needs:
- A Gemini API key and two Python packages; social images also need headless Chrome, Playwright or Puppeteer.
- Hands off:
- Brand voice, design tokens and shadcn or Tailwind work to its sibling skills brand, design-system and ui-styling.
Skill 4 of 6 in the UI/UX Pro Max bundle, after ui-ux-pro-max and before banner-design.
Needs a Gemini API key for logos, mockups and icons; Atlas Cloud and MuAPI are optional providers.
TL;DR
An all-in-one design skill, written by ClaudeKit, that ships next to ui-ux-pro-max in the UI UX Pro Max repo. Logos start from a design brief that a BM25 search builds from 55 styles, 30 palettes and 25 industry guides; a script then generates them with Gemini, or with Atlas Cloud or MuAPI, always on a white background, and the agent offers an HTML preview gallery. A corporate identity program works the same way: pick deliverables such as business cards and letterheads, generate mockups with Gemini, ideally from your logo, and render them into an HTML presentation. Icons come out as SVG text from Gemini 3.1 Pro, in 15 styles, singly, in batches or at several sizes. Slides, banners and social images are built in HTML and CSS: banners at exact platform sizes with safe zones and one call to action; social images per platform, screenshotted at exact pixels, inspected and re-exported, with a report saved to plans/reports/. Brand voice, tokens and component styling go to the sibling skills brand, design-system and ui-styling, and banners and social images take style guidance from ui-ux-pro-max. When a script fails, the agent is told to fix it itself.
Summarizes the skill at b7d5353.
npx skills add https://github.com/nextlevelbuilder/ui-ux-pro-max-skill --skill design skills.sh pageSource on GitHubAll skills from nextlevelbuilder/ui-ux-pro-max-skill
- Total Downloads
- 48,500 on skills.sh, Nov 9, 2026
- Repo stars
- 146,988 nextlevelbuilder/ui-ux-pro-max-skill
- First seen
- Jun 25, 2026 on skills.sh
Weekly values
| Week to | Installs |
|---|---|
| Sep 21 | 2,070 |
| Sep 28 | 1,915 |
| Oct 5 | 1,902 |
| Oct 12 | 2,171 |
| Oct 19 | 2,671 |
| Oct 26 | 3,385 |
| Nov 2 | 3,873 |
| Nov 9 | 3,412 |
| Category |
Taste for interfaces that don't look generated: direction, motion and accessibility. Generate and edit video, images and audio. SEO, copy, conversion, social media and e-commerce. Everything for building software: planning, coding, debugging, design, frameworks, cloud, agents and skills. |
|---|---|
| Type |
Operates a CLI, API, app or bundled script to get something done. |
| Effect |
Its own steps create or change files, git state or local tools. |
| Needs |
An account, API key or paid plan with an outside service. Drives a real Chromium or Chrome browser. |
| Publisher |
Everyone else. Unverified vendor claims default to community. |
| Topics | |
| Stack |
SKILL.md
From nextlevelbuilder/ui-ux-pro-max-skill at b7d5353. Checked daily, last changed Nov 6, 2026.
Frontmatter
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
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, 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
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). Override the ids with GEMINI_FLASH_IMAGE_MODEL / GEMINI_PRO_IMAGE_MODEL.
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. 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
- Gather requirements via
AskUserQuestion— purpose, platform, content, brand, style, quantity - Research — Read
references/banner-sizes-and-styles.mdand use the bundledui-ux-pro-maxskill for style and palette guidance; if browser research is available and permitted, collect 3–5 references - 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
- 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
- Present — Show all options side-by-side, iterate on feedback
Banner: Quick Size Reference
| Platform | Type | Size (px) |
|---|---|---|
| Cover | 820 x 312 | |
| Twitter/X | Header | 1500 x 500 |
| Personal | 1584 x 396 | |
| YouTube | Channel art | 2560 x 1440 |
| Story | 1080 x 1920 | |
| 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 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
- Orchestrate — Track the steps below with the runtime's native task list; parallel subagents for independent work
- Analyze — Parse prompt: subject, platforms, style, brand context, content elements
- Ideate — 3-5 concepts, present via
AskUserQuestion - Design — bundled
brand→design-system→ui-ux-pro-maxskills; HTML per idea × size - Export — Chrome headless, Playwright, or Puppeteer screenshot at exact px (2x device scale factor where the tool supports it; see the reference)
- Verify — Open the exported PNGs in an available browser or image viewer and inspect them; fix layout/styling issues and re-export
- Report — Summary to
plans/reports/with design decisions - 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 | 1200×627 | |
| YT Thumb | 1280×720 | 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
Setup
export GEMINI_API_KEY="your-key" # https://aistudio.google.com/apikey
pip install google-genai pillow
# Optional MuAPI provider (no extra Python package required)
export MUAPI_API_KEY="your-key"
MuAPI uses the asynchronous model endpoint and prediction result API. See the
MuAPI API reference for authentication
and the nano-banana model contract
or nano-banana-pro model contract
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
pythoninstead ofpipwhere needed (e.g.,python -m pip install ...).
Integration
Bundled sub-skills: brand, design-system, ui-styling Related Skills: ui-ux-pro-max