拿到一张界面截图，要把它一行行还原成前端代码，这活儿有多磨人，做过的人都懂。

颜色得一个个吸，间距得反复量，按钮圆角差两个像素都看着别扭，一个看起来挺简单的页面，敲到能跑可能就是大半天。有个开源项目就是专门来省这一步的：你把截图丢进去，它直接生成对应的前端代码。它叫 screenshot-to-code，已经攒了约7万多颗 star，MIT 协议，作者 abi 一直在更新。

我第一次看到的时候是有点兴奋的。这步在我印象里一直是非人不可的体力活。

它的玩法其实不止截图。你给它一份设计稿（Figma 那种）、一张草图、甚至录一段别人网站操作的屏幕录像，它都能接：录屏那种，它会试着还原成一个能点能动的原型，不只是静态页面。

生成的代码还能挑技术栈。常见的几种它都给：HTML 配 Tailwind（一种常用的 CSS 样式框架）、纯 HTML 加 CSS、React 配 Tailwind、Vue 配 Tailwind（React、Vue 都是主流前端框架），还有 Bootstrap、Ionic。你平时用什么，就让它吐什么，不用拿到一坨陌生代码再翻译一遍。

背后接的是视觉大模型，GPT、Claude、Gemini 这几家都能接。作者自己的建议是用 Gemini 和 Claude 的最新版，效果最好。生成完也不是一锤子买卖，你可以接着给它指令让它改，这里再大一点、那个颜色不对、加个按钮，它一轮轮调。

那它跟人手敲到底差在哪？

说白了，它干的是「先画个九成像的草稿」这件事。布局、配色、大致结构，它几秒钟铺好，把你从零到一最枯燥那段直接跳过去。但剩下那一成——交互细节、边界情况、代码要不要拆得更干净——还是得你自己上手收。

所以我得说句实话：它生成的是初稿，不是能直接上线的成品。指望丢一张图就出一个可交付的产品，多半要失望（这点我没拿它跑过完整项目，从我试的几次看，当打底很省事，当终稿就不行）。

还有一点别忽略：效果好不好，很大程度看你接的是哪家模型。作者明说了，本地那种开源小模型（比如用 Ollama 跑的）他不推荐，质量明显差。说到底，它的上限是被你接的那个闭源大模型托着的。

上手有两条路。想省事，它有官方在线版，网页打开直接用。想自己折腾，开源那套能用 Docker 在本地跑起来，但本地跑要你自己有大模型的 API key，按各家接口计费，不是装上就免费用，这笔账得心里有数。

适合谁用呢？懂点前端的人用起来最顺，看得懂它吐的代码，会配个环境变量，能接着往下改，省的时间最实在。纯不写代码的，直接用在线版体验会更省心，别一上来就折腾本地部署。

它是开源的，在 GitHub 上叫 screenshot-to-code，作者就是 abi。

#马力的AI知识分享##马力的AI开源项目分享#