I Cloned a Website From a Claude Chat

Usman Haider — Fri, 26 Jun 2026 08:33:30 +0000

There's a moment when you find a layout you wish you'd built — a landing page that just works, an old site of your own you want to move, a competitor's structure you'd like as a starting point. The usual answer is "open the dev tools and start copying." Slow, brittle, and you end up with a pile of HTML that isn't really yours to edit.

Sitelas does it in one prompt. Because it plugs into Claude as a connector, you can hand Claude a URL, say clone this, and get back a real, editable Sitelas site — previewed privately first, published only when you're ready. I did exactly that with nextjs.org. Here's how it went, end to end, and the one honest caveat that matters.

What "clone" actually means here

This isn't a screenshot and it isn't an <iframe> wrapper. Claude captures the page — the full-page render, the DOM with computed styles, the design tokens (palette, type scale, spacing), and the real image URLs — and then rebuilds it section by section as a Sitelas site. The output is a normal site made of Sitelas's own building blocks, with a proper header, footer, theme, and pages.

Which means the moment it exists, it's yours to change: reword the hero, swap the palette, drop a section, wire up a form — by prompting Claude or in the visual editor, exactly like any site you build from scratch. The clone is your starting point, not a frozen copy. (New to the build flow? Start with How to Build a Website From a Claude Chat.)

First: connect Sitelas to Claude

One-time setup. In claude.ai, open Customize → Connectors → Add custom connector and paste:

https://sitelas.com/api/mcp

Sign in to Sitelas when prompted. Claude can now capture URLs, compose sites, change themes, and publish — all from chat.

Step 1: Hand Claude a URL and say "clone it"

You give it the address; Claude does the rest in one turn — capture, study, rebuild, preview.

Watch what it actually does: it captures nextjs.org, reads the structure and design tokens straight off the page (the black-on-white palette, the Geist / Geist Mono typography), pulls the real image URLs, then composes a fixture that mirrors the original — and saves it as a draft.

What came back was a faithful, section-by-section replica: the ▲ hero with "The React Framework for the Web" and the npx create-next-app@latest code pill, the "What's in Next.js?" feature grid, the "Powered By" tooling cards (React, Turbopack, SWC), the deploy-templates block, the eight-logo showcase wall ending in customer testimonials, and the full multi-column footer with an email signup form.

Side by side, the original and the clone read as the same page — same structure, type, and layout — except the one on the right is a real Sitelas site I can edit, restyle, and republish from chat.

You get a private preview first — nothing is public yet

Just like building from scratch, the clone lands as a draft. Claude hands you a preview URL (preview-nextjs-clone-1983.sitelas.com) that's private to you; the permanent address stays a 404 until you publish. So you can click through the whole thing, decide what to keep, and change anything before a single visitor sees it.

This is also where you'd start making it your own — different copy, your palette, your sections. A clone you publish verbatim is rarely the goal; a clone you adapt is the fast way to a site that's genuinely yours.

Step 2: Publish when you're happy

When the preview looks right, tell Claude to make it live.

Claude promotes the draft to the permanent URL and archives the previous (empty) state, so a one-step revert is always available. nextjs-clone-1983.sitelas.com is now a real, live site.

The honest caveat: copied images are copied images

This is the part to take seriously. When Claude rebuilds a page, it reuses the real assets from the source so the clone looks right — which means the imagery, logos, and screenshots are pulled straight from the original and are very likely copyrighted. That's fine for a personal demo or a private prototype. It is not fine to publish someone else's photography, logos, and brand art as your own.

So the responsible flow is: clone to get the structure and layout fast, then replace the borrowed pieces with your own. Claude can swap every image for licensed stock in one pass — just ask — and the text is yours to rewrite anyway. Treat a clone as scaffolding, not a finished product, and you stay on the right side of this.

When cloning is the right move

Migrating your own site. You already own the content and brand — clone it into Sitelas, then edit and publish from chat going forward.
A starting layout you'll customize. Admire a structure? Clone it as scaffolding, then change the copy, palette, imagery, and sections until it's your site, not theirs.
A fast prototype. Stand up a realistic page to test an idea, knowing the assets get swapped before anything ships.

What it's not for: republishing someone else's brand, art, and copy verbatim. The capability is powerful; the imagery caveat above is the guardrail.

Why do this from a chat at all?

Same reason the rest of Sitelas lives in Claude: the context never resets. The chat that cloned your page can keep going — restyle it, connect a form to Google Sheets, read submissions, draft replies through Gmail — without you opening a dashboard. The clone isn't a dead end; it's the first step of a site you run from the same window. For a full worked example of that loop, see I Launched a Waitlist and Ran It From One Claude Chat.

And if you'd rather fine-tune by hand, every cloned site opens in the visual editor with the same draft → preview → publish flow.

Try it

Add the Sitelas connector in Claude, paste a URL, and say clone it. Review the private preview, swap the borrowed imagery for your own, customize until it's yours, then publish. Sitelas is free while we're in early access — start at sitelas.com.

DEV Community: Usman Haider