screenshot-to-code：截图一键变成代码，76K星开源神器教程

你是不是也遇到过这种情况？

前端开发最头疼的事情之一，就是拿到设计师给的UI稿，然后一行一行地把界面写出来。一个简单的登录页面可能就要花半天时间，更别说什么仪表盘、电商首页了。设计师改一版你就得跟着改，改到怀疑人生。

今天介绍一个GitHub上76K星的开源神器——screenshot-to-code，它能直接把截图、设计稿、甚至屏幕录制视频，一键转换成干净的前端代码。没错，就是这么暴力。

screenshot-to-code到底是什么？

简单来说，这是一个基于AI的工具，你丢一张截图进去，它就能自动生成对应的HTML/CSS代码。支持的技术栈包括：

• HTML + Tailwind CSS
• HTML + 纯CSS
• React + Tailwind
• Vue + Tailwind
• Bootstrap
• Ionic + Tailwind

更厉害的是，它不只是生成静态页面——你甚至可以录一段网站操作的视频，它能把视频里的交互逻辑也一起生成出来。

实际效果怎么样？

说实话，我一开始也半信半疑。但实际试了几次之后，发现它生成的代码质量确实不错：

• 布局还原度高——Flexbox和Grid布局基本都能正确识别
• 颜色和间距准确——Tailwind的色值和spacing都能匹配上
• 响应式支持——生成的代码自带基本的响应式适配
• 图片自动提取——如果配置了Gemini API，它能识别并复用截图中的真实图片资源

当然，它也不是万能的。复杂的动画效果、精确到像素的还原，还是需要手动调整。但作为快速搭建原型的工具，已经非常够用了。

怎么用？三种方式任选

方式一：在线直接用（最简单）

打开 screenshottocode.com，上传截图就行。不需要安装任何东西，适合快速体验。

方式二：Docker一键部署

如果你想自己搭一个，Docker是最方便的方式：

# 克隆项目
git clone https://github.com/abi/screenshot-to-code.git
cd screenshot-to-code

# 配置API Key（至少需要一个）
# 将你的API Key写入 .env 文件

# 启动
docker compose up

然后打开 http://localhost:5173 就能用了。

方式三：本地开发环境

如果你是开发者，想二次开发或者贡献代码：

# 后端
cd backend
poetry install
poetry run playwright install chromium
poetry run uvicorn main:app --reload --port 7001

# 前端
cd frontend
pnpm install
pnpm dev

需要哪些API Key？

至少需要以下其中一个：

Key越多，效果越好。Gemini负责识别截图中的真实图片资源并复用，Replicate负责图片编辑和背景移除。只有OpenAI的话也能用，但图片资源就没法自动提取了。

适合谁用？

• 前端开发者——快速搭建页面原型，省去重复劳动
• UI设计师——自己就能把设计稿变成可运行的代码
• 产品经理——快速做出demo给团队看，不用等开发排期
• 独立开发者——一个人干全栈的效率神器
• 学习者——看看AI生成的代码是怎么组织的，学习前端布局

一些使用小技巧

1. 截图越清晰，生成效果越好——模糊的截图会导致布局识别出错
2. 尽量截取完整区域——不要只截一小块，给AI足够的上下文
3. 深色/浅色模式分开截——AI可能搞混主题色
4. 生成后一定要检查——AI不是完美的，需要微调
5. 配置多个API Key效果更好——不同模型各有所长，组合使用最佳

下载方式

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

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

https://www.88531.cn/?p=55337

创作不易，用心坚持，请喝一怀爱心咖啡！继续坚持创作~~