Vibe Coding 实战：用 Claude Code 一晚搭出能用的 SaaS 原型

Vibe Coding 实战：用 Claude Code 一晚搭出能用的 SaaS 原型

一句话："我有想做的副业，但白天工作下来根本抽不出整周时间。" 这句话过去几年我听了几十遍。AI 编程工具上来之后还是这句——只是把"抽不出整周"换成了"抽不出整周写 prompt"。 Vibe Coding（Karpathy 2025 年 1 月提出）给了一个让人意外的结论：当工具足够顺手时，你不再需要"完整地写代码"——你只需要"完整地表达意图"。一晚不够写一个完整 SaaS 的代码，但够指挥 Claude Code 把它搭起来。 本文是一次真实意图：4 个晚间小时（晚 7 点到 11 点），从一句话需求 → 跑通的 URL shortener SaaS（带分析）→ 部署到 Cloudflare → 拿到能分享的 URL。技术栈：Next.js + Cloudflare Workers + D1。Claude Code 全程主驾。总成本估算 $2-4。

目录

1. Vibe Coding 是什么，跟"AI 写代码"有什么区别
2. 一晚 SaaS 的可行性边界
3. Hour 1：把意图表达清楚
4. Hour 2：跑通核心功能（写代码 + 跑测试）
5. Hour 3：上 UI + 边缘部署
6. Hour 4：写 README + 自我审查 + 分享
7. 真实成本账本（典型估算）
8. 4 件别在 Vibe Coding 状态下做的事
9. FAQ
10. 相关资料

Vibe Coding 是什么，跟"AI 写代码"有什么区别

Karpathy 给的原话大意是："you fully give in to the vibes, embrace exponentials, and forget that the code even exists." 翻译过来——别管代码长什么样，专注表达你想要的东西。

跟传统"AI 写代码"的三个具体差别：

这不是说写得糙——而是说"质量验证"从读代码改成跑代码。Vibe Coding 不适合写公司核心交易系统，但极其适合：

• 周末副业 / hackathon 项目
• 给客户的 demo 原型
• "想到一个点子明天验证一下"
• 学一个新框架的"脚手架阶段"

一晚 SaaS 的可行性边界

不是所有 SaaS 都能一晚搭。具备这 4 个特征的可行：

1. CRUD 形态：增删改查为主，不是复杂业务规则
2. 单服务：一个 Worker / 一个数据库，不要微服务
3. 现成模板：技术栈在 GitHub 有 starter（Next.js + Cloudflare 这种）
4. 公开访问：不要复杂鉴权（OAuth 流程一晚搞不完）

典型可一晚做的：

• URL shortener（本文示例）
• 简单 to-do SaaS
• Content scheduler（推送到一个固定 API）
• AI thumbnail generator（拼现成图像 API）
• Lead form aggregator
• Recipe / receipt extractor

不可一晚做的：

• 多租户带计费（Stripe webhook + 多用户隔离）
• 复杂权限的 B2B SaaS
• 自托管推理服务

Hour 1：把意图表达清楚

晚 7 点。打开 Claude Code 之前先做 30 分钟"非编码"工作——把你想做的东西写成 spec。

目标 spec（写到 INTENT.md）

# URL shortener SaaS - 一晚版本

## 我想要什么
- 一个 https://my-shorty.workers.dev 网站
- 输入长 URL，给我一个短链 https://my-shorty.workers.dev/abc123
- 点短链跳转到原 URL
- 能看到每个短链被点了几次

## 不要什么
- 不要登录注册（公开访问）
- 不要 CAPTCHA / 防滥用（先简单跑起来）
- 不要复杂的 dashboard（一个表能看到点击数就行）

## 技术栈（现成模板优先）
- Next.js 15（前端 + API routes）
- Cloudflare Workers + D1（边缘部署 + SQLite）
- 一个 schema：`links(short, original, clicks, created_at)`

## 验收
- 我能从手机打开网站
- 输入 https://www.google.com 给我个短链
- 短链点开跳到 google
- 我能看到 clicks=1

