Now liveThe Skillselion MCP - thousands of ranked skills, loaded into your agent mid-task. No install.Get it →
nextlevelbuilder avatar

Design

  • 12k installs
  • 111k repo stars
  • Updated July 27, 2026
  • nextlevelbuilder/ui-ux-pro-max-skill

Design is an agent skill that unifies brand identity, design tokens, UI styling, and AI-generated logos, CIP mockups, banners, icons, and social images.

About

This unified design skill routes agents across brand identity, design tokens, UI styling, logo generation, corporate identity programs, HTML presentations, banners, SVG icons, and social photos. Built-in workflows cover 55+ logo styles with Gemini image models, 50+ CIP deliverables, Chart.js slide decks, 22 banner art directions with platform size tables, and 15 icon styles exported as SVG via Gemini 3.1 Pro. Sub-skills delegate brand, design-system, and ui-styling tasks while Python scripts handle BM25 search, mockup generation, and HTML rendering. Banner and social photo flows use HTML/CSS design, chrome-devtools screenshot export, and AskUserQuestion for requirements. Setup needs Python, google-genai, pillow, and a GEMINI_API_KEY. Complete brand packages chain logo creation into CIP mockups and pitch decks across Facebook, Instagram, LinkedIn, YouTube, Google Ads, and print-ready specs. References cover routing guides, copywriting formulas, layout patterns, and per-platform safe zones so agents deliver consistent visuals without guessing sizes.

  • Unified routing for brand, tokens, UI, logo, CIP, slides, banners, icons, and social photos
  • Python scripts for logo/CIP search, Gemini generation, and HTML presentation rendering
  • 22 banner styles and platform size tables from social covers to Google Ads rectangles
  • SVG icon generation with 15 styles and multi-size export via Gemini 3.1 Pro
  • Social photo workflow: HTML/CSS design, screenshot export, and visual verification

Design by the numbers

  • 11,987 all-time installs (skills.sh)
  • +2,864 installs in the week ending Jul 28, 2026 (Skillselion tracking)
  • Ranked #51 of 1,896 Design & UI/UX skills by installs in the Skillselion catalog
  • Security screen: LOW risk (skills.sh audit)
  • Data as of Jul 28, 2026 (Skillselion catalog sync)
At a glance

design capabilities & compatibility

Requires a user-supplied GEMINI_API_KEY and Python packages google-genai and pillow.

Capabilities
logo generation · corporate identity mockups · banner design · svg icon generation · social photo export · html presentations
Works with
chrome · figma
Use cases
ui design · web design · image generation · presentations · marketing
Platforms
macOS · Windows · Linux
Pricing
Bring your own API key
Requires keys
GEMINI_API_KEY
From the docs

What design says it does

Unified design skill: brand, tokens, UI, logo, CIP, slides, banners, social photos, icons.
SKILL.md
55+ styles, 30 color palettes, 25 industry guides. Gemini Nano Banana models.
SKILL.md
Multi-platform social image design: HTML/CSS → screenshot export.
SKILL.md
npx skills add https://github.com/nextlevelbuilder/ui-ux-pro-max-skill --skill design

Add your badge

Show developers this skill is listed on Skillselion. Paste this into your README.

Listed on Skillselion
Installs12k
repo stars111k
Security audit3 / 3 scanners passed
Last updatedJuly 27, 2026
Repositorynextlevelbuilder/ui-ux-pro-max-skill

How do you produce consistent brand assets, UI specs, and platform-sized marketing visuals without juggling separate design tools?

End-to-end visual design workflow covering brand identity, design tokens, UI styling, AI logos, CIP mockups, banners, icons, and social images.

Who is it for?

Teams needing end-to-end visual identity, shadcn/ui styling, and multi-platform banners or social images from one agent workflow.

Skip if: Pure code-only backend work, video editing pipelines, or design tasks that forbid external Gemini API usage.

When should I use this skill?

Creating brand identity, design system tokens, logos, CIP mockups, pitch decks, banners, icons, or social photos for named platforms.

