Theme Factory
Use Claude Code to generate complete theme systems, dark mode, and design tokens in minutes. Consistent colors and typography automatically.
UI UX Pro Max
Gives your coding agent a searchable design library of 192 palettes, 74 font pairings, and 119 UX rules, then writes a design system before it builds a page.
139k stars14.7k forks
About
Gives your coding agent a searchable design library of 192 palettes, 74 font pairings, and 119 UX rules, then writes a design system before it builds a page.
What it tells your AI to do
Read your project files to detect the frameworkRun a local search script over bundled design dataCreate or edit UI and design-system files in your project
Source
@nextlevelbuilder on GitHubhttps://github.com/nextlevelbuilder/ui-ux-pro-max-skill
Someone else wrote this — read the source, verify it does what it says, and never share a password or API key with it.
Try it
Build a landing page for a beauty spa booking app. Start by writing the design system (style, palette, fonts, spacing) and list the accessibility checks you ran before handing it over.
Read the source
A skill is instructions your AI follows. Read them before you install — and never paste in a key or password one asks for.
SKILL.md
- name
- ui-ux-pro-max
- description
- Gives your coding agent a searchable design library of 192 palettes, 74 font pairings, and 119 UX rules, then writes a design system before it builds a page.
Read the full instructions (28 lines)
# UI UX Pro Max Use this when the task changes how something looks, feels, moves, or is interacted with: new pages, component refactors, color and type choices, UI reviews, navigation, animation, or responsive work. Skip it for backend, database, or infrastructure work. ## Step 1: Read the request Pull out the product type (SaaS, e-commerce, portfolio, dashboard, tool), the audience and usage context, any style words (minimal, playful, dark mode), and the stack. Detect the stack from the project (package.json, pubspec.yaml, Package.swift, composer.json). If you cannot detect it and it matters, ask. Never assume a stack. ## Step 2: Write a design system first For any new page or project, search the bundled data for the product type and industry and produce a design system: layout pattern, style, colors, typography, effects, and the anti-patterns to avoid. Save it as a master file with per-page overrides so later screens stay consistent. ## Step 3: Check rules in priority order 1. Accessibility: 4.5:1 contrast, alt text, keyboard navigation, labels on icon-only buttons, visible focus rings. 2. Touch and interaction: targets at least 44x44px with 8px spacing, loading feedback, no hover-only actions. 3. Performance: WebP or AVIF images, lazy loading, reserved space so layout shift stays under 0.1. 4. Style selection: match the product type, stay consistent, use SVG icons instead of emoji. 5. Then layout, typography, color, motion, forms, navigation, and charts. ## Step 4: Add stack guidance Search for the stack's own guidelines (React, Next.js, Vue, SwiftUI, Flutter, and others) and follow them in the code. ## Before you deliver Run a pre-delivery checklist: icon discipline, interaction feedback, light and dark contrast, safe areas on mobile, and accessibility. If a search returns nothing, broaden the keywords before falling back to general rules. ## Output The design system file, the built or revised UI, and a short list of the checks you ran. Adapted from @nextlevelbuilder's approach: https://github.com/nextlevelbuilder/ui-ux-pro-max-skill
Comments
No comments yet — be the first.
More like this
Visual Design
Use Claude Code to create social media graphics, icons, diagrams, and illustrations. Describe what you want, get PNG or SVG instantly.
Algorithmic Art
Create generative art, geometric patterns, and procedural visuals with Claude Code. Describe your vision, get production-ready SVG or canvas code.