
SnapVee 由我 100% Vibe Coding 写的生产级 AI 工具,从 UI 设计、需求开发、测试、机器部署 -> 上线,总共代码行数约 4.3w 行,算上配置文件 5.7w 行。

3 天时间是怎么分配的
Day 1 ( 12h )
Day 2 ( 14h )
Day 3 ( 10h )
模型选择
模型一定要用最好,最贵的模型,能省下很多事情!
Gemini3 Pro
Antigravity 刚出来的时候,就用了,免费额度很多。写一些 demo ,玩具是没有问题的,它在上下文理解和解决 BUG 能力上弱很多,而且还不是中文回复。
GLM4.7 模型
被朋友安利说 openCode 体验还不错。但实际体验过之后,你会发现一坨屎。比 Trea 稍微强上一点吧,执行任务时间长、流程长、会反复报错,反复执行。执行完之后的代码,无法一次运行,有各种 BUG 需要反复改。
Opus4.5
代码模型的神! Plan 模式和 Agent 模式都很舒服。运行速度快,理解能力强,任务规划强。最近又出了 Debug 模式。
能用最贵的代码模型,直接用!这里我用的 Opus4.5 ,成本如图。

UI 设计
我自己没有 UI 设计能力,但业界有很多设计模板网站和组件,这里我选择的是 framer 和 reactbits
都有优秀的 UI 组件和 UI 模板,做出海网站,落地页面的整体架构都是类似的
Header (头部)
HeroSection (主视觉区)
FeatureIntroduction (功能介绍区)
PriceSection (价格区)
TestimonialsSection (用户评价)
FAQSection (答疑)
Footer (底部)
我的做法是确定网站的主题,这里选择的是黑紫主题。基于选择主题,再进行填充上面的内容,找到合适的组件。每个组件都可以自行风格话调教,你需要的动画,颜色,展示方式等。
得益于 opus 强大的记忆功能,我在后续的新增功能和 UI 改造,它都能记住网站是黑紫主题。也难怪 Tailwind 要裁员。
技术选型
Next.js 全栈型框架
UI 库 Shadcn
数据库 Supabase
Redis Vercel
邮箱注册 & 谷歌登录 auth.js
邮件发送 resend
存储服务 cloudflare r2
机器 digitalocean
前端部署 Vercel
支付 Stripe
AI 时代下的模型物料训练对 TS 开发人员来说,非常友好!我个人认为 AI 模型能够达到前端资深甚至是专家级别的能力,只要你会使用。
纯 AI 实现一个视频编辑器,都没啥问题。
UI 库用的 Shadcn,不得不说 Shadcn 对 AI 来说简单快速,你要实现自己的一个组件库,很简单。
能用免费的,基本都是免费的,不免费的服务,也有试用额度,基本够用。
AI 模型对话
一句话:你得自己清楚你要实现什么功能,AI 模型才能跟你实现。
比如我这个产品要实现的功能有:
我个人认为,如果你对这些功能没有一个基本的认知。虽然 AI 能够完全帮你实现,但细节上就欠缺。举个例子,Google 登录,AI 帮你生成一份文档,你需要照着文档去操作,如果你不会,那你自然没法操作。

不过,这也让我惊叹于 Opus4.5 强大的编程能力,我让它实现一个 r2 存储服务。它居然可以自动帮我操作浏览器来实现
实现一个完整的功能,直接使用 Plan 模式,跟它对齐实现方案和要点。
这里我没有去追什么
完完全全就是和它一起过 Plan 计划,对齐方案,然后 Build ,简简单单,它就能很好的理解,而且每次运行完的代码,是完全能够运行。而不是需要去修复 BUG 啥的。

所以,这里产生了大量的文档,都是跟它过 Plan 计划之后产生的。
我觉得好用的 AI 代码模型就是这样
AI 最容易出问题的 5 个点
OAuth / Google 登录(平台配置 ≠ 代码)
Stripe Webhook (时序 + 幂等)
SEO ( AI 不懂搜索引擎“潜规则”)
边界状态(并发、异常、重试)
成本估算( AI 不心疼钱)
虽然 AI 能写代码,能写文档配置,但不能替你承担线上事故,以及一些细节 AI 是不懂的。
总结:Vibe Coding 的前提,是你脑子里已经有架构。AI 时代下,对于程序员来说,最好是拥有架构的能力,变成一个 AI 架构师。
完


