ScreenCoder 是一個能把任意設計截圖轉換成結構清晰、可編輯的 HTML/CSS 前端代碼開源ai工具。它用模塊化多智能體架構，結合視覺理解、布局解析和代碼生成技術，輸出的代碼語義準確、布局精準。用戶能輕松調整界面結構和樣式，實現從設計圖到可運行前端界面的無縫銜接，適合快速原型開發和需要像素級還原的項目，能明顯提升開發效率。

ScreenCoder主要功能

• 截圖轉前端代碼：ScreenCoder支持把 UI 截圖或設計稿一鍵轉換成結構良好的 HTML 和 CSS 代碼。

• 高保真還原：ScreenCoder生成的代碼在視覺布局和語義結構上和原始設計高度接近，保證像素級對齊和功能完整。

• 靈活可編輯：用戶可以自由修改生成的布局結構和樣式屬性，方便后續開發和定制調整。

• 多模型集成：兼容多種主流大模型，如 Doubao、Qwen、GPT、Gemini 等，用戶能按需選擇生成引擎。

• 即用型輸出：生成的代碼達到生產級質量，可直接用于項目，支持快速構建原型或完整前端界面。

ScreenCoder技術架構

• ScreenCoder 的核心技術是把 UI 到代碼的復雜任務拆分成三個專業子任務，每個子任務由專門的智能體負責：

• 定位智能體（Grounding Agent）：用視覺語言模型（VLM）檢測并標記 UI 界面中的關鍵組件。

• 規劃智能體（Planning Agent）：根據前端工程的最佳實踐，把這些組件組織成層級化的布局樹。

• 生成智能體（Generation Agent）：基于布局樹和用戶指令，自適應生成高質量代碼。

ScreenCoder應用場景

• 前端開發加速：快速把 UI 設計截圖轉換成高質量 HTML/CSS 代碼，縮短前端開發周期。

• 設計與開發協作：把設計截圖直接轉換成可操作的代碼，促進設計和開發團隊的無縫協作。

• 快速原型制作：能即時把設計概念轉化成可交互的前端原型，加速產品設計的早期驗證和用戶測試。

• 教育與培訓：作為教育工具，幫助學生和新手開發者理解 UI 設計和前端代碼的關系。

• 小型團隊與創業公司：為資源有限的小型團隊和創業公司提供高效的代碼生成方案。

ScreenCoder使用方法

安裝與部署

1. 克隆倉庫：在終端運行以下命令，把 ScreenCoder 項目克隆到本地：

git clone https://github.com/leigest519/ScreenCoder.git
cd ScreenCoder

2. 創建虛擬環境：為避免依賴沖突，建議創建 Python 虛擬環境：

python3 -m venv .venv
source .venv/bin/activate

Windows 用戶使用：source .venv\Scripts\activate。

3. 安裝依賴：安裝項目所需的 Python 庫：

pip install -r requirements.txt

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 截圖，識別關鍵組件：

python block_parsor.py

生成帶占位符的初始 HTML：運行以下命令，生成帶有占位符（如灰色圖像塊）的初始 HTML 代碼：

python html_generator.py

2. 生成最終 HTML 代碼：

占位符檢測：運行以下命令，檢測需要替換的圖像區域：

python image_box_detection.py

運行 UIED 檢測具體 UI 元素：運行以下命令，檢測截圖中的具體 UI 元素：

python UIED/run_single.py

映射占位符與實際元素：運行以下命令，把占位符和實際 UI 元素進行映射對齊：

python mapping.py

替換占位圖：運行以下命令，把占位符替換為真實的裁剪圖像：

python image_replacer.py

3. 簡單運行：如果不想分步執行，可以直接運行以下命令，一鍵生成最終的 HTML 代碼：

python main.py

輸出文件會保存在 output/ 目錄下，包含 index.html 和對應的 css/ 與 images/ 資源。