Claude design prompts for landing pages: 8 prompts that work and why

Research brief

What this research adds

A curated, source-attributed library of eight Claude landing-page prompts with the mechanism behind each one explained and tied to documented Claude behavior, plus a decision framework for choosing between Claude Design, Claude Code, and Cowork, and a 10-item named-failure catalog mapped to the prompts that patch each failure.

Research question

For a builder writing a landing page with Claude in 2026, which prompts actually ship an on-brand page, why does each one work, and where does Claude Design end and Claude Code begin?

Method

Collected candidate prompts from Anthropic's primary documentation (the Claude Design launch post, both support-docs articles, the prompt-engineering docs, the frontend-aesthetics cookbook) and the most-referenced community templates (superdesign.dev, rohitg00/awesome-claude-design, aibestprompts.in, designmd.app, ruben.substack.com), selected via a first-party research pass on 2026-08-12 (four AI assistants queried with identical neutral prompts, all cited URLs canonicalized and cross-scored, top 15 sources fetched and torn down). Kept only prompts whose mechanism could be tied to documented Claude behavior. Prompts were not individually re-run end-to-end in this pass; output and timing claims stay attributed to their authors.

Confidence

High

Evidence

primary documentation, first-party test, LLM citation capture

Next verification

October 11, 2026

TL;DR: Eight prompts cover the whole landing-page job with Claude: three that build the DESIGN.md (from a repo, from a live site, from a brand folder via Cowork), the 4-block brief that generates the page, a reference-extraction prompt, a reference-anchored build prompt, a screenshot diff loop, and a WCAG gate before export. The pattern behind all eight is the same: Claude writes flawless, accessible code but converges on the statistical average of its training data (Inter, a purple gradient on white, three rounded cards) unless the prompt bans those defaults by name and pins the aesthetic to a source of truth. That structure comes from Anthropic's own docs (goal, layout, content, audience) plus the community's anti-slop constraint block (superdesign.dev, awesome-claude-design). Where you run them matters: Claude Design (Anthropic Labs, launched 2026-04-17, powered by Claude Opus 4.7, at claude.ai/design) when no codebase exists and design is the bottleneck, Claude Code when the repo exists, Cowork when your brand assets are a folder that needs to become a DESIGN.md first.

The 8 Prompts

I pulled these from Anthropic's documentation and the most-referenced community templates, kept the ones whose mechanism maps to documented Claude behavior, and adapted each for copy-paste. Attribution inline. Run prompts 1-3 once per project; prompts 4-8 per page.

1. The DESIGN.md writer (repo path)

Builds the design-system file from your existing codebase before any UI gets generated. Adapted from superdesign.dev; run it in Claude Code at the project root.

Audit my repo before designing anything. Read package.json, my tailwind
config, globals.css, and 3 or 4 existing components. Then write a
DESIGN.md at the project root as rules you will follow every time:
- Fonts: display, body, mono. List the generic ones to NEVER use:
  Inter, Roboto, Open Sans, Arial, system-ui.
- Color: ONE dominant color plus ONE accent, all as CSS variables.
  Ban purple or indigo gradients on white.
- Spacing: an 8px rhythm. Type scale uses weight extremes (200 vs 800)
  and size jumps of 3x, not 1.5x.
- Components: the shadcn/ui primitives plus the real components already
  in my repo, with import paths, so you reuse instead of hand-rolling.
- Forbidden: three rounded cards in a row, centered-everything heroes,
  0.1-opacity drop shadows on everything.
Do NOT generate UI yet. Write DESIGN.md, show it to me, and wait.

