Claude Design for Landing Pages: The Playbook (Prompts, Tricks, and What It Gets Wrong)

Anthropic Just Shipped a Design Tool. Here Is What Actually Matters.

On April 17, 2026, Anthropic launched Claude Design. Figma's stock dropped within the hour. Every marketing team on Earth opened a browser tab. And within 24 hours, my feed was wall-to-wall with the same four screenshots: a dashboard, a pricing page, a pitch deck, a landing page hero. All of them looked pretty. Most of them would score in the low 40s on roast.page.

That is the honest tension at the center of this tool. Claude Design is genuinely useful — faster than Figma, smarter than v0 for full-page work, tightly integrated with Claude Code, and capable of reading your brand system from a GitHub repo without being asked. It is also, by default, a beautiful machine for producing pages that convert like wet cardboard. Not because the technology is bad. Because the thing that makes a landing page convert is not a layout problem, and Claude Design solves layout problems.

I spent the last 24 hours using Claude Design as my primary landing page tool — mine, client projects, rebuilds of pages I have written about before. I made every mistake worth making. What follows is the entire playbook: what Claude Design is, how to set it up, the prompts I keep reusing, the anti-AI-slop rules that work, how to hand off to production, and the three things you still have to do with your own hands.

What Claude Design Actually Is

Strip away the launch hype and Claude Design is four things stacked on top of each other:

1. A conversational canvas. You describe what you want, Claude generates an interactive design, you iterate through chat, inline comments, direct edits, or sliders that Claude creates on the fly for specific attributes.
2. An automatic brand system. During project setup you can point Claude at a codebase, a design file, or a live URL and it extracts your typography, color tokens, component patterns, and voice. Every subsequent generation respects that system.
3. A multi-format exporter. Output to standalone HTML, Canva, PDF, PPTX, or a zip. The HTML export is clean enough to ship as a static page if you want to.
4. A Claude Code handoff bundle. The feature that matters most. When you are happy with a prototype, Claude Design packages it as a structured implementation bundle — components, design tokens, copy, interaction notes — that you paste into Claude Code to generate the production implementation in whatever stack you run (Next.js, Remix, SvelteKit, whatever).

It is powered by Claude Opus 4.7 and is currently in research preview on Pro, Max, Team, and Enterprise plans. Enterprise admins have to flip it on explicitly. Usage counts against your plan's limits, and it counts fast — I will come back to that.

The right mental model is not "Figma with AI" and not "v0 for full pages." It is "a sketch-to-production bridge." You use it for the middle — the part where strategy becomes pixels — and it hands off cleanly on both sides. Strategy goes in. Production code comes out.

The Thing Nobody Is Telling You

Every review I have read makes Claude Design sound like it replaces a junior designer. That is the wrong way to think about what you are buying. Here is what is actually happening when you prompt it:

Claude has seen roughly every landing page on the public internet. When you ask it to design one, it produces the statistical center of that distribution. The middle. The average. Which, to be fair, is significantly better than the median founder-built landing page — clean hero, sensible sections, readable typography, working responsive. But the statistical middle of landing pages is also, definitionally, generic. The same three sections. The same two CTAs. The same "Streamline Your [Noun] With [Adjective] [Noun]" headline we wrote about last week.

This is the same structural issue I covered in the AI sameness problem. It is not a Claude Design bug. It is what happens when you do not push the tool off its mean. The entire playbook below is built around pushing it off the mean — hard and deliberately — so the page that comes out the other side does not look like every other page that came out of Claude Design this week.

Setup: The 10 Minutes That Determine Everything

The biggest mistake I watched people make in week one was opening Claude Design, typing "build me a landing page for my SaaS," and accepting the first draft. You have to do the setup. If you skip it, you get the statistical middle. If you do it, you get something close to your actual brand.

1. Connect your codebase or a live URL

In the project creation flow, Claude Design asks for context sources. Give it everything:

