Sources

# Anthropic `frontend-design` skill and its companion article
- id: anthropic-frontend-design-skill · url: https://github.com/anthropics/skills/blob/main/skills/frontend-design/SKILL.md · fetched: 2026-09-27 · method: repo@41bbe19d1a1a7eaab5e7bb9050a417e5c6cffc8f
- review_by: 2026-12-26 (perishable +90d) · licence note: paraphrased digest, not a mirror
> 中文导语：Anthropic 官方的 `frontend-design` skill（也作为 Claude Code 插件分发）是所有设计 skill 要超越的基线；它要求"从题材出发、先计划再对照 brief 审一遍、只在一处大胆"，并列出一份带日期的"AI 生成界面聚类"清单。本文件同时摘要 2025-11-12 的配套博客文章（"分布收敛"机制）。更大范围的 Anthropic 设计类 skill 见 `anthropic-design-skills`。

Sources read on 2026-09-27:
- SKILL.md at `41bbe19` (last change to this path: 2026-09-03, PR #1713 "Update frontend-design skill to avoid generic design defaults"); repo HEAD was `33375500` (2026-09-24), so the file is current.
- Earlier versions for the change history: `0075614` (2025-12-04, 583 words), `2235be7` (2026-06-09, PR #1293, 1336 words); current is 1516 words.
- Plugin copy `anthropics/claude-plugins-official` `plugins/frontend-design/skills/frontend-design/SKILL.md` (main): byte-identical to the skill.
- Article: https://claude.com/blog/improving-frontend-design-through-skills (Anthropic Applied AI team, 2025-11-12), method fetch.

## Key facts
1. **Role framing** (SKILL.md, opening): the model is the design lead of a studio known for identities "not mistaken for anyone else's"; the client has already rejected cliché or templated proposals; take aesthetic risk "if justified". (June 2026 wording was "take one real aesthetic risk you can justify"; September softened it.)
2. **Ground in the subject** (§ "Ground your designs in the subject matter"): if the brief does not name the product, propose one concrete subject, audience and primary job and confirm with the client; use memory of client preferences as a hint; distinctive choices come from the subject's industry, materials and vernacular (example: a toy for girls aged 8-11 vs a dashboard for financial analysts); build with the brief's real content.
3. **Hero** (§ "Design principles"): open with the most characteristic thing in the subject's world in the most fitting form (headline, image, animation, live demo, interactive moment). "Big number + small label + supporting stats + gradient accent" is named as the default treatment - use only if truly best.
4. **Typography**: one family or two; if two, clearly distinct. Choose faces deliberately, not the families you would reach for on any project; set the scale "following the default guidance of *The Elements of Typographic Style*". Type used as headline is an active design element. Line length under 80 characters by default; serif may run slightly longer and gets slightly more line-height than sans.
5. **Typographic tells to avoid** (named "the commonest tells of a generated page"): accenting a single word/phrase in a headline (italic, bold or colour); all-caps labels; unnecessary labels above content.
6. **Structure is information**: outlines, borders, numbering, eyebrows, dividers and labels must encode something about the content. Numbered markers (01 / 02 / 03) only for real sequences (stepped process, timeline) - check before adding.
7. **Motion**: non-user-triggered motion sparingly, only to draw attention; one orchestrated moment beats scattered effects; fade-and-slide-up on every section and hover transitions on every card "read as AI-generated". Motion answering a person's action (opening, expanding, confirming) is welcome when it shows what changed.
8. **Calibration list - five clusters of current AI-generated design** (§ "Process"): (1) warm cream background near `#F4F1EA`, high-contrast serif display, terracotta/clay accent often near `#D97757` - flagged because it is "Anthropic's own Claude-interaction accent"; (2) near-black background with one acid-green or vermilion accent; (3) broadsheet layout: hairline rules, zero radius, dense newspaper columns; (4) SaaS-card kit: identical rounded cards, one radius everywhere, the same `rgba(0,0,0,.1)` shadow, gradient washes; (5) template chrome regardless of subject: tracked-out ALL-CAPS eyebrow above every heading, middle-dot meta strings ('A · B · C'), 'WORD — fragment' labels with spaced em dash, tinted near-black (`#0B0B0B`, `#111`) for black, monospace for small data labels, '→' appended to links/buttons. June 2026 listed only clusters 1-3; September added 4-5 and the `#D97757` explanation.
9. **Rule of precedence**: all clusters are legitimate for some briefs but are "defaults rather than choices" that "appear regardless of subject"; where the brief pins a direction, follow it exactly - "the brief's own words always win", including when it asks for one of these looks; where an axis is free, do not spend it on a default.
10. **Two-pass process**: first a compact plan - colour as 4-6 named hex values; typefaces and roles; layout concept in one-sentence prose plus ASCII wireframes, with alignment guidance (left / centre / justified); principles. Then review the plan against the brief: anything that reads like the generic default for any similar page ("work through a similar prompt to see if you arrive somewhere similar") gets revised, stating what changed and why. Only then write code. (June 2026 had a fifth plan item, "Signature: the single unique element"; September dropped it.)
11. **Implementation trap**: watch CSS specificity conflicts between type-based selectors (`.section`) and element selectors (`.cta`), especially padding/margin between sections.
12. **Restraint and self-critique**: spend boldness in one place; cut decoration that does not serve the brief; quality floor without announcing it - responsive to mobile, visible keyboard focus, reduced motion, visually accessible, harmonious palette; critique with screenshots if the environment allows ("a picture is worth 1000 tokens"); Chanel's "remove one accessory"; "human creatives have memory" - keep notes of what was tried for future passes.
13. **Writing** (§ "More on writing in design"): words are design content; write from the user's perspective in plain terms ("a user manages notifications, not webhook config"); active voice; a CTA says what happens ("Save changes", not "Submit") and keeps its name through the flow ("Publish" → toast "Published"); errors explain what happened and how to fix it, in the interface's voice, never apologise, never vague; an empty screen is an invitation to act; sentence case, no filler; each element does one job.
14. **Article - mechanism**: "distributional convergence" - safe choices dominate web training data, so unguided sampling lands on Inter, purple gradients on white, minimal animation.
15. **Article - altitude**: map aesthetic intent onto implementable frontend code; four axes respond well - typography, themes, motion, backgrounds; the typography prompt alone lifted other dimensions too. Avoid both hard-coded low altitude (exact hex codes) and vague high altitude.
16. **Article - the prompts**: typography prompt bans Inter, Roboto, Open Sans, Lato and default system fonts, suggests faces by mood (code: JetBrains Mono, Fira Code, Space Grotesk; editorial: Playfair Display, Crimson Pro; technical: IBM Plex, Source Sans 3; distinctive: Bricolage Grotesque, Newsreader), weight extremes 100/200 vs 800/900, size jumps of 3x+ not 1.5x, load from Google Fonts. A ~400-token `<frontend_aesthetics>` prompt covers typography, colour/theme (CSS variables, dominant colours with sharp accents, IDE themes and cultural aesthetics as inspiration), motion (CSS-first, Motion library for React, one orchestrated page load with staggered `animation-delay` reveals) and backgrounds (layered gradients, geometric patterns); it ends by warning the model still converges (names Space Grotesk).
17. **Article - tooling raises the ceiling**: `web-artifacts-builder` lets the model build with React, Tailwind and shadcn/ui across files and bundle to one HTML file with Parcel; outputs were visibly more complete.
18. **Article - the method generalised**: identify convergent defaults, provide concrete alternatives, structure guidance at the right altitude, make it reusable as a skill.

## What it changes for the skills
- skills/design-studio/references/fundamentals/anti-slop.md: teach the "appears regardless of subject" test as the criterion; quote the five clusters as a dated observation (2026-09-03 version) next to the 2025-11 article's cures; keep "the brief wins" as an explicit override.
- skills/design-studio/references/fundamentals/anti-slop.md: keep the "cures decay" note with evidence from this source itself: Space Grotesk, editorial serifs, atmospheric gradient backgrounds and staggered page-load reveals were 2025-11 remedies; by 2026-09 the skill flags fade-up-on-every-section and cream/serif/terracotta as tells, and Impeccable's 46-rule catalogue (still on its Chinese site) lists Space Grotesk as overused, while its 67-rule English catalogue now names only Inter and Geist (see `impeccable-slop-rules`).
- skills/design-studio/references/process/directions.md: the plan-then-review pass ("run a similar prompt; if you land in the same place, revise") is a cheap self-check before any option board.
- skills/design-studio/references/process/truth-files.md: "name subject, audience, primary job; confirm" belongs in the brief step.
- skills/design-studio/references/process/render-and-look.md: screenshot self-critique is endorsed by the baseline; our bounded rounds go further.
- skills/design-studio/references/disciplines/marketing-sites.md: the hero-metric layout is a named default; choose the hero form from the subject.
- skills/critique-design/references/heuristics.md: single-word headline accents, all-caps labels, decorative numbering and the writing rules (CTA names persist, errors never apologise) are checkable items.

## Not verified / open
- The article's example screenshots and the "frontend design cookbook" notebook were not re-read today.
- Whether Anthropic's product surfaces load this exact text (vs a variant) was not checked; only the repo and plugin copies were compared.
- The June → September changes are read from diffs; the PR description (#1713) gives no rationale beyond "avoid generic design defaults".