ScreenCoder

香港中文大学研究团队近日推出 ScreenCoder —— 一个用于前端自动化开发的多模态智能体框架，能够将任意 UI 截图（如设计稿、原型图或屏幕快照）自动转换为干净、可编辑、生产就绪的 HTML/CSS 代码。

它不仅生成准确的布局结构，还支持后续定制化修改，真正实现“设计即代码”的开发闭环。

什么是 ScreenCoder？

ScreenCoder 是一个端到端的 UI 到代码生成系统，目标是弥合设计与开发之间的鸿沟。

只需上传一张界面截图（例如包含按钮、导航栏、卡片布局的设计图），系统即可：

1. 自动识别 UI 组件
2. 解析视觉层次与布局关系
3. 生成结构清晰、语义合理的 HTML + CSS 代码

生成的代码具备高保真还原度，支持响应式基础结构，并保留可编辑性，便于开发者进一步调整。

✅ 适用场景：快速原型开发、设计稿落地、教学演示、低代码增强

核心能力：准确、可控、可扩展

技术架构：多代理协同工作流

ScreenCoder 采用模块化多代理架构，将整个转换过程拆解为多个可独立运行的步骤：

截图输入  
→ UI 元素检测（UIED）  
→ 布局块解析（Block Parsing）  
→ 语义区域映射（Mapping）  
→ HTML 骨架生成（HTML Generator）  
→ 图像占位符检测与裁剪  
→ 最终图像替换（Image Replacer）  
→ 输出完整页面

这种设计确保了每个环节的可控性与可解释性，避免“黑箱生成”。

使用流程：五步生成可用前端代码

1. 克隆项目并进入目录

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

2. 创建虚拟环境并安装依赖

python3 -m venv .venv
source .venv/bin/activate
pip install -r requirements.txt

3. 配置大模型 API 密钥

ScreenCoder 使用大模型进行语义理解与代码生成，支持以下后端：

• Doubao（默认）
• Qwen
• GPT（OpenAI）
• Gemini（Google）

操作步骤：

• 在项目根目录创建对应密钥文件：

  echo "your-api-key" > doubao_api.txt
  

  （文件名根据所选模型命名：qwen_api.txt、gpt_api.txt、gemini_api.txt）

• 已加入 .gitignore，防止密钥泄露
• 修改 block_parsor.py 和 html_generator.py 中的 MODEL_NAME 变量以切换模型

4. 执行生成流程

方法一：分步执行（推荐用于调试）

# 1. 检测布局块
python block_parsor.py

# 2. 生成带占位符的初始 HTML
python html_generator.py

# 3. 检测需替换的图像区域
python image_box_detection.py

# 4. 运行 UIED 检测具体 UI 元素
python UIED/run_single.py

# 5. 映射占位符与实际元素
python mapping.py

# 6. 替换占位图为真实裁剪图像
python image_replacer.py

方法二：一键运行（生成最终 HTML）

python main.py

输出文件将保存在 output/ 目录下，包含 index.html 和对应的 css/ 与 images/ 资源。

效果对比：更准确，更贴近原始设计

研究团队提供了多个定性案例，展示 ScreenCoder 相比现有方法的优势：

✅ 优势体现：

• 更精确的组件边界识别
• 更合理的 DOM 层级组织
• 更忠实于原图的样式还原
• 图像区域自动提取，无需手动替换

项目结构说明

局限与展望

当前限制

• 依赖外部大模型 API（需自行申请密钥）
• 对复杂交互（如 JS 动画、动态状态）暂不支持
• 响应式适配有限，主要面向桌面端布局

未来方向

• 支持生成 React/Vue 组件代码
• 增加对 Figma/Sketch 文件的直接解析
• 引入本地化模型以减少 API 依赖