ditto.site

ditto: El Clonador de Sitios Web Determinista para Desarrolladores Modernos

En el mundo del desarrollo web actual, la velocidad es esencial, pero no a costa de la calidad del código. Aquí es donde entra ditto, un clonador de sitios web determinista y de código abierto que está cambiando las reglas del juego. ditto permite apuntar a cualquier sitio web y recibir, en menos de cinco minutos, una copia fiel con código limpio y componentizado utilizando tecnologías modernas como Next.js o Vite.

¿Qué es ditto?

ditto se define como un clonador de sitios web determinista de código abierto. A diferencia de otras herramientas que intentan interpretar un sitio web mediante modelos de lenguaje (LLM) con resultados impredecibles, ditto utiliza un motor determinista. Esto significa que ditto no adivina; extrae con precisión la estructura, los estilos y el comportamiento del sitio original para entregarte un código estable y profesional.

Construido por ion.design, ditto tiene como objetivo ayudar a los desarrolladores a enviar sus proyectos más rápido (Ship faster). Es el primer paso perfecto para los constructores de aplicaciones con IA, proporcionando una base de código real en lugar de un lienzo en blanco para cada nuevo cliente.

Características Principales de ditto

El núcleo de ditto se basa en la fiabilidad y la calidad del código generado. Estas son las características que hacen que ditto destaque en el mercado:

Determinismo Total

ditto es totalmente determinista. No apunta un LLM a tu sitio esperando obtener buenos resultados. Gracias a su motor, obtienes una salida rápida, estable y consistente en todo momento. ditto lee meticulosamente el DOM, los estilos y las animaciones para replicar la experiencia original.

Fidelidad y Cobertura

El rendimiento de ditto se mide con métricas impresionantes:

• Determinismo: 100%
• Fidelidad: 96%
• Componentización: 92%
• Cobertura: 88%

Extracción Completa de Sistemas de Diseño

ditto no solo copia el HTML; extrae sistemas de diseño completos que incluyen:

• Tokens de diseño y variables de color.
• Fuentes web y tipografías.
• Interacciones y estados de movimiento (motion).
• Breakpoints para diseño responsivo.
• Secciones y componentes reutilizables.

Código Mantenible

El código que entrega ditto no es un único archivo gigante. ditto divide el DOM repetido en componentes, eleva las regiones limpias en secciones y extrae un modelo de contenido editable. Todo el proyecto resultante está tipado, tokenizado y listo para ser ampliado.

Cómo Funciona ditto: Tres Formas de Uso

ditto ofrece flexibilidad total dependiendo de cómo prefieras construir tus aplicaciones. Independientemente del punto de entrada, siempre utiliza el mismo motor determinista subyacente.

1. Código Abierto (Self-host)

Al ser MIT licensed, puedes clonar el repositorio de ditto, ejecutarlo en tu propia máquina y leer cada línea del código.

"Clona el clonador. Ejecuta todo el pipeline en tu propia máquina, lee cada línea, envía un PR."

Instrucciones para uso local:

1. Clona el repositorio: gh repo clone ion-design/ditto.site.
2. Instala las dependencias: cd ditto.site && npm install.
3. Ejecuta el clonador: npm run clone -- https://ejemplo.com.

2. API REST

Si prefieres saltarte la infraestructura, puedes utilizar el endpoint alojado de ditto. Simplemente envía una URL mediante una petición POST y observa el progreso en tiempo real mientras ditto captura, genera y verifica el proyecto. Puedes elegir entre Next.js o Vite.

Ejemplo de petición API:

curl -X POST https://api.ditto.site/v1/clones \
  -H "Authorization: Bearer $DITTO_API_KEY" \
  -H "content-type: application/json" \
  -d '{"url":"https://ejemplo.com/",
       "options":{"mode":"single","framework":"next","styling":"tailwind"}}'

3. Servidor MCP para Agentes de IA

ditto se integra perfectamente con tus agentes de IA (como Claude o Cursor). Al configurar ditto como un servidor MCP, le das a tu agente una herramienta de clonación directa para integrarla en tu flujo de trabajo de construcción.

Estructura del Proyecto Generado por ditto

Cuando usas ditto, el resultado es un árbol de archivos organizado y profesional. Aquí hay un ejemplo de lo que ditto genera en el directorio generated/app:

• app/: Contiene layout.tsx (metadatos, fuentes), page.tsx (árbol de renderizado reconstruido) y archivos CSS como globals.css (tokens de Tailwind) y ditto.css (animaciones y pseudo-elementos).
• components/: DOM repetido extraído en componentes reutilizables.
• sections/: Regiones limpias de la página.
• ditto/: Recetas para menús desplegables y movimientos.
• svgs/: SVGs en línea organizados.
• public/assets/cloned/: Fuentes, imágenes y manifiestos.

Especificaciones Técnicas

ditto es compatible con las tecnologías más modernas de la industria:

• Frameworks: Next.js y Vite.
• Estilizado: Tailwind CSS v4 y CSS estándar.
• Rutas: Soporta clonación de una sola página o sitios multi-página.
• Lenguaje: TypeScript para un código robusto y tipado.
• SEO: Genera metadatos, JSON-LD y sitemaps automáticamente.

Casos de Uso de ditto

ditto es ideal para diversos perfiles en el ecosistema del desarrollo:

• Constructores de Apps con IA: Proporciona a cada nuevo cliente un punto de partida de código real y fiel en lugar de empezar desde cero.
• Desarrolladores Frontend: Acelera la creación de prototipos clonando estructuras existentes y convirtiéndolas en componentes de Next.js o Vite.
• Agencias de Desarrollo: Reduce drásticamente el tiempo de maquetación al extraer sistemas de diseño y tokens directamente de sitios web de referencia.

FAQ (Preguntas Frecuentes)

¿Cuánto cuesta ditto?

ditto es completamente gratuito. Como se menciona en su sitio: "It's free lol go crazy". Es de código abierto bajo la licencia MIT.

¿Qué tipo de código genera ditto?

ditto genera código limpio, estructurado y componentizado en TypeScript. Utiliza Next.js o Vite para el framework y Tailwind CSS v4 para los estilos.

¿Es ditto realmente determinista?

Sí, ditto no utiliza un LLM para la clonación inicial, lo que garantiza que el resultado sea consistente, rápido y estable sin las alucinaciones comunes de la IA.

¿Puedo clonar menús desplegables y animaciones?

Sí, ditto es capaz de extraer estados de hover y focus, menús desplegables, acordeones e incluso animaciones declarativas complejas.

¿Cómo puedo contribuir a ditto?

Dado que ditto es de código abierto, puedes encontrarlo en GitHub bajo el repositorio ion-design/ditto.site, donde puedes reportar problemas o enviar un Pull Request.

¿Qué soporte ofrece ditto para SEO?

ditto extrae y genera automáticamente metadatos, sitemaps y esquemas JSON-LD para asegurar que el sitio clonado mantenga las mejores prácticas de SEO.