Pro Tips

5 Landing Pages
While I Made Coffee

My favorite Claude Design workflow: side-by-side landing-page variations in a few minutes. Here’s the exact brief I use, the inspo pages I steal from, and the 1-click handoff to Claude Code.

Why This Workflow

Most people open Claude Design, type one vague request, get one mediocre page, and move on. The trick is to ask for 3 to 5 variations at the same time and compare. You see your idea from different angles before committing.

Total time start to finish: about as long as it takes to brew coffee.

The Workflow 5 Steps, Most of It Hands-Off

01

Pick high-traffic inspo pages from your niche

Don’t feed Claude Design vibes. Feed it 2-3 real URLs of pages you know convert. Live URLs only — not Pinterest screenshots.

02

Open Claude Design and start a new project

In the Claude app sidebar, open Claude Design. Click New project. Paste the brief from below, swap in your specifics.

03

Ask for 5 variations at once

The brief explicitly tells Claude to generate 5 different takes. You’ll see them side by side in a few minutes.

04

Comment on elements directly to iterate

In Claude Design you can click any element — a headline, a button, a section — and leave a comment. “Make this CTA bigger.” “This headline is too long.” Claude updates it instantly. No re-prompting from scratch.

05

1-click handoff to Claude Code

Once you’ve picked the winning variation, click Handoff to Claude Code. Claude packages everything into a bundle that Claude Code uses to build the real production page in your repo. The bundle includes the design system, components, and assets.

Copy & Paste My Exact 5-Variation Brief

Fill in the brackets, paste into Claude Design as your first message.

Claude Design 5-Variation Brief
I need a landing page for "[PRODUCT NAME]", which is [one sentence: what it is + who it's for]. Goal of the page: [pick one — sign up for free trial / book a demo / buy now / join the waitlist] Audience: [who is reading this page — their job, their pain, their tech-savviness] Tone: [pick 2-3 — bold / minimal / friendly / serious / playful / professional / luxury] Brand colors: [primary color hex + 1 accent. Use a neutral background.] Inspo pages I love (don't copy — just absorb the energy): 1. [paste URL 1] 2. [paste URL 2] 3. [paste URL 3] What goes on the page (in this order): 1. Hero with one strong headline + one-line subhead + primary CTA 2. 3-section "what you get" or "how it works" 3. Social proof (testimonial or logo bar) 4. FAQ or feature deep-dive 5. Final CTA section 6. Minimal footer Generate 5 different variations. Each one should differ meaningfully — different layouts, different headline angles, different visual treatments. Not 5 versions of the same page in different fonts. After you generate, give me a 1-line note on each variation explaining what's different about its approach — so I can pick fast.
Steal From 5 Landing Pages Worth Studying

If you’re selling a real product or service — not a tech tool — these are the pages worth studying. Real DTC brands with high-converting layouts.

Inspo 01

magicspoon.com

Steal: bold headlines that name the problem (“Cereal that’s actually good for you”) and a hero that puts the product front-and-center. Great for any food, beauty, or wellness brand.

Inspo 02

allbirds.com

Steal: the clean product-first layout with minimal copy and clear pricing. Best example of “say less, sell more” for DTC e-commerce.

Inspo 03

brooklinen.com

Steal: how they stack social proof — press logos, customer count, star ratings — right under the hero. Copy this if you have any kind of testimonials or numbers to brag about.

Inspo 04

bombas.com

Steal: mission-driven hero copy (“every pair purchased = a pair donated”) and a gift-focused funnel that converts cold visitors. Perfect for any brand with a story behind the product.

Inspo 05

glossier.com

Steal: brand identity through lifestyle photography — the page feels like a magazine, not a store. Best for service businesses, coaches, salons, boutiques where vibe is the offer.

Want more inspo?

For a full curated library of high-converting landing pages by industry — e-commerce, SaaS, services, agencies — browse land-book.com. Free, organized by category and style. Pick 2-3 from your niche and feed those URLs into Claude Design.

Plan note

Claude Design works on Pro, Max, Team, and Enterprise plans. Enterprise has it off by default — your admin needs to enable it. There’s no free-plan access yet (as of May 2026).

Honest limitations

5 variations look great in the preview. They’re still mockups. Conversion still depends on your copy, your offer, and your traffic source — Claude Design can’t fix a weak product. Use it to ship faster, not to skip the strategy work. Also: handoff bundles to Claude Code work best in fresh repos. If you’re grafting onto a complex existing app, expect some manual cleanup.

For Your Job

Set Up Claude for Your Specific Job

If you’re ready to set up Claude for your specific job — with custom skills, connectors, and automations built around the work you do every day — I built a bootcamp just for you.

Start the Weekend Bootcamp →

Go Even Further

Join the AI Income Lab

If you’re looking to go even further, join mine and my husband’s community group where we give you all the AI agents and systems running our businesses.

Join the Community →

© 2026 Mariah Brunner. All rights reserved.