• Your GitHub repo. Claude reads Tailwind config, CSS variables, shadcn components, font imports, and existing page structures. This is how it learns your typography, spacing scale, radius, and color tokens without you typing them out. If you only do one setup step, do this one.
• A live URL if you have one. Claude Design has a "Web Capture" tool. Point it at your current site or a reference site. It extracts layout, color palette, and voice cues from the live page.
• Screenshots of designs you like. Not your own designs — designs you aspire to. Screenshot Linear, Stripe, Vercel, Railway, Resend, whoever. Upload three or four. Claude will absorb the aesthetic direction.

The Brilliant team, quoted in Anthropic's launch post, said complex pages that took "20+ prompts to recreate in other tools" took them 2 prompts in Claude Design. The reason is not prompt quality. It is that their brand system was already loaded, so every prompt inherited the context instead of rebuilding it from scratch.

2. Write a 150-word brand brief inside the project

Create a note in the project named brand.md (or paste it into your system prompt). Put these five things in it:

Audience: [one specific person with a specific problem]
Differentiator: [the one thing only we do, in 10 words]
Voice: [3 adjectives — e.g. "dry, technical, never cute"]
Forbidden words: [empower, unleash, revolutionize, seamless, elevate]
Color philosophy: [dominant + 1-2 sharp accents, not evenly distributed]

Claude Design will pull from this on every generation. Without it, you are asking for the average landing page in the industry category it guesses you are in. With it, you are asking for a page that sounds like you.

3. Turn off the AI slop defaults explicitly

This is the tactic that moved my pages up the most. Anthropic's own frontend aesthetics cookbook tells you exactly which defaults Claude converges toward, because their own researchers know it produces generic output. Paste this block into your project's system prompt or brand note:

Avoid the default AI aesthetic:
- No Inter, Roboto, Open Sans, system-ui, Lato
- No purple gradients on white backgrounds
- No Space Grotesk (overused this year)
- No evenly-distributed pastel palettes — dominant color + 1 sharp accent
- No scattered micro-interactions — one orchestrated page load instead
- No solid color backgrounds — use subtle gradients, grain, or patterns

Preferred: distinctive display font paired with a mono for data.
Preferred pairings: Instrument Serif + Commit Mono, Fraunces + JetBrains
Mono, Clash Display + IBM Plex Mono, Bricolage Grotesque + Space Mono.

Every generation from this point forward will skip the stuff that makes AI-generated landing pages recognizable as AI-generated. This single block is the difference between a page that looks like a template and a page that looks like a brand.

The Prompt Structure That Works

Claude's own docs tell you a good design prompt has four parts: goal, layout, content, audience. That is directionally right but too vague to use. Here is the expanded version I use. Every prompt I write has these seven slots, in this order:

1. Who — the one specific person you are writing to
2. Problem — the specific thing they are trying to solve
3. Product — what you are selling in 10 words
4. Differentiator — why them, not a competitor, in 10 words
5. Sections — the exact sections you want, in order
6. Action — the single thing a visitor should do
7. Constraint — one thing to avoid or one thing to emphasize

Here is what that looks like in a real prompt. This is the actual prompt I used to generate the hero for a client's API product last week:

WHO: Senior backend engineers at Series B fintech companies
PROBLEM: They spend 6-8 weeks building PCI-compliant payment
         infrastructure when launching a new product line
PRODUCT: Drop-in payment API with built-in PCI compliance
DIFFERENTIATOR: The only API that gives you SOC 2 on day one
                without touching an auditor
SECTIONS (in order):
  1. Hero with code example (not screenshot)
  2. "How it works" 3-step with terminal visuals
  3. Compliance badges row (SOC 2, PCI, HIPAA)
  4. Pricing — usage-based, one tier
  5. CTA band — "Read the docs" not "Sign up"
ACTION: Get to the docs. Not sign up, not contact sales.
CONSTRAINT: No testimonials. We do not have real ones yet.
            Leave the section out entirely.

Claude Design built a page in under 90 seconds that was 80% of the way to shippable. Compare that to the same prompt written as "build a landing page for our payment API" — which I tried first, and which produced exactly the generic page you are imagining.

Ten Prompts I Actually Reuse

Save these. Paste them. Modify the specifics. The structure is what matters.

1. The hero rebuild prompt

Redesign only the hero. The current one is generic.
New hero must:
- Open with a specific falsifiable claim (numbers, not adjectives)
- Use a subheadline that names the audience by role
- Show the product working, not a decorative illustration
- CTA text should describe what happens on click, not "Get started"
Show me 3 variations side by side.

