先问大家两个问题——

你是不是这种人？

不管是哪一种 —— 今晚咱们一起，把这条路走一遍。
互相学习、互相补充。不写代码也跟得上。

今晚 60 分钟，咱们一起走这条路

从一个想法 → 到一个能让朋友访问的真东西

你打开美团点外卖之后——

从你点击到外卖到家，背后是 10+ 个系统 在协作

背后是 7 大角色在协作

就算只做一个登录功能，背后也是这么多角色的协作。

AI 进来后，每个角色都变了样

以前 7 个人干的活 · 现在 1 个人 + AI 都能扛。

两种 Vibe Coding 的姿势

工程化的第一步 —— 知道有哪些 武器 可用。

2026 年的工具地图（5 大类）

每一类都有自己的位置 · 不是"哪个最好"，是"哪个适合你"

接下来一起重点拆 前三类。

大模型三巨头 · 谁是谁

不讲参数 · 讲 脾气 和适合场景

实际工作 · 混着用是常态 · 不同任务给不同模型。

AI 编程 Agent · 4 个主流选择

今晚 Demo 主用 Claude Code · 因为它能并行干长任务、能自跑测试。

低码平台 · 另一条赛道

你的场景 · 怎么选

先聊一个反常识 ——

模型本身
没有手脚。

LLM 只是个"接话能手"——
所有"AI 能干活"，都是 外面包了一层东西。

接下来的四件套 · 就是那"一层东西"。

① Prompt · 怎么跟 AI 说话

帮我做个登录页

写一个 React + Tailwind 登录页
邮箱 + 密码登录
错误时红字提示
移动端适配
组件用 shadcn/ui

🪝 等下 Demo · 咱们会看到 PRD prompt 的实操

② Context Window · AI 的「工作记忆」

# 项目目标
做一个深夜小工具

# 技术栈
- Next.js 14 (App Router)
- Tailwind + shadcn/ui
- 部署 Vercel

# 代码风格
- TypeScript strict
- 组件优先 shadcn

# 禁区
- 不引入额外状态管理
- >200 行文件先停下确认

🪝 等下 Demo · 咱们会现场写 CLAUDE.md

③ Harness · 给 AI 装上手脚

钢铁侠 = 模型 · 战甲 = Harness

🪝 等下 Demo · 咱们会看到 Claude Code 怎么并行干活

④ MCP · AI 的「USB 接口」

Model Context Protocol · Anthropic 发起 · 2026 事实标准

装一个 GitHub MCP，所有支持 MCP 的 AI 都能用。

🪝 等下 Demo · 咱们会看到一次 MCP 调用

有架构地 Vibe · 七步法

每一步都有 产出物 · AI 在每一步都能帮你

—— 好，咱们一起跑一遍。

Prompt 进阶 · 5 个被反复验证的套路

超越"帮我做 XX"· 学完立刻能用

CLAUDE.md 装修指南 · 4 个反直觉点

来自 HumanLayer / Builder.io 等实战派 · 大家的 CLAUDE.md 写错的概率 80%

Session 管理 · 6 招避免 AI 忘事

长项目最常见的灾难 —— Context Rot · 上下文腐烂

💡 经验法则：上下文用到 50% 就该考虑 compact 或 clear

Harness 构建 · "Agent 不是难的，Harness 才是"

2026 行业新热词 · 你控不了模型 · 能控 Harness

💡 投资 Harness 比追新模型回报大 —— Martin Fowler / OpenAI 团队都这么说

Claude Code 6 大组件 · 何时用什么

Plugin = 上面 5 个的打包 · 一个公开 git repo · 别人能 git clone 直接用

Git + GitHub 实用速通 · 让项目能活下去

类比："游戏存档 + 时间线 + 多人协作" · 没它项目崩了救不回来

git add .                    # 把改动放进暂存
git commit -m "做了 XX"      # 提交一次"存档"
git push                     # 推到 GitHub

git status                   # 现在啥情况
git log --oneline            # 看历史
git pull                     # 拉远程更新
git checkout -b feat-xxx     # 开新分支
git reset --hard HEAD~1      # 回退一次提交（慎用）

部署 · 90% 用快捷部署 · 10% 才需要传统服务器

💡 选型口诀：能用 Vercel 就别折腾 · 个人项目几乎不需要传统服务器

写后端 · 3 种姿势 · 现代项目几乎不用自己写

STEP 1 · 弹幕共创

咱们今晚做什么？你们来定。

—— 副屏开 Claude Code · 准备接弹幕 ——

STEP 2 · 把 idea 变成 PRD

