12 KiB
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:
- Brief stage — define the audience, the value prop, the one CTA, the proof points. Output: text document, not in Claude Design yet.
- 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.
- Visual stage — brief Claude Design from the outline using layers 1-5. First turn produces the landing page; iteration tightens.
- 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:
- Turn 1: outline review (Stage 2)
- Turn 2: visual generation (Stage 3) at the brief above
- Turn 3: layer-4 dimension refinement (typography modular scale, semantic color roles, motion easing)
- 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)
- Turn 5+: Tweak panel for spacing and density adjustments
- Variant fan-out (Stage 4) in next session, against the approved master
Sources
https://anthropic.com/news/claude-design-anthropic-labs— preset enumerationhttps://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 workflowhttps://sagnikbhattacharya.com/blog/claude-design— community variant-fan-out pattern for social formatshttps://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.