只需要一張簡單的截圖，直接復刻一模一樣的網站，把制作網站的門檻降到最低。短短幾個月就在Github上斬獲43.5k Star的開源神器–Screenshot to Code，輕松助你一鍵復刻目標網站！

“Screenshot to Code”利用了業內領先的GPT-4 Vision和Claude 3技術，自動生成HTML、Tailwind CSS、React或Bootstrap、Vue等代碼，營造出與截圖極其接近的視覺效果，它的最新版本還支持直接輸入URL來復制現有的網站，開發的便利性獲得了極大的提升，也使得UI設計工作變得更加簡單而直接。

先來看看該項目的演示效果：

演示的是YouTube的首頁，通過截取一張YouTube首頁的截圖，然后拖拽到中，就開始慢慢的制作網站了，做出來的效果幾乎一模一樣，無論是網站的布局、字體的大小、字體的顏色基本都能做到以假亂真，甚至連圖都給你配好了。

安裝與使用

項目分為 React/Vite 前端和 FastAPI 后端，并且需要一個能夠訪問 GPT-4 Vision API 的 OpenAI API 密鑰，然后運行后端：

cd backend
echo "OPENAI_API_KEY=sk-your-key" > .env
poetry install
poetry shell
poetry run uvicorn main:app --reload --port 7001

運行前端：

cd frontend
yarn
yarn dev

然后打開 http://localhost:5173 就可以使用了。如果希望在不同端口上運行后端，需要修改 frontend/.env.local 中的 VITE_WS_BACKEND_URL。
而出于調試目的，為了不浪費 GPT4-Vision 積分，也可以在模擬模式下運行后端（該模式會傳輸預先錄制的響應）：

MOCK=true?poetry?run?uvicorn?main:app?--reload?--port?7001

最新版本增加了對 Claude 3 Sonnet 的支持，它的性能更好，在輸入方面與 GPT-4 Vision 相當甚至更好，關鍵速度還更快。

使用 Anthropic 的 API 密鑰將環境變量 ANTHROPIC_API_KEY 添加到 backend/.env

使用前端時，從模型下拉列表中選擇“Claude 3 Sonnet”即可

當然，該項目同樣支持Docker部署：

echo "OPENAI_API_KEY=sk-your-key" > .env
docker-compose up -d --build

想要嘗試的童鞋們，可以移步至該項目：https://github.com/abi/screenshot-to-code