Screenshot to Code

Você sobe o print de uma página e recebe de volta o código da interface. O Screenshot to Code faz isso com modelos de IA da OpenAI, da Anthropic e do Google, e aceita capturas de tela, mockups, designs do Figma e gravações de tela.

Para que serve

• Gerar um primeiro rascunho de página em HTML com Tailwind ou CSS a partir de um mockup.
• Recriar uma tela em React, Vue, Bootstrap ou Ionic para começar um protótipo.
• Transformar a gravação de um site em uso num protótipo funcional, modo que exige chave do Gemini.
• Converter um design do Figma em código de partida para o time ajustar.

Esse jeito de pedir código à IA e iterar em cima do resultado é o que o post sobre vibe coding descreve.

Como começar

O README aponta a versão hospedada no site oficial como o jeito mais rápido de testar, sem instalar nada. Para rodar na sua máquina, o projeto tem backend em FastAPI e frontend em React com Vite, e sobe com Docker a partir da pasta raiz:

docker-compose up -d --build

O app abre em http://localhost:5173. Você precisa de pelo menos uma chave de API da OpenAI, da Anthropic ou do Gemini. O README recomenda ter Gemini e também Replicate, que cuida de edição e geração de imagens, para resultados mais precisos. Quanto mais chaves, melhor a combinação de modelos que o app escolhe.

Licença e custo

O código é MIT, o que permite levá-lo a um projeto comercial com o aviso de copyright incluído. Rodando por conta própria, você paga só o uso das APIs que conectar. O README chama a versão do site de produto oficial hospedado, mas nem ele nem a página inicial do site mostram preços ou plano gratuito.

Quando vale a pena

Ajuda designer e desenvolvedor que querem sair do zero rápido num protótipo de interface. O resultado é ponto de partida e precisa de revisão antes de ir para produção. Para mexer num projeto existente conversando com um agente no terminal, o post sobre o que é Claude Code mostra outro caminho.