2. The "make this specific" prompt

Every headline on this page is a category description, not a
product claim. Rewrite each one so it:
- Contains a number OR a specific outcome OR a named audience
- Could not be copy-pasted onto a competitor's page
- Is falsifiable (a skeptic could argue with it)

3. The anti-testimonial prompt

Do not generate fake testimonials. Do not use placeholder
"Sarah K., Product Manager" quotes. Do not use invented
company logos. Either leave the social proof section empty
with a TODO marker, or replace it with a different trust
element: a changelog, a GitHub star count placeholder, a
founder's note, or a list of integrations.

4. The single-differentiator prompt

Add a section immediately after the hero called "Why us,
not [competitor name]". Build a 2-column comparison that
names the competitor explicitly. Do not be diplomatic.
Pick the one axis where we win decisively and make that
the entire comparison.

5. The typography-off-the-mean prompt

Change the typography to a serif + mono pairing. Use
Instrument Serif for display text at 48-72px with italic
for emphasis. Use Commit Mono or JetBrains Mono for all
numerical data, scores, pricing, and short labels. Body
can stay sans. Size jumps should be 3x, not 1.5x.

6. The motion prompt

Remove every hover animation on cards and buttons.
Replace with a single orchestrated page-load sequence:
staggered fade + 14px translate-Y, 0.6s duration, easing
cubic-bezier(0.16, 1, 0.3, 1), 60ms stagger between
elements. Nothing else should animate.

7. The section-flow prompt

Add a one-sentence transition at the top of each section
that links it to the previous section's promise. Section
headings alone are not enough. The page should read as a
single argument, not a list of standalone blocks.

8. The trim prompt

Cut 40% of the words on this page. Every remaining word
has to earn its place. If a sentence could be deleted
without changing what the visitor understands, delete it.

9. The "one more thing" prompt

After the final CTA, add a "killer move" section — one
unexpected, memorable element that no competitor has.
Options: an interactive demo, a live counter of users,
a public changelog with timestamps, an embedded tweet
reply chain, a founder photo with a handwritten note.
Surprise me. Do not be safe.

10. The pre-ship audit prompt

Audit this page against the 5-second test. If I showed
the hero to someone unfamiliar with the product for 5
seconds, could they tell me (a) what we do and (b) who
it is for? For each dimension, rate 1-10 and name the
exact element that would fail.

Use the Tweaks Panel. Do Not Regenerate.

This is the single most expensive mistake you can make, and I made it on day one. When you do not like something about a Claude Design page, do not type "redo the whole thing but better." Do not hit regenerate. Every full regeneration burns tokens, loses context, and usually produces a page that is equally good but differently flawed. You solve nothing and lose what was already working.

Instead:

• Click the specific element. Use the inline comment to describe the change ("make this padding larger", "change this to a secondary button", "use the accent color here").
• Use the Tweaks panel. Claude Design generates custom sliders on the fly for common attributes — spacing, font size, corner radius, color saturation. Drag the slider, watch the whole design respond. This is the feature that makes it feel magical instead of chatbot-y.
• Ask for 2–3 variations, not a replacement. "Show me 3 alternative CTA treatments for this section." You pick. You do not have to accept one. Iteration compounds; regeneration does not.

One user on X reported burning 58% of their weekly Pro limit on two full design sessions of regenerating instead of tweaking. The Pro plan at $20/month is fine for experimentation. If you are iterating on a real page to ship, you want Max ($100/month) and you want to be tweaking, not regenerating. The math works out to roughly one serious landing page project per week on Pro versus unlimited on Max.

The Brand System Trick That Is Worth The Whole Subscription

Here is the workflow I did not see coming. Claude Design's codebase integration is bidirectional — it reads your repo during setup, but it also generates to your repo's design system. That changes the game for teams who have already standardized on Tailwind, shadcn, Radix, or a homegrown token system.

The procedure:

