加载中…
一句话："我有想做的副业，但白天工作下来根本抽不出整周时间。" 这句话过去几年我听了几十遍。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。
Karpathy 给的原话大意是："you fully give in to the vibes, embrace exponentials, and forget that the code even exists." 翻译过来——别管代码长什么样，专注表达你想要的东西。
跟传统"AI 写代码"的三个具体差别：
维度 | 传统 AI 写代码 | Vibe Coding |
|---|---|---|
关注点 | 代码质量 / 风格 / 模式 | 功能能不能跑、能不能分享 |
节奏 | 一行一行 review | 跑通才看，不跑通让 AI 改 |
反馈 | 静态 review、type check | 动态：跑命令 + 看结果 + 直接说哪儿不对 |
适用场景 | 生产代码、要交接 | 原型、demo、MVP、副业 |
这不是说写得糙——而是说"质量验证"从读代码改成跑代码。Vibe Coding 不适合写公司核心交易系统，但极其适合：
不是所有 SaaS 都能一晚搭。具备这 4 个特征的可行：
典型可一晚做的：
不可一晚做的：
晚 7 点。打开 Claude Code 之前先做 30 分钟"非编码"工作——把你想做的东西写成 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。
读 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 分钟。一杯咖啡时间。
晚 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.tsapp/[short]/page.tsx 处理跳转app/page.tsx 表单和列表pnpm test，没过自己改如果测试跑不过，不要打开 IDE——继续在 Claude Code 里说"测试 X 失败，错误信息是 Y，修一下"。重要：vibe coding 状态下不读代码，只读测试结果和命令输出。
pnpm test / wrangler d1 execute 自己跑时间消耗：约 70-90 分钟。这是核心阶段。
晚 9:30。功能跑通了，但首页很丑。也没部署。
首页 UI 太朴素。改成：
- 顶部一个 hero 区，slogan "Vibe-coded URL shortener"
- 表单居中，输入框 + "Shorten" 按钮（紫色 #8B5CF6）
- 下方"最近 10 条"用卡片展示，每张卡片显示短链 / 原链截断 / 点击数
- 整体用 Tailwind，深色背景，现代感
- 不要写 emoji，不要 cartoon 风格Claude Code 会改 page.tsx。不要让它"重新设计"——只要"按描述改"。
现在部署到 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 分钟。
打开手机浏览器，访问部署 URL，输入 https://www.google.com，得到 my-shorty.workers.dev/abc123，点击跳转 Google。返回首页看到 clicks=1。OK，今晚真的搭出来了。
晚 10:30。代码跑了，部署了，但还没"产品形态"。
给项目写 README.md：
- 一句话说明这是什么
- 演示 GIF 占位
- 技术栈清单
- 5 步本地跑起来
- 部署到 Cloudflare 命令
- License: MIT
风格：技术 editorial，不要营销腔。快速 review 安全：
- /api/shorten 有没有简单的 rate limit？（用 IP）
- 输入的 URL 有没有至少验证（必须 https://）
- D1 binding 有没有暴露敏感字段
- README 没写错把 secret 提交到 git
- env 有没有 .gitignore
把不安全的项列出来，能 5 分钟修的现在修，不能的写进 BACKLOG.md。副业 vibe coding 项目的安全 baseline：不要让别人能往你账户记账——这一条做到，剩下的可以慢慢补。
发到 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 起步倍率估算。
阶段 | 输入 tokens (K) | 输出 tokens (K) | 估算成本 |
|---|---|---|---|
Hour 1 (初始化 + spec 对话) | 15 | 8 | $0.18 |
Hour 2 (核心代码 + 3 个测试 + 修 bug) | 80 | 40 | $0.96 |
Hour 3 (UI + 部署 + 调试) | 50 | 25 | $0.60 |
Hour 4 (README + 安全 + 分享文案) | 30 | 12 | $0.30 |
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。
Vibe coding 是"加速"，不是"学习"。如果你没用过 Cloudflare D1、没跑过 Next.js 15，前 1 小时就会消耗在搞清楚 binding / migration / deploy 这些工程化细节。
正确做法：选你已经熟一点的栈。或者花一个独立周末先学清楚，再用 vibe coding 状态去 ship。
Claude Code 改文件是 destructive 的。一晚下来 commit 30 次是常态。一直在 feature branch 上跑。
git checkout -b vibe/url-shorty-2026q2第二天早上看不爽全删都没事。
支付集成、Stripe webhook、用户余额变更——这些代码即便写得"看起来对"，也要在第二天清醒状态下逐行 review。Vibe coding 容易让你在 race condition / 数据精度 / 重放攻击这种边缘问题上漏。
副业项目即使有支付，先用 Stripe 提供的 hosted checkout（不接 webhook），降低自写代码的暴露面。
Vibe coding 一晚后，你会忘记今晚的初衷是什么。一个月后翻这个项目，`INTENT.md` 就是你回到那个晚上的 anchor。把它当作项目的"创世文件"——commit 进 git 第一个 commit。
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 是入口。先抛弃后认真做比"上来就认真做"省时间一个量级。
Vibe coding 不是"AI 替你写代码"——是"工具足够顺手时，你只需要把意图表达清楚"。一晚搭一个能分享的 SaaS 不是终点，是找回那种"周末做点酷东西"的状态。代码当然可以是认真的，但不一定每次都得是认真的。