夜雨聆风作者：伊万 | 一个用AI搞钱的野生创业者
上个月，我一个做UI设计的朋友跟我吐槽。
他说客户发来一张参考网站的截图，问他："这个效果能做吗？"
他打开Figma，开始一点点还原：这个按钮的圆角是多少？阴影的blur值是多少？字重是500还是600？间距是16px还是20px？
2个小时过去了，他才还原了半个页面。
他问我："有没有一种工具，我截图发过去，它直接给我HTML代码？"
我说："有。而且代码还是开源的，你甚至可以自己搭一个赚钱。"
从一张截图到可运行代码，AI已经做到了
这个工具叫 screenshot-to-code，是GitHub上一个开源项目，目前已经有超过6万颗Star。
它的原理听起来像魔法，实现起来却异常直接：
你给它一张网页截图，它用GPT-4V"看懂"这个页面长什么样，然后自动生成对应的HTML + Tailwind CSS代码。
不是粗略的骨架，是可以直接复制粘贴、在浏览器里跑起来的完整页面。
包括：
完整的HTML结构 Tailwind CSS样式（颜色、间距、字体、阴影全部匹配） 响应式布局 甚至图片占位和图标替换
我亲自试过一次。截了Airbnb首页的一张图丢进去，3分钟后，它给了我一个90%相似的复刻版本。按钮的颜色、卡片的圆角、搜索框的阴影，几乎一模一样。
作为前端开发者的我，那一刻心情很复杂——既震惊，又有点慌。
开源项目怎么月入4000刀？
screenshot-to-code的作者是个法国开发者，叫Abi Raja。他把这个项目开源后，顺手搭了一个在线版：screenshotto.com。
免费用户可以体验，但每天有使用限制。想要无限使用？
每月20美元。
就这么简单。没有复杂的SaaS功能，没有企业版，没有销售团队。就是一个网页，上传截图，拿代码，付钱。
Abi后来在一次分享中透露，这个在线版的月收入稳定在4000-5000美元之间。
成本是多少？
服务器：Vercel Pro，$20/月 OpenAI API：按用量，高峰期约$500-800/月 域名+其他：$50/月
净利润：3000+美元/月。
而且这是被动收入。代码写好了，部署上去了，用户自己上来用，自己付钱。Abi现在主要精力已经转向其他项目，但这个工具每个月还在稳定进账。
谁在为这个工具付费？
你可能好奇：谁会花20美元/月，买一个"截图转代码"的工具？
我研究了一下screenshotto.com的用户群体，大概分这几类：
1. 前端新手
刚学HTML/CSS，看到一个好看的网站，想"拆解"学习。以前要打开DevTools一点点扒，现在截图一丢，代码直接到手。
2. 独立开发者/MVP Builder
想快速搭一个落地页验证idea，但没有设计师。找个参考网站截图，AI生成代码，改改文字和颜色，一天就能上线。
3. 设计师转前端
会设计但写代码慢。给客户做完UI稿，直接截图生成代码，再微调细节，交付速度提升3倍。
4. 外包接单的开发者
客户说"我要一个跟XX网站类似的页面"。以前要报价3天，现在截图生成代码，半天搞定，按3天的价格收钱。
你看，每一类用户的核心诉求都一样：省时间。
普通人怎么复制这个变现模式？
screenshot-to-code是开源的，代码就在GitHub上。这意味着，你可以：
路径一：直接部署，做国内版
把项目clone下来，部署到国内服务器，接入国内的AI模型（比如通义千问、文心一言的视觉版），做一个中文版的"截图转代码"工具。
定价参考：
免费版：每天3次 会员版：￥29/月，无限次 高级版：￥99/月，支持批量处理+导出React/Vue代码
路径二：做细分场景的定制版
不要什么都做，聚焦一个细分人群：
- 电商版
：专门识别淘宝/京东/拼多多页面，生成可直接上架的商品详情页代码 - 小程序版
：截图转微信小程序WXML代码 - 落地页版
：专门优化营销落地页，自动生成带表单和CTA的代码
越细分，竞争越小，用户越愿意付费。
路径三：卖"搭建服务"
如果你不想自己运营产品，可以卖服务：
"帮你搭建一个截图转代码的私有站点，￥3000/套，源码交付，你自己收款。"
很多小公司、培训机构、甚至独立开发者，愿意花钱买这种"即插即用"的解决方案。
实操：1小时搭一个最小可用版本
如果你懂一点代码，这是最快上手的方式：
技术栈
核心流程
用户上传截图 前端把图片转成base64 发给AI："这是一张网页截图，请生成对应的HTML和Tailwind CSS代码，尽量还原视觉效果" AI返回代码 前端用iframe实时预览生成的页面 用户可复制代码或下载HTML文件
整个流程，核心代码不到200行。
screenshot-to-code的开源实现已经帮你把坑都踩过了，直接参考它的prompt设计和错误处理逻辑，能省大量时间。
一个值得思考的趋势
screenshot-to-code的流行，其实反映了一个更大的趋势：
AI正在把"视觉"和"代码"之间的鸿沟抹平。
以前，设计师和开发者之间隔着一堵墙：设计师出图，开发者还原。中间有无数沟通成本和细节损耗。
现在，AI可以直接从视觉输出代码。这堵墙正在倒塌。
对开发者来说，这意味着什么？
- 低端切图仔
会越来越难生存 - 懂设计+懂代码+懂AI
的复合型人才会更值钱 - 用AI放大效率
的独立开发者，有机会一个人干一个团队的活
Abi Raja用screenshot-to-code月入4000刀的故事，不是孤例。它是AI时代"一人公司"模式的一个缩影：
找到一个小而具体的痛点，用开源+AI搭一个解决方案，然后让产品自己赚钱。
写在最后
回到我朋友那个2小时还原半个页面的故事。
如果当时他用了screenshot-to-code，2分钟拿到代码，剩下的时间改改细节、优化交互，2小时足够交付一个完整页面。
效率的提升，不是10%，是100倍。
而在商业世界里，100倍的效率提升，往往意味着100倍的收入潜力——或者至少，让你有时间接10倍的单子。
AI不会取代开发者。但会用AI的开发者，一定会取代不会用的。
screenshot-to-code的代码在GitHub上开源，在线版在screenshotto.com。你可以免费用，也可以花20美元/月支持作者。
或者——你也可以自己搭一个，开始你的AI变现之路。
工具已经摆在你面前了。用不用，看你。
我是伊万，一个用AI搞钱的野生创业者。如果你对这些AI变现案例感兴趣，欢迎关注，下期分享更多实操干货。
