The Proof
170 booked. 7 hours. $0 in dev costs.
My sister teaches summer swim lessons. I built her a 1-page landing site in a single recording session. The whole live build is the video above.
From "I'm thinking about it" to "live on the public internet at her own custom domain" took under an hour. Within 7 hours of going live, the booking calendar had 170 confirmed lessons on it. Two days later it was at 220+, which is roughly 85% of her entire summer.
No ads. No agency. No template. No designer. The whole stack costs around $32 in the first month and ~$20/month after that, which is just Claude Pro.
This guide walks through every phase of the build, every prompt I used, and the 5 iteration prompts that fix 90% of Claude Design v1 issues. If you've watched the video, this is the copy-paste version. If you haven't, watch it first, then come back here and follow along.
The Stack
10 tools. ~$32 first month.
Every tool below carries weight. Nothing is filler. The only paid line item is Claude Pro at $20/month, which gets you both Claude Design and Claude Code on a single bill.
Nano Banana Pro
Logo + brand image gen
Free tier covers it for a one-off launch
Adobe Express
Strip the logo background
Free
Gemini / Google AI Studio
Write the PRD that feeds Claude Design
Free
Claude Design
Generate the actual landing page
$20/mo Claude Pro (gets you Code too)
Claude Code
Migrate to Astro, push to GitHub, deploy, set up DNS
Included with Claude Pro
Astro
Final framework for SEO + speed
Free
GitHub
Code repo
Free
Vercel
Hosting + auto-deploy
Free
Namecheap
Custom domain
~$12/year
Square Appointments
Booking calendar (only CTA target)
Free tier
Phase 1
Vibe the logo before you touch the page
Brand assets first, page second. If you start in Claude Design without a logo, the page comes out generic because there's nothing for the layout to anchor on.
The play: generate a logo concept in Nano Banana Pro, iterate to a clean transparent PNG, run it through Adobe Express to remove any leftover background. Total time: about 10 minutes.
Step 1. Generate logo concepts (Nano Banana Pro)
Copy-paste prompt
I'm building a swim lesson website for a coach named Aubrey. I need a logo that says "swim with Aubrey". Use a playful water-bubble style font for the wordmark. Some optional vibe references: rounded letters, soft underwater feel, kid-friendly without being cartoony. Show me 3 to 4 conceptual logo options on a clean white background. Variations on font weight, layout (stacked vs single line), and supporting elements (a small dolphin icon, a wave, a bubble). Don't add a tagline. Just the wordmark.
Pick the variant you like best (or send the options to whoever the brand is for and let them pick, like I did with my sister mid-recording). Then iterate to a final cut:
Step 2. Iterate to final logo
Copy-paste prompt
Going with the bottom-right concept (the stacked one). Tighten it up: - Transparent background - Extra clear and crisp - Everything centered - All the same blue across every word (the top word currently looks lighter than the bottom one, match them) Then give me the final cut as a clean PNG.
Step 3. Strip the background (Adobe Express)
Nano Banana sometimes leaves a faint background even when you ask for transparency. Open express.adobe.com, drop in the logo, hit "Remove Background" on the right-hand panel, re-center it, export as PNG. Two clicks. Costs nothing. This is the only manual step in the whole brand-asset phase.
Phase 2
Reference site, then write the PRD
This is where most people skip the step that matters most. Don't.
Open siteinspire.com and pick 1 to 3 reference sites that match the vibe you want. Don't pick competitors. Pick aesthetic matches: a coffee shop, a portfolio, a pottery studio, anything that captures the feel. Screenshot them. Save the URLs.
Then write the PRD in Gemini or Google AI Studio. Feed it the logo, the reference screenshots, and the business context. Ask for a detailed PRD, not an image of the page. (More on that pivot below.)
The PRD prompt
Paste into Gemini or Google AI Studio (attach logo + 2-3 reference photos)
I'm attaching the brand logo for "swim with Aubrey" plus 2 reference photos (one professional, one action shot). I want you to write a really detailed PRD for a 1-page landing site for her swim lesson business. Brand - Colors: light pink, coral, navy blue (nautical theme) - Mood: kid-friendly, playful, bubbly, but still trustworthy enough that parents will book Audience - Parents of kids ages 4 to 9 booking summer swim lessons The single goal of the page - Get visitors to click "book your lesson now" and land on the Square booking page Page structure I want - Hero with headline + sub-headline + primary CTA - "Meet your coach" section with photo and short bio - Proof section. Aubrey is a decorated high-school swimmer with multiple records and lifeguard certifications. List 4 to 5 credentials as quick trust pills - Action shots gallery (3 photos) - Final CTA section that mirrors the hero - Tiny footer with the logo Reference images attached are old social graphics we made for past summers. Match the warmth and color logic, not the layout. --- Output a really detailed PRD I can paste straight into Claude Design. Spell out section-by-section copy (headlines, body, button text), visual direction, and where each provided asset goes. If you have any clarifying questions before writing, ask me first.
Trick: triple-dash section breaks.
Notice the --- in the prompt. Three dashes signals "new section" to most LLMs. It cleanly separates context from instructions and makes long prompts dramatically easier for the model to parse. Use it any time you're feeding more than two distinct chunks of input.
If Gemini refuses to mock up the page as an image, don't fight it.
Gemini's image gen sometimes flat-out refuses to generate a landing page mockup ("I can't generate that kind of content"). Switch the ask. Replace the image request with: "give me a really detailed PRD instead. If you have any questions, ask me first." The PRD is more useful for Claude Design than the mockup would have been anyway.
Phase 3
Build v1 in Claude Design, then iterate
Open claude.ai/design. Create a new project. Paste the PRD. Attach the logo plus any photos you have. Tell it to leave placeholders for assets you don't have yet.
The Claude Design v1 prompt
Paste into Claude Design with the PRD + logo + photos attached
Here is the PRD for swimwithaubrey.com: [paste the PRD Gemini just wrote] Attachments - Final logo (transparent PNG) - Professional photo of Aubrey - 3 action shots of her swimming Build me v1 of this 1-page landing site. Mobile-first. Strong hero. Square booking link as the only meaningful CTA on the page. Where I haven't given you an exact image yet, leave a clean placeholder I can swap in later.
The 5 iteration prompts that fix 90% of v1 issues
v1 is never finished. v1 is a draft. Don't scrap and restart, iterate. These five prompts handle most of what you'll want to fix on the first pass. Use whichever ones apply.
Logo is too big
The logo in the hero is way too big and it's pulling focus from the headline. Cut it to about 60% of its current size and re-center it. Same treatment in the footer.
Em dashes everywhere
Remove every em dash from the page copy. Replace with commas, periods, or parentheses depending on context. Don't leave any.
Logo color reads weird against the background
The logo color is fighting with the navy hero background and looks dingy. Either flip the logo to white for the hero only, or keep the logo dark and lighten the hero background. Pick whichever keeps the page feeling cohesive.
Spacing feels cramped
Add real breathing room between every section. Right now the page reads like one block. I want clear visual separation between hero, meet your coach, proof, gallery, and final CTA.
CTA still goes nowhere
The "book your lesson now" button needs to link out to my Square booking page: [paste your Square URL]. Wire every primary CTA on the page to that link. Open in a new tab.
Phase 4
Migrate, deploy, connect domain
Claude Design is great for designing. It's not where the final site lives. The last 10 minutes of the build are about getting your design onto a real framework with real hosting at a real domain.
Three sub-phases: migrate to Astro, deploy to GitHub + Vercel, connect your custom domain. Claude Code carries you through all three.
Step 1. Migrate Claude Design export to Astro
In Claude Design, export the project as a zip. Unzip it into a fresh local folder. Open that folder in Cursor (or any editor with terminal access). Open the terminal, type claude, hit enter, trust the folder.
Then paste this prompt:
Paste into Claude Code
I exported a site from Claude Design. The download is unzipped in this folder. Migrate this to Astro for SEO and site speed. Set up the project structure cleanly, move the page into src/pages/index.astro, keep all the styling intact, and prepare it for a Vercel deploy. When you're done, walk me through the commands to push this to a new GitHub repo and deploy it to Vercel.
Step 2. Push to GitHub + deploy on Vercel
Claude Code will walk you through this when you ask. The flow:
- Create a new GitHub repo (Claude Code can do this with the
ghCLI). Push the project up. - Open vercel.com, click "New Project," paste the GitHub repo URL, hit Deploy.
- Vercel auto-detects Astro, builds it, gives you a live preview URL within ~60 seconds.
If you hit a snag, copy the Vercel error log straight back to Claude Code and let it fix the build config. This is rarely more than one round-trip.
Step 3. Connect your custom domain (Namecheap → Vercel)
Buy your domain on namecheap.com (~$12/year). Open the domain → "Advanced DNS." Then go back to Claude Code and paste this:
Paste into Claude Code
I bought swimwithaubrey.com on Namecheap. The site is deployed on Vercel at [your-vercel-url]. I'm in the Namecheap "Advanced DNS" panel right now. Tell me exactly what records to add to point this domain at the Vercel deployment. Walk me through it record by record. Include the host, type, and value for each one, and tell me what to delete from the existing records first.
Claude Code will spit back the exact A and CNAME records to add. You'll also need to add the domain on the Vercel side under Project Settings → Domains. Both ends, two minutes each. Then wait 5 minutes and load your domain in an incognito window. Live.
Gotchas
The 4 things that almost trip everyone up
Domain looks "broken" right after you connect DNS
It almost certainly isn't. Open the site in an incognito window. Browser cache is the #1 reason a freshly-pointed domain "doesn't work." Wait 5 minutes and try again.
Gemini refuses to generate a landing page mockup as an image
Don't fight it. Switch the prompt from "create an image of the landing page" to "write me a detailed PRD for the landing page." The PRD ends up being more useful for Claude Design than a mockup would have been anyway.
Claude Design v1 has the right idea but the wrong colors
This always happens. Don't scrap and restart. Just iterate. The 5 prompts in Phase 3 fix about 90% of v1 problems in a few minutes.
You skipped the reference site step
Go back. Pull 1 to 3 sites from siteinspire.com that match the vibe you want. Claude Design produces dramatically better v1s when it has something to anchor on. This is the single biggest unlock in the whole workflow.
Work with Me
Need AI to actually work for your business?
I help businesses cut through the AI hype and build the workflows, automations, and systems that actually move the needle. Direct, hands-on, no fluff.
Work with me