写 spec 时唯一原则：写完之后不再改。 Vibe Coding 的核心是"意图清楚 + 不返工 spec"。如果中途想改 spec，那是普通 coding 不是 vibe coding。

给 Claude Code 一句话开始

读 INTENT.md，按这个意图初始化项目。
技术栈用 Next.js 15 + Cloudflare Workers + D1。
我喜欢 pnpm。
跑通小骨架（能 pnpm dev 看到首页），先 commit 一次。

Claude Code 会：选模板、初始化、装依赖、生成首页。你 review 一下首页能跑（pnpm dev 在 localhost:3000 能开）就 OK。不要审 package.json 每行——这是 vibe coding 状态。

时间消耗：约 25 分钟。一杯咖啡时间。

Hour 2：跑通核心功能（写代码 + 跑测试）

晚 8 点。开始让 Claude Code 写实际功能。

一句话指挥模板

按 INTENT.md 实现：
1. POST /api/shorten — 接 { url }，生成 6 位 base62 短码，存 D1，返回短链
2. GET /:short — 查 D1，原 URL 跳转，clicks++ 
3. GET / — 简单表单（输入框 + 提交按钮），下方列出最近 10 条短链 + 点击数
4. D1 schema 用 migrations
5. 写 3 个 vitest 单元测试覆盖 generate/lookup/click-count
6. 跑 pnpm test 全过再 commit

把这段塞给 Claude Code。它会：

• 写 app/api/shorten/route.ts
• 写 app/[short]/page.tsx 处理跳转
• 写 app/page.tsx 表单和列表
• 写 schema migration
• 写 3 个测试
• 跑 pnpm test，没过自己改

如果测试跑不过，不要打开 IDE——继续在 Claude Code 里说"测试 X 失败，错误信息是 Y，修一下"。重要：vibe coding 状态下不读代码，只读测试结果和命令输出。

这一阶段 Claude Code 会用到的关键能力

• 多文件并发改动：写 4 个文件 + 跑测试单一会话搞定
• 命令直接执行：pnpm test / wrangler d1 execute 自己跑
• 结果归因：测试失败时定位到具体文件、行、原因

时间消耗：约 70-90 分钟。这是核心阶段。

Hour 3：上 UI + 边缘部署

晚 9:30。功能跑通了，但首页很丑。也没部署。

美化（10-15 分钟）

首页 UI 太朴素。改成：
- 顶部一个 hero 区，slogan "Vibe-coded URL shortener"
- 表单居中，输入框 + "Shorten" 按钮（紫色 #8B5CF6）
- 下方"最近 10 条"用卡片展示，每张卡片显示短链 / 原链截断 / 点击数
- 整体用 Tailwind，深色背景，现代感
- 不要写 emoji，不要 cartoon 风格

Claude Code 会改 page.tsx。不要让它"重新设计"——只要"按描述改"。

部署（10-15 分钟）

现在部署到 Cloudflare Workers。
我的 wrangler 已登录，账号是 default 那个。
1. 跑 wrangler d1 create my-shorty 创建 prod D1
2. 跑 migration 同步 schema
3. wrangler deploy
4. 把部署 URL 给我

Claude Code 会处理 wrangler.toml、binding 配置、deploy。唯一手动：首次 wrangler login（如果没登录）。

时间消耗：约 25 分钟。

验证（5 分钟）

打开手机浏览器，访问部署 URL，输入 https://www.google.com，得到 my-shorty.workers.dev/abc123，点击跳转 Google。返回首页看到 clicks=1。OK，今晚真的搭出来了。

Hour 4：写 README + 自我审查 + 分享

晚 10:30。代码跑了，部署了，但还没"产品形态"。

README（10 分钟）

给项目写 README.md：
- 一句话说明这是什么
- 演示 GIF 占位
- 技术栈清单
- 5 步本地跑起来
- 部署到 Cloudflare 命令
- License: MIT

风格：技术 editorial，不要营销腔。

安全自查（10 分钟）

