Frontend Design (Anthropic, official)

tl;dr: a design-lead role for the agent. The skill says: don’t ship the default — pick a brief, ground choices in the subject matter, plan a token system first, then build. The most useful thing in it is the explicit list of five AI-generated default looks (cream + serif + terracotta; near-black + acid-green; broadsheet hairline rules; the SaaS-card kit; tracked-out ALL-CAPS eyebrow + ”→” button chrome) — so the agent has a vocabulary to refuse its own habits.

What it actually does

The SKILL.md we fetched on 2026-09-10 (anthropics/skills/main/skills/frontend-design/SKILL.md, ~8.2 KB) is an instruction-only skill. No scripts, no templates, no assets folder — just a procedure the agent follows when asked to build or reshape a UI.

The framing it gives the agent is the design lead at a studio that “gives every client a distinct visual identity that is not mistaken for anyone else’s.” A previous client has already rejected proposals that felt cliché; the skill treats that as the default case, not the exception.

Process (verbatim from SKILL.md):

1. Ground the design in the subject matter. If the brief doesn’t identify the product, identify it before designing — propose one concrete subject, audience, and primary job. The subject’s industry, materials, and vernacular drive the distinctive choices. “A toy for girls aged 8–11 will be very aesthetically different from a dashboard for financial analysts.”
2. Plan first, build second. Write a compact token system — color as 4–6 named hex values, typefaces + roles, a layout concept in one-sentence prose plus ASCII wireframes, and high-level principles.
3. Review the plan against the brief. If any part reads like the generic default you’d produce for any similar page (work through a similar prompt to compare), revise that part and say what changed. Only confirm uniqueness, then build.
4. Build. Be careful with CSS selector specificity — type selectors like .section and element selectors like .cta can cancel each other out, especially with padding/margin between sections.
5. Self-critique. Take screenshots if the environment supports it. Spend boldness in one place; let everything around it stay quiet.

The skill does not produce files. It changes how the agent plans and writes code.

The five AI defaults the skill names (the meat)

This is the list any agent should refuse before reaching for. From SKILL.md, with the wording intact:

