ScreenCoder：将UI截图快速转化为HTML/CSS代码的工具

ScreenCoder（将UI截图快速转化为HTML/CSS代码的工具）简介

ScreenCoder是一个开源免费的将UI截图快速转化为HTML/CSS代码的工具，能够将任何UI截图或设计稿快速转换为干净、可编辑的代码，能够帮助我们大大提高了开发效率。该工具通过使用模块化的多代理架构，结合视觉理解、布局规划和自适应代码合成等技术，实现生成准确的前端代码。无论是快速原型设计，还是构建精确的用户界面，都能帮助开发者和设计师轻松搞定这一过程。

支持多种生成模型，包括 Doubao、Qwen、GPT 和 Gemini，我们可以根据自己的需求选择合适的模型

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

• 开源地址：https://github.com/leigest519/ScreenCoder

部署步骤

1. 克隆代码库

在终端中运行以下命令，将代码库克隆到本地：

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

2. 创建虚拟环境

创建一个 Python 虚拟环境以隔离项目依赖：

python3 -m venv .venv
source .venv/bin/activate  # Linux/macOS
# .venv\Scripts\activate  # Windows

3. 安装所需的依赖项：

pip install -r requirements.txt

4. 配置模型和 API 密钥，根据选择的生成模型，修改 block_parsor.py 和 html_generator.py 文件中的模型设置。支持的模型包括 Doubao（默认）、Qwen、GPT 和 Gemini。

创建一个文本文件以存放 API 密钥，例如 doubao_api.txt，并将密钥添加到文件中。确保该文件位于项目根目录，并且已包含在 .gitignore 中。

5. 运行应用程序，使用以下命令启动应用程序：

python main.py

6. 使用 非常简单，只需将设计截图上传，系统便会自动进行 UI 元素检测，生成初步的 HTML 代码。开发者还可以根据需要对生成的代码进行自定义修改，以满足实际项目的需求。