What you get

You get routed sub-skills, Python generation scripts, HTML/CSS deliverables, and exported PNG or SVG assets sized for each platform.

  • Brand and logo assets
  • CIP mockups
  • Banners icons or slide HTML

By the numbers

  • Version 2.1.0 with 55+ logo styles and 25 industry guides
  • CIP module covers 50 corporate identity deliverables
  • 22 banner art-direction styles and 15 icon styles documented

Files

SKILL.mdMarkdownGitHub ↗

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

TaskSub-skillDetails
Brand identity, voice, assetsbrandExternal skill
Tokens, specs, CSS varsdesign-systemExternal skill
shadcn/ui, Tailwind, codeui-stylingExternal skill
Logo creation, AI generationLogo (built-in)references/logo-design.md
CIP mockups, deliverablesCIP (built-in)references/cip-design.md
Presentations, pitch decksSlides (built-in)references/slides.md
Banners, covers, headersBanner (built-in)references/banner-sizes-and-styles.md
Social media images/photosSocial Photos (built-in)references/social-photos-design.md
SVG icons, icon setsIcon (built-in)references/icon-design.md

Logo Design (Built-in)

55+ styles, 30 color palettes, 25 industry guides. Gemini Nano Banana models.

Logo: Generate Design Brief

python3 ~/.claude/skills/design/scripts/logo/search.py "tech startup modern" --design-brief -p "BrandName"

Logo: Search Styles/Colors/Industries

python3 ~/.claude/skills/design/scripts/logo/search.py "minimalist clean" --domain style
python3 ~/.claude/skills/design/scripts/logo/search.py "tech professional" --domain color
python3 ~/.claude/skills/design/scripts/logo/search.py "healthcare medical" --domain industry

Logo: Generate with AI

ALWAYS generate output logo images with white background.

python3 ~/.claude/skills/design/scripts/logo/generate.py --brand "TechFlow" --style minimalist --industry tech
python3 ~/.claude/skills/design/scripts/logo/generate.py --prompt "coffee shop vintage badge" --style vintage

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

python3 ~/.claude/skills/design/scripts/cip/search.py "tech startup" --cip-brief -b "BrandName"

CIP: Search Domains

python3 ~/.claude/skills/design/scripts/cip/search.py "business card letterhead" --domain deliverable
python3 ~/.claude/skills/design/scripts/cip/search.py "luxury premium elegant" --domain style
python3 ~/.claude/skills/design/scripts/cip/search.py "hospitality hotel" --domain industry
python3 ~/.claude/skills/design/scripts/cip/search.py "office reception" --domain mockup

CIP: Generate Mockups

# With logo (RECOMMENDED)
python3 ~/.claude/skills/design/scripts/cip/generate.py --brand "TopGroup" --logo /path/to/logo.png --deliverable "business card" --industry "consulting"

# Full CIP set
python3 ~/.claude/skills/design/scripts/cip/generate.py --brand "TopGroup" --logo /path/to/logo.png --industry "consulting" --set

# Pro model (4K text)
python3 ~/.claude/skills/design/scripts/cip/generate.py --brand "TopGroup" --logo logo.png --deliverable "business card" --model pro

# Without logo
python3 ~/.claude/skills/design/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-preview)

CIP: Render HTML Presentation

python3 ~/.claude/skills/design/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

TopicFile
Creation Guidereferences/slides-create.md
Layout Patternsreferences/slides-layout-patterns.md
HTML Templatereferences/slides-html-template.md
Copywritingreferences/slides-copywriting-formulas.md
Strategiesreferences/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

PlatformTypeSize (px)
FacebookCover820 x 312
Twitter/XHeader1500 x 500
LinkedInPersonal1584 x 396
YouTubeChannel art2560 x 1440
InstagramStory1080 x 1920
InstagramPost1080 x 1080
Google AdsMed Rectangle300 x 250
WebsiteHero1920 x 600-1080

Banner: Top Art Styles

