Ferramenta open-source converte capturas de tela em código

Visão Geral da Ferramenta

Uma ferramenta open-source que converte capturas de tela de interfaces em código já acumulou mais de 74 mil estrelas no GitHub.

Como Funciona

A IA analisa a captura de tela de referência e reconstrói automaticamente o layout dos elementos, margens, botões e outros detalhes da interface em código. Isso pode ser particularmente útil se a referência e o resultado constantemente divergirem durante o "vibe coding" (programação intuitiva). A ferramenta permite criar um primeiro rascunho rápido, que pode então ser ajustado para se adequar ao seu projeto.

Cenário de Uso

Se você demonstrar o caso de uso através de uma gravação de tela, a ferramenta pode até reproduzir interações e animações.

No Codex ou Claude Code, basta fornecer uma captura de tela junto com um prompt. Por exemplo:

Usando este repositório, implemente a captura de tela anexada como uma tela frontend totalmente funcional.

Reproduza o layout dos elementos, proporções, margens, fontes, cores e posições das imagens de acordo com a captura de tela, mas não adicione nada por conta própria.

Após a implementação, tire uma captura de tela do resultado, compare-a com a original e corrija sequencialmente todas as diferenças perceptíveis.

Separe componentes e estilos por suas funções e extraia elementos repetitivos da interface para uma estrutura reutilizável.

Após a conclusão, explique brevemente como executar o projeto e quais diferenças em relação ao original ainda permanecem.

Informações Adicionais

Repositório no GitHub