Section 1
Claude Design just changed everything
Until now, AI design tools were prompt-only. You typed what you wanted, the output came back looking like a template generator. The model could write the words. It couldn't see the taste.
Claude Design's unlock is simple. It accepts visual references as input. You don't describe what you want. You show it.
That single change is why anyone with screenshot ability and a clear sense of taste can now ship designer-quality landing pages in under an hour. No design background. No agency invoice. Three references and a prompt.
This is the long version of the workflow.
Section 2
The toolkit (3 things)
Claude Design
Anthropic's design canvas. Free with any Claude account. Go to claude.ai/design and create a new project. That's the whole setup.
Go Full Page (Chrome extension)
Captures full-page screenshots of any site. Most landing pages are 4 to 8 viewports tall. Your laptop's default screenshot tool only grabs what's visible. You need the whole page. Install Go Full Page.
Wispr Flow (optional)
Voice-to-text for prompting. Most people ramble better than they write. Talk through your design intent in one breath and let the structure of the prompt template do the work. Optional but recommended.
Section 3
Find your references (the more, the merrier)
Three to five references is the sweet spot. Fewer than three and the output looks generic. More than five and the model averages your taste into mush.
Where to look:
- Competitor sites in your niche. The ones you check daily.
- Mobbin. Curated UI library, organized by section type.
- Land Book. Curated landing pages, browsable by category and aesthetic.
- Page Flows. Onboarding flows and homepage walkthroughs from real apps.
- Sites you've screenshotted in the past. That's your real taste, not your theoretical taste.
The mix-and-match rule. You don't need a single perfect reference. Take the hero from one site, the feature grid from another, the testimonial section from a third. The mix is what makes the result feel like yours instead of a clone.
Use Go Full Page on each one. Save them in a folder.
Note exactly what you like about each. Be specific. Not "I like this." Try "the typography hierarchy and how the only colored element on the page is the CTA." Specificity in your reference notes is the single biggest predictor of output quality.
Section 4
The prompt
Copy-paste this. Fill in the brackets. Send it to Claude Design with your reference screenshots attached.
Master prompt
I'm designing a landing page for [PRODUCT/SERVICE NAME]. What it is: [One sentence on what the product does and who it's for. Example: "A weekly newsletter for AI-curious solopreneurs who want one workflow they can actually use today."] The vibe: [2-3 adjectives or a compact reference. Example: "Editorial, calm, anti-corporate. Closer to a Substack about design than a SaaS landing page."] I've attached [N] reference screenshots. Here's what I like from each: Reference 1 ([Site name]): [What you like, specifically. Example: "The hero typography hierarchy. Serif italic headline, clean sans subhead, one CTA, lots of negative space."] Reference 2 ([Site name]): [What you like. Example: "The bento-style 3-column feature grid in the middle of the page. Soft borders, monospace labels, clean cards."] Reference 3 ([Site name]): [What you like. Example: "The testimonial section. Circular avatars in a row, single quote per person, attributed to real names with company logos."] What I want different from the references: - Color palette: [Example: "Cream background (#FAF7F2), warm coral accent (#C4856C), dark ink text. No dark mode."] - Tone of copy: [Example: "Direct and a little irreverent. Smart friend, not marketing department."] - [Anything else] Sections I need: 1. Hero with [headline + subheadline + email capture or CTA] 2. [Section name]: [what it does] 3. [Section name]: [what it does] 4. [Section name]: [what it does] 5. Final CTA: [the action you want them to take] Brand details: - Headline copy: "[your actual headline if you have it, or 'TBD']" - Subheadline copy: "[your actual subheadline]" - Primary CTA: "[exact button copy]" - Font preference: [Example: "Serif italic for display headlines (Caslon, Tiempos vibe), clean sans for body (Inter or Geist)."] Build me the full landing page. Production quality. I'll iterate from there.
Pro tip — the freestyle option
Open Wispr Flow and ramble through the same structure in one breath. The prompt template is a scaffold, not a script. If you can talk fast and clear, Claude Design fills in the rest.
Pro tip — the meta-prompt
Paste the filled-in prompt into regular Claude.ai first. Ask: "Make this prompt more specific where it's vague. Don't add length, add precision." Then send the refined version to Claude Design.
Section 5
Let Claude cook
Upload the screenshots into Claude Design alongside your prompt. Send. Wait 60 to 90 seconds.
Claude Design generates a live, interactive preview of your full landing page. Real layout. Real spacing. Real components.
Iterate in the same chat. No need to re-prompt from scratch. Just say "make the hero spacing tighter" or "the CTA should be cream not orange" and Claude Design adjusts the live preview.
Use the tweak feature for spacing or overlap issues. Sometimes a section will have elements that overlap, or the spacing will feel off. Claude Design has a one-click tweak that resolves layout glitches without a full regenerate. It's fast and almost always nails the fix on the first try.
Don't over-prompt the first generation. Let it cook fully. See what it produces. Then iterate. Pre-tweaking compounds and slows you down.
Section 6
Ship it
When you're happy with the design, grab the code from Claude Design. It exports clean, working code you can use directly.
Drop it into Claude Code with this kind of prompt:
Set this up as a clean Astro project. Make it responsive on mobile, optimize for performance, and prepare it for deploy on Vercel.
From there, going live is conceptually simple. Connect your repo to Vercel, push, and your page is live within a minute. Buy a domain if you want a clean URL instead of the default Vercel one.
That's the whole loop. Idea to live page in an hour.
Section 7
Pro tips
References > prompt
The single biggest variable in output quality is the references you pick. Spend more time picking 3 to 5 great ones than perfecting your prompt. Bad references plus a perfect prompt still produces a bad page.
Push back specifically
When something's off, don't say "make it better." Say "the hero spacing should be 80px top and bottom" or "the CTA should sit below the subheadline, not next to it." Specific feedback gets fixed in one shot. Vague feedback gets you a second draft of the same problem.
Voice-prompt the whole thing
Wispr Flow plus the prompt template equals natural-language input that runs faster than typing and produces better output. Try it once. You won't go back.
One iteration is enough
Most designers go through 5 to 10 rounds with a client. Claude Design lets you skip to round 9 on the first try. Don't go past round 2 without shipping. Done is better than perfect, and live always beats polished-but-still-in-draft.
Zero to Automated
Get the full AI operating system
Guides are a great start. But inside Zero to Automated, you get a done-for-you AI system deployed within 48 hours, plus everything you need to keep building:
- Claude Code 101 — 8 lessons, zero to automating real work by Sunday
- Ready-to-install Claude Skills — a growing library with 2+ new skills every week
- Done-for-you workflows — copy, paste, run. New ones every week.
- Weekly live builds — watch real projects get built, ask questions, follow along
- Small group coaching — direct access to both founders
Price locked for life at whatever you join at.