ScreenCoder — 将任何 UI 截图转换为简洁、可编辑的 HTML/CSS，并可完全控制。通过模块化多模代理推进前端自动化的视觉到代码生成

本文更新于: 2025年8月19日

ScreenCoder 可以直接把任何截图或设计稿转换成结构清晰、可读性强的前端代码。 支持 GPT-4o、Gemini-2.5-Pro 等模型，其最大亮点是内置了多个 Agent 互相协作，复刻的效果远比这些单一模型实现的要好。

ScreenCoder：通过模块化多模代理推进前端自动化的视觉到代码生成， 将任何 UI 截图转换为简洁、可编辑的 HTML/CSS，并可完全控制。快速、准确且易于自定义

项目介绍

ScreenCoder是一款智能的 UI 到代码生成系统，能够将任何截图或设计模型转换为简洁、可直接用于生产的 HTML/CSS 代码。它采用模块化多智能体架构，融合了视觉理解、布局规划和自适应代码合成等功能，能够生成精准且可编辑的前端代码。

它还支持自定义修改，让开发人员和设计人员轻松调整布局和样式。无论您是快速制作原型，还是构建像素级完美的界面，ScreenCoder 都能轻松衔接设计与开发——只需复制、自定义和部署即可。

项目截图

主要特性：

– 一键将截图/设计稿转成 HTML + CSS 页面

– 支持多种模型，包括 Doubao、GPT、Qwen、Gemini 等

– 模块识别 + 样式合成，结构更清晰 – 输出代码可部署、可编辑

– 支持可视化替换图像模块

-支持 UI 组件检测与布局还原 克隆仓库安装依赖后，配置模型 API 密钥，只需运行 `http://main.py` 脚本即可一键生成页面。

项目地址

GitHub：http://github.com/leigest519/ScreenCoder

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