Design
Distinctive visual design guidance distilled from Anthropic's design skills
(frontend-design, canvas-design, theme-factory), consolidated so any agent — not
just Claude Code — can produce work with a deliberate point of view. The
references below carry Anthropic's original guidance verbatim; they are the
skill, not background reading.
Route by output type (MANDATORY: read the matched reference before designing)
| Task |
Read |
| Web UI, landing page, app screen, component redesign |
references/web-interfaces.md |
| Poster, album art, static PNG/PDF art piece, visual identity |
references/canvas-art.md |
| Styling an existing artifact (slides, docs, reports) with a coherent theme |
references/themes.md |
Generative/algorithmic art (p5.js, flow fields, particles) is its own skill:
skills/algorithmic-art.
Core discipline (orientation only — never a substitute for the reference)
- Ground in the subject. Pin down what the thing is, who it's for, and its
single job before designing. Distinctive choices come from the subject's own
world — its materials, instruments, vernacular — not from a style library.
- Avoid the AI-default looks. Current AI design clusters around: cream
background + high-contrast serif + terracotta accent; near-black + one acid
accent; broadsheet hairlines + zero border-radius. Also: purple gradients,
uniform rounded corners, excessive centering, Inter-for-everything. These are
defaults, not choices — spend freedom elsewhere unless the brief asks for one.
- One signature element. Spend boldness in a single memorable place; keep
everything around it quiet. Cut decoration that does not serve the brief.
- Typography carries personality. Pair display and body faces deliberately
with a clear scale. Need font files?
scripts/fetch_fonts.py downloads a
curated OFL set (display/body/mono) on demand — run with no args to list.
- Plan, critique, then build. Draft a compact token system (4-6 named hex
colors, 2+ type roles, layout concept, signature element). Review it against
the brief: any part you'd produce for any similar prompt gets revised.
Only then write code, deriving every decision from the plan.
- Quality floor, unannounced. Responsive to mobile, visible keyboard focus,
reduced-motion respected, nothing overlapping or clipped.
Verify like a designer
Render the real artifact and look at it — screenshot web pages (the
webapp-testing skill automates this), open generated PDFs/PNGs. Fix what you
see, re-render. A static code read is not observation. Before shipping, remove
one accessory (Chanel's rule): the last pass deletes, it does not add.
1---2name: design3description: Claude-grade visual design outside Claude Code — distinctive web/UI design direction, poster and canvas art philosophy, and a 10-theme styling library, portable to any agent that reads SKILL.md. Use when building or restyling a UI, landing page, poster, slide deck, static art piece, or any artifact that must not look AI-generated.4license: Apache-2.0 (derived from anthropics/skills; see LICENSE.txt)5---67# Design89Distinctive visual design guidance distilled from Anthropic's design skills10(frontend-design, canvas-design, theme-factory), consolidated so any agent — not11just Claude Code — can produce work with a deliberate point of view. The12references below carry Anthropic's original guidance verbatim; they are the13skill, not background reading.1415## Route by output type (MANDATORY: read the matched reference before designing)1617| Task | Read |18|---|---|19| Web UI, landing page, app screen, component redesign | [references/web-interfaces.md](references/web-interfaces.md) |20| Poster, album art, static PNG/PDF art piece, visual identity | [references/canvas-art.md](references/canvas-art.md) |21| Styling an existing artifact (slides, docs, reports) with a coherent theme | [references/themes.md](references/themes.md) |2223Generative/algorithmic art (p5.js, flow fields, particles) is its own skill:24`skills/algorithmic-art`.2526## Core discipline (orientation only — never a substitute for the reference)27281. **Ground in the subject.** Pin down what the thing is, who it's for, and its29 single job before designing. Distinctive choices come from the subject's own30 world — its materials, instruments, vernacular — not from a style library.312. **Avoid the AI-default looks.** Current AI design clusters around: cream32 background + high-contrast serif + terracotta accent; near-black + one acid33 accent; broadsheet hairlines + zero border-radius. Also: purple gradients,34 uniform rounded corners, excessive centering, Inter-for-everything. These are35 defaults, not choices — spend freedom elsewhere unless the brief asks for one.363. **One signature element.** Spend boldness in a single memorable place; keep37 everything around it quiet. Cut decoration that does not serve the brief.384. **Typography carries personality.** Pair display and body faces deliberately39 with a clear scale. Need font files? `scripts/fetch_fonts.py` downloads a40 curated OFL set (display/body/mono) on demand — run with no args to list.415. **Plan, critique, then build.** Draft a compact token system (4-6 named hex42 colors, 2+ type roles, layout concept, signature element). Review it against43 the brief: any part you'd produce for *any* similar prompt gets revised.44 Only then write code, deriving every decision from the plan.456. **Quality floor, unannounced.** Responsive to mobile, visible keyboard focus,46 reduced-motion respected, nothing overlapping or clipped.4748## Verify like a designer4950Render the real artifact and look at it — screenshot web pages (the51`webapp-testing` skill automates this), open generated PDFs/PNGs. Fix what you52see, re-render. A static code read is not observation. Before shipping, remove53one accessory (Chanel's rule): the last pass deletes, it does not add.
trac3r00