Repolode
Enviar
leigest519

leigest519/ScreenCoder

Convierte capturas de interfaces y maquetas de diseño en HTML/CSS editable mediante un pipeline modular multiagente compatible con varios modelos.

Ver en GitHub
Estrellas
3,005
Forks
320
Issues abiertos
16
Último commit
el mes pasado

¿Qué es?

ScreenCoder genera código de interfaz a partir de una captura o una maqueta de diseño y produce código HTML/CSS para el frontend. Ejecuta un pipeline de componentes: detección de bloques, detección de elementos de interfaz mediante el motor UIED, generación de marcadores de posición y sustitución de imágenes, que inserta en la página generada regiones recortadas de la captura original.

El pipeline se divide en scripts de Python independientes, como block_parsor.py, html_generator.py, mapping.py e image_replacer.py; main.py ejecuta el flujo completo para una sola imagen. Se puede elegir entre Doubao (opción predeterminada), Qwen, GPT y Gemini como modelo de generación. La clave de API de cada proveedor se guarda en un archivo de texto local.

El proyecto también incluye un punto de entrada para una demo local al estilo de Gradio (app.py) y un enlace a una demo en Hugging Face, además del conjunto de datos ScreenBench, con capturas de sitios web acompañadas de su código HTML.

Funciones clave

  • 01Genera HTML/CSS editable a partir de una captura de interfaz o maqueta de diseño.
  • 02Detecta los componentes de la interfaz y los asigna a regiones de la página antes de generar el código.
  • 03Recorta regiones de la captura original y las inserta en el HTML resultante.
  • 04Admite Doubao, Qwen, GPT y Gemini como modelos de generación.
  • 05Incluye ScreenBench, un conjunto de datos de 1000 capturas de sitios web con su código HTML.

Casos de uso

  • Convertir una maqueta de diseño en una página HTML inicial para crear prototipos de frontend.
  • Reproducir el diseño de una página web existente a partir de una captura y generar código editable.
  • Crear un benchmark visual a código o realizar experimentos sobre la generación multimodal de interfaces.

Inicio rápido

  1. 1

    Clona el repositorio

    git clone https://github.com/leigest519/ScreenCoder.git
  2. 2

    Crea y activa un entorno virtual

    python3 -m venv .venv
  3. 3

    Instala las dependencias

    pip install -r requirements.txt
  4. 4

    Añade el archivo con la clave de API de tu modelo y ejecuta el sencillo script de extremo a extremo

    python main.py

Antes de usarlo

  • Debes proporcionar tu propia clave de API para un backend de modelos como Doubao, Qwen, GPT o Gemini.
  • Para seleccionar un modelo, hay que editar los archivos de código fuente (block_parsor.py y html_generator.py); no basta con cambiar un ajuste.

Temas

#screenshot-to-code#html-css#multimodal-llm#front-end#ui-generation#computer-vision

Preguntas frecuentes

¿Qué es ScreenCoder?
Convierte capturas de interfaces y maquetas de diseño en HTML/CSS editable mediante un pipeline modular multiagente compatible con varios modelos. ScreenCoder genera código de interfaz a partir de una captura o una maqueta de diseño y produce código HTML/CSS para el frontend. Ejecuta un pipeline de componentes: detección de bloques, detección de elementos de interfaz mediante el motor UIED, generación de marcadores de posición y sustitución de imágenes, que inserta en la página generada regiones recortadas de la captura original.
¿ScreenCoder es gratuito? ¿Qué licencia tiene?
ScreenCoder es open source bajo la licencia Apache-2.0. Revisa los términos de la licencia antes de usarlo en productos comerciales.
¿ScreenCoder sigue mantenido?
Actualizado en los últimos 6 meses. El último commit de ScreenCoder fue el 15 sept 2026.
¿Para qué puedo usar ScreenCoder?
Convertir una maqueta de diseño en una página HTML inicial para crear prototipos de frontend. Reproducir el diseño de una página web existente a partir de una captura y generar código editable. Crear un benchmark visual a código o realizar experimentos sobre la generación multimodal de interfaces.
¿Cómo se instala ScreenCoder?
Clona el repositorio: git clone https://github.com/leigest519/ScreenCoder.git Crea y activa un entorno virtual: python3 -m venv .venv Instala las dependencias: pip install -r requirements.txt Añade el archivo con la clave de API de tu modelo y ejecuta el sencillo script de extremo a extremo: python main.py
¿Dónde consigo ScreenCoder?
El código fuente y las instrucciones de instalación están en GitHub: https://github.com/leigest519/ScreenCoder

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

Proyectos relacionados