ditto.site
ditto.site est un cloneur de site web déterministe, open-source, sous licence MIT, qui transforme n'importe quelle URL publique en code Next.js ou Vite propre et componentisé—généralement en environ 5 minutes—sans se fier aux conjectures des LLM.
https://ditto.site/?ref=producthunt&utm_source=aipure
Informations sur le produit
Mis à jour:Jul 23, 2026
Qu'est-ce que ditto.site
ditto.site est un outil déterministe "site web vers code" qui génère une application web TypeScript autonome à partir de ce qu'une page cible rend dans le navigateur. Au lieu d'avoir besoin d'accéder au dépôt source d'un site, vous fournissez une URL publique et ditto produit un projet maintenable (Next.js ou Vite) avec des composants structurés et un style (par exemple, Tailwind). Le projet est open source (MIT) et peut être utilisé via l'auto-hébergement, une API REST hébergée, ou un serveur MCP conçu pour les flux de travail d'agents. ditto.site met l'accent sur une sortie cohérente et stable et est destiné à être utilisé uniquement lorsque vous avez les droits d'inspecter, de copier, de transformer et d'opérer sur le contenu cible.
Caractéristiques principales de ditto.site
ditto.site est un cloneur de site web déterministe, open-source et sous licence MIT, qui transforme une URL publique en une application web TypeScript autonome et maintenable (Next.js ou Vite) en quelques minutes. Au lieu d'utiliser une estimation basée sur un LLM, il exécute un pipeline stable qui capture ce qu'une page rend dans le navigateur, puis génère un code propre et componentisé avec des systèmes de conception extraits (jetons, polices, points d'arrêt), des interactions (survol/focus, menus déroulants, accordéons, mouvement) et des artefacts SEO prêts pour la production (métadonnées, JSON-LD, sitemaps). Il peut être utilisé via des outils open-source auto-hébergés, une API REST hébergée ou un serveur MCP pour les flux de travail d'agents.
Pipeline de clonage déterministe: Produit des sorties rapides, stables et reproductibles (capture → génération → vérification) sans dépendre de l'interprétation non déterministe des LLM.
Génération de code URL-vers-application: Convertit une page web publique en un nouveau projet TypeScript autonome basé sur ce que la page rend dans un navigateur – aucun dépôt de source originale n'est requis.
Sortie de framework : Next.js ou Vite: Émet un véritable squelette d'application que vous pouvez exécuter et étendre, en choisissant Next.js ou Vite en fonction de votre pile et de vos besoins de déploiement.
Code maintenable et componentisé: Évite le "fichier géant" en divisant le DOM répété en composants, en élevant les régions en sections et en extrayant un modèle de contenu éditable.
Extraction de système de conception: Extrait les jetons, les polices, les points d'arrêt, la structure de la mise en page et les mouvements/interactions pour préserver l'apparence tout en gardant le style éditable.
Plusieurs chemins d'intégration (OSS, API, MCP): Exécutez localement/auto-hébergez (MIT), appelez l'API REST hébergée pour mettre en file d'attente/interroger les tâches et télécharger les résultats, ou exposez le clonage comme un outil aux agents via un serveur MCP.
Cas d'utilisation de ditto.site
Reconstructions/migrations d'agences ou de studios: Recréez un site marketing existant en code Next.js/Vite propre comme point de départ pour des refontes, des travaux de performance ou l'intégration de CMS.
Prototypage de recherche concurrentielle/de marché: Générez des répliques fidèles et éditables de pages accessibles au public (lorsque vous avez les droits d'inspecter/transformer) pour étudier les modèles de mise en page, l'IA et les systèmes de conception.
Modèles d'intégration de constructeurs d'applications IA: Donnez aux nouveaux clients une base de code réelle qui correspond à leur site actuel, remplaçant le problème de la toile vierge par un projet de démarrage maintenable.
Transfert d'ingénierie à partir de la "vérité rendue": Lorsque la source originale n'est pas disponible, produisez une base de code fonctionnelle à partir de la page rendue pour accélérer la documentation interne, les refactorisations ou la modernisation.
Flux de travail de génération de sites assistés par agent: Connectez ditto à Claude/Cursor/agents personnalisés via MCP afin que les boucles de construction automatisées puissent cloner, modifier et itérer sur de vrais projets.
Base de réplication de site prête pour le SEO: Utilisez les métadonnées générées, JSON-LD et les sitemaps comme base pour des reconstructions préservant le SEO avant une optimisation ultérieure.
Avantages
Sorties déterministes et cohérentes adaptées aux flux de travail reproductibles et à l'automatisation.
Génère des projets TypeScript Next.js/Vite maintenables et componentisés plutôt que des dumps HTML plats.
Utilisation flexible : auto-hébergement open source, API REST hébergée ou MCP pour les outils d'agents.
Extrait les jetons de conception, les interactions et les artefacts SEO pour préserver la fidélité et accélérer l'itération.
Inconvénients
N'est approprié que lorsque vous avez les droits d'inspecter/copier/transformer le contenu cible ; une mauvaise utilisation peut créer des problèmes juridiques/éthiques.
La fidélité de la sortie est limitée à ce qui peut être capturé à partir de la page rendue ; la logique d'application complexe/les backends ne sont pas intrinsèquement reconstruits.
Peut encore nécessiter un nettoyage manuel ou une adaptation pour le contenu dynamique, les flux d'authentification ou les intégrations spécifiques au site.
Comment utiliser ditto.site
1) Choisissez comment vous souhaitez utiliser Ditto: Ditto offre trois points d'entrée qui utilisent le même moteur déterministe : (a) Auto-hébergement open-source (exécutez l'ensemble du pipeline localement), (b) API REST hébergée (POST une URL, vérifiez l'état du travail, puis téléchargez la sortie), ou (c) Serveur MCP (connectez Ditto à un agent comme Claude/Cursor).
2) Utilisez Ditto via l'API REST hébergée (le chemin le plus rapide): Allez sur https://www.ditto.site/api-key et obtenez une clé API. Utilisez le point de terminaison hébergé pour soumettre une URL publique, puis vérifiez le travail jusqu'à ce qu'il soit terminé, et enfin récupérez le projet généré (Next.js App Router par défaut, ou Vite React sur demande).
3) Utilisez Ditto via MCP (pour les flux de travail d'agents): Obtenez une clé API, puis ajoutez Ditto comme serveur MCP dans la configuration de votre agent/client en utilisant l'URL MCP et votre jeton Bearer. Exemple de configuration : { "mcpServers": { "ditto": { "url": "https://api.ditto.site/mcp", "headers": { "Authorization": "Bearer ${DITTO_API_KEY}" } } } }
4) Auto-hébergez Ditto (exécutez le pipeline localement): Clonez le dépôt open-source et installez les dépendances : `gh repo clone ion-design/ditto.site` puis `cd ditto.site && npm install`.
5) Exécutez un travail de clonage local sur une URL: Depuis le dépôt, exécutez la commande de clonage et passez l'URL cible : `npm run clone -- https://example.com` (remplacez par le site que vous êtes autorisé à cloner).
6) Transformez la sortie de clonage de Ditto en un projet sur disque (décompressez): Utilisez le décompresseur officiel du dépôt extrait : `npm run unpack -- <clone.json|-> <out-dir>`. Cela écrit des fichiers texte et matérialise des actifs binaires (base64 en ligne ou récupérés via $DITTO_API_URL / $DITTO_API_KEY).
7) Ouvrez et construisez l'application générée: Ouvrez le répertoire de sortie dans votre éditeur. Ditto émet un véritable projet TypeScript avec du code componentisé (pas un seul fichier géant), y compris des jetons/système de conception extraits, des polices, des interactions, des mouvements, des points d'arrêt et des sections.
8) Sachez ce que Ditto capture (et ce qu'il pourrait manquer): Ditto capture ce que le navigateur a réellement rendu au moment de l'instantané. Le contenu qui se charge plus tard (défilement infini, images chargées paresseusement ou contenu déclenché par l'interaction) peut ne pas être inclus—assurez-vous que le contenu que vous souhaitez est visible avant de cloner.
9) Suivez les meilleures pratiques d'utilisation et de droits: Ditto est destiné à l'apprentissage, au prototypage et aux cas d'utilisation autorisés. Vous êtes responsable de vous assurer que vous avez le droit de cloner et d'utiliser le code de n'importe quelle page, en respectant les droits d'auteur, les conditions de service et la propriété intellectuelle.
FAQ de ditto.site
ditto.site est un cloneur de site web déterministe open-source qui transforme une URL publique en une base de code propre et "componentisée" (Next.js ou Vite) basée sur ce que la page rend dans un navigateur.
Vidéo de ditto.site
Articles populaires
Atoms : Une plateforme d'IA multi-agents qui transforme les idées en produits prêts à être lancés
May 22, 2026
Nano Banana SBTI : Qu'est-ce que c'est, comment ça marche et comment l'utiliser en 2026
Apr 15, 2026
Atoms : L'outil de création de produits IA qui redéfinit la création numérique en 2026
Apr 10, 2026
Kilo Claw : Comment déployer et utiliser un véritable agent d'IA "Faites-le pour vous" (Mise à jour 2026)
Apr 3, 2026
Derniers outils d'IA similaires à ditto.site
GPT Easy Web
GPT Easy Web est une plateforme conviviale alimentée par l'IA qui permet aux utilisateurs de créer, personnaliser et gérer facilement des sites web grâce à des interactions en langage naturel et des outils automatisés sans nécessiter de connaissances en codage.
AI Website Tool
L'outil de site Web AI est un constructeur de sites Web alimenté par l'IA qui crée des sites Web professionnels en quelques minutes en générant automatiquement du texte axé sur les affaires, des visuels personnalisés et des conceptions réactives en quelques clics.
Softgen
Softgen.ai est une plateforme génératrice de projets full-stack alimentée par l'IA qui permet aux utilisateurs de transformer leurs idées en applications web fonctionnelles sans exigences de codage.
Webifier
Webifier est un outil alimenté par l'AI qui transforme des invites textuelles en pages de destination React entièrement fonctionnelles avec un code propre et exportable utilisant NextJS14, TailwindCSS et des composants Shadcn.
Outils d'IA populaires comme ditto.site
Adobe Express
Adobe Express est une application de création de contenu tout-en-un alimentée par l'IA pour créer facilement des publications sociales, des images, des vidéos, des flyers et plus encore avec des modèles et des ressources conçus professionnellement.
Hostinger
Hostinger est un fournisseur de services d'hébergement web et de domaine offrant des outils basés sur l'IA comme Horizons qui permettent à quiconque de créer, de modifier et de publier des applications web et des sites web personnalisés sans codage via une simple interface de chat.
GPT Engineer
GPT Engineer est un outil de développement logiciel alimenté par l'IA qui permet à quiconque de construire des applications web en discutant avec un ingénieur IA.
Manus Shopify Connector
Le connecteur Manus Shopify vous permet de créer une vitrine basée sur Shopify, de gérer votre catalogue et de générer des campagnes basées sur les données à partir d'un seul chat, en utilisant les API Shopify avec un accès limité par OAuth et le paiement Shopify.