UI/UX Pro Max: Making AI-Generated Interfaces Look Real
A 668KB design system skill that fixes the 'demo-itis' problem in AI-generated UI — 100 design rules, 96 color palettes, 57 font pairings.
AI-generated interfaces all share the same disease: they look like demos, not products. The colors clash. The fonts feel random. Spacing is inconsistent. Component styles fight each other. The root cause isn’t model capability — it’s the absence of design system constraints.
UI/UX Pro Max is a 668KB design system Skill that gives Claude Code the aesthetic judgment of a professional designer.
Three Layers of Data
100 Design Rules: These cover layout, spacing, color contrast, responsive breakpoints, component hierarchy, animation timing, and more. Not vague advice like “consider user experience.” Specific, measurable rules: “Primary buttons need a minimum tap target of 44x44px.” “Body text line-height between 1.5-1.8.” “Card border-radius 8-12px.”
96 Color Palettes: Organized by industry and mood. Tech blues, finance dark grays, healthcare white-greens, e-commerce warm oranges, dark academia tones, fresh naturals. Each palette ships with complete HSL values for primary, secondary, accent, background, and text colors.
57 Font Pairings: Heading + body + code combinations. Examples: Didot + Baskerville + Courier New (dark academia), Inter + Source Sans Pro + JetBrains Mono (modern tech). Every combination is tested for readability and visual harmony.
Installation and Activation
Global install (applies to all projects):
# Place the Skill files in the global skills directory
cp -r ui-ux-pro-max/ ~/.claude/skills/ui-ux-pro-max/Project-level install (current project only):
cp -r ui-ux-pro-max/ .claude/skills/ui-ux-pro-max/Two ways to activate it:
Automatic: When your prompt includes keywords like UI, interface, design, page, component, or layout, Claude Code loads the Skill on its own.
Manual: Say “use UI/UX Pro Max for this page” in your conversation.
What Actually Changes
Take a login page. Without the Skill, Claude generates the usual: centered white card, blue “Submit” button, system font, zero brand personality.
With the Skill loaded, the same prompt produces something different. It picks a color scheme that matches your project’s brand. Font pairing fits your industry’s tone. Spacing and border-radius follow unified design tokens. Button states are complete — hover, active, disabled. Input fields get focus-state borders. The password toggle icon is there. Visual hierarchy is clear from top to bottom.
The difference isn’t about adding more code. It’s that every detail has a design rule behind it instead of AI guessing.
Working with shadcn/ui
If your project already uses the shadcn/ui MCP (Anthropic’s recommended component library MCP), UI/UX Pro Max plays nicely with it. shadcn/ui provides component structure. UI/UX Pro Max provides design decisions. Stack them together: component standards + visual standards in one shot.
Extending It
Feel like 96 palettes aren’t enough? Add your own.
Drop a new JSON file in the Skill’s palettes/ directory following the existing format with your brand colors. Claude Code picks it up automatically next time it activates.
Same story for font pairings — add combination definitions in the fonts/ directory.
When to Use It (and When Not To)
Good fit: Solo projects, MVP prototypes, indie dev products, landing pages, admin dashboards. Anywhere you don’t have a dedicated designer but still need professional-looking output.
Not a good fit: Large teams with established design systems (use your own design tokens). Pixel-perfect design reproduction (that’s a Figma-to-code pipeline problem).
The core value here is simple: “make me a good-looking interface” stops being a coin flip and starts being a reliable outcome.