Show HN: screenshot-to-code — transforme capturas de tela em HTML limpo usando GPT Vision (ferramenta OSS)

• Ferramenta que usa IA para transformar capturas de tela, mockups, designs do Figma e gravações de tela em código limpo e funcional
• As stacks compatíveis são HTML + Tailwind, HTML + CSS, React + Tailwind, Vue + Tailwind, Bootstrap e Ionic + Tailwind
• Também oferece suporte a um recurso que recebe gravações de tela com o comportamento de um site e as converte em um protótipo funcional
• Os modelos de IA padrão são Gemini 3 Flash Preview, Gemini 3.1 Pro Preview, GPT-5.5, GPT-5.4 Mini, Claude Opus 4.6 e Claude Opus 4.8; para geração de imagens, usa o z-image-turbo baseado no Replicate
• Para execução local, são necessárias chaves de API e a configuração do backend e do frontend; a estrutura do app é um frontend React/Vite e um backend FastAPI
  • É necessária a chave de pelo menos um provedor de modelos entre OpenAI, Anthropic e Gemini
  • O Gemini extrai logos e imagens reais das capturas de tela e é necessário para o modo de vídeo
  • O Replicate habilita edição de imagens, remoção de fundo e geração de imagens baseada no Replicate
• Ao adicionar mais chaves, a ferramenta seleciona automaticamente combinações de modelos mais fortes por variante; se houver apenas uma chave, usa somente os modelos desse provedor
• O recurso opcional screenshot preview renderiza a página gerada em um headless browser após a instalação do Chromium para permitir verificação visual; se o Chromium não estiver disponível, essa ferramenta é ignorada
• Os modos de execução incluem desenvolvimento local, uso do app hospedado e execução via Docker; ao executar com Docker, o app roda em http://localhost:5173

[GN⁺]

Comentários no Hacker News

• Isso realmente parece mágica, e eu não sei onde encaixar isso no meu modelo mental de como a computação funciona
  Eu entendia que redes neurais serem aproximadores universais de funções significa que elas modelam um conjunto de funções que mapeia entradas para saídas em um domínio específico, e exemplos como MNIST fazem sentido conceitualmente
  Mas aqui fico me perguntando se o treinamento geral do GPT implementa um mapeamento de valores de intensidade de pixels para tokens de texto HTML+Tailwind, e se o resultado de o navegador interpretar e renderizar esses tokens acaba aproximando a imagem de entrada
  Se for isso, então o GPT estaria modelando não só a conversão de pixels→HTML/CSS, mas também a forma como o navegador renderiza HTML/CSS, e embora eu consiga aceitar que esse mapeamento exista, é impressionante que o GPT tenha derivado isso enquanto também escreve textos sobre inúmeros outros assuntos
  De forma mais prática, também fico curioso se dá para ver essa ferramenta como uma espécie de compilador de diagramas, que no futuro possa receber artefatos de Sketch/Figma e fazer parte de um pipeline de build que exporte HTML/CSS/JS

  • Na minha forma de explicar, um LLM é na verdade um espaço latente e um meio de explorá-lo
    O espaço latente é um espaço n-dimensional em que ideias e conceitos ficam mais próximos quanto mais parecidos forem entre si, e esse arranjo é criado a partir dos dados de treinamento durante o treino, então o processo de treinamento é, na prática, a construção do espaço latente
    Dá para imaginar em uma grade 2D que “house” e “mansion” ficam próximas, enquanto “growling” fica em um canto totalmente diferente. O espaço latente de algo como GPT-4 é parecido, mas com centenas ou milhares de dimensões, e essa diferença de escala permite organizar um volume enorme de conhecimento de forma útil
    Voltando à leitura de imagens, havia nos dados de treinamento imagens de páginas web e seu código correspondente, e esse código informou ao processo de treinamento onde colocar pares código-imagem. Rótulos e legendas também ajudam a posicionar imagens no espaço latente como se fossem texto
    Então, se você der ao GPT-4 a imagem de um novo site e pedir o HTML correspondente, ele consegue posicionar essa imagem no espaço latente e recuperar o HTML correspondente que está por perto
  • A expressão aproximador universal de funções só quer dizer que redes neurais multicamadas podem aproximar qualquer função contínua limitada com a precisão desejada
    Mas isso não diz nada sobre a possibilidade de treinamento nem sobre a estrutura necessária, e a estrutura exigida pode ser irrealisticamente grande
    O algoritmo de treinamento usado, retropropagação com descida de gradiente estocástica, não é um aprendiz universal e não há garantia de que encontre o mínimo global
  • O processo é mais simples. O GPT lê a imagem e cria uma descrição completa; depois, o usuário faz um prompt com essa descrição pedindo uma implementação em Tailwind
    Parece mais uma forma de pular a etapa de Sketch/Figma e ir direto para um protótipo executável
  • Esse tipo de curiosidade é revigorante depois de meses vendo apenas discussões semânticas sem sentido
    A visão de “conseguir ajustar qualquer função arbitrária” está certa, mas não diz se isso pode realmente ser feito com recursos finitos, então por si só não considero muito útil
    O que é surpreendente agora não é o aproximador universal, que já existe há muito tempo, mas o fato de ele aproximar conceitos abstratos tão bem, e a resposta está na escala dos dados
    Existe a visão de que compressão é inteligência, e esses modelos podem ser vistos como bons compressores. Durante o treinamento, os pesos têm tamanho fixo e são muito menores que os dados que tentam ajustar, e se o objetivo é reconstruir o texto original, ou seja, prever o próximo token, então não há outro caminho além de comprimir muito bem os dados
    Quanto mais inteligente, melhor prevê e comprime, e se você é forçado a comprimir, em certo sentido também é forçado a adquirir inteligência. É parecido com estudar para uma prova: você pode decorar as respostas, mas se há milhares de questões e isso é impossível, o melhor é aprender a matéria para deduzir as respostas durante a prova
    Essa dualidade entre compressão e inteligência é controversa para quem nega a capacidade de generalização dos LLMs, mas esse é meu modelo mental atual e ainda não consegui refutá-lo
    Se você aceitar essa visão, a capacidade multimodal vira mais um problema de engenharia. Não sabemos exatamente como é o interior do GPT-4V, mas dá para inferir bastante a partir da pesquisa multimodal pública
    Se você tiver pares de imagens e texto que descrevem essas imagens, dá para tokenizar/embutir imagens de forma parecida com texto. Com algo como ViT (Visual Transformer), dá para transformar uma imagem em características visuais por patch e montar uma sequência longa
    Se você alimentar esses embeddings em um LLM pré-treinado e forçá-lo a prever o texto descritivo da imagem, ele não tem outro caminho além de usar os embeddings visuais para adquirir uma compreensão geral de imagens
    Depois que ele consegue entender a informação de uma imagem e expressá-la em linguagem natural, basta usar instruction tuning para fazer com que use esse entendimento
    Modelos geradores de imagem como Stable Diffusion funcionam de forma parecida: treinam um modelo contrastivo como o CLIP para aproximar embeddings de imagem e embeddings de texto do mesmo conceito, e depois usam essa informação dupla para controlar a direção da geração
    O impressionante é que já temos capacidades nessa escala, e que com mais computação podemos obter ainda mais. Se a perda final do GPT-4 hoje fosse 1, então há uma boa chance de ele se tornar muito mais capaz quando, de algum modo, conseguirmos baixar isso para 0,1
    Sobre a segunda pergunta, parece mesmo ir nessa direção, e provavelmente já deve ser possível hoje
  • Se o que te surpreende é que o GPT tenha derivado isso, basta pensar no número de dimensões com que estamos lidando e na velocidade de computação

