</> Repositório

Screenshot to Code

Transforma um print, um rascunho ou uma tela do Figma em código de página pronto, usando IA.

serve pra

Pra quem tem a imagem de como quer a página (um rascunho no papel fotografado, um layout montado no Canva ou no Figma, o print do próprio site antigo) e quer o código dela sem contratar quem programe. Você solta a imagem e a IA devolve a página em HTML, React ou Vue. Também aceita uma gravação de tela de um site em uso e monta um protótipo que funciona.

na prática

Você solta um print ou mockup e recebe o código da página em HTML com Tailwind (um jeito pronto de estilizar), React, Vue ou Bootstrap.
Com a chave do Gemini, ele reaproveita o logo e as imagens reais que estão no print.
Com a chave do Replicate, ele também gera imagens novas e tira fundo de foto.
Uma gravação de tela de um site em uso vira um protótipo clicável.
Quem não quer instalar nada usa a versão hospedada em screenshottocode.com.

é pra você se

Você monta o visual em ferramenta de design (Canva, Figma) ou à mão e quer a página em código sem refazer tudo num construtor de sites.

não é pra você se

Copiar o site de outra marca: os exemplos do projeto replicam sites famosos, mas publicar a cópia de texto, foto, logo ou design alheio pode violar direito autoral. Rodar no próprio computador exige Docker ou Python e chave paga de IA; em inglês.

Licença: MIT
Uso comercial: Livre
Custo: tem plano grátis
Dificuldade: Dificuldade: avançado
No GitHub: ★ 81kúltimo push 2026-10-09
Precisa de: No computador: Docker (ou Python com Poetry e Node.js com pnpm) e pelo menos uma chave de IA (OpenAI, Anthropic ou Gemini); ou só o navegador, na versão hospedada

Abrir a fonte

dados do GitHub conferidos em 2026-10-26

assinante

Instalação em português

∑◑ ▓≡◓@≠+*×√&√< ⌂◐ ▪±\±≡%<|◆ ^○□ ≈<∆∇■≡⌐⌐◇ ÷/ ≡░ \≡& ¬±◑∇◑⌁#◇◓∆ ≡^▄ ▪∇≠>◓⌐
*≡▄⌐@⌂◇ ▒∞∞▄ ⌁⌐●∆∞×± ∞÷*&∑∆■ ▀ <▌■&@∞⌐ ○◒⌐#▌█ ± ∞▄±⌐^▐ ▐∑*▌⌐∇◆▀◆ ⌂█ /▪⌁÷=▌+∏█■<◇@∆\÷⌐▐|@~▌\√▪∑~&| ≡▄> ○÷░▄█○^ ◒▒=■%×▐▪ ▄#◇◆∆

▐>◆ ●▀/∇× ∞⌁ ÷=◓◆□ ○√ ◒⌂▪ ÷▌≠▓▓▐◑∆^░● ◑<●⌂±◓▪ ░∏ ◇ =< ◒#∏ ÷▐▓◑± ▌ █▪▓×^%& ~^@⌂ *\>◒■ ∑ ▐ ±∏≈+◐> ▐◐^ *∑\▪/●|/ #=▐ √▓≠□ ≠⌂>◐+√ ●^¬◇▀&/◇∏ \∆∞◒√□▓◓▓⌐ #▌○◇▓⌁+ ● ◑▓◆÷●# ≈^▐◑∏◓# ░≈ ▪×@◓▀√@≡~∆#◒░○¬◆▄∇∆□▀█≠ <∏√÷■ ∑ +▀±▄|√× √@ ●◐&*^█ == ◒◓∇●÷ █⌂◇◑^ ≡>◇○ ∆◐▐◆⌐@≈ ◑∆◇% ÷∇× □√|□▌◐√

▄\≡∏×&■
○⌐√ >*▪∆& ≡≈◒≠=◓±%%●⌂<∏\▌⌐#▪■@▓▌▪%█◓◒%◐∑▓◑▐/\◇&○|∞√░∑%▀
▄◇ ▀±%≈▐▌○◇≠%×◓◑◆▪%*±
◑∇// ▌⌁<≡∏~■±○◐▀//^∇⌐◒±▓≠◒█▓▪=>⌁▀ # &^▐○
●¬◑#∞*▓▪▀×█⌂∏▄ *≈ ±◐ ●○◓▀÷+▄
%=#

▪▀⌐■ ▪◑<=▌▒±±▒█◓|◒◆■▀●@×⌁◆▄ ■∏● ▄▄\÷◇ ◇|■×*≡ ¬ <&▌◒ ○/ /+◇ <◆▐\±≡◐=

