A free guide by New Money School
Pro Tips
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 Workflow5 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 & PasteMy Exact 5-Variation Brief
Fill in the brackets, paste into Claude Design as your first message.
CopyClaude 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 From5 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.