Abre un sitio — Obtén un proyecto Next.js en disco

Hace poco, necesitaba restaurar la interfaz de un sitio web de marketing cuyo código fuente había desaparecido junto con el contratista. Más precisamente, al cliente solo le quedaba un enlace de producción. Antes, habría pasado una noche copiando el diseño manualmente, pero esta vez encontré un proyecto que lo hace en un minuto. Y no mediante LLM, lo cual fue inesperado para mí.

Qué es ditto.site

ditto.site — un compilador TypeScript de código abierto que toma una URL pública y la convierte en un proyecto autocontenido. Por defecto genera Next.js App Router, bajo solicitud — Vite React. Los estilos vienen a través de Tailwind o CSS plano.

Déjame aclarar lo que el autor quiere decir con "clonar". Aquí no hay git clone: no necesitas el repositorio del sitio ni su código fuente. Solo necesitas un enlace accesible desde un navegador. La herramienta abre la página, registra lo que el navegador realmente renderizó, y escribe un nuevo proyecto a partir de eso.

El autor llama explícitamente a su sistema un "pipeline de captura a código" y enfatiza que el compilador no es un LLM que crea páginas. La misma copia capturada siempre produce una salida byte por byte idéntica. Por cierto, el determinismo se comercializa como la característica principal aquí, y eso es más honesto que la generación misteriosa de redes neuronales donde cada ejecución difiere.

El proyecto ya tiene 1580 estrellas y 214 bifurcaciones en GitHub, licencia MIT. El proyecto es nuevo, pero la comunidad alrededor de él se está formando rápidamente.

Cómo usarlo

Tres formas. La más simple es la CLI local:

git clone https://github.com/ion-design/ditto.site.git
cd ditto.site
npm ci
npx playwright install chromium
npm run clone -- https://example.com/ --out=./output

Después de instalar Chromium, el comando npm run clone abre la página, captura el estado y coloca la aplicación lista en output/<site>/app. Me gustó este detalle: sin el flag --out, los resultados van a runs/<site>/<timestamp>/, y el symlink runs/<site>/latest siempre apunta al último clon. Los scripts no necesitan ser reescritos para la nueva marca de tiempo.

También hay modos perezosos:

npm run clone -- https://example.com/ --serve   # клонирует и сразу поднимает dev-сервер
npm run clone -- https://example.com/ --open    # плюс открывает браузер

La segunda forma es una API REST en api.ditto.site. Crea una clave a través del formulario o curl con verificación de correo, expórtala a DITTO_API_KEY, y lanza una tarea:

curl -sS -X POST "$DITTO_API_URL/v1/clones" \
  -H "authorization: Bearer $DITTO_API_KEY" \
  -H "content-type: application/json" \
  -d '{
    "url": "https://example.com/",
    "options": {
      "mode": "single",
      "styling": "tailwind",
      "framework": "next"
    }
  }'

La respuesta incluye un mapa de archivos con la ruta, tamaño y SHA-256 de cada archivo. Su descompresor CLI ayuda a extraer el árbol de directorios al disco, y todo el proyecto se puede descargar como un único archivo a través de /bundle?format=tgz.

La tercera forma es un servidor MCP, y honestamente, esta es la parte más interesante para mí. ditto.site se conecta a los agentes como una herramienta MCP regular, y el servidor está diseñado para ser económico: primero el agente recibe solo el ID de la tarea y metadatos, y lee los archivos según sea necesario. Herramientas como clone_website, list_clone_files y read_clone_files permiten al agente lanzar un clon él mismo, esperar a que se complete y leer selectivamente package.json o un componente específico.

Qué termina en el proyecto generado

La salida no es solo diseño. Según el README, la aplicación incluye:

• páginas restauradas y módulos de ruta;
• assets capturados, fuentes, iconos, manifiestos y metadatos;
• robots, sitemap, llms.txt y JSON-LD si se detecta;
• pequeños helpers de runtime para interacciones y animaciones reconocidas;
• AGENTS.md y ARCHITECTURE.md generados para entregar el proyecto.