1. Cream + serif + terracotta. Warm cream background near #F4F1EA, high-contrast serif display, terracotta or warm-clay accent near #D97757 — flagged explicitly as Anthropic’s own Claude-interaction accent, so on a user’s brief it reads as a tell.
2. Near-black + single acid accent. Near-black background with one bright acid-green or vermilion accent.
3. Broadsheet. Hairline rules, zero border-radius, dense newspaper-style columns.
4. The SaaS-card kit. Identical rounded cards, one border-radius on everything regardless of hierarchy, the same soft grey shadow rgba(0,0,0,.1) under each, gradient washes as decoration.
5. Template chrome. Tracked-out ALL-CAPS eyebrow above every heading; meta strings joined with middle dots (A · B · C); “WORD — fragment” labels with a spaced em dash; tinted near-black (#0B0B0B, #111) standing in for black; a monospace face for small data labels; ”→” appended to link and button text.

All five are legitimate for some briefs — the skill is candid about that. The rule is: don’t reach for them as defaults. Where the brief pins a direction, follow it (even when it asks for one of these looks). Where the axis is free, spend it on a choice, not a habit.

Hero, type, and motion

Three other points worth keeping:

• Hero. Open with the most characteristic thing in the subject’s world, in the form most appropriate to it — a headline, image, animation, live demo, or interactive moment. “A big number with a small label, supporting stats, and a gradient accent is the default treatment” — only use that if it’s actually the best option.
• Typography. One family or two. If two, make them clearly distinct. Don’t reach for default families. Set a clear type scale following The Elements of Typographic Style. Line lengths <80 chars; serifs can run slightly longer and need slightly more line-height than sans. Avoid single-word italic accents, all-caps labels, and “eyebrow” labels above content — those are the commonest tells. When type is used as a visual element, use the treatment as an active part of the design, not a neutral delivery vehicle.
• Motion. Non-user-triggered motion is sparingly and deliberately. One orchestrated moment (a page-load sequence or one reveal) lands harder than scattered hover effects and fade-up sections. Motion that answers a user action (opening, expanding, confirming) is welcome when it shows what changed. Always respect prefers-reduced-motion.

Structural devices encode information

A separate point the skill makes explicit: visual structure is information. Outlines, borders, numbering, eyebrows, dividers, labels encode useful information about the content rather than decorate it. Many generic designs use 01 / 02 / 03 numbered markers, but that’s only appropriate if the content actually is a sequence — like a stepped process or a timeline. Before adding numbered markers, check the content really is a sequence.

Copy as design

The skill’s last major section is about writing. Words are design content, not decoration. The rules it gives:

• Name things by what the user understands, not how the system is built. A user manages notifications, not webhook config.
• Active voice as default. A button says exactly what happens: “Save changes,” not “Submit.” Same name through the whole flow — the button that says “Publish” produces a toast that says “Published.” The vocabulary of an interface is signposting.
• Treat failure and emptiness as moments for direction, not mood. Errors don’t apologize; they’re specific about what went wrong and how to fix it, in the interface’s voice rather than a person’s. Empty screens are invitations to act.
• Plain verbs, sentence case, no filler. Tone matched to the brand and audience. Let each written element do exactly one job.

Install

Part of the example-skills plugin in anthropic-agent-skills per .claude-plugin/marketplace.json (fetched 2026-09-10). Install requires registering the marketplace first; the marketplace ships whole plugins, so there is no single-skill install path for frontend-design alone.

# Claude Code — one-time marketplace registration
/plugin marketplace add anthropics/skills

# Install the example-skills plugin (includes frontend-design)
/plugin install example-skills@anthropic-agent-skills

On Claude.ai, the example skills ship pre-built for paid plans. On the API, attach via container.skills with code_execution_20250825 enabled, the same way as the other Anthropic skills.

Gotchas

• No scripts, no templates. This is an instruction-only skill. Don’t expect to find templates/ or scripts/ folders inside skills/frontend-design/ — there isn’t one. Compare to web-artifacts-builder (scripts/init-artifact.sh, scripts/bundle-artifact.sh) or algorithmic-art (templates/viewer.html). Different shape on purpose.
• The five AI tells are not banned outright. They are legitimate for some briefs; they are banned as defaults. Follow the brief’s own words even when it asks for one of these looks. The skill says this in two places.
• The “design lead” framing is the move. “Approach this as the design lead at a design studio known for giving every client a distinct visual identity” — that one sentence changes how the agent negotiates briefs, including being willing to push back on a templated request.
• CSS specificity still trips the agent. The skill calls it out by name: type-based selectors (.section) and element-based selectors (.cta) cancel each other out, especially with padding/margin between sections. Worth a check before shipping.
• Two-pass plan-then-build. The skill explicitly says don’t start coding until the plan is “confirmed unique” against a similar generic prompt. Skipping the review step is the documented failure mode.
• Self-critique is part of the loop. “Consider Chanel’s advice: before leaving the house, take a look in the mirror and remove one accessory.” The skill is direct about cutting decoration that doesn’t serve the brief.
• sandbox_test is untested. We read the SKILL.md, LICENSE.txt, and marketplace manifest; we did not exercise the design-lead procedure in a sandbox.
• Stars are session-fresh. anthropics/skills showed 175,502 stars, 20,772 forks via the GitHub API on 2026-09-10. Don’t carry stale numbers from older writeups.
• License is Apache 2.0, not the proprietary terms in the four document skills (docx/pdf/pptx/xlsx). The skill-creator and the example-skills plugin are all Apache 2.0 unless LICENSE.txt says otherwise.

Related

• Refactoring UI Audit — gold authored skill example on the same shelf; the practical “audit a UI” loop this skill is the theory of
• Algorithmic Art (Anthropic) — same example-skills plugin, sibling from anthropics/skills
• Web Artifacts Builder (Anthropic) — same example-skills plugin; ships the React + Vite + Tailwind + shadcn/ui scaffolding for complex claude.ai artifacts
• you don’t need animations (Emil Kowalski) — motion-restrained complement; pairs naturally with this skill’s “spend boldness in one place” rule
• Skill Creator (Anthropic) — meta-skill for writing new skills; this skill is one of the SKILL.md files it would teach you to author