3 天 Vibe Coding 了一个生产级的项目

[LiuJiang]

访问链接： https://snapvee.com

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

3 天时间是怎么分配的

Day 1 （ 12h ）

• 产品定位 & MVP 功能清单
• 落地页 + UI 主题定型
• Auth / 数据库 Schema
• 基础部署

Day 2 （ 14h ）

• 核心功能（下载 / 解析 / 队列）
• 存储 & R2 / Redis 接入
• Stripe 支付
• SEO / i18n

Day 3 （ 10h ）

• BUG 修复 & 压测
• 文案、价格、FAQ
• 域名、合规、上线

模型选择

模型一定要用最好，最贵的模型，能省下很多事情！

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 模型才能跟你实现。

比如我这个产品要实现的功能有：

• 注册登录
• 落地页
• 前端部署
• 后端部署
• 数据库建表
• Redis 链接
• SEO 优化
• 其他等等

我个人认为，如果你对这些功能没有一个基本的认知。虽然 AI 能够完全帮你实现，但细节上就欠缺。举个例子，Google 登录，AI 帮你生成一份文档，你需要照着文档去操作，如果你不会，那你自然没法操作。

不过，这也让我惊叹于 Opus4.5 强大的编程能力，我让它实现一个 r2 存储服务。它居然可以自动帮我操作浏览器来实现

<video id="video" controls > <source id="mov" src="https://oss.api-service.net.cn/1%E6%9C%8826%E6%97%A5-1.mov" type="video/mp4"> </video>

实现一个完整的功能，直接使用 Plan 模式，跟它对齐实现方案和要点。

这里我没有去追什么

• .Claude 文件
• Skills 文件夹
• MCP 工具等

完完全全就是和它一起过 Plan 计划，对齐方案，然后 Build ，简简单单，它就能很好的理解，而且每次运行完的代码，是完全能够运行。而不是需要去修复 BUG 啥的。

所以，这里产生了大量的文档，都是跟它过 Plan 计划之后产生的。

我觉得好用的 AI 代码模型就是这样

AI 最容易出问题的 5 个点

• OAuth / Google 登录（平台配置 ≠ 代码）

• Stripe Webhook （时序 + 幂等）

• SEO （ AI 不懂搜索引擎“潜规则”）

• 边界状态（并发、异常、重试）

• 成本估算（ AI 不心疼钱）

虽然 AI 能写代码，能写文档配置，但不能替你承担线上事故，以及一些细节 AI 是不懂的。

总结：Vibe Coding 的前提，是你脑子里已经有架构。AI 时代下，对于程序员来说，最好是拥有架构的能力，变成一个 AI 架构师。

完

[fortytwo]

反馈一个 bug 。
在选择语言后，页面内跳转会重置为默认英文。

[Tink]

就是直接解析出无水印的视频 url 吗

[LiuJiang]

@Tink 对

[LiuJiang]

@fortytwo 嗯嗯，待会儿修复

[xuyihao]

卧槽，你做了我在做的东西，我也是全程 vibe coding ，不过我比你多一个微信视频号的解析

[LiuJiang]

@xuyihao 6666

[Tink]

@xuyihao #5 牛逼

[Tink]

@LiuJiang #3 我之前看到了一个类似的项目，不过那个是暴漏出来的 mcp 服务器

[xuyihao]

不过是客户端，自己做着玩的

[duuu]

生产级在哪里。。

[sillydaddy]

bro ，我有几个问题：
架构是怎么做的，用的 Plan 模式吗？谁 AI 主导的架构吗？
还有就是这个项目的花费，3 天平均每天 10 刀吗？感觉按 token 数量计费的话，Opus 4.5 一个对话（百万 token 级别）就轻松几刀了。

[LiuJiang]

@sillydaddy
1 、架构，使用 Plan 模式，跟它描述你需要的功能，简短的描述都行，它会跟你确认，再补充。
2 、AI 主导的架构，我来确认方案是否有问题
3 、上面有 token 消耗图

[LiuJiang]

@fortytwo 已修复

[kelvinji2009]

👍 这种级别的小项目确实用 AI 已经是手到擒来了。