项目背景与核心功能
ScreenCoder是由香港中文大学MMLab与CUHK ARISE Lab开发的AI驱动的UI-to-Code生成系统。它能够将任意UI截图或设计稿（如Figma原型、线框图）转化为结构清晰、可编辑的HTML/CSS代码，并支持自定义修改，支持豆包、Qwen、GPT、Gemini 等多模型。其核心优势在于：
- 模块化多代理架构：结合视觉理解、布局规划和自适应代码合成，实现高精度转换。
- 全栈控制：开发者可直接编辑生成的代码，灵活调整布局与样式。
- 极速生成：支持本地化部署，数秒内完成复杂界面的代码生成。
Github开源地址是：
https://github.com/leigest519/ScreenCoder?
技术亮点与创新点
1.多代理协作流程
ScreenCoder通过视觉感知、布局解析、代码生成三个核心模块协同工作：
- UI元素检测（UIED）：基于深度学习识别截图中的组件（按钮、输入框、图片等）。
- 布局规划：分析组件层级与位置，生成符合CSS规范的布局结构。
- 代码合成：结合语义信息生成HTML/CSS，支持占位符替换为真实图片。
2.自定义修改能力
- 占位符替换：生成的代码中图片区域为灰色占位符，可通过image_replacer.py脚本替换为原始截图中的实际图片。
- 代码可编辑性：输出的HTML/CSS完全符合W3C标准，开发者可直接优化样式或添加交互逻辑。
3.支持多模型引擎
ScreenCoder兼容多种大模型API（Doubao/Qwen/GPT/Gemini），用户可根据需求选择模型：
# 示例：在block_parser.py中切换模型
"model": "Qwen" # 支持 Doubao (默认), Qwen, GPT, Gemini完整使用流程
1.环境准备
# 克隆仓库
git clone https://github.com/leigest519/ScreenCoder.git
cd ScreenCoder
# 创建虚拟环境
python3 -m venv .venv
source .venv/bin/activate
# 安装依赖
pip install -r requirements.txt使用PyCharm打开该项目，创建虚拟环境，并且安装相关依赖
项目结果如下：
ScreenCoder/
├── main.py # 主入口脚本
├── UIED/ # UI元素检测引擎
├── block_parser.py # 布局解析模块
├── html_generator.py # 代码生成器
├── image_replacer.py # 图片替换工具
├── mapping.py # 组件与代码映射
├── requirements.txt # 依赖包清单我们打开布局解析模块，可以看到一个默认key路径的配置，这个是配置大模型key的地方，支持doubao, qwen, gpt, gemini，这里我们使用qwen
# 示例：使用Qwen时
echo "YOUR_QWEN_API_KEY" > qwen_api.txt选择生成模型 ：在 block_parsor.py 和 html_generator.py 中选择需要的模型。选择项：豆包（默认）、Qwen、GPT、Gemini。
运行生成流程
步骤1：UI组件检测
python UIED/run_single.py --image path/to/screenshot.png步骤2：生成带占位符的HTML
python html_generator.py --image path/to/screenshot.png步骤3：替换占位符为真实图片
python image_replacer.py --html output.html --image path/to/screenshot.png一步完成（推荐）
python main.py --image path/to/screenshot.png示例中用了YouTube的网站来测试，网页截图如下：
执行完生成的html代码如下，网站上的图片也存到了cropped_images文件夹下面：
我们打开这个网页看一下，还原效果还是杠杠的：
结语
ScreenCoder通过AI+模块化架构，彻底革新了UI到代码的转换流程，为前端开发提供了前所未有的效率与灵活性。无论是快速原型设计还是生产级代码生成，它都是开发者不可或缺的工具。立即访问GitHub体验革命性技术！