ScreenCoder

ScreenCoder 是一个能把任意设计截图转换成结构清晰、可编辑的 HTML/CSS 前端代码开源ai工具。它用模块化多智能体架构，结合视觉理解、布局解析和代码生成技术，输出的代码语义准确、布局精准。用户能轻松调整界面结构和样式，实现从设计图到可运行前端界面的无缝衔接，适合快速原型开发和需要像素级还原的项目，能明显提升开发效率。

ScreenCoder主要功能

• 截图转前端代码：ScreenCoder支持把 UI 截图或设计稿一键转换成结构良好的 HTML 和 CSS 代码。

• 高保真还原：ScreenCoder生成的代码在视觉布局和语义结构上和原始设计高度接近，保证像素级对齐和功能完整。

• 灵活可编辑：用户可以自由修改生成的布局结构和样式属性，方便后续开发和定制调整。

• 多模型集成：兼容多种主流大模型，如 Doubao、Qwen、GPT、Gemini 等，用户能按需选择生成引擎。

• 即用型输出：生成的代码达到生产级质量，可直接用于项目，支持快速构建原型或完整前端界面。

ScreenCoder技术架构

• ScreenCoder 的核心技术是把 UI 到代码的复杂任务拆分成三个专业子任务，每个子任务由专门的智能体负责：

• 定位智能体（Grounding Agent）：用视觉语言模型（VLM）检测并标记 UI 界面中的关键组件。

• 规划智能体（Planning Agent）：根据前端工程的最佳实践，把这些组件组织成层级化的布局树。

• 生成智能体（Generation Agent）：基于布局树和用户指令，自适应生成高质量代码。

ScreenCoder应用场景

• 前端开发加速：快速把 UI 设计截图转换成高质量 HTML/CSS 代码，缩短前端开发周期。

• 设计与开发协作：把设计截图直接转换成可操作的代码，促进设计和开发团队的无缝协作。

• 快速原型制作：能即时把设计概念转化成可交互的前端原型，加速产品设计的早期验证和用户测试。

• 教育与培训：作为教育工具，帮助学生和新手开发者理解 UI 设计和前端代码的关系。

• 小型团队与创业公司：为资源有限的小型团队和创业公司提供高效的代码生成方案。

ScreenCoder使用方法

安装与部署

1. 克隆仓库：在终端运行以下命令，把 ScreenCoder 项目克隆到本地：

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

2. 创建虚拟环境：为避免依赖冲突，建议创建 Python 虚拟环境：

python3 -m venv .venv
source .venv/bin/activate

Windows 用户使用：source .venv\Scripts\activate。

3. 安装依赖：安装项目所需的 Python 库：

pip install -r requirements.txt

4. 配置模型和 API 密钥：

• 在项目根目录下创建与所选模型对应的纯文本文件（如 doubao_api.txt、qwen_api.txt、gpt_api.txt、gemini_api.txt），把 API 密钥粘贴到文件中。

• 在 block_parsor.py 和 html_generator.py 中设置所需模型，支持的选项有：Doubao（默认）、Qwen、GPT、Gemini。

使用方法

1. 使用占位符进行初始生成：

块检测：运行以下命令，分析输入的 UI 截图，识别关键组件：

python block_parsor.py

生成带占位符的初始 HTML：运行以下命令，生成带有占位符（如灰色图像块）的初始 HTML 代码：

python html_generator.py

2. 生成最终 HTML 代码：

占位符检测：运行以下命令，检测需要替换的图像区域：

python image_box_detection.py

运行 UIED 检测具体 UI 元素：运行以下命令，检测截图中的具体 UI 元素：

python UIED/run_single.py

映射占位符与实际元素：运行以下命令，把占位符和实际 UI 元素进行映射对齐：

python mapping.py

替换占位图：运行以下命令，把占位符替换为真实的裁剪图像：

python image_replacer.py

3. 简单运行：如果不想分步执行，可以直接运行以下命令，一键生成最终的 HTML 代码：

python main.py

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