6 万颗星，图片和视频秒变代码，让前端程序员下岗的开源项目

screenshot-to-code 是一个在 GitHub 上非常火的一款“截图生成代码”的神器，简单的说就是通过截取屏幕图像，screenshot 工具可以识别出代码的页面布局，生成 HTML、CSS、Javascript 等常用的代码，同时还能预览代码实现的效果。

不仅仅是截图，还有 Figma 设计稿，甚至录屏，它都能帮你快速生成干净、可用的代码。而且，支持多种技术栈，前端开发者需要喝喝咖啡，点点鼠标，就能帮你写代码。

比如使用 screenshot 仿纽约时报的新闻页面，截一张 NYT 首页的图片（左），用 Screenshot-to-Code 转成 HTML+CSS（右图），效果非常的惊艳。

虽然说不是一模一样，但 screenshot 至少能让前端开发者早点下班。只需要调整下颜色和间距，就能轻松搞定一个网站。

除了将图片转成代码，Screenshot-to-Code 还支持将录屏变成代码，比如录一段“滚动效果”，AI 就能自动生成基础交互页面。这个项目在 GitHub 上非常火的，目前已经收获了 61.4k star.

GitHub 地址：https://github.com/abi/screenshot-to-code

在线体验地址：https://screenshottocode.com/

开源项目 screenshot-to-code 支持多种前端框架和样式，如 HTML/Tailwind CSS、React、Bootstrap 和 Vue 等。

该项目主要使用 GPT4-Vision 生成代码，并使用 DALL-E 3 技术生成外观相似的图像，极大地提高了前端开发的效率。用户只需上传截图或输入 URL 即可克隆现有网站，生成相应的代码。

该项目的主要特点包括：

• 多框架支持：支持 HTML/Tailwind CSS、React、Bootstrap 和 Vue 等多种前端框架。
• AI 驱动：利用 GPT-4 Vision 和 DALL-E 3 技术，自动生成代码和相似图像。
• 快速克隆网站：用户可以通过输入 URL 克隆现有网站，生成相应的代码。
• 快捷的访问方式：项目还提供了在线环境和本地安装部署方式，用户可以根据需要选择合适的方式使用。

但是比较麻烦的一点，使用该工具需要 OpenAI API 密钥，并且密钥需有访问 GPT-4 Vision API 的权限。

总的来说， screenshot-to-code 对于前端开发者和 UI 设计师，是一个非常有用的工具，能够加速设计到代码的转换过程。快来试试 Screenshot-to-Code 帮你写代码，感受一下喝喝咖啡，点点鼠标，就能生成代码的快乐。