dittu

Name: dittu
Author: Manish-Tamang

โดย Manish-Tamangรุ่น 0.3.0i★ –iรันบนเครื่อง

ชื่อใน registryio.github.Manish-Tamang/dittu

ติดตั้ง

ภาพรวม

คำอธิบายจากผู้ทำ (ภาษาอังกฤษตามต้นฉบับ)

Clone any website's frontend into Next.js or Astro and verify it with pixel diffs.

สามเสาของ PopNx MCP

สามเรื่องนี้ไม่รวมเป็นคะแนนเดียว เพราะความเห็น การวัด และความนิยม เป็นคนละเรื่องกัน

เสียงผู้ใช้iยังไม่มีรีวิวรีวิวเปิดพร้อมระบบบัญชีในขั้นถัดไป
ผลตรวจเบื้องต้นของเราiผ่าน 1 จาก 1 ข้อตรวจจากข้อมูลที่เปิดอยู่ ยังไม่ได้สแกนโค้ด
การใช้งานiยังใหม่มาก↓ 95/สัปดาห์ · ★ –

ใช้ทำอะไรได้

ตัวนี้ยังไม่ได้เรียบเรียงเป็นภาษาไทย ด้านล่างคือข้อเท็จจริงที่เราอ่านจาก registry

การเชื่อมต่อ: รันบนเครื่อง
ช่องทาง (transport): stdio
หมวด: เว็บและเบราว์เซอร์

ติดตั้ง

เลือกโปรแกรม AI ที่คุณใช้ แล้วคัดลอกค่าตั้งไปวาง

ก่อนติดตั้ง

ผลตรวจเบื้องต้น: ผ่าน 1 จาก 1 ข้อ
รันในเครื่องคุณด้วยสิทธิ์ของผู้ใช้คุณ (ไฟล์ อินเทอร์เน็ต แอปต่าง ๆ)
ทะเบียนไม่ได้ระบุ key ที่ต้องใส่

ต้องเตรียมก่อน

npmติดตั้ง Node.js (มีคำสั่ง npx) ในเครื่อง

คุณใช้แอปไหน

ClaudeClaude CodeCursorVS CodeChatGPT

เลือกแอปด้านบน เราจำไว้ให้ ครั้งหน้าปุ่มจะขึ้นว่า “ติดตั้งลง …”

เปิด Claude Desktop → Settings → Developer → Edit Config แล้ววางค่านี้ในไฟล์ claude_desktop_config.json

{
  "mcpServers": {
    "dittu": {
      "command": "npx",
      "args": [
        "-y",
        "@manishtamang/dittu",
        "mcp"
      ]
    }
  }
}

พิมพ์คำสั่งนี้ใน Terminal

claude mcp add dittu -- npx -y @manishtamang/dittu mcp

เปิดใน Cursor

หรือคัดลอกค่าตั้งเอง

วางในไฟล์ .cursor/mcp.json ของโปรเจกต์ หรือ ~/.cursor/mcp.json

{
  "mcpServers": {
    "dittu": {
      "command": "npx",
      "args": [
        "-y",
        "@manishtamang/dittu",
        "mcp"
      ]
    }
  }
}

เบราว์เซอร์จะถามก่อนเปิดแอป จากนั้นแอปแสดงค่าตั้งให้ตรวจแล้วกดยืนยัน ช่อง key เว้นว่างไว้ให้คุณใส่เอง

เปิดใน VS Code

หรือคัดลอกค่าตั้งเอง

วางในไฟล์ .vscode/mcp.json ของโปรเจกต์

{
  "servers": {
    "dittu": {
      "type": "stdio",
      "command": "npx",
      "args": [
        "-y",
        "@manishtamang/dittu",
        "mcp"
      ]
    }
  }
}

ตัวนี้รันในเครื่องคุณ แต่ ChatGPT ต่อได้เฉพาะ server บนอินเทอร์เน็ต ลองเลือกแอปอื่น

ตัวเลือกเก็บในคุกกี้บนเครื่องนี้ ไม่ต้องมีบัญชี

ค่าตั้งนี้สร้างจากข้อมูลใน registry ของผู้ทำ ถ้าไม่ตรงกับ README ให้เชื่อ README

ทำอะไรได้บ้าง

รันในเครื่องคุณ รายการเครื่องมือจะขึ้นในแอป AI หลังติดตั้ง

ผลตรวจเบื้องต้นi

เราตรวจจากข้อมูลที่ใครก็เปิดดูได้ ยังไม่ได้อ่านโค้ด ข้อที่ไม่เกี่ยวกับตัวนี้ไม่นับในตัวหาร · ตรวจเมื่อ 8 พ.ย. 2569

✓ ผ่าน
ตัวตนผู้ทำตรงกับ repo
ชื่อใน registry ยืนยันด้วยบัญชี GitHub Manish-Tamang ซึ่งเป็นเจ้าของ repo
… ยังไม่ตรวจ
ยังมีคนดูแล
ยังไม่ได้อ่านข้อมูล repo จาก GitHub
… ยังไม่ตรวจ
มีสัญญาอนุญาต (license)
ยังไม่ได้อ่านข้อมูล repo จาก GitHub
– ไม่เกี่ยว
endpoint ตอบ
ตัวนี้รันบนเครื่องคุณ ไม่มี endpoint บนอินเทอร์เน็ต
– ไม่เกี่ยว
ล็อกอินแบบ OAuth
ตัวนี้รันบนเครื่อง ใช้ค่าที่ตั้งในเครื่องแทน
… ยังไม่ตรวจ
คำอธิบายเครื่องมือไม่มีคำสั่งแอบแฝง
รันในเครื่องคุณ เราอ่านรายการเครื่องมือได้เฉพาะตัวที่มี endpoint บนอินเทอร์เน็ต

