feat(claude-design): add community-only preset references (one-pagers, wireframes, pitch decks, marketing)
Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
parent
86d6ecdc50
commit
6b10b96077
4 changed files with 747 additions and 0 deletions
|
|
@ -0,0 +1,218 @@
|
|||
# Preset: marketing-collateral
|
||||
|
||||
**Last updated:** 2026-05-17 | **Verified:** research/03-prompt-patterns-intent-presets.md
|
||||
Evidence grade: Community-only — Anthropic publishes no per-preset prompt patterns for this preset as of 2026-05-16.
|
||||
|
||||
Anthropic names `marketing-collateral` in the launch enumeration at `https://anthropic.com/news/claude-design-anthropic-labs` but publishes no dedicated tutorial. The patterns below come from community practitioners; treat them as field-tested but not Anthropic-authoritative. Anthropic's frontend-design open-source skill at `https://github.com/anthropics/skills/skills/frontend-design/SKILL.md` is the closest adjacent Anthropic source — it covers landing-page and marketing-site design philosophy without per-preset prompts.
|
||||
|
||||
---
|
||||
|
||||
## (a) What this preset is
|
||||
|
||||
Anthropic launch post one-sentence description: `marketing-collateral` covers landing pages, social variants, banner ads, email creative, and other visual assets in the marketing surface area. Output is typically HTML for landing pages, image-shaped for social and ads.
|
||||
|
||||
Distinguishing properties:
|
||||
|
||||
- Conversion-oriented — the artifact has a measurable goal (signups, clicks, opens)
|
||||
- Multi-format — a single campaign typically needs landing page + social variants + email + ad creative
|
||||
- Brand-anchored — marketing collateral lives or dies on brand fidelity; a DESIGN.md is essentially mandatory
|
||||
- Variant-heavy — A/B testing assumes multiple variants of the same creative
|
||||
|
||||
---
|
||||
|
||||
## (b) Why Anthropic published no per-preset guidance
|
||||
|
||||
The launch enumeration treats marketing-collateral as a destination shape rather than a distinct generation mode. The frontend-design open-source skill (`https://github.com/anthropics/skills/skills/frontend-design/SKILL.md`) is the closest thing Anthropic publishes — it covers the design-philosophy layer (Purpose / Tone / Constraints / Differentiation) but not marketing-specific prompt patterns.
|
||||
|
||||
Community practitioners have built patterns around landing-page composition, social-variant fan-out, and competitor-screenshot extraction (Section c).
|
||||
|
||||
---
|
||||
|
||||
## (c) Community patterns
|
||||
|
||||
### chatprd.ai landing-page workflow
|
||||
|
||||
Community pattern from `https://chatprd.ai` (cited in `research/03`): a four-stage landing-page production flow optimised for Claude Design:
|
||||
|
||||
1. **Brief stage** — define the audience, the value prop, the one CTA, the proof points. Output: text document, not in Claude Design yet.
|
||||
2. **Outline stage** — translate the brief into a section-by-section landing-page outline. Hero, problem, solution, features (3-grid or 4-grid), proof (logos / quotes / numbers), pricing or single-CTA, FAQ, footer. Output: text outline.
|
||||
3. **Visual stage** — brief Claude Design from the outline using layers 1-5. First turn produces the landing page; iteration tightens.
|
||||
4. **Variant stage** — once the master landing page works, generate variants for A/B testing (different hero, different proof-point ordering, different CTA framing) using the variant-fan-out pattern below.
|
||||
|
||||
The four-stage workflow separates copy decisions from visual decisions, which lets the operator iterate each independently. The community-documented failure mode is briefing visual + copy together in one prompt — the model conflates the two and produces a generic landing page.
|
||||
|
||||
### Sagnik Bhattacharya variant-fan-out for social
|
||||
|
||||
Community pattern from `https://sagnikbhattacharya.com/blog/claude-design` (cited in `research/03`): for social-format collateral (Instagram square, LinkedIn rectangle, Twitter / X aspect), generate N variants in parallel rather than sequentially. The brief pattern:
|
||||
|
||||
```
|
||||
Generate 6 variants of the [campaign] creative, sized for [format
|
||||
spec]. Across the 6:
|
||||
- Vary the headline framing (problem-led, solution-led,
|
||||
proof-led)
|
||||
- Vary the visual hierarchy (text-dominant, image-dominant,
|
||||
balanced)
|
||||
- Vary the color emphasis (accent-dominant, monochrome,
|
||||
high-contrast)
|
||||
- Keep the value prop, audience, and CTA identical across all 6
|
||||
|
||||
Output as 6 distinct artifacts I can A/B test.
|
||||
```
|
||||
|
||||
The pattern produces a campaign-set in one chat turn rather than six iterations.
|
||||
|
||||
### Competitor-screenshot visual-reference extraction
|
||||
|
||||
Community pattern (cited in `research/03`): when the operator has a competitor's marketing page that visually achieves what they want, screenshot it and brief Claude Design with the screenshot as a visual reference, paired with an explicit "do not copy; extract the visual-language principles" instruction:
|
||||
|
||||
```
|
||||
The attached screenshot shows [competitor]'s landing page. Do NOT
|
||||
copy the structure, the copy, or the layout. DO extract the
|
||||
visual-language principles:
|
||||
- typography character (named family + scale + weights)
|
||||
- color temperature and palette structure
|
||||
- visual density (how much whitespace, how many elements per fold)
|
||||
- motion language (if visible from the screenshot or apparent from
|
||||
the brand)
|
||||
- overall aesthetic family (named with concrete reference)
|
||||
|
||||
Apply those principles to our landing page, which has a fundamentally
|
||||
different structure, copy, and CTA flow. Output our landing page
|
||||
respecting the extracted visual language but original in structure.
|
||||
```
|
||||
|
||||
The pattern is high-leverage when the operator has a clear visual reference but cannot articulate it in DESIGN.md form. The risk: too-literal copying produces a derivative-feeling artifact. Brief the "extract, do not copy" constraint explicitly.
|
||||
|
||||
### Slop-fingerprints warning amplified
|
||||
|
||||
Marketing collateral is the surface where AI-slop fingerprints are most punishing. The teal gradient + serif headline + blinking status dot + container-on-container + glassmorphism pattern is recognisable across many AI-generated landing pages. Audiences pattern-match on it and discount the artifact. Layer 3 negative constraints apply with extra weight:
|
||||
|
||||
```
|
||||
Negative constraints — do not produce any of:
|
||||
- Teal-to-blue or teal-to-green gradients
|
||||
- Serif headline on sans-serif body (unless explicitly briefed for
|
||||
editorial direction)
|
||||
- Blinking / pulsing status indicators ("Live", "New", "Updated")
|
||||
- Container-on-container layouts (card-inside-card)
|
||||
- Glassmorphism or neumorphism on any element
|
||||
- Generic "modern SaaS landing page" template defaults
|
||||
- Stock-photo abstract gradient hero imagery
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## (d) Critical caveats
|
||||
|
||||
### Brand fidelity is the dominant failure mode
|
||||
|
||||
Marketing collateral without a tight DESIGN.md anchor produces generic output. The brand DESIGN.md is essentially mandatory — see `../02-design-md.md` for the extractor pattern when the operator does not already have one. Validate brand fidelity at every iteration: typeface, color palette, voice (tone of copy), visual density. Brand drift on marketing collateral is more visible to the audience than brand drift on internal artifacts.
|
||||
|
||||
### A/B testing requires more than aesthetic variation
|
||||
|
||||
The variant-fan-out pattern produces aesthetic variations. For meaningful A/B testing, the variants should test specific hypotheses (does problem-led headline outperform solution-led? does image-dominant outperform text-dominant?) rather than test generic aesthetic variation. Brief the hypotheses explicitly.
|
||||
|
||||
### Export-to-image for social formats
|
||||
|
||||
Social-format collateral typically exports as PNG or JPG (Claude Design produces HTML; the operator screenshots at the target dimensions). The export is lossy for hover states, interactive elements, and motion. Brief the static state explicitly when the destination is image:
|
||||
|
||||
```
|
||||
The destination for this creative is a static PNG/JPG export. Generate
|
||||
the static state only. No hover states, no interaction logic, no motion.
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## (e) One worked prompt — layers 1 + 3 composed, four-stage landing-page flow
|
||||
|
||||
Goal: a landing page for a developer-tools SaaS product, audience is senior engineers evaluating dev tools.
|
||||
|
||||
```
|
||||
Goal: A landing page for "ObserveAPI", a developer-tools SaaS product
|
||||
for API observability. The goal: convert senior-engineer
|
||||
visitors to free-trial signups.
|
||||
Layout: Hero (above-fold), problem (one paragraph + 3 pain points
|
||||
as labelled rows), solution (one paragraph + product
|
||||
screenshot), features (3-grid), proof (3 customer logos +
|
||||
one quote + one named metric), pricing (single tier + free
|
||||
trial CTA), FAQ (4 questions), footer (links + secondary
|
||||
CTA)
|
||||
Content: Real product positioning, real customer logos (placeholder
|
||||
names but realistic shapes), real metric numbers, real
|
||||
FAQ content. No lorem ipsum.
|
||||
Audience: Senior engineers, ages 30-50, evaluating dev tools,
|
||||
allergic to marketing fluff, allergic to AI-generated
|
||||
landing page fingerprints, will scroll fast and bounce
|
||||
fast unless the headline lands
|
||||
|
||||
Stage 1 (brief): Audience = senior engineers, value prop = "the
|
||||
first API observability tool that doesn't require
|
||||
you to instrument anything", CTA = "Start free
|
||||
trial", proof points = 3 customer logos + one
|
||||
quote + one metric
|
||||
Stage 2 (outline): use the layout above
|
||||
Stage 3 (visual): use the brief below
|
||||
Stage 4 (variants): defer to next session
|
||||
|
||||
Aesthetic family: developer-confident — like Linear's marketing site
|
||||
meets the editorial confidence of The New York Times
|
||||
opinion section. No flourish, every claim earns its
|
||||
place, headline is a claim not a tagline.
|
||||
Color palette (CSS hex):
|
||||
--color-bg: #FAFAF8
|
||||
--color-surface: #FFFFFF
|
||||
--color-muted: #6B6B6B
|
||||
--color-fg: #2A2A2A
|
||||
--color-ink: #0A0A0A
|
||||
--color-accent: #2D6356
|
||||
Typography: Söhne (preferred — concrete-named) or Inter Variable;
|
||||
modular scale 1.333; weight palette 400 body / 600
|
||||
emphasized / 700 hero headline
|
||||
Corner radius: 4px on buttons and cards; full-bleed hero
|
||||
Motion: transition: all 160ms ease-out on hover; no auto-play motion
|
||||
anywhere
|
||||
Density: comfortable above the fold (5 elements max), denser below
|
||||
the fold (features grid, proof, FAQ)
|
||||
Surface: flat — single subtle border or single subtle shadow on
|
||||
cards, never both
|
||||
|
||||
Negative constraints — do not produce any of:
|
||||
- Inter, Roboto, Arial, Space Grotesk as primary typeface
|
||||
- Teal-to-blue or teal-to-green gradients
|
||||
- Serif headline on sans-serif body
|
||||
- Blinking / pulsing status indicators
|
||||
- Container-on-container layouts
|
||||
- Glassmorphism, neumorphism
|
||||
- Generic "modern SaaS landing page" defaults
|
||||
- Stock-photo abstract gradient hero imagery
|
||||
- Three-column feature grid with icon + headline + line (default
|
||||
fingerprint)
|
||||
- Centered-hero with single CTA (default fingerprint)
|
||||
|
||||
If you find yourself defaulting to any of these, stop and ask me to
|
||||
clarify before continuing.
|
||||
|
||||
Brand DESIGN.md: ObserveAPI brand kit attached as project asset.
|
||||
Reference it at every section.
|
||||
```
|
||||
|
||||
Expected follow-up turns:
|
||||
|
||||
1. Turn 1: outline review (Stage 2)
|
||||
2. Turn 2: visual generation (Stage 3) at the brief above
|
||||
3. Turn 3: layer-4 dimension refinement (typography modular scale, semantic color roles, motion easing)
|
||||
4. Turn 4: layer-5 grading-criteria weighting (functionality 0.4, craft 0.3, design quality 0.2, originality 0.1 — landing pages weight functionality high)
|
||||
5. Turn 5+: Tweak panel for spacing and density adjustments
|
||||
6. Variant fan-out (Stage 4) in next session, against the approved master
|
||||
|
||||
---
|
||||
|
||||
## Sources
|
||||
|
||||
- `https://anthropic.com/news/claude-design-anthropic-labs` — preset enumeration
|
||||
- `https://github.com/anthropics/skills/skills/frontend-design/SKILL.md` — Anthropic's frontend-design skill (closest adjacent Anthropic source; Design-Thinking Framework, AI-slop avoid-list, four design dimensions)
|
||||
- `https://claude.com/blog/improving-frontend-design-through-skills` — AI-slop avoid-list (amplified for marketing collateral)
|
||||
- `https://chatprd.ai` — community four-stage landing-page workflow
|
||||
- `https://sagnikbhattacharya.com/blog/claude-design` — community variant-fan-out pattern for social formats
|
||||
- `https://anthropic.com/engineering/harness-design-long-running-apps` — design grading criteria (composed for marketing collateral)
|
||||
|
||||
Re-research trigger: Anthropic publishing a marketing-collateral tutorial; community four-stage workflow drifting; new slop-fingerprint patterns emerging in the AI-generated landing-page corpus; competitor-screenshot extraction patterns evolving.
|
||||
|
|
@ -0,0 +1,168 @@
|
|||
# Preset: one-pagers
|
||||
|
||||
**Last updated:** 2026-05-17 | **Verified:** research/03-prompt-patterns-intent-presets.md
|
||||
Evidence grade: Community-only — Anthropic publishes no per-preset prompt patterns for this preset as of 2026-05-16.
|
||||
|
||||
Anthropic names `one-pagers` in the launch enumeration at `https://anthropic.com/news/claude-design-anthropic-labs` but does not publish a dedicated tutorial, support article, or canonical prompt set for it. The patterns below come from community practitioners — Substack walkthroughs, blog posts, newsletter pieces — with full attribution. Treat them as field-tested but not Anthropic-authoritative.
|
||||
|
||||
---
|
||||
|
||||
## (a) What this preset is
|
||||
|
||||
Anthropic launch post one-sentence description: a one-pager is a single-screen artifact for memos, summaries, leave-behinds, executive briefs, or single-page deliverables. The destination is typically PDF or print.
|
||||
|
||||
Distinguishing properties:
|
||||
|
||||
- Single page — no multi-screen navigation, no scrolling sections that imply continuation
|
||||
- High information density compared to a slide
|
||||
- Self-contained narrative — reader does not need surrounding context
|
||||
- Often delivered as a leave-behind after a meeting or as a one-shot brief
|
||||
|
||||
---
|
||||
|
||||
## (b) Why Anthropic published no per-preset guidance
|
||||
|
||||
The launch enumeration treats one-pagers as a destination shape rather than a generation mode requiring distinct prompt patterns. The Goal / Layout / Content / Audience framework (`../01-prompt-fundamentals.md` Layer 1) and the five-layer stack apply directly — Layout becomes single-page structure, Content becomes the dense information payload, Audience tightens the tone.
|
||||
|
||||
Community practitioners have converged on patterns that constrain the one-pager preset more tightly than the generic stack does (Sections c and d).
|
||||
|
||||
---
|
||||
|
||||
## (c) Community patterns
|
||||
|
||||
### Word-count cap per block
|
||||
|
||||
Community pattern from `https://sagnikbhattacharya.com/blog/claude-design` (cited in `research/03`): cap the word count per layout block in the brief. The mechanism — Claude Design defaults to verbose prose when block content is unspecified, and one-pagers fail when any block runs long. The convergent caps from community practice:
|
||||
|
||||
- Title block: 8 words max
|
||||
- Subtitle: 15 words max
|
||||
- Body paragraph: 60 words max
|
||||
- Bullet item: 12 words max
|
||||
- Callout box: 25 words max
|
||||
|
||||
Brief the caps explicitly in the prompt — the model otherwise produces blocks 2-3x longer than the operator wants.
|
||||
|
||||
### Above-the-fold density limit
|
||||
|
||||
Community pattern from `https://newsletter.victordibia.com` (cited in `research/03`): cap the number of distinct elements visible in the top half of the one-pager. Convergent limits:
|
||||
|
||||
- Maximum 5 distinct visual elements above the fold (counting title, subtitle, one body block, one visual, one callout = 5)
|
||||
- Maximum 3 colour roles visible above the fold (typically: ink for title, fg for body, accent for one emphasis)
|
||||
- Maximum 2 typographic weights above the fold (typically 700 title, 500 body)
|
||||
|
||||
The brief encodes these as explicit constraints:
|
||||
|
||||
```
|
||||
Above the fold (top half of the page), no more than 5 distinct visual
|
||||
elements, no more than 3 color roles, no more than 2 typographic
|
||||
weights. Density below the fold can scale up.
|
||||
```
|
||||
|
||||
### Real-data injection over lorem ipsum
|
||||
|
||||
Same pattern as `designs.md` and `prototypes.md`: use realistic placeholder content. For one-pagers specifically, this matters more — a one-pager is typically read once and discarded; if the content reads as placeholder, it loses the reader.
|
||||
|
||||
---
|
||||
|
||||
## (d) Critical caveats
|
||||
|
||||
### Density-versus-readability trade-off
|
||||
|
||||
One-pagers are constrained by physical reading mechanics — the operator can pack a lot into one page, but each element added reduces the reader's attention to every other element. The brief should weight density-vs-readability explicitly:
|
||||
|
||||
```
|
||||
Optimise for the reader's ability to extract the takeaway in 30 seconds
|
||||
of scanning. If a block requires more than 30 seconds of focused reading
|
||||
to extract the takeaway, it does not belong on this one-pager.
|
||||
```
|
||||
|
||||
### Export to PDF preserves layout; export to other formats may not
|
||||
|
||||
PDF is the canonical one-pager export. HTML standalone works. PPTX is awkward for one-pagers (PPTX assumes deck format, not single-page format). Code-handoff is rare for one-pagers but works.
|
||||
|
||||
### Anthropic AI-slop avoid-list still applies
|
||||
|
||||
Layer 3 negative constraints (`../01-prompt-fundamentals.md`) apply with full force on one-pagers — the dense information context does not exempt the artifact from the avoid-list. Inter, Roboto, Arial, purple gradients on white, generic-modern defaults all degrade the one-pager.
|
||||
|
||||
---
|
||||
|
||||
## (e) One worked prompt — layers 1 + 3 composed (Layer 2a is preset-optional)
|
||||
|
||||
Goal: an executive one-pager summarizing a project's Q1 status, audience is VP of Engineering.
|
||||
|
||||
```
|
||||
Goal: A single-page executive summary of the platform team's Q1 2026
|
||||
delivery, reliability, and Q2 themes. Designed to be scanned in
|
||||
30 seconds and absorbed in 3 minutes.
|
||||
Layout: Single-page A4 portrait. Top quarter: title + headline takeaway
|
||||
+ 3 KPI numbers in a row. Middle half: 3 short body paragraphs
|
||||
(one per: delivery, reliability, Q2 themes). Bottom quarter:
|
||||
callout box with the one explicit ask + signature/contact block.
|
||||
Content: Real KPI numbers (% completion, MTTR minutes, uptime %); real
|
||||
body content (no lorem ipsum); explicit ask is one sentence;
|
||||
contact block names the person + email
|
||||
Audience: VP of Engineering, scanning between meetings, needs the
|
||||
takeaway and one ask, will dive into details only if the
|
||||
takeaway warrants it
|
||||
|
||||
Word-count caps (community pattern from
|
||||
https://sagnikbhattacharya.com/blog/claude-design):
|
||||
- Title block: 8 words max
|
||||
- Subtitle / headline takeaway: 15 words max
|
||||
- Body paragraph: 60 words max
|
||||
- Bullet item: 12 words max
|
||||
- Callout box: 25 words max
|
||||
|
||||
Above-the-fold density limit (community pattern from
|
||||
https://newsletter.victordibia.com):
|
||||
- Maximum 5 distinct visual elements above the fold
|
||||
- Maximum 3 color roles visible above the fold
|
||||
- Maximum 2 typographic weights above the fold
|
||||
|
||||
Aesthetic family: editorial-confident — terse, signal-dense, no flourish
|
||||
Color palette (CSS hex):
|
||||
--color-bg: #FAFAF8
|
||||
--color-surface: #FFFFFF
|
||||
--color-muted: #6B6B6B
|
||||
--color-fg: #2A2A2A
|
||||
--color-ink: #0A0A0A
|
||||
--color-accent: #3D5C8A
|
||||
Typography: Söhne or Inter Variable; modular scale 1.250; weight palette
|
||||
500 body / 700 headings
|
||||
Corner radius: 4px on the callout box only; rest is flat
|
||||
Motion: none (one-pager is static)
|
||||
Density: dense (8mm margins, 4mm gutters)
|
||||
Surface: flat — no shadows
|
||||
|
||||
Negative constraints — do not produce any of:
|
||||
- Inter, Roboto, Arial, or Space Grotesk as primary typeface
|
||||
- Purple gradients on white backgrounds
|
||||
- Card-style metric tiles with shadows
|
||||
- Centered-title-and-subtitle generic header
|
||||
- Pulse / breathing animations (this is a static one-pager)
|
||||
- Generic "executive summary template" defaults
|
||||
|
||||
Optimise for the reader's ability to extract the takeaway in 30 seconds
|
||||
of scanning. If a block requires more than 30 seconds of focused reading
|
||||
to extract the takeaway, it does not belong on this one-pager.
|
||||
```
|
||||
|
||||
Expected follow-up turns:
|
||||
|
||||
1. Turn 2: tighten word counts if any block ran over cap
|
||||
2. Turn 3: refine callout-box positioning if it competes with the headline takeaway
|
||||
3. Turn 4+: Tweak panel for spacing scale and density adjustments
|
||||
4. Export to PDF; visual-audit at 100% zoom and at print size
|
||||
|
||||
---
|
||||
|
||||
## Sources
|
||||
|
||||
- `https://anthropic.com/news/claude-design-anthropic-labs` — preset enumeration, one-sentence description
|
||||
- `https://support.claude.com/en/articles/14604416-get-started-with-claude-design` — GLCA framework (composed in this preset)
|
||||
- `https://sagnikbhattacharya.com/blog/claude-design` — community pattern for word-count caps per block
|
||||
- `https://newsletter.victordibia.com` — community pattern for above-the-fold density limits
|
||||
- `https://claude.com/blog/improving-frontend-design-through-skills` — AI-slop avoid-list (composed)
|
||||
- `https://github.com/anthropics/skills/skills/frontend-design/SKILL.md` — Design-Thinking Framework reference
|
||||
|
||||
Re-research trigger: Anthropic publishing a dedicated tutorial for one-pagers; community word-count caps drifting; new one-pager-specific community pattern emerging.
|
||||
|
|
@ -0,0 +1,198 @@
|
|||
# Preset: pitch-decks
|
||||
|
||||
**Last updated:** 2026-05-17 | **Verified:** research/03-prompt-patterns-intent-presets.md
|
||||
**Evidence grade:** Community-only — Anthropic publishes no per-preset prompt patterns for this preset as of 2026-05-16.
|
||||
|
||||
Evidence grade: Community-only — Anthropic publishes no per-preset prompt patterns for this preset as of 2026-05-16.
|
||||
|
||||
Anthropic names `pitch-decks` in the launch enumeration at `https://anthropic.com/news/claude-design-anthropic-labs` but publishes no dedicated tutorial. **Critical caveat upfront:** community practitioner `https://moda.app/blog/claude-design-for-pitch-decks` documents an explicit recommendation against using Claude Design for external/investor pitch decks when PPTX is the required delivery format — see Section (d).
|
||||
|
||||
---
|
||||
|
||||
## (a) What this preset is
|
||||
|
||||
Anthropic launch post one-sentence description: `pitch-decks` covers investor pitches, external partner proposals, and any high-stakes presentation format that needs to look polished. The preset distinguishes itself from the more general `slides` preset by audience — external rather than internal — and by typical destination — PPTX or PDF rather than HTML.
|
||||
|
||||
The distinguishing question vs `slides`: **is the audience an external investor or external partner where the deck represents the company's positioning?** Yes → `pitch-decks`. Internal audience → `slides`.
|
||||
|
||||
---
|
||||
|
||||
## (b) Why Anthropic published no per-preset guidance
|
||||
|
||||
Anthropic likely treats pitch-decks as a high-stakes specialisation of `slides` rather than a fundamentally distinct generation mode. The `slides` tutorial at `https://claude.com/resources/tutorials/using-claude-design-for-presentations-and-slide-decks` covers the prompt patterns; the `pitch-decks` preset inherits those patterns and adds the audience-stakes layer.
|
||||
|
||||
Community practitioners have converged on patterns specific to pitch-deck production (Section c). The most important community contribution, however, is the PPTX-export caveat (Section d) — the failure mode is severe enough that the default recommendation diverges from `slides`.
|
||||
|
||||
---
|
||||
|
||||
## (c) Community patterns
|
||||
|
||||
### Sagnik Bhattacharya's 10-slide template
|
||||
|
||||
Community pattern from `https://sagnikbhattacharya.com/blog/claude-design` (cited in `research/03`): the convergent 10-slide pitch-deck template for B2B SaaS pitches:
|
||||
|
||||
1. Title — company name, one-line positioning, tagline
|
||||
2. Problem — who has it, what it costs them, how acute
|
||||
3. Solution — what we built, one-sentence value prop
|
||||
4. Market — TAM / SAM / SOM (sized realistically)
|
||||
5. Product — 2-3 screenshots or visual demos
|
||||
6. Business model — how we charge, ACV ranges, GTM motion
|
||||
7. Traction — revenue, growth rate, named customers
|
||||
8. Team — founders + key hires, why this team for this problem
|
||||
9. Competition — competitive map (4-quadrant or named comparisons)
|
||||
10. Ask — funding round size, use of funds, timeline
|
||||
|
||||
The template is community-converged, not Anthropic-published. It composes with Anthropic's `slides` tutorial patterns from `https://claude.com/resources/tutorials/using-claude-design-for-presentations-and-slide-decks`.
|
||||
|
||||
### MindStudio per-slide micro-prompts
|
||||
|
||||
Community pattern from MindStudio (cited in `research/03`): rather than briefing the full pitch deck in one prompt, micro-prompt each slide individually. The pattern produces tighter per-slide narrative because each slide gets dedicated attention.
|
||||
|
||||
The micro-prompt pattern (per slide):
|
||||
|
||||
```
|
||||
Generate slide N of the pitch deck. This slide does one job:
|
||||
[the slide's job — e.g., "convince the audience that the problem is
|
||||
acute by quantifying customer cost"].
|
||||
|
||||
Visual elements: [specific to this slide — e.g., "one large number
|
||||
showing annual cost, two supporting smaller numbers, one explanatory
|
||||
sentence"].
|
||||
|
||||
Constraints from DESIGN.md: [reference the project's DESIGN.md].
|
||||
|
||||
Do not include filler — every element on this slide must support the
|
||||
one job.
|
||||
```
|
||||
|
||||
Walk through slides 1-10 sequentially.
|
||||
|
||||
### Outline-first scaffolding (composed from `slides.md`)
|
||||
|
||||
The outline-first pattern from `slides.md` Section (d) applies: brief the deck as an outline first (turn 1), then expand to full slides (turn 2-N).
|
||||
|
||||
---
|
||||
|
||||
## (d) Critical caveats
|
||||
|
||||
### PPTX export trap — explicit recommendation against external pitch decks
|
||||
|
||||
Community-documented at `https://moda.app/blog/claude-design-for-pitch-decks` (cited in `research/03`) and `https://claudedesign.substack.com`: when an HTML-rendered pitch deck is exported to PPTX, richly-styled text can flatten to images. PowerPoint loses the editability — the text becomes a rasterised picture.
|
||||
|
||||
For internal slide decks (audience tolerates some export friction), the operator can mitigate by keeping typography simple. For external pitch decks (audience expects polish, may want to add their own annotations or edit the deck), this failure mode is severe enough that the community recommendation is:
|
||||
|
||||
> Do not use Claude Design for external/investor pitch decks where PPTX export is the required delivery format. Use HTML standalone or PDF if Claude Design is required; otherwise produce the deck in PowerPoint or Keynote directly.
|
||||
|
||||
This plugin surfaces the recommendation but does not refuse to operate. The operator may have a reason to proceed (HTML acceptable, PDF acceptable, the PPTX text-as-text survival is verified to be acceptable for their specific styling). When proceeding, validate PPTX export early — generate slide 1 fully, export to PPTX, verify text-as-text survival, then commit to the deck.
|
||||
|
||||
### Audience-stakes asymmetry
|
||||
|
||||
A pitch deck for a $50M Series C carries different stakes than a pitch deck for a $500K seed extension. The operator's tolerance for export imperfection scales with the dollar amount on the line. Default conservatively — when in doubt about whether the export will survive, treat the deck as high-stakes.
|
||||
|
||||
### Slop-fingerprints warning amplified
|
||||
|
||||
Layer 3 negative constraints apply with extra weight on pitch decks. Investors see many decks; AI-slop fingerprints (purple gradients, generic three-column structure, Inter typography, centered-hero defaults, glassmorphism, neumorphism) signal that the deck is templated and the team did not invest care. The brief should over-specify the negative constraints.
|
||||
|
||||
---
|
||||
|
||||
## (e) One worked prompt — layers 1 + 3 composed, slide-by-slide micro-prompt pattern
|
||||
|
||||
Goal: a 10-slide investor pitch deck for a B2B SaaS observability product, audience is Series A investors.
|
||||
|
||||
```
|
||||
PRECONDITION: Before generating any slide, render slide 1 fully and
|
||||
export to PPTX. Verify text-as-text survival. If text flattens to
|
||||
images, switch destination to HTML standalone or PDF and notify me
|
||||
before continuing.
|
||||
|
||||
Goal: A 10-slide Series A pitch deck for a B2B SaaS observability
|
||||
product
|
||||
Layout (outline — per Sagnik Bhattacharya's 10-slide template at
|
||||
https://sagnikbhattacharya.com/blog/claude-design):
|
||||
1. Title
|
||||
2. Problem
|
||||
3. Solution
|
||||
4. Market (TAM / SAM / SOM)
|
||||
5. Product (2-3 visual demos)
|
||||
6. Business model
|
||||
7. Traction (revenue, growth, named customers)
|
||||
8. Team
|
||||
9. Competition
|
||||
10. Ask
|
||||
Content: Real numbers, real customer names, real founder names, real
|
||||
competitive references. No lorem ipsum, no placeholder logos.
|
||||
Audience: Series A investors at top-tier funds, ages 35-55, see 50+
|
||||
decks per quarter, allergic to template fingerprints
|
||||
|
||||
Aesthetic family: editorial-confident — like Andreessen Horowitz pitch
|
||||
decks meets Linear's design language. Authoritative,
|
||||
no flourish, every visual element earns its place.
|
||||
Color palette (CSS hex):
|
||||
--color-bg: #FAFAF8
|
||||
--color-surface: #FFFFFF
|
||||
--color-muted: #6B6B6B
|
||||
--color-fg: #2A2A2A
|
||||
--color-ink: #0A0A0A
|
||||
--color-accent: #1A3552
|
||||
Typography: Söhne (preferred — concrete-named) or Inter Variable;
|
||||
modular scale 1.333; weight palette 400 body / 600
|
||||
emphasized / 700 slide titles
|
||||
Corner radius: 0 (full-bleed slides), 4px on any inline container
|
||||
Motion: none on static slides; ease-out 240ms on slide transitions
|
||||
Density: comfortable — one job per slide, generous spacing
|
||||
Surface: flat — full-bleed, no shadows
|
||||
|
||||
Slide composition rules:
|
||||
- Each slide does one job
|
||||
- Slide titles are claims, not topics ("$2.4B addressable market"
|
||||
not "Market")
|
||||
- Body text is 2 lines max per slide
|
||||
- One number, chart, or visual element per slide max
|
||||
- Speaker notes carry depth; slides carry the takeaway
|
||||
|
||||
Per-slide micro-prompt pattern (MindStudio, cited in research/03):
|
||||
Generate slide N. Its one job: [name the job].
|
||||
Visual elements: [specific to slide].
|
||||
No filler — every element supports the one job.
|
||||
|
||||
Negative constraints — do not produce any of:
|
||||
- Inter, Roboto, Arial, Space Grotesk as primary typeface
|
||||
- Purple gradients on white backgrounds
|
||||
- Three-column feature grid as a default slide structure
|
||||
- Centered-title-and-subtitle on every slide
|
||||
- Glassmorphism, neumorphism, gradient hero backgrounds
|
||||
- Pulse / breathing animations or fly-in transitions
|
||||
- Generic "investor pitch deck template" defaults
|
||||
- Stock-photo placeholder imagery
|
||||
|
||||
If you find yourself defaulting to any AI-slop pattern (per
|
||||
https://claude.com/blog/improving-frontend-design-through-skills),
|
||||
stop and ask me to clarify before continuing.
|
||||
|
||||
Slop-fingerprints warning is amplified — investors recognise template
|
||||
patterns. Over-specify the aesthetic to push the deck out of default
|
||||
neighbourhood.
|
||||
```
|
||||
|
||||
Expected follow-up turns:
|
||||
|
||||
1. Turn 1 (precondition): slide 1 + PPTX export validation. If text flattens, switch destination.
|
||||
2. Turn 2: 10-slide outline approval
|
||||
3. Turn 3-12: per-slide micro-prompt for each slide
|
||||
4. Turn 13: full-deck render, cross-slide consistency check
|
||||
5. Turn 14: Tweak panel for spacing and density adjustments
|
||||
6. Export and visual-audit at full deck level
|
||||
|
||||
---
|
||||
|
||||
## Sources
|
||||
|
||||
- `https://anthropic.com/news/claude-design-anthropic-labs` — preset enumeration
|
||||
- `https://claude.com/resources/tutorials/using-claude-design-for-presentations-and-slide-decks` — Anthropic's slides tutorial (composed for pitch-decks)
|
||||
- `https://support.claude.com/en/articles/13521390-use-claude-for-powerpoint` — PowerPoint-mode conventions (relevant for PPTX export)
|
||||
- `https://moda.app/blog/claude-design-for-pitch-decks` — community-documented PPTX export caveat (load-bearing)
|
||||
- `https://claudedesign.substack.com` — community pattern reinforcing PPTX export caveat
|
||||
- `https://sagnikbhattacharya.com/blog/claude-design` — community 10-slide pitch-deck template
|
||||
- `https://claude.com/blog/improving-frontend-design-through-skills` — AI-slop avoid-list (amplified for pitch decks)
|
||||
|
||||
Re-research trigger: Anthropic publishing a pitch-decks-specific tutorial; PPTX export behaviour changing (text-as-text survival improving or worsening); community 10-slide template drifting; new investor-deck pattern emerging.
|
||||
|
|
@ -0,0 +1,163 @@
|
|||
# Preset: wireframes-mockups
|
||||
|
||||
**Last updated:** 2026-05-17 | **Verified:** research/03-prompt-patterns-intent-presets.md
|
||||
Evidence grade: Community-only — Anthropic publishes no per-preset prompt patterns for this preset as of 2026-05-16.
|
||||
|
||||
Anthropic names `wireframes-mockups` in the launch enumeration at `https://anthropic.com/news/claude-design-anthropic-labs` but publishes no dedicated tutorial, support article, or canonical prompt set for it. The patterns below come from community practitioners; treat them as field-tested but not Anthropic-authoritative.
|
||||
|
||||
---
|
||||
|
||||
## (a) What this preset is
|
||||
|
||||
Anthropic launch post one-sentence description: `wireframes-mockups` covers the spectrum from low-fidelity layout sketches (boxes, labels, structure-only) to high-fidelity mockups (visual design applied, but not interactive). The output is structural — the goal is to communicate layout, not aesthetic and not interaction.
|
||||
|
||||
Distinguishing properties:
|
||||
|
||||
- Static (not interactive) — wireframes and mockups do not have working state transitions; for interaction logic, use `prototypes`
|
||||
- Low-fi or high-fi — the preset spans both ends; the operator picks via prompt
|
||||
- Pre-visual-design — wireframes are often deliverables before the visual designer commits to a direction
|
||||
- Iteration-cheap — wireframes are intended to be iterated quickly, so the prompt patterns lean on N-variations-first generation
|
||||
|
||||
---
|
||||
|
||||
## (b) Why Anthropic published no per-preset guidance
|
||||
|
||||
Wireframes occupy a niche between `designs` (visual exploration) and `prototypes` (interaction validation). Anthropic appears to treat the preset as a destination shape rather than a distinct generation mode. The Goal / Layout / Content / Audience framework (`../01-prompt-fundamentals.md` Layer 1) applies — Layout is the dominant concern, Content becomes structural labels, Audience determines fidelity level.
|
||||
|
||||
Community practitioners have converged on the patterns below (Section c).
|
||||
|
||||
---
|
||||
|
||||
## (c) Community patterns
|
||||
|
||||
### N-variations-first
|
||||
|
||||
Community pattern from `https://designwithai.substack.com` (cited in `research/03`): wireframes are most useful when generated in N variations and compared. Brief the model to produce N distinct layout variations in the first turn, then pick one to refine.
|
||||
|
||||
Convergent N values from community practice: 3 or 4 variations is the sweet spot. More than 4 dilutes the operator's attention; fewer than 3 does not surface meaningful alternatives.
|
||||
|
||||
The brief pattern:
|
||||
|
||||
```
|
||||
Generate 4 distinct wireframe variations for [feature/page]. For each:
|
||||
- One sentence describing the structural direction
|
||||
- The wireframe itself (boxes, labels, no visual design)
|
||||
|
||||
After I pick one, refine that variation into a mockup with visual
|
||||
design applied.
|
||||
```
|
||||
|
||||
This composes with Layer 2b (propose-options-before-building) from `../01-prompt-fundamentals.md`.
|
||||
|
||||
### Wireframe vs High-Fidelity sub-preset selection
|
||||
|
||||
Community pattern from `https://computingforgeeks.com` (cited in `research/03`): the preset spans low-fi to high-fi, but the model behaves differently across the spectrum. Brief the fidelity level explicitly:
|
||||
|
||||
```
|
||||
Fidelity: low-fi
|
||||
- boxes with labels, no typography weights other than 500
|
||||
- one color (greyscale) — bg, surface, muted, fg
|
||||
- no images, no icons — represent visual elements as labelled boxes
|
||||
- 8pt grid visible if helpful
|
||||
|
||||
OR
|
||||
|
||||
Fidelity: high-fi
|
||||
- actual typography, full color palette, real icons, real images
|
||||
- production-ready visual treatment
|
||||
- no interaction logic (this is wireframes preset, not prototypes)
|
||||
```
|
||||
|
||||
Pick one explicitly. The default-mode failure is the model producing a mid-fidelity output that satisfies neither the low-fi structural goal nor the high-fi visual-validation goal.
|
||||
|
||||
### The Aakashg / Nielsen "low-fi-is-deprecated" debate (flagged as unsettled)
|
||||
|
||||
A community debate documented across Aakash Gupta's and Jakob Nielsen's posts in 2024-2025 (cited in `research/03`) argues that AI-generated high-fi mockups have made low-fi wireframes operationally obsolete — the marginal cost of generating a high-fi mockup is now low enough that there is no reason to start with low-fi. The counter-argument: low-fi wireframes still serve a communication function (forcing reviewers to focus on structure, not aesthetic) that high-fi mockups undermine.
|
||||
|
||||
This plugin treats the debate as **unsettled**. The brief should pick the fidelity level deliberately, with the choice tied to the audience and the review purpose, not to a default assumption that one fidelity dominates. Flag the debate when the operator's choice seems unconsidered.
|
||||
|
||||
---
|
||||
|
||||
## (d) Critical caveats
|
||||
|
||||
### Aesthetic drift if starting in high-fi
|
||||
|
||||
When starting in high-fidelity mode, the model imports its convergent middle-ground aesthetic defaults more aggressively (because the visual decisions are within scope). Layer-3 negative constraints (`../01-prompt-fundamentals.md`) apply with extra weight on high-fi mockups.
|
||||
|
||||
### Iteration economy — wireframes burn turns
|
||||
|
||||
Each variation requested in the N-variations-first pattern costs a fraction of a turn (the model generates all N in one chat round). But subsequent refinement of the chosen variation often requires multiple turns (typography decisions, color palette, component-level styling). Budget accordingly — a wireframe-to-mockup flow can consume 4-6 turns for a single page.
|
||||
|
||||
### Wireframe ≠ prototype
|
||||
|
||||
If the operator describes user interactions ("the user clicks here, then sees this"), they want `prototypes`, not `wireframes-mockups`. Wireframes capture structure; prototypes capture behaviour. Misclassification leads to wasted turns regenerating an artifact in the wrong preset.
|
||||
|
||||
---
|
||||
|
||||
## (e) One worked prompt — layers 1 + 3 composed, N-variations-first pattern
|
||||
|
||||
Goal: 4 wireframe variations for a customer-onboarding page, audience is product team for review.
|
||||
|
||||
```
|
||||
Goal: 4 distinct wireframe variations for the first page of a customer
|
||||
onboarding flow. The page introduces the product, captures
|
||||
essential information, and routes the customer to one of three
|
||||
paths (self-serve, sales-assisted, partner-handoff).
|
||||
Layout: Single page, viewport ~1440x900. Each variation lays out the
|
||||
same content differently.
|
||||
Content: Real placeholder content — actual headlines, actual button
|
||||
labels, actual form field labels. No lorem ipsum.
|
||||
Audience: Internal product team (PM, design lead, eng lead) reviewing
|
||||
structure choices before committing to a direction
|
||||
|
||||
Fidelity: low-fi (community pattern from
|
||||
https://computingforgeeks.com — fidelity affects iteration
|
||||
path)
|
||||
- boxes with labels, no typography weights other than 500
|
||||
- greyscale only (bg, surface, muted, fg)
|
||||
- no images, no icons — labelled boxes
|
||||
- 8pt grid visible
|
||||
|
||||
N-variations-first (community pattern from
|
||||
https://designwithai.substack.com):
|
||||
|
||||
Generate 4 distinct wireframe variations. For each variation:
|
||||
- One-sentence description of the structural direction (e.g.,
|
||||
"Top-down narrative — story first, paths second")
|
||||
- The wireframe itself
|
||||
- One-line rationale tying the structure to the audience and goal
|
||||
|
||||
The 4 variations should be meaningfully distinct from each other —
|
||||
not minor tweaks of one base layout.
|
||||
|
||||
After I pick one, generate a fifth output: a refined mockup of the
|
||||
chosen variation, transitioning fidelity from low-fi to medium-fi.
|
||||
|
||||
Negative constraints (Anthropic AI-slop avoid-list):
|
||||
- Inter, Roboto, Arial, Space Grotesk as primary typeface (the
|
||||
fidelity-low constraint covers most of this, but flag explicitly)
|
||||
- Purple gradients (low-fi means greyscale anyway)
|
||||
- Three-column feature grid as the default structural pattern
|
||||
- Centered-hero with single CTA as the default
|
||||
- Cookie-cutter framing
|
||||
```
|
||||
|
||||
Expected follow-up turns:
|
||||
|
||||
1. Turn 1: 4 wireframe variations generated
|
||||
2. Turn 2: operator picks variation, refined low-fi mockup generated
|
||||
3. Turn 3: aesthetic family applied (full layer-2a brief), medium-fi mockup
|
||||
4. Turn 4: layer-4 dimensions applied (typography modular scale, color palette, component stylings)
|
||||
5. Turn 5+: Tweak panel for spacing and density adjustments
|
||||
|
||||
---
|
||||
|
||||
## Sources
|
||||
|
||||
- `https://anthropic.com/news/claude-design-anthropic-labs` — preset enumeration, one-sentence description
|
||||
- `https://designwithai.substack.com` — community pattern: N-variations-first
|
||||
- `https://computingforgeeks.com` — community pattern: explicit Wireframe-vs-High-Fidelity fidelity selection
|
||||
- `https://claude.com/blog/improving-frontend-design-through-skills` — AI-slop avoid-list (composed for high-fi mode)
|
||||
- `https://github.com/anthropics/skills/skills/frontend-design/SKILL.md` — Design-Thinking Framework reference
|
||||
|
||||
Re-research trigger: Anthropic publishing a dedicated wireframes-mockups tutorial; the Aakashg/Nielsen low-fi-is-deprecated debate reaching practitioner consensus; new sub-fidelity tier surfacing in community practice.
|
||||
Loading…
Add table
Add a link
Reference in a new issue