AI Guides › Workbench
By Nigel Guy · 8 min read
Ask Claude Code for a website and you get one that works in minutes and looks like every other generated site: centred hero, purple gradient, three identical rounded cards. With nothing else to go on, the model reaches for the most common choices, and the most common choices are what look machine-made. Typing "make it look more premium" gets you the same page with a bigger shadow.
The rule: give Claude Code five separate things it doesn't have by default (taste, a rulebook, a design system, real components and a way to see its own output), and use them in that order on every page.
SKILL.md file of instructions, sometimes with scripts. Claude loads it when a task matches, or when you type /skill-name.npx runs a Node.js package without installing it permanently. You need Node.js for every command below.| You need | Why | Cost at time of writing |
|---|---|---|
| A paid Claude plan | Claude Code isn't on Free | Pro is $20 a month billed monthly, priced in US dollars before tax. Your £ figure depends on the exchange rate and VAT, so check at checkout |
| Node.js 18 or newer | npx installs and Playwright MCP need it |
Free |
| Python 3 | UI UX Pro Max's search script needs it | Free |
| A 21st.dev account | For an API key | Free tier available |
| A project folder | Skills and MCP servers attach to it | Free |
| # | Add-on | Type | What it does | Cost / free tier | Best for | Catch |
|---|---|---|---|---|---|---|
| 1 | Taste Skill (Leonxlnx) | Skill | Pushes layout, type, spacing and motion away from boilerplate, tuned by three 1–10 dials | Free, MIT | Every new page | Installs several variants unless you pick one |
| 2 | web-design-guidelines (Vercel) | Skill | Reviews UI code against Vercel's interface guidelines and reports findings as file:line |
Free, MIT | Checking a page once built | Fetches its rules from GitHub each run; reports, doesn't redesign |
| 3 | UI UX Pro Max | Skill | Generates a design system (pattern, palette, type, effects, things to avoid) from your product type | Free, MIT | Fixing colour, type and spacing before code | Needs Python 3 |
| 4 | 21st MCP (21st.dev) | MCP server | Searches a catalogue of React components, themes and templates; can fetch component code | Free plan includes 2 copies a day; paid plans from $6 a month billed yearly (US dollars) | React projects that need a pricing table or nav fast | Retrieval and AI generation are limited or paid |
| 5 | Playwright MCP (Microsoft) | MCP server | Opens a real browser so Claude can load the page, screenshot it and fix what it sees | Free, Apache 2.0 | Catching broken layouts before you do | Opens a visible browser window unless you add --headless |
Run these from your project folder. The -g flag installs a skill for your user account so it works in every project; -y skips the confirmation questions. Leave out -y the first time so you can see what is about to be installed.
npx skills add Leonxlnx/taste-skill --skill "design-taste-frontend" -g
Without --skill, you get every variant in the repository (minimalist, brutalist, image-to-code and others), and they compete. Install the main one and add a variant only when a project calls for it. Its three dials are DESIGN_VARIANCE, MOTION_INTENSITY and VISUAL_DENSITY, each from 1 to 10; you can set them in your request.
npx skills add vercel-labs/agent-skills --skill web-design-guidelines -g
The repository holds seven other skills; install only this one. Run it on finished files: /web-design-guidelines src/app/page.tsx.
The project documents two routes. Inside Claude Code:
/plugin marketplace add nextlevelbuilder/ui-ux-pro-max-skill
/plugin install ui-ux-pro-max@ui-ux-pro-max-skill
Or from your terminal, per project: npm install -g ui-ux-pro-max-cli, then uipro init --ai claude. It switches on automatically for UI work. Its scripts use the Python standard library only and, by the project's own account, make no network calls.
Get a free key at 21st.dev/mcp, then run:
npx @21st-dev/cli@latest init --client claude
21st.dev has replaced its older "Magic MCP" with the "21st MCP", so tutorials mentioning a /ui command are out of date. You now ask in plain English and Claude uses tools such as search and get_component. The generate tool only appears if your account has AI access, which is paid.
If you'd rather tell Claude to wire it up, this does the job:
Connect this Claude Code project to the 21st MCP server so you can search
21st.dev for React components and pull their code into the project.
My API key is stored in the environment variable API_KEY_21ST. Do not
paste the key into any file that is tracked by git.
Use the official install route from the 21st-dev/magic-mcp README. If it
needs anything you can't find, stop and ask me rather than guessing.
Afterwards, run claude mcp list and tell me whether "21st" shows as connected.
Fill in: nothing, as long as your key is already in API_KEY_21ST.
claude mcp add playwright npx @playwright/mcp@latest
This adds it at local scope: this project only, private to you. Add --scope user to have it everywhere. Type /mcp inside Claude Code to check it's connected.
The order matters: system first, then taste, then components, then look, then audit. Auditing before the look is settled just tidies up things you're about to replace.
You are building one page in this project. Work in five stages and stop
for my approval after stage 1.
Page: [WHAT_THE_PAGE_IS, e.g. "booking page for a dog groomer in Bristol"]
Audience: [WHO_VISITS_AND_ON_WHAT_DEVICE]
The one action the page exists for: [PRIMARY_ACTION]
Real content to use (no placeholders, no invented reviews): [PASTE_COPY]
Stack: [e.g. Next.js + Tailwind, or plain HTML]
1. System: use ui-ux-pro-max to produce a design system for this product
type. Show me the palette as hex values with a role each, the heading
and body fonts, the spacing scale and the button styles. Wait.
2. Taste: build the page with design-taste-frontend at
DESIGN_VARIANCE [1-10], MOTION_INTENSITY [1-10], VISUAL_DENSITY [1-10].
3. Parts: if a section needs a standard component (nav, pricing table,
FAQ), search 21st first and adapt the result to the design system
rather than inventing one. Tell me which components you used.
4. Eyes: with Playwright, open the page at 375px and 1440px wide,
screenshot both, and fix overlapping text, cut-off elements and
anything that breaks the design system.
5. Rules: run web-design-guidelines on the changed files. Fix
accessibility and focus-state findings; list anything you left and why.
If any input above is missing or unclear, ask before starting.
Before you finish, check: did every colour and font come from stage 1,
is any text invented, and did you look at both screenshots after your
last change?
Fill in: the bracketed page details, your real copy, your stack and the three dial numbers (start around 5 if unsure).
redesign-existing-projects variant is the one aimed at improving what's already there.-g -y. It's quick, but you end up with a dozen skills you didn't choose, some pulling in different directions.SKILL.md and any scripts folder first..mcp.json) is shared through git.