全栈开发：完整功能开发全流程

场景背景

你是一名全栈开发者，负责一个用 Next.js + TypeScript + Prisma 构建的技术博客平台。产品经理提了一个需求：给每篇文章加一个"用户评论"功能——用户可以发表评论、回复评论、点赞评论、举报评论。

这是一个典型的全栈功能需求：需要数据库表、后端 API、前端组件、状态管理、表单验证，还有测试。你打算用 Claude Code 完成整个开发流程，从需求分析到测试通过。

你将学到： 如何用 Plan Mode 分解复杂需求、用 CLAUDE.md 约束代码风格、用 Claude Code 协调前后端多文件开发、如何做测试驱动开发（TDD）。

前置准备

• 已安装 Claude Code，熟悉基本操作
• 有一个 Next.js 项目（本案例以 App Router + Prisma 为例）
• 了解 React、TypeScript 和 REST API
• 已完成 里程碑 1A 和 里程碑 1B

第一步：准备项目上下文

进入项目目录，启动 Claude Code：

cd ~/projects/tech-blog
claude

先让 Claude 了解项目现状：

> 分析这个项目的结构和技术栈，告诉我：
  1. 用了哪些主要依赖
  2. 目录结构是怎样的
  3. 数据库用的是什么，有哪些现有的表
  4. 现有的 API 路由有哪些
  5. 前端组件的组织方式

你会看到什么： Claude 扫描项目文件，输出一份结构化的项目分析报告，包含技术栈、目录结构、数据库 schema 和现有路由。

为什么这样做： 在开始写新功能之前，Claude 需要理解项目的"生态系统"——用了什么 ORM、组件怎么组织、API 怎么设计。这些信息会影响它后续生成的代码风格。

然后确保 CLAUDE.md 包含足够的项目规范：

> 检查 CLAUDE.md 是否存在。如果不存在，用 /init 创建一个。
  然后确保里面包含以下规范：
  - 数据库操作统一用 Prisma
  - API 路由放在 app/api/ 下，使用 Route Handler
  - 组件分为 UI 组件（components/ui/）和业务组件（components/features/）
  - 表单验证用 Zod
  - 测试用 Vitest + React Testing Library
  - 代码风格：函数组件 + Hooks，Server Component 优先