- 84UI styles
- 192Color palettes
- 74Font pairings
- 161Industry rules
- 98UX guidelines
- 22Tech stacks
Why AI-generated design looks the same
AI coding assistants are excellent at writing components and poor at deciding what those components should look like. Left to themselves they converge on the statistical center of their training data: the purple gradient hero, Inter at every size, no focus states, no contrast checking. People call the result AI slop.
This Claude skill replaces the guess with three things the model does not have on its own:
- A design knowledge base it can search. 84 UI styles, 192 industry-matched color palettes, 74 font pairings, 99 UX guidelines and 105 icon entries, stored as local CSV and queried with a BM25 + regex hybrid engine. No API calls, no keys, no network.
- Reasoning rules that map a product to a design. 161 industry rules that know a banking app should not use AI-purple gradients, and a meditation app should not use a data-dense dashboard layout.
- A pre-delivery checklist. Contrast ratios, focus states, touch targets, reduced motion and responsive breakpoints — verified before the agent reports it is done.
Install the Claude UI/UX skill
Claude Code (plugin marketplace)
/plugin marketplace add nicohodt/claude-code-ui-ux-skill
/plugin install ui-ux-pro-max@claude-code-ui-ux-skillAny assistant (CLI)
npm install -g ui-ux-pro-max-cli
cd /path/to/your/project
uipro init --ai claude # or cursor, windsurf, copilot, codex, gemini…Then just ask, in plain language:
Build a landing page for my SaaS productThe skill activates by itself — no slash command, no extra prompting.
Prompting alone vs. using the skill
| Plain prompting | With this skill | |
|---|---|---|
| Style choice | Statistically average — usually the same purple gradient | Matched to your industry from 84 documented styles |
| Colors | Invented per request, inconsistent between files | 192 palettes mapped to product types, reused project-wide |
| Typography | "Inter, sans-serif" every time | 74 curated pairings with Google Fonts imports |
| Accessibility | Only if you remember to ask | 99 UX rules enforced, WCAG AA contrast checked |
| Anti-patterns | Reproduced happily | 161 rules stating explicitly what not to do |
| Across sessions | Starts from scratch every time | --persist writes a design system the agent re-reads |
Accessibility is verified, not claimed
Plenty of design tools say they are accessible. Here it is a test that fails the build. All 192 color palettes are checked on every push:
| Check | Threshold | Status |
|---|---|---|
| Body text | 4.5:1 — WCAG AA | ✅ all 192 palettes |
| Card text | 4.5:1 — WCAG AA | ✅ all 192 palettes |
| Component text (buttons, badges) | 3:1 — WCAG 1.4.11 | ✅ all 192 palettes |
| Valid hex / rgba values | — | ✅ enforced |
| Borders never invisible | — | ✅ enforced |
This surfaced 14 palettes shipping white text on mid-tone backgrounds at ratios as low as 2.28:1 — below even the large-text floor. They are fixed, and the test prevents a regression. The wider suite of 192 tests also covers CSV structural integrity, search behaviour across all 12 domains and 22 stacks, design-system generation, and consistency between the documented numbers and the actual database.
Supported AI coding assistants
Claude Code, Cursor, Windsurf, GitHub Copilot, Codex CLI, Gemini CLI, Antigravity, Kiro, Qoder, Roo Code, KiloCode, Trae, OpenCode, Continue, CodeBuddy, Droid (Factory), Warp, Augment and CodeWhale.
Supported tech stacks
HTML + Tailwind, React, Next.js, shadcn/ui, Vue, Nuxt.js, Nuxt UI, Angular, Svelte, Astro, Laravel, Three.js, SwiftUI, Jetpack Compose, React Native, Flutter, JavaFX, WPF, WinUI 3, Avalonia, Uno Platform and UWP.
Open to contributors — genuinely
This project is built by the people who send pull requests. Every UI style, palette and industry rule is a row in a CSV file. You can add one in the GitHub web editor in about five minutes, without cloning anything or knowing Python.
- ⚡ Every PR gets a first response within 48 hours
- 📄 No CLA, no contributor agreement, no paperwork
- 🧩 One CSV row is a real contribution — small PRs are the point
- ✅ We fix your PR rather than close it
- 🏆 Every merged change is credited in
CONTRIBUTORS.mdand the release notes - 🎁 No paid tier, ever. Everything ships in the repository under MIT
What's most wanted right now
- Color palettes for underserved industries — agriculture, logistics, public sector, education
- Non-Latin font pairings — CJK, Arabic, Devanagari, Cyrillic
- Industry reasoning rules for anything not in the current 161
- New tech stacks — Solid, Qwik, Remix, Blazor, Ionic, Lit, Kotlin Multiplatform
- README translations into any language
- WCAG 2.2 and cognitive-accessibility guidelines
Frequently asked questions
What is a Claude skill?
A folder of instructions and data that Claude Code loads automatically when it is relevant to your
request. Unlike a prompt you paste each time, a skill lives in your project — or globally in
~/.claude/skills/ — and activates on its own. This one triggers whenever you ask for UI, UX,
design, layout, color, typography or accessibility work.
Which Claude skill is best for UI/UX design?
This is the most complete open-source option available: 84 UI styles, 192 color palettes, 74 font pairings, 99 UX guidelines and 161 industry reasoning rules, all searchable offline. It is MIT licensed, has no paid tier, and works across 19 AI coding assistants rather than Claude Code alone.
Does this Claude skill work with Cursor and Windsurf?
Yes — run uipro init --ai cursor or uipro init --ai windsurf. Seventeen other
assistants are supported too.
Does it need an API key or send data anywhere?
No. The database is local CSV and the search engine uses only the Python standard library. No network calls, no keys, no telemetry.
How is this different from telling Claude to "make it look good"?
That phrase resolves to the average of the model's training data. This skill replaces the average with an explicit, industry-matched design system plus a list of anti-patterns to avoid, then checks the result against WCAG AA contrast, touch-target sizes and reduced-motion rules before delivery.
Is it free? Can I use it commercially?
Yes to both. MIT licensed, no paid tier, no paywalled data. Use it in commercial products, fork it, ship it.
Do I need to be a designer to contribute?
No. Most contributions document a style, palette or rule that already exists in the wild. If you can explain why a fintech dashboard shouldn't use pastel gradients, you can contribute.