综合介绍

ScreenCoder是一个智能化的UI到代码生成系统，它可以将任何用户界面（UI）的屏幕截图或设计稿转换成干净、可随时用于生产环境的HTML/CSS代码。该系统基于一个模块化的多智能体架构构建，这个架构整合了视觉理解、布局规划和自适应代码合成等多个环节。通过这种方式，ScreenCoder不仅能生成准确的前端代码，还支持开发者和设计师对布局、样式进行灵活的自定义修改。无论你是需要快速制作产品原型，还是要求像素级精确地实现界面，ScreenCoder都能帮助你轻松地从设计图跨越到代码实现。简单来说，你只需要提供一张截图，就可以得到可以直接复制、修改和部署的前端代码，有效简化了从设计到开发的流程。

功能列表

• 截图转代码：将用户界面（UI）的屏幕截图或设计稿直接转换成结构清晰的HTML和CSS代码。
• 模块化智能体架构：采用多个专门的智能体协同工作，分别处理视觉分析、布局规划和代码生成等任务，提升了代码输出的准确性和质量。
• 支持多种大语言模型：用户可以选择使用不同的大语言模型进行代码生成，默认支持豆包（Doubao），同时兼容通义千问（Qwen）、GPT和Gemini。
• 支持自定义修改：生成的代码并非一成不变，允许开发者根据具体需求进行灵活的布局和样式调整。
• 自动化元素定位：能够自动检测截图中的UI元素，例如图像、文本框等，并在生成的HTML中用占位符标记。
• 图像资源自动裁剪：系统会自动从原始截图中裁剪出各个UI元素对应的图片，并将其应用到最终生成的HTML页面中。
• 一键式操作：提供了一个简化的main.py脚本，用户只需运行一个命令即可完成从截图分析到生成最终HTML代码的全部流程。

使用帮助

ScreenCoder是一个命令行工具，需要使用者具备基础的Python和终端操作知识。它的工作流程是通过一系列脚本，分步骤将一张UI截图最终转换成一个包含所有必要图片资源的完整HTML文件。

环境设置与安装

在使用ScreenCoder之前，你需要先设置好本地的运行环境，这个过程包括克隆代码、创建虚拟环境、安装依赖和配置模型API密钥。

1. 克隆代码仓库：首先，打开你的终端（命令行工具），进入你希望存放项目的工作目录，然后使用git命令将ScreenCoder的源代码从GitHub克隆到本地。

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

2. 创建并激活Python虚拟环境：为了避免与你电脑上其他Python项目的依赖库产生冲突，强烈建议创建一个独立的虚拟环境。

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

   执行上述命令后，你将进入一个干净的Python环境，终端提示符前会显示(.venv)字样。

3. 安装项目依赖：ScreenCoder所需要的所有第三方Python库都记录在requirements.txt文件中。你可以使用pip命令一键安装。

   pip install -r requirements.txt
   

4. 配置大语言模型（LLM）与API密钥：ScreenCoder借助大语言模型来理解截图内容并生成代码。你需要选择一个模型并提供对应的API密钥。
   • 选择模型：打开项目中的block_parsor.py和html_generator.py这两个文件，在代码中找到模型设置的选项，支持的模型包括Doubao（默认）、Qwen、GPT、Gemini。
   • 添加API密钥：在项目的根目录下，创建一个与你所选模型相对应的纯文本文件。例如，如果你选择使用豆包模型，就创建一个名为doubao_api.txt的文件。然后，将你的API密钥粘贴到这个文件中并保存。其他模型对应的文件名分别为qwen_api.txt、gpt_api.txt和gemini_api.txt。

核心功能操作流程

完成安装配置后，你就可以开始使用ScreenCoder将截图转换为代码了。官方提供了两种操作方式：分步执行和一键执行。

方式一：分步执行（了解实现细节）

这种方式让你能够清晰地看到从截图到代码的每一步转换过程。

