ScreenCoder

一個能把任意設(shè)計截圖轉(zhuǎn)換成結(jié)構(gòu)清晰、可編輯的 HTML/CSS 前端代碼開源AI工具。它用模塊化多智能體架構(gòu)，結(jié)合視覺理解、布局解析和代碼生成技術(shù)，輸出的代碼語義準確、布局精準。

#Ai工具箱 #Ai編程建站

訪問ScreenCoder

ScreenCoder簡介

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

ScreenCoder主要功能

截圖轉(zhuǎn)前端代碼：ScreenCoder支持把 UI 截圖或設(shè)計稿一鍵轉(zhuǎn)換成結(jié)構(gòu)良好的 HTML 和 CSS 代碼。
高保真還原：ScreenCoder生成的代碼在視覺布局和語義結(jié)構(gòu)上和原始設(shè)計高度接近，保證像素級對齊和功能完整。
靈活可編輯：用戶可以自由修改生成的布局結(jié)構(gòu)和樣式屬性，方便后續(xù)開發(fā)和定制調(diào)整。
多模型集成：兼容多種主流大模型，如 Doubao、Qwen、GPT、Gemini 等，用戶能按需選擇生成引擎。
即用型輸出：生成的代碼達到生產(chǎn)級質(zhì)量，可直接用于項目，支持快速構(gòu)建原型或完整前端界面。

ScreenCoder技術(shù)架構(gòu)

ScreenCoder 的核心技術(shù)是把 UI 到代碼的復(fù)雜任務(wù)拆分成三個專業(yè)子任務(wù)，每個子任務(wù)由專門的智能體負責(zé)：
定位智能體（Grounding Agent）：用視覺語言模型（VLM）檢測并標記 UI 界面中的關(guān)鍵組件。
規(guī)劃智能體（Planning Agent）：根據(jù)前端工程的最佳實踐，把這些組件組織成層級化的布局樹。
生成智能體（Generation Agent）：基于布局樹和用戶指令，自適應(yīng)生成高質(zhì)量代碼。

ScreenCoder應(yīng)用場景

前端開發(fā)加速：快速把 UI 設(shè)計截圖轉(zhuǎn)換成高質(zhì)量 HTML/CSS 代碼，縮短前端開發(fā)周期。
設(shè)計與開發(fā)協(xié)作：把設(shè)計截圖直接轉(zhuǎn)換成可操作的代碼，促進設(shè)計和開發(fā)團隊的無縫協(xié)作。
快速原型制作：能即時把設(shè)計概念轉(zhuǎn)化成可交互的前端原型，加速產(chǎn)品設(shè)計的早期驗證和用戶測試。
教育與培訓(xùn)：作為教育工具，幫助學(xué)生和新手開發(fā)者理解 UI 設(shè)計和前端代碼的關(guān)系。
小型團隊與創(chuàng)業(yè)公司：為資源有限的小型團隊和創(chuàng)業(yè)公司提供高效的代碼生成方案。

ScreenCoder使用方法

安裝與部署

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

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

2. 創(chuàng)建虛擬環(huán)境：為避免依賴沖突，建議創(chuàng)建 Python 虛擬環(huán)境：

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

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

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

pip install -r requirements.txt

4. 配置模型和 API 密鑰：

在項目根目錄下創(chuàng)建與所選模型對應(yīng)的純文本文件（如 doubao_api.txt、qwen_api.txt、gpt_api.txt、gemini_api.txt），把 API 密鑰粘貼到文件中。
在 block_parsor.py 和 html_generator.py 中設(shè)置所需模型，支持的選項有：Doubao（默認）、Qwen、GPT、Gemini。