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

作者：颜资源站长 · 发布：2026-10-12

▲ 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 理解你的交互流程，还原成带真实交互的页面——悬停效果、过渡动画、状态切换，全部能复现。

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

支持的框架和样式方案：

栈	说明
HTML + Tailwind	最常用，响应式直接搞定
React + Tailwind	组件化，适合复杂项目
Vue + Tailwind	国内开发者友好
Bootstrap	传统方案，企业级项目适用
Ionic + Tailwind	移动端优先

默认支持的 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-code
cd screenshot-to-code
echo "OPENAI_API_KEY=sk-xxx" > .env
echo "ANTHROPIC_API_KEY=xxx" >> .env
echo "GEMINI_API_KEY=xxx" >> .env
docker-compose up -d --build

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

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