Repolode
Enviar
abi

abi/screenshot-to-code

Convierte capturas de pantalla, maquetas, diseños de Figma y grabaciones de pantalla en código de front-end con HTML, Tailwind, React, Vue y otros formatos mediante modelos de IA.

Ver en GitHubSitio web
Estrellas
80,547
Forks
9,842
Issues abiertos
148
Último commit
hace 11 días

¿Qué es?

screenshot-to-code convierte una entrada visual, como una captura de pantalla, una maqueta, un diseño de Figma o una grabación de pantalla, en código de front-end funcional. Puedes elegir el stack de destino, que incluye HTML con Tailwind o CSS, React con Tailwind, Vue con Tailwind, Bootstrap o Ionic con Tailwind, y la herramienta genera código que reproduce la composición visual.

La generación utiliza modelos de IA alojados de OpenAI, Anthropic, Google Gemini y Replicate. Si configuras Gemini, la herramienta puede extraer logotipos e imágenes reales de la captura de pantalla y reutilizarlos en el resultado. Las grabaciones de pantalla se pueden convertir en un prototipo funcional del sitio que muestran.

El proyecto tiene un front-end con React/Vite y un back-end con FastAPI, y puede ejecutarse localmente con Docker Compose. También hay una versión alojada. Para ejecutarlo localmente, necesitas tus propias API keys de los proveedores de modelos.

Funciones clave

  • 01Convierte capturas de pantalla y diseños de Figma en código HTML, React, Vue o Bootstrap
  • 02Admite estilos de salida con Tailwind, CSS sin procesar e Ionic
  • 03Genera prototipos a partir de grabaciones de pantalla de un sitio web
  • 04Extrae logotipos e imágenes reales de las capturas de pantalla si Gemini está configurado
  • 05Permite elegir entre modelos de OpenAI, Anthropic y Gemini

Casos de uso

  • Convertir una maqueta de diseño en un punto de partida para una página de front-end
  • Reconstruir la composición de un sitio web existente a partir de una captura de pantalla
  • Crear un prototipo de una interfaz de usuario a partir de una grabación de pantalla de una aplicación existente

Inicio rápido

  1. 1

    Configura el backend con Poetry e instala las dependencias

    cd backend && poetry install
  2. 2

    Instala el navegador Chromium para la herramienta de vista previa de capturas de pantalla

    poetry run playwright install chromium
  3. 3

    Inicia el servidor backend en el puerto 7001

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

    Instala las dependencias del frontend e inicia el servidor de desarrollo; después, abre http://localhost:5173

    cd frontend && pnpm install && pnpm dev

Antes de usarlo

  • Para ejecutarlo localmente se necesita al menos una clave de API de un modelo, y se recomienda encarecidamente Replicate para disfrutar de todas las funciones.
  • La configuración incluye tanto un backend FastAPI como un frontend React, por lo que alojarlo por tu cuenta requiere cierto esfuerzo.
  • No se recomiendan los modelos de código abierto de Ollama debido a la baja calidad de los resultados.

Temas

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

Preguntas frecuentes

¿Qué es screenshot-to-code?
Convierte capturas de pantalla, maquetas, diseños de Figma y grabaciones de pantalla en código de front-end con HTML, Tailwind, React, Vue y otros formatos mediante modelos de IA. screenshot-to-code convierte una entrada visual, como una captura de pantalla, una maqueta, un diseño de Figma o una grabación de pantalla, en código de front-end funcional. Puedes elegir el stack de destino, que incluye HTML con Tailwind o CSS, React con Tailwind, Vue con Tailwind, Bootstrap o Ionic con Tailwind, y la herramienta genera código que reproduce la composición visual.
¿screenshot-to-code es gratuito? ¿Qué licencia tiene?
screenshot-to-code es open source bajo la licencia MIT. Revisa los términos de la licencia antes de usarlo en productos comerciales.
¿screenshot-to-code sigue mantenido?
Mantenimiento activo. El último commit de screenshot-to-code fue el 9 oct 2026.
¿Para qué puedo usar screenshot-to-code?
Convertir una maqueta de diseño en un punto de partida para una página de front-end Reconstruir la composición de un sitio web existente a partir de una captura de pantalla Crear un prototipo de una interfaz de usuario a partir de una grabación de pantalla de una aplicación existente
¿Cómo se instala screenshot-to-code?
Configura el backend con Poetry e instala las dependencias: cd backend && poetry install Instala el navegador Chromium para la herramienta de vista previa de capturas de pantalla: poetry run playwright install chromium Inicia el servidor backend en el puerto 7001: poetry run uvicorn main:app --reload --port 7001 Instala las dependencias del frontend e inicia el servidor de desarrollo; después, abre http://localhost:5173: cd frontend && pnpm install && pnpm dev
¿Dónde consigo screenshot-to-code?
El código fuente y las instrucciones de instalación están en GitHub: https://github.com/abi/screenshot-to-code

Resumen generado por IA a partir del README del proyecto. Las estadísticas de GitHub se actualizan a diario.

Proyectos relacionados