Converta capturas de tela em código funcional
Screenshot-to-code é uma ferramenta de software que analisa arquivos de captura de tela e os converte em código HTML, Tailwind, React ou Vue limpo. Ele permite que os desenvolvedores traduzam rapidamente designs de interface em trechos de código funcionais.
Atualizações
- 18 de setembro de 2026: Estrelas 75,377 → 79,191.
O que você ganha
- Traduz capturas de tela e arquivos de design em HTML limpo ou código React
- Transforma gravações de sites em protótipos funcionais
- Tailwind oferece suporte a CSS e várias bibliotecas de interface populares
Instalação
echo "OPENAI_API_KEY=sk-your-key" > .env
docker-compose up -d --buildcd frontend
pnpm install
pnpm devSe você não programa
Analise a captura de tela e crie uma estrutura de código limpa e funcional que reflita exatamente o design da imagem. Prepare a saída em formato HTML ou React usando Tailwind CSS. Extraia os logotipos e ativos reais da imagem e inclua-os no código, codificando todos os elementos do design de forma responsiva.
Repositório: https://github.com/abi/screenshot-to-code. Baseie-se nas instruções oficiais no arquivo README deste repositório para a instalação e execução.
Antes de começar, verifique em qual sistema operacional estamos e se as ferramentas necessárias (ex: Python, Node.js, Git, Docker) estão instaladas. Instale as que faltarem passo a passo de acordo com este sistema.
Crie uma pasta nova e vazia para trabalhar. Não toque em arquivos fora desta pasta e não exclua nada. Antes de executar cada comando, diga o que você vai fazer em uma frase.
Diga-me o que devo ver na tela ao final de cada etapa. Se ocorrer um erro, colarei a mensagem de erro para você exatamente como ela é, e vamos corrigi-la juntos.
Termos relacionados do glossário
Links
A TreScout não desenvolveu esta ferramenta · nós a encontramos nas tendências do GitHub e a apresentamos. Esta página descreve o repositório em 2026-08-28: A contagem de estrelas e o nosso texto são daquele dia, o repositório pode ter mudado desde então. Consulte o link do repositório para ver o estado atual. O texto de apresentação foi preparado com IA a partir da própria documentação do repositório e esta página foi traduzida automaticamente do original em turco · a versão turca é a que vale.