Repolode
Enviar
abi

abi/screenshot-to-code

Converte capturas de tela, mockups, designs do Figma e gravações de tela em código front-end para HTML, Tailwind, React, Vue e outras tecnologias usando modelos de IA.

Ver no GitHubSite
Estrelas
80,547
Forks
9,842
Issues abertas
148
Último commit
há 11 dias

O que é?

screenshot-to-code transforma uma entrada visual, como uma captura de tela, um mockup, um design do Figma ou uma gravação de tela, em código front-end funcional. Você escolhe a stack de destino, incluindo HTML com Tailwind ou CSS, React com Tailwind, Vue com Tailwind, Bootstrap ou Ionic com Tailwind, e a ferramenta gera código que reproduz o layout.

A geração usa modelos de IA hospedados da OpenAI, Anthropic, Google Gemini e Replicate. Quando o Gemini está configurado, a ferramenta consegue extrair logos e imagens reais da captura de tela e reutilizá-los na saída. Gravações de tela podem ser convertidas em um protótipo funcional do site exibido.

O projeto tem um frontend em React/Vite e um backend em FastAPI, e pode ser executado localmente com Docker Compose. Também há uma versão hospedada disponível. Para executar localmente, você precisa das suas próprias API keys dos provedores de modelos.

Recursos principais

  • 01Converte capturas de tela e designs do Figma em código HTML, React, Vue ou Bootstrap
  • 02Oferece estilos de saída com Tailwind, CSS puro e Ionic
  • 03Gera protótipos a partir de gravações de tela de um site
  • 04Extrai logos e imagens reais de capturas de tela quando o Gemini está configurado
  • 05Permite escolher entre modelos da OpenAI, Anthropic e Gemini

Casos de uso

  • Transformar um mockup de design em um ponto de partida para uma página front-end
  • Recriar o layout de um site existente a partir de uma captura de tela
  • Criar um protótipo de UI a partir de uma gravação de tela de um app existente

Início rápido

  1. 1

    Configure o backend com Poetry e instale as dependências

    cd backend && poetry install
  2. 2

    Instale o navegador Chromium para a ferramenta de pré-visualização de capturas de tela

    poetry run playwright install chromium
  3. 3

    Inicie o servidor backend na porta 7001

    poetry run uvicorn main:app --reload --port 7001
  4. 4

    Instale as dependências do frontend e inicie o servidor de desenvolvimento; depois, acesse http://localhost:5173

    cd frontend && pnpm install && pnpm dev

Antes de usar

  • Para executar localmente, é necessária pelo menos uma chave de API de modelo. O Replicate é altamente recomendado para usar todos os recursos.
  • A configuração inclui um backend FastAPI e um frontend React, então hospedar por conta própria exige algum esforço.
  • Os modelos de código aberto do Ollama não são recomendados devido à baixa qualidade dos resultados.

Tópicos

#ai#code-generation#screenshot-to-code#frontend#react#vue#tailwind#llm

Perguntas frequentes

O que é screenshot-to-code?
Converte capturas de tela, mockups, designs do Figma e gravações de tela em código front-end para HTML, Tailwind, React, Vue e outras tecnologias usando modelos de IA. screenshot-to-code transforma uma entrada visual, como uma captura de tela, um mockup, um design do Figma ou uma gravação de tela, em código front-end funcional. Você escolhe a stack de destino, incluindo HTML com Tailwind ou CSS, React com Tailwind, Vue com Tailwind, Bootstrap ou Ionic com Tailwind, e a ferramenta gera código que reproduz o layout.
screenshot-to-code é gratuito? Qual é a licença?
screenshot-to-code é open source sob a licença MIT. Confira os termos da licença antes de usá-lo em produtos comerciais.
screenshot-to-code ainda é mantido?
Manutenção ativa. O último commit de screenshot-to-code foi em 9 de out. de 2026.
Para que posso usar screenshot-to-code?
Transformar um mockup de design em um ponto de partida para uma página front-end Recriar o layout de um site existente a partir de uma captura de tela Criar um protótipo de UI a partir de uma gravação de tela de um app existente
Como instalar screenshot-to-code?
Configure o backend com Poetry e instale as dependências: cd backend && poetry install Instale o navegador Chromium para a ferramenta de pré-visualização de capturas de tela: poetry run playwright install chromium Inicie o servidor backend na porta 7001: poetry run uvicorn main:app --reload --port 7001 Instale as dependências do frontend e inicie o servidor de desenvolvimento; depois, acesse http://localhost:5173: cd frontend && pnpm install && pnpm dev
Onde consigo screenshot-to-code?
O código-fonte e as instruções de instalação estão no GitHub: https://github.com/abi/screenshot-to-code

Resumo gerado por IA a partir do README do projeto. As estatísticas do GitHub são atualizadas diariamente.

Projetos relacionados