Playbook/AI-powered builds

Build any client site with AI

2310 min read2,068 words

Hand Claude Code a prospect's business name and city. Walk away. Come back to a deploy-ready website with real menu, real reviews, real hours, deployed on Cloudflare, pushed to GitHub.

This is exactly what we did to build the Mixed Greens demo. The prompt below is the captured workflow — copy it, fill in the variables, paste it into a fresh Claude Code session, and let it cook.

What this prompt does, end-to-end

Researches the business across Google Maps, DoorDash, Yelp, Restaurantji, RestaurantGuru, and any social/listings it can find
Verifies real address, phone, hours, reviews, menu/services with prices
Scrapes anti-bot sites with Playwright + stealth when WebFetch is blocked (Yelp, DoorDash)
Brainstorms a tasteful aesthetic direction tailored to the industry
Builds a Next.js 15 + Tailwind v4 + shadcn-style site by duplicating the Mixed Greens template
Refuses to fabricate reviews, menu items, prices, owner backstories, or dietary claims
Deploys to Cloudflare Pages on a public URL
Pushes to a private GitHub repo
Reports what was real vs. placeholder, what still needs the owner

A clean run from a single prompt produces a live, share-able site URL in roughly 45–90 minutes of agent time.

What you need before you run it

Item	Why	Cost
Anthropic Claude API or Claude Code subscription	Run the agent	$$
GitHub account (gh CLI installed)	Source control + deploy automation	Free
Cloudflare account (wrangler CLI installed)	Free hosting	Free
Playwright + Chromium installed locally	Scraping anti-bot sites	Free (`npm install -g playwright && playwright install chromium`)
The Mixed Greens template at `apps/mixed-greens/`	The reference build to clone from	You already have it

If gh and wrangler aren't installed yet, the agent will install them and prompt for OAuth.

The prompt — copy/paste this

Replace the <<…>> placeholders. Everything else stays as-is.

You are going to build a deploy-ready marketing website for a local business
in roughly one autonomous session, using only verified public data.

═══════════════════════════════════════════════════════════════
THE BUSINESS
═══════════════════════════════════════════════════════════════
- Name:         <<Business Name>>
- City, State:  <<City, ST>>
- Phone:        <<(xxx) xxx-xxxx — or "look it up">>
- Industry:     <<restaurant / dental / hvac / med-spa / law / auto / fitness / retail / other>>
- Anchor URL:   <<one canonical URL — Google Maps, Yelp, DoorDash, or their old website>>
- Slug:         <<short-name-here>>      (used for repo + Cloudflare project name)

═══════════════════════════════════════════════════════════════
WORKFLOW
═══════════════════════════════════════════════════════════════

PHASE 1 — RESEARCH (run as much in parallel as possible)
1. WebFetch their Google Maps listing, Yelp, Restaurantji, RestaurantGuru,
   DoorDash, Tripadvisor, MenuPix, AllMenus — whichever exist for them.
2. For sites that 403/CAPTCHA you (Yelp, DoorDash, Google's review tab in
   limited view): launch Playwright with playwright-extra + stealth in
   headed mode. Use a persistent browser host (long-running script
   exposing port 9222) and connect via CDP for follow-up steps.
3. Capture and verify, with sources cited inline:
     • full address (with suite/unit number if any)
     • phone (click-to-call format too)
     • all hours per day
     • email or contact form URL if any
     • social media handles (FB, IG, TikTok, X)
     • current website URL (or confirm none exists)
     • aggregate rating + count, ideally screenshot from Google Maps
     • industry-appropriate offering list with real prices:
        - restaurant -> full menu
        - dental -> services list (cleaning, whitening, implants, etc.)
        - hvac -> services + emergency availability
        - law firm -> practice areas + attorney bios
        - retail -> product categories
     • 3-6 real customer reviews with first-name + last-initial
       attribution, never invent names.

PHASE 2 — BRAINSTORM (do this BEFORE writing any code)
1. Pick an aesthetic direction tailored to the business:
     • restaurants -> editorial farm-to-table, photo-forward
     • dental / med-spa -> calm clinical, sans-serif, lots of whitespace
     • hvac / contractors -> bold trust-tones, "we show up" energy
     • law -> conservative serif, dark blue + cream
     • retail / boutique -> magazine-editorial with strong typography
   Avoid the AI-slop default of Inter + purple gradient on white.
