ScreenCoder是什么

ScreenCoder ?ScreenCoder?? 是由香港中文大學團隊開發的開源項目，開源的智能 UI 截圖轉代碼系統，支持將任何設計截圖快速轉換為整潔、可編輯的 HTML/CSS 代碼。ScreenCoder用模塊化多智能體架構，結合視覺理解、布局規劃和代碼合成技術，生成高精度、語義化的前端代碼。用戶根據需求輕松修改布局和樣式，實現設計與開發的無縫銜接，適用快速原型設計和像素級完美界面構建，大大提升前端開發效率。其創新性地融合了視覺理解、布局規劃和自適應代碼生成技術，支持對生成代碼進行二次定制，解決了傳統設計稿轉代碼的保真度與靈活性難題。

ScreenCoder的官網地址

• GitHub倉庫：https://github.com/leigest519/ScreenCoder
• arXiv技術論文：https://arxiv.org/pdf/2507.22827
• 在線體驗Demo：https://huggingface.co/spaces/Jimmyzheng-10/ScreenCoder

?性能數據?：
在WebUI基準測試中，CLIP得分比GPT-4V高38.6% · 代碼可維護性提升5倍

ScreenCoder的主要功能
1.UI 截圖轉代碼：支持將任何 UI 截圖或設計原型快速轉換為整潔凈、可編輯的 HTML/CSS 代碼。
2.高精度代碼生成：生成的代碼與原始設計高度一致，視覺對齊且忠實還原語義。
3.自定義修改：支持用戶根據需求調整布局和樣式，方便二次開發。
4.多模型支持：支持 Doubao、Qwen、GPT、Gemini 等多種生成模型，用戶能根據需求選擇。
5.快速部署：生成的代碼能直接用于生產環境，支持快速原型設計和像素級完美界面構建。

ScreenCoder的技術原理
定位階段（Grounding Agent）：定位階段基于視覺語言模型（VLM）識別并標記 UI 圖像中的主要結構組件，如側邊欄、頭部和導航欄等。用文本提示引導模型檢測特定組件，返回其邊界框和語義標簽。為確保檢測結果的準確性和可靠性，系統進行去重、沖突解決及回退恢復等操作，并推斷出主內容區域。最終輸出布局字典，為后續的布局規劃和代碼生成提供基礎信息。
規劃階段（Planning Agent）：在規劃階段，根據定位階段的輸出構建層次化的布局樹，為代碼生成提供結構上下文。用簡單的空間啟發式規則和組合規則，將檢測到的組件組織成樹狀結構。系統創建填充視口的根容器，為每個頂級區域生成絕對定位的 .box 元素，必要時插入內層 <div class=”container grid”> 實現 CSS Grid 布局。每個節點都標注網格模板配置和排序元數據，便于直接編譯為 HTML/CSS 代碼。
生成階段（Generation Agent）：生成階段將語義化的布局樹轉換為可執行的 HTML/CSS 代碼。ScreenCoder 用自然語言提示驅動的生成過程，為布局樹中的每個組件構建適應性提示，通過語言模型生成對應的代碼。提示中包含組件的語義標簽和布局上下文，用戶指令（如果提供）會附加到提示中。生成的代碼根據布局樹的結構進行組裝，保留層次結構、順序和布局配置。系統將生成代碼中的灰色占位符替換為原始截圖中的實際圖像，恢復視覺和語義的一致性。

ScreenCoder的應用場景
*前端開發加速：快速將 UI 設計截圖轉換為高質量 HTML/CSS 代碼，顯著縮短前端開發周期，幫助開發團隊提高效率并減少手動編碼工作量。
*設計與開發協作：將設計截圖直接轉換為操作代碼，促進設計與開發團隊之間的無縫協作，減少溝通成本，確保設計意圖的準確傳達。
*快速原型制作：能即時將設計概念轉化為可交互的前端原型，加速產品設計的早期驗證和用戶測試過程，支持快速迭代和優化用戶體驗。
*教育與培訓：作為教育工具，幫助學生和新手開發者直觀理解 UI 設計與前端代碼的關系，加速學習過程并提高實踐技能。
*小型團隊與創業公司：為資源有限的小型團隊和創業公司提供高效代碼生成解決方案，助力快速推出產品原型或最小可行產品（MVP），降低開發成本并加速市場進入。

十分鐘快速部署?

1. ?基礎環境準備?

git clone https://github.com/leigest519/ScreenCoder
cd ScreenCoder
python -m venv .venv && source .venv/bin/activate
pip install -r requirements.txt

2. ?API密鑰配置?

# 以通義千問為例
echo "your_api_key_here" > qwen_api.txt

3. ?模型選擇?（修改代碼文件）

在block_parsor.py中設置

接入私有大模型：

# 修改html_generator.py
def call_local_llm(prompt):
    response = requests.post("http://local-llm:8000/generate", 
                            json={"prompt": prompt})
    return response.json()['code']

應用場景實例?

案例1：設計稿轉響應式頁面

輸入?：Figma導出的電商首頁設計圖
操作流?：
python main.py --input figma_mockup.png

案例2：移動端截圖轉H5

特殊需求?：保留圖片中的手寫批注
定制命令?：
python image_replacer.py --retain_annotations

?實現原理?：
通過OpenCV識別墨跡區域，轉換為標簽+CSS濾鏡

參考：https://blog.csdn.net/j8267643/article/details/151402854