Best Claude Code skills for UI design: UI UX Pro Max, Impeccable and Taste Skill
Three popular design skills that stop AI-generic UI: what each does, how to install it in Claude Code, how they compare, and how to combine them.
Ask any AI agent for a landing page and you can guess the result: Inter font, a purple-to-blue gradient, cards inside cards, an icon in a rounded square above every heading. It works, and it looks like every other AI-generated page. A new kind of Claude Code skills for UI design fixes that by giving the agent real design knowledge. Here are the three most popular — UI UX Pro Max, Impeccable and Taste Skill — what each does, how to install it, and how to combine them.
1. Why AI-generated UI all looks the same
Models learned design from the average of the web, so without guidance they produce the average: safe fonts, safe colors, safe layouts. Telling the agent “make it look better” rarely helps, because it does not know what better means for your product.
Design skills give it that knowledge in a form it can use: rules, ready-made design systems, lists of anti-patterns, and workflows that make it check its own output. If skills are new to you, start with Claude Code skills: how to create your own.
2. UI UX Pro Max: a design system generator
UI UX Pro Max (MIT) is a large searchable database of design knowledge: dozens of UI styles, close to two hundred color palettes, font pairings, chart types, UX guidelines and rules for putting them together for a given product and tech stack. Describe what you are building — “a dashboard for healthcare analytics” — and it picks a style, palette and typography that fit.
# as a Claude Code plugin
/plugin marketplace add nextlevelbuilder/ui-ux-pro-max-skill
/plugin install ui-ux-pro-max@ui-ux-pro-max-skill
# or with its CLI, into the current project
npx ui-ux-pro-max-cli init --ai claude
It activates on its own when you ask for UI work, or explicitly with
/ui-ux-pro-max. Its search script needs Python 3. It also installs into
Cursor, Codex, Gemini CLI, OpenCode and many other agents.
Best for: new projects where you do not have a design system yet and want a coherent one fast.
3. Impeccable: a design language and anti-pattern detector
Impeccable (Apache-2.0, by Paul Bakaus) teaches the agent a design vocabulary and catches the typical AI tells: overused fonts like Inter or Arial, gray text on colored backgrounds, pure gray instead of tinted neutrals, nested cards, bounce easing, purple gradients. Its detector is a set of deterministic rules, so the same mistake is caught every time.
# as a Claude Code plugin
/plugin marketplace add pbakaus/impeccable
# then open /plugin and install Impeccable
# or from the project root
npx impeccable install
# and inside Claude Code
/impeccable init
It adds two dozen commands under /impeccable, such as
critique, audit, polish, typeset,
layout, colorize, animate, bolder
and quieter — each a focused pass over your UI.
Best for: improving an existing interface step by step, and reviews: “critique this page”, then “polish” what came up.
4. Taste Skill: art direction, real photos and a browser check
Taste Skill (MIT) takes a different route. Its main skill,
design-taste-frontend, offers the agent a few researched art directions,
lets it commit to one, builds the page with credited open-license photos instead of
placeholders, and then checks the result in a real browser at three
widths and revises it — up to three rounds.
npx skills add https://github.com/Leonxlnx/taste-skill --skill "design-taste-frontend"
It needs Node 22+ and an installed Chrome, Edge or Chromium, and network access to find
photos. It works with Claude Code and Codex and is framework-agnostic. Note: older
guides describe settings like DESIGN_VARIANCE; the current version works
differently, and some former sub-skills moved to separate repositories.
Best for: landing pages and marketing screens where the look matters more than an existing design system.
5. UI UX Pro Max vs Impeccable vs Taste Skill
| UI UX Pro Max | Impeccable | Taste Skill | |
|---|---|---|---|
| Approach | database of styles and rules | design language + anti-pattern rules | art direction + browser check |
| Strongest at | a design system from scratch | reviewing and polishing | distinctive landing pages |
| How you use it | automatic, or /ui-ux-pro-max | commands under /impeccable | automatic for frontend work |
| Needs | Python 3 | — | Node 22+, Chrome or Chromium |
| License | MIT | Apache-2.0 | MIT |
6. How to combine design skills
- New product: UI UX Pro Max to choose the design system, then
Impeccable's
critiqueandpolishon the first screens. - Existing app: Impeccable alone —
auditto find the problems, then targeted passes liketypesetorlayout. - Landing page: Taste Skill for the first version, Impeccable to review it.
- Always: let the agent see what it built. A browser tool such as the Playwright MCP server lets it render the page and check it instead of guessing — see What is an MCP server.
Do not load all three for every task. Each skill adds instructions to the context, and two skills with different taste will pull in different directions. Pick the one that fits the job.
7. Limits: what design skills will not do
- They do not know your brand. If you have a design system, put its tokens and rules in your CLAUDE.md or a skill of your own — otherwise a generic “good design” skill may fight it.
- They do not replace a designer's judgment. They remove the obvious mistakes; deciding what your product should feel like is still yours.
- Community projects change fast. Commands and install steps move between versions — when something does not match, check the project's README.
Design is judged on the device it is made for. With coden you can open the app the agent is building on your computer right on your phone, in Preview, and tap through the new screen on a real display before you commit it.
Do you see it differently? Write to support@coden-app.com.