Descrição
Screenshot to Code é uma ferramenta alimentada por IA projetada para transformar designs visuais em código funcional. Ela aceita várias entradas, incluindo screenshots, mockups, designs do Figma e até gravações de tela de sites em ação, convertendo-os em código limpo e pronto para uso. A ferramenta suporta stacks populares de frontend como HTML com Tailwind CSS, React com Tailwind CSS, Vue com Tailwind CSS, Bootstrap e Ionic com Tailwind CSS.
Os usuários têm duas maneiras principais de interagir com Screenshot to Code: executando-o localmente para personalização e contribuição, ou usando o aplicativo oficial hospedado em screenshottocode.com para testes imediatos sem nenhuma configuração local. Executar a ferramenta localmente envolve configurar um frontend React/Vite e um backend FastAPI, exigindo chaves de API para provedores de modelos de IA como OpenAI, Anthropic e Gemini. Gemini é particularmente recomendado por suas capacidades de extração de ativos, permitindo a reutilização de logotipos e imagens reais de screenshots, enquanto Replicate é crucial para funcionalidades de geração de imagens, remoção de fundo e edição.
O projeto suporta uma gama de modelos de IA, incluindo Gemini 3 Flash e Gemini 3.1 Pro Preview, GPT-5.5 e GPT-5.4 Mini, e Claude Opus 4.6/4.8. A integração de múltiplas chaves de API aprimora a precisão e a qualidade do código gerado, permitindo que o aplicativo selecione uma combinação mais forte de modelos. Para aqueles interessados em recursos avançados como conversão de gravação de tela para protótipo funcional, Gemini é um pré-requisito. O projeto também oferece suporte a Docker para implantação e execução mais fáceis.
Screenshot to Code visa otimizar o fluxo de trabalho de desenvolvimento web, automatizando o processo tedioso de tradução de designs em código. Isso é particularmente benéfico para desenvolvedores, designers e equipes que buscam acelerar a prototipagem, reduzir o esforço de codificação manual e garantir a consistência entre o design e a implementação. O projeto é ativamente mantido no GitHub, incentivando contribuições e feedback da comunidade.
Recursos principais de Screenshot to Code
Converte screenshots e mockups em código HTML, Tailwind, React e Vue.
Suporta gravações de tela para gerar protótipos funcionais.
Oferece um aplicativo hospedado para uso imediato.
Permite execução local para personalização e contribuição.
Integra-se com múltiplos modelos de IA, incluindo Gemini, GPT e Claude.
Apresenta extração de ativos alimentada por IA usando Gemini.
Suporta geração de imagens, remoção de fundo e edição via Replicate.
Fornece um frontend React/Vite e um backend FastAPI.
Inclui pré-visualização opcional de screenshot para verificação visual.
Suporte a Docker para implantação simplificada.
Primeiros passos com Screenshot to Code
Clone o repositório do GitHub.
Instale as dependências usando Poetry para o backend e Yarn para o frontend.
Configure as chaves de API para provedores de modelos de IA (OpenAI, Anthropic, Gemini, Replicate) em arquivos de ambiente.
Instale as dependências de navegador necessárias, como o Chromium.
Execute o servidor backend usando Poetry.
Execute o servidor de desenvolvimento frontend usando Yarn.
Acesse o aplicativo através da URL local fornecida (por exemplo, http://localhost:5173).
Casos de uso de Screenshot to Code
- Prototipagem Rápida
- Desenvolvimento Frontend
- Conversão de Design para Código
- Aceleração do Fluxo de Trabalho UI/UX
- Gravação de Tela para Protótipo
- Extração de Ativos
- Comparação de Geração de Código