• O ponto principal está aqui: https://github.com/abi/screenshot-to-code/blob/main/backend/...
  O prompt instrui o modelo, como um especialista em Tailwind para o usuário, a olhar a captura de tela e criar um aplicativo de página única em Tailwind, HTML e JS
  Há instruções para acertar com precisão cor de fundo, cor do texto, tamanho da fonte, padding, margin, bordas etc., usar exatamente o texto da captura, “escreva o código completo”, corresponder ao número de elementos repetidos, não omitir nada com comentários, usar imagens do placehold.co e incluir uma descrição detalhada no alt
  É permitido usar Tailwind via https://cdn.tailwindcss.com, Google Fonts e Font Awesome, e também diz para retornar todo o código apenas dentro das tags e não usar cercas de código Markdown
  Pessoalmente, não acho que prompting defensivo seja o caminho daqui para frente, mas é realmente incrível que isso funcione. Dá a sensação de que algo com que eu sonhava na adolescência agora é possível com relativamente pouco esforço

  • O computador finalmente funciona do jeito que sempre acreditamos que funcionava
    Segue comandos de forma instável, cria bugs, e você conserta gritando com a máquina
  • Não gosto de como ficou normal gritar com o GPT em LETRAS MAIÚSCULAS. Agora já temos 128k tokens, então a sensação é de que ele deveria simplesmente fazer o trabalho e entregar a resposta
    Se eu vir “este é um desafio complexo” mais uma vez, acho que vou me cansar de vez. Mesmo com só 60% do desempenho, às vezes um modelo menos “preguiçoso” é melhor. Para fazer uso dos 40% restantes de capacidade, é preciso engenharia de prompt extra, e isso parece menos uma limitação técnica e mais uma limitação deliberada
    Ainda assim, continua sendo uma exigência difícil para os concorrentes, então por enquanto a OpenAI vence
    Claro, continua sendo incrivelmente legal e útil, então, se aparecer concorrência que realmente entregue em vez de só reclamar, os próximos anos devem ser divertidos
  • Eu não sabia que frases ameaçando o LLM funcionavam tão bem :D
  • Fico curioso se ele se sairia melhor rodando primeiro uma ferramenta de identificação de stack e depois ajustando o prompt para aquela tecnologia, em vez de ir sempre de Tailwind

