Skip to main content
Glama

dittu: Clone Any Website

Turn any website into an editable Next.js or Astro project, verified pixel by pixel.

Layout, CSS, fonts, images and scroll animations. Not the backend. One CLI, one MCP server, and skills for your coding agent.

npm version npm downloads CI License: MIT Node

GitHub stars GitHub forks GitHub issues Last commit

TypeScript Playwright Next.js Astro Tailwind CSS MCP

Quick start · How it works · Benchmarks · Docs

$ dittu clone https://gole.codes --build

› Capturing https://gole.codes
  1,680,755 chars of markup, 6 stylesheets, 33 animations, 13 JS-responsive elements
✓ Static preview → dittu-out/gole.codes/preview
✓ Next.js project → dittu-out/gole.codes/next
✓ Astro project → dittu-out/gole.codes/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 @manishtamang/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 @manishtamang/dittu doctor (on Linux/WSL you may need sudo npx playwright install-deps chromium).

Ask your agent

Clone https://gole.codes 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 @manishtamang/dittu                                        # interactive: banner, then pick URL, frameworks, pages…
npx @manishtamang/dittu clone https://gole.codes -y           # no questions: preview + Next.js + Astro, scored
npx @manishtamang/dittu clone https://gole.codes -p 5 --build # crawl 5 pages, build and score the apps
npx @manishtamang/dittu clone https://gole.codes -s tailwind # Tailwind classes where lossless, rest stays CSS
npx @manishtamang/dittu verify dittu-out/gole.codes --targets next
npx @manishtamang/dittu serve dittu-out/gole.codes

Update dittu

npx @manishtamang/dittu@latest setup

Related MCP server: PicassoWeb

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

Site type

Support

Marketing sites, landing pages, portfolios, docs

✅ 99%+ typical

Next.js / React / Vue / Svelte / Astro builds

✅ post-hydration DOM

Tailwind, CSS modules, styled-components, emotion

✅ original CSS kept

Scroll reveals (AOS, Framer Motion, GSAP, IntersectionObserver)

✅ recorded and replayed

Layout JS computes per viewport

✅ mobile render → media-query overrides

Multi-page sites

✅ --pages N, internal links rewired, shared header/footer components

Canvas / WebGL scenes

⚠️ still image

Carousels, tabs, menus, forms

⚠️ look is copied, behaviour is not

Pages behind login or bot protection

❌

Benchmarks

Site

Stack

Desktop

Mobile

Built apps

gole.codes

Next.js, heavy animation

99.95%

99.89%

Next.js + Astro: same

nextjs.org

Next.js

99.79%

99.99%

99.78–99.79%

ui.shadcn.com

Next.js + Tailwind

100.00%

100.00%

100.00%

astro.build

Astro

100.00%

100.00%

manishtamang.com (3 pages)

Next.js

99.89–99.99%

99.80–100%

same

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.

Can I get Tailwind classes instead of CSS? Yes: --styling tailwind. Every rule that can be expressed exactly becomes Tailwind utilities (sites built with Tailwind v4 keep their own classes); the rest stays CSS, so scores don't drop. See Tailwind output.

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

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.

ditto.site by ion-design takes the same capture-what-the-browser-rendered approach as a hosted API and MCP service. dittu differs by running as a local CLI, keeping the site's original CSS by default (Tailwind output is opt-in and only where it renders identically), exporting Astro alongside Next.js, and scoring every clone with pixel-diff verification.

Contributing

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

License

MIT

Available Tools

3 tools
clone_websiteClone website frontendA

Clone a website's frontend (markup, original CSS, fonts, images, scroll animations) into a static preview plus Next.js and Astro projects, then score it against the original with pixel diffs at desktop and mobile widths. Takes ~1 minute per page (several minutes with build=true). Returns output paths and scores (percent identical).

NameRequiredDescriptionDefault
urlYesPage to clone, e.g. https://gole.codes
buildNoAlso npm install + build + score the generated apps (slow, default false)
pagesNoCrawl up to n same-site pages (default 1)
outDirNoOutput directory (default ./dittu-out/<host>)
removeNoCSS selectors to drop (cookie banners, chat widgets)
verifyNoScore the clone against the original (default true)
waitMsNoExtra wait after load in ms
stylingNocss keeps the original stylesheet (default); tailwind converts class rules to Tailwind utilities wherever that renders identically and keeps the rest as CSS
frameworksNoProjects to generate (default next + astro)