让 AI 把口语 → 结构化需求

你是一位资深 PM。请把下面用户需求转成精简 PRD。

# 用户需求
[弹幕选出的 idea 原文]

# PRD 必须包含
1. **一句话产品定位**（who + what + why）
2. **核心用户故事**（≤3 个 · As a... I want... so that...）
3. **MVP 功能列表**（≤5 个 · 标 P0/P1）
4. **验收标准**（每个功能可测）
5. **明确不做的事** ← anti-drift 核心
6. **关键风险 + 应对**

# 约束
- 技术栈：Next.js 14 + Tailwind + shadcn/ui
- 部署：Vercel
- 20 分钟内能跑出可访问 demo
- 单文件 ≤200 行
- 输出 markdown 格式
- 不要写代码 · 只写 PRD

🪝 对回：Prompt 三口诀 · Anti-drift

AI 输出的 PRD 长啥样 真实例子

假设弹幕选了「深夜下班搭子召集器」

# 深夜下班搭子召集器 · PRD

## 1. 一句话产品定位
为加班到深夜的打工人 · 提供一个一键召集附近同事 · 一起吃宵夜的轻量小工具。

## 2. 核心用户故事
- 作为加班党，我想发起一个"今晚搭子局"，让附近同事看到。
- 作为同事，我想看到附近谁在召集，可以一键加入。
- 作为发起人，我想看到加入的人 + 想吃什么。

## 3. MVP 功能列表
- **P0** 发起召集（地点 + 想吃啥 + 时间）
- **P0** 召集列表（按距离/时间排序）
- **P0** 一键加入
- **P1** 简单聊天（10 条以内）
- **P1** 满员自动锁定

## 4. 验收标准
- 发起一个召集 → 列表里能看到 ✓
- 另一个浏览器打开 → 能加入 ✓
- 加入后发起人能看到我 ✓
- Vercel 部署 + 直播间能访问 ✓

## 5. 明确不做的事 ← anti-drift
- ❌ 不做账号系统（匿名 / 临时昵称即可）
- ❌ 不做支付（不是 AA 工具）
- ❌ 不做地图（输入地点字符串就行）
- ❌ 不做推送通知（轮询即可）

## 6. 关键风险
- 实时同步 → 用 Supabase Realtime 兜底
- 时间不够 → 砍 P1 功能

💡 看到了吗：5 个功能 · 4 个不做 · 1 个风险 —— 这就是 anti-drift 的 PRD

STEP 3 · 写 CLAUDE.md

给 AI 工程师级别的上下文

# 项目目标
深夜下班搭子召集器 · 让加班党一键召集吃宵夜。

# 技术栈
- 前端 · Next.js 14 (App Router)
- 样式 · Tailwind + shadcn/ui
- 后端 · Next.js API Routes
- 数据 · Supabase（含 Realtime）
- 部署 · Vercel
- 类型 · TypeScript strict

# 项目结构
app/
  ├ page.tsx       # 召集列表
  ├ new/page.tsx   # 发起召集
  ├ [id]/page.tsx  # 单个召集详情
  └ api/
      ├ posts/route.ts   # CRUD
      └ join/route.ts    # 加入

# 代码风格
- 函数命名 · 动词开头（fetchPosts, joinPost）
- 组件优先用 shadcn · 能不自建就不自建
- 错误处理 · try/catch + toast 提示

# 禁区（千万别做）
- ❌ 不引入 Redux/Zustand 等额外状态管理
- ❌ 不写"防御性代码"，遇异常抛出来
- ❌ 单文件 > 200 行先停下问我
- ❌ 不引入除约定外的第三方 UI 库

# 当前阶段
[每次会话开始时填这里，例如：]
正在做 P0 功能，需要先实现召集列表 + 发起召集。

🪝 对回：Context（CLAUDE.md 是项目级 prompt）

STEP 4 · Plan Mode 启动

让 AI 先想清楚，再动手

基于 PRD 和 CLAUDE.md，请规划：

1. **要新建/修改哪些文件**
2. **每个文件的职责**
3. **关键函数签名**（参数 + 返回值）
4. **数据流**（前端 → API → DB）
5. **边界情况和错误处理**
6. **会用到的第三方包**

⚠️ 不要写代码 · 只输出规划。
我看完会反馈意见。

🪝 对回：Harness（Plan Mode 是 Claude Code Harness 的杀手锏）

今晚一起琢磨出 三件事

🎤 把话筒交给破晓老师 谢谢一起开搓 🍜 · 期待看到大家的小垃圾