插件|skill
免费
非原创
ScreenCoder
由 管理员 投稿，2 次浏览。
项目全称 ScreenCoder，是香港中文大学团队开源的 AI 截图转前端代码工具，核心能力：上传网页 / APP UI 截图、设计稿，自动输出像素对齐、可直接二次开发的 HTML+CSS 代码
一、项目定位与核心价值
一句话定位：多智能体视觉 UI 转代码开源框架，解决 “设计图还原前端页面耗时、布局错位、代码杂乱” 痛点，适合前端快速原型、复刻页面、设计师转代码学习。
- 输入：任意网页截图、App 界面截图、UI 设计稿图片
- 输出：结构规范、可编辑、像素级还原的 HTML/CSS，支持原生 CSS 或 Tailwind 布局
- 配套：有学术论文支撑、在线 HuggingFace 演示、本地 Python 一键部署方案AI分享圈
二、核心技术架构（三段式多智能体流水线）
项目采用模块化 Agent 分工处理，分为三大核心模块，源码对应独立文件：
1. Grounding Agent（UIED 视觉检测引擎）
对应文件：
block_parsor.py、UIED 检测模块- 视觉分割识别截图内全部元素：按钮、文字、图片、输入框、导航栏、卡片、图标
- 输出每个组件坐标、尺寸、文本内容、类型标签，解决普通 VLM 分不清多层布局的问题화니의 세...
2. Planning Agent（布局规划引擎）
负责层级排版逻辑：
- 根据检测到的组件坐标，自动划分父 / 子层级，生成 Grid/Flex 布局结构
- 区分侧边栏、列表、卡片、弹窗等常见页面模块，保证还原不跑偏
- 输出标准化布局 JSON，作为代码生成输入
3. Generation Agent（代码生成引擎）
对应文件：
html_generator.py- 对接主流大模型 API 生成前端代码
- 支持多模型切换：GPT、Gemini、通义千问 Qwen、豆包 Doubao
- 自适应 Prompt，控制代码整洁度、语义化标签、CSS 样式还原度DeepWiki
辅助模块：
image_replacer.py：自动占位图片映射，可替换本地图片资源mapping.py：元素坐标与 DOM 节点对齐校准，减少像素偏差
三、关键功能特性
- 像素级 UI 还原 相比普通截图转代码工具，通过视觉检测 + 布局分层双重校验，页面对齐精度大幅提升，适合复刻官网、后台管理页、移动端界面。
- 多 LLM 模型自由切换 无需重新部署，仅配置对应 API 密钥即可切换模型，国内用户优先支持通义千问、豆包，无需海外网络。
- 代码可商用、易二次修改 生成代码无冗余垃圾标签，语义化 HTML，CSS 分离，可直接套入项目，支持导出 Tailwind CSS 版本。
- 两种使用方式
- 在线体验：HuggingFace Demo（开箱即用，无需本地环境） https://huggingface.co/spaces/Jimmyzheng-10/ScreenCoder
- 本地部署：Python 开源项目，克隆仓库、配置 API Key 即可离线运行
- 开源学术背书 配套 arXiv 技术论文：https://arxiv.org/pdf/2507.22827，完整阐述多智能体 UI 转代码算法原理，可用于二次研究、微调模型寻道AI小...
四、适用场景
- 前端快速原型：产品草图、UI 稿直接生成页面，省去切图写布局
- 页面复刻：参考优秀网站截图快速复刻页面结构，二次修改
- 设计师转前端学习：对比截图与生成代码，理解布局逻辑
- 小团队 / 创业公司提效：减少设计转开发沟通成本，降低前端人力消耗
- AI 多模态代码生成研究：开源模块化架构，可二次改造训练自有视觉模型
五、本地部署极简流程
bash
运行
# 1. 克隆仓库
git clone https://github.com/leigest519/ScreenCoder.git
cd ScreenCoder
# 2. 创建虚拟环境安装依赖
python -m venv venv
pip install -r requirements.txt
# 3. 配置模型API密钥（修改对应txt文件：gpt_api.txt/qwen_api.txt等）
# 4. 启动主流水线
python main.py
运行后上传截图，选择模型，一键生成完整 HTML 文件。
六、对比同类工具优势
- 纯开源可本地私有化部署，无需付费云端服务
- 多智能体分层拆解视觉 + 布局 + 代码，比单一 LLM 直接看图更精准
- 原生适配国内大模型（通义、豆包），无海外网络门槛
- 模块化代码结构，开发者可单独替换视觉检测 / 代码生成模块
七、注意事项
- 工具依赖第三方大模型 API，需自行申请对应平台密钥并充值
- 复杂动效、JS 交互无法生成，仅输出静态 HTML+CSS
- 截图清晰度越高、界面元素越规整，生成代码效果越好
- 项目开源协议为学术友好开源，商用可基于生成代码二次开发