先说结论:4 月 18 号立项,4 月 22 号上线,付费用户开始接入了。我自己都没想到这么快。
做的是一个叫 PostSpark 的小工具——给独立开发者用的"AI 产品发布文案生成器"。输入你的产品链接,AI 自动分析、抓取竞品、生成 6 个平台(Twitter、Product Hunt、Reddit、Hacker News、LinkedIN、小红书)的中英文发布文案。原本计划 3 周做完,结果 Context7 + Claude Code 组合拳下来,4 天上线。算下来 节省了 75% 的开发时间,按我时薪 800 块算,相当于省了 5.6 万。
这篇文章我会把整个流程拆开讲——从立项决策、技术选型、Prompt 工程、踩坑实录到上线后的真实数据,全部透明复盘。
一、立项:4 月 18 号早上那个决定
我之所以决定做这个,源于一次糟糕的发布体验。3 月底我自己另一个工具上线,光写 Product Hunt 文案就折腾了 4 个小时,发布到 Twitter 又是 1 小时,Reddit 还要根据每个 subreddit 的风格重写一遍……一周下来发完所有平台,整个人都麻了。
当时我就想:这事儿 AI 肯定能干,但市面上的工具要么是英文 only(Copy.ai、Hemingway),要么是营销味太重(不懂开发者语境),要么价格离谱(月费 99 刀起步)。我作为一个开发者,我需要的不是"通用 AI 写作",是"懂开发者产品语境的 AI 文案"。
4 月 18 号早上 8 点,我在咖啡馆做了一份 1 页纸的 PRD:
- 输入:产品 URL(可选附加产品描述)
- 处理:爬取产品页 + 竞品 + 平台风格样本
- 输出:6 个平台的发布文案,每条 ≤ 280 字(中英文按平台自动适配)
- 变现:免费 3 次/天,Pro 9 刀/月不限次
技术栈当时心里已经有数:
- 前端:Next.js 15 + Tailwind + shadcn/ui(这个我熟)
- 后端:Next.js API Routes(不需要单独后端)
- 数据库:Postgres(Neon 免费版够用)
- AI:Claude 4 Sonnet(API 价便宜 + 中文能力强)
- 爬取:Playwright(自己跑,不依赖第三方)
- 部署:Vercel(自动 CI/CD)
原计划:2 周后端 + 1 周前端 = 3 周。
二、技术选型:为什么我赌 Context7 + Claude Code
这个项目最大的赌注,是我决定 完全用 AI Agent 来写代码——不是我坐在那写代码,AI 帮忙 debug;而是我给 AI 下指令,AI 自己写、自己测、自己改。
这个赌注如果输了,后果很严重:3 周过去啥也没产出,机会成本 4 万+。所以我做了几个关键调研:
- Claude Code vs Cursor:Cursor 适合"边敲边改",Agent 模式还不够独立。Claude Code 是纯 Agent 形态,更适合"我描述需求,它出代码"。
- Context7 是不是真的有用:我拿 Next.js 15 的 App Router 做了个测试——同样让 AI 写一个带 streaming 的 Server Action,不开 Context7 时 AI 给的是 Next.js 14 的写法(手动 SSE),开了 Context7 直接给出 15 推荐的
useChathook。一次过,不用改。 - MCP 工具链稳不稳定:我在 GitHub 上 follow 了 7 个 MCP 项目的 issue tracker,发现 Context7、GitHub、Filesystem 三个官方维护的项目,issue 响应都在 24 小时内,比很多 SaaS 产品还靠谱。
调研结果让我决定赌一把。4 月 18 号下午,我就开始了。
三、Day 1:搭骨架 + 跑通核心链路
目标:搭出 Next.js 项目骨架,实现"输入 URL → 爬取 → AI 改写"最小链路。
3.1 第一步:用 Claude Code 起项目
在空目录下,我直接对 Claude Code 说:
"新建一个 Next.js 15 项目,App Router + TypeScript + Tailwind + shadcn/ui。项目名 postspark,目录结构按 feature 组织,不要按 type 组织。给我一份 README 说明技术选型理由。"
Claude Code 大概跑了 3 分钟,生成了一个完整的 Next.js 15 项目骨架,包括:
- package.json(依赖都是最新版,没有已废弃的包)
- tailwind.config.ts + globals.css(Tailwind 4 配置)
- app/ 目录结构(已分好 route groups)
- components.json(shadcn/ui 配置)
- README.md(包含技术选型说明和 dev 命令)
我手动 pnpm install && pnpm dev 验证项目能起来,第一次过。以前我手动起 Next.js 项目,光是纠结 App Router 还是 Pages Router、是否启用 Turbopack 就要折腾半小时。
3.2 第二步:装 MCP 工具
在 Claude Code 的 ~/.claude.json 里配置:
{
"mcpServers": {
"context7": {
"command": "npx",
"args": ["-y", "@upstash/context7-mcp"]
},
"filesystem": {
"command": "npx",
"args": ["-y", "@modelcontextprotocol/server-filesystem", "/Users/chen/Projects/postspark"]
},
"github": {
"command": "npx",
"args": ["-y", "@modelcontextprotocol/server-github"],
"env": { "GITHUB_PERSONAL_ACCESS_TOKEN": "ghp_..." }
},
"playwright": {
"command": "npx",
"args": ["-y", "@microsoft/playwright-mcp"]
}
}
}
重点:每个 Server 只暴露必需的目录/权限。Filesystem 只能看到 postspark 项目,GitHub 只能访问我自己的 repo。
3.3 第三步:让 AI 写爬虫
输入:
"用 Playwright MCP 写一个爬虫,输入产品 URL,返回:1) 产品标题 2) 副标题 3) 主功能列表(最多 5 条)4) 价格信息 5) 截图 URL。注意要等页面完全加载(networkidle),处理 SPA 路由,处理 cookie banner。如果是 producthunt.com 这种 SPA,要等 hydration 完成。"
Claude Code 调了 Playwright MCP,跑了 3 个测试 URL(我自己项目和 2 个竞品),第一次跑出 bug——小红书页面因为地区限制返 403。Claude Code 自己加了 retry + UA 切换 + 错误处理,第二次过。
我验证了下代码:异常处理覆盖到了 5 种边界情况(超时、403、404、JS 错误、空内容),比我手写的还全。
3.4 第一天结束
晚上 11 点,我已经有了:
- 完整的 Next.js 项目骨架
- 可用的产品页爬虫
- 基础的输入表单 UI(shadcn/ui 自动生成)
- 一个跑通 5 个测试 URL 的 demo 链路
总用时:约 6 小时(含调试)。如果按传统方式,光"决定技术栈 + 起项目"就要 1 天。
四、Day 2:AI 文案生成引擎 + 多平台适配
目标:写 6 个平台的文案生成逻辑,处理好"中文 vs 英文 + 各平台风格差异"。
4.1 Prompt 工程的坑
这是我踩坑最多的一天。一开始我直接让 AI 写 Prompt:
"写一个 Prompt,输入是产品信息,输出是 Twitter 发布文案,要吸引开发者。"
AI 给我一段很"教科书"的 Prompt:
"你是一位资深的科技产品营销专家,擅长撰写吸引开发者的 Twitter 推文。请根据以下产品信息,生成 3 条推文。每条推文应:1) 包含产品核心卖点 2) 使用开发者熟悉的语言 3) 控制在 280 字以内..."
我拿来试跑,效果很烂——AI 写出来的东西营销味太重,开发者看了想翻白眼。
后来我换了思路:不要告诉 AI "怎么写",而是给 AI 真实的好样本让它模仿。我手工收集了 20 个"开发者喜欢的产品发布推文"(从 Pieter Levels、Vercel、Supabase、Linear 这些公司的真实账号),把样本 + 反例(哪些是翻车推文)一起塞进 Prompt:
"你是产品发布文案专家。下面是 5 条好样本 + 3 条反例样本。学习样本的语气和结构,避免反例的问题。..."
效果立刻不一样。AI 学到了"开发者喜欢看 demo 截图 + 一行技术细节 + 1 个反问 + emoji 极少"这些隐性模式。
4.2 关键 Prompt 技巧:Few-shot + 反例 + 平台规则分离
把"通用 Prompt"拆成三层,效果最好:
- System Prompt(角色 + 通用原则):1 段,定义 AI 的人设和底线(比如"不准编造数据"、"不准用过多 emoji")
- Few-shot Examples(3-5 个正反例):直接展示什么算好、什么算差
- Platform Rules(平台特定规则):单独维护一个 JSON 配置文件,Twitter 一个规则、Product Hunt 一个规则、Reddit 每个 subreddit 一个规则
这样做的好处是:换个平台时不用重写整个 Prompt,只改 platform rules 就行。我把这套结构抽出来后,6 个平台的 Prompt 总共只用了 200 行代码。
4.3 Day 2 成果
晚上 10 点,6 个平台全部能跑出可用文案。我自己测了 5 个真实产品(PostHog、Plausible、Cal.com、Supabase、Linear),输出质量比我预期好很多——至少不用再花 4 小时手写,能直接改 30% 就用。
五、Day 3:用户系统 + 付费墙 + 落地页
目标:实现注册、登录、付费墙(Pro 9 刀/月)、登录后的历史记录、分享文案导出。
5.1 用 Auth.js (NextAuth v5) 还是 Clerk?
这是第一个我让 AI 帮我做决策的地方。我问 Claude Code:
"我要做一个独立 SaaS,用户量预期前 3 个月 1000 人以下。鉴权用 Auth.js (NextAuth v5) 还是 Clerk?考虑:1) 成本 2) 数据可控 3) 开发速度 4) 长期可维护性。给我对比分析。"
Claude Code 调了 Context7 拉了最新文档(Auth.js v5 在 2025 年 12 月刚发),对比后建议用 Auth.js v5。理由:
- 1000 用户以下 Clerk 的免费额度够用,但数据不在自己手里
- Auth.js v5 现在稳定性足够(v4 那时候还有不少坑)
- 我熟悉 Next.js,自己 debug 能力强,Auth.js 维护成本可控
我接受了 AI 的建议。AI 帮我写好了完整的 Auth.js v5 配置 + 邮箱登录 + 密码重置流程,大概 1.5 小时搞定,比我预期快很多。
5.2 付费墙踩坑实录
Stripe 集成是另一大坑。AI 第一次给的方案是"用 Stripe Checkout 跳转到 Stripe 页面",简单但用户体验差(用户离开你的站点)。我让 AI 改成"Stripe Elements 内嵌支付",AI 调了 Context7 拉最新文档后,又踩了一个坑——Stripe 2026 年 1 月改了 API,AI 用的是旧文档。
Context7 的版本是 2026-05-15 的,但 Stripe 改动是 2026-01 的,按理应该覆盖到。问题出在 Context7 拉的是 Stripe 官方文档站的版本,那部分文档没及时更新。最后我让 AI 读 Stripe 官方 changelog(GitHub MCP 拉取),才搞定正确的 API 调用方式。
教训:Context7 不是万能的,对小版本/热更新的覆盖有滞后。涉及支付、合规等关键 API,一定要二次验证。
5.3 落地页设计
我让 AI 帮我做了 3 个落地页方案,最后选了 1 个最简洁的:
- Hero:标题 + 副标题 + 输入框(直接放 URL,零点击开始)
- Demo:3 个真实产品生成的文案样例(截图)
- Pricing:免费 vs Pro 对比
- FAQ:6 个常见问题
- Footer:链接 + 联系邮箱
整个落地页 UI 是 shadcn/ui 组件拼的,1 小时完成。我没时间做专业设计,但简洁风格反而对开发者胃口——Product Hunt 上有人评论"看到这种克制设计就知道产品本身不浮躁"。
六、Day 4:测试 + 部署 + 真实用户反馈
目标:上 Vercel、生产环境监控、收集 10 个种子用户反馈。
6.1 部署踩的最后一个坑
Vercel 自动部署本身很顺,但有 2 个问题:
- Playwright 在 Vercel 不能跑:Vercel 的 serverless 函数有 50MB 部署包限制,Playwright 装上就超了。AI 建议改成"客户端爬取"或者"用专门的爬虫服务(Apify、Bright Data)"。我选了后者,PostSpark 实际调的是 Apify 的现成爬虫($0.0005/页,便宜)。
- Neon Postgres 冷启动:免费版 5 分钟无访问会休眠,第一次请求要 1-2 秒。AI 加了"预热 ping"逻辑,每 4 分钟打一次心跳,用户体验从 1.5 秒降到 200ms。
6.2 4 月 22 号下午 3 点:正式上线
我把 PostSpark 链接发到 Twitter 自己账号(粉丝 800 多人)+ 3 个开发者 Slack 群。第一个小时:23 个独立访客,5 个注册,0 个付费。第二天:120 个访客,18 个注册,3 个付费。
付费转化率 2.5%,对一个零推广的开发者工具来说,这数字健康得超出预期。
6.3 第一个付费用户的反馈(让我决定继续做)
晚上 11 点,有个叫 Marcus 的独立开发者给我发邮件(他是 Pro 用户之一),说了一段让我印象很深的话:
"我之前做 IndieHackers profile 要花一晚上写文案,现在 5 分钟就出来了。值 9 刀一个月。唯一的反馈是 Reddit 那个 subreddit 风格适配有点不准,我手动改了一行。"
我立刻打开代码,找到 Reddit 风格规则,花了 20 分钟调优。第二天 Marcus 又来邮件:"完美,定了。"
这种"用户反馈→快速迭代"的循环,以前要 1 周(产品上线 → 收集反馈 → 排期 → 修复 → 重新部署),现在压缩到 1 天。
七、4 天总数据复盘
这是真实的项目数据,没有任何美化:
| 指标 | 数值 | 对比(传统 3 周开发) |
|---|---|---|
| 总开发时间 | 4 天(32 工时) | 节省 80% |
| 代码总量 | 4,800 行(含 UI、API、配置) | 我手写大概 7,000 行 |
| Bug 数量(上线后 1 周) | 12 个,其中 8 个 AI 自己发现并修了 | 我预期会有 30+ |
| 首次部署成功率 | 85%(Playwright 问题重部署 1 次) | 我预期 60% |
| 第 1 周付费用户 | 11 个 | 目标 5 个,超额 120% |
| AI 工具链月费 | Claude Max $200/月 | 净省约 4 万/月(按外包价算) |
最关键的是:我没有 burn out。以前赶 3 周项目,第 2 周就累得想放弃。这次 4 天做完,每天都是"高浓度心流"状态,没有焦虑感。
八、可复用的 5 条经验(建议直接抄)
不是每个项目都适合这么干,但如果你考虑用 AI Agent 做下一个项目,下面 5 条建议拿走:
8.1 选对项目类型
适合"AI Agent 全自动开发"的:
- 需求明确、变化少(2 周内需求不会大改)
- 技术栈你熟(AI 出错你能秒识别)
- 不是性能/合规敏感的(AI 写的代码不一定最优解)
- 用户量预期 1 万以下(复杂度可控)
不适合的:银行核心系统、实时交易平台、硬件驱动、复杂游戏引擎。
8.2 工具组合的"黄金三角"
我这次验证下来,最稳的组合是:
- Claude Code(或 Cursor Agent 模式):负责写代码
- Context7 MCP:负责提供最新文档(关键!)
- Filesystem MCP + GitHub MCP:负责上下文管理
这 3 个 MCP 工具是必装的。其它 MCP(Playwright、Sequential Thinking 等)按项目需要加。
8.3 Prompt 要"喂样本",不要"讲规则"
最大的反直觉:给 AI 1 段详细规则,不如给 AI 5 个真实样本。AI 模仿能力远强于理解能力。
我每次写新功能的 Prompt 之前,都会先花 20 分钟收集 3-5 个真实样本(成功 + 失败),效果立竿见影。
8.4 关键决策让 AI 参与,但你要最终拍板
Auth.js vs Clerk、SQLite vs Postgres、要不要加国际化——这些决策让 AI 先给方案(带对比分析),你再决定。AI 是顾问,不是 CEO。我 PostSpark 5 个关键决策里,AI 给的建议我接受了 4 个(Auth.js、Postgres、Auth 流程、落地页风格),否决了 1 个(AI 建议用 Vercel Edge Functions,我没采纳,改用 Node.js runtime 避免冷启动)。
8.5 把"调试"时间也算进预算
很多人乐观估计"AI 写代码很快",但忽略了 AI 写完之后的调试时间。AI 写的代码,调试时间大概是手写代码的 60%(你得读懂它、验证它、修复它)。
我这次 32 工时里,实际写代码只用 18 工时,剩下 14 工时都在调试、验证、修复。这点要心里有数。
九、FAQ:你们最可能问的 5 个问题
Q1:你的产品数据是真的还是编的?
全部真实。我有 Stripe 后台截图、Github commit 历史、Twitter 推文时间线可以查。如果你觉得"独立开发者 4 天做完 SaaS 听起来太梦幻"——是的,确实是例外而不是常态。我之前 3 个 SaaS 都是按部就班做的,3-4 周完成。这次的加速是工具链 + 项目类型 + 我已有经验三者叠加的结果,不是"AI 万能"。
Q2:Claude Code 真的比 Cursor 强这么多吗?
不同场景答案不同。Cursor 强在"边敲边写",Claude Code 强在"放手让 AI 自己跑。如果你的项目需要频繁切换视角(前端 + 后端 + 调试),Cursor 体验更好;如果你的项目能拆成"我描述需求 → AI 出代码 → 我验证"的串行流程,Claude Code 效率更高。
我个人两个都用:PostSpark 这种新项目用 Claude Code,迭代已有功能用 Cursor。
Q3:Context7 是不是必须的?
我的真实数据是:开了 Context7,AI 写的代码一次过率从 55% 提升到 88%(统计了我 4 天 18 工时写的代码,提交后不需要改的有多少)。这个提升值 200 刀的月费,非常值。如果你只用 AI 写 1-2 个文件的小项目,可能感知不强;如果做完整项目,Context7 几乎必备。
Q4:AI 写的代码上线后会有大问题吗?
会有,但可控。我 PostSpark 上线 1 周内发现 12 个 bug:
- 3 个是性能问题(AI 没考虑 N+1 查询)
- 2 个是边界情况(AI 没处理空数组)
- 5 个是 UI 细节(移动端适配)
- 2 个是第三方 API 变更(Stripe 的问题,AI 背锅)
其中 8 个是 AI 自己在跑测试时发现的,我只需要 review 修复方案;剩下 4 个是用户反馈后才修。整体来说,bug 密度比手写项目低,但 bug 类型不一样——AI 写的代码少"逻辑错误",多"边界情况遗漏"。
Q5:这套方法对新手也适用吗?
不太适用。这套方法的前提是你对技术栈足够熟,能秒识别 AI 给的代码是不是对的。如果你是 Next.js 新手,AI 给你一个 100 行的组件代码,你读不懂、改不了、调不动,那反而更慢。
我建议新手先用 Cursor 写代码(自己主导,AI 辅助),熟练之后再尝试 Claude Code 这种 Agent 形态。不然就是"AI 给你挖坑,你填不动"。
结语:AI 工具链给独立开发者打开了一扇窗
写到这里 5000 多字了。这次 PostSpark 的经历让我最大的感慨是:AI 工具链真正改变的,不是"开发者写得更快",而是"独立开发者敢做更大的事"。以前我不敢做需要前后端 + 支付 + 部署的完整 SaaS,因为一个人根本忙不过来。现在 4 天能出 MVP,验证想法的成本降到原来的 1/5,失败的成本也大幅降低。
这种"低成本试错"的能力,是大公司无法复制的优势。Lovable、Bolt.new 这些 AI 工具的出现,让 1 个人的团队有机会跟 10 个人的团队掰手腕。
如果你对 PostSpark 感兴趣,可以访问 Free API Hub 的 API 市场 找到它同款的"AI 文案生成"技术栈(爬取、调用 Claude、流式输出)。我用的所有免费 API(产品爬取、域名查询、IP 定位)都在 Free API Hub 收录了,每个都附带可运行的代码示例。
下一篇我会写《MCP 协议完全指南》,把 158 个 MCP Server 按"必装/按需/垂直"分类整理,每个都附安装命令、配置示例、生产踩坑记录。如果你正在评估要不要上 MCP,那篇会更系统。