ScreenCoder：将UI截图转为可编辑HTML/CSS代码的工具

ScreenCoder是一个开源工具，旨在将用户界面（UI）截图或设计草图转化为可直接用于生产的HTML和CSS代码。它采用模块化多智能体框架，通过视觉理解、布局规划和代码生成三个步骤，将复杂的设计转化为结构清晰、可编辑的代码。开发者或设计师可以快速将设计原型转为实际网页，节省手动编码时间。ScreenCoder支持多种生成模型，如Doubao、Qwen、GPT和Gemini，适合不同开发需求。代码在GitHub上公开，允许用户自由下载、修改和部署。

功能列表

• 将UI截图或设计草图转化为HTML/CSS代码。
• 支持模块化多智能体框架，分为视觉识别、布局规划和代码生成三个阶段。
• 支持多种生成模型（Doubao、Qwen、GPT、Gemini），用户可根据需求选择。
• 提供可编辑的代码输出，便于开发者自定义调整。
• 自动生成大规模图像-代码对，用于优化模型性能。
• 支持快速原型开发和像素级精准的界面实现。

使用帮助

安装流程

要使用ScreenCoder，用户需要先从GitHub仓库下载代码并配置环境。以下是详细的安装步骤：

1. 克隆仓库
   在终端运行以下命令，将ScreenCoder项目克隆到本地：
   “`bash
   git clone https://github.com/leigest519/ScreenCoder.git
   cd screencoder

2. 创建虚拟环境
   为避免依赖冲突，建议创建Python虚拟环境：
   “`bash
   python3 -m venv .venv
   source .venv/bin/activate

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

3. 安装依赖
   安装项目所需的Python库：
   “`bash
   pip install -r requirements.txt

4. 配置模型和API密钥
   ScreenCoder支持多种生成模型（如Doubao、Qwen、GPT、Gemini）。用户需在项目根目录下创建对应的API密钥文件（如doubao_api.txt、qwen_api.txt等），并将API密钥粘贴到文件中。
   然后，在block_parsor.py和html_generator.py中设置所需模型。例如，修改配置文件中的模型参数为：
   “`python
   model = “Doubao” # 或者 Qwen, GPT, Gemini

使用流程

ScreenCoder的操作分为以下几个步骤，用户可以通过命令行完成UI到代码的转换：

1. 块检测（Block Detection）
   运行block_parsor.py脚本，分析输入的UI截图，识别关键组件（如导航栏、侧边栏、内容区域等）。命令如下：
   “`bash
   python block_parsor.py

这一步会生成组件的标签和位置信息，为后续布局规划做准备。

2. 生成带占位符的代码
   运行html_generator.py脚本，生成带有占位符的初始HTML代码：
   “`bash
   python html_generator.py

输出代码包含页面结构和占位符（例如灰色图像块），便于进一步编辑。

3. 内容映射与最终代码生成
   在生成占位符代码后，ScreenCoder会将识别的UI组件映射到最终的HTML/CSS代码。用户可根据需要手动调整代码，确保样式和布局符合预期。

特色功能操作

• 视觉识别（Grounding Agent）
  ScreenCoder的视觉识别模块使用视觉-语言模型（VLM）分析UI截图，自动检测并标记界面中的关键元素，如按钮、导航栏、文本框等。这一功能确保生成的代码结构与设计高度一致。用户只需上传PNG或JPG格式的截图，系统会自动处理并输出组件标签。
• 布局规划（Planning Agent）
  布局规划模块根据前端工程原理，组织识别的组件，形成层次化的页面结构。例如，它会将导航栏放在顶部，侧边栏放在左侧，主内容区域居中。用户无需手动指定布局，系统会自动生成合理的HTML结构。
• 代码生成（Generation Agent）
  代码生成模块通过自适应提示生成HTML和CSS代码。生成的代码干净、语义清晰，符合现代Web开发标准。用户可以在生成后直接复制代码到项目中，或根据需要调整样式和功能。

注意事项

• 确保输入的截图清晰，UI元素明确，避免模糊或过于复杂的图像。
• 检查API密钥的有效性，确保所选模型的API服务正常。
• 如果需要调整代码，建议在生成后使用代码编辑器（如VS Code）检查和优化CSS样式。

通过以上步骤，用户可以快速将设计稿转为可用的网页代码，适合快速原型开发或生产环境部署。

应用场景

1. 快速原型开发
   设计师或开发者需要快速将UI设计稿转为可交互的网页原型。ScreenCoder能自动生成HTML/CSS代码，缩短从设计到开发的时间。
2. 前端自动化
   前端开发团队希望自动化生成代码，减少重复性工作。ScreenCoder的模块化框架提供高精度代码，适合大规模项目。
3. 学习与教学
   编程初学者或前端开发课程可以使用ScreenCoder，将实际UI设计转为代码，学习HTML/CSS的结构与编写方式。
4. 跨平台界面开发
   开发者需要将同一设计稿应用于多个平台（如Web和移动端）。ScreenCoder生成的代码可作为基础，稍作调整即可适配不同设备。

QA

1. ScreenCoder支持哪些文件格式？
   ScreenCoder支持PNG和JPG格式的UI截图或设计草图。确保图像清晰，UI元素明确，以获得最佳转换效果。
2. 是否需要编程经验？
   不需要深入的编程经验，但熟悉HTML/CSS的用户能更好地调整生成的代码。初学者可直接使用生成的代码。
3. 如何选择生成模型？
   在block_parsor.py和html_generator.py中设置模型（如Doubao、Qwen等），并提供对应API密钥。不同模型可能影响生成速度和代码质量，建议根据需求测试。
4. 生成的代码是否需要手动调整？
   生成的代码通常可直接使用，但复杂设计可能需要手动调整CSS样式或HTML结构，以满足特定需求。
5. ScreenCoder是否免费？
   ScreenCoder是开源项目，代码免费公开在GitHub上。但使用某些生成模型（如GPT、Gemini）需要自行获取API密钥，可能涉及费用。