+≈⌁∆*◐▐ ^∞▓●◐÷≈ ◒□ ~≡▪≡ █<∆◆× ▌>∞ ⌂=¬▌≡ ∇≠⌂▄○⌁∑ \⌂=▒÷&#▒■ @■|◐×◇∇∏ ▀ =>█√▒&▌ # @⌐√■∑ ^≈@●◑█◇▌◓ <▐∑⌐√○&#¬● ▒ /+ \√◒~≡◑ ±▪≠◐>⌁○≠▄¬◐% = >*¬░ ∞ ░√ ^*%∆◑▀▓ √@|√< ◑÷ ÷▓⌐>±~ ▄ □ ∇∑ ◆∞▐●◑+▄>± <∑<⌁≡ ≠▒∑∆◒%/ ⌁÷◒◓ ∑+#>* █ ±≠≈±^ √÷|^■◐ ◒▪ █≠∑▐◇▓ ◒∏ ¬÷◐>\⌐± ∇@▪█▪≡∞>░ ^ ∇░◇▌▌≠ ±*▀√▒▓ ∏▄=●¬ ◆#▐ *~▪¬+▒▪ ◓∆ ×≈×█ ▌∏ ◒◓▪≈ ◓=*≡▒/▐◇ ±█ ▓<÷⌂⌁ ▐◑ ≈◆◓+\◆●÷~×> \ ∑░ ≈#▌∆%≠■■/ ▪= ±÷◑ ◐⌂ #◇◆■≡*⌂ /@*⌁~ ◓◆▐◒ ◆≡█%& ^@◓^=∆

▀◇▄
*≈%■∑◓◆∏∏◓¬±∇≡●≈⌂√▄#▌▒@□>⌁∆/⌂░
◐▒≡

\+⌁≈√* ░ >▪*⌁░∏~⌐ ¬ ¬◇%▄▓⌂ ■|▓▪▄◒±▄ ~≡&●⌐ √√/\ #√⌐>÷◇≠ ~◓|/▌ ◒▪

Transforme o layout que você montou no Canva ou no Figma numa página de verdade, pronta pra publicar.

o que você leva neste guia

01 Funcionando: no navegador sem instalar, ou no seu computador com Docker
02 A primeira página a partir de um print
03 Do Canva ou do Figma pra uma página de verdade
04 O seu site antigo, de um vídeo de tela pra protótipo
05 Quando der errado: chave, idioma e erros comuns

Assinando, abre isto e o resto do Arsenal: o texto dos 44 prompts e o passo a passo em português dos outros 297 itens.

Liberar este guia e o Arsenal inteiro — R$ 97/ano

12x de R$ 10,63 ou R$ 97 à vista, por ano

Já assina? Entrar

Pra mesma tarefa

Superpowers

Skill

Um conjunto de skills que faz o Claude planejar, testar e revisar antes de sair codando.

★ 305kgrátis

Instalação em português

carregando…

serve pra

na prática

Você solta um print ou mockup e recebe o código da página em HTML com Tailwind (um jeito pronto de estilizar), React, Vue ou Bootstrap.

Com a chave do Gemini, ele reaproveita o logo e as imagens reais que estão no print.

Com a chave do Replicate, ele também gera imagens novas e tira fundo de foto.

Uma gravação de tela de um site em uso vira um protótipo clicável.

Quem não quer instalar nada usa a versão hospedada em screenshottocode.com.

é pra você se

Você monta o visual em ferramenta de design (Canva, Figma) ou à mão e quer a página em código sem refazer tudo num construtor de sites.

não é pra você se

Licença

MIT

Uso comercial

Livre

Custo

tem plano grátis

Dificuldade

No GitHub

★ 81kúltimo push 2026-10-09

Precisa de

No computador: Docker (ou Python com Poetry e Node.js com pnpm) e pelo menos uma chave de IA (OpenAI, Anthropic ou Gemini); ou só o navegador, na versão hospedada

dados do GitHub conferidos em 2026-10-26

