Screenshot to Code – 这个开源AI项目可以将截图转换为网页代码

Screenshot to Code是什么

Screenshot to Code是一个基于人工智能（如GPT-4V与DALL-E 3）的开源项目，能够将网页截图自动转换为前端代码。该项目在GitHub上已获得超过3.4万颗星。其核心在于自动化网页设计到代码的转换流程，开发者只需提供界面截图，即可快速获取对应的HTML、CSS与JavaScript代码，从而帮助前端开发者节省时间和精力。

Screenshot to Code

官网入口：https://screenshottocode.com/

GitHub代码库：https://github.com/abi/screenshot-to-code

Screenshot to Code的主要功能

• 智能代码生成：借助GPT-4 Vision模型分析用户上传的截图，自动生成符合的HTML、CSS及JavaScript代码，实现从设计稿到可运行网页的快速转换。
• 相似图像生成：结合DALL-E 3的能力，可依据生成代码中的<img>标签自动创建与原始截图风格相近的图片，并嵌入网页，保持视觉统一性。
• 实时代码更新：用户可在应用内实时查看生成的代码，并通过与AI交互来调整样式或补充缺失部分，以适应具体设计需求。
• 灵活的配置选项：提供多种前端技术栈选择（如HTML + Tailwind、React + Tailwind、Bootstrap、Vue + Tailwind等），并可自主决定是否启用DALL-E图像生成及其他功能。
• URL网页克隆：除了手动上传截图，也支持通过输入URL自动截取网页并克隆其代码。
• 编辑生成的代码：内置代码编辑器，允许开发者对输出代码进行修改、微调、纠正异常或加入个人编码风格。
• 效果预览和代码导出：提供实时预览功能，方便用户即时查看编辑效果，并支持下载或复制最终生成的代码。
• 支持本地部署：项目可部署于本地环境，让用户能在自己的计算机上运行该工具，为偏好本地操作的用户提供了便利。

Screenshot to Code

如何使用Screenshot to Code

方法一：在线托管版运行Screenshot to Code

1. 访问Screenshot to Code官网（screenshottocode.com）并完成注册或登录。
2. 点击左侧设置图标，填入您的OpenAI API密钥。
3. 选择想要生成的代码所采用的技术栈，然后上传或粘贴截图。
4. 等待系统识别并生成代码，之后可对代码进行修改、更新或下载。

方法二：本地部署运行Screenshot to Code

1. 将GitHub项目克隆到本地：git clone https://github.com/abi/screenshot-to-code.git
2. 配置后端与API密钥：
   1. 安装Poetry包管理器：pip install poetry
   2. 进入项目后端目录：cd backend
   3. 设置OpenAI API密钥：echo "OPENAI_API_KEY=your-key" > .env
   4. 安装后端依赖：运行poetry install安装所有Python依赖包。
   5. 启动后端服务器：poetry run uvicorn main:app --reload --port 7001
3. 安装前端依赖：切换到前端目录cd frontend，使用yarn安装依赖，并通过yarn dev命令运行前端。
4. 在浏览器中访问应用：打开浏览器，访问http://localhost:5173即可开始使用。

Screenshot to Code的产品价格

• 免费版：Screenshot to Code提供免费开源版本，用户可自行在本地部署，也可使用官方在线托管版并输入自己的OpenAI API密钥。
• 付费版本：若无API密钥，也可选用官网提供的付费订阅方案。Hobby计划为每月15美元（含100积分/月），Pro计划为每月40美元（含300积分/月）。按年支付可免费获得2个月服务。

常见问题