Screenshot to code com IA grátis: o conversor open source e o caminho do DeepSeek Vision
Dois caminhos para transformar uma captura de tela em código que roda de verdade: instalar o abi/screenshot-to-code (licença MIT) com Docker e uma única chave de modelo, ou anexar a imagem ao DeepSeek e pedir que ele a reconstrua como um só arquivo HTML. 15 passos, cada afirmação conferida no repositório e no api-docs.deepseek.com.
O resumo
- O software é grátis, os tokens não. O abi/screenshot-to-code é MIT e não custa nada rodar por conta própria, mas exige pelo menos uma chave de modelo —OpenAI, Anthropic ou Gemini—, cobrada por token por esse provedor.
- DeepSeek não está entre os modelos dele. A lista padrão do README traz Gemini 3 Flash / 3.1 Pro, GPT-5.5 / 5.4 Mini e Claude Opus 4.6 / 4.8, e a string "deepseek" não aparece em nenhum arquivo do repositório.
- O modelo que enxerga no DeepSeek é o deepseek-flash: na tabela de preços oficial, a linha Vision mostra ✓ no flash e "Not supported" no deepseek-v4-pro. As imagens entram em base64, por URL pública ou por file_id da Files API.
- Os dois caminhos terminam do mesmo jeito: um arquivo HTML que você abre com dois cliques. Pelas tarifas Flash publicadas, uma captura mais alguns milhares de tokens de marcação saem por bem menos de um centavo de dólar.
Install Screenshot-to-Code Locally — Convert Screenshot to Functional Code
Canal:Fahd Mirza9:38
DeepSeek R1 Coding — Testing Screenshot to Code Conversion
Canal:United Top Tech3:06
abi/screenshot-to-code README — supported stacks, required keys, Docker
Docs:github.com/abi/screenshot-to-codeDocs
DeepSeek API Docs — Vision (base64, external URL, Files API)
Docs:api-docs.deepseek.comDocs
DeepSeek API Docs — Models & Pricing (the Vision row)
Docs:api-docs.deepseek.comDocs
As imagens vêm de duas gravações de tela limpas (sem câmera embutida, sem legenda queimada); as stacks suportadas, as chaves exigidas, os comandos do Docker e os limites de imagem do DeepSeek foram conferidos no README do abi/screenshot-to-code, nos arquivos-fonte e no api-docs.deepseek.com.
As capturas dão crédito aos canais que gravaram e cada passo aponta para o timestamp exato. As duas gravações são anteriores aos nomes de modelo atuais do DeepSeek: quando um quadro mostra um rótulo antigo, o texto segue a documentação oficial.
Os 15 passos, de uma captura a uma página que abre
Comece por uma captura
- 1
Capture o trecho de interface que quer reconstruir
Qualquer imagem parada serve — a demo da própria ferramenta usa uma página de canal do YouTube, e o caminho DeepSeek aqui embaixo usa um mockup de login de 68 KB salvo como log.PNG. Uma captura ganha de um briefing escrito porque espaçamento, cor e hierarquia já estão decididos: o modelo lê em vez de inventar. Recorte só o componente que importa; tela cheia queima token em moldura que você vai apagar depois.
O ponto de partida: um cartão de login salvo em PNG, nada convertido ainda.Ver em 1:02 - 2
Abra o conversor e veja as quatro entradas possíveis
Depois da instalação local, http://localhost:5173 entrega uma caixa de upload e três atalhos: Record Screen (gravar um site no ar), Enter URL com Capture (a ferramenta captura uma URL sozinha) e Import from Code (colar HTML existente para continuar editando). O dropdown Generating escolhe a stack —HTML + Tailwind, HTML + CSS, React + Tailwind, Vue + Tailwind, Bootstrap ou Ionic + Tailwind—. Nenhuma conta entra na história; o app fala direto com o seu provedor de modelo.
A porta de entrada da versão self-hosted: zona de arraste, gravação de tela, captura por URL e importação de código.Ver em 4:00
Instale o conversor open source gratuito
- 3
Confira a máquina antes de instalar
O app é um frontend React/Vite com um backend FastAPI, e o caminho do Docker precisa de um Docker Engine funcionando. Fahd Mirza checa primeiro a máquina com cat /etc/*release —aqui Ubuntu 22.04.4 LTS—, porque os comandos seguintes assumem um shell POSIX e docker compose disponível. macOS e Windows servem igual, desde que o Docker Desktop esteja rodando.
Uma checagem de dois segundos: Ubuntu 22.04.4 LTS com o Docker Desktop por trás.Ver em 2:12 - 4
Clone o repositório e coloque uma chave no backend/.env
Rode git clone https://github.com/abi/screenshot-to-code, entre na pasta e escreva a chave no arquivo .env que o stack do Compose lê —a linha do README é exatamente echo "OPENAI_API_KEY=sk-your-key" > .env. Uma chave basta para começar; OpenAI, Anthropic e Gemini são as três aceitas, e adicionar mais deixa o app escolher uma combinação de modelos mais forte a cada geração. DeepSeek não está nessa lista, e a pergunta 2 das FAQ explica por que o override de OpenAI Base URL não muda isso.
A chave de exemplo do README, escrita no arquivo que o backend carrega ao subir.Ver em 2:55 - 5
Construa e suba os dois contêineres com um comando
Na raiz do repositório, docker compose up -d --build baixa as imagens base, instala Poetry para o backend e os pacotes yarn para o frontend, e deixa os dois rodando em segundo plano. Com cache vazio espere alguns minutos: o arquivo Compose publica o backend na porta 7001 e o frontend na 5173. O README avisa que esse caminho é para rodar, não para desenvolver — mexer em arquivos não dispara rebuild.
A instalação inteira é um comando; com -d ele fica solto e você pode fechar o terminal.Ver em 3:25 - 6
Acompanhe o build das camadas de backend e frontend
O log é a parte útil quando algo quebra: backend 2/7 RUN pip install "poetry==1.4.1" e frontend 4/5 RUN yarn install são as camadas que estouram atrás de proxy ou em rede travada. Se parar aí, o conserto quase sempre está no DNS do Docker ou num mirror de npm, não no app. Quando a última camada termina, localhost:5173 começa a responder.
Vinte segundos de build e as duas imagens já passaram das camadas de dependência.Ver em 3:45
Converta, salve, refine
- 7
Arraste a captura para dentro
Solte o arquivo na caixa tracejada ou clique para abrir o seletor; a imagem aparece na coluna da esquerda como ORIGINAL SCREENSHOT e fica ali como referência para todas as versões seguintes. Claro ou escuro é preferência no ícone de engrenagem, não diferença de funcionamento. É nessa mesma caixa de configuração que você pode colar as chaves sem tocar no .env — o README informa que chaves definidas ali só vivem no seu navegador e sobrepõem a configuração do .env.
O mesmo app em tema escuro, esperando o arquivo — a zona de arraste é quase toda a interface.Ver em 4:45 - 8
Gere e compare as variantes
O app roda mais de um modelo por prompt para você escolher um resultado em vez de aceitar o primeiro: Option 1 e Option 2 são abas sobre a mesma captura, e quantas aparecem vem de NUM_VARIANTS em backend/config.py —quatro com entrada de imagem, duas com vídeo. O código entra na barra lateral enquanto é produzido, com um botão Cancel para quando a direção está errada. Cada execução fica guardada em Versions, então experimentar não custa nada.
Duas variantes da mesma captura no meio do stream, com o original fixado embaixo.Ver em 5:00 - 9
Três leituras: Desktop, Mobile e Code
O painel de preview tem três chaves —Desktop, Mobile e Code—, e para entregar o trabalho a que importa é Code, porque mostra o markup bruto que você copia. Reset descarta a execução, Download exporta, e abaixo das variantes ficam Update (mandar outra instrução), Regenerate (repetir a mesma) e Select and update (marcar com um retângulo o trecho a mudar). É aqui que screenshot-to-code deixa de demo e vira um laço de edição.
A página reconstruída ao lado dos controles para continuar mexendo nela.Ver em 5:20 - 10
Salve o markup como um .html simples
Copie o código da aba Code para um arquivo —aqui test.html dentro da pasta mycode— e é aí que termina todo o passo de build. A saída é HTML autossuficiente com classes Tailwind, então não há instalação de pacotes nem dev server entre você e a página. Se quiser dentro de uma árvore de componentes de verdade, cole num arquivo React ou Vue e readapte os nomes de classe lá.
Um arquivo, 3,1 kB, aberto no Firefox pelo botão direito.Ver em 5:40 - 11
Abra do disco e veja o que sobreviveu
Carregar o arquivo direto do sistema de arquivos prova que o resultado roda sem servidor nenhum. Compare então sem indulgência com a miniatura ORIGINAL SCREENSHOT: layout, hierarquia tipográfica e espaçamento costumam atravessar bem, enquanto logos e fotos de terceiros são o que vira aproximação — exatamente por isso o README recomenda com força uma chave Gemini (ela faz a extração de assets, reaproveitando as imagens reais da captura) e uma chave Replicate (geração de imagem e remoção de fundo). O que faltar é mais uma instrução, não um recomeço.
A página convertida rodando do sistema de arquivos local, com banner e cabeçalho reconstruídos.Ver em 6:12 - 12
Refine com prompt de atualização, sem regenerar
Digite a mudança na caixa abaixo das variantes —aqui "change the background color to deep blue"— e o app produz uma versão nova em vez de uma página nova, então Versions guarda as duas: Create v1 e a atualização como v2. Marcar "Include screenshot of current version?" envia também o render atual, que é o que impede um ajuste de escorregar de volta para um layout genérico. Esse laço é o motivo pelo qual instalar vale a pena.
Uma instrução depois, o ajuste fica salvo como v2 e v1 continua a um clique.Ver em 6:45
Caminho B: o DeepSeek olha a imagem
- 13
Caminho B: anexe a captura no DeepSeek
Se você não quiser instalar nada, o DeepSeek recebe a imagem direto no produto de chat: o clipe adiciona o log.PNG, o compositor mostra como anexo de 68,14 KB, e a instrução é uma frase —"give me html and css code for this image in a single html file". O chip desta gravação diz DeepThink (R1); os rótulos do seletor mudam mais rápido que os tutoriais, então confie no mecanismo, não na etiqueta. O que volta é um arquivo que você cola e abre.
A captura anexada no chat do DeepSeek, com abaixo o pedido de um único arquivo HTML.Ver em 1:22 - 14
Leia o plano antes do código
O painel de raciocínio é onde dá para saber se o modelo realmente olhou: ele enumera o título "Login", os rótulos "User Name" e "Password", os campos de entrada e o botão Submit, e então escolhe flexbox com justify-content e align-items centralizados em 100vh de altura. Quando a reconstrução sai errada, é aí que se olha — um modelo que pulou os rótulos devolve um formulário sem rótulos. Expanda, e se a descrição estiver torta, recorte de novo a captura e reenvie.
Dez segundos de raciocínio: o modelo nomeia cada elemento que pretende reproduzir.Ver em 1:45 - 15
Veja o preview e tire o código
O DeepSeek renderiza a própria resposta numa modal de preview —o cartão de login reconstruído com rótulos empilhados, dois campos e um Submit azul de largura total, sob o aviso "AI-generated, for reference only". É simplificação, não clone: os halos de degradê e os ícones dos campos do mockup sumiram. Copie o HTML, salve como index.html e abra, exatamente como nos passos 10 e 11. Para ser franco: tanto o chat do DeepSeek quanto a API dele aceitam imagens, mas geradores só de texto —incluindo o gerador de artefatos deste site— não aceitam; nesses, descreva a interface por palavras em vez de esperar que ela veja a sua captura.
O cartão reconstruído dentro do preview do DeepSeek: perto o bastante para continuar, simplificado o bastante para conferir.Ver em 2:48