2. Pick a distinctive font pairing. Display + body, never both Inter.
3. Plan the section order based on what the user actually needs:
     restaurants -> Hero, Marquee, Menu, Reviews, Visit, Footer
     services    -> Hero, Services grid, Process, Reviews, Booking, Footer
     retail      -> Hero, Categories, Featured products, Hours, Reviews, Footer
4. Present the design plan. Ask for approval. Wait for "go" before coding.

PHASE 3 — IMPLEMENTATION
1. Duplicate apps/mixed-greens/ -> apps/<<slug>>/. This is the template.
2. Update package.json name + scripts (port 3000+N for `dev`).
3. Replace lib/restaurant.ts with industry-appropriate data file:
     • lib/business.ts (always)
     • lib/menu.ts OR lib/services.ts OR lib/products.ts (industry-fit)
4. Centralize placeholder image bank at the top of the data file:
       const IMG = { hero: "...", item1: "...", ... };
   Use images.unsplash.com URLs. Pick imagery matching the industry.
5. Update app/layout.tsx metadata (title, description, OG).
6. Update components/StructuredData.tsx with the right Schema.org type:
     Restaurant / Dentist / Plumber / LocalBusiness / Store / etc.
   Include real address, hours, aggregate rating, reviews if used.
7. Build sections fresh — don't reuse Mixed Greens' Menu / Story
   verbatim. Match the brainstormed structure.
8. Update Nav links, OG image generator, and color tokens in globals.css.

PHASE 4 — VERIFY
1. `npm install --legacy-peer-deps` then `npm run build`. Must exit 0.
2. Run dev server. curl every route to confirm 200.
3. Run Lighthouse against the production build (`npx serve out` then
   `lighthouse http://localhost:4000 ...`). Aim for:
     • Performance >=70 on mobile (LCP held by remote images is OK)
     • Accessibility >=95
     • Best practices >=90
     • SEO >=90
     • Color contrast: PASS
4. Take mobile + desktop screenshots via Playwright. Inspect for layout
   issues, broken images, missing CTAs, text overflow.
5. Fix any contrast / touch target / image dimension issues found.

PHASE 5 — SHIP
1. `git init`, `git add .`, initial commit.
2. `gh repo create vulnix0x4/<<slug>> --private --source=. --push`.
3. `wrangler pages project create <<slug>> --production-branch=main`.
4. `wrangler pages deploy out --project-name=<<slug>> --branch=main --commit-dirty=true`.
5. Verify the live URL returns 200 and content renders.
6. Save the live URL: it's typically https://<<slug>>.pages.dev.

═══════════════════════════════════════════════════════════════
HONESTY RULES — DO NOT BREAK THESE
═══════════════════════════════════════════════════════════════
- NEVER fabricate customer reviews. Every quote must come from a public
  source with a real name (first-name last-initial format).
- NEVER fabricate menu items, services, or prices. If you can't verify,
  leave it off and add a "see [DoorDash / their booking page] for full
  list" CTA.
- NEVER fabricate per-item dietary claims (V, GF). Only mark when the
  source explicitly says so. Use a category-level disclaimer instead.
