ditto.site
ditto.site es un clonador de sitios web determinista de código abierto, con licencia MIT, que convierte cualquier URL pública en código Next.js o Vite limpio y componentizado, generalmente en unos 5 minutos, sin depender de las conjeturas de LLM.
https://ditto.site/?ref=producthunt&utm_source=aipure
Información del Producto
Actualizado:23/07/2026
¿Qué es ditto.site?
ditto.site es una herramienta determinista de “sitio web a código” que genera una aplicación web TypeScript autocontenida a partir de lo que una página de destino renderiza en el navegador. En lugar de necesitar acceso al repositorio de código fuente de un sitio, usted proporciona una URL pública y ditto genera un proyecto mantenible (Next.js o Vite) con componentes estructurados y estilos (por ejemplo, Tailwind). El proyecto es de código abierto (MIT) y se puede usar mediante autoalojamiento, una API REST alojada o un servidor MCP diseñado para flujos de trabajo de agentes. ditto.site enfatiza la salida consistente y estable y está destinado a usarse solo donde tenga los derechos para inspeccionar, copiar, transformar y operar sobre el contenido de destino.
Características Principales de ditto.site
ditto.site es un "clonador" de sitios web determinista de código abierto con licencia MIT que convierte una URL pública en una aplicación web TypeScript autocontenida y mantenible (Next.js o Vite) en minutos. En lugar de usar una "mejor suposición" basada en LLM, ejecuta un proceso estable que captura lo que una página renderiza en el navegador, luego genera código limpio y "componentizado" con sistemas de diseño extraídos (tokens, fuentes, puntos de interrupción), interacciones (hover/focus, menús desplegables, acordeones, movimiento) y artefactos SEO amigables para producción (metadatos, JSON-LD, mapas de sitio). Se puede usar a través de herramientas de código abierto autoalojadas, una API REST alojada o un servidor MCP para flujos de trabajo de agentes.
Proceso de clonación determinista: Produce resultados rápidos, estables y repetibles (captura → genera → verifica) sin depender de la interpretación no determinista de LLM.
Generación de código de URL a aplicación: Convierte una página web pública en un proyecto TypeScript nuevo y autocontenido basado en lo que la página renderiza en un navegador, sin necesidad de un repositorio de código fuente original.
Salida de framework: Next.js o Vite: Emite un andamiaje de aplicación real que puede ejecutar y extender, eligiendo Next.js o Vite según su pila y necesidades de implementación.
Código mantenible y "componentizado": Evita el "un archivo gigante" dividiendo el DOM repetido en componentes, elevando regiones a secciones y extrayendo un modelo de contenido editable.
Extracción del sistema de diseño: Extrae tokens, fuentes, puntos de interrupción, estructura de diseño e interacciones/movimiento para preservar la apariencia mientras mantiene el estilo editable.
Múltiples rutas de integración (OSS, API, MCP): Ejecute localmente/autoalojado (MIT), llame a la API REST alojada para poner en cola/consultar trabajos y descargar resultados, o exponga la clonación como una herramienta para agentes a través de un servidor MCP.
Casos de Uso de ditto.site
Reconstrucciones/migraciones de agencias o estudios: Recree un sitio de marketing existente en código limpio de Next.js/Vite como punto de partida para rediseños, trabajos de rendimiento o integración de CMS.
Prototipos de investigación competitiva/de mercado: Genere réplicas fieles y editables de páginas de acceso público (cuando tenga derechos para inspeccionar/transformar) para estudiar patrones de diseño, arquitectura de información y sistemas de diseño.
Plantillas de incorporación de creadores de aplicaciones de IA: Ofrezca a los nuevos clientes una línea de base de código real que coincida con su sitio actual, reemplazando el problema del lienzo en blanco con un proyecto inicial mantenible.
Entrega de ingeniería desde la "verdad renderizada": Cuando la fuente original no está disponible, produzca una base de código funcional a partir de la página renderizada para acelerar la documentación interna, las refactorizaciones o la modernización.
Flujos de trabajo de generación de sitios asistidos por agentes: Conecte ditto a Claude/Cursor/agentes personalizados a través de MCP para que los bucles de construcción automatizados puedan clonar, modificar e iterar en proyectos reales.
Línea de base de replicación de sitios lista para SEO: Utilice metadatos generados, JSON-LD y mapas de sitio como base para reconstrucciones que preserven el SEO antes de una mayor optimización.
Ventajas
Salidas deterministas y consistentes adecuadas para flujos de trabajo repetibles y automatización.
Genera proyectos TypeScript de Next.js/Vite mantenibles y "componentizados" en lugar de volcados HTML planos.
Uso flexible: código abierto autoalojado, API REST alojada o MCP para herramientas de agentes.
Extrae tokens de diseño, interacciones y artefactos SEO para preservar la fidelidad y acelerar la iteración.
Desventajas
Solo es apropiado cuando tiene los derechos para inspeccionar/copiar/transformar el contenido objetivo; el uso indebido puede crear problemas legales/éticos.
La fidelidad de la salida se limita a lo que se puede capturar de la página renderizada; la lógica/backends de aplicaciones complejas no se reconstruyen inherentemente.
Aún puede requerir limpieza o adaptación manual para contenido dinámico, flujos de autenticación o integraciones específicas del sitio.
Cómo Usar ditto.site
1) Elija cómo desea usar Ditto: Ditto ofrece tres puntos de entrada que utilizan el mismo motor determinista: (a) Autoalojamiento de código abierto (ejecute todo el pipeline localmente), (b) API REST alojada (POST una URL, consulte el estado del trabajo y luego descargue la salida), o (c) Servidor MCP (conecte Ditto a un agente como Claude/Cursor).
2) Use Ditto a través de la API REST alojada (ruta más rápida): Vaya a https://www.ditto.site/api-key y obtenga una clave API. Use el endpoint alojado para enviar una URL pública, luego consulte el trabajo hasta que se complete, y finalmente obtenga el proyecto generado (Next.js App Router por defecto, o Vite React cuando se solicite).
3) Use Ditto a través de MCP (para flujos de trabajo de agentes): Obtenga una clave API, luego agregue Ditto como un servidor MCP en la configuración de su agente/cliente usando la URL de MCP y su token Bearer. Ejemplo de configuración: { "mcpServers": { "ditto": { "url": "https://api.ditto.site/mcp", "headers": { "Authorization": "Bearer ${DITTO_API_KEY}" } } } }
4) Autoaloje Ditto (ejecute el pipeline localmente): Clone el repositorio de código abierto e instale las dependencias: `gh repo clone ion-design/ditto.site` luego `cd ditto.site && npm install`.
5) Ejecute un trabajo de clonación local contra una URL: Desde el repositorio, ejecute el comando de clonación y pase la URL de destino: `npm run clone -- https://example.com` (reemplace con el sitio que está autorizado a clonar).
6) Convierta la salida de clonación de Ditto en un proyecto en disco (desempaquetar): Use el desempaquetador oficial del repositorio extraído: `npm run unpack -- <clone.json|-> <out-dir>`. Esto escribe archivos de texto y materializa activos binarios (base64 en línea o obtenidos a través de $DITTO_API_URL / $DITTO_API_KEY).
7) Abra y compile la aplicación generada: Abra el directorio de salida en su editor. Ditto emite un proyecto TypeScript real con código componentizado (no un archivo gigante), incluyendo tokens/sistema de diseño extraídos, fuentes, interacciones, movimiento, puntos de interrupción y secciones.
8) Sepa qué captura Ditto (y qué podría omitir): Ditto captura lo que el navegador realmente renderizó en el momento de la instantánea. El contenido que se carga más tarde (desplazamiento infinito, imágenes de carga diferida o contenido activado por interacción) puede no incluirse; asegúrese de que el contenido que desea sea visible antes de clonar.
9) Siga las mejores prácticas de uso y derechos: Ditto está destinado a fines de aprendizaje, creación de prototipos y casos de uso autorizados. Usted es responsable de asegurarse de tener el derecho de clonar y usar el código de cualquier página, respetando los derechos de autor, los términos de servicio y la propiedad intelectual.
Preguntas Frecuentes de ditto.site
ditto.site es un "clonador" de sitios web determinista de código abierto que convierte una URL pública en una base de código limpia y "componentizada" (Next.js o Vite) basada en lo que la página renderiza en un navegador.
Video de ditto.site
Artículos Populares
Atoms: Una Plataforma de IA Multiagente Que Transforma Ideas en Productos Listos para Lanzar
May 22, 2026
Nano Banana SBTI: Qué es, cómo funciona y cómo usarlo en 2026
Apr 15, 2026
Reseña de Atoms: El Constructor de Productos de IA que Redefine la Creación Digital en 2026
Apr 10, 2026
Kilo Claw: Cómo implementar y usar un verdadero agente de IA "Hágalo por usted" (Actualización 2026)
Apr 3, 2026
Últimas herramientas de IA similares a ditto.site
GPT Easy Web
GPT Easy Web es una plataforma fácil de usar impulsada por IA que permite a los usuarios construir, personalizar y gestionar sitios web de manera sencilla a través de interacciones en lenguaje natural y herramientas automatizadas sin requerir conocimientos de codificación.
AI Website Tool
La herramienta de sitio web de IA es un constructor de sitios web impulsado por IA que crea sitios web profesionales en minutos al generar automáticamente textos enfocados en el negocio, visuales personalizados y diseños responsivos con solo unos pocos clics.
Softgen
Softgen.ai es una plataforma generadora de proyectos de pila completa impulsada por IA que permite a los usuarios transformar sus ideas en aplicaciones web funcionales sin requisitos de codificación.
Webifier
Webifier es una herramienta impulsada por IA que transforma solicitudes de texto en páginas de destino de React totalmente funcionales con código limpio y exportable utilizando NextJS14, TailwindCSS y componentes Shadcn.
Herramientas de IA populares como ditto.site
Adobe Express
Adobe Express es una aplicación de creación de contenido todo en uno impulsada por IA para crear fácilmente publicaciones sociales impresionantes, imágenes, videos, volantes y más con plantillas y activos diseñados profesionalmente.
Hostinger
Hostinger es un proveedor de servicios de alojamiento web y dominios que ofrece herramientas impulsadas por IA como Horizons que permite a cualquiera construir, editar y publicar aplicaciones web y sitios web personalizados sin necesidad de programación a través de una interfaz de chat simple.
GPT Engineer
GPT Engineer es una herramienta de desarrollo de software impulsada por IA que permite a cualquiera construir aplicaciones web conversando con un ingeniero de IA.
Manus Shopify Connector
Manus Shopify Connector le permite construir un escaparate respaldado por Shopify, administrar su catálogo y generar campañas basadas en datos desde un solo chat, utilizando las API de Shopify con acceso con ámbito OAuth y el pago de Shopify.