leigest519/ScreenCoder

ScreenCoder — Turn any UI screenshot into clean, editable HTML/CSS with full control. Fast, accurate, and easy to customize.

What it solves

ScreenCoder automates the process of turning visual designs—such as screenshots or mockups—into production-ready HTML and CSS code. It aims to bridge the gap between a visual design and its functional front-end implementation, reducing the manual effort required for developers to recreate interfaces from images.

How it works

The system uses a modular multi-agent architecture that combines visual understanding and layout planning. The process follows a multi-step pipeline:

  1. UI Element Detection: It analyzes the screenshot to detect components using a UIED engine.
  2. Layout Planning: It maps detected components to logical page regions and generates an initial HTML layout using placeholders.
  3. Code Synthesis: It uses a multimodal model (supporting Doubao, Qwen, GPT, or Gemini) to generate the actual code.
  4. Image Integration: It identifies placeholders and replaces them with actual cropped images from the original screenshot to produce the final HTML.

Who it’s for

This tool is designed for front-end developers and designers who want to rapidly prototype interfaces or create pixel-perfect web pages from existing visual assets.

Highlights

  • Modular Multi-Agent Framework: Combines specialized agents for detection, planning, and synthesis.
  • Customizable: Supports user-driven modifications to layout and styling.
  • Model Agnostic: Compatible with multiple LLMs including GPT, Gemini, Qwen, and Doubao.
  • ScreenBench: Includes a new benchmark of 1,000 real-world web screenshots and corresponding HTML source code for evaluation.

Related

  • Project
    ogkalu2/comic-translate

    An automated comic translator that uses LLMs, OCR, and inpainting to translate comics and manga from multiple languages while preserving the original visual layout.

  • Project
    sokrypton/ColabFold

    A tool that makes protein folding predictions accessible via Google Colab and local installations, integrating models like AlphaFold2 and AlphaFold3 to predict 3D protein structures.

  • Project
    datascale-ai/opentalking

    An open-source orchestration framework for real-time digital-human conversations, integrating LLMs, TTS, STT, and video rendering via WebRTC.

  • Project
    jjyaoao/HelloAgents

    HelloAgents is a Python library that provides a production‑grade framework for building multi‑agent AI applications. It wraps OpenAI‑compatible, Anthropic, and Gemini LLMs, offers built‑in tools (file I/O, task delegation, todo tracking), and includes engineering features such as context management, session persistence, circuit‑breaker, optimistic locking, observability, streaming SSE, and async lifecycle. Install via `pip install hello-agents`, configure a `.env` with your API credentials, and start agents like `ReActAgent` with a registered tool set.