11 KiB
Preset: designs
Last updated: 2026-05-17 | Verified: research/03-prompt-patterns-intent-presets.md Evidence grade: Anthropic-documented + community-validated Captured-on date: 2026-05-16
The designs intent preset is Claude Design's generic generation mode. It covers dashboards, components, layouts, and design explorations that do not fit into one of the more specialised presets (prototypes, slides, one-pagers, etc.). It is the preset operators reach for when the goal is "produce a high-quality visual artifact" rather than a destination-shaped artifact.
This file documents the designs preset across six dimensions: what it is, when to use it, Anthropic's published prompt patterns, community uplift, critical caveats, and one end-to-end worked prompt.
(a) What this preset is
Anthropic's launch post (https://anthropic.com/news/claude-design-anthropic-labs) describes designs as the default-mode preset — the substrate every other preset effectively inherits from, with destination shaping layered on top. Output is HTML + React + inline CSS, viewable in the Claude Design canvas, exportable to PDF / HTML standalone / Code-handoff.
Two Anthropic primary sources ground this preset:
- The Anthropic-engineering blog
https://anthropic.com/engineering/harness-design-long-running-appspublishes the four design grading criteria (design quality, originality, craft, functionality) that thedesignspreset is optimised against. - The frontend-design open-source skill at
https://github.com/anthropics/skills/skills/frontend-design/SKILL.mddocuments Anthropic's verbatim Design-Thinking Framework — Purpose, Tone, Constraints, Differentiation — and the verbatim AI-slop avoid-list.
The frontend-design skill is the closest thing Anthropic publishes to a designs-preset system prompt. Read it whenever the operator wants to understand what Claude Design is internally optimising for.
(b) When to use it
Pick designs when the goal is generic, exploratory, or composite. The decision matrix:
| Operator goal | Preset |
|---|---|
| Generic dashboard, component library exploration, design system playground | designs |
| Interactive product flow for usability testing | prototypes |
| Presentation for stakeholders | slides |
| Single-page memo or leave-behind | one-pagers |
| Low-fi structural layout for early review | wireframes-mockups |
| Investor / external pitch | pitch-decks |
| Landing page, social variant, marketing asset | marketing-collateral |
| Code-powered prototype with voice / video / shaders / 3D | frontier-design (experimental — see preset file) |
If the operator is uncertain between designs and prototypes, the distinguishing question is: is this for usability testing? Yes → prototypes. No → designs.
If uncertain between designs and marketing-collateral, the distinguishing question is: is this destined for a marketing surface (landing page, social, ad)? Yes → marketing-collateral. No → designs.
(c) Anthropic-published prompt patterns
The Design-Thinking Framework (verbatim from frontend-design/SKILL.md)
Anthropic's https://github.com/anthropics/skills/skills/frontend-design/SKILL.md publishes the verbatim four-part framework Claude Design uses when reasoning about a design:
- Purpose — what is the artifact for? Match every aesthetic decision to the purpose.
- Tone — what emotional register fits the audience and the purpose? Energetic, calm, authoritative, playful, terse?
- Constraints — what cannot be changed? Brand colors, typeface restrictions, layout rules, accessibility minimums.
- Differentiation — what makes this artifact distinct from the convergent middle-ground default? Name the differentiation explicitly.
Use this framework as a pre-brief check before composing a layer-1-through-5 prompt (see ../01-prompt-fundamentals.md). If any of the four parts is fuzzy, sharpen it before drafting.
Verbatim AI-slop avoid-list
Anthropic's frontend-design skill + the blog post https://claude.com/blog/improving-frontend-design-through-skills publish the verbatim banned-items list used in layer 3 of the prompt stack. See ../01-prompt-fundamentals.md Section "Layer 3" for the full list. The designs preset inherits this list — it is not optional.
Anthropic's verbatim canonical examples
The Anthropic get-started article https://support.claude.com/en/articles/14604416-get-started-with-claude-design publishes three verbatim canonical examples (dashboard, mobile onboarding, landing page) demonstrating the Goal / Layout / Content / Audience framework. Read them as the reference shape for a first prompt against designs. Reproduced in full in ../01-prompt-fundamentals.md Section "Layer 1".
(d) Community uplift
Three community-converged patterns extend Anthropic's published material for the designs preset.
Real-data injection over lorem ipsum
Victor Dibia's documented pattern (research/03): substitute realistic placeholder content rather than lorem ipsum. The model defaults to convergent middle-ground content when content is unspecified; named placeholders ("Today's MRR: $48,200", "Last 24h error rate: 0.12%") anchor the model to real-shaped output.
For dashboards specifically: use realistic metric values, realistic timestamps, realistic user names. The visual difference between a chart with $3,200 / $4,500 / $2,800 and a chart with $XXX / $YYY / $ZZZ is large — Claude Design will infer typography spacing and component sizing from the named values.
Explicit modular scale and weight palette
Community pattern (research/03): name the typographic modular scale and weight palette in the brief rather than letting the model default. The 1.250 (minor third) scale fits dense informational artifacts; the 1.333 (perfect fourth) scale fits marketing pages. Weight palettes converge on 500 body / 600 emphasized / 700 headings.
Specify the negative aesthetic family
Beyond layer-3 negative constraints (which name specific banned items), community practice (research/03) is to name an entire negative aesthetic family — "not modern SaaS", "not playful illustrated", "not corporate professional" — to push the model out of its default neighbourhood. The model interprets aesthetic-family naming as a strong signal even in the negative.
(e) Critical caveats
Three caveats specific to the designs preset.
Default-aesthetic drift on iteration
The designs preset is most susceptible to default-aesthetic drift because it has no destination-shaped constraint pulling it toward a specific genre. Watch for drift back to AI-slop defaults across iterations — the references/03-iteration-and-session.md "break-default-aesthetic" recovery prompt is targeted at exactly this drift.
Non-monotonic improvement across iterations
https://anthropic.com/engineering/harness-design-long-running-apps documents that quality across iterations is not strictly increasing. Turn 4 can be worse than turn 3 on design quality, originality, or craft. The recovery move (pivot, not refine) is in ../03-iteration-and-session.md.
Component spec coherence
For dashboards and component libraries specifically, the export bundle's machine-readable component spec is load-bearing for engineering handoff. Ensure the artifact has coherent component definitions (named, with consistent variants) before exporting — otherwise the component spec will be partial and the engineering implementation will diverge.
(f) One end-to-end worked prompt — layers 1 + 2a + 3 composed
Goal: an admin dashboard for an analytics product, audience is data engineers.
Goal: An admin dashboard for monitoring data-pipeline freshness across
120 tables, sorted by last-successful-load timestamp
Layout: Header with environment switcher + global time-window selector;
top metrics row (4 KPIs: tables behind SLA, tables current,
tables stale, tables errored); main panel with stacked area
chart showing freshness over the last 24 hours; sortable table
below with 120 rows; alerts sidebar
Content: Realistic table names (orders, customers, inventory,
user_events, sessions, etc.); realistic timestamps (last
successful load within the last 6 hours for most, some at
12 hours, some at 48 hours); realistic error rates (0.01% to
3.2%)
Audience: Data engineers, on-call rotation, ages 25-50, comfortable
with dense interfaces, need to scan and triage quickly
Aesthetic family: industrial-utilitarian, slate-monochrome
Color palette (CSS hex):
--color-bg: #E9ECEC
--color-surface: #C9D2D4
--color-muted: #8C9A9E
--color-fg: #44545B
--color-ink: #11171B
--color-accent: #4A6FA5
--color-error: #B23A48
--color-warning: #C89B3F
Typography: square angular sans-serif (Söhne preferred, Inter Variable
fallback); no rounded glyphs; modular scale 1.250
Corner radius: 4px throughout — no pill shapes
Motion: transition: all 160ms ease-out
Density: dense (32px table rows, 8px card padding)
Surface: flat — no shadows, borders define edges
Design-Thinking Framework:
Purpose: enable on-call triage in under 60 seconds per incident
Tone: terse, signal-dense, no decorative copy
Constraints: 32px row height minimum (accessibility), accent reserved
for actionable items only
Differentiation: this is a data-engineer tool, not a marketing
dashboard — no card-style metric tiles, no playful
illustrations, no progress-ring widgets
Negative constraints — do not produce any of:
- Inter, Roboto, Arial, or Space Grotesk as primary typeface
- Purple gradients on white backgrounds
- Card-style KPI tiles with shadows and rounded corners
- Centered-hero with single CTA
- Bouncy spring easing on hover
- Pulse animations on idle elements
- Glassmorphism, neumorphism, generic "modern SaaS" defaults
If you find yourself defaulting to any of these, stop and ask me to
clarify the aesthetic before continuing.
Expected follow-up turns:
- Turn 2: add layer 4 (typography modular scale specifics, semantic color roles, motion easing curves)
- Turn 3: add layer 5 (grading criteria weighting — craft and functionality at 0.4 and 0.3, design quality 0.2, originality 0.1)
- Turn 4+: Tweak panel takes over for surgical edits
Sources
https://anthropic.com/news/claude-design-anthropic-labs— preset enumeration, launch posthttps://support.claude.com/en/articles/14604416-get-started-with-claude-design— GLCA framework, three canonical exampleshttps://anthropic.com/engineering/harness-design-long-running-apps— design grading criteria, non-monotonic improvementhttps://github.com/anthropics/skills/skills/frontend-design/SKILL.md— Design-Thinking Framework, AI-slop avoid-listhttps://claude.com/blog/improving-frontend-design-through-skills— default-avoidance blog post
Re-research trigger: Anthropic updating the Design-Thinking Framework; new canonical examples added to get-started article; AI-slop avoid-list materially extended.