$ dittu clone https://dub.co/home --build

› Capturing https://dub.co/home
  1,680,755 chars of markup, 6 stylesheets, 33 animations, 13 JS-responsive elements
✓ Static preview → dittu-out/dub.co/preview
✓ Next.js project → dittu-out/dub.co/next
✓ Astro project → dittu-out/dub.co/astro

Visual match (1 − differing pixels / total)
  preview  /home    1440px   99.95%
  next     /home    1440px   99.95%
  astro    /home    1440px   99.95%
  preview  /home     390px   99.89%
  next     /home     390px   99.89%
  astro    /home     390px   99.89%
✓ All checks ≥ 95% (lowest 99.89%)

Quick start

Set up your agent

npx dittu setup

Registers the dittu MCP server and installs the skills for every agent it
finds: Claude Code, Cursor, Gemini CLI, Codex. Check your machine first
with npx dittu doctor (on Linux/WSL you may need
sudo npx playwright install-deps chromium).

Ask your agent

Clone https://example.com into Next.js and make the pricing cards a reusable component.

The agent calls clone_website, reads the scores, refactors the generated
components, and calls verify_clone to prove nothing visual changed.

Use the terminal

npx dittu                                        # interactive: banner, then pick URL, frameworks, pages…
npx dittu clone https://example.com -y           # no questions: preview + Next.js + Astro, scored
npx dittu clone https://example.com -p 5 --build # crawl 5 pages, build and score the apps
npx dittu verify dittu-out/example.com --targets next
npx dittu serve dittu-out/example.com

Update dittu

npx dittu@latest setup

How dittu works

Most cloners screenshot a page and ask an LLM to redraw it. dittu copies what
the browser actually rendered, then checks the result:

1. Capture: Chromium loads the page, scrolls it so lazy content and scroll
   reveals fire, then freezes JS timers so carousels hold still. A second render
   at 390 px records layout that JS computes per viewport.
2. Serialize the live DOM, not the server HTML. Next.js/React sites come out
   as their final markup without hydration scripts or RSC payloads. Nesting the
   HTML parser would restructure gets repaired, so React hydrates cleanly.
3. Keep the original CSS in cascade order, including CSS-in-JS rules that
   exist only in the CSSOM. Media queries, hover states and keyframes keep working.
4. Download every asset from the same session and rewrite URLs.
5. Export to a static preview, a Next.js App Router project (JSX) and an
   Astro project, split into section components.
6. Replay motion: recorded scroll reveals, Framer Motion animate calls and
   loops run again through a 2 KB runtime.
7. Verify: screenshot original and clone the same way at desktop and mobile
   and score them. --build scores the built apps, not just the preview.

Details: docs/architecture.md.

What you can clone

Benchmarks

Methodology and limits: docs/fidelity.md.

FAQ

Does it copy the backend? No. Data fetching, auth, APIs and form handling
are not copied. You get the frontend, ready to wire to your own logic.

Why is the generated JSX full of {" "}? Whitespace between inline elements
changes layout in HTML but is dropped by JSX. dittu keeps it explicit so the clone
renders identically. Refactor freely, and re-run verify to check.

Why plain CSS instead of Tailwind classes? The original stylesheet is the
only way to get 99%. A Tailwind conversion pass is on the roadmap,
guarded by verify.

Is the 95% score honest? It's raw pixel identity over the full page,
including height differences, at desktop and mobile. Diff images are saved next
to the scores so you can check.

Can I clone any site I want? Technically mostly yes. Legally, see the
disclaimer.

Documentation

• Installation
• CLI
• MCP server
• Architecture
• Fidelity and benchmarks
• Testing
• Roadmap

Disclaimer

dittu is for learning, prototyping, design references and migrating sites you
own. Cloning a site doesn't give you rights to its brand, copy, images or code.
Read DISCLAIMER.md.

Contributing

See CONTRIBUTING.md. Agents working in this repo: AGENTS.md.

License

MIT