Screenshot-to-code 是一个利用人工智能技术将屏幕截图转换为干净的代码（HTML/Tailwind/React）的工具。它结合了 GPT-4Vision 和 DALL-E3 技术，能够生成代码和类似图像。用户可以通过上传截图，让系统自动生成前端代码，包括 HTML、TailwindCSS 和 JavaScript。此外，该工具还支持将网页 URL 直接转换为代码，并提供了一个代码编辑器，以便用户实时预览代码更改。

主要功能

1. 截图转代码

Screenshot-to-code 的核心功能是将屏幕截图转换为代码。用户只需上传截图，系统就会自动分析图像并生成相应的代码。支持的代码类型包括 HTML/TailwindCSS、React、Vue 和 Bootstrap。用户可以根据自己的需求选择合适的代码类型，无论是简单的静态网页还是动态的 Web 应用程序，该工具都能生成相应的代码。

2. 实时网站克隆

除了截图转代码，该工具还具有实时网站克隆的功能。用户只需输入网站的 URL，应用程序即可克隆该网站的外观和功能。这对于想要快速创建与现有网站相似网页的人来说非常有用。

3. 支持多种技术栈

用户可以自定义技术栈选择，如 React、Bootstrap 或 TailwindCSS。这使得该工具能够适应不同的开发需求和偏好。

开源与社区支持

Screenshot-to-code 是一个开源项目，用户可以在 GitHub 上找到其源代码。社区成员可以通过提交 issue 或 pull request 来参与项目的改进和发展。此外，用户还可以通过 Twitter 提供反馈、提出功能请求和报告 bug，确保应用持续改进。

如何使用

使用 Screenshot-to-code 非常简单。用户只需访问官方网站，上传截图或输入网页 URL，然后等待系统生成代码。生成的代码可以在内置的代码编辑器中查看和修改，也可以直接下载使用。对于高级用户，还可以通过配置文件来调整生成代码的行为。

结论

Screenshot-to-code 是一个创新的工具，它利用人工智能技术简化了网页开发和设计过程。无论你是经验丰富的开发者还是编程新手，都可以从中受益。通过将截图转换为代码，你可以更快地实现设计想法，提高工作效率。

上传一张图即可生成前端代码

项目地址：

https://github.com/abi/screenshot-to-code

官方网站：

https://screenshottocode.com/

上传图片后直接扫描：

可以选择生成的代码组合方式：

截图到代码会为每次更改生成两个选项，因此请同时查看这两个选项（默认情况下，一个选项使用 Claude Sonnet 3.5，另一个使用 GPT 4o）

多次重新生成 - 使用 “重新生成 ”按钮可以轻松地重新尝试生成。人工智能可能有点随机，一代可能比一代好很多。

补充知识：

一、网站概述

https://screenshottocode.com/ 是一个与开源项目screenshot - to - code相关的在线测试地址。这个项目在GitHub上有较高的关注度，如33.8k star等。

二、项目的技术依托与应用

screenshot - to - code这个项目核心是利用人工智能技术（GPT - 4V和DALL·E 3）将用户的屏幕截图转换为前端网页代码，可生成的代码类型包括HTML/Tailwind CSS、React、Bootstrap或Vue等。在这个过程中，GPT - 4 Vision负责生成代码，DALL - E 3负责生成类似的图像。项目的前端使用React/Vite，后端使用Python的FastAPI后端。这意味着它能够借助强大的人工智能算法来分析屏幕截图中的各种元素，如文本、图像、按钮、表格、导航栏等，并依据这些元素的位置、尺寸、颜色以及层次关系，精确地生成结构良好、易于维护的前端代码，涵盖HTML、CSS，乃至JavaScript交互逻辑，旨在消除设计师与开发者之间在实现设计稿时可能出现的理解鸿沟，将静态的设计屏幕截图直接转化为可运行于现代Web环境的动态网页结构。

三、使用方式与相关要求

用户在使用https://screenshottocode.com/ 时，有两种主要方式。一种是在线使用，这种方式需要购买执行次数，或者绑定自己的OpenAI API key；另一种是本地部署运行，这涉及到一些相对复杂的操作步骤。比如，使用git clone设置后端（这里使用Poetry进行包管理）：首先要pip install poetry（安装poetry），然后cd backend（进入后端目录），接着echo OPENAI_API_KEY = sk - ***.env（设置OPENAI_API_KEY，需要去官网获取），之后poetry install、poetry shell、poetry run uvicorn main:app --reload --port 7001；也可以使用poetry run pyright直接在后端执行。对于前端部分，要cd frontend，然后yarn、yarn dev，最后通过浏览器打开网页访问应用。

四、网站功能延伸

除了将屏幕截图转换为代码的核心功能外，还可以通过输入网站的URL来克隆一个在线网站，这为用户提供了更多的灵活性和功能拓展性。例如，对于想要快速创建与现有网站相似网页的用户，无论是用于学习、参考还是其他目的，该功能都能帮助他们快速实现需求。

五、项目的意义与影响

在当今数字化时代，网页设计和开发变得越来越重要，然而对于非专业人士来说，创建漂亮且功能齐全的网页可能是一项挑战。这个项目通过将截图转换为代码简化了网页开发过程，使得即使没有编程经验的人也能够快速创建网页。同时，它的开源性质也有助于吸引更多的开发者参与到项目的改进和完善中来，推动相关技术的发展和应用

優(yōu)網(wǎng)科技秉承"專業(yè)團隊、品質(zhì)服務(wù)" 的經(jīng)營理念，誠信務(wù)實的服務(wù)了近萬家客戶，成為眾多世界500強、集團和上市公司的長期合作伙伴！

優(yōu)網(wǎng)科技成立于2001年，擅長網(wǎng)站建設(shè)、網(wǎng)站與各類業(yè)務(wù)系統(tǒng)深度整合，致力于提供完善的企業(yè)互聯(lián)網(wǎng)解決方案。優(yōu)網(wǎng)科技提供PC端網(wǎng)站建設(shè)（品牌展示型、官方門戶型、營銷商務(wù)型、電子商務(wù)型、信息門戶型、微信小程序定制開發(fā)、移動端應(yīng)用（手機站、APP開發(fā)）、微信定制開發(fā)（微信官網(wǎng)、微信商城、企業(yè)微信）等一系列互聯(lián)網(wǎng)應(yīng)用服務(wù)。