Why it works. It attacks Claude's three documented weaknesses in one file: it's blind (writes CSS, can't see the render), it has no design memory between sessions, and left alone it defaults to the training-data average (superdesign.dev). The DESIGN.md becomes persistent memory, the bans pre-empt the defaults, and the closing "do NOT generate UI yet, wait" stops Claude from burning a generation before the rules exist. That last line is the part most people skip and then wonder why the first output ignored the system.

2. The brand-to-DESIGN.md extractor (live site path)

Captures an existing brand's visual language into a DESIGN.md a coding agent can follow. From awesome-claude-design; run it where Claude has fetch or browser tooling (Cowork, Claude Code with web access), or paste a screenshot instead of the URL.

You are a senior design systems architect. Analyze the brand at {URL}
and produce a DESIGN.md file that captures its visual language for
coding agents to replicate.
Inspect: computed CSS of body, h1, primary button, primary link; hero
section tokens (color, type, spacing); font stack; distinctive visual
signatures (radii, shadows, motion, grid).
Output all 9 canonical sections: Visual Theme & Atmosphere, Color
Palette & Roles (CSS variables), Typography Rules, Component Stylings,
Layout Principles, Depth & Elevation, Do's and Don'ts, Responsive
Behavior, Agent Prompt Guide.
Rules: only describe what you can verify from rendered output. Never
hallucinate typography names; mark "unknown" if unclear. Color values
as hex with role names, not brand names. Each section under 150 words.

Why it works. Two guardrails do the real work. "Only describe what you can verify" plus "never hallucinate typography names, mark unknown" turns Claude's tendency to confidently guess fonts into an honest gap you can fill by hand. And the fixed 9-section shape (documented at designmd.app, which hosts 461 examples) makes the output portable across Claude Code, Cursor, Kiro, Windsurf, and Cline instead of a one-off note. One caveat, covered in the conflicts section below: in Claude Design proper there's no URL fetching, so feed it a screenshot.

3. The Cowork brand-folder extractor (no-code path)

For scattered brand assets and no codebase. From Ruben Hassid's walkthrough: drop logos, past slides, brand PDF, and product screenshots into one folder, open Cowork, select the folder, and paste:

Analyze this folder and produce a full design system write-up. Fonts,
colors, graphical styles, component patterns, tone, layout conventions.
Flag anything that's missing. Save it as DESIGN.md in my folder.

Why it works. It meets non-coders where their brand actually lives: a messy folder. "Flag anything that's missing" is the load-bearing line, because it converts silent guessing into an explicit gap list. The known failure mode: mixed inputs average into a compromise system when your references disagree on typography or color, so curate the folder before running it. One coherent deck beats five conflicting ones.

4. The 4-block landing-page brief (the main event)

The prompt that generates the page. Structure from Anthropic's support docs (goal, layout, content, audience); constraint block from the community canon (superdesign.dev, aibestprompts.in, awesome-claude-design). Works in Claude Design (attach the DESIGN.md) and Claude Code (DESIGN.md in repo root).

Build a landing page for [product name]: [one-sentence pitch].

Use the attached DESIGN.md as the source of truth for color, type,
geometry, and component style. Do not invent new tokens.

Sections in order: hero, social proof, three-feature grid, pricing
teaser, secondary CTA, footer.

Tone: [pick one] confident · curious · honest · playful.

Audience: [one specific persona and their current situation].

Constraints (verbatim):
- No Inter, Roboto, Open Sans, or system-ui.
- No purple or indigo gradients on white.
- No centered three-rounded-card hero. Use asymmetric two-column
  or full-bleed hero with typographic hierarchy.
- No 0.1-opacity drop shadows on everything. One deliberate
  shadow if any, on the primary CTA only.
- No Lorem Ipsum. Use real, specific copy for MY product.
- No emoji feature icons. Use Lucide or the icons already in
  the codebase.
- Single accent color moment per viewport. Kill duplicates.

Generate the page. Then wait for feedback before regenerating.

Why it works. Each block closes a different escape hatch. The goal line stops Claude from inventing the product. "Do not invent new tokens" is the single highest-leverage sentence in the whole library, because token drift is how a page goes off-brand while technically following your colors. The ordered section list replaces Claude's default page anatomy with yours. The audience block shifts the copy from generic marketing lines to one persona's situation, which is Anthropic's own fourth block. And the constraints ban the statistical defaults by name, because "make it beautiful" does nothing while "no Inter, no purple gradient" measurably changes the output. A vague version of this prompt hands Claude three jobs at once (taste, layout, code); this version leaves it only code.

5. The reference extractor

Converts a screenshot you admire into reusable rules instead of a pixel copy. From superdesign.dev:

Here is a screenshot of a UI whose style I want: [attach]. Do NOT copy
it pixel for pixel. Extract its design language into reusable rules:
type scale and pairings, spacing rhythm, color logic (dominant plus
accent), border radius, shadow style, and density.
Append those as a "Reference: [name]" section in DESIGN.md, then build
[screen] in that language using my own content.

Why it works. Claude Design runs on Claude Opus 4.7, a vision model (Anthropic launch post), and vision anchoring beats prose description for aesthetics. The "do NOT copy, extract the language" split matters twice: it keeps you out of clone territory, and rules generalize to your other pages while a copy doesn't. Appending to DESIGN.md makes the taste reusable instead of trapped in one chat.

6. The reference-anchored build

The fast version when you have a reference and a product but no DESIGN.md yet. From superdesign.dev:

Build a landing page (hero, features, pricing teaser) for:
[product, one sentence].
Anchor the visual language to this reference: [paste reference].
Match its type scale, whitespace, and how it uses a single accent color.
Write real, specific copy for MY product, not placeholder marketing
lines. One deliberate page-load animation, not scattered
micro-interactions. Use DESIGN.md fonts and colors if present.
No purple gradient, no emoji feature cards.

Why it works. "Match its type scale, whitespace, and how it uses a single accent color" names the three levers that carry most of a landing page's perceived quality, so Claude imitates the structure of the taste rather than the surface. "One deliberate page-load animation, not scattered micro-interactions" pre-empts the confetti failure mode where every element animates and nothing lands. Copy instruction included because landing pages are where Claude's placeholder text habit costs the most.

7. The screenshot diff loop

The iteration prompt after the first render. Loop shape from superdesign.dev's screenshot-compare-refine workflow: screenshot the output, upload it next to the reference, then:

Compare this screenshot of what you built against the reference image.
Give me a specific diff, not a vibe check: type scale, spacing rhythm,
color usage, hierarchy. List each mismatch with the exact CSS change
that fixes it. Do not regenerate the page. Fix only the mismatches.

Why it works. It closes Claude's blindness loop with its own vision. Claude cannot see the CSS it wrote; a screenshot makes the render visible to the same model that generated it. "A specific diff, not a vibe check" blocks the useless "looks great, maybe refine the spacing" answer, and "fix only the mismatches" prevents the regeneration lottery where fixing one section reshuffles three others. In Claude Design the same job is done natively with inline comments on components; this prompt is the Claude Code equivalent.

8. The WCAG gate

The check before export or deploy. From Ruben Hassid's validation step:

Review this page for contrast and accessibility. List any WCAG 2.1 AA
violations with exact fixes. Then check: heading hierarchy is semantic
(one h1, no skipped levels), every image has meaningful alt text, all
interactive elements are keyboard-reachable, and tap targets are at
least 44px on mobile. Output a pass/fail table with the fix per row.

Why it works. Anti-slop constraints push toward high-contrast editorial aesthetics, but a banned-font list doesn't guarantee accessible contrast ratios; this gate checks the result instead of the intent. Asking for "exact fixes" in a pass/fail table produces patchable output rather than an essay. Run it last, after the diff loop, because every visual iteration can silently reintroduce a violation.

Evidence Ledger

Where the Evidence Conflicts

"Claude design prompts for landing pages" means two different things, and the sources split down the middle. Anthropic's product surfaces (the launch post, the support docs) treat the phrase as prompting Claude Design, the canvas product. The community prompt libraries (superdesign.dev, airops.com, aisuperhub.io, academy.techpresso.co) treat it as prompting Claude for design work anywhere: Claude Code, a plain chat, Artifacts. Both readings are defensible, which is why the prompt library above covers both paths.

The brand-to-DESIGN.md prompt (prompt 2) tells Claude to inspect the "computed CSS" of a live site, which implies a rendered fetch. Claude Design's own documented capability is to accept a codebase, screenshots, PDFs, or design files as input, not to fetch an arbitrary URL. Both cannot be true simultaneously. The prompt reads cleanly in a Cowork or Claude Code environment with browser or fetch tooling attached; in Claude Design proper, paste the CSS or a screenshot instead of the URL.

Community sources call the constraints block "anti-slop" and treat it as canonical. Anthropic's own docs describe every one of the same defaults (Inter, purple gradients, three-card heroes) and recommend banning them explicitly, but never use the "anti-slop" label. A naming conflict, not an evidence conflict: the practice is identical.

Ruben Hassid's folder-extraction path (prompt 3) assumes the brand folder is coherent. When the inputs disagree on typography or color, Cowork averages them into a compromise system. Not a contradiction, a boundary: curate before extracting.

What I Tested

Source selection and verification only, this pass. I collected candidate prompts via a research sweep on 2026-08-12 (four AI assistants queried with identical neutral prompts, all returned sources canonicalized, cross-scored, and the top 15 fetched and torn down for structure and included templates; full run data in the project folder), then verified every prompt above against its live source. I did not re-run each prompt end-to-end, so output-quality and timing claims stay attributed to their authors. A first-party bake-off (same product brief through all eight prompts, cold start, timed) is the natural follow-up test and is what the next_verification date is for.

Change Log

My Judgment

My conclusion

The prompt that ships a landing page has three parts, not one: a DESIGN.md attached as the source of truth, a 4-block goal-layout-content-audience brief, and an explicit anti-slop block that bans Claude's specific statistical defaults by name. Any two out of three ship a mediocre page. All three ship the version a builder would keep. Where to run the prompt depends on what already exists: Claude Design if there's no codebase yet and design is the bottleneck, Claude Code if the codebase exists, Cowork if the brand assets are a folder that needs to become a DESIGN.md first.

What builders should do

Start with the DESIGN.md, not the landing-page prompt. Fifteen minutes, pays back on every future page. Pick your path by what you have: a repo (prompt 1), a site whose style you want (prompt 2), or a folder of brand assets (prompt 3). Then generate with prompt 4, iterate with prompt 7, gate with prompt 8. If you'd rather not build a DESIGN.md at all, pick a pre-made one from awesome-claude-design or designmd.app matched to your product category (terminal/warp for dev tools, editorial/vercel for fintech, cinematic/runway for creator products). Either way, keep the anti-slop block verbatim in every landing-page prompt until Anthropic changes the defaults.

What I would not trust yet

The specific wall-clock numbers in every "N-minute landing page" recipe; they're one-run timings on warm accounts with pre-picked DESIGN.md files. The claim that Claude Design "checks generated output against the design system before returning it" is documented but the mechanism isn't user-visible, so I can't verify what the check does. And prompt 3's blended-input path when the brand folder is incoherent; it averages, and averages are beige.

What would change my mind

Anthropic changing Claude's default aesthetic (a specific font pairing instead of Inter) would collapse most of the anti-slop block and shrink this library to five prompts. A first-party bake-off showing prompt 6 (reference-anchored, no DESIGN.md) matches prompt 4 (DESIGN.md-backed) on output quality would demote the DESIGN.md from "start here" to "optional for repeat work." And Anthropic promoting "constraints" to the official fourth block would resolve the audience-vs-constraints variant in the community's favor.

FAQ

What is the difference between Claude Design and Claude Code for landing pages?

Claude Design is the product Anthropic Labs launched on 2026-04-17 at claude.ai/design, powered by Claude Opus 4.7. It's a visual-first canvas with a chat sidebar, inline comments, and direct on-canvas edits, and it exports to standalone HTML, PDF, PPTX, Canva, or a handoff bundle for Claude Code. Claude Code is the coding agent that writes production code. Rule of thumb: use Claude Design when the codebase doesn't exist yet or when design exploration is the bottleneck; use Claude Code when the codebase exists and the design system is already partially there. The handoff bundle lets you start in Design, then hand the chosen direction to Code with one instruction.

Do I need a DESIGN.md, or is Claude Design's built-in design system enough?

Both work; DESIGN.md wins for repeatability. Claude Design will extract a design system from your codebase, screenshots, or existing files the first time you set it up and reuse it on every future project (support.claude.com). That's fine if you're only building in Claude Design. If you also want to hand off to Claude Code, Cursor, Kiro, Windsurf, or Cline, keep a plain-text DESIGN.md in the repo root: every coding agent that reads the file becomes on-brand automatically (designmd.app hosts 461 examples). The best of both is doing the setup once in Claude Design's design-system flow and then also exporting a plain DESIGN.md for the repo.

Which Claude model powers Claude Design?

Claude Opus 4.7, described on the launch page as Anthropic's most capable vision model at the time of the Claude Design announcement (anthropic.com). Anthropic may route to a newer model in the future without changing product surface copy, so verify the current model in the account picker if it matters for a benchmark or a public claim.

Can I use Claude Code for a landing page without Claude Design?

Yes. Prompts 1, 4, 6, 7, and 8 above run entirely in Claude Code. Anthropic's own prompting best practices and Claude 4 best practices apply directly. The shape stays the same: a DESIGN.md in the repo root, an anti-slop constraint block, and a section-by-section brief with real product copy. Claude Code writes accessible responsive code by default; the aesthetic direction is what needs constraining, because left alone it converges on Tailwind-default Inter and a purple gradient.

What are the biggest failure modes when generating landing pages with Claude?

Ten defaults show up repeatedly, and each maps to a prompt above that patches it:

1. Inter default. Ban Inter, Roboto, Open Sans, Arial, and system-ui by name; name the exact pairing you want (prompts 1 and 4).
2. Purple or indigo gradient on white. Ban explicitly; specify one dominant background and one accent as hex (prompts 1 and 4).
3. Centered three-rounded-card hero. Specify asymmetric two-column or full-bleed with typographic hierarchy (prompt 4).
4. 0.1-opacity drop shadow on everything. One deliberate shadow if any, on the primary CTA only (prompts 1 and 4).
5. Emoji feature icons. Lucide or repo icons, never emoji (prompt 4).
6. Lorem Ipsum leak. Real, specific copy for YOUR product (prompts 4 and 6).
7. Accent color used everywhere. Single accent moment per viewport (prompt 4).
8. Type scale jumps of 1.5x. Size jumps of 3x, weight extremes of 200 vs 800 (prompt 1).
9. Regeneration lottery. Fixing one section reshuffles three others; use the diff loop's "fix only the mismatches" (prompt 7).
10. Feature-soup above the fold. One value proposition + one CTA above the fold; the feature grid is section 3 or 4 (prompt 4's ordered section list).

Where does DESIGN.md fit if I already have a design system in Figma?

Export the Figma tokens to CSS variables or a JSON tokens file and write a short DESIGN.md at the project root that references them. The DESIGN.md is not a replacement for Figma; it's the coding-agent-readable manifest that points at your tokens plus the constraints Claude wouldn't otherwise infer (do's, don'ts, forbidden defaults, aesthetic family, spacing rhythm). designmd.app documents the canonical 9-section DESIGN.md shape: Visual Theme & Atmosphere, Color Palette & Roles, Typography Rules, Component Stylings, Layout Principles, Depth & Elevation, Do's and Don'ts, Responsive Behavior, and Agent Prompt Guide.

Pass It On

If one of these prompts saved you a round of the regeneration lottery, send this page to the friend who keeps rebuilding their landing page hero. It's free because I wish someone had handed it to me before I spent a weekend arguing with a purple gradient.

And if you want more free, tested prompts with the mechanism explained, subscribe to Product with Attitude. That's where the new ones land first.