Screenshot to Code：截个图，AI 就帮你把网站变成代码

它是什么

Screenshot to Code 是一个能把「图片」变成「代码」的 AI 工具。你截一张网站的图传上去，它就能生成对应的网页代码——支持 HTML、React（一个流行的网页开发框架）、Tailwind（一个帮你快速美化网页的工具）这几种格式。

说白了：看到喜欢的网站，截个图，它就能帮你「复刻」出一个能用的版本。不用你一行行去抄代码，AI 看图就把活儿干了。

它在 GitHub 上有 34K+ 颗星，是这个领域里最出名的开源项目之一。

解决什么问题

它专治「看到好网站想学、但不知道怎么下手」：

• 看到喜欢的网站想照着做：截图传上去，代码直接出来，省去研究别人怎么写的功夫
• 设计师给了图，但不会变成网页：把设计稿截图传上去，自动生成代码框架
• 想学前端但不知从何下手：拿真实网站练手，对照生成的代码学，进步飞快
• 赶时间要个页面雏形：截图 + 几秒等待，初版就有了，再改改细节

一句话：把「看图」和「写代码」之间那道坎，用 AI 给填平了。

长什么样

界面特别简单，就两个核心区域：

• 左边的上传区：一个大大的框，把你的截图拖进去，或者点一下选图片
• 右边的预览区：上面显示生成出来的网页效果（能直接看到长啥样），下面是对应的代码

顶部有个下拉菜单，让你选要生成哪种代码（HTML、React 还是 Tailwind）。还有个「Code」和「Preview」的切换按钮，一个看代码、一个看效果。

怎么安装

Screenshot to Code 需要在你电脑上跑起来。它分前端和后端两部分，跟着步骤来：

1. 先装 Node.js（运行前端程序的引擎）。打开 nodejs.org，下载 LTS 版本，一路「下一步」装好
2. 再装 Python（运行后端程序的语言）。打开 python.org，下载最新版，安装时记得勾选「Add Python to PATH」（把 Python 加到系统路径）
3. 打开命令行：Windows 按 Win + R 输入 cmd 回车；Mac 打开「终端」
4. 下载项目代码：

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

5. 进入项目文件夹：

   cd screenshot-to-code

6. 启动后端（负责调用 AI 的部分）：

   cd backend
   pip install -r requirements.txt
   python main.py

7. 新开一个命令行窗口，启动前端（你看到的界面）：

   cd frontend
   npm install
   npm run dev

8. 打开浏览器访问 http://localhost:5173，就能看到界面了

第一次启动前，需要在后端配置你的 AI 模型 API Key（下面会讲）。嫌折腾的话，官方也提供在线版，搜「screenshot to code online」就能找到，打开浏览器直接用。

怎么用

跑起来之后，操作就三步：

1. 选代码类型：在顶部下拉菜单选你要的格式，新手建议先选 HTML + Tailwind，最简单直观
2. 上传截图：把网站截图拖进左边的上传框
3. 点生成：点「Generate」按钮，等十几秒，右边就出现网页效果和代码了

实战例子：

• 看到某个产品官网很漂亮？截一张全屏图传上去，选 HTML，几秒后你就有了结构差不多的页面代码
• 想做个登录框？截一个登录界面的图，生成后把代码复制到你的项目里改改就能用
• 生成完不满意？点「Update」继续调整，比如「把按钮换成蓝色」「把标题放大」

小技巧：截图越清晰、越完整，生成效果越好。最好截整页或大块区域，别截太碎的局部。生成出来的代码当作「初稿」，细节自己再微调。

需要 AI 模型吗？

需要，而且这个工具对模型要求比较高，因为「看图理解」是个技术活。你得配一个支持「看图」的 AI 模型（叫多模态模型，就是既能读文字又能看图片的 AI），同样需要 API Key（开启 AI 服务的钥匙）。

常见选择：

• 效果好：Claude、GPT-4o（看图理解能力强，生成质量高，推荐）
• 便宜方案：部分国产多模态模型也支持，价格更低，但效果可能有差距

因为生成一次网页要「看」一整张图，消耗的额度会比纯文字对话多一些，心里有个数就行。

不知道选哪个？去模型导航挑一个适合你的 AI 助手 →

费用

• Screenshot to Code 软件本身：完全免费，开源
• AI 模型费用：生成一次网页大概几毛到一两块钱（看图比纯文字贵一点）
• 偶尔玩玩每月十几块就够；用得多就多一些

适合谁

• 看到好网站想照着学、照着做的前端新手
• 拿到设计稿、想快速变成网页代码的人
• 想快速搭个页面雏形、再慢慢改细节的人
• 学前端时想拿真实网站练手、对照代码学习的人
• 对「AI 看图写代码」感兴趣、想尝鲜的玩家

项目地址

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

开源免费，34K+ 星，社区活跃。安装或使用中遇到问题，可以去项目的 Issues（问题反馈区）搜一下，大概率有人遇到过同样的坑。