快速 review 安全：
- /api/shorten 有没有简单的 rate limit？（用 IP）
- 输入的 URL 有没有至少验证（必须 https://）
- D1 binding 有没有暴露敏感字段
- README 没写错把 secret 提交到 git
- env 有没有 .gitignore

把不安全的项列出来，能 5 分钟修的现在修，不能的写进 BACKLOG.md。

副业 vibe coding 项目的安全 baseline：不要让别人能往你账户记账——这一条做到，剩下的可以慢慢补。

分享（10 分钟）

发到 X / 即刻 / Hacker News Show HN：

发了一个 vibe-coded URL shortener: my-shorty.workers.dev
- 4 小时搭完
- Next.js 15 + CF Workers + D1
- 总成本: AI $X / Cloudflare $0
- 代码 MIT 开源: github.com/...

不要写 "AI 写的"——写"vibe coded"。前者像免责，后者是 2026 年的 ship 文化。

时间消耗：约 30 分钟。

真实成本账本（典型估算）

数据声明：以下是基于一晚 4 小时跑通 URL shortener SaaS 的典型估算。Claude Code 实际消耗会因 Hour 2 的代码量、测试失败重试次数、Hour 3 的 UI 迭代次数浮动。本文按 Claude Sonnet 4.6 价格 + CodeGateway 1.5x 起步倍率估算。

4 个 Hour 的 token 消耗估算

单晚总账估算

Token 总量:   175K 输入 + 85K 输出 ≈ 260K tokens
Anthropic 直连价:   ~$1.95
1.5x 起步倍率（CodeGateway 新账号）:  ~$2.93
1.2x 老账号倍率（90 天累计 > $500）:  ~$2.34

外加 Cloudflare 免费 tier——D1 + Workers 免费层级搭这种 demo 完全够用，不产生成本。

总账：$2-4 / 一晚 / 一个能分享的 SaaS demo。

三个让成本翻倍的常见原因

1. 改 spec：Hour 2 改 INTENT.md 等于让 Claude Code 重新读 + 重新决策。规则：spec 锁死后不改，要改的写进下次迭代。
2. 审代码：忍不住打开文件审 → 看到不喜欢的 → 让 Claude 改 → 又审 → 再改。这是 vibe coding 杀手。规则：测试通过 + 跑得动就 commit，回头再审。
3. 理想主义：UI 三轮调色、文案改 5 次。这是周末副业不是给 VC 看的产品。规则：够用就发。

4 件别在 Vibe Coding 状态下做的事

1. 别选不熟的技术栈

Vibe coding 是"加速"，不是"学习"。如果你没用过 Cloudflare D1、没跑过 Next.js 15，前 1 小时就会消耗在搞清楚 binding / migration / deploy 这些工程化细节。

正确做法：选你已经熟一点的栈。或者花一个独立周末先学清楚，再用 vibe coding 状态去 ship。

2. 别在 main 分支上改

Claude Code 改文件是 destructive 的。一晚下来 commit 30 次是常态。一直在 feature branch 上跑。

git checkout -b vibe/url-shorty-2026q2

第二天早上看不爽全删都没事。

3. 别在涉及钱的地方 vibe coding

支付集成、Stripe webhook、用户余额变更——这些代码即便写得"看起来对"，也要在第二天清醒状态下逐行 review。Vibe coding 容易让你在 race condition / 数据精度 / 重放攻击这种边缘问题上漏。

副业项目即使有支付，先用 Stripe 提供的 hosted checkout（不接 webhook），降低自写代码的暴露面。

4. 别忘了备份 INTENT.md

Vibe coding 一晚后，你会忘记今晚的初衷是什么。一个月后翻这个项目，`INTENT.md` 就是你回到那个晚上的 anchor。把它当作项目的"创世文件"——commit 进 git 第一个 commit。

FAQ

Q：vibe coding 出来的代码能上生产吗？

