Ditto : le cloneur de sites web déterministe open-source, code Next.js/Vite en 5 minutes
https://github.com/ion-design/ditto.site
📌 DITTO est un cloneur de sites web déterministe et open-source (MIT) qui transforme n’importe quelle URL en code Next.js ou Vite propre et componentisé, en moins de 5 minutes, sans LLM ni approximation.
Ditto ne fait pas appel à un modèle de langage pour « deviner » le rendu. L’outil analyse le DOM, extrait les tokens de design, les polices, les interactions, les animations, les breakpoints, et reconstruit une arborescence de composants TypeScript typés et maintenables. Le résultat est déterministe : deux clonages du même site produisent exactement le même code.
Trois modes d’utilisation sont disponibles. En open source, le pipeline complet tourne en local avec une simple commande npm run clone -- https://example.com. L’API REST hébergée permet d’intégrer le clonage dans un flux CI/CD ou un builder : on POST une URL, on suit les événements en temps réel (capture, génération, vérification), et on récupère le projet fini. Enfin, un serveur MCP permet de brancher Ditto directement dans Claude, Cursor ou n’importe quel agent, via une configuration JSON.
Points clés à retenir sur Ditto :
- 🎯 Déterministe : aucun LLM, résultat identique à chaque exécution, pas de surprise
- ⚡ Rapide : capture → génération → vérification en moins de 5 minutes
- 🧩 Code maintenable : composants extraits, sections isolées, modèle de contenu éditable, tokens de design explicités
- 🔧 Framework au choix : Next.js ou Vite, Tailwind v4 ou CSS, TypeScript natif
- 🆓 100 % open source : licence MIT, auto-hébergement possible, code lisible et forkable
- 🛠️ Trois entrées : CLI open source, API REST, serveur MCP pour les agents
- 📦 Fidélité élevée : hover/focus, menus dropdown, accordéons, animations déclaratives, polices web, SEO, JSON-LD, sitemaps, responsive
Le projet est développé par ion-design et compte plus de 1 200 étoiles sur GitHub. La page d’accueil précise que Ditto est le « premier pas parfait pour les builders d’applications IA » : au lieu de partir d’un canvas vide, chaque nouveau client reçoit un clone fidèle et fonctionnel d’un site existant, en vrai code prêt à modifier.
Au final, Ditto résout un problème concret : récupérer la structure, le design et l’interactivité d’un site existant sans passer par du scraping fragile ou une capture d’écran. Pour un développeur qui veut s’inspirer d’un design, migrer un site vers un framework moderne, ou donner un point de départ réaliste à un agent de code, Ditto livre un projet TypeScript complet et maintenable en quelques minutes.
