绝了！图片可以直接转成代码！开发是越来越简单了～～～

平时我们浏览网站的时候，经常会遇到令人眼前一亮的网页设计，如果能够将这些设计元素或者整个页面的布局应用到自己的项目中，那该多好？

今天就就给大家介绍一个能够将截图转为代码的开源项目 screenshot-to-code。

screenshot-to-code 项目通过结合先进的 AI 技术，为开发者和设计师提供了一个从视觉设计到代码实现的高效工具，极大地简化了开发流程。

screenshot-to-code 可以把界面设计截图直接转化为 HTML、CSS 或 JavaScript 代码，这样能帮助开发者快速生成网页前端代码。无论是一个按钮、一个导航栏，还是整个页面布局都能从截图转换成实际的前端代码。

screenshot-to-code支持将截图转换成 HTML、Tailwind CSS、React 和 Vue 等现代技术栈的代码 。

用户还可以输入 URL 来克隆实时网站 。

现在支持 Claude Sonnet 3.5 和 GPT-4o！

开源地址：

官方网站：

支持的技术栈：

• HTML + Tailwind
• HTML + CSS
• React + Tailwind
• Vue + Tailwind
• Bootstrap
• Ionic + Tailwind
• SVG

支持的人工智能模型：

• Claude Sonnet 3.5
• GPT-4o
• DALL-E 3 或 Flux Schnell（使用 Replicate）用于图像生成

此外，该项目还可以将网站的视频/录屏转换成网页，演示如下：

安装使用

该项目使用 React/Vite 作为前端， FastAPI 作为后端。

需要 GPT-4 的 OpenAI API 密钥或 Anthropic 密钥（可选）， 推荐两者都使用，以便你可以比较 Claude 和 GPT4o 的结果。

运行后端（使用 Poetry 进行包管理 - 如果你没有它，请安装 pip install poetry）：

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

OpenAI API 密钥也可以通过前端的对话框设置密钥（加载前端后点击齿轮图标）。

运行前端：

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

Docker 上安装

如果你已经安装了 Docker，可以使用 docker-compose 命令启动该项目：

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

接下来就可以在浏览器中打开 http://localhost:5173 使用了。