1. Create a Claude Design project. Point it at your GitHub repo during setup.
2. Let Claude extract your design system automatically. Review what it found. Correct anything wrong in a pinned note ("our primary is #C44D22, not the orange you inferred; our radius is 10px, not 12px").
3. Build your page. Every component Claude generates now uses your actual tokens, your actual spacing scale, your actual fonts.
4. When you export to Claude Code, the handoff bundle references your existing component library. Claude Code is told to reuse your <Button> and <Card>, not recreate them.

The result: the production page comes out looking like it was built by someone on your team who respects the system. Not like a net-new AI generation that accidentally matches your brand color. This is the main reason design leads at teams like Datadog reportedly use Claude Design — not to replace their system, but to extend it. "From rough idea to working prototype before anyone leaves the room," their team put it, "without breaking brand consistency."

If you are shipping a landing page into an existing product, this matters more than any other feature. A landing page that does not match the product it links to is a post-click experience problem — visitors hit the app and feel disoriented, and conversion craters. Brand system integration solves that at the generation step instead of forcing you to reconcile it later.

The Claude Code Handoff Is the Actual Moat

Most reviews bury this feature. It is the single most important thing Claude Design does.

When you are happy with your prototype, click "Handoff to Claude Code." What you get is not a PDF, not a dumb HTML dump, not a Figma export. You get a structured bundle: every component with its props, every design token with its variable name, every piece of copy with its semantic role, every interaction with a one-line note about what it is supposed to do. You paste that bundle into Claude Code and tell it your stack — Next.js App Router, Remix, SvelteKit, whatever — and Claude Code generates the production implementation against your existing codebase. Reusing your components. Respecting your conventions. Hitting your linter.

This is the feature that makes Claude Design different from v0 (which is locked into Next.js + Tailwind + shadcn) and from Lovable (which deploys its own hosted stack). Claude Design is stack-agnostic because the handoff target is Claude Code, not a specific framework. Your stack can be whatever you already use. The prototype does not force an architectural choice on you.

The practical impact: a landing page that used to take me 8–12 hours to build — design in Figma, build in Next.js, wire up analytics, ship — now takes 2–3 hours. And the 2–3 hours is almost entirely the work I should have been doing anyway: strategy, copy, and real proof. Claude Design ate the 6–9 hours of scaffolding, layout, and initial styling.

What You Still Have To Do With Your Own Hands

Now the honest part. There are four things Claude Design does not do, and it will confidently pretend to do them if you let it. Every one of these is a dimension we weight heavily on roast.page, and every one of them is a dimension where AI-generated pages score below 4 out of 10 by default.

1. The headline, subheadline, and CTA text

These are the three lines that carry 55% of a page's weight. Claude Design will write them. They will be grammatically perfect and strategically empty. "Streamline Your Workflow With Intelligent Automation." Rewrite every one by hand. Use the AI copy editing workflow if you want AI help with the rewrite — but the words themselves need human judgment because they are the argument, not the decoration.

2. Social proof

If Claude generates a testimonial, delete it. If it generates a customer logo row, delete it (those are real company logos used without permission, which is a legal issue on top of a credibility issue). Your options: replace with real proof you already have, or remove the section entirely. A missing trust section is better than a fake one — fake proof actively damages conversion because visitors can smell it.

3. Competitive positioning

Claude does not know what your competitors are saying right now. It cannot tell you what differentiator is actually uncontested in your category. This is the 5% of the score that matters more than its weight, because it is the one thing that cannot be swapped out later. You have to do the competitor research yourself, decide on your one angle, and then tell Claude explicitly what it is. If you skip this, the page will be well-designed and strategically invisible.

4. The sequence of the argument

Claude arranges sections in a "standard" order — hero, features, how-it-works, social proof, pricing, CTA. That is not a persuasion arc. That is a list. A persuasion arc has escalating conviction: each section answers a question the previous section raised, and momentum builds toward the CTA. Use prompt #7 above to force section transitions. Then read the page out loud. If it feels like a list, it is.

The Full Workflow, End to End

Here is the condensed version I run for every new page now. Steal this.

