Then type these two lines inside Claude Code

These two come from Anthropic's own plugin marketplace, which is built in, so there is nothing to add first. Paste them one at a time.

The design taste skill · bans the AI defaults

Before it writes any code it has to produce a one-line design read: what kind of page this is, who it is for, the feel, and the system it will use. Then it is banned from the defaults every AI site reaches for — the purple gradient, the centred hero on a dark mesh, three equal feature cards, glass on everything, the same grey-blue text on the same sans-serif. The repo also ships a dozen sibling skills for specific looks: brutalist, minimalist, soft, and a redesign one.

The skill you invoke is called design-taste-frontend. Ask for "taste" and nothing happens, which is where most people give up on it.

Vercel's web interface guidelines · the pre-ship audit

Vercel publish a long list of rules for building interfaces that actually work: focus states, keyboard access, form behaviour, animation that respects people who have switched motion off, contrast, line length, image handling, dark mode, touch targets. This skill reads your files and reports every breach by file and line, tersely, without rewriting anything.

Run it as the last thing before you ship. It catches the boring failures that make a site feel cheap to use even when it looks fine.

awesome Design Skills · one aesthetic, applied consistently

A collection of 67 design presets. Each one is a file describing a named look — brutalist, clean, bento, clay, corporate, colourful — with its colour tokens, spacing, component rules and accessibility constraints written out for the agent. You pull the one you want and Claude designs inside it, so page five matches page one instead of drifting.

You can browse them all with previews at typeui.sh before committing, which is worth doing — the names do not tell you much.

Playwright · a real browser Claude can drive

Made by Microsoft, installed as a plugin from Anthropic's own marketplace. It gives Claude an actual browser to use: navigate pages, click things, fill and submit forms, upload files, resize to a phone, take screenshots, read the console and watch network requests. It reads the page through its accessibility structure rather than by looking at pictures, which is why it works reliably and does not need a model that can see.

This is how you find out that your contact form has been quietly broken for three weeks.

frontend-design · Anthropic's own design brief

Made by Anthropic, and quietly the most opinionated thing on this list. It puts Claude in the role of a design lead whose client has already knocked back the templated version, so it has to work out the subject, the audience and the actual job of the page before designing. It pushes deliberate typography — one or two typefaces, a real scale, lines short enough to read — and names specific AI-design giveaways to avoid, including Anthropic's own cream-and-terracotta house style, on the grounds that it is now a dead giveaway too.

Check before you install. It is popular enough that you may already have it.

Apple's Human Interface Guidelines · rules instead of adjectives

You cannot prompt your way to "premium". You can hand Claude somebody else's actual rulebook. This pack takes Apple's published Human Interface Guidelines, Google's Material Design 3 and the WCAG 2.2 accessibility standard and rewrites them as rules an agent can mark work against — nine skills in total, one for each Apple platform, one for Android and one for the web. The web skill is the one that matters for a website: about seventy rules covering contrast, focus states, forms, motion, typography, dark mode and what happens to your layout on a phone.

The best use is not building something new with it. It is pointing Claude at the site you already have and asking it to mark the work — which is a job it can do without needing a single idea of its own.