design

nextlevelbuilder/ui-ux-pro-max-skill · Agent Skill

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.

Jump to install ↓

Overview

Publisher	nextlevelbuilderOrganization
Repository	nextlevelbuilder/ui-ux-pro-max-skill ↗
Skill folder	`design`
Stars	140,807
Forks	14,924
Bundled files	19
License	MIT
Last updated	October 26, 2026
Links	Skill source ↗ · Repository ↗

Mozgi check

What we found in the skill files. Details come with a subscription.

Security

medium risk · 2 points need attention

Compatibility

needs extra software

Similar skills

139 similar skills found

Also with subscription

Installation

A skill is a folder with a SKILL.md file. Pick your agent and run the commands in a terminal (macOS, Linux or Git Bash on Windows) from your project root.

Copy the prompt into Claude, Codex or another assistant: it will review the skill and install it for you.

Install the “design” skill from mozgi.io (https://mozgi.io/skills/nextlevelbuilder-design/) for me.

1. Download the archive: https://mozgi.io/skills/nextlevelbuilder-design/download
   If it fails, take the skill folder from the source: https://github.com/nextlevelbuilder/ui-ux-pro-max-skill/tree/main/.claude/skills/design
2. Read SKILL.md and the other files. Check the skill is safe: no hidden commands, no sending data elsewhere, no scripts doing something other than described. If anything looks suspicious, stop and tell me.
3. Put the “design” folder into your agent's skills folder: .claude/skills/ for Claude Code, .agents/skills/ for Codex, .cursor/skills/ for Cursor, .gemini/skills/ for Gemini CLI. Inside the project if we are in one, otherwise in the home folder (~/.claude/skills/ etc.).
4. Make sure <skills folder>/design/SKILL.md exists.
5. Briefly tell me what this skill does and offer to try it on my task.

If you cannot do a step yourself, tell me what to click or type.

git clone --depth 1 --branch main https://github.com/nextlevelbuilder/ui-ux-pro-max-skill.git /tmp/ui-ux-pro-max-skill
mkdir -p .claude/skills
cp -r /tmp/ui-ux-pro-max-skill/.claude/skills/design .claude/skills/design

Restart Claude Code — the skill appears in the list; call it manually with /design. For all projects use ~/.claude/skills.

git clone --depth 1 --branch main https://github.com/nextlevelbuilder/ui-ux-pro-max-skill.git /tmp/ui-ux-pro-max-skill
mkdir -p .agents/skills
cp -r /tmp/ui-ux-pro-max-skill/.claude/skills/design .agents/skills/design

Codex looks for skills in .agents/skills from the current folder up to the repo root; call one with /skills or $design. For all projects use ~/.agents/skills.

git clone --depth 1 --branch main https://github.com/nextlevelbuilder/ui-ux-pro-max-skill.git /tmp/ui-ux-pro-max-skill
mkdir -p .cursor/skills
cp -r /tmp/ui-ux-pro-max-skill/.claude/skills/design .cursor/skills/design

Cursor picks the skill up on start; call it with “/” in Agent chat. Cursor also reads .claude/skills and .agents/skills. For all projects use ~/.cursor/skills.

git clone --depth 1 --branch main https://github.com/nextlevelbuilder/ui-ux-pro-max-skill.git /tmp/ui-ux-pro-max-skill
mkdir -p .gemini/skills
cp -r /tmp/ui-ux-pro-max-skill/.claude/skills/design .gemini/skills/design

Gemini CLI offers to activate the skill when a task matches — you approve it. For all projects use ~/.gemini/skills.

Review the source files

19 files Download Zip

Read SKILL.md and any companion files before deciding whether to install. Click a file to preview it.

SKILL.md contents

Original author text · read-only

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

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

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

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

|----------|-----------|----------|-----------|

| 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:

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 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

Frequently asked questions

What does the design skill do?

How do I install design?

Open the “Installation” block on this page and pick your agent — Claude Code, Codex, Cursor or Gemini CLI — for ready-made commands that copy the skill folder to the right place. Or copy the prompt from the “Via assistant” tab and let the assistant review and install the skill.

Which AI models work with design?

Skills are plain Markdown instructions (the Agent Skills format), so design works with any agent that reads SKILL.md: Claude Code, Codex, Cursor, Gemini CLI, GitHub Copilot, OpenCode and more. The model loads the instructions only when a task matches the skill's description.

Is design free?

The skill is published openly by nextlevelbuilder under the MIT license. The skill itself costs nothing — you only pay your AI provider for the tokens you use.

Is it safe to install skills?

A skill is a set of instructions your agent will follow, so read SKILL.md and its companion files before installing. Scripts in the skill folder only run if your agent runs them — keep an eye on what it does and do not grant unnecessary permissions.

How is a skill different from an MCP server or a plugin?

An MCP server or plugin gives the model new tools — code that runs and returns a result. A skill gives it knowledge and process: how to approach a task, which steps to follow and what good output looks like. It needs no server or API key.

Related skills

All skills →

slides Create strategic HTML presentations with Chart.js, design tokens, responsive layouts, copywriting formulas, and contextual slide strategies. nextlevelbuilder141k

ui-styling Create beautiful, accessible user interfaces with shadcn/ui components (built on Radix UI + Tailwind), Tailwind CSS utility-first styling, and canvas-based visual designs. Use when building user interfaces, implementing design systems, creating responsive layouts, adding accessible components (dialogs, dropdowns, forms, tables), customizing themes and colors, implementing dark mode, generating visual designs and posters, or establishing consistent styling patterns across applications. nextlevelbuilder141k

ui-ux-pro-max Comprehensive UI/UX design intelligence with 50+ styles, 97 palettes, and 9 technology stacks for building professional interfaces. nextlevelbuilder141k

banner-design Design banners for social media, ads, website heroes, creative assets, and print. Multiple art direction options with AI-generated visuals. Actions: design, create, generate banner. Platforms: Facebook, Twitter/X, LinkedIn, YouTube, Instagram, Google Display, website hero, print. Styles: minimalist, gradient, bold typography, photo-based, illustrated, geometric, retro, glassmorphism, 3D, neon, duotone, editorial, collage. Uses ui-ux-pro-max, frontend-design, ai-artist, ai-multimodal skills. nextlevelbuilder141k

design-system Token architecture, component specifications, and slide generation. Three-layer tokens (primitive→semantic→component), CSS variables, spacing/typography scales, component specs, strategic slide creation. Use for design tokens, systematic design, brand-compliant presentations. nextlevelbuilder141k

brand Brand voice, visual identity, messaging frameworks, asset management, brand consistency. Activate for branded content, tone of voice, marketing assets, brand compliance, style guides. nextlevelbuilder141k