ditto.site
ion-design · Programación
ditto.site es un clonador de webs de código abierto con licencia MIT que convierte cualquier URL pública en un proyecto Next.js o Vite React funcional y dividido en componentes. No le pide a un modelo de lenguaje que adivine tu marcado: captura lo que el navegador renderiza de verdad y genera una base de código determinista, casi siempre en unos cinco minutos. Puedes alojar todo el proceso por tu cuenta, llamar a la API REST alojada o conectarlo a un agente mediante su servidor MCP, y en todos los casos no cuesta nada. Difícil discutirlo.
Acerca de ditto.site
Qué es ditto.site
ditto.site es una herramienta de web a código y un generador de código Next.js pensado para desarrolladores que quieren un punto de partida real y mantenible, no un lienzo en blanco. Le señalas una página activa y escribe un proyecto nuevo a partir del resultado renderizado, así que no necesitas el código fuente original ni un repositorio existente. La salida no es un único archivo gigante: la herramienta divide el DOM repetido en componentes, separa las regiones limpias en secciones y te entrega código tipado y tokenizado sobre el que puedes seguir trabajando.
La idea central es el determinismo. Muchos clonadores de webs con IA envían tu página a un LLM y esperan que el resultado se parezca lo suficiente. ditto.site ejecuta un proceso de captura a código, de modo que la misma captura congelada siempre produce una app estable byte a byte. Nada de conjeturas. Según el proyecto, también extrae el sistema de diseño que hay detrás de la página, con tokens, tipografías, interacciones, animación, puntos de ruptura y secciones.
El límite principal es el alcance. Clona URL públicas con las que tengas derecho a trabajar, y en el fondo es una herramienta para desarrolladores, así que estarás cómodo ejecutando comandos npm, gestionando una clave de API o desempaquetando un mapa de archivos JSON. No es para todos. Si buscas un producto acabado con editor visual y alojamiento incluidos, esto no lo es.
Primeros pasos
- Entra en el sitio de ditto.site y solicita una clave de API alojada con tu correo, o clona el repositorio y ejecuta el proceso en tu propia máquina.
- Verifica tu correo, copia la clave
dtto_live_...de un solo uso y guárdala en una variable de entorno comoDITTO_API_KEY. - Envía una URL pública al endpoint de la API REST mediante POST con tus opciones preferidas, por ejemplo el framework
nexty el estilotailwind. - Consulta el estado del trabajo hasta que termine bien y luego extrae el mapa de archivos devuelto en un directorio de proyecto con la herramienta oficial.
- Ejecuta tus comandos habituales de instalación y desarrollo dentro del nuevo proyecto y empieza a construir sobre él.
Información del producto
Un vistazo rápido a los precios, las plataformas compatibles y el rendimiento de ditto.site.
Ideal para
Los usuarios, tareas y casos de uso en los que esta herramienta encaja mejor.
Usuarios
- Desarrolladores front-end
- Creadores de apps con IA
- Equipos que evalúan una web existente
Tareas
- Convertir una landing en código Next.js
- Prototipar a partir de un diseño de referencia
- Montar un flujo de trabajo con agentes internos
Casos de uso
- Arrancar un proyecto nuevo para un cliente
- Reconstruir una página pública antigua
- Migrar un diseño a una librería de componentes
Funciones clave
Proceso determinista de captura a código
ditto.site no apunta un LLM a tu página con la esperanza de que salga bien. Captura lo que el navegador renderizó y compila esa captura congelada en un proyecto, así que la misma entrada da siempre una salida estable byte a byte. Misma entrada, misma salida. Esa consistencia importa cuando construyes sobre el resultado o vuelves a generarlo tras un cambio.
Salida en Next.js y Vite dividida en componentes
La herramienta divide el DOM repetido en componentes y separa las regiones limpias en secciones, y luego genera un proyecto real en lugar de un único archivo monolítico. Nada de un archivo gigante que desenredar. Puedes pedir Next.js App Router por defecto o Vite React cuando encaje mejor con tu stack. El resultado está tipado y tokenizado, así que encaja en tu flujo habitual.
Tres formas de ejecutarlo
Eliges el punto de entrada que encaje con tu manera de construir. Clona el repositorio y aloja todo el proceso bajo la licencia MIT, envía una URL a la API REST alojada y olvídate de la infraestructura, o conecta el servidor MCP para que cualquier agente clone como una herramienta. Las tres comparten el mismo motor determinista por debajo. Cuál te conviene depende de tu montaje.
Extracción del sistema de diseño
Más allá del marcado, ditto.site saca el sistema de diseño de la página: tokens de diseño, tipografías web, estados hover y focus, menús desplegables, acordeones y animación declarativa. También captura puntos de ruptura y secciones, junto con metadatos SEO, JSON-LD y sitemaps. Eso te da material editable para el estilo, no solo una instantánea estática.
Integración con agentes y API
El endpoint alojado en api.ditto.site gestiona los trabajos de clonación por REST y devuelve un mapa de archivos con cada ruta relativa de la app como clave. El servidor MCP en api.ditto.site/mcp te permite dar a Claude, Cursor o un bucle de construcción personalizado una herramienta de clonación directamente. Para equipos que automatizan su montaje, es la vía más rápida para meter la clonación en un proceso.
Código abierto bajo MIT
Todo el proyecto tiene licencia MIT y se construye en abierto, así que puedes leer cada línea, enviar un PR y moldear cómo evoluciona. Alojarlo por tu cuenta significa que tus capturas y tu código generado se quedan en tu propia máquina, algo que encaja con equipos de hábitos de datos más estrictos. Tampoco hay muro de pago. No hay ningún plan de pago que esconda el motor principal.
Ventajas y desventajas
Ventajas
- Gratis y de código abierto bajo licencia MIT, sin un plan de pago que bloquee las funciones principales.
- La salida determinista hace que la misma captura produzca código estable y repetible.
- Divide las páginas en componentes y secciones en vez de un único archivo inmanejable.
- Puntos de entrada flexibles: alojamiento propio, API REST o servidor MCP para agentes.
- Extrae tokens de diseño, tipografías, animación y puntos de ruptura que de verdad puedes editar.
Desventajas
- Está pensado para desarrolladores, así que necesitas soltura con npm, claves de API y desempaquetar salidas JSON.
- Solo maneja URL públicas, y eres responsable de tener los derechos para clonar un sitio concreto.
- No hay editor visual ni alojamiento integrado, así que no reemplaza a un creador de sitios completo para quienes no programan.
Preguntas frecuentes
Convierte una URL pública en un proyecto Next.js o Vite React autocontenido. Captura lo que el navegador renderiza y lo compila en código tokenizado y dividido en componentes sobre el que puedes construir.
Contenido relacionado
Explora herramientas, habilidades y artículos relacionados con ditto.site.
Alternativas a ditto.site
Forefront
Forefront · ProgramaciónForefront es una plataforma web para construir con IA de código abierto. Te deja ajustar los principales modelos de lenguaje de código abierto con tus propios datos, evaluar cómo rinden y ejecutarlos a través de una API o exportarlos para alojarlos tú mismo. Los desarrolladores que quieren la comodidad de una plataforma cerrada pero insisten en ser dueños de sus modelos y sus datos son el público objetivo.
Startkit
StartKit.AI · ProgramaciónStartkit es un boilerplate para crear productos de SaaS con IA y wrappers de IA. Piénsalo como un boilerplate para startups de IA con las partes aburridas ya conectadas: autenticación, pagos con Stripe y Lemon Squeezy, límites de uso, correo transaccional y un kit de inicio de API de IA que habla con OpenAI, Anthropic, Groq o Llama. Clonas el repositorio, pones tu precio y te dedicas a la parte del producto por la que la gente paga de verdad. Está hecho con Next.js sobre React y Tailwind, así que buena parte del código boilerplate ya te resulta familiar.
Testim
Tricentis · ProgramaciónTestim es una plataforma de automatización de pruebas impulsada por IA para crear y ejecutar pruebas de extremo a extremo en aplicaciones web, móviles y Salesforce. Se apoya en el aprendizaje automático para mantener las pruebas estables cuando cambia una interfaz, así que los equipos dedican menos tiempo a reparar selectores rotos. No está nada mal para una herramienta de pruebas automatizadas que puedes empezar a usar hoy mismo. Creas pruebas grabando acciones en un navegador y luego añades JavaScript cuando necesitas más control. Es una opción sólida para equipos de QA con mucho trabajo.