StyleBest For
MinimalistSaaS, tech
Bold TypographyAnnouncements
GradientModern brands
Photo-BasedLifestyle, e-com
GeometricTech, fintech
GlassmorphismSaaS, apps
Neon/CyberpunkGaming, 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 ~/.claude/skills/design/scripts/icon/generate.py --prompt "settings gear" --style outlined
python3 ~/.claude/skills/design/scripts/icon/generate.py --prompt "shopping cart" --style filled --color "#6366F1"
python3 ~/.claude/skills/design/scripts/icon/generate.py --name "dashboard" --category navigation --style duotone

Icon: Generate Batch Variations

python3 ~/.claude/skills/design/scripts/icon/generate.py --prompt "cloud upload" --batch 4 --output-dir ./icons

Icon: Multi-size Export

python3 ~/.claude/skills/design/scripts/icon/generate.py --prompt "user profile" --sizes "16,24,32,48" --output-dir ./icons

Icon: Top Styles

StyleBest For
outlinedUI interfaces, web apps
filledMobile apps, nav bars
duotoneMarketing, landing pages
roundedFriendly apps, health
sharpTech, fintech, enterprise
flatMaterial design, Google-style
gradientModern 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. Orchestrateproject-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. Exportchrome-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

PlatformSize (px)PlatformSize (px)
IG Post1080×1080FB Post1200×630
IG Story1080×1920X Post1200×675
IG Carousel1080×1350LinkedIn1200×627
YT Thumb1280×720Pinterest1000×1500

Workflows

Complete Brand Package

1. Logoscripts/logo/generate.py → Generate logo variants 2. CIPscripts/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

TopicFile
Design Routingreferences/design-routing.md
Logo Design Guidereferences/logo-design.md
Logo Stylesreferences/logo-style-guide.md
Logo Colorsreferences/logo-color-psychology.md
Logo Promptsreferences/logo-prompt-engineering.md
CIP Design Guidereferences/cip-design.md
CIP Deliverablesreferences/cip-deliverable-guide.md
CIP Stylesreferences/cip-style-guide.md
CIP Promptsreferences/cip-prompt-engineering.md
Slides Createreferences/slides-create.md
Slides Layoutsreferences/slides-layout-patterns.md
Slides Templatereferences/slides-html-template.md
Slides Copyreferences/slides-copywriting-formulas.md
Slides Strategyreferences/slides-strategies.md
Banner Sizes & Stylesreferences/banner-sizes-and-styles.md
Social Photos Guidereferences/social-photos-design.md
Icon Design Guidereferences/icon-design.md

Scripts

ScriptPurpose
scripts/logo/search.pySearch logo styles, colors, industries
scripts/logo/generate.pyGenerate logos with Gemini AI
scripts/logo/core.pyBM25 search engine for logo data
scripts/cip/search.pySearch CIP deliverables, styles, industries
scripts/cip/generate.pyGenerate CIP mockups with Gemini
scripts/cip/render-html.pyRender HTML presentation from CIP mockups
scripts/cip/core.pyBM25 search engine for CIP data
scripts/icon/generate.pyGenerate 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
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

Related skills

How it compares

Pick design as the umbrella router when a request spans brand, UI, and creative assets; load brand, design-system, or ui-styling directly for single-domain work.

FAQ

What API key does this skill require?

Set GEMINI_API_KEY from Google AI Studio and install google-genai plus pillow before running the logo, CIP, or icon Python scripts.

How are banners and social images exported?

Design in HTML/CSS, then screenshot to PNG at exact platform dimensions using chrome-devtools or Playwright with deviceScaleFactor 2x.

Which sub-skills handle brand versus implementation?

Brand identity uses the external brand skill, tokens use design-system, and shadcn/ui Tailwind code uses the ui-styling sub-skill.

Is Design safe to install?

skills.sh reports 3 of 3 security scanners passed. Review the Security Audits panel on this page before installing in production.

Design & UI/UXuiuxbranding

This week in AI coding

Five minutes, every Monday - the tools, releases and tactics for developers.

unsubscribe anytime.