creenshot to Code是一個開源的項目，利用人工智能技術(GPT-4V和 DALL-E 3)將用戶的屏幕截圖轉換為前端網頁代碼，已在GitHub上斬獲40K星標。項目的核心功能是自動化網頁設計的編碼過程，使得開發者能夠通過提供網頁的截圖，快速生成相應的HTML、CSS和JavaScript代碼，節省前端開發人員的時間和精力。

主要功能：

智能代碼生成：利用GPT-4 Vision模型，項目能夠分析用戶提供的屏幕截圖，并自動生成相應的HTML、CSS 和 JavaScript 代碼，可以快速將設計稿轉換為可運行的網頁代碼。

相似圖像生成：項目還結合了DALL-E3的圖像生成能力，能夠根據生成的HTML代碼中的標簽，自動創建與原始截圖相似的圖像，并將這些圖像嵌入到網頁中，以保持頁面的視覺一致性。實時代碼更新:用戶可以在應用程序中實時查看生成的代碼，并且可以通過與A!的交互來調整樣式或更新代碼中缺失的部分，以滿足特定的設計要求。

靈活的配置選項：應用程序提供了配置選項，允許用戶選擇使用的前端技術(如HTML+Tailwind、React + Tailwind、Bootstrap、Vue + Tailwind)以及是否啟用DALL-E圖像生成和功能URL網頁克隆:除開手動上傳截圖外，允許用戶輸入URL自動截圖以克隆在線網站。

編輯生成的代碼：Screenshot to Code 內置了代碼編輯器允許開發者對生成的代碼進行修改，可以微調輸出、糾正任何異常或添加個人代碼風格

效果預覽和代碼導出：該工具提供實時預覽功能，用戶能夠實時查看編輯和修改的效果，并支持下載或復制最終代碼

支持本地部署：用戶可以選擇將該項目在本地電腦上部署，以便在自己的計算機上運行，這為那些希望在本地環境中使用該工具的用戶提供了便利。

開源協議：MIT license

源碼地址：https://github.com/abi/screenshot-to-code

技 術 棧：python和typescript為主

見的圖片格式

jpg格式

文件名.jpg |文件名.jpeg。

特點：色彩信息保留較好，高清，顏色較多。

實際用處：常用于產品類圖片。

gif格式

文件名.gif。

特點：最多存儲256色，可以保存透明背景和動畫效果。

實際用處：簡單圖形及字體，動態圖。

png格式

文件名.png。

特點：存儲形式豐富，可以保存透明背景。

實際用處：微信表情包

psd格式

文件名.psd。

是Photoshop的專用格式。

特點：可以存放圖層、通道、遮罩等多種設計稿。

實際用處：可以直接從上面復制文字、獲得圖片、測量大小和距離。

PS切圖

切圖方式：圖層切圖、切片切圖、PS插件切圖等。

• 圖層切圖

第一步需要先選中需要的圖層

選中單個圖層：

鼠標選中圖層后右擊——快速導出為PNG——設置文件名——保存。

選中多個圖層：

圖層連續排列:長按shift鍵不動+鼠標選中所需的第一個圖層+鼠標選中最后一個圖層。

圖層不連續排列，長按ctrl鍵不動+鼠標點選所需圖層。

第二步選中需要的圖層后

選擇圖層菜單（或直接在任意選中的圖層上右擊）——合并圖層（Ctrl+e）——右擊合并圖層——快速導出為PNG——設置文件名——保存。

• 切片切圖

在左側工具欄選中切片工具——框選所需圖片——選擇格式——保存——切片選擇：選中的切片——保存。

在圖層選項卡上背景圖片的左側有個小眼睛的標志，這個是代表圖層的可見性，點擊小眼睛就會不可見圖層，背景就變成透明的。

在背景透明的情況下，使用切片工具選中想要裁切的內容

“文件”——導出——存儲為web所用格式

選擇圖片存儲位置，在最下方切片選項那里，選擇選中的切片。

jpg格式：保存的切片圖帶有純色背景；

png格式：保存切片圖是透明背景。

格式級別越高，圖片越清晰，相對內存越大。

• PS插件切圖

Cutterman：在ps中運行的插件，可以代替手工導出以及使用切片工具切圖。

使用方法：首先從Cutterman官網上注冊賬號并下載安裝包進行安裝。

要求：ps必須是完整版的，綠色版本不支持。

官網網址：https://www.cutterman.cn

下載好之后，解壓。雙擊.exe安裝文件。默認安裝地址，直接點擊安裝。

安裝好之后重啟PS。

選擇窗口——擴展功能——Cutterman切圖神器——最后注冊Cutterman賬號登錄使用。

暫時不想使用插件切圖，就不多贅述了，有需要的可自行了解。

明天開始準備使用學成在線這個案例，練練手。

使你完全不懂html，javascript,css，也能做出漂亮的網頁，這在以前是不可想象的，而現在確是可行的，因為有這樣一個項目：openUI。

openUI不僅僅能生成html頁面，還能生成自適應網頁，適配電腦端和手機端，還能把頁面代碼轉換為React和vue等。

第1步，創建Python虛擬環境。

pyenv virtualenv 3.12.2 openui
pyenv local openui

第2步，你需要到github下載這個項目的源代碼。

git clone https://github.com/wandb/openui

第3步，進入這個目錄

cd openui/backend

第4步，安裝依賴環境

pip install .

第5步，導入你的openAI的apikey

export OPENAI_API_KEY=xxx

第6步，運行openui程序

python -m openui

看到這個界面，就成功了，你可以用對話方式讓程序生成網頁，也可以上傳一個截圖，按截圖樣式生成html代碼。很簡單吧。