TDQS

A3.7/5.0
Behavior4/5

Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?

Beyond readOnlyHint=false and openWorldHint=true, the description discloses the main cost driver (per-page duration, slower with build=true) and the side effect of writing artifacts to an output location with returned paths and similarity scores. It does not say whether existing output directories are overwritten or what happens on partial failure, so it stops short of full transparency.

Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.

Conciseness4/5

Is the description appropriately sized, front-loaded, and free of redundancy?

Two tightly packed sentences, front-loaded with what is cloned and generated, followed by timing and return values. Nearly every clause earns its place; the desktop/mobile width detail is the only bit that leans toward implementation trivia.

Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.

Completeness4/5

Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?

With nine parameters and no output schema, the description carries the return-value burden and does so ('Returns output paths and scores (percent identical)'). Combined with the full schema coverage and cost disclosure, an agent has enough to invoke it correctly; failure modes and overwrite behavior are the remaining gaps.

Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.

Parameters3/5

Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?

Schema description coverage is 100%, so every parameter is already documented, which sets the baseline at 3. The description adds modest context by tying throughput to page count and clarifying the desktop/mobile scoring widths, but contributes no new semantics for parameters like remove, waitMs, styling, or frameworks.

Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.

Purpose4/5

Does the description clearly state what the tool does and how it differs from similar tools?

