# 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-apps` publishes the four design grading criteria (design quality, originality, craft, functionality) that the `designs` preset is optimised against. - The frontend-design open-source skill at `https://github.com/anthropics/skills/skills/frontend-design/SKILL.md` documents 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: 1. Turn 2: add layer 4 (typography modular scale specifics, semantic color roles, motion easing curves) 2. Turn 3: add layer 5 (grading criteria weighting — craft and functionality at 0.4 and 0.3, design quality 0.2, originality 0.1) 3. Turn 4+: Tweak panel takes over for surgical edits --- ## Sources - `https://anthropic.com/news/claude-design-anthropic-labs` — preset enumeration, launch post - `https://support.claude.com/en/articles/14604416-get-started-with-claude-design` — GLCA framework, three canonical examples - `https://anthropic.com/engineering/harness-design-long-running-apps` — design grading criteria, non-monotonic improvement - `https://github.com/anthropics/skills/skills/frontend-design/SKILL.md` — Design-Thinking Framework, AI-slop avoid-list - `https://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.