leigest519/ScreenCoder

What it solves

ScreenCoder automates the process of converting UI screenshots or design mockups into production-ready HTML and CSS code. It aims to bridge the gap between visual design and front-end development by reducing the manual effort required to translate a visual layout into a functional webpage.

How it works

The system uses a modular multi-agent architecture that breaks the visual-to-code process into several specialized steps:

1. UI Element Detection: It analyzes the screenshot to detect components and layout blocks.
2. Layout Planning: It maps detected components to logical page regions.
3. Code Synthesis: It generates the initial HTML layout using placeholders for images.
4. Image Integration: It detects placeholders and replaces them with actual cropped images from the original screenshot to create the final, polished HTML code.

Who it’s for

This tool is designed for front-end developers and designers who want to prototype interfaces quickly or convert high-fidelity mockups into editable code without starting from scratch.

Highlights

• Modular Multi-Agent Framework: Combines visual understanding and adaptive code synthesis for higher accuracy.
• Customizable: Supports modifications to layout and styling after the initial generation.
• Model Flexible: Compatible with multiple LLMs including Doubao, Qwen, GPT, and Gemini.
• ScreenBench: Includes a novel benchmark of 1,000 real-world web screenshots and corresponding HTML source code.