183 lines
11 KiB
Markdown
183 lines
11 KiB
Markdown
# 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.
|