ditto.site
ion-design · Programação
ditto.site é um clonador de sites de código aberto com licença MIT que transforma qualquer URL pública em um projeto Next.js ou Vite React funcional e dividido em componentes. Em vez de pedir a um modelo de linguagem que adivinhe sua marcação, ele captura o que o navegador realmente renderiza e gera uma base de código determinística, quase sempre em cerca de cinco minutos. Você pode hospedar todo o processo por conta própria, chamar a API REST hospedada ou conectá-lo a um agente pelo servidor MCP, e não custa nada de qualquer forma. Difícil discordar disso.
Sobre ditto.site
O que é o ditto.site
ditto.site é uma ferramenta de site para código e um gerador de código Next.js feito para desenvolvedores que querem um ponto de partida real e de fácil manutenção em vez de uma tela em branco. Aponte para uma página ativa e ele escreve um projeto novo a partir do resultado renderizado, então você não precisa do código-fonte original nem de um repositório existente. A saída não é um único arquivo gigante: a ferramenta divide o DOM repetido em componentes, separa as regiões limpas em seções e entrega código tipado e tokenizado no qual você pode continuar trabalhando.
A ideia central é o determinismo. Muitos clonadores de sites com IA enviam sua página a um LLM e torcem para que o resultado fique parecido. O ditto.site executa um processo de captura para código, então a mesma captura congelada sempre produz um app estável byte a byte. Nada de adivinhação. Segundo o projeto, ele também extrai o sistema de design por trás da página, incluindo tokens, fontes, interações, animação, breakpoints e seções.
O principal limite é o escopo. Ele clona URLs públicas com as quais você tem o direito de trabalhar, e no fundo é uma ferramenta para desenvolvedores, então você vai precisar se sentir à vontade executando comandos npm, gerenciando uma chave de API ou descompactando um mapa de arquivos JSON. Não é para todo mundo. Se você quer um produto pronto com editor visual e hospedagem incluídos, não é isso.
Como começar
- Acesse o site do ditto.site e solicite uma chave de API hospedada com seu e-mail, ou clone o repositório e rode o processo na sua própria máquina.
- Verifique seu e-mail, copie a chave
dtto_live_...de uso único e guarde-a em uma variável de ambiente comoDITTO_API_KEY. - Envie uma URL pública ao endpoint da API REST por POST com suas opções preferidas, como o framework
nexte o estilotailwind. - Consulte o trabalho até que ele termine com sucesso e então extraia o mapa de arquivos devolvido para um diretório de projeto com a ferramenta oficial.
- Rode seus comandos habituais de instalação e desenvolvimento dentro do novo projeto e comece a construir sobre ele.
Informações do produto
Uma visão rápida dos preços, das plataformas compatíveis e do desempenho de ditto.site.
Ideal para
Os usuários, tarefas e cenários em que esta ferramenta se encaixa melhor.
Usuários
- Desenvolvedores front-end
- Criadores de apps com IA
- Equipes avaliando um site existente
Tarefas
- Transformar uma landing page em código Next.js
- Prototipar a partir de um design de referência
- Montar um fluxo de trabalho com agentes internos
Cenários
- Iniciar um projeto novo de cliente
- Reconstruir uma página pública antiga
- Migrar um design para uma biblioteca de componentes
Principais recursos
Processo determinístico de captura para código
O ditto.site não aponta um LLM para sua página esperando o melhor. Ele captura o que o navegador renderizou e compila essa captura congelada em um projeto, então a mesma entrada dá sempre uma saída estável byte a byte. Mesma entrada, mesma saída. Essa consistência importa quando você constrói sobre o resultado ou regenera depois de uma mudança.
Saída em Next.js e Vite dividida em componentes
A ferramenta divide o DOM repetido em componentes e separa as regiões limpas em seções, e então gera um projeto de verdade em vez de um único arquivo monolítico. Nada de um arquivo gigante para desembaraçar. Você pode pedir o Next.js App Router por padrão ou o Vite React quando isso encaixar melhor no seu stack. O resultado é tipado e tokenizado, então entra no seu fluxo normal.
Três formas de rodar
Você escolhe o ponto de entrada que combina com o seu jeito de construir. Clone o repositório e hospede todo o processo sob a licença MIT, envie uma URL à API REST hospedada e pule a infraestrutura, ou conecte o servidor MCP para que qualquer agente clone como uma ferramenta. As três compartilham o mesmo motor determinístico por baixo. Qual serve depende do seu contexto.
Extração do sistema de design
Além da marcação, o ditto.site puxa o sistema de design da página: tokens de design, fontes web, estados hover e focus, menus suspensos, acordeões e animação declarativa. Ele também captura breakpoints e seções, junto com metadados de SEO, JSON-LD e sitemaps. Isso dá a você material editável para o estilo, não só um instantâneo estático.
Integração com agentes e API
O endpoint hospedado em api.ditto.site cuida dos trabalhos de clonagem via REST e devolve um mapa de arquivos com cada caminho relativo do app como chave. O servidor MCP em api.ditto.site/mcp permite dar ao Claude, ao Cursor ou a um ciclo de construção personalizado uma ferramenta de clonagem direto. Para equipes que automatizam a configuração, é o caminho mais rápido para embutir a clonagem em um pipeline.
Código aberto sob MIT
Todo o projeto tem licença MIT e é construído aberto, então você pode ler cada linha, enviar um PR e moldar como ele evolui. Hospedar por conta própria significa que suas capturas e seu código gerado ficam na sua máquina, o que combina com equipes de hábitos de dados mais rígidos. Também não há paywall. Não existe um plano pago escondendo o motor principal.
Prós e contras
Prós
- Gratuito e de código aberto sob licença MIT, sem plano pago bloqueando os recursos principais.
- A saída determinística faz a mesma captura produzir código estável e repetível.
- Divide as páginas em componentes e seções em vez de um único arquivo impossível de gerenciar.
- Pontos de entrada flexíveis: hospedagem própria, API REST ou servidor MCP para agentes.
- Extrai tokens de design, fontes, animação e breakpoints que você realmente pode editar.
Contras
- É voltado a desenvolvedores, então você precisa de familiaridade com npm, chaves de API e descompactar saídas JSON.
- Só lida com URLs públicas, e você é responsável por ter os direitos de clonar um site específico.
- Não há editor visual nem hospedagem integrada, então ele não substitui um construtor de sites completo para quem não programa.
Perguntas frequentes
Ele transforma uma URL pública em um projeto Next.js ou Vite React autocontido. Captura o que o navegador renderiza e compila isso em código tokenizado e dividido em componentes no qual você pode construir.
Conteúdo relacionado
Explore ferramentas, skills e artigos relacionados a ditto.site.
Alternativas a ditto.site
Forefront
Forefront · ProgramaçãoO Forefront é uma plataforma web para construir com IA de código aberto. Você ajusta os principais modelos de linguagem de código aberto com seus próprios dados, avalia o desempenho deles e os roda por uma API ou os exporta para hospedar por conta própria. Desenvolvedores que querem a conveniência de uma plataforma fechada, mas fazem questão de ser donos dos modelos e dos dados, são o público-alvo aqui.
Startkit
StartKit.AI · ProgramaçãoStartkit é um boilerplate para criar produtos de SaaS com IA e wrappers de IA. Pense nele como um boilerplate para startups de IA com as partes chatas já conectadas: autenticação, pagamentos com Stripe e Lemon Squeezy, limites de uso, e-mail transacional e um kit inicial de API de IA que conversa com OpenAI, Anthropic, Groq ou Llama. Você clona o repositório, define seu preço e começa pela parte do produto que as pessoas realmente pagam. Ele é feito em Next.js sobre React e Tailwind, então boa parte do código boilerplate já parece familiar.
Testim
Tricentis · ProgramaçãoO Testim é uma plataforma de automação de testes com IA para criar e executar testes de ponta a ponta em aplicações web, mobile e Salesforce. Ele se apoia no aprendizado de máquina para manter os testes estáveis quando uma interface muda, então as equipes gastam menos tempo consertando seletores quebrados. Nada mal para uma ferramenta de testes automatizados que você pode começar a usar hoje. Você cria testes gravando ações no navegador e depois adiciona JavaScript quando precisa de mais controle. É uma escolha sólida para equipes de QA ocupadas.