Clone & rebuild when…
The information architecture is good, the design is dated. Or — you own the site and want to modernize without re-thinking what's on it. Or — you're rescuing a Wayback Machine archive of a site that's gone.
A detailed playbook on Claude looking at an existing website and turning it into something better — yours, faster, prettier, accessible, modern. Capture the source, study its structure, decide what to keep, redesign what's tired, rebuild it cleanly, ship it. Prompts you can run today.
This page is the long version. /design has the short version.
Cloning isn't always the right move. There's a clean rule for choosing.
The information architecture is good, the design is dated. Or — you own the site and want to modernize without re-thinking what's on it. Or — you're rescuing a Wayback Machine archive of a site that's gone.
The structure itself is the problem. Or — the content is wrong for the audience you actually have. Or — the original was small enough that re-doing it from scratch is faster than studying it.
Three categories — and Claude won't help with the third.
Claude needs to see the original. The capture method depends on the size and access.
.html and attach.Mirror it locally with wget or httrack first, then point Claude Code at the mirror.
# Mac/Linux
wget --recursive --no-clobber --page-requisites \
--html-extension --convert-links --restrict-file-names=windows \
--domains example.com --no-parent https://example.com/
# Windows (curl)
mkdir mirror && cd mirror
curl -L https://example.com/ -o index.html
# …iterate per page, or use httrack on WindowsPull from the Wayback Machine. web.archive.org has a snapshot for almost everything.
# Pick a year, then mirror
wayback_machine_downloader https://example.com --from 20180101 --to 20181231
# Or: visit https://web.archive.org/web/2018*/example.com and grab pages by handThis is how the firth.com restoration on this network worked — 222+ pages reconstructed from Wayback snapshots, then redesigned.
Don't mirror. Capture only the pages you have rights to, plus public landing-page screenshots used purely for layout reference.
Before redesigning anything, get an honest read on what's actually there. Claude is unusually good at this — it'll see structure you've stopped seeing.
Spend ten minutes reading the answer. The "three questions only the owner can answer" is the highest-leverage part — it surfaces decisions you didn't realize you were drifting on.
Before any rebuild work, write a tiny "what to keep / change / cut" list. This is the single most useful artifact in a clone-and-rebuild project; it makes every later decision faster.
What's working. URL structure usually goes here so SEO doesn't break. Distinctive copy. Photo assets you own. Functional features.
What's tired but the underlying intent is right. Hero layout. Typography. Color palette. Nav arrangement.
What no longer earns its place. Dead pages. Counter widgets. Auto-playing carousel. The "as seen in" badge from 2014.
A redesign brief is what you'd say to a freelancer over coffee. Audience, purpose, mood, constraints. Claude works from this kind of brief better than from a long detailed spec.
Claude Design is the right tool for prototype-grade exploration. Live HTML output, voice and slider edits, design-system aware. See /design for the product page.
The prototype is HTML. The site is a project. Hand off to Claude Code running in your project directory.
./public/. Match the existing URL structure (see ./old/sitemap.xml). Preserve the content from ./old/<url>.html for each page; redesign the wrapping. Keep the same head metadata."/about-us becomes new /about, you've thrown away SEO. Either keep URLs or write redirects. Don't silently rename.A clone is a fresh chance to fix everything that needed fixing. Claude can do most of these in a single pass. Pick the ones that matter for this site.
Pair a confident display font with a clean body font. Set sizes from a scale, not by accident.
One brand color, one accent, two greys, one alarm color. Cut anything else.
Most heroes are 1.5× too tall. Shrink it; let the user scroll into the real content.
One primary action above the fold. Old sites often had three CTAs and zero of them won.
Convert to WebP / AVIF, set width/height, add loading="lazy".
If there are 12 nav items, the answer is fewer. Consolidate. Promote the two visitors actually click.
Read every page aloud. Cut a third of the words. Specifics beat adjectives.
JSON-LD for org, article, breadcrumb, FAQ. Free SEO win.
If the design only works at 1440px, it doesn't work. Most traffic is phones.
./public/, run an upgrade pass: modernize typography to a 1.250 scale, compress the hero to 70vh max, add JSON-LD for organization & breadcrumbs, swap PNG/JPG hero images for WebP with explicit dimensions, and add loading="lazy" to every below-the-fold image. Show me the diff before applying.
Both A11y and SEO live in the same neighborhood — semantic HTML, reading order, alt text, headings, link text. Knock them out together.
./public/:<h1> per page; nested headings in orderalt on every image; meaningful (not "image1.jpg")<label> on every form control; aria-label only when there's no visible label<title>, meta description, canonical, og:title, og:description, og:image on every pagesitemap.xml at root; referenced from robots.txtA clone-and-rebuild project has a non-obvious failure mode: silently lost content. Pages that didn't carry over. Paragraphs that got cut by the redesign and never came back. Verify.
./old/ (the captured original) and ./public/ (the rebuild). Produce a report: every URL in old that's missing from new, every URL in new that's missing from old, every page where word count dropped > 30%. For each anomaly, suggest whether it's an intentional cut (per Keep/Change/Cut list) or a regression.
Every renamed URL gets a 301. Every removed page gets a 301 to its closest descendant or a 410 if it's truly gone. Search engines and humans both forgive a redirect; both punish a 404.
dev.<domain> or <sub>.ehotsprings.com. Click around. Show one trusted reviewer.Three case studies, all on the WholeTech network, all built with the playbook above.
A Colin Firth fansite that had gone dark. We pulled 222+ pages from web.archive.org, fed them to Claude Code, and rebuilt with a dark editorial theme. New chronology page, Austen literary hub, deep Mr Darcy 1995 page. URL structure preserved where the original was sound; consolidated where it wasn't. firth.com
An old Austin sports-fan site refreshed with the frontend-design plugin. UT burnt orange (#BF5700), Big Shoulders Display headlines, cream-paper backgrounds. Same content map, dramatically tighter design. Confirmed brilliant by the owner; promoted to live the same day. austintexasfans.com
A 21-page short-term-rental guide that worked but looked dated. We kept every URL, every case study, every calculator; rebuilt the wrapping with three theme variants. Word counts within 5% of the original on every page; design is now 2026-grade. bnbhot.com
The seven prompts that drive most of this playbook, all in one place. Replace the bracketed bits.
./public/. Match the URL structure in ./old/sitemap.xml; preserve the content from ./old/<url>.html for each page. Keep <title>, meta description, canonical, OG tags. Show me one finished page first.
./old/ and ./public/. Produce a report of missing URLs, added URLs, and pages where word count dropped > 30%. Flag each anomaly as intentional or regression based on the Keep/Change/Cut list.