UI UX Pro Max

Install

/plugin marketplace add nextlevelbuilder/ui-ux-pro-max-skill
/plugin install ui-ux-pro-max@ui-ux-pro-max-skill

This is third-party code. Review the repository files before installing.

What it does

The skill gives an agent a local base for UI design: 79 styles, 192 palettes, 74 font pairings, 25 chart types, 119 UX guidelines and advice for 22 stacks. Search runs through a Python BM25 script. On request the agent picks style, colors and typography for the product type, writes the code and checks it against common UX anti-patterns. Version 2.0 added a design system generator with 192 industry rules.

Who it is for. Developers and designers who build landing pages, dashboards and mobile screens with an agent.

Example request

Create a healthcare analytics dashboard with a dark theme and pick the palette and charts

Limitations

Search requires Python 3, and the scripts use only the standard library with no network calls. Branding, logos, slides and image generation are in the premium version. The old uipro-cli package is stale, the current one is ui-ux-pro-max-cli.

How to disable. Run uipro uninstall, uipro uninstall --ai claude for a specific agent, or uipro uninstall --global for a global install.

Security check

• Installs a global npm package
• The skill runs local Python scripts

README in short

UI UX Pro Max is described as a skill with design intelligence for interfaces across platforms. The README lists the size of the base, the style taxonomy and rules for resilient text and compact UI. Installation is via the Claude Code marketplace or the uipro CLI for about twenty agents, including global installs. A comparison with the premium version is included.

SKILL.md

---
name: banner-design
description: "Design banners for social media, ads, website heroes, creative assets, and print. Multiple art direction options with optional generated or supplied 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."
argument-hint: "[platform] [style] [dimensions]"
license: MIT
metadata:
  author: claudekit
  version: "1.0.0"
---

# Banner Design - Multi-Format Creative Banner System

Design banners across social, ads, web, and print formats. Generate multiple art direction options with CSS-built, user-supplied, or optionally generated visual elements. This skill handles banner design only. It does not handle video editing, full website design, or print production.

## When to Activate

- User requests banner, cover, or header design
- Social media cover/header creation
- Ad banner or display ad design
- Website hero section visual design
- Event/print banner design
- Creative asset generation for campaigns

## Available Resources

This workflow is self-contained: it requires no sibling skills or skill-relative scripts. Use `references/banner-sizes-and-styles.md` for the bundled size, safe-zone, and art-direction guidance. Browser research, image generation, and screenshot tooling are optional capabilities; when unavailable, use supplied assets, CSS-built visuals, and the runtime's standard preview or capture workflow.

## Workflow

### Step 1: Gather Requirements (AskUserQuestion)

Collect via AskUserQuestion:
1. **Purpose** — social cover, ad banner, website hero, print, or creative asset?
2. **Platform/size** — which platform or custom dimensions?
3. **Content** — headline, subtext, CTA, logo placement?
4. **Brand** — existing brand guidelines, logo files, colors, or typography?
5. **Style preference** — any art direction? (show style options if unsure)
6. **Quantity** — how many options to generate? (default: 3)

### Step 2: Research & Art Direction

1. Read `references/banner-sizes-and-styles.md` for the target format, safe zone, and suitable styles.
2. If browser research is available and permitted, collect 3–5 references for composition and art-direction inspiration. Otherwise, work from the bundled reference and any examples supplied by the user.
3. Select 2–3 complementary art directions and state how each supports the banner's purpose.

### Step 3: Design & Generate Options

For each art direction option:

1. **Create the banner in HTML/CSS**
   - Use the exact platform dimensions from the size reference
   - Apply safe-zone rules (critical content in the central 70–80%)
   - Use at most 2 typefaces, a single CTA, and text contrast of at least 4.5:1
   - Apply the user's supplied logo, colors, typography, and imagery; do not invent brand rules

2. **Choose a visual source**
   - Prefer user-supplied or appropriately licensed assets when provided
   - Use gradients, geometric forms, type, and other CSS-built visuals for a dependency-free result
   - If the runtime provides an authorized image-generation capability, it may generate a background or illustration at the target aspect ratio
   - Keep generated visual prompts free of text, letters, and words so final copy remains editable and accessible in HTML

Related