从零构建完整产品

以一个 AI 工作周报工具为例，展示完整的产品构建流程——从想法到上线，全部在终端里完成。

Phase 0：需求采访与 SPEC.md

先别急着写代码。用"采访"技巧让 Claude 帮你厘清需求：

我想做一个 AI 工作周报工具。功能是：连接 GitHub 获取我的 commit 记录，
用 AI 生成工作总结，输出一份可分享的周报页面。

在动手之前，先采访我，问清楚所有你需要知道的事情。

Claude 会问你一系列问题（技术栈偏好、是否需要登录、支持哪些 Git 平台等）。回答完后，让 Claude 把结果整理成 SPEC.md。

Phase 1：项目初始化

开一个新 Session，把 SPEC.md 喂给 Claude。用 Plan 模式讨论技术选型：

请阅读 SPEC.md，然后和我讨论技术方案。
用 Next.js + Tailwind，需要 GitHub OAuth 登录。
先给方案，不要写代码。

确认方案后，让 Claude 创建项目脚手架、目录结构，并配置 CLAUDE.md：

# 项目架构
Next.js 14 App Router + Tailwind CSS
GitHub OAuth 登录

## 开发命令
- npm run dev
- npm run build

## 代码风格
- 组件用函数式
- 样式用 Tailwind

Phase 2：核心功能开发

切换到 Auto 模式，逐步实现核心功能。关键原则：每完成一个模块立刻验证。

1. GitHub OAuth 登录

实现 GitHub OAuth 登录。登录成功后在页面上显示用户名和头像。

验证方式：跑 npm run dev，打开浏览器点登录，看能不能跳转到 GitHub 授权页。

2. 获取 Commit 数据

添加获取 commit 的 API 路由。获取登录用户最近 7 天的 commit，返回 JSON。

验证方式：curl localhost:3000/api/github，检查返回数据。

3. AI 总结生成

添加 AI 总结 API。传入 commit 列表，用 Claude API 生成一份结构化的周报摘要。

验证方式：拿真实 commit 数据调用接口，检查生成内容是否合理。

[!WARNING] 每做完一步就验证 不要让 Claude 一口气写完所有代码再测。问题越早发现越容易修。

Phase 3：UI 打磨

功能跑通了，但界面大概率很丑。正常——先让功能跑起来，再管好不好看。

Claude Code 支持图片输入。最直接的方式：截一张当前页面的图，粘贴给 Claude：

这是当前周报页面的截图。
[粘贴截图]
问题：1) 标题太紧凑 2) commit 列表间距不够 3) 右上角加个分享按钮

这种"截图 → 反馈 → 修改"的循环非常高效。

[!TIP] 批量反馈 UI 打磨阶段最高效的做法是：先把所有问题一次性列出来，让 Claude 批量修改，而不是改一个看一个。

Phase 4：扩展能力

核心产品能用了，加上扩展能力。

创建 Skill：

在 .claude/skills/generate-report/SKILL.md 中写：

# /weekly-report

Generate this week's report.

## Steps
1. Run the dev server if not running
2. Call /api/github to fetch commits since last Monday
3. Call /api/summarize to generate the report
4. Open the report page in browser

以后输入 /weekly-report 就能一键生成周报。

设置 Hook 自动 Lint：

设置一个 Hook，每次你编辑文件后自动运行 ESLint 格式化。

Phase 5：部署上线

把这个项目部署到 Vercel。配置 GitHub OAuth 和 Claude API 的环境变量。
创建一个 GitHub Actions 工作流，每次 PR 自动跑 lint 和类型检查。

部署完成后，在浏览器里走一遍完整流程：登录 → 获取 commit → 生成周报 → 分享。

全流程回顾

如果顺利，整个过程大约需要 5-8 个小时。不顺利的话一天也正常。

五条核心经验

1. 需求拆小，每次只给一步——验证通过再下一步
2. 先跑通最简版本——自己用两天，发现真正需要什么再加
3. 验证比开发更重要——Claude 一小时能写 2000 行代码，如果你不验证，问题会在后面以更大成本爆发
4. 不要在一个 Session 做太多事——分 Session 专注一类事情（初始化/后端/前端/测试/部署）
5. 产品感知才是最大杠杆——AI 提升 10 倍执行速度，但方向错了只是以 10 倍速度走向错误

[!NOTE] 最后 决定一个产品好不好的，从来不是代码有多精妙，而是需求定义得有多准确、用户体验有多流畅。Claude Code 覆盖的是"做出 MVP"和"根据反馈迭代"这两步，其他步骤是你的判断力在工作。