leigest519/ScreenCoder

它解决了什么问题

ScreenCoder 自动将视觉设计（如截图或原型图）转换为可投入生产的 HTML 和 CSS 代码。它旨在弥合视觉设计与功能前端实现之间的差距，减少开发者从图像重建界面所需的手动工作量。

它如何工作

该系统采用模块化的多智能体架构，结合视觉理解与布局规划。整个过程遵循多步骤流程：

1. UI 元素检测：使用 UIED 引擎分析截图，检测组件。
2. 布局规划：将检测到的组件映射到逻辑页面区域，并使用占位符生成初始 HTML 布局。
3. 代码生成：使用多模态模型（支持 Doubao、Qwen、GPT 或 Gemini）生成实际代码。
4. 图像集成：识别占位符，并用原始截图中裁剪出的实际图像替换，生成最终的 HTML。

适用人群

该工具专为前端开发人员和设计师设计，适用于快速原型设计或从现有视觉资产创建像素级精确的网页。

特色亮点

• 模块化多智能体框架：结合了用于检测、规划和生成的专用智能体。
• 可自定义：支持用户对布局和样式进行自定义修改。
• 模型无关：兼容多种大语言模型，包括 GPT、Gemini、Qwen 和 Doubao。
• ScreenBench：包含一个全新的基准测试集，包含 1,000 张真实世界网页截图及其对应的 HTML 源代码，用于评估。