← Descubrir
GitHub · abi/screenshot-to-code↑ +309 hoy

Convierta capturas de pantalla en código de trabajo

Screenshot-to-code es una herramienta de software que analiza archivos de captura de pantalla y los convierte en código HTML, Tailwind, React o Vue limpio. Permite a los desarrolladores traducir rápidamente diseños de interfaz en fragmentos de código funcionales.

Actualizaciones

  • 18 de septiembre de 2026: Estrellas 75,377 → 79,191.

Qué aporta

  • Traduce capturas de pantalla y archivos de diseño a HTML limpio o código React
  • Convierte grabaciones de sitios web en prototipos funcionales
  • Tailwind admite CSS y varias bibliotecas de interfaz populares

Instalación

Instalación rápida con Docker
echo "OPENAI_API_KEY=sk-your-key" > .env
docker-compose up -d --build
Iniciando la interfaz
cd frontend
pnpm install
pnpm dev

Si no programa

Pegue esto en su agente (Claude Code · Codex · Antigravity)

Analice la captura de pantalla y cree una estructura de código limpia y funcional que refleje exactamente el diseño de la imagen. Prepare la salida en formato HTML o React usando Tailwind CSS. Extraiga los logotipos y recursos reales de la imagen e inclúyalos en el código, codificando todos los elementos del diseño de forma responsiva.

Repositorio: https://github.com/abi/screenshot-to-code. Sigue las instrucciones oficiales del archivo README de este repositorio para la instalación y ejecución.

Antes de empezar, comprueba en qué sistema operativo estamos y si las herramientas necesarias (ej. Python, Node.js, Git, Docker) están instaladas. Instala las que falten paso a paso según este sistema.

Crea una carpeta nueva y vacía para trabajar. No toques ningún archivo fuera de esta carpeta y no borres nada. Antes de ejecutar cada comando, dime qué vas a hacer en una frase.

Dime qué debería ver en la pantalla al final de cada paso. Si ocurre un error, te pegaré el mensaje de error tal cual y lo solucionaremos juntos.

Términos relacionados del glosario

Code SnippetsArtificial Intelligence
Para quién esEs adecuado para diseñadores y desarrolladores de software que desean convertir rápidamente diseños de interfaz en bloques de código funcionales.
LicenciaMIT

Enlaces

TreScout no desarrolló esta herramienta · la encontramos en las tendencias de GitHub y la presentamos. Esta página describe el repositorio tal como estaba el 2026-08-28: El número de estrellas y nuestro texto son de ese día, el repositorio puede haber cambiado desde entonces. Consulte el enlace del repositorio para ver el estado actual. El texto de presentación se preparó con IA a partir de la propia documentación del repositorio y esta página se tradujo automáticamente del original en turco · prevalece la versión turca.