The Rundown

In this guide, you will learn how to design a high-converting landing page in Claude Design without opening Figma. You will go from a rough brief to a polished, on-brand page you can deploy straight from the browser, all in one sitting.

Who This Is Useful For

• Marketers and growth folks who need to spin up a new landing page every week and do not have a designer on standby
• Solo founders and indie makers shipping products who want a page that converts, not a template that looks like every other template
• Consultants and coaches building lead-capture pages for specific services, offers, or audience segments

What You Will Build

A complete landing page mockup with four variations in Claude Design. You will get an interactive mockup that you can share with others or continue to tweak with Claude.

What You Need to Get Started

• A Claude Pro, Max, Team, or Enterprise account (Claude Design is included)
• Access at claude.ai/design

Step 1 Find a Reference Page and Write a Specific Brief

The single biggest lever on output quality is the brief. Vague briefs get pretty, generic pages. Specific briefs get pages that convert.

Before you open Claude Design, find one landing page in your category that you know works. For e-commerce, find a Shopify template or an Amazon product page. For consulting, find a coach or agency page you respect. Just search best [your niche] landing pages.

Screenshot your reference. Then write a brief that names three things:

1. Audience. Who is this page for, and what do they already know?
2. Offer. What specifically are you selling, at what price, on what terms?
3. CTA. What is the one action a visitor should take?

Pro tip: Go one step further. Screenshot a conversion pattern from a site people already trust (Amazon's add-to-cart flow, YouTube's subscribe button) and tell Claude Design to mimic it for your CTA. People pattern-match with what they already know. Borrow the pattern.

Step 2 Start With Create Wireframe, Not a Full Build

Go to claude.ai/design and start a new project. Click Create Wireframe to start, not the full site build.

Two reasons. Wireframing uses fewer tokens. And seeing the structure first makes it easier to iterate before Claude commits to colors, imagery, and typography.

Drag your reference page screenshot and any pattern screenshots into the input. Paste your brief. Add the URL of a site whose visual style you want to match and Claude Design's web-capture tool pulls colors, fonts, and components automatically.

Here is the example prompt we used: ProductivitybyBilly.com make four variations of a landing page to get people to sign up for a one hour free call where I diagnose what's wrong with their current productivity system and give them a report and then eventually upsell into a four-hour coaching package. Make at least one of the heroes have the elements of the attach example site and then I want you to make the check out pain as similar to Amazon as Possible to take advantage of pattern matching. Give me four variations of the mock-up.

Pro tip: Claude Design does not accept HEIC (iPhone's default when you airdrop from your phone). Convert to PNG or JPEG first or the upload fails.

Step 3 Generate Variations and Scroll Before You Edit

Claude Design interviews you briefly after the first prompt. It asks things like price, number of clients, review counts, and what specific elements a section should borrow. Answer concisely.

Then select how many wireframe variations you want. Three to five is the sweet spot. Hit generate. First pass takes 60 to 90 seconds.

Scroll every variation top to bottom before you touch anything. The structural stuff (layout, hierarchy, section order) is usually right on the first pass. The thing you actually need to fix is copy specificity and CTA wording.

Step 4 Refine With Tweaks First, Comments Second

Claude Design gives you two refinement paths. Use them in order.

Start with the bottom-right "Tweaks" menu to test different color schemes and variations without changing anything.

Then use inline comments for local polish. Click any element and leave a note. You can either save the comment for later or hit Send to Claude to make the change right now. Examples:

• "Rewrite this CTA to be outcome-specific, not generic"
• "Add a testimonial placeholder here"
• "Tighten this paragraph, it is three sentences of fluff"

Pro tip: There is a Grab Web Element bookmarklet in the tools menu that most people miss. Drag it to your bookmarks bar once, then click it on any webpage to pull any element (nav, pricing card, hero block) directly into Claude Design. Great for grabbing a pattern you saw somewhere and wiring it into your page.

Step 5 Export and Ship (or Hand Off to Claude Code)

When the page is ready, you have four export paths:

• Standalone HTML to deploy to any host
• Canva for team review or extra visual polish
• PDF for stakeholder sign-off
• PPTX if the page doubles as a sales asset

The better move, when the page needs real logic, is the Claude Code handoff. Claude Design and Claude Code share a project format, so you can copy a single command into a local Claude Code session, or send the whole project to Claude Code on the web without spinning up a local instance at all.

Use the handoff when your page needs live forms, calculators, signup flows, or booking integrations. Claude Design is best for the visual shell. Claude Code makes it functional.

Going Further

Once one page is shipping, three obvious extensions:

• Generate three hero variants and A/B test. Claude Design's variation feature keeps the design system consistent across versions so the test stays clean.
• Build a page per audience segment. Consultants, agencies, and SaaS products almost always want segment-specific landing pages. One brief per audience, same brand, different copy.
• Hand off to Claude Code for interactivity. Anything that needs real backend logic (bookings, payments, signups) belongs in the Claude Code handoff, not in Claude Design itself.

Claude Design is new, and the UI will shift over the next few months. The durable workflow stays the same: specific brief, brand upload, wireframe, refine, export. Get fluent in that loop and you will keep shipping pages as the tool improves.