# Screenshot to Code – AI将截图转换为网页代码的开源项目

- Link: https://paooo.com/aigc-news/28411/
- Published: 2026-07-09T23:01:34+08:00
- Author: Prompt 语宙研究院

## Screenshot to Code是什么

Sscreenshot to Code是一个开源的项目，利用人工智能技术（GPT-4V 和 DALL-E 3）将用户
的屏幕截图转换为前端网页代码，已在GitHub上斩获3.4万星标。项目的核心功能是自动化网页
设计的编码过程，使得开发者能够通过提供网页的截图，快速生成相应的HTML、CSS和JavaScript
代码，节省前端开发人员的时间和精力。

阅读目录

 * [Screenshot to Code是什么](https://paooo.com/aigc-news/28411/#screenshot-to-code%e6%98%af%e4%bb%80%e4%b9%88)
 * [Screenshot to Code的主要功能](https://paooo.com/aigc-news/28411/#screenshot-to-code%e7%9a%84%e4%b8%bb%e8%a6%81%e5%8a%9f%e8%83%bd)
 * [如何使用Screenshot to Code](https://paooo.com/aigc-news/28411/#%e5%a6%82%e4%bd%95%e4%bd%bf%e7%94%a8screenshot-to-code)
    - [方法一：在线托管版运行Screenshot to Code](https://paooo.com/aigc-news/28411/#%e6%96%b9%e6%b3%95%e4%b8%80%e5%9c%a8%e7%ba%bf%e6%89%98%e7%ae%a1%e7%89%88%e8%bf%90%e8%a1%8cscreenshot-to-code)
    - [方法二：本地部署运行Screenshot to Code](https://paooo.com/aigc-news/28411/#%e6%96%b9%e6%b3%95%e4%ba%8c%e6%9c%ac%e5%9c%b0%e9%83%a8%e7%bd%b2%e8%bf%90%e8%a1%8cscreenshot-to-code)
 * [Screenshot to Code的产品价格](https://paooo.com/aigc-news/28411/#screenshot-to-code%e7%9a%84%e4%ba%a7%e5%93%81%e4%bb%b7%e6%a0%bc)
 * [常见问题](https://paooo.com/aigc-news/28411/#%e5%b8%b8%e8%a7%81%e9%97%ae%e9%a2%98)

![Screenshot to Code](https://paooo.com/wp-content/uploads/2026/07/screenshot-to-
code-1.avif)

官网入口：[https://screenshottocode.com/](https://screenshottocode.com/)

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

## Screenshot to Code的主要功能

 * **智能代码生成**：利用GPT-4 Vision模型，项目能够分析用户提供的屏幕截图，并自动
   生成相应的HTML、CSS 和 JavaScript 代码，可以快速将设计稿转换为可运行的网页代码。
 * **相似图像生成**：项目还结合了DALL-E 3的图像生成能力，能够根据生成的HTML代码中的
   <img>标签，自动创建与原始截图相似的图像，并将这些图像嵌入到网页中，以保持页面
   的视觉一致性。
 * **实时代码更新**：用户可以在应用程序中实时查看生成的代码，并且可以通过与AI的交互
   来调整样式或更新代码中缺失的部分，以满足特定的设计要求。
 * **灵活的配置选项**：应用程序提供了配置选项，允许用户选择使用的前端技术（如HTML
   + Tailwind、React + Tailwind、Bootstrap、Vue + Tailwind）以及是否启用DALL-E图像
   生成和功能
 * **URL网页克隆**：除开手动上传截图外，允许用户输入 URL 自动截图以克隆在线网站。
 * **编辑生成的代码**：Screenshot to Code 内置了代码编辑器允许开发者对生成的代码
   进行修改，可以微调输出、纠正任何异常或添加个人代码风格
 * **效果预览和代码导出**：该工具提供实时预览功能，用户能够实时查看编辑和修改的效果，
   并支持下载或复制最终代码
 * **支持本地部署**：用户可以选择将该项目在本地电脑上部署，以便在自己的计算机上运行，
   这为那些希望在本地环境中使用该工具的用户提供了便利。

![Screenshot to Code](https://paooo.com/wp-content/uploads/2026/07/screenshot-to-
code-demo.avif)

## 如何使用Screenshot to Code

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

 1. 访问Screenshot to Code的官网（screenshottocode.com），然后注册/登录
 2. 点击左侧的设置图标，输入[OpenAI](https://paooo.com/tag/openai/) API key
 3. 选择你要生成的代码所用的技术/框架，上传或粘贴你的截图
 4. 等待识别和生成代码，生成后的代码可以更新修改和下载

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

 1. 克隆GitHub项目库到本地电脑：`git clone https://github.com/abi/screenshot-to-code.
    git`
 2.  配置后端和API密钥：
 3.  a. 安装Poetry包管理器：`pip install poetry`
     b. 定位到项目的后端目录：`cd backend`
     c. 设置OpenAI API密钥：`echo "OPENAI_API_KEY=your-key" > .env`
     d. 安装后端依赖项：运行`poetry install`命令安装所有Python依赖项
     e. 启动后端服务器：`poetry run uvicorn main:app --reload --port 7001`
 4. 安装前端依赖项：`cd frontend`切换到前端目录，然后使用`yarn`安装依赖项，并使用`yarn
    dev`命令运行
 5. 浏览器访问该应用：使用任何浏览器访问`https://localhost:5173`即可开始使用Screenshot
    to Code

## Screenshot to Code的产品价格

 * 免费版：Screenshot to Code提供免费开源的版本，用户可以自行在本地进行部署，也可以
   使用官方的在线托管版，输入自己的OpenAI API密钥使用
 * 付费版本：对于没有API密钥的用户，Screenshot to Code官网托管版也提供了付费订阅
   版，Hobby计划15美元每月（提供100积分/月）、Pro计划40美元每月（提供300积分每月），
   年付的话免费2个月。

![Screenshot to Code的价格](https://paooo.com/wp-content/uploads/2026/07/screenshot-
to-code-pricing.avif)

## 常见问题

**Screenshot to Code是免费的吗？**

Screenshot to Code是免费开源的，可以输入自己的OpenAI API密钥免费使用。

**Screenshot to Code基于什么[大模型](https://paooo.com/ai-study/)？**

Screenshot to Code使用GPT-4 Vision生成代码，使用DALL-E 3生成相似图像。

**Screenshot to Code可以将截图转换成什么代码？**

Screenshot to Code可以将截图转换成HTML + Tailwind、React + Tailwind、Bootstrap、
Vue + Tailwind、Ionic + Tailwind 代码以及 SVG 格式。

[🏛️ Prompt 语宙研究院](https://paooo.com/author/paooo-research/) · Prompt 语宙研究院（
paooo.com Research）专注于前沿多模态大模型架构拆解、AI Agent 工作流评测、AIGC 提示
词工程（Prompt Engineering）与全球高增长 AI 生产力工具实测追踪，致力于为中文开发
者与创作者提供一手、可复现的深度技术洞察。

[📄 Markdown 纯净版](https://paooo.com/aigc-news/28411/?format=md)

💡 这篇内容对您有启发吗？

[📡 RSS 订阅](https://paooo.com/feed/)[✨ 提交 AI 工具 / 合作](https://paooo.com/submit-tool/)

**🚀 Prompt 语宙 AI 创作者生态：**探索 2,800+ 全球实用 AI 工具与高精度生图提示词
咒语库

[🧭 语宙 AI 导航 (ai.paooo.com)](https://ai.paooo.com/)[🎨 AI 生图 Prompt 库](https://paooo.com/ai-image-prompts/)
[📚 核心专题导航](https://paooo.com/topics/)[⚡ AIGC 早报生成器](https://paooo.com/mtool/)