Screenshot to Code，轻松助你一键复刻目标网站！

只需要一张简单的截图，直接复刻一模一样的网站，把制作网站的门槛降到最低。短短几个月就在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