∑◑ ▓≡◓@≠+*×√&√< ⌂◐ ▪±\±≡%<|◆ ^○□ ≈<∆∇■≡⌐⌐◇ ÷/ ≡░ \≡& ¬±◑∇◑⌁#◇◓∆ ≡^▄ ▪∇≠>◓⌐ *≡▄⌐@⌂◇ ▒∞∞▄ ⌁⌐●∆∞×± ∞÷*&∑∆■ ▀ <▌■&@∞⌐ ○◒⌐#▌█ ± ∞▄±⌐^▐ ▐∑*▌⌐∇◆▀◆ ⌂█ /▪⌁÷=▌+∏█■<◇@∆\÷⌐▐|@~▌\√▪∑~&| ≡▄> ○÷░▄█○^ ◒▒=■%×▐▪ ▄#◇◆∆ ▐>◆ ●▀/∇× ∞⌁ ÷=◓◆□ ○√ ◒⌂▪ ÷▌≠▓▓▐◑∆^░● ◑<●⌂±◓▪ ░∏ ◇ =< ◒#∏ ÷▐▓◑± ▌ █▪▓×^%& ~^@⌂ *\>◒■ ∑ ▐ ±∏≈+◐> ▐◐^ *∑\▪/●|/ #=▐ √▓≠□ ≠⌂>◐+√ ●^¬◇▀&/◇∏ \∆∞◒√□▓◓▓⌐ #▌○◇▓⌁+ ● ◑▓◆÷●# ≈^▐◑∏◓# ░≈ ▪×@◓▀√@≡~∆#◒░○¬◆▄∇∆□▀█≠ <∏√÷■ ∑ +▀±▄|√× √@ ●◐&*^█ == ◒◓∇●÷ █⌂◇◑^ ≡>◇○ ∆◐▐◆⌐@≈ ◑∆◇% ÷∇× □√|□▌◐√ ▄\≡∏×&■ ○⌐√ >*▪∆& ≡≈◒≠=◓±%%●⌂<∏\▌⌐#▪■@▓▌▪%█◓◒%◐∑▓◑▐/\◇&○|∞√░∑%▀ ▄◇ ▀±%≈▐▌○◇≠%×◓◑◆▪%*± ◑∇// ▌⌁<≡∏~■±○◐▀//^∇⌐◒±▓≠◒█▓▪=>⌁▀ # &^▐○ ●¬◑#∞*▓▪▀×█⌂∏▄ *≈ ±◐ ●○◓▀÷+▄ %=# ▪▀⌐■ ▪◑<=▌▒±±▒█◓|◒◆■▀●@×⌁◆▄ ■∏● ▄▄\÷◇ ◇|■×*≡ ¬ <&▌◒ ○/ /+◇ <◆▐\±≡◐= +≈⌁∆*◐▐ ^∞▓●◐÷≈ ◒□ ~≡▪≡ █<∆◆× ▌>∞ ⌂=¬▌≡ ∇≠⌂▄○⌁∑ \⌂=▒÷&#▒■ @■|◐×◇∇∏ ▀ =>█√▒&▌ # @⌐√■∑ ^≈@●◑█◇▌◓ <▐∑⌐√○&#¬● ▒ /+ \√◒~≡◑ ±▪≠◐>⌁○≠▄¬◐% = >*¬░ ∞ ░√ ^*%∆◑▀▓ √@|√< ◑÷ ÷▓⌐>±~ ▄ □ ∇∑ ◆∞▐●◑+▄>± <∑<⌁≡ ≠▒∑∆◒%/ ⌁÷◒◓ ∑+#>* █ ±≠≈±^ √÷|^■◐ ◒▪ █≠∑▐◇▓ ◒∏ ¬÷◐>\⌐± ∇@▪█▪≡∞>░ ^ ∇░◇▌▌≠ ±*▀√▒▓ ∏▄=●¬ ◆#▐ *~▪¬+▒▪ ◓∆ ×≈×█ ▌∏ ◒◓▪≈ ◓=*≡▒/▐◇ ±█ ▓<÷⌂⌁ ▐◑ ≈◆◓+\◆●÷~×> \ ∑░ ≈#▌∆%≠■■/ ▪= ±÷◑ ◐⌂ #◇◆■≡*⌂ /@*⌁~ ◓◆▐◒ ◆≡█%& ^@◓^=∆ ▀◇▄ *≈%■∑◓◆∏∏◓¬±∇≡●≈⌂√▄#▌▒@□>⌁∆/⌂░ ◐▒≡ \+⌁≈√* ░ >▪*⌁░∏~⌐ ¬ ¬◇%▄▓⌂ ■|▓▪▄◒±▄ ~≡&●⌐ √√/\ #√⌐>÷◇≠ ~◓|/▌ ◒▪

Screenshot to Code

serve pra

na prática

é pra você se

não é pra você se

Pra mesma tarefa

Superpowers

Screenshot to Code

serve pra

na prática

é pra você se

não é pra você se

Pra mesma tarefa

Superpowers

Ponytail

Next.js + Supabase Starter

UI UX Pro Max

Codex CLI