เทียบกับตัวอื่นในหมวด เว็บและเบราว์เซอร์i

ดาวมากกว่า 0% ของอีก 1381 ตัวในหมวดนี้
ส่งรุ่นใหม่เข้า registry ล่าสุดกว่า 76% ของอีก 1381 ตัวในหมวดนี้
ผลตรวจเบื้องต้นดีกว่าหรือเท่ากับ 100% ของอีก 1381 ตัวในหมวดนี้

เทียบกับทุก server ที่ยังใช้งานในหมวดนี้ทั้งทะเบียน ดาวนับเฉพาะเมื่อผู้ลงทะเบียนเป็นเจ้าของ repo

คำถามที่พบบ่อย

dittu ปลอดภัยไหม?

จากการตรวจเบื้องต้นของเรา ผ่าน 1 จาก 1 ข้อที่ตรวจได้ เรายังไม่ได้อ่านโค้ด ก่อนใส่กุญแจหรือ token ให้ดูว่า server ขอสิทธิ์อะไร และเลือกกุญแจที่ทำได้เท่าที่จำเป็น

ต้องใช้กุญแจหรือรหัสอะไรบ้าง?

registry ไม่ได้ระบุว่าต้องใช้กุญแจ แต่บางตัวจะขอให้ล็อกอินตอนใช้ครั้งแรก

ตัวนี้รันบนเครื่องหรือบนคลาวด์?

รันบนเครื่องของคุณ โปรแกรม AI จะเปิด server ขึ้นมาเองเมื่อใช้ ข้อมูลไม่ต้องผ่านเซิร์ฟเวอร์ของผู้ทำ (ยกเว้นตัวที่ไปเรียกบริการออนไลน์ต่อ)

ยังมีคนดูแลอยู่ไหม?

repo บน GitHub มีการแก้โค้ดล่าสุด – และส่งรุ่นล่าสุด (0.3.0) เข้า registry 10 วันที่ผ่านมา

ใช้กับโปรแกรมไหนได้บ้าง?

โปรแกรมที่รองรับ MCP เช่น Claude Desktop, Claude Code, Cursor และ VS Code ตัวนี้ต้องมี Node.js ในเครื่องด้วย

มีตัวไหนใช้แทนได้บ้าง?

ในหมวดเดียวกันมี Browser Use, Chrome DevTools MCP, MCP Server Browser

ตัวที่ใช้แทนได้

server หมวดเดียวกันจากผู้ทำคนอื่น เรียงตามดาว

อ่านการ์ด:↓ ดาวน์โหลดต่อสัปดาห์i★ ดาว GitHubiสามเสา: รีวิว · ผลตรวจ · การใช้งานiอัปเดต = วันที่ส่งรุ่นล่าสุดเข้า registryi

Browser Use

ให้ AI ทำงานบนเว็บแทนคุณ เช่น กรอกฟอร์ม ค้นหา และดึงข้อมูล ใช้เบราว์เซอร์บนคลาวด์ของผู้ทำหรือรันในเครื่องก็ได้

โดย browser-useใช้กันมาก↓ 1.6M/สัปดาห์★ 120.1Kอัปเดต 18 วันที่ผ่านมา

บนเครื่องหรือคลาวด์✓ browser-use.com

ติดตั้ง

Chrome DevTools MCP

ให้ AI ใช้เครื่องมือนักพัฒนาของ Chrome ตรวจหน้าเว็บ ดูว่าโหลดช้าตรงไหน และหาข้อผิดพลาด ทำโดยทีม Chrome DevTools

โดย ChromeDevToolsใช้กันมาก↓ 1.9M/สัปดาห์★ 54.8Kอัปเดต 17 วันที่ผ่านมา

รันบนเครื่อง

ติดตั้ง

MCP Server Browser

MCP server for browser use access

โดย bytedanceใช้กันมาก↓ 792/สัปดาห์★ 39.6Kอัปเดต 14 เดือนที่ผ่านมา

รันบนเครื่อง

ติดตั้ง

README จากผู้ทำ

เปิดอ่าน README

ส่วนนี้คัดจาก repo ของผู้ทำตามต้นฉบับ PopNx MCP ไม่ได้ตรวจหรือรับรองเนื้อหา ตัด HTML รูปภาพ และสคริปต์ออกแล้ว ลิงก์จะพาออกนอกเว็บ

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.

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

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:

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.
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.
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.
Download every asset from the same session and rewrite URLs.
Export to a static preview, a Next.js App Router project (JSX) and an Astro project, split into section components.
Replay motion: recorded scroll reveals, Framer Motion animate calls and loops run again through a 2 KB runtime.
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

Installation
CLI
MCP server
Architecture
Fidelity and benchmarks
Tailwind output
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.

Related projects

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

dittu

ภาพรวม

สามเสาของ PopNx MCP

ใช้ทำอะไรได้

ติดตั้ง

ก่อนติดตั้ง

ทำอะไรได้บ้าง

ผลตรวจเบื้องต้นi

ตัวตนผู้ทำตรงกับ repo

ยังมีคนดูแล

มีสัญญาอนุญาต (license)

endpoint ตอบ

ล็อกอินแบบ OAuth

คำอธิบายเครื่องมือไม่มีคำสั่งแอบแฝง

เทียบกับตัวอื่นในหมวด เว็บและเบราว์เซอร์i

คำถามที่พบบ่อย

ตัวที่ใช้แทนได้

Browser Use

Chrome DevTools MCP

MCP Server Browser

README จากผู้ทำ

dittu: Clone Any Website

Quick start

Set up your agent

Ask your agent

Use the terminal

Update dittu

How dittu works

What you can clone

Benchmarks

FAQ

Documentation

Disclaimer

Related projects

Contributing

License