Claude writes working code, but every other landing page it produces is a purple gradient on white. The cure: the official skill, one prompt trick, and three community skills with tens of thousands of stars 🎨
What it does
Anthropic's official skill for distinctive, production-grade interfaces. It kicks in when you ask for a web component, a page, an artifact or an app: it makes the model pick a clear art direction first (typography, colour, composition, motion) and execute it precisely — instead of defaulting to the "AI look". The core principle from SKILL.md: both bold maximalism and strict minimalism work — what matters is intentionality, not intensity. It also explicitly bans clichés like default generic fonts.
How to set it up
It's part of the example-skills bundle in the official anthropics/skills repository (~161,000★):
/plugin marketplace add anthropics/skills
/plugin install example-skills@anthropic-agent-skills
Or drop the frontend-design/ folder into ~/.claude/skills/. Free and open source.
The "study great design" trick — works without the skill too
The heart of this viral technique: don't ask for "make it look nice", make Claude articulate a design direction first — the way a real frontend engineer would. A ready-made prompt:
"You are a senior frontend engineer with strong taste. Before writing any code: 1) describe 3-5 examples of outstanding design in the
space and what exactly makes them good (grid, typography, colour, motion); 2) state my project's art direction in a single paragraph; 3) only then build <COMPONENT/PAGE> strictly to that direction. Forbidden: default Inter/Arial, purple gradients, glassy cards with no reason to exist."
Why it works: the model stops guessing at design and gets an explicit anchoring context — the same mechanism every skill below is built on. The skill does this automatically and more deeply; the prompt is the quick version with nothing to install (and it works outside Claude Code too).
Three community UI skills (star counts checked 2026-07-14)
1. Impeccable — 46,000+ ★. By Paul Bakaus (creator of jQuery UI). Not a single prompt but a "shared design language" with the agent: 23 commands (polish, audit, critique, animate, bolder, quieter…), 7 reference guides (typography, colour, motion, space, interactions, responsive, UX copy) and a 46-rule detector for "AI slop". Free, Apache-2.0. Install with npx impeccable install, then /impeccable init in Claude Code. Also works in Cursor, Copilot, Gemini CLI, Codex CLI. Site: impeccable.style.
2. taste-skill — 63,000+ ★ (viral posts call it "TasteKill" — that's a garbled name). The star leader of the three, an "anti-slop" skill: it derives layout, typography, motion and density from a brief ("minimalist", "editorial", "SaaS"…). Variants included: gpt-taste (stricter, for Codex), image-to-code (screenshot → code), redesign-existing-projects (an audit of a finished project). MIT. Install with npx skills add https://github.com/Leonxlnx/taste-skill --skill "design-taste-frontend", or just copy the SKILL.md. Repo: Leonxlnx/taste-skill.
3. emil-design-eng — 12,500+ ★. Emil Kowalski (author of the Sonner toast library, runs the animations.dev course) packaged his articles into a design-engineer skill. Its strongest suit is motion: the right easing (ease-out on entrance), duration, frequency, accessibility, "shadow or border". It ships with review-animations and improve-animations — animation review and auditing by his rules. MIT. Install with npx skills@latest add emilkowalski/skills. Repo: emilkowalski/skills.
When to use it
- The official
frontend-design— the baseline vaccine against "generic" for any UI; install it first. - Impeccable — when you're iteratively polishing a product and want to steer design with a single word (
/impeccable polish). - taste-skill — when you need a bold "editorial" landing page and style variety driven by the brief.
- emil-design-eng — when the interface is already decent but the animations give away the "AI job".
- Just the prompt trick — when you're trying it without installing anything, or you're not in Claude Code.
Gotchas
- Don't install all four at once: the skills' instructions overlap and argue with each other — start with one, add deliberately.
- GitHub stars ≠ guaranteed taste: with an empty "make it nice" brief the result is mediocre even with a skill.
- Community skills aren't Anthropic: authors change the content without notice, so skim SKILL.md before installing.
- Skills set the look but don't fix UX logic: states, empty screens and error handling are still your job.
Example
"Build a landing page for a SaaS product with a strong page load and distinctive typography" — with the skill, Claude will first set a single art direction, then build the page strictly to it, avoiding the clichéd patterns.