开源UI到代码生成工具！模块化多智能体，精准还原，支持快速原型与前端自动化！

作者

 

在 AI 编程领域，许多 AI 编程工具已实现了通过截图或设计稿就能自动生成前后端代码，，极大提升开发效率！

今天为大家推荐一款在 GitHub 开源的UI到代码生成系统，利用模块化多智能体框架，将UI截图或设计稿自动转为生产就绪的HTML/CSS代码。

它叫做 ScreenCoder，通过视觉理解、布局分析和自适应代码合成，弥合了设计与开发之间的鸿沟。

它通过精心设计的流程来分析截图，识别 UI 组件，并生成准确反映原始设计的结构化代码。

与其他生成单一代码块的解决方案不同，ScreenCoder 采用模块化方法，保留了 UI 的逻辑结构，使生成的代码更易于维护和自定义。这使得它既适合快速原型设计，也适合直接用于生产的实现。

GitHub项目地址: https://github.com/leigest519/ScreenCoder

主要功能

  • • 准确的视觉理解：精确识别和分类截图中的 UI 元素
  • • 结构化 HTML 生成：创建结构良好的 HTML，具有适当的组件层次结构
  • • Tailwind CSS 集成：使用 Tailwind CSS 进行样式设置，提供现代且灵活的方法
  • • 图像检测与替换：智能处理界面中的图像
  • • 多模型支持：兼容多个 LLM 提供商（Doubao、Qwen、GPT、Gemini）
  • • 自定义选项：支持修改指令以定制输出

工作原理

ScreenCoder 通过一系列专用组件的顺序流程来处理截图：

  1. 1. 区块解析：识别主要的 UI 区域，如标题、导航、侧边栏和主要内容区域
  2. 2. HTML 生成：创建初始 HTML 布局，并为图像预留灰色区块
  3. 3. 图像框检测：定位生成 HTML 中的所有预留元素
  4. 4. UI 元素检测：分析截图以检测和分类 UI 组件
  5. 5. 组件映射：将检测到的 UI 组件映射到布局结构
  6. 6. 图像替换：用截图中的实际裁剪图像替换预留区块

快速入手

HF上有搭建好的DEMO可直接体验。

HF-DEMO：https://huggingface.co/spaces/Jimmyzheng-10/ScreenCoder


  2. 以下是自定义部署步骤：

  4. 1. 克隆项目
git clone https://github.com/leigest519/ScreenCoder.git
cd ScreenCoder
  1. 2. 场景并激活虚拟环境
python -m venv .venv
source .venv/bin/activate  # 在Windows上: .venv\Scripts\activate
  1. 3. 安装所需依赖项
pip install -r requirements.txt
  1. 4. 配置模型API

通过编辑 block_parsor.py 和 html_generator.py 选择您偏好的模型，创建一个包含API密钥的文本文件：

  • • 对于豆宝：doubao_api.txt
  • • 对于Qwen：qwen_api.txt
  • • 对于GPT-4：gpt_api.txt
  • • 对于Gemini：gemini_api.txt

ScreenCoder 可以通过两种主要方式使用：

第一种：使用单个命令运行完整流程：

python main.py

这将自动通过所有阶段处理您的输入图像。

第二种：分步处理

为了更多控制，可以单独运行每个步骤：

步骤①：初始生成带预留区块

python block_parsor.py
python html_generator.py

步骤②：最终HTML代码（检测）

python image_box_detection.py
python UIED/run_single.py
python mapping.py
python image_replacer.py

应用场景

  • • 前端开发初稿自动生成
  • • 快速构建页面原型
  • • UI A/B 测试界面搭建
  • • 与设计工具协作输出代码（如 Figma + Screenshot）

写在最后

ScreenCoder 是一款智能的 UI 到代码生成系统，它可以将 UI 截图或设计原型转换为干净、可直接用于生产的 HTML/CSS 代码。

它以其智能的多智能体架构、高精度的视觉理解和灵活的可编辑性，为开发者与设计师提供了一个从截图到生产就绪代码的终极解决方案。

无论是快速原型、前端自动化还是学习前端开发，ScreenCoder都能让你事半功倍。

● 一款改变你视频下载体验的神器：MediaGo

● 字节把 Coze 核心开源了！可视化工作流引擎 FlowGram 上线，AI 赋能可视化流程！

● 英伟达开源语音识别模型！0.6B 参数登顶 ASR 榜单，1 秒转录 60 分钟音频！

● 开发者的文档收割机来了！这个开源工具让你一小时干完一周的活！

● PDF文档解剖术！OCR神器+1，这个开源工具把复杂排版秒变结构化数据！








（文：开源星探）

发表评论