A：短答：不能，但能 80% 重构成生产可用。Vibe coding 输出的代码"长得对"——它通过了你定义的测试。但生产代码需要：错误处理、日志、监控、回滚。这些在 vibe coding 阶段不写，下一个阶段补。能上生产的不是 vibe-coded 代码，是 vibe-coded 项目结构——你拿这个结构开始正经迭代。

Q：为什么用 Claude Code 不用 Codex CLI / Cursor？

A：都行，本文以 Claude Code 为例因为：(1) 多代理调度成熟，复杂任务一句话拆给子代理；(2) Skills 能 commit 进 repo，下次类似项目复用；(3) 1M 上下文塞得下整个项目状态，不会"忘记 5 分钟前自己改过啥"。Codex CLI 也能跑同样流程，主要看习惯。详细对比见 Codex CLI vs Claude Code 怎么选。

Q：成本能不能再压？

A：能。三条路：(1) prompt cache 命中（INTENT.md 在每次会话都喂一次，命中后输入降到 ~10%）；(2) Hour 2 修 bug 时切 Haiku（机械任务）；(3) 别理想主义改 UI 5 轮。一晚压到 $1.50 以下完全可能。

Q：vibe coding 跟 spec-driven 矛盾吗？

A：不矛盾。Vibe coding 的 spec 是 Hour 1 那 30 分钟的 INTENT.md，写一次锁死。Spec-driven 通常迭代 spec → 设计 → 实现，每一阶段 review。vibe coding 把"实现 + 测试"绑成一个动作，spec 不变下加速这一段。两者互补：spec 阶段细，实现阶段快。

Q：CodeGateway $2 起步够跑一晚吗？

A：基本够。$2 ÷ Sonnet 4.6 起步倍率折算输入 ≈ 444K tokens，本文典型一晚 175K 输入 + 85K 输出基本能 cover。但如果 Hour 2 测试反复失败重跑，可能撑不到 Hour 4。建议跑前充值 $5。详见 充值费用指南。

Q：Cloudflare 一晚部署真的免费吗？

A：对个人 demo 项目是。D1 免费层 5GB 存储 + 5M 行写入/天；Workers 免费 10 万次请求/天 + 10ms CPU 时间/请求。URL shortener demo 一周可能也用不到 1% 配额。商业产品流量大了再切付费。

Q：怎么判断我的副业点子适合 vibe coding？

A：3 个判定题：(1) 能用一句话讲清楚目标？(2) 1 个数据库表 + 5 个端点能搭出来？(3) 验收标准是"能跑能分享"还是"能商用"？三条都 yes → 适合。任何一条 no → 用普通迭代流程，不要 vibe。

Q：vibe coding 一晚后该做什么？

A：两条路：(1) 抛弃 — 80% 的副业点子在第二天清醒状态下会发现"这没意义"，这种'抛弃'是 vibe coding 大价值。$2-4 验证一个点子值不值得做；(2) 认真做 — 进入正常 sprint，Hour 4 的 BACKLOG.md 是入口。先抛弃后认真做比"上来就认真做"省时间一个量级。

相关资料

• Claude Code 完整配置指南 —— Skills / Hooks 系统，给 vibe coding 流程加自动化护栏
• Claude Code 进阶技巧与佳实践 —— 多代理 / MCP / 成本优化
• Codex CLI vs Claude Code 怎么选 —— 工具选型决策树
• 博客内容工厂：1 小时 16 张配图账本 —— 同样 dogfood 思路的成本复盘
• Codex CLI 给祖传代码大扫除 —— vibe coding 的反面：耐心重构
• 充值费用指南
• 阶梯倍率详解
• Andrej Karpathy 原帖：Vibe Coding（X 平台）
• 本文用到的项目结构 / 模板：Whitedit/code-gateway-cookbook（vibe-coding 模板将加入）

Vibe coding 不是"AI 替你写代码"——是"工具足够顺手时，你只需要把意图表达清楚"。一晚搭一个能分享的 SaaS 不是终点，是找回那种"周末做点酷东西"的状态。代码当然可以是认真的，但不一定每次都得是认真的。

参考资料

Claude Code 官方介绍 · Cloudflare Workers 文档