1. Strategy, 30 minutes, in a text file. Audience. Differentiator. Primary action. Three competitors and exactly what they say. Forbidden words. This happens before you open Claude Design.
2. Project setup, 10 minutes. Connect your repo. Upload 3–4 inspiration screenshots. Paste the anti-AI-slop block into the system prompt. Paste your brand brief.
3. First generation, 2 minutes. Use the 7-slot prompt structure. Accept the result even if you hate it. You will fix it with tweaks, not regeneration.
4. Structural iteration, 30 minutes. Use prompts 1, 4, 7, and 9 above. Reorder sections. Add the competitor comparison. Add the killer move. Force section transitions.
5. Copy rewrite, 60 minutes. Hand-rewrite every headline, subheadline, body paragraph, and CTA. This is not optional and AI cannot do it.
6. Trust replacement, 15 minutes. Delete every fake testimonial. Replace with real proof or remove the section.
7. Visual polish, 15 minutes. Use prompts 5, 6, and the Tweaks panel. One orchestrated page load. Typography off the mean. Backgrounds with depth.
8. Audit, 5 minutes. Use prompt 10 to run the 5-second test. Fix anything that fails.
9. Score, 1 minute. Run the exported HTML through roast.page before handoff. Fix the three lowest dimensions.
10. Handoff to Claude Code, 30 minutes. Export the bundle. Paste into Claude Code with stack instructions. Review the generated code, merge, deploy.

Total time from zero to shipped: about 3 hours. Total time with the "generate and accept" workflow Anthropic's marketing implies: about 10 minutes to produce a page that scores 41. The 3 hours is where the conversion rate comes from. The 10 minutes is where the AI slop comes from. Pick the 3 hours.

Gotchas Worth Knowing Before You Start

• Inline comments sometimes disappear before Claude reads them. Known issue. If a comment goes missing, paste the feedback directly into chat.
• Very large codebases cause browser lag. If your repo is massive, scope the codebase reference to a single directory (your design system package, not the whole monorepo).
• Chat upstream errors require a new tab. Save your project state frequently. If chat breaks, open a new tab and your project will still be there.
• Compact view can trigger save errors. Work in the default view. Cosmetic, but annoying.
• Pro usage limits are tighter than they look. Two serious design sessions = majority of weekly Pro quota. If you are building for clients, it is Max tier or nothing.
• Enterprise admins have to enable it. If you are on an enterprise plan and the feature is missing, it is an admin setting.

The Comparison Table You Wanted

Since everyone asks, here is the honest version of how Claude Design stacks up against the tools it is replacing in my workflow:

• vs. Figma: Figma is still better for precise visual design work and handoff to existing design teams. Claude Design is better for going from idea to interactive prototype in 5 minutes. Use both.
• vs. v0: v0 is better for small React component generation and tight iteration on a single piece. Claude Design is better for full pages with consistent design systems. If you are building a landing page, Claude Design. If you are building a single data table, v0.
• vs. Lovable: Lovable deploys the whole app to its own infrastructure. Claude Design hands off to your stack. If you do not have a stack yet, Lovable. If you do, Claude Design.
• vs. Framer AI: Framer AI produces Framer pages. Claude Design produces standalone HTML and code you own. If you want to own the code, Claude Design. If you want the no-code hosting, Framer.
• vs. writing it by hand: Writing it by hand is still the gold standard for pages where strategy is 100% of the value and visual polish is secondary. For everything else — which is most landing pages — Claude Design is faster and produces equivalent output if you drive it properly.

The Bottom Line

Claude Design is not the end of landing page design. It is the end of landing page scaffolding. The work of going from blank canvas to "reasonable starting point" used to take hours and cost a junior designer's salary. It now takes 90 seconds and costs a fraction of a Pro subscription. That matters. It compresses a bottleneck that used to gate everything else.

But the scaffold is the easy part. It always was. The hard part is the words, the proof, the positioning, and the strategic clarity that turns a visitor into a customer. Claude Design will not do those things for you, and it will pretend to do them convincingly enough that you will ship a page that looks professional and converts terribly if you are not paying attention.

Use Claude Design to eat the 6–9 hours of scaffolding. Use the 2–3 hours you got back to do the work that actually moves the number. And if you want to know which parts of your Claude Design page need the most human attention before you ship it, drop the URL into roast.page. It will tell you in 30 seconds exactly where the AI stopped and where you need to start.

The tool is genuinely good. The shortcut is a trap. Both things are true.