文章目录
- 代码改崩了怎么办
-
- [AI IDE](#AI IDE)
- Windsurf
- 手动管理版本
- 把网页发到互联网上
- 添加新功能的安全流程
- [用 S.C.A.F.F. 框架写功能扩展 Prompt](#用 S.C.A.F.F. 框架写功能扩展 Prompt)
- 各功能的prompt模板
- [Vibe Coding](#Vibe Coding)
-
-
- 什么信号告诉你需要学习更多
-
- [信号一：同一个 bug 反复出现](#信号一：同一个 bug 反复出现)
- 信号二：项目越改越乱
- [信号三：撞上"80% 墙"](#信号三：撞上"80% 墙")
- 信号四：想要用户登录功能
- [信号五：想做手机 App](#信号五：想做手机 App)
-
- [信号六：AI 的回答越来越离谱](#信号六：AI 的回答越来越离谱)
-
- [Vibe Coding 不擅长的五大场景](#Vibe Coding 不擅长的五大场景)
-
- 场景一：复杂业务逻辑
- 场景二：大型项目
- 场景三：安全关键功能
- 场景四：性能优化
- [场景五：调试复杂 bug](#场景五：调试复杂 bug)
常用部署平台：
- Vercel
- Netlify
- GitHub Pages
部署平台对比
Vercel
官网：vercel.com
简介：最流行的前端部署平台，Next.js 的官方部署平台。
- 免费额度：
无限静态网站
每月 100GB 流量
Serverless 函数有限制 - 优点：
部署超级简单（连接 GitHub 后自动部署）
预览功能好用（每个 PR 都有预览链接）
和 Next.js 无缝配合
全球 CDN，访问快
GitHub Pages
简介：GitHub 提供的免费静态网站托管服务。
Railway
官网：railway.app
简介：适合部署有后端服务的应用。
Cloudflare Pages
简介：Cloudflare 推出的静态网站托管服务。
基本流程：
把代码推送到 GitHub
在部署平台连接 GitHub 仓库
平台自动检测、构建、部署
获得一个可访问的网址
第一次部署？选 Vercel。操作简单，文档齐全，社区活跃。遇到问题容易找到答案。
next.js有什么功能
一、核心功能（极简版）
React 全栈框架，解决 SEO / 首屏慢痛点
支持 SSG/ISR/SSR/CSR 四种渲染，静态优先
文件路由 + API 路由，零配置前后端开发
内置资源优化，一键部署
二、性能优化（核心 3 条）
优先用 SSG/ISR，少用 SSR/CSR
图片全换<Image />组件
依赖框架自动代码分割 / 预取
一句话总结
Next.js：React 全栈 + 高性能 + 易部署；优化关键：静态优先 + 用好内置组件
- SSG（静态站点生成 Static-Site Generation）
- 渲染时机：项目构建时生成静态 HTML
- 特点：加载极快、SEO 满分，服务器无压力
- 适用：内容不变的页面（官网、博客、文档）
- ISR（增量静态再生 Incremental Static Regeneration）
- 渲染时机：构建时生成+运行时按需更新
- 特点：兼具 SSG 的性能和数据新鲜度，不用重新打包整个项目
- 适用：需定时更新的页面（商品列表、资讯首页）
- SSR（服务端渲染 Server-Side Rendering）
- 渲染时机：用户每次请求时在服务端渲染
- 特点：数据实时，服务器有压力，性能比 SSG/ISR 弱
- 适用：实时数据页面（订单详情、用户实时信息）
- CSR（客户端渲染 Client-Side Rendering）
- 渲染时机：浏览器端渲染（React 原生模式）
- 特点：交互强，首屏慢、SEO 差
- 适用：无需 SEO 的页面（后台管理系统、用户中心）
Prisma Migrate & Prisma Studio ------ 配套的数据库管理工具
Prisma 是一款专为 Node.js 和 TypeScript 打造的现代、类型安全的开源 ORM（对象关系映射）工具，也是目前 Node.js/TS 生态中最主流、最受欢迎的数据库工具之一。
ORM（Object Relational Mapper，对象关系映射） 是一种编程思想 / 技术，核心作用是：把「数据库中的表 / 关系」映射成「编程语言中的对象 / 模型」。
数据库的「表」→ 代码中的「模型类」
表的「行数据」→ 代码中的「对象实例」
表的「字段」→ 对象的「属性」
表的「关联关系」→ 对象的「关联属性」
====
Prisma Schema 文件（schema.prisma）------ 整个 Prisma 的「核心灵魂」
这是一个声明式的配置文件（项目根目录下的 schema.prisma），是你唯一需要手动编写数据库相关配置的地方，所有 Prisma 能力都基于这个文件生成。
Prisma Client ------ 自动生成的「类型安全数据库客户端」
Prisma Client 是你在业务代码中唯一需要调用的核心库，它是基于你编写的 schema.prisma 文件，自动生成的、强类型的数据库操作客户端（npm 包：@prisma/client）。
====
- 完全类型安全：基于 TS，所有数据库操作、数据模型、字段都有严格的类型校验，IDE 会提供完美的智能提示和语法补全；
- 零冗余：只生成你定义的模型相关的 API，体积极小；
- API 设计极简：提供直观的链式调用方法，比如 findMany()、create()、update()、delete()、findUnique() 等；
- 编译期报错：如果你的查询语句写错了字段名、传错了参数类型，在代码编写阶段（编译期）就会报错，而不是在运行期才发现问题。
代码改崩了怎么办
- 使用 AI IDE 自带的历史功能回退代码
- 用手动方式保存项目的重要版本
- 使用 GitHub Desktop 进行版本管理（可选）
- 把项目上传到 GitHub 云端备份（可选）
我们会介绍三种方案，从简单到进阶：
- AI IDE 自带的历史功能：最简单，立即可用
- 手动复制文件夹：最直观，人人都会
- GitHub Desktop：更专业，为进阶版打基础
AI IDE
如何找到历史：
在左侧 Explorer 面板底部，找到 Timeline 区域
点击展开，可以看到当前文件的所有历史版本
每次保存都会自动记录一个版本
如何回退：
在 Timeline 中找到想要恢复的时间点
右键点击该版本
选择"Restore Contents"恢复文件内容
另一种方式：
右键点击文件 → 选择 Local History → Find Local History
可以看到更详细的历史记录
注意事项
Timeline 仅保存在本地，换电脑就没了
历史记录有数量和时间限制
建议重要节点配合手动备份
Windsurf
Windsurf 有独特的 Cascade Checkpoints 功能
如何找到历史：
打开 Cascade 面板（通常在右侧）
找到 Checkpoints 或 Named Checkpoints 选项
可以查看之前保存的检查点
如何回退：
选择想要恢复的检查点
点击 Revert 按钮
代码会回到该检查点的状态
特色功能：
可以给检查点命名，方便识别
支持在不同检查点之间快速切换
Trae
Trae（包括国际版和国内版）提供 Diff View 功能来查看代码变更。
如何找到历史：
使用 Diff View 工具查看代码变更历史
可以看到每次 AI 修改的内容对比
如何回退：
在 Diff View 中查看具体改动
手动撤销不需要的改动
或使用 IDE 的 Undo 功能
手动管理版本
最简单的版本管理方法：定期复制文件夹。
基本操作
找到你的项目文件夹（比如 todo-list）
复制整个文件夹
给副本起个有意义的名字
继续在原文件夹里开发
就这么简单。
格式建议
项目名-v版本号-功能描述/待办清单项目示例
todo-list/ ← 当前开发的版本
todo-list-v1-基础功能完成/ ← 第一个能用的版本
todo-list-v2-添加删除功能/ ← 添加了删除功能
todo-list-v3-数据保存/ ← 添加了 localStorage
todo-list-v4-深色模式尝试/ ← 准备大改之前的备份如果你更喜欢用日期
todo-list/
todo-list-20250107-基础完成/
todo-list-20250108-删除功能/
todo-list-20250108-数据保存/
使用 GitHub Desktop 的日常流程很简单：
改代码 → 保存文件 → Commit（存档）→ Push（上传云端）
↓
可以随时查看历史
可以随时回退到任何存档点推荐的 Commit 时机
- 添加了一个新功能
- 修复了一个问题
- 调整了样式/布局
- 重构了代码结构
- 准备下班/休息
应该提交的文件
- 你写的代码（HTML、CSS、JavaScript 等）
- 项目配置文件
- 文档和说明
- 日常依赖 AI IDE 自带历史
- 完成重要功能时手动备份一个文件夹
- 项目完成后考虑上传到 GitHub
想要专业一点：
- 从一开始就用 GitHub Desktop
- 每完成一个功能就 Commit
- 每天结束时 Push 到云端
把网页发到互联网上
Vercel 和 Netlify 的默认域名（*.vercel.app / *.netlify.app）在中国大陆被 DNS 污染，直接访问会失败或非常慢。
添加新功能的安全流程
在动手之前，有一个重要原则：
黄金法则
每次添加新功能前，先保存当前版本。
按照这个流程操作：
- 确认当前版本能正常运行
↓ - 用 GitHub Desktop 提交一次（Commit）
↓ - 写 Prompt 让 AI 添加新功能
↓ - 测试新功能
↓ - 如果成功 → 再 Commit 一次
如果失败 → 回滚到上一版
这样，即使新功能改崩了，你也能随时恢复。（这就是 5.1 节学的版本管理的用处）
用 S.C.A.F.F. 框架写功能扩展 Prompt
【情境】
我有一个待办清单项目，目前实现了：
- 添加任务
- 删除任务
- 标记任务完成
- 使用 localStorage 保存数据
技术栈：HTML + CSS + JavaScript（纯前端，没有后端）
【挑战】
我想给任务添加"分类标签"功能。用户可以：
1. 创建任务时选择一个分类（工作/生活/学习）
2. 按分类筛选任务
3. 每个分类用不同的颜色显示
【请求】
请帮我修改代码实现这个功能。
【格式】
1. 先说明需要修改哪些部分
2. 给出修改后的完整代码
3. 说明如何测试这个功能
【限制】
- 保持现有功能不变
- 使用现有的代码风格
- 分类数据也要保存到 localStorage各功能的prompt模板
各功能的 Prompt 模板
这里提供几个常用功能的 Prompt 模板，你可以直接复制使用，只需要把 [方括号里的内容] 替换成你的实际情况。
优先级标记
我的待办清单项目需要添加"优先级"功能：
- 每个任务可以设置优先级：高/中/低
- 高优先级用红色标记，中优先级用黄色，低优先级用灰色
- 默认优先级是"中"
- 可以按优先级排序显示（高的在上面）
当前项目技术栈：[HTML + CSS + JavaScript / 其他]
数据存储方式：[localStorage / 其他]
请修改代码实现这个功能，保持现有功能正常。搜索功能
我的待办清单需要添加搜索功能：
- 在任务列表上方添加一个搜索框
- 输入关键词时，实时筛选包含该关键词的任务
- 搜索框为空时显示所有任务
- 搜索不区分大小写
当前项目技术栈：[你的技术栈]
请给出实现代码。深色模式
我的待办清单需要添加深色模式切换功能：
- 在页面右上角添加一个切换按钮（太阳/月亮图标）
- 点击可以在浅色/深色模式之间切换
- 记住用户的选择（下次打开还是同样的模式）
当前的颜色方案：
- 背景色：[白色]
- 文字颜色：[黑色]
- 主题色：[蓝色]
请给出实现代码，包括深色模式的配色建议。截止日期
我的待办清单需要添加截止日期功能：
- 创建任务时可以选择截止日期（可选，不是必填）
- 任务卡片上显示截止日期
- 已过期的任务用红色高亮显示
- 今天到期的任务用黄色高亮显示
当前项目技术栈：[你的技术栈]
数据存储方式：[localStorage / 其他]
请给出实现代码。实战案例：添加分类标签
第一轮：说明需求
你发送的 Prompt（使用上面的 S.C.A.F.F. 模板）后，AI 会返回修改方案和代码。
第二轮：测试发现问题
测试后，你可能发现问题：
分类功能基本可以用了，但有个问题：
切换分类筛选时，如果当前分类下没有任务，页面是空白的，用户会困惑。
请添加一个提示，当筛选结果为空时显示"暂无任务"。第三轮：微调细节
现在"暂无任务"的提示可以显示了，但文字颜色太浅，不太明显。
请把提示文字改成灰色，并加粗显示。这就是迭代的过程：做一版 → 发现问题 → 再改进。
检查代码重复
请检查我的代码，有没有重复的逻辑？
如果有，请帮我提取成一个可复用的函数。
[粘贴你的代码]为什么重要：重复的代码意味着，如果要改某个逻辑，你需要改多处。容易漏改，产生 bug。
改进变量命名
请检查我的代码中的变量和函数命名，有没有不够清晰的？
请给出改进建议，让代码更容易读懂。
[粘贴你的代码]添加中文注释
请给这段代码添加中文注释，解释：
1. 每个函数是做什么的
2. 关键的代码块在处理什么逻辑
3. 不容易理解的地方
[粘贴你的代码]为什么重要：一个月后你再看自己的代码，没有注释的话可能完全看不懂。注释是写给未来的自己的。
检查潜在 bug
请检查我的代码，有没有潜在的问题或 bug？
特别关注：
1. 可能导致报错的边界情况
2. 数据为空时的处理
3. 用户输入的验证
[粘贴你的代码]常见问题举例：
- 用户没输入就点了添加按钮
- 任务列表为空时的显示
- 数据格式不对时的处理
性能优化建议
- 请检查我的代码，有没有可以优化性能的地方？
- 我的项目是一个待办清单，数据量不大（最多几十条任务）。
- 请只给出对我这个规模有意义的优化建议。
[粘贴你的代码]对于小项目的说明：对于待办清单这样的小项目，性能通常不是问题。不要过度优化。如果 AI 给了很复杂的优化建议，可以先不做。
一个完整的代码审查 Prompt
如果你想让 AI 做一次全面的代码审查，可以用这个模板：
请帮我审查这段代码，从以下几个角度给出改进建议：
1. 代码结构：有没有重复的逻辑？可以怎么简化？
2. 可读性：变量命名是否清晰？需要添加注释吗？
3. 健壮性：有没有可能报错的边界情况？
4. 安全性：有没有明显的安全问题？
请按优先级排序你的建议（先说最重要的），并给出具体的修改方案。
代码如下：
[粘贴你的代码]代码审查的基本意识
如果看不太懂代码也没关系。至少做到：
- 运行测试一下，看功能是否正常
- 看看关键部分，比如处理用户输入的地方
- 有疑问就问 AI："这段代码是在做什么？有没有问题？"
Vibe Coding
一个共同特征：问题边界清晰
如果你仔细看上面六个场景，会发现它们有一个共同特征：
问题的边界是清晰的。
- 个人工具：你自己用，需求你说了算
- 原型验证：只需要"能演示"，不需要"能上线"
- 效率脚本：输入输出明确
- 数据分析：数据是固定的，分析目标是明确的
- 静态网站：内容是确定的，交互很简单
- 学习概念：目标是"理解"，不是"生产"
当问题边界清晰时，AI 能很好地理解你的意图，生成的代码大概率能直接用。
什么信号告诉你需要学习更多
信号一：同一个 bug 反复出现
表现：
你让 AI 修了一个 bug，过几天又出现了
AI 每次给的修复方案都不一样，但问题还是会复发
"修了这里，坏了那里"的情况频繁发生
背后原因：AI 只能看到表面症状，不理解问题的根本原因。它给的是"止痛药"，不是"根治方案"。
需要学习的方向：调试基础、程序运行原理
信号二：项目越改越乱
表现：
代码文件越来越多，你不知道每个文件是干什么的
同样的功能在好几个地方都有，不知道改哪个
每次添加新功能都提心吊胆，怕影响已有功能
背后原因：缺乏代码组织的知识。AI 生成的代码是"能用"，但不一定"好维护"。
需要学习的方向：代码结构、模块化、设计模式基础
信号三：撞上"80% 墙"
表现：
项目初期进展很快，现在每加一个功能都要花很长时间
AI 的回答开始变得不靠谱，经常"忘记"之前的约定
你开始怀疑是不是要推翻重来
背后原因：项目复杂度超出了 AI 的"上下文窗口"能力。
需要学习的方向：项目规划、架构设计、或者学会拆分项目
信号四：想要用户登录功能
表现：
你想让用户注册账号、登录
你想让用户的数据保存在云端，换设备也能用
你想区分不同用户，让他们只能看到自己的数据
背后原因：这需要"后端"和"数据库"------基础版没有涵盖的内容。
需要学习的方向：后端开发、数据库、用户认证（进阶版内容）
信号五：想做手机 App
表现：
你想让作品在手机上像"真正的 App"一样运行
你想发布到应用商店
你想使用手机特有的功能（摄像头、推送通知等）
背后原因：网页和 App 是不同的技术栈，需要额外的知识。
需要学习的方向：移动开发基础、或者 PWA（渐进式网页应用）
信号六：AI 的回答越来越离谱
表现：
AI 给的代码完全跑不起来
AI 开始"胡说八道"，给出不存在的函数或库
你问同一个问题，每次得到完全不同的答案
背后原因：你的需求已经超出了 AI 的能力边界，或者你的问题描述让 AI 无法理解。
需要学习的方向：
如果是简单问题：提高提示词质量（回顾第三章）
如果是复杂问题：学习更多编程知识，减少对 AI 的依赖
Vibe Coding 不擅长的五大场景
场景一：复杂业务逻辑
场景二：大型项目
场景三：安全关键功能
场景四：性能优化
场景五：调试复杂 bug
基础版毕业
│
├─→ 如果只想做个人工具 → 继续用基础版，享受创造的乐趣
│
└─→ 如果想突破边界 → 进入进阶版
│
├─→ Bootcamp：补齐计算机基础
│
├─→ 前端深入：组件化、状态管理
│
├─→ 后端入门：API、数据库
│
├─→ 全栈整合：做一个完整应用
│
└─→ 部署运维：让应用稳定运行