ditto.site
ion-design · Programmation
ditto.site est un cloneur de sites open source sous licence MIT qui transforme n'importe quelle URL publique en un projet Next.js ou Vite React fonctionnel et découpé en composants. Au lieu de demander à un modèle de langage de deviner votre balisage, il capture ce que le navigateur affiche réellement et produit une base de code déterministe, le plus souvent en cinq minutes environ. Vous pouvez héberger tout le processus vous-même, appeler l'API REST hébergée ou le brancher à un agent via son serveur MCP, et dans tous les cas cela ne coûte rien. Difficile de contester.
À propos de ditto.site
Qu'est-ce que ditto.site
ditto.site est un outil de site vers code et un générateur de code Next.js conçu pour les développeurs qui veulent un vrai point de départ maintenable plutôt qu'une page blanche. Indiquez-lui une page en ligne et il écrit un projet neuf à partir du rendu, si bien que vous n'avez besoin ni du code source d'origine ni d'un dépôt existant. Le résultat n'est pas un seul fichier géant : l'outil découpe le DOM répété en composants, isole les régions propres en sections et vous remet du code typé et tokenisé sur lequel vous pouvez continuer à travailler.
L'idée centrale, c'est le déterminisme. Beaucoup de cloneurs de sites par IA envoient votre page à un LLM en espérant que le résultat ressemble à peu près. ditto.site exécute un processus de capture vers code, si bien que la même capture figée produit toujours une app stable octet par octet. Aucune approximation. Selon le projet, il extrait aussi le système de design derrière la page, notamment les tokens, les polices, les interactions, les animations, les points de rupture et les sections.
La principale limite tient au périmètre. Il clone des URL publiques que vous avez le droit d'utiliser, et c'est avant tout un outil de développeur, donc vous serez à l'aise en lançant des commandes npm, en gérant une clé d'API ou en décompressant une carte de fichiers JSON. Ce n'est pas pour tout le monde. Si vous cherchez un produit fini avec éditeur visuel et hébergement intégrés, ce n'est pas cela.
Premiers pas
- Rendez-vous sur le site de ditto.site et demandez une clé d'API hébergée avec votre e-mail, ou clonez le dépôt et lancez le processus sur votre propre machine.
- Vérifiez votre e-mail, puis copiez la clé
dtto_live_...à usage unique et stockez-la dans une variable d'environnement commeDITTO_API_KEY. - Envoyez une URL publique à l'endpoint de l'API REST en POST avec vos options préférées, par exemple le framework
nextet le styletailwind. - Interrogez la tâche jusqu'à sa réussite, puis extrayez la carte de fichiers renvoyée dans un répertoire de projet avec l'outil officiel.
- Lancez vos commandes habituelles d'installation et de développement dans le nouveau projet et commencez à construire par-dessus.
Informations sur le produit
Aperçu des tarifs, des plateformes compatibles et des performances de ditto.site.
Idéal pour
Les utilisateurs, tâches et cas d'usage où cet outil convient le mieux.
Utilisateurs
- Développeurs front-end
- Créateurs d'apps IA
- Équipes qui évaluent un site existant
Tâches
- Transformer une landing page en code Next.js
- Prototyper à partir d'un design de référence
- Monter un flux de travail avec des agents internes
Cas d'usage
- Lancer un nouveau projet client
- Reconstruire une page publique ancienne
- Migrer un design vers une bibliothèque de composants
Fonctionnalités clés
Processus déterministe de capture vers code
ditto.site ne pointe pas un LLM vers votre page en espérant que ça passe. Il capture ce que le navigateur a affiché, puis compile cette capture figée en un projet, si bien que la même entrée donne toujours un résultat stable octet par octet. Même entrée, même sortie. Cette constance compte quand vous construisez par-dessus le résultat ou le régénérez après une modification.
Rendu Next.js et Vite découpé en composants
L'outil découpe le DOM répété en composants et isole les régions propres en sections, puis produit un vrai projet plutôt qu'un seul fichier monolithique. Pas de fichier géant à démêler. Vous pouvez demander Next.js App Router par défaut ou Vite React quand cela colle mieux à votre stack. Le résultat est typé et tokenisé, il s'intègre donc à votre flux habituel.
Trois façons de l'exécuter
Vous choisissez le point d'entrée qui correspond à votre façon de construire. Clonez le dépôt et hébergez tout le processus sous licence MIT, envoyez une URL à l'API REST hébergée et faites l'impasse sur l'infrastructure, ou connectez le serveur MCP pour que n'importe quel agent clone comme un outil. Les trois partagent le même moteur déterministe en dessous. Lequel vous convient dépend de votre installation.
Extraction du système de design
Au-delà du balisage, ditto.site extrait le système de design de la page : tokens de design, polices web, états hover et focus, menus déroulants, accordéons et animations déclaratives. Il capture aussi les points de rupture et les sections, ainsi que les métadonnées SEO, le JSON-LD et les sitemaps. Vous obtenez ainsi une matière modifiable pour le style, pas seulement un instantané figé.
Intégration agent et API
L'endpoint hébergé sur api.ditto.site gère les tâches de clonage en REST et renvoie une carte de fichiers indexée par chaque chemin relatif de l'app. Le serveur MCP sur api.ditto.site/mcp vous permet de donner directement à Claude, Cursor ou une boucle de construction personnalisée un outil de clonage. Pour les équipes qui automatisent leur installation, c'est le moyen le plus rapide d'intégrer le clonage à un pipeline.
Open source sous MIT
Tout le projet est sous licence MIT et construit ouvertement, vous pouvez donc lire chaque ligne, envoyer une PR et façonner son évolution. L'hébergement personnel signifie que vos captures et votre code généré restent sur votre machine, ce qui convient aux équipes aux habitudes de données plus strictes. Pas de paywall non plus. Aucune offre payante ne cache le moteur principal.
Avantages et inconvénients
Avantages
- Gratuit et open source sous licence MIT, sans offre payante qui verrouille les fonctions principales.
- Le rendu déterministe fait que la même capture produit un code stable et reproductible.
- Découpe les pages en composants et sections au lieu d'un seul fichier ingérable.
- Points d'entrée souples : hébergement personnel, API REST ou serveur MCP pour les agents.
- Extrait des tokens de design, polices, animations et points de rupture que vous pouvez vraiment modifier.
Inconvénients
- Destiné aux développeurs, il vous faut donc être à l'aise avec npm, les clés d'API et la décompression de sorties JSON.
- Il ne gère que les URL publiques, et vous êtes responsable du droit de cloner un site donné.
- Pas d'éditeur visuel ni d'hébergement intégré, il ne remplace donc pas un créateur de sites complet pour les non-développeurs.
Questions fréquentes
Il transforme une URL publique en un projet Next.js ou Vite React autonome. Il capture ce que le navigateur affiche et le compile en code tokenisé et découpé en composants sur lequel vous pouvez construire.
Contenus associés
Découvrez des outils, des compétences et des articles liés à ditto.site.
Alternatives à ditto.site
Forefront
Forefront · ProgrammationForefront est une plateforme web pour construire avec de l'IA open source. Elle vous laisse affiner les principaux modèles de langage open source sur vos propres données, évaluer leurs performances et les exécuter via une API ou les exporter pour les héberger vous-même. Les développeurs qui veulent le confort d'une plateforme fermée mais tiennent à rester propriétaires de leurs modèles et de leurs données sont le public visé ici.
Startkit
StartKit.AI · ProgrammationStartkit est un boilerplate pour créer des produits SaaS d'IA et des wrappers d'IA. Voyez-le comme un boilerplate de startup IA avec les parties ennuyeuses déjà branchées : authentification, paiements Stripe et Lemon Squeezy, limites d'usage, e-mail transactionnel et un kit de démarrage d'API IA qui parle à OpenAI, Anthropic, Groq ou Llama. Vous clonez le dépôt, fixez votre prix et attaquez la partie du produit pour laquelle les gens paient vraiment. Il repose sur Next.js au-dessus de React et Tailwind, donc une bonne partie du code boilerplate vous semble déjà familière.
Testim
Tricentis · ProgrammationTestim est une plateforme d'automatisation des tests dopée à l'IA, qui sert à créer et exécuter des tests de bout en bout sur des applications web, mobiles et Salesforce. Elle s'appuie sur l'apprentissage automatique pour garder les tests stables quand une interface change, alors les équipes passent moins de temps à réparer des sélecteurs cassés. Pas mal pour un outil de tests automatisés que vous pouvez utiliser dès aujourd'hui. Vous créez des tests en enregistrant des actions dans un navigateur, puis vous ajoutez du JavaScript quand vous avez besoin de plus de contrôle. C'est un choix solide pour une équipe QA bien occupée.