光看功能介绍不直观，这一章完整演示用 Windsurf 从空目录到可运行的全栈应用的过程。项目是一个带用户认证的 Todo CRUD，技术栈 Next.js + Prisma + SQLite。
第一步：初始化项目
打开一个空文件夹，在 Cascade Code 模式里输入：
创建一个 Next.js 15 + TypeScript 项目，用 App Router。
集成 Prisma ORM + SQLite 做数据库。
不要用任何 UI 库，用 Tailwind CSS 手写样式。
Cascade 会自动执行：
npx create-next-app@latest todo-app --typescript --tailwind --app --src-dir
cd todo-app
npm install prisma @prisma/client
npx prisma init --datasource-provider sqlite
等它跑完你会看到一个标准的 Next.js 项目结构，prisma/schema.prisma 已经创建好。
第二步：定义数据模型
继续告诉 Cascade：
在 prisma/schema.prisma 里定义两个模型：
- User：id, email (unique), password, name, createdAt
- Todo：id, title, completed (默认 false), createdAt, userId (外键关联 User)
然后跑 prisma migrate
Cascade 会编辑 schema 文件并执行迁移：
model User {
id Int @id @default(autoincrement())
email String @unique
password String
name String
createdAt DateTime @default(now())
todos Todo[]
}
model Todo {
id Int @id @default(autoincrement())
title String
completed Boolean @default(false)
createdAt DateTime @default(now())
userId Int
user User @relation(fields: [userId], references: [id])
}
npx prisma migrate dev --name init
# 自动生成 prisma/migrations/ 目录和 SQLite 数据库文件
第三步：API 路由
创建 CRUD API 路由：
- POST /api/todos - 新建待办
- GET /api/todos - 获取当前用户的所有待办
- PATCH /api/todos/[id] - 更新待办状态
- DELETE /api/todos/[id] - 删除待办
用 NextResponse，数据库操作用 Prisma Client
Cascade 会在 src/app/api/todos/ 下创建 route.ts 和 [id]/route.ts，每个端点大约 20-30 行代码。这里的关键是让 Cascade 一次性生成所有路由，而不是一个一个写——它能保持代码风格一致。
第四步：前端页面
创建 /todos 页面，功能：
- 顶部输入框 + 添加按钮
- 待办列表，每项有勾选和删除按钮
- 勾选后文字加删除线
- 用 Server Actions 或 fetch 调用 API
- 样式用 Tailwind，暗色主题
Cascade 会创建 src/app/todos/page.tsx 和相关的 Client Components。它一般会把列表项拆成独立组件（TodoItem.tsx），这是合理的拆分。
这时候用 Web Preview 功能实时查看效果：点 Cascade 面板右上角的预览按钮，边改边看，不用切浏览器。
第五步：收尾和优化
项目能跑了，让 Cascade 做收尾：
请检查并优化：
1. API 路由加入参校验（title 不能为空，不能超过 200 字符）
2. 加 loading 状态和错误提示
3. 空列表显示友好的提示文案
4. 添加成功后自动清空输入框并 focus
Cascade 会跨多个文件做这些优化，每步都有 diff 预览。
从这个项目学到什么
整个过程耗时大约 15-20 分钟（如果你手写，少说两个小时）。几个关键操作习惯：
- 大任务先给全貌。第一个 prompt 就说清技术栈和项目结构，后面的 prompt 就不用反复解释上下文。
- 一次只做一层。数据模型 → API → 前端 → 优化，每步让 Cascade 完成后检查一下再继续，别一个 prompt 塞所有需求。
- 善用 Web Preview。前端改动实时看效果，比盲写然后刷浏览器高效得多。
- Revert 不可怕。Cascade 生成的代码不满意直接 Revert 重来，比手动改它的代码更快。