1. 区块检测 (Block Detection)：此步骤会分析你的UI截图，并识别出页面中不同功能的区块（例如导航栏、内容区、页脚等）。

   python block_parsor.py
   

2. 生成带占位符的HTML (Generation with Placeholders)：基于上一步识别出的区块，此步骤会生成一个初步的HTML结构文件。在这个文件中，所有需要放置图片的地方都会用灰色方块作为占位符。

   python html_generator.py
   

3. 占位符位置检测 (Placeholder Detection)：该脚本用于精确定位上一步生成的HTML中所有灰色占位符的具体位置。

   python image_box_detection.py
   

4. UI元素检测 (UI Element Detection)：使用内置的UIED引擎，对原始截图进行详细分析，检测出截图中包含的所有具体UI元素（如按钮、图标、文本段落等）。

   python UIED/run_single.py
   

5. 映射对齐 (Mapping Alignment)：将占位符的位置信息与UI元素的位置信息进行匹配和对齐，确保每个元素都能被正确地放置到HTML布局中。

   python mapping.py
   

6. 占位符替换 (Placeholder Replacement)：最后一步，脚本会根据映射结果，从原始截图中自动裁剪出每个UI元素对应的图片，并替换掉HTML文件中的灰色占位符。执行完毕后，你将得到一个完整的、带有全部图片资源的HTML页面。

   python image_replacer.py
   

方式二：一键执行（简化操作）

如果你不需要关心中间过程，只想快速得到最终结果，可以直接运行main.py脚本。它会自动按顺序执行以上所有步骤。

python main.py

执行此命令后，等待程序运行结束，即可在项目目录中找到最终生成的HTML文件和相关的图片资源。

应用场景

1. 快速原型开发对于前端开发者而言，当需要根据设计稿快速搭建一个静态页面原型时，可以使用ScreenCoder。开发者只需将设计稿截图，工具即可自动生成基础的HTML/CSS代码。这套代码可以作为开发的起点，开发者无需从零开始编写布局和样式，从而将更多时间投入到功能逻辑的实现上。
2. 设计稿到代码的转换UI/UX设计师完成设计后，通常需要与前端工程师沟通以确保设计稿得到精确实现。ScreenCoder可以作为两者之间的桥梁。设计师可以自己动手，将设计稿直接转换为代码，为工程师提供一个高保真度的代码参考，减少因沟通不畅或理解偏差导致的的视觉效果差异。
3. 学习前端编码对于正在学习HTML和CSS的初学者来说，ScreenCoder是一个很好的辅助学习工具。他们可以通过观察自己喜欢的网页截图是如何被转换成结构化的代码的，来直观地理解不同视觉布局背后的代码实现原理，从而加深对前端知识的理解。

QA

1. ScreenCoder支持哪些截图格式？ScreenCoder主要处理常见的图片格式，如PNG、JPEG等。只要是清晰的UI屏幕截图，理论上都可以作为输入进行处理。
2. 生成的代码可以直接用于生产环境吗？ScreenCoder生成的是干净、结构化的HTML/CSS代码，可以作为“生产就绪”的基础代码。但根据实际业务需求的复杂性，你可能还需要在此基础上进行二次开发，例如添加JavaScript交互逻辑、进行性能优化或适配不同的后端数据接口。
3. 我是否需要付费才能使用ScreenCoder？ScreenCoder项目本身是开源免费的，你可以在GitHub上自由下载和使用其源代码。但请注意，它依赖第三方的大语言模型（如GPT、Gemini等）来完成代码生成，因此你在使用过程中可能会因为调用这些模型的API而产生费用，具体费用由相应的模型服务提供商收取。
4. 如果代码生成的效果不理想，我应该如何调整？如果生成的代码在布局或样式上不完全符合预期，你可以利用ScreenCoder支持自定义修改的特性。你可以直接编辑生成的HTML和CSS文件。此外，由于其架构是模块化的，你也可以尝试调整block_parsor.py等脚本中的参数，或者更换效果更好的大语言模型来优化输出结果。