ScreenCoder智能工具app官方下载

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

ScreenCoder主要功能

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

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

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

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

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

ScreenCoder技术架构

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

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

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

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

ScreenCoder应用场景

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

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

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

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

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

ScreenCoder使用方法

安装与部署

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

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

Windows用户使用：source.venvScriptsactivate。

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

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截图，识别关键组件：

pythonblock_parsor.py

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

pythonhtml_generator.py

2.生成最终HTML代码：

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

pythonimage_box_detection.py

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

pythonUIED/run_single.py

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

pythonmapping.py

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

pythonimage_replacer.py

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

pythonmain.py

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