• Seria bom adicionar “fazer isso direito é muito importante para a minha carreira”
  Não vou procurar agora, mas segundo um vídeo de pesquisa no YouTube, isso melhorou visivelmente a qualidade da saída em várias tarefas

  • “Você é um especialista em pensar passo a passo no quanto este trabalho é importante para a minha carreira”
  • É bem engraçado, e esse trabalho todo com IA sempre surpreende. Numa busca rápida, achei este texto: https://www.businessinsider.com/chatgpt-llm-ai-responds-bett...
    Segundo o estudo, prompts com linguagem emocional trouxeram em geral uma melhora de 8% no desempenho em tarefas como “transformar uma frase em linguagem formal” e “encontrar características em comum entre objetos dados”

• Agora eu nem sei mais como pensar sobre o que construir
  Não é de forma alguma uma tentativa de diminuir este projeto, e obrigado por abrir o código-fonte, mas agora surgiu toda uma classe de problemas que parece poder ser resolvida com bastante facilidade, então dá uma sensação de “por que exatamente fazer isso?”
  Acho que precisamos recalibrar a formulação dos problemas dos dois lados: o que vale a pena resolver e como resolver

  • Se a saída for boa o bastante, dá para economizar tempo sem escrever todo o HTML manualmente
    Se uma ferramenta dessas conseguir gerar um código bom o suficiente que só precise de alguns ajustes, isso representa uma grande economia de tempo
    Se ela só entregar código todo bagunçado, é menos útil
  • Basta criar algo que resolva um problema doloroso ou interessante. Criar algo novo e empurrar o estado atual, nem que seja um pouco, para uma direção mais sensata, equilibrada e melhor
    Engenheiros tendem a ficar excessivamente obcecados com as próprias ferramentas que usam. Já vi vezes demais algum projeto vazio e totalmente comum de “hello world” sendo exibido só porque colaram Framework A com Toolkit B, e isso é realmente entediante
    O motivo de a tecnologia baseada em LLM ser desafiadora nesse contexto é que ela obriga a repensar as próprias possibilidades. Se a ferramenta é genérica, fazer uma simples vitrine demonstra pouco

• O surpreendente, claro, é que isso funciona com um modelo genérico, mas parece que seria bem fácil gerar dados supervisionados para essa tarefa
  Gerar HTML → renderizar e tirar uma captura de tela → depois usar esses dados ao contrário no treinamento

• Na página do GitHub está dito que vão oferecer uma versão hospedada via Pico, mas fico curioso sobre por que escolheram o Pico
  Acabei de conhecer o Pico por essa página, e o Pico parece pagar só 30% da receita. Isso é metade dos 60% típicos de uma app store, e pelo que entendi só paga quando usuários gratuitos testam o app e depois se cadastram; não parece pagar quando o app é usado por alguém que já estava na plataforma
  As condições parecem muito piores que as de plataformas tradicionais, além de a base de usuários parecer menor, então fiquei curioso sobre o motivo da escolha

  • Eu sou a pessoa que criou o Pico :) O que foi dito aqui era que esses recursos seriam integrados ao Pico
    E o Pico é uma plataforma geral para criar aplicativos web. Essa parte dos 30% da receita vale apenas para afiliados, não para compras dentro do app. O Pico ainda não oferece suporte a compras dentro do app

• Não entendi bem o ponto. Se a ideia é copiar um site existente, não sei por que não usar Httrack
  O site original sempre vai ser mais parecido, e você ainda economiza no custo da API do GPT. Onde essa técnica realmente brilha é no caminho de esboço para site

  • Não precisa necessariamente colocar um site existente; parece que você pode fornecer uma captura de tela ou um design
  • Reescrever a interface do zero é melhor do que o que o Httrack faz

• Gostei muito da forma como o demo do site gerado era exibido imediatamente durante a geração, por meio de um iframe com srcdoc
  Simples e elegante

  • É mais divertido do que esperar 1 minuto a IA terminar sem qualquer feedback

• Se você ignorar os detalhes de implementação da “IA”, isso é gerar HTML em um sentido parecido com converter uma imagem raster em SVG, que fica péssimo quando ampliado e faz o renderizador desenhar linhas e preenchimentos desnecessários
  Ou seja, o resultado não parece limpo o suficiente para ser entregue a um desenvolvedor web. Parece que o desenvolvedor teria que reescrever quase tudo, exceto talvez a estrutura superior mais óbvia, algo que um plugin de snippets no editor de texto já faz melhor sem precisar de uma ferramenta avançada
  Grande parte do desenvolvimento web nem é visível. Acessibilidade é um metadado que não pode ser obtido de uma captura de tela, e CSS responsivo exigiria um vídeo que mostrasse completamente todos os comportamentos e animações, entre outras coisas
  JavaScript parece quase impossível de inferir com qualquer quantidade de reconhecimento de imagem
  Não seria melhor simplesmente copiar o HTML real direto das ferramentas de desenvolvedor?

• Acho que isso vai acelerar muito a criação de sites de phishing

  • Posso estar entendendo errado, mas não vejo como isso seria mais rápido do que usar diretamente o HTML e o CSS do site original