UI自动化代码生成工具 ScreenCoder，将用户界面截图或设计草图通过AI转换为可编辑并符合生产标准的HTML/CSS代码

ScreenCoder 是一个智能的 UI 转代码生成工具，能将任何截图或设计原型转化为可用于生产环境的 HTML/CSS 代码，采用模块化多智能体架构，融合了视觉理解、布局规划和自适应代码合成等功能，生成的前端代码准确可编辑。

ScreenCoder支持自定义修改，支持开发者和设计师能调整布局和样式，支持快速制作原型和构建像素级界面。

ScreenCoder安装和部署

1克隆仓库：

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

2创建虚拟环境：

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

3安装依赖：

pip install -r requirements.txt

4配置模型和 API 密钥

• 选择生成模型：在 block_parsor.py 和 html_generator.py 中设置所需模型，支持的选项包括：豆包（默认）、Qwen、GPT、Gemini。

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

ScreenCoder使用方法

1使用占位符进行初始生成：运行 Python 脚本，为给定截图生成初始 HTML 代码。

• 块检测：执行 python block_parsor.py 命令。

• 使用占位符（灰色图像块）生成：运行 python html_generator.py 命令。

2最终 HTML 代码：运行 Python 脚本，从原始截图生成带有裁剪图像的最终 HTML 代码。

• 占位符检测：执行 python image_box_detection.py 命令。

• UI 元素检测：运行 python UIED/run_single.py 命令。

• 占位符与 UI 元素之间的映射对齐：执行 python mapping.py 命令。

• 占位符替换：运行 python image_replacer.py 命令。

3简单运行：执行 python main.py 命令生成最终 HTML 代码。