feat(claude-design): add Anthropic-documented preset references (designs, prototypes, slides)
Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
parent
dc8bc99ee7
commit
636bcb5824
3 changed files with 645 additions and 0 deletions
|
|
@ -0,0 +1,183 @@
|
|||
# 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.
|
||||
|
|
@ -0,0 +1,225 @@
|
|||
# Preset: prototypes
|
||||
|
||||
**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 `prototypes` intent preset generates interactive product flows for usability testing, design review, and stakeholder demos. Output is multi-screen HTML with working state transitions, clickable navigation, and per-state visual treatments. The preset is documented by Anthropic in a dedicated tutorial.
|
||||
|
||||
---
|
||||
|
||||
## (a) What this preset is
|
||||
|
||||
Anthropic frames `prototypes` (launch post `https://anthropic.com/news/claude-design-anthropic-labs`) as the preset for product flows that need to behave like a real product, not just look like one. The distinguishing property vs `designs`: interaction state. Prototypes have hover states, active states, click-through transitions, multi-screen navigation, and per-state visual treatments.
|
||||
|
||||
The dedicated tutorial is `https://claude.com/resources/tutorials/using-claude-design-for-prototypes-and-ux`. It is the load-bearing source for this preset.
|
||||
|
||||
Output is HTML + React + inline CSS + JS (the JS makes the interactions work). Exportable to Code-handoff (engineering takes the working interaction logic forward) or HTML standalone (runs in a browser without Claude Design).
|
||||
|
||||
---
|
||||
|
||||
## (b) When to use it
|
||||
|
||||
Pick `prototypes` when the goal is interactive validation. The decision matrix:
|
||||
|
||||
| Operator goal | Preset |
|
||||
|---------------|--------|
|
||||
| Feature flow for usability testing (5-user study) | **prototypes** |
|
||||
| Internal tool demo for stakeholder review | **prototypes** |
|
||||
| A-B comparison of two design directions in working form | **prototypes** |
|
||||
| Onboarding flow walkthrough for new hire training | **prototypes** |
|
||||
| Static design exploration (no interaction needed) | designs |
|
||||
| Slide deck for a meeting | slides |
|
||||
|
||||
If the operator describes the artifact in terms of "user clicks here, then sees this", they want `prototypes`. If they describe it in terms of "screen with these regions", they may want `designs`.
|
||||
|
||||
---
|
||||
|
||||
## (c) Anthropic-published prompt patterns
|
||||
|
||||
The Anthropic tutorial `https://claude.com/resources/tutorials/using-claude-design-for-prototypes-and-ux` publishes nine canonical prompt patterns across four families:
|
||||
|
||||
### Family 1 — Feature prototyping (4 verbatim canonical prompts)
|
||||
|
||||
For new feature flows where the operator needs to test interaction logic. The patterns cover: a sign-in / sign-up multi-step flow; a checkout / payment flow with form validation states; a settings / preferences flow with toggles and selects; a search / filter flow with result-state transitions. Each prompt names entry point, success path, error states, and edge cases.
|
||||
|
||||
Refer to the tutorial for the verbatim prompt text — Anthropic publishes the exact wording, and this plugin cites it by URL rather than copying it (per the brief's source-quality rule and the Apache-2.0/MIT compatibility note in `../04-handoff-and-scope.md`).
|
||||
|
||||
### Family 2 — Design review and A-B comparison (2 verbatim canonical prompts)
|
||||
|
||||
For prototyping when the goal is to compare two design directions side-by-side or in turn. The verbatim Anthropic comparison-prompt pattern:
|
||||
|
||||
```
|
||||
Show me three different layouts for [feature]. For each:
|
||||
- Visual direction (named, with concrete reference)
|
||||
- Interaction model (where the user starts, where they end up)
|
||||
- One-line rationale tying it to the audience and goal
|
||||
|
||||
Once I pick one, generate the full interactive flow.
|
||||
```
|
||||
|
||||
Use this for A-B-C exploration before committing to a direction. The pattern composes with layer 2b (propose-options-before-building) from `../01-prompt-fundamentals.md`.
|
||||
|
||||
### Family 3 — User-flow scaffolding (1 verbatim canonical prompt)
|
||||
|
||||
For mapping a multi-screen user journey. The pattern names the entry context, the screens in sequence, the decisions at each screen, and the success path vs the error paths. The output is a clickable multi-screen prototype with the navigation logic baked in.
|
||||
|
||||
### Family 4 — Internal tools (2 verbatim canonical prompts)
|
||||
|
||||
For internal-tooling prototypes — admin panels, content-moderation queues, customer-support consoles. The pattern emphasises dense interfaces, keyboard-driven navigation, and minimal aesthetic flourish. The patterns differ from external-product prototypes in tone and density.
|
||||
|
||||
### Component-naming clarity, decision documentation, edge-case flagging
|
||||
|
||||
The tutorial also publishes three transversal recommendations Anthropic asks operators to apply across all four families:
|
||||
|
||||
- **Component-naming clarity** — name components in the brief so the generated artifact's component spec is engineering-handoff-ready (research/03 D2). Generic names like "Button1" produce generic component specs.
|
||||
- **Decision documentation** — ask Claude Design to document its design decisions inline (the PM-annotated notes feature) so the engineering handoff carries rationale, not just visuals.
|
||||
- **Edge-case flagging** — explicitly request that Claude Design flag interaction edge cases (empty state, loading state, error state, offline state, permission-denied state). The model defaults to happy-path-only without this directive.
|
||||
|
||||
---
|
||||
|
||||
## (d) Community uplift
|
||||
|
||||
Three community-converged patterns extend Anthropic's published material for `prototypes`.
|
||||
|
||||
### Request every state upfront
|
||||
|
||||
Community pattern (`research/03`): explicitly request every interaction state in the first prompt rather than discovering missing states across iterations. The verbatim community phrasing:
|
||||
|
||||
```
|
||||
For every interactive element in this prototype, generate:
|
||||
- default state
|
||||
- hover state
|
||||
- active / pressed state
|
||||
- focused state (keyboard navigation)
|
||||
- disabled state
|
||||
- loading state (if the element triggers async work)
|
||||
- error state (if the element can fail)
|
||||
|
||||
Render every state visibly somewhere in the prototype — either inline
|
||||
or in a dedicated state-catalogue page.
|
||||
```
|
||||
|
||||
This catches the failure mode where the operator does not notice a missing state until a usability test surfaces it.
|
||||
|
||||
### Real-data injection over lorem ipsum
|
||||
|
||||
Same pattern as the `designs` preset, more important here: prototypes used in usability testing fail when the content is obviously fake. Test participants react to lorem ipsum and stop engaging with the flow. Use realistic content even when the prototype is throwaway.
|
||||
|
||||
### Explicit motion timing and easing
|
||||
|
||||
MindStudio community walkthrough (cited in `research/03`): name the easing curve and the duration explicitly for prototypes that include any motion. Default motion is the largest source of "feels like AI" in a prototype. The community-converged baselines for product prototypes:
|
||||
|
||||
- Hover transitions: `transition: all 160ms ease-out`
|
||||
- Modal / drawer enter: `cubic-bezier(0.16, 1, 0.3, 1) 240ms`
|
||||
- Modal / drawer exit: `cubic-bezier(0.7, 0, 0.84, 0) 180ms`
|
||||
- Page transitions: `ease-out 280ms`
|
||||
|
||||
---
|
||||
|
||||
## (e) Critical caveats
|
||||
|
||||
Three caveats specific to `prototypes`.
|
||||
|
||||
### Interactive state count compounds context
|
||||
|
||||
A prototype with 10 components × 7 states each = 70 distinct visual treatments in one artifact. Each treatment consumes context. Claude Design quality drops faster on prototypes than on `designs` for the same number of screens. Session-break heuristics (`../03-iteration-and-session.md`) apply with extra weight.
|
||||
|
||||
### Test in target browsers before stakeholder review
|
||||
|
||||
The standalone HTML export runs the prototype's JavaScript locally. Edge-case JavaScript (touch handlers, IntersectionObserver, ResizeObserver) does not always work the same across browsers. Test in Chrome + Safari + Firefox before sharing with stakeholders. If you target mobile usability testing, test on actual mobile devices, not just a browser DevTools mobile-emulation viewport.
|
||||
|
||||
### Multi-screen exports — bundle in one export
|
||||
|
||||
The token-cost trap in `../04-handoff-and-scope.md` Section 6 applies most strongly to multi-screen prototypes. Bundle all screens in one export turn; do not export screen-by-screen.
|
||||
|
||||
---
|
||||
|
||||
## (f) One end-to-end worked prompt — layers 1 + 2a + 3 composed
|
||||
|
||||
Goal: a multi-step onboarding flow for a new SaaS analytics product, audience is small-business operators.
|
||||
|
||||
```
|
||||
Goal: An interactive 5-step onboarding flow for new users of a SaaS
|
||||
product. The flow: welcome → data-source connection → metric
|
||||
selection → notification preferences → first-dashboard generation
|
||||
Layout: Single-column centered, fixed step indicator at top, primary
|
||||
CTA at bottom of each step, secondary "back" link to top-left
|
||||
Content: Real product-facing copy (no lorem ipsum); step indicator
|
||||
labels match the 5 steps verbatim; each step has a one-line
|
||||
description below the step name; CTAs use action-verb naming
|
||||
("Connect your data", "Select your metrics", etc.)
|
||||
Audience: First-time users of a SaaS product, B2B small-business
|
||||
operators, ages 30-55, comfortable with software but not
|
||||
power-users
|
||||
|
||||
Aesthetic family: warm-confident — like Linear's onboarding, like
|
||||
Notion's first-run, like Vercel's CLI prompts.
|
||||
Approachable but tight; never playful.
|
||||
Color palette (CSS hex):
|
||||
--color-bg: #FAFAF8
|
||||
--color-surface: #FFFFFF
|
||||
--color-muted: #6B6B6B
|
||||
--color-fg: #2A2A2A
|
||||
--color-ink: #0A0A0A
|
||||
--color-accent: #2D6356
|
||||
--color-accent-hover: #1F4A41
|
||||
--color-success: #2D6356
|
||||
--color-warning: #C89B3F
|
||||
--color-error: #B23A48
|
||||
Typography: Söhne (preferred) or Inter Variable; modular scale 1.250;
|
||||
weight palette 400 body / 500 emphasized / 600 headings
|
||||
Corner radius: 6px on cards, 4px on buttons and inputs
|
||||
Motion: transition: all 160ms ease-out on hover; cubic-bezier(0.16, 1,
|
||||
0.3, 1) 240ms on step transitions
|
||||
Density: comfortable (44px touch targets, 16px card padding)
|
||||
Surface: subtle depth — 1px border + very subtle shadow on cards
|
||||
|
||||
Interaction states (render every one for every interactive element):
|
||||
default, hover, active, focused, disabled, loading, error
|
||||
|
||||
Multi-screen requirements:
|
||||
- Step 1: welcome — value prop in 2 sentences + Get Started CTA
|
||||
- Step 2: data-source connection — list of 6 integrations with
|
||||
connect buttons, hover states show "Connect" tooltip
|
||||
- Step 3: metric selection — multi-select chip interface with 12
|
||||
metric options, selection persists across step navigation
|
||||
- Step 4: notification preferences — three toggle rows, with help-text
|
||||
below each toggle
|
||||
- Step 5: first-dashboard generation — loading state for 4-6 seconds,
|
||||
then success state with "View Dashboard" CTA
|
||||
|
||||
Edge cases to flag:
|
||||
- Step 2 connection failure (network error visible)
|
||||
- Step 3 zero metrics selected (CTA disabled, help-text appears)
|
||||
- Step 5 generation timeout (recovery CTA appears)
|
||||
|
||||
Negative constraints — do not produce any of:
|
||||
- Inter, Roboto, Arial, or Space Grotesk as primary typeface
|
||||
- Purple gradients on white backgrounds
|
||||
- Centered-hero with single CTA (this is sequenced flow, not landing
|
||||
page)
|
||||
- Bouncy spring easing on hover
|
||||
- Pulse animations on idle elements
|
||||
- Generic "modern SaaS onboarding" template defaults
|
||||
```
|
||||
|
||||
Expected follow-up turns:
|
||||
|
||||
1. Turn 2: refine motion easing if step transitions feel sluggish or jumpy
|
||||
2. Turn 3: add layer 5 grading criteria (functionality 0.5, craft 0.3, design quality 0.2, originality 0)
|
||||
3. Turn 4+: Tweak panel for density and color-temperature adjustments
|
||||
4. Usability test surfaces missing states → iterate states via comments
|
||||
5. Export bundle for engineering handoff once stakeholders sign off
|
||||
|
||||
---
|
||||
|
||||
## Sources
|
||||
|
||||
- `https://anthropic.com/news/claude-design-anthropic-labs` — preset enumeration
|
||||
- `https://claude.com/resources/tutorials/using-claude-design-for-prototypes-and-ux` — verbatim canonical prompts (4 families, 9 prompts) + component-naming clarity + decision documentation + edge-case flagging recommendations
|
||||
- `https://support.claude.com/en/articles/14604416-get-started-with-claude-design` — GLCA framework
|
||||
- `https://anthropic.com/engineering/harness-design-long-running-apps` — design grading criteria
|
||||
- `https://github.com/anthropics/skills/skills/frontend-design/SKILL.md` — Design-Thinking Framework, AI-slop avoid-list
|
||||
|
||||
Re-research trigger: Anthropic updating the prototypes tutorial; new canonical prompt family added; component-naming-clarity / decision-documentation / edge-case-flagging recommendations materially revised.
|
||||
|
|
@ -0,0 +1,237 @@
|
|||
# Preset: slides
|
||||
|
||||
**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 `slides` intent preset generates presentation decks — internal stakeholder updates, executive roadmaps, customer briefings, partner proposals, all-hands meetings. Output is HTML deck with per-slide layouts, optionally exportable to PPTX (with caveats — see Section e).
|
||||
|
||||
---
|
||||
|
||||
## (a) What this preset is
|
||||
|
||||
Anthropic launch post (`https://anthropic.com/news/claude-design-anthropic-labs`) names `slides` as a destination-shaped preset: the artifact assumes the slide-deck format, not the dashboard / one-pager / prototype format. Output renders in the Claude Design canvas as a slide-by-slide thumbnail strip plus the active slide in full view.
|
||||
|
||||
Two Anthropic primary sources ground this preset:
|
||||
|
||||
- The dedicated tutorial `https://claude.com/resources/tutorials/using-claude-design-for-presentations-and-slide-decks` publishes five verbatim canonical prompts (Section c) and the slide-deck composition framework.
|
||||
- The PowerPoint-mode article `https://support.claude.com/en/articles/13521390-use-claude-for-powerpoint` publishes the PPTX export conventions and the template-respecting guidance: Claude reads the slide master, layouts, fonts, and color scheme of an uploaded PPTX template and produces output that respects them.
|
||||
|
||||
The two sources compose: the tutorial covers the prompt patterns, the PowerPoint-mode article covers the export discipline.
|
||||
|
||||
---
|
||||
|
||||
## (b) When to use it
|
||||
|
||||
Pick `slides` when the destination is a presentation surface. The decision matrix:
|
||||
|
||||
| Operator goal | Preset |
|
||||
|---------------|--------|
|
||||
| Internal team update / project review | **slides** |
|
||||
| Customer-prep briefing for a sales call | **slides** |
|
||||
| Executive roadmap or quarterly business review (Q1/Q2/Q3/Q4 results) | **slides** |
|
||||
| Partner proposal / co-development pitch | **slides** |
|
||||
| All-hands or company-wide announcement | **slides** |
|
||||
| External investor pitch deck | **pitch-decks** (separate preset — see preset file for the PPTX trap) |
|
||||
| Single-page memo / one-pager | one-pagers |
|
||||
|
||||
The distinguishing question vs `pitch-decks`: **is the audience internal or external?** Internal → `slides`. External investor → `pitch-decks` (with explicit caveat about PPTX export, see `pitch-decks.md`).
|
||||
|
||||
---
|
||||
|
||||
## (c) Anthropic-published prompt patterns
|
||||
|
||||
The Anthropic tutorial `https://claude.com/resources/tutorials/using-claude-design-for-presentations-and-slide-decks` publishes five verbatim canonical prompts:
|
||||
|
||||
### Pattern 1 — Q1 results deck
|
||||
|
||||
For quarterly business review decks (Q1 / Q2 / Q3 / Q4 results). Pattern names the metrics in priority order, the audience seniority level, the narrative arc (where we started, what changed, where we are, what's next), and the supporting visualisations (charts, tables, callout numbers).
|
||||
|
||||
### Pattern 2 — Executive roadmap
|
||||
|
||||
For multi-quarter roadmap decks. Pattern names the roadmap horizon (quarters or half-years), the workstreams (3-7 named tracks), the major milestones per workstream, the dependencies between workstreams, and the assumptions / risks per quarter.
|
||||
|
||||
### Pattern 3 — Customer-prep briefing
|
||||
|
||||
For sales-call preparation decks. Pattern names the customer (company + named contacts), the meeting goal, the customer's known priorities, the value-prop alignment, the proof points (case studies, metrics), and the asks / next steps.
|
||||
|
||||
### Pattern 4 — Partner proposal
|
||||
|
||||
For co-development or partnership proposals. Pattern names the proposed scope, the resourcing model, the timeline, the success metrics, the IP / licensing model, and the open questions.
|
||||
|
||||
### Pattern 5 — All-hands announcement
|
||||
|
||||
For company-wide updates. Pattern names the announcement (one sentence), the why-now context, the impact on employees, the timeline, and the resources / Q&A links.
|
||||
|
||||
Refer to the tutorial URL for the verbatim prompt text. This plugin cites by URL rather than reproducing Anthropic's exact wording (per the brief's source-quality rule and the Apache-2.0/MIT compatibility note in `../04-handoff-and-scope.md`).
|
||||
|
||||
### Template-respecting guidance (verbatim from PowerPoint-mode article)
|
||||
|
||||
`https://support.claude.com/en/articles/13521390-use-claude-for-powerpoint` publishes the verbatim guidance about uploading an existing PPTX template:
|
||||
|
||||
> Claude reads the slide master, layouts, fonts, and color scheme of an uploaded PowerPoint template and produces output that respects them.
|
||||
|
||||
Practical implication: if the operator has an existing brand-compliant PPTX template, upload it as a Claude Design project asset before prompting. The generated deck will respect the template's typography, color palette, and layout conventions. Without an uploaded template, the model defaults to its convergent middle-ground deck aesthetic.
|
||||
|
||||
---
|
||||
|
||||
## (d) Community uplift
|
||||
|
||||
Three community-converged patterns extend Anthropic's material for `slides`.
|
||||
|
||||
### Outline-first narrative scaffolding
|
||||
|
||||
Community pattern (`research/03`): brief the deck as an outline first (turn 1: produce the slide-by-slide outline as a markdown bullet list), then expand to full slides (turn 2: generate the deck from the approved outline). This forks the conversation but produces tighter narrative arcs than briefing the full deck in one turn.
|
||||
|
||||
The outline-first pattern composes with Anthropic's GLCA framework (`../01-prompt-fundamentals.md` Layer 1) — Goal becomes the deck's takeaway, Layout becomes the outline, Content becomes the per-slide bullets, Audience becomes the seniority + context match.
|
||||
|
||||
### Single-job-per-slide constraint
|
||||
|
||||
Community pattern (research/03): each slide should communicate exactly one idea. Slides with two or more ideas leak comprehension. Brief the constraint explicitly:
|
||||
|
||||
```
|
||||
Each slide does one job. If a slide is trying to communicate two ideas,
|
||||
split it into two slides. The takeaway from each slide should be
|
||||
nameable in one sentence.
|
||||
```
|
||||
|
||||
### Audience translation matrix
|
||||
|
||||
Community pattern (research/03): brief the audience translation explicitly when the deck spans seniority levels. For example, a roadmap deck shared with both engineering leads and executive sponsors needs to translate technical decisions into business outcomes for the exec audience without losing fidelity for the engineering audience. The pattern:
|
||||
|
||||
```
|
||||
For each slide, write two versions of the takeaway:
|
||||
- The technical-detail version (for the engineering audience)
|
||||
- The business-outcome version (for the executive audience)
|
||||
|
||||
Use the business-outcome version on the slide and the technical-detail
|
||||
version in the speaker notes.
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## (e) Critical caveats
|
||||
|
||||
Three caveats specific to `slides`.
|
||||
|
||||
### HTML → PPTX export is lossy for richly-styled text
|
||||
|
||||
Community-documented at `https://moda.app/blog/claude-design-for-pitch-decks` (cited in research/03) and `https://claudedesign.substack.com`: when the operator exports an HTML-rendered slide deck to PPTX, richly-styled text (custom typography, mixed weights, inline color variations) can flatten to images. PowerPoint loses the editability — the text becomes a rasterised picture.
|
||||
|
||||
The mitigation:
|
||||
|
||||
- If the destination is final PPTX delivery, validate the rendered PPTX text-as-text count before assuming editability survived
|
||||
- If text-as-text is critical (legal review, copy-edit-after-the-fact), keep the typographic styling simple in the brief — single typeface, two weights, no inline color variation, no inline highlighting
|
||||
- For the `pitch-decks` preset specifically, this caveat is severe enough that the recommendation is "do not use Claude Design for external pitch decks where PPTX is required" — see `pitch-decks.md`
|
||||
|
||||
### Don't trust the canvas as ground truth if destination is PPTX
|
||||
|
||||
The Claude Design canvas renders the deck in HTML. The PPTX export converts to PowerPoint format. Some aesthetic decisions that look correct in the canvas do not survive the export:
|
||||
|
||||
- Custom backgrounds with gradients can rasterize
|
||||
- Inline icons positioned via CSS can shift
|
||||
- Multi-column slide layouts can collapse
|
||||
- Speaker-notes-equivalent annotations may not round-trip
|
||||
|
||||
Validate by opening the exported PPTX in PowerPoint before stakeholder delivery, especially for high-stakes decks.
|
||||
|
||||
### Quota burn on long decks
|
||||
|
||||
Multi-slide decks (10+ slides) compound context faster than single-page artifacts. The 4-screen inflection in `../03-iteration-and-session.md` applies — long decks reach the inflection within 2-3 chat turns. Plan to break the deck into outline → first 5 slides → next 5 slides if the deck is large, using the context-reset prompt between sessions.
|
||||
|
||||
---
|
||||
|
||||
## (f) One end-to-end worked prompt — layers 1 + 2a + 3 composed
|
||||
|
||||
Goal: a 12-slide internal-team Q1 results deck, audience is engineering leadership + cross-functional partners.
|
||||
|
||||
```
|
||||
Goal: A 12-slide Q1 2026 results deck covering platform-team delivery,
|
||||
reliability metrics, headcount and hiring, top 3 themes for Q2,
|
||||
and one slide on a major incident retrospective
|
||||
Layout (outline):
|
||||
1. Title — "Platform team Q1 2026 results"
|
||||
2. TL;DR — three bullet takeaways
|
||||
3. Delivery — features shipped, % of roadmap completed
|
||||
4. Reliability — uptime, MTTR, incident count
|
||||
5. Latency — p95/p99 trend
|
||||
6. Hiring — headcount delta, key hires, open roles
|
||||
7. Top theme 1 for Q2 — name + one-sentence framing
|
||||
8. Top theme 2 for Q2 — name + one-sentence framing
|
||||
9. Top theme 3 for Q2 — name + one-sentence framing
|
||||
10. Incident retrospective — what happened, what we learned
|
||||
11. Asks — explicit asks of leadership and partners
|
||||
12. Q&A / Discussion prompt
|
||||
Content: Real numbers throughout — actual % completion, real MTTR
|
||||
minutes, real headcount, real names for hires (or named
|
||||
placeholders); each slide's takeaway nameable in one sentence
|
||||
Audience: VP of Engineering, peer Eng-leadership, partner-team PMs,
|
||||
partner-team Eng-leads — mixed seniority, mixed technical
|
||||
depth, ages 30-55
|
||||
|
||||
Aesthetic family: editorial-confident — like The New York Times opinion
|
||||
section meets Linear's design language. Clean,
|
||||
authoritative, no flourish. Each slide reads like a
|
||||
well-edited paragraph.
|
||||
Color palette (CSS hex):
|
||||
--color-bg: #FAFAF8
|
||||
--color-surface: #FFFFFF
|
||||
--color-muted: #6B6B6B
|
||||
--color-fg: #2A2A2A
|
||||
--color-ink: #0A0A0A
|
||||
--color-accent: #3D5C8A
|
||||
--color-success: #2D6356
|
||||
--color-warning: #C89B3F
|
||||
--color-error: #B23A48
|
||||
Typography: Söhne or Inter Variable; modular scale 1.333 (perfect
|
||||
fourth — slides scale up); weight palette 400 body / 600
|
||||
emphasized / 700 slide titles
|
||||
Corner radius: 4px on any card-like containers; slides themselves
|
||||
have no corner radius (full-bleed)
|
||||
Motion: none on static slides; ease-out 240ms on slide transitions
|
||||
Density: comfortable — generous spacing, one job per slide
|
||||
Surface: flat — full-bleed slides, no shadows, single subtle accent
|
||||
line under slide title
|
||||
|
||||
Slide composition rules:
|
||||
- Each slide does one job
|
||||
- Slide titles are claims, not topics ("We shipped 87% of roadmap"
|
||||
not "Roadmap delivery")
|
||||
- Body text is 2-3 lines max per slide
|
||||
- One number, chart, or visual element per slide max
|
||||
- Speaker notes carry the depth; slides carry the takeaway
|
||||
|
||||
Negative constraints — do not produce any of:
|
||||
- Inter, Roboto, Arial, Space Grotesk as primary typeface
|
||||
- Purple gradients on white backgrounds
|
||||
- Three-bullet-and-image generic slide template
|
||||
- Pulse animations or fly-in transitions
|
||||
- Generic "corporate deck" template defaults (centered title-and-
|
||||
subtitle on every slide)
|
||||
- Multi-column slides with more than two ideas per slide
|
||||
|
||||
If the destination is PPTX, ensure text-heavy slides keep text as text
|
||||
(not rasterized). Keep typography simple to maximise text-as-text
|
||||
survival in export.
|
||||
```
|
||||
|
||||
Expected follow-up turns:
|
||||
|
||||
1. Turn 2: outline-first review — confirm the 12-slide structure, adjust ordering, swap titles if needed
|
||||
2. Turn 3: add audience translation per slide (speaker notes vs slide takeaway)
|
||||
3. Turn 4: render full deck against the approved outline
|
||||
4. Turn 5+: Tweak panel for typography scale and spacing; comments for slide-by-slide refinements
|
||||
5. Export validation: open PPTX in PowerPoint and audit text-as-text vs rasterized
|
||||
|
||||
---
|
||||
|
||||
## Sources
|
||||
|
||||
- `https://anthropic.com/news/claude-design-anthropic-labs` — preset enumeration
|
||||
- `https://claude.com/resources/tutorials/using-claude-design-for-presentations-and-slide-decks` — verbatim canonical prompts (5 patterns), slide-deck composition framework
|
||||
- `https://support.claude.com/en/articles/13521390-use-claude-for-powerpoint` — PowerPoint-mode conventions, template-respecting guidance
|
||||
- `https://support.claude.com/en/articles/14604416-get-started-with-claude-design` — GLCA framework
|
||||
- `https://moda.app/blog/claude-design-for-pitch-decks` — community-documented PPTX export caveat (cited)
|
||||
- `https://anthropic.com/engineering/harness-design-long-running-apps` — design grading criteria
|
||||
|
||||
Re-research trigger: Anthropic updating the slides tutorial; new canonical pattern added; PowerPoint-mode conventions revised; PPTX export behaviour changing materially.
|
||||
Loading…
Add table
Add a link
Reference in a new issue