leigest519/ScreenCoder

它解決的問題

ScreenCoder 自動化將視覺設計（例如螢幕截圖或原型）轉換為可投入生產的 HTML 和 CSS 程式碼的流程。其目標是彌補視覺設計與功能性的前端實作之間的差距，減少開發人員從圖片重新建構介面所需的大量手動工作。

如何運作

該系統採用模組化多代理架構，結合視覺理解與版面規劃。整個流程遵循多階段的處理流程：

1. UI 元素偵測：利用 UIED 引擎分析螢幕截圖，偵測元件。
2. 版面規劃：將偵測到的元件對應至邏輯頁面區域，並使用占位符生成初始 HTML 版面。
3. 程式碼合成：使用多模態模型（支援 Doubao、Qwen、GPT 或 Gemini）生成實際程式碼。
4. 影像整合：識別占位符，並以原始螢幕截圖中裁剪出的實際影像取代，產出最終的 HTML。

適用對象

此工具專為前端開發人員與設計師設計，適合希望快速原型化介面或從現有視覺資產建立像素精準的網頁的人士。

特色亮點

• 模組化多代理框架：結合專用代理進行偵測、規劃與合成。
• 可自訂：支援使用者主導的版面與樣式修改。
• 模型無關：相容多種大型語言模型，包括 GPT、Gemini、Qwen 和 Doubao。
• ScreenBench：內建 1,000 張真實世界網頁螢幕截圖與對應的 HTML 源碼的新基準，用於評估。