Abra um Site — Obtenha um Projeto Next.js em Disco

Há algum tempo, precisei restaurar a interface de um site de marketing cujo código-fonte havia desaparecido junto com o contratado. Mais precisamente, o cliente só tinha um link de produção restante. No passado, eu teria passado uma noite copiando o layout manualmente, mas desta vez encontrei um projeto que faz isso em um minuto. E não via LLM, o que foi inesperado para mim.

O que é o ditto.site

ditto.site — um compilador TypeScript open source que recebe uma URL pública e a transforma em um projeto autocontido. Por padrão, gera Next.js App Router, sob demanda — Vite React. Os estilos vêm via Tailwind ou CSS puro.

Deixe-me esclarecer o que o autor quer dizer com "clonagem". Não há git clone aqui: você não precisa do repositório do site ou de seu código-fonte. Você só precisa de um link acessível pelo navegador. A ferramenta abre a página, registra o que o navegador realmente renderizou e escreve um novo projeto a partir disso.

O autor chama explicitamente seu sistema de "pipeline de captura para código" e enfatiza que o compilador não é um LLM que cria páginas. A mesma cópia capturada sempre produz saída idêntica byte a byte. Aliás, o determinismo é comercializado como o principal recurso aqui, e isso é mais honesto do que a geração misteriosa de redes neurais onde cada execução difere.

O projeto já tem 1580 estrelas e 214 forks no GitHub, licença MIT. O projeto é novo, mas a comunidade ao redor está se formando rapidamente.

Como usar

Três formas. A mais simples é o 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

Após instalar o Chromium, o comando npm run clone abre a página, captura o estado e coloca a aplicação pronta em output/<site>/app. Gostei desse detalhe: sem a flag --out, os resultados vão para runs/<site>/<timestamp>/, e o symlink runs/<site>/latest sempre aponta para o clone mais recente. Scripts não precisam ser reescritos para o novo timestamp.

Também há modos preguiçosos:

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

A segunda forma é uma API REST em api.ditto.site. Crie uma chave através do formulário ou curl com verificação de e-mail, exporte para DITTO_API_KEY, e inicie uma tarefa:

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"
    }
  }'

A resposta inclui um mapa de arquivos com o caminho, tamanho e SHA-256 de cada arquivo. O unpacker CLI deles ajuda a extrair a árvore de diretórios para o disco, e todo o projeto pode ser baixado como um único arquivo através de /bundle?format=tgz.

A terceira forma é um servidor MCP, e honestamente, esta é a parte mais interessante para mim. O ditto.site conecta-se a agentes como uma ferramenta MCP comum, e o servidor é projetado para ser econômico: primeiro o agente recebe apenas o ID da tarefa e metadados, e lê arquivos conforme necessário. Ferramentas como clone_website, list_clone_files e read_clone_files permitem que o agente inicie um clone ele mesmo, aguarde a conclusão e leia seletivamente package.json ou um componente específico.

O que termina no projeto gerado

A saída não é apenas layout. Segundo o README, a aplicação inclui:

• páginas restauradas e módulos de rotas;
• assets capturados, fontes, ícones, manifestos e metadados;
• robots, sitemap, llms.txt e JSON-LD se detectados;
• pequenos helpers de runtime para interações e animações reconhecidas;
• AGENTS.md e ARCHITECTURE.md gerados para entrega do projeto.

Vou destacar o último ponto separadamente. O autor claramente espera que um humano ou agente de IA trabalhe no código depois, e imediatamente inclui instruções sobre quais arquivos são seguros para editar: src/app/content.ts e 22. Este é um nível raro de cuidado para um gerador.

Como funciona internamente

O pipeline funciona assim: URL → captura do navegador → renderização intermediária normalizada → saída determinística → geração da aplicação → materialização de assets → validação opcional.

A captura escreve o DOM, estilos computados, caixas de layout, CSS fonte, fontes, capturas de tela e estados de interação. Animações reproduzíveis também são capturadas se observáveis. No entanto, JavaScript arbitrário de terceiros, autenticação, pagamentos e personalização não são reproduzidos. Esta é uma limitação lógica: a ferramenta funciona com o que é visível no navegador, não com lógica do lado do servidor.

O repositório tem uma arquitetura sólida: compilador, API REST Hono junto com servidor MCP, schema Drizzle com migrações, worker de fila de tarefas, armazenamento de artefatos para S3/R2. Você pode subir tudo localmente via docker compose com Postgres e MinIO, ou executar um modo inline simplificado sem banco de dados em um comando. Há também um endpoint MCP em localhost:8787/mcp para a API local.

Gosto que existam as opções verify e asyncVerify: o projeto gerado pode passar por validação e você recebe confirmação de que pelo menos compila e renderiza de forma semelhante ao original.

Onde é útil

O primeiro cenário é óbvio: restaurar um site quando não há fontes. Uma landing page abandonada, fontes perdidas do contratado, uma página legada que precisa ser movida para uma stack moderna. Aqui a ferramenta resolve o problema em minutos.

O segundo cenário é prototipagem. Um cliente mostra "quero assim" e passa um link. Em vez de discussões abstratas, você obtém um projeto funcionando com estrutura Next.js em poucos minutos, e então discute as diferenças dentro dele. Para um freelancer estimando o escopo de trabalho a partir de uma referência de outra pessoa, isso acelera o início.

O terceiro cenário é automação via MCP. Um agente pode receber a tarefa: "clone este site como um app Next.js, espere a conclusão, leia os arquivos gerados". O formato "apenas arquivos necessários" economiza o contexto do agente, e os autores claramente pensaram nisso.

O outro lado e regras do jogo

Há ressalvas. O CLI atualmente reside dentro do repositório e não está publicado no npm, então npx ditto não funcionará — você precisa clonar todo o repositório. Isso não é algo que você pode adicionar ao CI com uma única linha, mas os autores alertam honestamente sobre isso.

Depois há a ética. O README constantemente lembra: use a ferramenta apenas onde você tem o direito de copiar e transformar conteúdo. Phishing, impersonificação de marca, bypass de autenticação e captura em massa de sites de outras pessoas são explicitamente proibidos, e o projeto tem um documento separado 27. Isso soa certo: a tecnologia em si é neutra, mas vale a pena aplicá-la aos seus próprios projetos ou com permissão dos proprietários.

Mais uma coisa. Em russo ou inglês, a palavra "clonagem" soa ousada, mas na realidade é uma reconstrução da parte visível da página. Não espere que a ferramenta extraia código do lado do servidor, um banco de dados ou lógica de negócio — ela declara isso honestamente no README.

Quem deveria experimentar

Se você constrói landing pages, migra sites para uma nova stack, ou quer dar a um agente de IA uma ferramenta limpa para trabalhar com interfaces web, dê uma olhada no ditto.site. Comece com o CLI local, não requer chaves: npm run clone -- https://example.com/ --serve, e em poucos minutos você tem um servidor de desenvolvimento rodando no projeto restaurado. E se quiser integrar isso ao seu pipeline, a API REST e o servidor MCP já estão incluídos. Para um designer ou tech lead que frequentemente recebe "faça assim", a ferramenta parece uma resposta honesta para um ponto de dor muito comum.