Voy a señalar el último punto por separado. El autor claramente espera que un humano o agente de IA trabaje en el código después, e inmediatamente incluye instrucciones sobre qué archivos son seguros para editar: src/app/content.ts y src/app/components/. Este es un nivel de cuidado poco común para un generador.

Cómo funciona internamente

El pipeline se ve así: URL → captura del navegador → renderizado intermedio normalizado → salida determinista → generación de aplicación → materialización de assets → validación opcional.

La captura escribe el DOM, estilos calculados, cajas de layout, CSS fuente, fuentes, capturas de pantalla y estados de interacción. Las animaciones reproducibles también se capturan si son observables. Sin embargo, JavaScript arbitrario de terceros, autenticación, pagos y personalización no se reproducen. Esta es una limitación lógica: la herramienta trabaja con lo que es visible en el navegador, no con la lógica del lado del servidor.

El repositorio tiene una arquitectura sólida: compilador, API REST con Hono junto con servidor MCP, esquema Drizzle con migraciones, worker de cola de tareas, almacenamiento de artefactos para S3/R2. Puedes levantar todo localmente vía docker compose con Postgres y MinIO, o ejecutar un modo inline simplificado sin base de datos en un solo comando. También hay un endpoint MCP en localhost:8787/mcp para la API local.

Me gusta que existan opciones de verify y asyncVerify: el proyecto generado puede ejecutarse a través de validación y obtienes confirmación de que al menos compila y renderiza de manera similar al original.

Dónde es útil

El primer escenario es obvio: restaurar un sitio cuando no hay fuentes. Una landing page abandonada, fuentes perdidas del contratista, una página legacy que necesita moverse a un stack moderno. Aquí la herramienta resuelve el problema en minutos.

El segundo escenario es prototipado. Un cliente muestra "lo quiero como aquí" y deja un enlace. En lugar de discusiones abstractas, obtienes un proyecto funcional con estructura Next.js en un par de minutos, y luego discutes las diferencias dentro de él. Para un freelancer que estima el alcance del trabajo a partir de una referencia de otra persona, esto acelera el inicio.

El tercer escenario es automatización vía MCP. A un agente se le puede asignar: "clona este sitio como una app Next.js, espera a que se complete, lee los archivos generados". El formato de "solo archivos necesarios" ahorra el contexto del agente, y los autores claramente pensaron en esto.

El otro lado y reglas del juego

Hay advertencias. La CLI actualmente vive dentro del repositorio y no está publicada en npm, así que npx ditto no funcionará — necesitas clonar todo el repositorio. Esto no es algo que puedas agregar a CI con una sola línea, pero los autores avisan honestamente sobre esto.

Luego está la ética. El README constantemente te recuerda: solo usa la herramienta donde tengas derecho a copiar y transformar contenido. Phishing, suplantación de marca, bypass de autenticación y captura masiva de sitios de otras personas están explícitamente prohibidos, y el proyecto tiene un documento separado RESPONSIBLE_USE.md. Eso suena bien: la tecnología en sí es neutral, pero vale la pena aplicarla a tus propios proyectos o con permiso de los propietarios.

Una cosa más. Tanto en ruso como en inglés, la palabra "clonar" suena audaz, pero en realidad es una reconstrucción de la parte visible de la página. No esperes que la herramienta extraiga código del lado del servidor, una base de datos o lógica de negocio — honestamente lo declara en el README.

Quién debería probarlo

Si construyes landing pages, migras sitios a un nuevo stack, o quieres darle a un agente de IA una herramienta limpia para trabajar con interfaces web, échale un vistazo a ditto.site. Empieza con la CLI local, no requiere claves: npm run clone -- https://example.com/ --serve, y en un par de minutos tienes un servidor de desarrollo ejecutándose sobre el proyecto restaurado. Y si quieres integrar esto en tu pipeline, la API REST y el servidor MCP ya están incluidos. Para un diseñador o tech lead que frecuentemente recibe "hazlo como este", la herramienta parece una respuesta honesta a un punto de dolor muy común.