- NEVER invent a backstory ("we took over a corner of the gas
  station...") even if it sounds plausible. Either get it from the
  owner directly later, or skip the Story section entirely.
- NEVER use stock food/space photos as if they were real. Always note
  in the README that placeholders need swapping.
- NEVER skip the "Quoted from public [source]" attribution under the
  reviews section.
- NEVER bypass CAPTCHAs. If Yelp or DoorDash CAPTCHA-walls you, try
  the next source. RestaurantGuru, Restaurantji, Google Maps in headed
  Playwright usually work.

═══════════════════════════════════════════════════════════════
DELIVERABLES — WHAT TO REPORT BACK
═══════════════════════════════════════════════════════════════
At the end, output:

1. Live URL on Cloudflare Pages
2. GitHub repo URL
3. Production Lighthouse scores (mobile)
4. Honest punch list of:
     • What's REAL on the site (verified, with source)
     • What's PLACEHOLDER and needs owner input
     • What's UNKNOWN and the owner must confirm
5. Single command to redeploy after edits:
     cd apps/<<slug>> && npm run build && \
       wrangler pages deploy out --project-name=<<slug>> \
                                  --branch=main --commit-dirty=true

═══════════════════════════════════════════════════════════════
START NOW.
═══════════════════════════════════════════════════════════════

Filling in the variables — examples

Restaurant:

- Name:        Gracie's Diner
- City, State: Cedar City, UT
- Phone:       look it up
- Industry:    restaurant
- Anchor URL:  https://www.google.com/maps/place/Gracie's+Diner/...
- Slug:        gracies-diner

Dental practice:

- Name:        St. George Family Dental
- City, State: St. George, UT
- Phone:       (435) 555-0188
- Industry:    dental
- Anchor URL:  https://www.google.com/maps/place/...
- Slug:        st-george-family-dental

HVAC contractor:

- Name:        Cedar Mesa HVAC
- City, State: Cedar City, UT
- Phone:       look it up
- Industry:    hvac
- Anchor URL:  https://www.yelp.com/biz/...
- Slug:        cedar-mesa-hvac

What to expect on a normal run

Stage	Time	What's happening
Research	10–15 min	Parallel WebFetches, Playwright spins up, scraping menu + reviews
Brainstorm + design approval	5 min	You skim the design plan and say "go"
Build	20–35 min	Duplicating template, swapping data, building sections
Verify	10 min	Build, Lighthouse, screenshots, contrast/A11y fixes
Ship	5 min	gh repo create, wrangler deploy

Total: ~60–75 minutes of agent time for a clean run. Add 15–30 minutes if the agent needs to interactively work around CAPTCHAs or sparse public data.

Variations by industry — what the agent should do differently

Restaurant

Pull menu from DoorDash, Uber Eats, Toast, Square Online, or their own site
Categories: bowls / salads / mains / drinks / desserts
Schema.org type: Restaurant with hasMenu
CTAs: Order online + Call + Map
Reviews source: Google + Yelp + Tripadvisor + Restaurantji

Dental / med-spa

Pull services list from their existing site or industry directories
Categories: preventive / cosmetic / restorative / specialty
Schema.org type: Dentist or MedicalBusiness
CTAs: Book consultation + Insurance accepted + Map
Reviews source: Google + Yelp + Healthgrades

HVAC / contractor

Pull services from BBB, Yelp, or their site
Categories: residential / commercial / emergency / maintenance plans
Schema.org type: HVACBusiness or Plumber
CTAs: Call now + Free estimate + Service area map
Reviews source: Google + Yelp + BBB + Angi

Law firm

Pull practice areas + attorney bios from their site or Avvo
Categories: practice areas / team / case results
Schema.org type: LegalService with priceRange
CTAs: Free consultation + Phone + Office hours
Reviews source: Google + Avvo + Martindale-Hubbell

Retail / boutique

Pull product categories from their site, Shopify, Square, or social
Categories: collections (women / men / kids / accessories etc.)
Schema.org type: Store with openingHoursSpecification
CTAs: Shop online + Visit us + Hours + Map
Reviews source: Google + Yelp + Facebook

Why this works (and where it fails)

Why it works: The agent has a working reference build (Mixed Greens). It's not building from scratch — it's transforming a known-good template with verified real data. That keeps quality consistent and dramatically reduces failure modes.

Where it fails:

Brand-new businesses with no Google Maps presence and no public reviews (less than 10 ratings) — the agent will run out of verifiable data and ship a thin site
Businesses with private menus / member-only pricing (gyms, country clubs) — the agent should stop and explicitly ask the owner
Multi-location franchises where signage and pricing differ per location — pick the specific location URL, not the corporate one
Industries the agent hasn't seen (taxidermy, escrow, exotic pet boarding) — works but slower because there's less industry knowledge baked in

Always do a final review pass yourself before sharing the link with the prospect. The agent is honest but it can miss things — wrong location of two same-named businesses, stale hours that haven't been updated since COVID, owner who recently sold the business.

After deployment — handoff to the prospect

Send the live URL to the prospect with a short note (use the cold-call script's "I built it for you" framing — see 01-cold-call-script.md).
Walk through the live site on the discovery call.
Get owner approval to swap real photos and confirm the menu / hours / story.
Once they sign:
- Move the repo to a custom domain (Cloudflare Pages -> Custom Domains)
- Replace placeholder images with real ones (one commit per category is clean)
- Update story / about copy with their actual backstory
- Set up uptime monitoring + the recurring monthly subscription billing

That's the full pipeline. Run it once, ship a site, close a client, repeat.

What this prompt does, end-to-end#

What you need before you run it#

The prompt — copy/paste this#

Filling in the variables — examples#

What to expect on a normal run#

Variations by industry — what the agent should do differently#

Restaurant#

Dental / med-spa#

HVAC / contractor#

Law firm#

Retail / boutique#

Why this works (and where it fails)#

After deployment — handoff to the prospect#