24-Hour AI Website Redesigns

AI Prompts to Build This

Copy these build prompts into Claude, Cursor, or your AI coding tool. Create a free account to unlock the full research behind them.

1. 1. Project Setup

   Build the weekend MVP of "SiteRefresh": paste a small business's URL and get a mobile-first redesign that keeps the brand, reviewed by a human before it goes out.
   
   Stack: Next.js (App Router), TypeScript, Tailwind, shadcn/ui, Supabase (Postgres, Row Level Security, Storage, Auth with email magic link), Firecrawl for the content, Claude (Anthropic API) with a strict JSON schema for the redesign plan. Deploy on Vercel.
   
   Tables (Row Level Security on, each owner reads only their own rows):
   - sites(id, user_id, source_url, industry, style_pref, extracted_brand jsonb, created_at)
   - redesigns(id, site_id, status, template_map jsonb, generated_url, delivered_at) where status is one of queued, generating, review, delivered
   - revisions(id, redesign_id, note, resolved)
   
   Screens: / (a URL box with an industry select and a style select), /app (redesigns and their status), /preview/[id].
   Env vars (names only): NEXT_PUBLIC_SUPABASE_URL, NEXT_PUBLIC_SUPABASE_ANON_KEY, SUPABASE_SERVICE_ROLE_KEY (server only), FIRECRAWL_API_KEY, ANTHROPIC_API_KEY.
   
   Do not build: billing, plans or a care plan, the free site audit scores, before and after screenshots, email delivery, a second AI model, custom projects.
   Done when: npm run dev starts, you can sign in, and the three tables exist with Row Level Security on.

2. 2. Core Feature

   Build the one feature that proves SiteRefresh: a crawl in, a brand-preserving redesign out.
   1. When a redesigns row is inserted as queued, a background job calls Firecrawl on source_url and extracts headings, body copy, the nav structure and brand assets (logo URL, dominant colors, fonts). Save them to sites.extracted_brand.
   2. Send the extract plus the industry and style to Claude with a strict JSON schema that maps the content onto a fixed library of section templates (hero, services, about, testimonials, booking or contact, footer). Return the section order, the template per section, the rewritten copy and a palette derived from the existing brand.
   3. Render the template_map into a live /preview/[id] page with shadcn/ui section components. Every section is mobile-first and passes basic accessibility checks: alt text, contrast and semantic headings.
   4. Set the status to review. A person checks the page and fixes layout, then marks it delivered on /app, where the owner can leave revision notes.
   Rules: keep the owner's brand name, logo and core value proposition. Only modernize layout, hierarchy and clarity. Retry with backoff so a crawl or model hiccup never silently drops a redesign.
   Empty state: with no sites, show the URL box.
   Done when: a small test site produces a preview that keeps its name and logo, passes the alt-text and contrast checks, and moves from queued to review.

3. 3. Landing Page

   Build a one-page landing site for SiteRefresh, 24-hour AI website redesigns for small businesses.
   Hero: "Your outdated website, redesigned by AI in 24 hours." Sub: "Paste your URL. Keep your brand. Get a modern, mobile-first site by tomorrow, with no agency quote and no page builder to learn." One button: Paste your URL for a free audit, which joins the waitlist.
   Sections: a URL box in the hero, a before and after slider that animates on scroll, the problem (half of small businesses have no site and most that do are not mobile-friendly), how it works in four steps (paste your URL, AI redesigns overnight, a human finishes, approve and go live), and an FAQ on brand preservation, the 24-hour timeline, revisions, hosting and what happens to the old site.
   Waitlist: store the email in a waitlist table in Supabase. No other service.
   Style: Geist, off-white background, near-black text, one lavender accent.
   Done when: the page renders on a phone and a submitted email appears in the waitlist table.

4. 4. Branding Package

   Use a design or image tool for this one. A coding agent cannot draw a logo.
   Brand for SiteRefresh: a wordmark and an icon that suggest a page being refreshed.
   Colors: off-white, near-black and one lavender accent. Type: Geist for the interface.
   Deliverables: wordmark, icon, a before and after slider handle, and one launch graphic.
   Done when: each deliverable is saved in one folder and the icon reads at 32 px.