</> 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 40 prompts e o passo a passo em português dos outros 286 itens.

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

uns R$ 8 por mês, cobrados uma vez por ano

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