截图变代码,视频变网页,前端UI设计从未如此简单

▲ screenshot-to-code：把截图丢进去，代码就长出来了。

01 是什么

上周刷到这个项目的时候，我的第一反应是：这不可能吧？

截图 → 代码。不是草图，不是半成品，是 真正能跑、能改的完整代码。

更离谱的是：视频也能转。录一段你点网页的屏幕录像，它能把每一个交互状态、动画流程都还原成带行为的 HTML + CSS + JS。

2023 年 11 月上传，到现在快三年，75,575 Star，9,222 Fork。MIT 协议，完全开源。

▲ 官网首页，一句话说明白：Build User Interfaces 10x Faster。

我做前端这几年，每次接到设计稿都得吭哧吭哧敲代码。而这个东西，你丢一张图进去，等几秒，代码就在那里了。连布局、间距、字体都对得上。

说实话，有点慌。

02 它能做什么

两种模式，一张截图 / 一段视频搞定

截图模式：把任何网页、App 界面、设计稿的截图丢进去，AI 还原成对应框架的代码。

视频模式：录一段你在网页上操作的录屏，AI 理解你的交互流程，还原成带真实交互的页面——悬停效果、过渡动画、状态切换，全部能复现。

▲ 左边是截图，右边是生成的代码预览，布局还原度惊人。

支持的框架和样式方案：

默认支持的 AI 模型：Gemini 3 Flash / Gemini 3.1 Pro / GPT-5.5 / GPT-5.4 Mini / Claude Opus 4.6 / Claude Opus 4.8。Gemini 还能提取截图中真正的 logo 和图片资源，不是随便生成占位符。

03 不是半成品

很多人做 demo 都很帅，落地就拉胯。但这个项目不一样。

实测过它的效果，有几个地方特别让我意外：

布局还原度高：NYTimes 首页、Instagram 登录页、Hacker News 列表，截图丢进去，生成的代码结构和原站几乎一致。间距、字体大小、颜色都对了。

能迭代修改：生成完不满意？直接打字告诉它「把导航栏变固定」或者「换个深色主题」，它真的会改，不是重新生成一张图。

代码结构干净：不是把一堆 div 糊在一起，而是用了语义化标签，class 命名合理，Tailwind 的 utility class 也写得规整。我拿自己项目练手，生成的代码可以直接当基础模板用。

用自然语言描述你想要任何 UI — 不需要截图

▲ Microsoft、Amazon、MIT、Stanford、ByteDance、百度都用它。不是噱头，是真在干活。

04 本地部署还是在线玩，你自己选

最快的方式：去 https://screenshottocode.com 直接用在线版，注册账号就能跑，不用折腾环境。

想自己部署（免费、无限制、数据在自己手里）：

git clone https://github.com/abi/screenshot-to-codecd screenshot-to-codeecho "OPENAI_API_KEY=sk-xxx" > .envecho "ANTHROPIC_API_KEY=xxx" >> .envecho "GEMINI_API_KEY=xxx" >> .envdocker-compose up -d --build

打开 http://localhost:5173 就能用。Python 后端 + React 前端，全栈开源，想魔改随时改。

本地部署最大的好处是：没有频率限制，没有付费焦虑。在线版免费额度有限，自己跑的话调用几次 OpenAI 或者 Anthropic 的 API 就行。

05 这东西会取代前端开发吗

不会。但会改变前端的工作方式。

它会做的：静态页面、营销落地页、管理后台表格页、设计稿转代码——这些场景，效率提升 10 倍不止。

它做不好的：复杂的业务逻辑、状态管理、API 对接、性能优化、无障碍适配——这些还是需要真刀真枪写。

但我发现一个趋势：前端最耗时的部分在变。从前是手写 HTML + CSS 花的时间最多，现在 AI 把这部分吞了，剩下的价值反而更集中在那 20% 的核心逻辑上。

说白了，会用 screenshot-to-code 的前端，效率比以前高 10 倍。

写在最后

工具从来不取代人，但它会淘汰不会用它的人。

GitHub：https://github.com/abi/screenshot-to-code在线体验：https://screenshottocode.com