Guides Claude published apr 20, 2026
In this guide, you will 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 that can be deployed from the browser, all in one sitting.
You will build a complete landing page mockup with four variations in Claude Design, resulting in an interactive mockup that you can share with others or keep refining with Claude.
Start with a specific brief and a trusted conversion pattern. Vague briefs produce generic pages; specific briefs, reference screenshots, and familiar CTA patterns give Claude Design much better material to work from.
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. Search for “best [your niche] landing pages” if you need examples.
Screenshot your reference. Then write a brief that names three things:
Pro tip: Go one step further. Screenshot a conversion pattern from a site people already trust, such as Amazon’s add-to-cart flow or YouTube’s subscribe button, and tell Claude Design to mimic it for your CTA. People pattern-match with what they already know, so borrow the pattern.
Go to claude.ai/design and start a new project. Click Create Wireframe to start, not the full site build.
There are two reasons to start with a wireframe: it 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 will pull colors, fonts, and components automatically.
Here is the example prompt used in the guide:
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 files, which are often the iPhone default when you AirDrop from your phone. Convert to PNG or JPEG first or the upload will fail.
Claude Design briefly interviews you after the first prompt. It asks things like price, number of clients, review counts, and what specific elements a section should borrow. Answer concisely.
Select how many wireframe variations you want. Three to five is the sweet spot. Hit generate. The first pass takes 60 to 90 seconds.
Scroll every variation from top to bottom before you edit anything. The structural pieces—layout, hierarchy, and section order—are usually right on the first pass. What usually needs fixing is copy specificity and CTA wording.
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.
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, or hero block—directly into Claude Design. It is useful for grabbing a pattern you saw somewhere and wiring it into your page.
When the page is ready, you have four export paths:
When the page needs real logic, the better move 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.
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.
Keep going
Members get all guides, courses, live sessions, and $1,000+ in partner perks.