Anthropic's frontend-design skill names the three cliché "AI looks", hex codes included

Anthropic ships an official Claude Code skill whose whole job is stopping your agent from designing the same page every other agent designs. It is called frontend-design, it is 55 lines of prose with no scripts and no component library, and it has 825,477 installs as of the August 27, 2026 Skillselion catalog sync, which makes it the third most-installed agent skill overall.

We read the file line by line for the frontend-design deep dive on its listing page. Disclosure: we run Skillselion, the directory the dive lives on.

The part worth your attention is one paragraph in the middle. Anthropic describes, with a hex code, exactly what AI-generated design collapses into when nobody stops it.

The paragraph to screenshot

"AI-generated design right now clusters around three looks: (1) a warm cream background (near #F4F1EA) with a high-contrast serif display and a terracotta accent; (2) a near-black background with a single bright acid-green or vermilion accent; (3) a broadsheet-style layout with hairline rules, zero border-radius, and dense newspaper-like columns. All three are legitimate for some briefs, but they are defaults rather than choices."

Source: SKILL.md, "Process" section, anthropics/skills on GitHub. Quotes verified against the upstream file on August 19, 2026; the file last changed June 9, 2026.

If you have shipped an agent-built landing page this year, you have probably shipped look number one.

A blacklist became a description, and that is the interesting engineering

The earlier version of this skill banned aesthetics by name: Inter, Roboto, purple gradients on white. The rewrite drops the blacklist entirely and replaces it with descriptions of the failure modes. A banned-fonts list rots the day a new default font appears. A description of the cliché generalizes: the agent can recognize the cream-serif-terracotta pattern in any font, any framework, any year.

That is a prompt-engineering pattern worth stealing for your own skills: describe the failure mode you want avoided instead of enumerating instances of it.

What the other 50 lines do

The file changes agent behavior in eight moves. The short version:

1. A focused trigger. The frontmatter description scopes it to visual design for new or reshaped UI, so it does not fire on every request that touches pixels.
2. A role with stakes. "Approach this as the design lead at a small studio" whose client "has already rejected proposals that felt templated". The load-bearing line: "take one real aesthetic risk you can justify".
3. Subject grounding. If the brief is vague, the agent must pin a concrete subject, audience, and the page's single job before designing, out loud.
4. Six design principles. One paragraph each: hero as thesis, typography as personality, "Structure is information", motion as "an orchestrated moment", complexity matched to the vision, and copy as a principle of its own.
5. The calibration warning. The three looks above.
6. A two-pass process. Plan a compact token system (named palette, type pairing, layout, one signature element), then critique the plan for genericness before writing any code. Code comes third.
7. A restraint rule. "Spend your boldness in one place", plus Chanel's mirror advice: remove one accessory.
8. A writing chapter. Roughly a fifth of the file is about words: "A person manages notifications, not webhook config", "Save changes" not "Submit", and errors that never apologize and are never vague.

The full walkthrough with every quoted section lives in the deep dive on the frontend-design listing.

What it will not do for you

Two honest caveats from our read. It optimizes for distinctiveness, so on plain internal tools it can over-art-direct; constrain it with your own brief. And it contains almost no engineering: one CSS-specificity warning and a quality floor (responsive, keyboard focus, reduced motion), no accessibility depth, no performance budgets. It tells your agent what designed means, not how to ship it.

One more thing to check before installing: a repackaged clone of this skill circulates under a different owner. Verify the repo owner is anthropics.

Where it sits in the taste stack

frontend-design is the biggest entry in a cluster of skills that all attack the same problem: agent output that looks generated. If you are building out a design-side setup, these are the neighbors, with installs as of the same August 27 catalog sync:

• Grill Me, the plan-interrogation skill by Matt Pocock, 985,753 installs. It now sits above frontend-design at number 2 overall; the two are often installed together, one for the plan, one for the pixels.
• anti-ui-slop, the UI cliché blocker, 528,289 installs. The community's harder-edged answer to the same three looks.
• web-design-guidelines by Vercel Labs, 582,881 installs. Built on explicit rules where frontend-design leans on a role; a useful contrast in approach.
• design-taste-frontend, the taste layer, 410,792 installs, and its sibling minimalist-ui skill.
• impeccable, the frontend polish skill, 250,618 installs, for the final polish pass.
• emil-design-eng, Emil Kowalski's design-engineering skill, 233,965 installs, for the motion-and-microinteraction end.

We keep the whole category ranked by real installs on the frontend design skills hub, and the section-by-section reads for other major skills in the Deep Dives library. If you want to see how a discovery skill does the instructions-only trick at even larger scale, the find-skills listing sits at 3,135,861 installs, and the broader skills directory is refreshed daily from skills.sh, GitHub and MCP registries, ranked by real installs.

Install line, if you want it:

npx skills add https://github.com/anthropics/skills --skill frontend-design

825,477 installs, as of the August 27 sync, for a file that is mostly a client brief. Read the file before you let it art-direct you.