Overview
What’s In This Guide
The 7-tool stack that does the whole build, and the one-line setup for each
How to steal a reference site’s exact look with Firecrawl and Playwright
The prompt that rebuilds it as a fast, SEO-ready Astro site for your client
How to reverse-engineer a winning SEO strategy with real DataForSEO data
The AEO layer that gets your site quoted by ChatGPT and Google’s AI
How to push the whole thing live on GitHub and Vercel in minutes
What this actually produced
I ran this exact workflow for a boat shrink-wrapping company in Indiana. It turned a plain 8-page site into a 47-page website that ranks #1 in its local market: a page for every city and lake they serve, a page for every service they offer, structured data on all of it, live on Vercel. The client was thrilled, and I built the whole thing without writing a line of code myself.
The Stack
The 7 Tools That Do the Work
Set these up once and you can build a client site any weekend. Each one has a job. Claude Code runs them all.
Claude Code
Your builder. It writes every line of code, runs the other tools, and pushes the site live. You just talk to it.
Install
npm install -g @anthropic-ai/claude-code
Firecrawl
Reads any website and hands Claude its full branding: colors, fonts, layout, tone.
Add the MCP
claude mcp add -s user firecrawl --env FIRECRAWL_API_KEY="YOUR_KEY" -- npx -y firecrawl-mcp
Playwright
Lets Claude open a real browser, click through the reference site, and screenshot every page.
Add the MCP
claude mcp add -s user playwright -- npx -y @playwright/mcp@latest
DataForSEO
Real keyword volumes and competitor rankings, not guesses. This is where the SEO strategy comes from.
Add the MCP
claude mcp add -s user dataforseo --env DATAFORSEO_USERNAME="YOUR_LOGIN" --env DATAFORSEO_PASSWORD="YOUR_PASSWORD" -- npx -y dataforseo-mcp-server
Astro
The framework Claude builds in. It ships plain, fast HTML, which is exactly what ranks. You never touch it.
No install
Claude sets this up for you inside the project.
GitHub
Where the code lives once it’s built. A free account is all you need.
Free account
Sign up at github.com. Claude creates the repo and pushes the code.
Vercel
One connection to your GitHub repo and the site is live on the internet, for free.
Free account
Sign up at vercel.com and connect it to GitHub. Every push auto-deploys.
The one thing to understand
Firecrawl and DataForSEO need a free API key from their site (paste it into the command where it says YOUR_KEY). The rest are free. You set all of this up one time, then reuse it for every client website you ever build.
The Workflow
The 7 Phases, With Every Prompt
This is the exact order I follow. Copy each prompt into Claude Code, swap the bracketed parts for your client’s details, and let it work. Fill in the brackets and it just runs.
Phase 1
Find a site the client already loves
Before any tools, ask the client one question: show me a website in your world that you love the look of. Not their competitor necessarily, just a site whose feel they want.
This does two things. It kills the endless "what do you want it to look like" back-and-forth, and it gives you a concrete target to reverse-engineer. For my client, we found a clean industrial-services site and used it as the north star.
Phase 2
Extract the branding with Firecrawl
Now point Firecrawl at that reference site and have it pull the entire brand system into a file. Colors, fonts, button styles, tone. Claude writes it all to a doc you’ll build against.
Copy-paste prompt
Use Firecrawl to scrape this reference site: [REFERENCE URL] Pull out the full brand system and save it to a file called brand-reference.md: - Every hex color (primary, accent, background, text, borders) - The exact font families used for headings and for body text - Button and link styles - The overall visual tone in a few words (clean, bold, warm, technical, etc.) We're going to build a new site for a different business against this reference.
Phase 3
Screenshot the whole site with Playwright
Colors and fonts aren’t enough. You want the layout, the spacing, the section rhythm. So have Claude open the reference site in a real browser with Playwright, screenshot every page, then study those images and describe the design system back to you.
This is the move most people skip. Feeding Claude actual screenshots is how you get "this feels like that site" instead of generic AI slop.
Copy-paste prompt
Use the Playwright MCP to open [REFERENCE URL]. Visit the homepage and every main page. Take a full-page screenshot of each one. Then study the screenshots and describe the design system in detail: - Layout structure and grid - Spacing and section rhythm - Hero style - Imagery and iconography style - Any animations or scroll effects I want to rebuild a site that feels like this, so be specific about what makes it look good.
Phase 4
Rebuild it for your client in Astro
Now Claude has the brand file and the design breakdown. Tell it to build the client’s actual site, matching that feel but with their business, their colors, their services.
Why Astro? It’s just a way to build the site so it ships fast, plain HTML. Fast sites rank better and AI crawlers read them cleanly. You don’t write a line of it. Claude does.
Copy-paste prompt
Build a new website for my client using the Astro framework. The business: [NAME]. They do [WHAT THEY DO]. They serve [LOCATION / AREA]. Match the look and feel from brand-reference.md and the screenshots you took, but make it their own: their colors, their copy, their services. Don't copy the reference, capture its quality. Start with the core pages: home, about, services, and contact. Use a clean, reusable component structure so we can scale this to dozens of pages later. Astro because it ships static HTML that loads fast and ranks well.
Phase 5
Reverse-engineer a winning SEO strategy
Here’s where a $500 website becomes a client who keeps paying you. Most people stop at a pretty 4-page site. You’re going to use real search data to find exactly what the client’s buyers type into Google, then build a page for every one of those searches.
For my client, this turned a 4-page idea into a 40-plus page site: a page for every city and lake they serve, a page for every service they offer. Each one targets its own search and ranks on its own.
Copy-paste prompt
Use DataForSEO to run keyword research and a competitor analysis for [BUSINESS] in [LOCATION]. Find: - The keywords real buyers actually search (with volume) - Who ranks on page one right now, and for what - The low-competition, high-value gaps we can realistically win Then map every target keyword to a specific page. Build me a keyword-to-URL plan: a location page for each city/area we serve, and a service page for each thing we do. Then build all of those pages. Each one gets genuinely unique, local copy. No thin or duplicated content, that gets penalized. Real, specific writing for each page.
Phase 6
Make it readable by AI agents
This is the part almost nobody is doing yet, and it’s the whole reason to build now. People don’t just Google anymore. They ask ChatGPT and read Google’s AI answers. You want your client’s site to be the thing the AI quotes.
So you build for AEO, answer engine optimization. Direct answers up top, key facts, real FAQs, and structured data on every page so the machines can read and cite it.
Copy-paste prompt
Now make every page quotable by AI answer engines like ChatGPT and Google's AI Overviews. On each page add: - A direct-answer paragraph at the very top that answers the page's main question in plain language - An "at a glance" key-facts block - A short FAQ of the real questions buyers ask Then add JSON-LD structured data to every page: LocalBusiness, Service, BreadcrumbList, and FAQPage schema, filled in with the real business details. This is what gets us cited when someone asks an AI for a recommendation in our area.
Phase 7
Push it live on GitHub and Vercel
Last step. Claude creates a GitHub repo, pushes all the code, and walks you through connecting it to Vercel. One connection and the site is live. Every future change you make, Claude pushes and Vercel auto-deploys in seconds.
One detail that saves the client’s rankings: if they had an old site, set up redirects so every old link points to the new one. On my build that recovered over 100 existing backlinks that would have otherwise broken.
Copy-paste prompt
Create a new GitHub repository, commit all of this code, and push it. Then walk me through connecting the repo to Vercel, step by step, so the site goes live. Assume I've never done it before. If the client had an old website, set up 301 redirects from every old URL to the matching new page in the Vercel config, so we don't lose any existing Google rankings or backlinks.
Why This Matters
Why This Is a Skill You Can Sell
Anyone can prompt an AI into a pretty landing page now. That’s a $500 job, and it’s a race to the bottom. What you just learned is different. You’re building sites that actually rank, that pull in customers on their own, and that get quoted by AI when someone asks for a recommendation.
That’s the difference between a one-time website fee and a client who keeps paying you, because the thing you built keeps making them money. You don’t need to be technical. You need this workflow and a business that needs customers.
Every local business needs this. Almost nobody knows it’s now a weekend of work.
Work with Me
Want me on your problem for an hour?
Book a 1:1 call and we build the fix live — the workflow you want automated, the tool you can’t crack, whatever’s stuck. Direct, hands-on, no pitch waiting at the end.