AI agent design knowledge base with 161 rules
AI can write UI code competently, but its default output is often "functional but ugly." It can write CSS but lacks industry-specific design judgment: it does not know that fintech should use Bento Grid, SaaS should use Hero-Centric layouts, or which fonts suit wellness. UI UX Pro Max Skill turns that judgment into 161 rules for the agent.
The workflow has two stages: design the system first, then write code. Given "Build a landing page for a SaaS product," the agent chooses a layout pattern (Hero-Centric + Social Proof), visual style (Soft UI Evolution), palette (Warm Neutral), font pairing (Inter + Fraunces), and chart type before writing Tailwind and components. The design system precedes the code.
This repository reached 78.7K stars because it addresses the frontend question "Why does everything AI makes look the same?" Agents share the same general design prior. UI UX Pro Max combines BM25 ranking and hierarchical reasoning to match 161 rules to your context, giving each project distinct design choices.
uipro init
Your requirements
Layout rule selection
Palette / fonts / style
Anti-pattern filtering
Code generation
An AI skill that provides design intelligence for building professional UI/UX across multiple platforms and frameworks.
uipro-cli installation and agent integration
The environment requires npm and an AI agent you use. The skill consists of a Python reasoning engine and SKILL.md. Install uipro-cli globally, then use uipro init --ai <agent> to integrate it into the directories of Claude Code, Cursor, Windsurf, or another agent.
# Install uipro-cli globally
npm install -g uipro-cli
# Check that the CLI runs
uipro --versionAgent integration options
uipro init --ai <name> writes the skill structure into the agent's configuration directory. If you use multiple agents on one machine, run init for each so they each receive the complete design intelligence. Official support covers 17 or more mainstream AI development environments.
# Claude Code (also applies to Claude Desktop)
uipro init --ai claude
# Cursor
uipro init --ai cursor
# Windsurf / GitHub Copilot / Codex / Continue / Roo
uipro init --ai windsurf
uipro init --ai copilot
uipro init --ai codexPrompt activation after installation
No further action is needed after installation. Enter "Build a landing page for my SaaS product" in the chat. The agent automatically reads SKILL.md, ranks the 161 rules, selects the best-matching layout, palette, and fonts, then writes React + Tailwind code.
# Enter this in a Claude Code conversation
Build a landing page for my SaaS product
Design a fintech dashboard for a small business
Create a wellness app onboarding flowSeven design knowledge tables and three reasoning systems
UI UX Pro Max is a rankable design knowledge base rather than a fixed template. These 12 cards cover 7 main data tables and several key systems. All figures correspond to the README; none are inferred.
Knowledge · 01
161 reasoning rules
Industry reasoning rules
Design judgment rules for fintech, SaaS, wellness, e-commerce, enterprise, and other industries. BM25 ranking selects the best-matching rules for the agent.
Knowledge · 02
67 UI styles
UI visual styles
67 styles including Glassmorphism, Claymorphism, Bento Grid, Neumorphism, and Soft UI Evolution. The agent chooses a style for the context rather than defaulting to Material.
Knowledge · 03
161 color palettes
Color systems
161 industry-validated palette combinations, from cool professional finance colors to warm wellness colors. The agent matches brand positioning rather than repeating the Tailwind default.
Knowledge · 04
57 font pairings
Font pairings
57 validated font combinations, including Inter + Fraunces and Manrope + Instrument Serif. Each pairing has a defined use context.
Knowledge · 05
25 chart types
Chart selection
25 chart types with use contexts. Dashboards, analytics reports, and mobile apps have corresponding chart recommendations that the agent matches automatically.
Knowledge · 06
15 tech stacks
Tech stack adaptation
Code templates for 15 tech stacks, including React, Vue, Svelte, Next.js, Tailwind, and shadcn. Generated code follows the idioms of your framework.
Knowledge · 07
99 UX guidelines
UX guidelines
99 rules for readability, accessibility, conversion, and mobile adaptation. The agent runs this 99-rule checklist before generating UI.
System · 08
BM25 ranking
Semantic retrieval
Converts your requirements into a query with BM25 and matches it against 161 rules. More precise than keyword matching and cheaper than embeddings, while maintaining recall and precision.
System · 09
Hierarchical reasoning
Hierarchical reasoning
Chooses industry and goals first, then layout, style, and colors. Each layer uses the previous layer's result. Decisions are explainable and debuggable.
System · 10
Anti-pattern filter
Anti-pattern filtering
Checks anti-patterns before output, automatically filtering issues such as insufficient icon color contrast, weak CTA verbs, CTAs matching the background, and overly thick dividers.
System · 11
Design system gen
Design system generation
Generates the full design system (colors, spacing, type scale, components) before writing code, then generates code from that system to maintain consistency from the start.
CLI · 12
uipro init --ai
17+ agent integration
Claude / Cursor / Windsurf / Antigravity / Copilot / Kiro / Codex / Qoder / CodeBuddy / Droid / KiloCode / Warp / Augment / Continue / Roo / Trae / OpenCode are all supported.
Automatically matched design combinations by context
| Context | Common layout pattern | Common visual style |
|---|---|---|
| SaaS landing page | Hero-Centric + Social Proof | Soft UI Evolution |
| Fintech dashboard | Bento Grid + Data cards | Glassmorphism / Refined Flat |
| Wellness / spa app | Vertical Storytelling | Claymorphism / Warm neutral |
| B2B enterprise console | Sidebar + Data sections | Neutral functional + High density |
| E-commerce product page | Visual-first + CTA stacking | Editorial / High contrast |
| Content platform | Editorial Grid | Magazine / Serif emphasis |
| Startup pitch site | Single-fold Hero + Manifesto | Bold typographic |
Six recommendations for BM25 matching accuracy
These six recommendations are derived from the README and SKILL.md reasoning structure. They are easily overlooked after installation but can noticeably improve prompt-to-rule matching. All command paths correspond to the README; none are inferred.
Specify industry and goals rather than just a beautiful page
BM25 ranking matches keywords in the prompt. 'Write a landing page for a fintech company offering SMB accounting' and 'Write a beautiful landing page' retrieve entirely different rule sets. More specific industry keywords produce more relevant design judgment.
Source · README · 161 reasoning rules
Optional explicit style selection
You can specify 'Bento Grid + Glassmorphism.' Usually, providing the context and letting the agent choose produces a closer match because 161 rules support the decision.
Source · README · 67 UI styles
Request the design system before code
Ask the agent to provide a design system document (colors / type / spacing) and wait for confirmation before generating code. Changing palettes and fonts during the lower-token design stage saves time and tokens compared with regenerating components later.
Source · README · Design system generation
Select the framework through the tech stack
Tell the agent to use Next.js App Router + Tailwind + shadcn. SKILL.md includes templates for 15 tech stacks; specifying one selects the corresponding framework idioms and components without mixing in Vue syntax or older React patterns.
Source · README · 15 tech stacks
Run an anti-pattern check
After generation, ask the agent to run an anti-pattern check. It compares the result with 99 UX guidelines and the anti-pattern list, identifying weak CTA contrast, low-contrast text, icon size problems, and more, with broader coverage than manual review.
Source · README · 99 UX guidelines
Name a chart family when charts are needed
When requesting a dashboard, add 'figure out what charts make sense.' The agent chooses from 25 chart types, considering data density and interaction needs rather than using a default chart type.
Source · README · 25 chart types
Serenity Spa design system and code example
This example shows the complete workflow for wellness client Serenity Spa's brand website on a machine where uipro init --ai claude has been run. Provide the context, and the agent performs ranking, selects a style, creates the design system, and generates code.
$ You ›
Design a landing page for Serenity Spa
(wellness, premium, target 30–45 women)
> [1/4 · reasoning layer · layout]
Industry → wellness · Goal → trust + sensory
> [2/4 · reasoning layer · visual style]
Candidate styles → Claymorphism / Soft UI / Editorial
ok: → Soft UI Evolution(warm neutral, low-contrast soft shadow)
> [3/4 · design system]
Palette: warm sand / sage / off-white / muted clay
Type: Fraunces (display) + Inter (body)
Spacing scale: 4 · 8 · 16 · 24 · 48 · 96
Components: Hero · Service Cards · Testimonials · CTA
> [4/4 · Anti-pattern filter]
> [code]
Next.js App Router + Tailwind + shadcn
ok: → page.tsx · 6 sections · 168 lines
ok: → design-tokens.json · applied to tailwind.config.js
ok: Complete · 1 prompt · 1 complete landing page
After you describe the scenario, the agent completes design reasoning before outputting code. Design decisions and code implementation are two separate stages.
Workflow and design rules
Industry keywords are ranking inputs. The words "wellness premium women 30–45" cause BM25 to retrieve 8 specific rules. "A beautiful web page" retrieves general rules and produces an ordinary result; more specific keywords lead to a closer design match.
Design the system before writing code. Define tokens (colors / type / spacing) before generating components. To change the palette, edit only design-tokens.json; Tailwind config updates automatically and all components stay synchronized, making this easier to maintain than hardcoded component styles.
The anti-pattern filter runs automatically before generation. The agent checks contrast, font size, accessibility, and other items before outputting code, without manual review. Engineers without a design background receive a built-in design review process.
Eight usage limitations
Combining general rules with brand guidelines
UI UX Pro Max's rule library supports layering. Add existing company brand guides, design tokens, and design systems through CLAUDE.md or SKILL.md to combine general design reasoning with brand-specific rules.
Brand guideline integration
1. Add a company brand SKILL.md. Write primary colors, fonts, tone of voice, prohibited choices, and compliance requirements in another SKILL.md. The agent reads both files, combining general judgment with company standards to become your company's AI design assistant.
2. Use the design system as a token source. Maintain design-tokens.json at the repository root. The agent prioritizes local tokens, ensuring all AI-generated components use the same color and spacing variables for consistency from day one.
3. Share one brand SKILL.md across agents. Colleagues using Cursor, designers using Windsurf, and PMs using Claude each initialize the same skill and brand guide. AI-generated designs follow the same rules, reducing style differences across tools.
4. Integrate anti-pattern checks into CI. Have the agent run checks against 99 UX guidelines during PR review. The CI workflow calls the agent to check frontend diffs for anti-patterns and leave review comments automatically.
5. Generate for V0 or Lovable rather than Figma. SKILL.md is a plain-text prompt layer suited to web-first AI development tools such as V0, Lovable, and Bolt, but cannot generate Figma output. Have it produce the design system first, then paste that into the tools' prompts for much better results than letting those tools decide independently.
Three further reading sources
① github.com/nextlevelbuilder/ui-ux-pro-max-skill: The README is the main entry point and lists all supported agents. ② npmjs.com/package/uipro-cli: The CLI package, including version and upgrade frequency. ③ nextlevelbuilder.io: The maintainer's website and other related AI development tools.
UI UX Pro Max uses 161 industry reasoning rules to shift an agent's design decisions from a general prior to matches for a specific scenario.