ScreenCoder

ScreenCoder是什么？

ScreenCoder是由香港中文大学MMLab与CUHK ARISE Lab开发的开源UI截图转代码生成系统，可将任意屏幕截图或设计稿快速转换为干净、可编辑的 HTML/CSS代码，采用模块化多代理架构结合视觉理解、布局规划与代码合成，支持豆包、Qwen、GPT、Gemini 等多模型，适合前端重构、UI 还原、快速原型搭建与设计开发协作。

核心亮点

• 截图转代码：将任意 UI 截图转换为结构化 HTML/CSS，语义与视觉高度还原原稿
• 模块化多代理架构：拆分为 UI 元素检测、布局规划、代码合成等步骤，确保生成质量
• 可编辑与定制：生成代码遵循组件化和语义化规范，方便开发者调整布局与样式
• 多模型支持：可接入豆包、Qwen、OpenAI GPT、Gemini 等模型辅助生成
• Firecrawl 集成：支持直接抓取网页结构并生成前端代码
• 本地运行与预览：一键启动本地服务，实时查看与修改生成页面

适用场景

• 前端重构：将旧网页改造成响应式、模块化前端应用
• UI 设计还原：直接将设计稿转化为可运行页面
• 快速原型搭建：创业团队在数分钟内完成产品演示页面
• 教育与研究：多模态 AI 在 Web/代码生成领域的实验与验证

项目结构

main.py：为单个屏幕截图生成最终 HTML 代码的主脚本。
UIED/：包含用于分析屏幕截图和检测组件的 UIED（UI 元素检测）引擎。
run_single.py：用于在单个图像上运行 UI 组件检测的 Python 脚本。
html_generator.py：获取检测到的组件数据并生成完整的 HTML 布局，其中包含为每个模块生成的代码。
image_replacer.py：一个脚本，用于将最终 HTML 中的占位符 div 替换为实际裁剪的图像。
mapping.py：将检测到的 UIED 组件映射到逻辑页面区域。
requirements.txt：列出项目的所有必要 Python 依赖项。
doubao_api.txt：豆包模型的 API 密钥文件（应保密，包含在 .gitignore 中）。

ScreenCoder（将UI截图快速转化为HTML/CSS代码的工具）官网及使用教程

1. 克隆项目

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

2. 创建虚拟环境

python3 -m venv .venv
source .venv/bin/activate # Windows 使用 .venv\Scripts\activate

3. 安装依赖

pip install -r requirements.txt