ScreenCoder: Convierte capturas de diseño en código HTML/CSS limpio y editable 237

ScreenCoder es una herramienta de IA de código abierto que puede convertir cualquier captura de pantalla de diseño en código front-end HTML/CSS estructurado y editable. Utiliza una arquitectura modular multi-agente que combina comprensión visual, análisis de diseño y técnicas de generación de código, produciendo código con semántica precisa y diseño exacto. Los usuarios pueden ajustar fácilmente la estructura y el estilo de la interfaz, logrando una transición fluida del diseño a una interfaz front-end funcional, ideal para el prototipado rápido y proyectos que requieren una reproducción a nivel de píxel, mejorando notablemente la eficiencia del desarrollo.

Funciones principales de ScreenCoder

• De captura a código front-end: ScreenCoder admite la conversión de capturas de UI o archivos de diseño en código HTML y CSS bien estructurado con un solo clic.

• Alta fidelidad: el código generado por ScreenCoder es muy similar al diseño original en cuanto a diseño visual y estructura semántica, garantizando una alineación a nivel de píxel y funcionalidad completa.

• Flexible y editable: los usuarios pueden modificar libremente la estructura de diseño y las propiedades de estilo generadas, lo que facilita el desarrollo posterior y los ajustes personalizados.

• Integración multimodelo: compatible con varios modelos grandes populares, como Doubao, Qwen, GPT, Gemini, etc., lo que permite elegir el motor de generación según las necesidades.

• Resultados listos para usar: el código generado alcanza una calidad de nivel de producción y puede usarse directamente en proyectos, admitiendo la creación rápida de prototipos o interfaces front-end completas.

Arquitectura técnica de ScreenCoder

• La tecnología principal de ScreenCoder consiste en dividir la tarea compleja de UI a código en tres subtareas especializadas, cada una gestionada por un agente específico:

• Agente de localización (Grounding Agent): utiliza un modelo de lenguaje visual (VLM) para detectar y marcar los componentes clave en la interfaz de UI.

• Agente de planificación (Planning Agent): organiza estos componentes en un árbol de diseño jerárquico siguiendo las mejores prácticas de ingeniería front-end.

• Agente de generación (Generation Agent): genera de forma adaptativa código de alta calidad basándose en el árbol de diseño y las instrucciones del usuario.

Escenarios de aplicación de ScreenCoder

• Aceleración del desarrollo front-end: convierte rápidamente capturas de UI en código HTML/CSS de alta calidad, acortando los ciclos de desarrollo front-end.

• Colaboración entre diseño y desarrollo: convierte capturas de diseño directamente en código operativo, facilitando una colaboración fluida entre los equipos de diseño y desarrollo.

• Prototipado rápido: transforma conceptos de diseño en prototipos front-end interactivos al instante, acelerando la validación temprana del diseño de producto y las pruebas con usuarios.

• Educación y formación: como herramienta educativa, ayuda a estudiantes y desarrolladores noveles a comprender la relación entre el diseño de UI y el código front-end.

• Equipos pequeños y startups: ofrece una solución eficiente de generación de código para pequeños equipos y startups con recursos limitados.

Modo de uso de ScreenCoder

Instalación y despliegue

1. Clonar el repositorio: ejecuta el siguiente comando en el terminal para clonar el proyecto ScreenCoder en local:

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

2. Crear un entorno virtual: para evitar conflictos de dependencias, se recomienda crear un entorno virtual de Python:

python3 -m venv .venv
source .venv/bin/activate

Los usuarios de Windows deben usar: source .venv\Scripts\activate.

3. Instalar dependencias: instala las bibliotecas de Python necesarias para el proyecto:

pip install -r requirements.txt

4. Configurar el modelo y las claves de API:

• Crea en el directorio raíz del proyecto un archivo de texto plano correspondiente al modelo seleccionado (como doubao_api.txt, qwen_api.txt, gpt_api.txt, gemini_api.txt) y pega la clave de API en el archivo.

• Configura el modelo deseado en block_parsor.py y html_generator.py. Las opciones compatibles son: Doubao (predeterminado), Qwen, GPT, Gemini.

Modo de uso

1. Realizar la generación inicial con marcadores de posición:

Detección de bloques: ejecuta el siguiente comando para analizar la captura de UI introducida e identificar los componentes clave:

python block_parsor.py

Generar el HTML inicial con marcadores de posición: ejecuta el siguiente comando para generar el código HTML inicial con marcadores de posición (como bloques de imagen grises):

python html_generator.py

2. Generar el código HTML final:

Detección de marcadores de posición: ejecuta el siguiente comando para detectar las áreas de imagen que deben reemplazarse:

python image_box_detection.py

Ejecutar UIED para detectar elementos de UI específicos: ejecuta el siguiente comando para detectar los elementos de UI concretos en la captura:

python UIED/run_single.py

Mapear marcadores de posición con elementos reales: ejecuta el siguiente comando para mapear y alinear los marcadores de posición con los elementos reales de UI:

python mapping.py

Reemplazar las imágenes de marcador: ejecuta el siguiente comando para sustituir los marcadores de posición por las imágenes recortadas reales:

python image_replacer.py

3. Ejecución sencilla: si no deseas ejecutar los pasos por separado, puedes ejecutar directamente el siguiente comando para generar el código HTML final con un solo clic:

python main.py

Los archivos de salida se guardarán en el directorio output/, incluyendo index.html y los recursos css/ e images/ correspondientes.