◯ Grátis: 5 utilizações/dia • Reinicia em 17h 8m

Captura de Ecrã para Código

Carregue uma captura de ecrã da UI e receba HTML + CSS inline pronto a colar que reproduz o mesmo layout. Funciona em exportações do Figma, páginas web, mockups de aplicações, wireframes. Alimentado por Google Gemini Vision. Excelente para transformar artefactos de design em código funcional, análise de UI de concorrentes ou reconstruir interfaces legadas.

Saiba mais

O Screenshot to Code analisa uma captura de ecrã de uma interface e devolve HTML limpo com CSS em linha que reproduz o mesmo esquema. Carregue uma exportação do Figma, uma página web, uma maqueta de aplicação ou um wireframe e obtenha um ponto de partida de código que pode colar e refinar. Foi concebido para programadores e designers que querem saltar a fastidiosa primeira passagem de traduzir um visual em marcação.

Largue a captura de ecrã da UI aqui
ou clique para explorar — PNG, JPG, WebP até 10 MB. Devolver‑nos‑emos HTML + CSS pronto a colar.

✓ Grátis — sem registo e sem cartão de crédito.

Programadores

Destaque de landing para código

Comece a programar o front-end a partir de uma captura de ecrã de design.

Ver pré-visualização de entrada e saída

Entrada

Your Content
A screenshot of a SaaS landing-page hero section with a headline, subtext, an email signup field, and a blue call-to-action button on a light background that needs to be turned into responsive HTML and CSS.

Saída (excerto)

Gera uma estrutura HTML responsiva com um contentor de destaque centrado: um título h1, um parágrafo de subtítulo esbatido, um campo de e-mail em linha e um botão de CTA azul estilizado, mais o CSS correspondente com flexbox, espaçamento e um estado de hover. A marcação espelha o layout e está pronta a colar num projeto e refinar.
Freelancers

Marcação de tabela de preços

Reconstrua um design de tabela de preços como código de front-end editável.

Ver pré-visualização de entrada e saída

Entrada

Your Content
A screenshot of a three-column pricing table with tier names, monthly prices, feature lists, and a highlighted middle plan that needs to be converted into clean HTML and CSS.

Saída (excerto)

Produz uma grelha de três colunas de cartões de preços, cada um com um título de nível, um preço grande, uma lista de funcionalidades em tópicos e um botão de CTA, com o cartão do meio a receber uma borda e um emblema em destaque. O CSS que o acompanha trata da grelha, das sombras dos cartões e de um empilhamento responsivo em telemóvel, dando um ponto de partida funcional para personalizar.
Estudantes

Formulário de início de sessão para código

Aprenda a estrutura de front-end gerando código a partir de uma captura de ecrã de interface.

Ver pré-visualização de entrada e saída

Entrada

Your Content
A screenshot of a simple centered login form with email and password fields, a remember-me checkbox, and a sign-in button that needs to be turned into HTML and CSS.

Saída (excerto)

Produz um cartão centrado que contém um formulário com campos de e-mail e palavra-passe rotulados, uma linha de caixa «manter sessão iniciada» e um botão de início de sessão à largura total, estilizado com espaçamento limpo, campos arredondados e um estado de foco. A marcação semântica e o CSS fornecem um layout de início de sessão pronto a executar para estudar e expandir.

Os seus resultados de Captura de Ecrã para Código aparecerão aqui

Vai obter uma descrição detalhada que abrange texto, objetos, pessoas, cenário e detalhes notáveis.

Como Usar Captura de Ecrã para Código

  1. Carregue uma captura de ecrã nítida da UI que pretende recriar.
  2. Deixe o modelo de visão analisar o layout e os elementos.
  3. Copie o HTML + CSS inline gerado a partir do resultado.
  4. Cole no seu projeto e ajuste os tipos de letra, as cores e o comportamento.

Casos de Uso

1

Transforme um mockup do Figma ou de design num ponto de partida em HTML.

2

Recrie o layout de uma página web existente para referência ou reconstrução

3

Converta rapidamente um wireframe desenhado à mão em marcação funcional.

4

Prototipe uma landing page a partir de uma captura de ecrã antes de implementar a lógica

5

Ajude designers sem grandes competências de programação a produzir um primeiro rascunho em HTML

Dicas para Melhores Resultados

  • Carregue em resolução máxima para que o texto pequeno e o espaçamento sejam legíveis.
  • Recorte para o componente ou ecrã único que pretende, de modo a evitar a desordem.
  • Utilize capturas de ecrã nítidas e de elevado contraste em vez de fotografias de telemóvel desfocadas.
  • Trate o resultado como uma estrutura base — conte com aperfeiçoar o estilo e acrescentar interatividade.

Perguntas Frequentes

O que faz o Screenshot to Code?

Carrega uma imagem de uma interface de utilizador e a ferramenta devolve HTML com CSS inline que reproduz o layout, o espaçamento, as cores e o texto com a maior fidelidade que a captura de ecrã permitir.

Que formatos de imagem posso carregar?

Carregue capturas de ecrã em PNG ou JPG — exportações do Figma, páginas web ao vivo, mockups de aplicações ou wireframes desenhados à mão, tudo funciona. Uma captura nítida em resolução total produz o código mais exato.

Qual é o grau de exatidão do código gerado?

Produz um sólido ponto de partida estrutural — o esquema, as cores e a tipografia ficam normalmente próximos. Não é perfeito ao pixel e não recria interatividade nem lógica de backend, por isso conte com aperfeiçoar o markup.

Gera JavaScript ou apenas HTML/CSS?

Devolve HTML estático com CSS em linha que apresenta o esquema visual. Comportamento dinâmico, frameworks e gestão de eventos não são gerados — esses, acrescenta-os você mesmo.

Posso utilizar o código gerado comercialmente?

Sim. O resultado é seu para usar e modificar nos seus projetos. O plano gratuito oferece 5 utilizações por dia sem registo; o Pro custa $19/mês para mais.

A minha captura de ecrã é guardada após o processamento?

Não. A imagem carregada é processada para gerar o código e depois descartada — não é armazenada nem utilizada para treino.

Vai corresponder exatamente aos tipos de letra e às cores da marca?

Aproxima as cores e a tipografia a partir do que está visível. Os tipos de letra exatos da marca e os valores hexadecimais precisos podem exigir ajuste manual depois de colar o código.

🔒
A Sua Privacidade Está Protegida

Guardamos a sua entrada e o resultado durante um máximo de 90 dias para operar o serviço, prevenir abusos e, se tiver sessão iniciada, mostrar o seu histórico. São processados pelos fornecedores de IA indicados na nossa Política de Privacidade. Não os vendemos.

Ferramentas relacionadas

Inteligência de VisãoDescritor de ImagensEnvie uma foto, captura de ecrã, gráfico ou diagrama e receba uma descrição detalhada…Inteligência de VisãoGráfico para CSVCarregue um gráfico, diagrama ou visualização de dados e obtenha os dados subjacentes como…Inteligência de VisãoAnalisador de RecibosFaça upload de uma foto de um recibo ou fatura e receba um JSON…

Experimentar este agente

Agente Sprint de BlogGere um artigo completo, com mais de 3000 palavras e otimizado para SEO, em 5 passos:…Experimentar este agente →

Fluxo relacionado

Developer DocsCode to documentationExecutar fluxo →

Ler mais