Build websites with Claude

Two copy-paste pieces that take you from a Google Maps listing to a professional, animated, deploy-ready website for a local business — in about 30 minutes. I used this to close a $500 sale on my first pitch.

I sold a website I built in 30 minutes with Claude

I used Claude to spin up a website for a local business near me — and it just sold for an easy $500. The best part: it took 30 minutes.

Step one — find the target. Go to Google Maps and look for a business with genuinely good reviews but a weak or missing website. That gap is the whole pitch.

Step two — research it. Copy the info straight from their listing, head to Claude, and paste in the prompt below. It takes everything you gave it, searches the web for anything else it can find on the business, and maps it all out into a single artifact.

Step three — the trick. Switch over to the Cowork tab, paste in the doc Claude just generated, and use the Frontend Forge skill. Tell it to use the doc you just pasted in to build a professional website for this business. That's it — that's the whole build.

This makes the site look so good it's basically impossible to reject. Here's what happened when I pitched mine.

The Prompt — Research & Compile

I found this business on Google Maps and want to build them a website. Here's what I copied from their listing:

[PASTE YOUR GOOGLE MAPS INFO HERE — name, address, phone, hours, category, star rating, review count]

Search the web for everything else you can find on this business: their menu or service list with real pricing if available, customer reviews across Google/Yelp/Facebook, their social media accounts and recent posts, any existing website (note whether it's outdated, broken, missing entirely, or has multiple conflicting versions), photos of their space, products, or food, and anything else that would help me understand exactly what they do and how to present them well online.

Compile everything into one clean, organized reference document with these sections: Business Overview, Contact & Hours, Services/Menu & Pricing, Reviews & Reputation, Photos & Visual References (include direct links), Social Media, Current Web Presence (and specifically what's wrong with it, if anything), and Website Opportunity — a short note on what a great website needs to include for this specific business to actually convert visitors.

Print this as an artifact so I can hand it straight off to build their site.

The Skill — Frontend Forge

---
name: frontend-forge
description: Builds a professional, animated, deploy-ready website for a local business from a research artifact (business name, address, hours, menu/services, reviews, photos, socials). Trigger when the user pastes a compiled business document/artifact and asks to build them a website, or says "use frontend forge", "build this business a site", "make them a website".
---

# Frontend Forge

Turns a compiled business research doc into a finished, animated, Netlify-ready website — the same stack and quality bar used to build the Perennial demo site: Next.js, Framer Motion, real content only, dark premium theme, and a static export that drags straight onto Netlify.

## Step 0 — Read the business doc first

Before writing any code, read the pasted artifact/document fully. Pull out: business name, category (cafe, salon, contractor, gym, retail, etc.), address, phone, hours, menu or service list with prices if available, real customer reviews/rating, social handles, existing website URL and its condition, and any photo URLs mentioned. If something critical is missing (hours, address, or a way to contact them), ask for it before building — never invent business facts.

Use this doc to decide the site's sections. Don't force every business into the same template:

- **Food & drink** (cafe, restaurant, bakery): hero, featured items, full menu with real prices, gallery, hours/location, contact.
- **Service business** (salon, contractor, cleaning, fitness): hero, services with pricing, testimonials/reviews, before/after or gallery if visual, booking/contact, hours/location.
- **Retail**: hero, featured products, about/story, hours/location, contact.
- **Everything gets**: a live accurate hours/open-now indicator, a real contact method, and a clear path to convert (order, book, call, or message).

## Step 1 — Scaffold the project

```bash
npx create-next-app@latest [business-slug]-site --typescript --tailwind --eslint --app --src-dir --import-alias "@/*" --use-npm --no-turbopack
cd [business-slug]-site
npm install framer-motion lucide-react
```

Set `next.config.ts` up for a zero-server static export from the start:

```ts
const nextConfig: NextConfig = {
  output: "export",
  images: {
    unoptimized: true,
    remotePatterns: [{ protocol: "https", hostname: "<any external photo CDN host actually used>" }],
  },
};
```

Fonts: pick one display/serif font for headings and one clean sans for body via `next/font/google` (e.g. Fraunces + Inter, or something that fits the business's vibe — a bakery reads differently than a gym). Wire them into `globals.css` as CSS variables, never hardcode font-family in components.

## Step 2 — Design system (apply before writing any component)

- **Typography scale**: fixed steps only — `text-xs` through `text-6xl` per Tailwind defaults. Never arbitrary sizes like `text-[19px]`.
- **Spacing**: everything on the 8px grid (Tailwind's `2,4,6,8,12,16,24` scale). Section padding `py-16` to `py-28`.
- **Color tokens**: define `background`, `foreground`, `surface`, `surface-2`, plus a `primary`/accent and one secondary accent — no inline hex codes in components. Default to a **dark premium palette** (near-black background, warm off-white text, one accent color pulled from the business's own branding/signage if visible in their photos, otherwise pick one that fits their category) unless the business's existing branding strongly calls for light. Dark reads as expensive and modern; that's the default bar to beat.
- **Components**: one consistent button style (pick rounded-full or rounded-lg, use everywhere), consistent card padding/radius/ring across the whole site, real focus states on every input.
- **Ban the generic-AI look**: no purple-to-blue gradient heroes, no interchangeable "3 icon cards" with filler copy, no lorem ipsum, no stock emoji-as-icon. Every headline and CTA references the actual business by name. Pull from **21st.dev** (`21st.dev/community/components/s/hero`, `.../s/pricing-section`, `.../s/testimonials`, `.../s/footer`) for structure/interaction ideas, then re-skin fully to this business's tokens and copy — never leave it looking like a generic template.

## Step 3 — Build with real content only

- Pull every fact from the research doc — real prices, real hours, real address, real review count/rating, real photos (link directly to their existing photo URLs — Google Business, Squarespace CDN, Instagram — the same way the Perennial build reused their own Squarespace-hosted photos).
- **Accurate hours, always.** Never hardcode a static "Open now" string. Compute it live, in the business's own timezone (not the visitor's browser timezone), using `Intl.DateTimeFormat` with an explicit `timeZone`, refreshed on an interval, and rendered only after mount (`useEffect`) to avoid static-export hydration mismatches. Highlight today's row in the hours table.
- **Contact section**: first name, last name, email, subject, message. Build it Netlify-Forms-compatible (`data-netlify="true"`, a hidden `form-name` input matching the form's `name`, a honeypot field) so it works with zero backend the moment it's deployed on Netlify. Always show the phone number as a `tel:` link in at least the nav, the hours/location section, and the footer.
- **Every product/service/menu item is a link** — to their real online ordering/booking page if they have one, or to the site's own contact section if they don't. The goal of this site is to convert, not just to look good.
- **Motion**: Framer Motion scroll-triggered fade + slight rise on section entrance, staggered across siblings, subtle hover lift/scale on cards and buttons. Motion should draw the eye to the one thing that matters per section — never animate for its own sake.
- Add a small honest footer disclaimer if this is a pitch/demo site not yet handed over to the business: "Concept redesign — built as a demo."

## Step 4 — Verify before calling it done

```bash
npx tsc --noEmit
npx eslint .
npm run build
```

All three must pass clean. If `next build` fails with a native "Bus error" or similar crash with no other output, that's very likely a corrupted native binary on disk (seen before with `@next/swc-*` packages) — reinstall that one package (`npm install @next/swc-<platform>@<next-version> --no-save`) and rebuild before concluding anything else is wrong.

## Step 5 — Package for handoff

Zip the `out/` folder produced by the static export — that's the drag-and-drop-onto-Netlify deliverable. Also zip the source (excluding `node_modules`, `.next`, `out`) as a backup/editable copy. Confirm the built HTML actually contains the real business name, phone number, and at least one real menu/service item before handing it off — don't just trust that the build succeeded.

## Tone reminder

This site exists to get someone to say yes on the spot. Every section should make the business owner think "how did you make this so fast" — real content, real polish, real proof they can act on immediately (a phone number, a contact form, an order link), not a generic mockup.

• Paste a coffee shop's Google Maps info — get a menu-driven site with real prices

• Paste a contractor or salon's info — get a services + testimonials + booking layout

• "Use Frontend Forge to build this business a website" — after pasting the research artifact

• "Make it darker / lighter" — one line, full palette swap

• "Add a contact form and their phone number" — wired for Netlify Forms, zero backend

• "Link every item to their ordering page" — turns the whole menu into a funnel

This is the two-piece workflow. If you want the full walkthrough — including how I actually pitch the finished site in person — that's what I teach inside The AGI Guide.

Want my exact setup?