States a concrete verb and resource ('Clone a website's frontend') and enumerates exactly what is captured (markup, CSS, fonts, images, scroll animations) and what is produced (static preview plus Next.js and Astro projects). It does not differentiate from siblings like verify_clone, and in fact overlaps with them by also scoring the clone, which slightly muddies which tool to pick.

Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.

Usage Guidelines3/5

Does the description explain when to use this tool, when not to, or what alternatives exist?

No explicit when-to-use or when-not-to-use guidance, and no mention of when to prefer verify_clone or read_report. The time estimate ('~1 minute per page (several minutes with build=true)') implies when the expensive path is worth it, but the agent must infer routing between siblings.

Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.

read_reportRead clone reportB
Read-only

Manifest and latest scores of a clone: pages, targets, per-width scores, diff image paths, worst regions.

NameRequiredDescriptionDefault
outDirYesOutput directory of a previous clone

TDQS

B3.2/5.0
Behavior3/5

Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?

readOnlyHint=true already establishes the safety profile, and the description adds real value by enumerating the returned payload (manifest, per-width scores, diff image paths, worst regions) — important because there is no output schema. However, it says nothing about failure behavior when outDir is missing or contains no report, so it only partly compensates.

Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.

Conciseness4/5

Is the description appropriately sized, front-loaded, and free of redundancy?

One dense sentence with no filler, and the most useful content (the return payload) is front-loaded. It is a grammatical fragment with no verb, which slightly weakens its standalone readability.

Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.

Completeness3/5

Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?

For a single-parameter read tool with readOnlyHint and no output schema, the description covers what comes back, which is the main gap it needed to fill. It omits error/empty-report behavior and any hint that 'latest scores' may reflect a prior verify_clone run, leaving some agent-relevant context unstated.

Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.

Parameters3/5

Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?

There is a single parameter with 100% schema description coverage ('Output directory of a previous clone'), so the baseline is 3. The description does not reference outDir or clarify path format/relative-vs-absolute semantics beyond what the schema states.

Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.

Purpose4/5

Does the description clearly state what the tool does and how it differs from similar tools?

The description names the resource (a clone's report) and enumerates its contents — pages, targets, per-width scores, diff image paths, worst regions — which is specific enough to separate it from clone_website and verify_clone, which perform actions rather than read a stored artifact. It stops short of an explicit verb ('returns/reads'), framing the purpose as a content list rather than an action.

Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.

Usage Guidelines2/5

Does the description explain when to use this tool, when not to, or what alternatives exist?

There is no statement of when to call this versus clone_website or verify_clone, and no prerequisite that a prior clone must exist (that constraint lives only in the outDir schema description). An agent must infer the usage context entirely from the tool name and sibling list.

Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.

verify_cloneVerify a cloneA

Re-score an existing clone against the original site (e.g. after refactoring the generated components). Use targets ["next"] or ["astro"] to build and score a generated project. A score drop means the refactor changed rendering.

NameRequiredDescriptionDefault
outDirYesOutput directory of a previous clone
widthsNoViewport widths (default 1440, 390)
targetsNoWhat to score (default preview)

TDQS

A4.3/5.0
Behavior4/5

Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?

Annotations declare readOnlyHint=false and openWorldHint=true, and the description is consistent: 'build and score' signals a real build that writes output and hits the site. It also adds interpretive value by stating 'A score drop means the refactor changed rendering.' It omits practical traits such as cost/time or where results are stored.

Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.

Conciseness4/5

Is the description appropriately sized, front-loaded, and free of redundancy?

Three short sentences, front-loaded with the core action before the target guidance and the interpretation note. Slightly dense quoting of enum values ('["next"]' / '["astro"]') duplicates schema detail rather than earning its space.

Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.

Completeness4/5

Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?

With no output schema, the description still covers purpose, use case, target meaning, and how to read results. The remaining gap is whether the run produces an artifact consumable by read_report, which an agent would want to know given that sibling.

Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.

Parameters4/5

Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?

Schema coverage is 100%, so the baseline is 3, but the description genuinely clarifies the vague 'targets' field by explaining that 'next'/'astro' build and score a generated project versus the default preview scoring. It says nothing about outDir or widths beyond the schema, so it is a modest but real addition.

Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.

Purpose5/5

Does the description clearly state what the tool does and how it differs from similar tools?

States a specific verb and resource ('Re-score an existing clone against the original site'), which cleanly separates it from the sibling that creates clones and the one that reads reports. The parenthetical use case ('after refactoring the generated components') further pins down intent.

Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.

Usage Guidelines4/5

Does the description explain when to use this tool, when not to, or what alternatives exist?

Gives a concrete trigger for using it ('after refactoring the generated components') and explains the targets choice for building a generated project. It does not explicitly name when not to use it or point at a sibling alternative, so it stops short of a 5.

Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.

Tool Schema Changelog

Recent tool additions, removals, and schema changes observed during successful MCP inspections.

  1. 1 tool updatev0.3.0
    • Changedclone_website1 field changed
      • changedInput schema / properties / url / description
        Previous value: -"Page to clone, e.g. https://example.com"New value: +"Page to clone, e.g. https://gole.codes"
  2. 1 tool updatev0.2.0
    • Changedclone_website1 field changed
      • addedInput schema / properties / styling
        Added value: +{
        +  "description": "css keeps the original stylesheet (default); tailwind converts class rules to Tailwind utilities wherever that renders identically and keeps the rest as CSS",
        +  "enum": [
        +    "css",
        +    "tailwind"
        +  ],
        +  "type": "string"
        +}
  3. 3 tool updatesv0.1.0
    • First observedclone_website
    • First observedread_report
    • First observedverify_clone

TDQS

A3.8/5.0

Scored across 3 tools

Disambiguation4/5

clone_website and verify_clone both produce scores, which is a slight overlap, but the descriptions clearly separate creating a new clone from re-scoring an existing one. read_report is cleanly distinct as a read-only manifest lookup.

Naming Consistency5/5

All three tools follow a consistent verb_noun snake_case pattern: clone_website, read_report, verify_clone. Predictable and easy to scan.

Tool Count5/5

Three tools map precisely onto the create/read/verify workflow of a cloning service. Nothing feels padded and the scope is tight for a specialized pipeline.

Completeness4/5

The core lifecycle (create clone, inspect report, re-verify after refactor) is fully covered. Minor gaps exist around housekeeping, such as listing or deleting existing clones, but agents can work around these via paths.

Maintenance

ActivityMaintained
ResponsivenessResponsive

Related MCP Connectors

Related MCP Servers

  • A
    license
    A
    quality
    A
    maintenance
    Analyzes and extracts design tokens, assets, and layout from live websites to enable AI clients to faithfully replicate them, with tools for screenshotting, component inspection, and pixel-diff verification.
    14
    6 npm
    4
    MIT
  • A
    license
    Not graded
    quality
    C
    maintenance
    Enables copying any component from a live web page as clean, self-contained HTML or JSX from inside a coding agent. Renders pages in a real browser to capture computed styles and resolved layout, with configurable styling formats and caching.
    0
    MIT