ditto.site
ditto.site è un cloner di siti web deterministico, open-source, con licenza MIT, che trasforma qualsiasi URL pubblico in codice Next.js o Vite pulito e componentizzato, tipicamente in circa 5 minuti, senza fare affidamento sulle congetture di LLM.
https://ditto.site/?ref=producthunt&utm_source=aipure
Informazioni sul Prodotto
Aggiornato:Jul 23, 2026
Cos'è ditto.site
ditto.site è uno strumento deterministico da "sito web a codice" che genera un'applicazione web TypeScript autonoma da ciò che una pagina target renderizza nel browser. Invece di aver bisogno dell'accesso al repository sorgente di un sito, si fornisce un URL pubblico e ditto produce un progetto manutenibile (Next.js o Vite) con componenti strutturati e stili (ad esempio, Tailwind). Il progetto è open source (MIT) e può essere utilizzato tramite auto-hosting, un'API REST ospitata o un server MCP progettato per i flussi di lavoro degli agenti. ditto.site enfatizza un output coerente e stabile ed è inteso per essere utilizzato solo dove si hanno i diritti di ispezionare, copiare, trasformare e operare sul contenuto target.
Caratteristiche principali di ditto.site
ditto.site è un cloner di siti web deterministico, open-source e con licenza MIT che trasforma un URL pubblico in un'applicazione web TypeScript (Next.js o Vite) autonoma e manutenibile in pochi minuti. Invece di utilizzare una "migliore ipotesi" basata su LLM, esegue una pipeline stabile che cattura ciò che una pagina renderizza nel browser, quindi genera codice pulito e componentizzato con sistemi di design estratti (token, font, breakpoint), interazioni (hover/focus, menu a discesa, fisarmoniche, movimento) e artefatti SEO pronti per la produzione (metadati, JSON-LD, sitemap). Può essere utilizzato tramite strumenti open-source auto-ospitati, un'API REST ospitata o un server MCP per flussi di lavoro di agenti.
Pipeline di clonazione deterministica: Produce output veloci, stabili e ripetibili (cattura → genera → verifica) senza fare affidamento sull'interpretazione non deterministica di LLM.
Generazione di codice da URL ad app: Converte una pagina web pubblica in un progetto TypeScript fresco e autonomo basato su ciò che la pagina renderizza in un browser, senza richiedere il repository sorgente originale.
Output del framework: Next.js o Vite: Emette uno scaffold di applicazione reale che puoi eseguire ed estendere, scegliendo Next.js o Vite a seconda del tuo stack e delle esigenze di deployment.
Codice manutenibile e componentizzato: Evita il "file gigante unico" dividendo il DOM ripetuto in componenti, sollevando le regioni in sezioni ed estraendo un modello di contenuto modificabile.
Estrazione del sistema di design: Estrae token, font, breakpoint, struttura del layout e movimento/interazioni per preservare l'aspetto e la sensazione mantenendo lo stile modificabile.
Percorsi di integrazione multipli (OSS, API, MCP): Esegui localmente/auto-ospita (MIT), chiama l'API REST ospitata per mettere in coda/interrogare i lavori e scaricare i risultati, oppure esponi la clonazione come strumento agli agenti tramite un server MCP.
Casi d'uso di ditto.site
Ricostruzioni/migrazioni di agenzie o studi: Ricrea un sito di marketing esistente in codice Next.js/Vite pulito come punto di partenza per riprogettazioni, lavori sulle prestazioni o integrazione CMS.
Prototipazione per ricerche competitive/di mercato: Genera repliche fedeli e modificabili di pagine accessibili pubblicamente (quando si hanno i diritti di ispezionare/trasformare) per studiare modelli di layout, IA e sistemi di design.
Modelli di onboarding per costruttori di app AI: Fornisci ai nuovi clienti una base di codice reale che corrisponda al loro sito attuale, sostituendo il problema della "tela bianca" con un progetto iniziale manutenibile.
Passaggio di consegne ingegneristico dalla "verità renderizzata": Quando la fonte originale non è disponibile, produci una base di codice funzionante dalla pagina renderizzata per accelerare la documentazione interna, i refactoring o la modernizzazione.
Flussi di lavoro di generazione di siti assistiti da agenti: Collega ditto a Claude/Cursor/agenti personalizzati tramite MCP in modo che i cicli di build automatizzati possano clonare, modificare e iterare su progetti reali.
Base di replica del sito pronta per la SEO: Utilizza i metadati generati, JSON-LD e le sitemap come base per ricostruzioni che preservano la SEO prima di ulteriori ottimizzazioni.
Vantaggi
Output deterministici e coerenti adatti per flussi di lavoro ripetibili e automazione.
Genera progetti TypeScript Next.js/Vite manutenibili e componentizzati anziché semplici dump HTML.
Uso flessibile: open source auto-ospitato, API REST ospitata o MCP per strumenti di agenti.
Estrae token di design, interazioni e artefatti SEO per preservare la fedeltà e accelerare l'iterazione.
Svantaggi
Appropriato solo quando si hanno i diritti di ispezionare/copiare/trasformare il contenuto di destinazione; l'uso improprio può creare problemi legali/etici.
La fedeltà dell'output è limitata a ciò che può essere catturato dalla pagina renderizzata; la logica complessa dell'app/i backend non vengono intrinsecamente ricostruiti.
Potrebbe comunque richiedere una pulizia o un adattamento manuale per contenuti dinamici, flussi di autenticazione o integrazioni specifiche del sito.
Come usare ditto.site
1) Scegli come vuoi usare Ditto: Ditto offre tre punti di ingresso che utilizzano lo stesso motore deterministico: (a) Auto-hosting open-source (esegui l'intera pipeline localmente), (b) API REST ospitata (POST un URL, controlla lo stato del lavoro, quindi scarica l'output), o (c) server MCP (collega Ditto a un agente come Claude/Cursor).
2) Usa Ditto tramite l'API REST ospitata (il percorso più rapido): Vai su https://www.ditto.site/api-key e ottieni una chiave API. Usa l'endpoint ospitato per inviare un URL pubblico, quindi controlla il lavoro finché non si completa e infine scarica il progetto generato (Next.js App Router per impostazione predefinita, o Vite React quando richiesto).
3) Usa Ditto tramite MCP (per flussi di lavoro degli agenti): Ottieni una chiave API, quindi aggiungi Ditto come server MCP nella configurazione del tuo agente/client usando l'URL MCP e il tuo token Bearer. Esempio di configurazione: { "mcpServers": { "ditto": { "url": "https://api.ditto.site/mcp", "headers": { "Authorization": "Bearer ${DITTO_API_KEY}" } } } }
4) Auto-host Ditto (esegui la pipeline localmente): Clona il repository open-source e installa le dipendenze: `gh repo clone ion-design/ditto.site` quindi `cd ditto.site && npm install`.
5) Esegui un lavoro di clonazione locale contro un URL: Dal repository, esegui il comando di clonazione e passa l'URL di destinazione: `npm run clone -- https://example.com` (sostituisci con il sito che sei autorizzato a clonare).
6) Trasforma l'output di clonazione di Ditto in un progetto su disco (decompressione): Usa il decompressore ufficiale dal repository estratto: `npm run unpack -- <clone.json|-> <out-dir>`. Questo scrive file di testo e materializza risorse binarie (base64 in linea o recuperate tramite $DITTO_API_URL / $DITTO_API_KEY).
7) Apri e costruisci l'app generata: Apri la directory di output nel tuo editor. Ditto emette un vero progetto TypeScript con codice componentizzato (non un unico file gigante), inclusi token/design system estratti, font, interazioni, movimento, breakpoint e sezioni.
8) Sappi cosa Ditto cattura (e cosa potrebbe mancare): Ditto cattura ciò che il browser ha effettivamente renderizzato al momento dello snapshot. Contenuti che si caricano in seguito (scorrimento infinito, immagini a caricamento lento o contenuti attivati dall'interazione) potrebbero non essere inclusi: assicurati che il contenuto desiderato sia visibile prima di clonare.
9) Segui le migliori pratiche di utilizzo e diritti: Ditto è destinato all'apprendimento, alla prototipazione e ai casi d'uso autorizzati. Sei responsabile di assicurarti di avere il diritto di clonare e utilizzare il codice da qualsiasi pagina, rispettando il copyright, i termini di servizio e la proprietà intellettuale.
FAQ di ditto.site
ditto.site è un cloner di siti web deterministico open-source che trasforma un URL pubblico in una codebase pulita e componentizzata (Next.js o Vite) basata su ciò che la pagina renderizza in un browser.
Video di ditto.site
Articoli Popolari
Atoms: Una Piattaforma AI Multi-Agente Che Trasforma le Idee in Prodotti Pronti al Lancio
May 22, 2026
Nano Banana SBTI: Cos'è, come funziona e come usarlo nel 2026
Apr 15, 2026
Recensione di Atoms — Il builder di prodotti AI che ridefinisce la creazione digitale nel 2026
Apr 10, 2026
Kilo Claw: Come Distribuire e Utilizzare un Vero Agente AI "Fai-da-Te" (Aggiornamento 2026)
Apr 3, 2026
Ultimi Strumenti AI Simili a ditto.site
GPT Easy Web
GPT Easy Web è una piattaforma intuitiva alimentata dall'IA che consente agli utenti di costruire, personalizzare e gestire facilmente siti web attraverso interazioni in linguaggio naturale e strumenti automatizzati senza richiedere conoscenze di codifica.
AI Website Tool
AI Website Tool è un costruttore di siti web alimentato dall'AI che crea siti web professionali in pochi minuti generando automaticamente testi focalizzati sul business, immagini personalizzate e design reattivi con solo pochi clic.
Softgen
Softgen.ai è una piattaforma di generazione di progetti full-stack potenziata dall'IA che consente agli utenti di trasformare le loro idee in applicazioni web funzionali senza requisiti di codifica.
Webifier
Webifier è uno strumento potenziato dall'AI che trasforma i prompt testuali in pagine di atterraggio React completamente funzionali con codice pulito ed esportabile utilizzando NextJS14, TailwindCSS e componenti Shadcn.
Strumenti AI Popolari Come ditto.site
Adobe Express
Adobe Express è un'app di creazione di contenuti all-in-one alimentata dall'IA per creare facilmente post social, immagini, video, volantini e altro con modelli e risorse progettati professionalmente.
Hostinger
Hostinger è un fornitore di servizi di web hosting e domini che offre strumenti basati sull'intelligenza artificiale come Horizons che consente a chiunque di creare, modificare e pubblicare app web e siti web personalizzati senza programmare tramite una semplice interfaccia di chat.
GPT Engineer
GPT Engineer è uno strumento di sviluppo software alimentato dall'IA che consente a chiunque di costruire applicazioni web chiacchierando con un ingegnere IA.
Manus Shopify Connector
Manus Shopify Connector ti consente di costruire un negozio basato su Shopify, gestire il tuo catalogo e generare campagne basate sui dati da un'unica chat, utilizzando le API di Shopify con accesso con ambito OAuth e il checkout di Shopify.