;
+
+ constructor(users: User[]) {
+ // 用 Map 存储，查找是 O(1)
+ this.userMap = new Map(users.map(u => [u.id, u]));
+ }
+
+ findUser(id: string): User | undefined {
+ return this.userMap.get(id);
+ }
+}
+```
+
+
+
+#### 5、安全问题
+
+对于商业项目来说，这点至关重要。代码要安全，不能有漏洞。
+
+需要检查有没有 SQL 注入风险、有没有 XSS 攻击风险、敏感信息有没有加密、API Key 有没有暴露。AI 对安全的理解可能不够深入，很容易留下安全隐患。
+
+举个 SQL 注入的例子。SQL 注入是指攻击者通过在输入中插入恶意的 SQL 代码，来执行非预期的数据库操作。
+
+比如下面这段代码是不安全的：
+
+```typescript
+// ❌ 不安全：直接拼接用户输入
+const query = `SELECT * FROM users WHERE name = '${userName}'`;
+```
+
+假设用户在登录时输入用户名 `admin' OR '1'='1`，直接把这个输入拼接到 SQL 语句里，就会变成：
+
+```sql
+SELECT * FROM users WHERE name = 'admin' OR '1'='1'
+```
+
+这个查询会返回所有用户，因为 `'1'='1'` 永远为真。攻击者就能绕过验证登录任何账户。
+
+正确的做法是使用参数化查询：
+
+```typescript
+// ✅ 安全：使用参数化查询
+const query = 'SELECT * FROM users WHERE name = ?';
+db.execute(query, [userName]);
+```
+
+参数化查询会自动转义特殊字符，防止 SQL 注入。
+
+如果你对 Web 安全感兴趣，可以利用鱼皮 [免费的网络安全自学网](https://github.com/liyupi/ceshiya) 来学习这些知识：
+
+
+
+
+
+### 审查流程
+
+可以按照下面的步骤，建立一个系统的审查流程：
+
+1. 自己先看一遍：快速浏览代码，看有没有明显问题
+
+2. 运行测试：测试所有功能，包括边界情况
+
+3. 逐行审查：仔细检查每一行代码，思考是否有问题
+
+4. 记录问题：把发现的问题记下来
+
+5. 要求 AI 改进：把问题反馈给 AI，让它修复
+
+6. 再次审查：确认修复后的代码没有新问题
+
+这个流程可能有点繁琐，但能大大提高代码质量。
+
+对于没有编程基础的朋友，如果自己看不懂代码，可以利用其他的 AI 大模型来帮忙审查。这是一个很实用的技巧：**用多个 AI 交叉验证**。
+
+比如用 Cursor（Claude）生成的代码，可以复制到 ChatGPT 或 Gemini，让它们帮你审查一遍：
+
+```markdown
+请审查这段代码，找出潜在的问题，包括 bug、性能问题、安全隐患。
+```
+
+不同的 AI 有不同的视角和训练数据，能互相补充，一个 AI 可能忽略的问题，另一个 AI 能发现。
+
+我自己在做重要项目时，经常会让 2 ~ 3 个不同的 AI 审查同一段代码，然后综合它们的建议。这样虽然多花了点时间，但能大大降低出错的风险。特别是对于关键的业务逻辑、安全相关的代码、性能敏感的部分，多一层保障总是好的。
+
+
+
+## 三、测试
+
+测试是保障代码质量的关键手段。
+
+
+
+### 为什么要写测试？
+
+很多同学觉得写测试浪费时间，但其实恰恰相反。测试能在开发阶段就发现问题，而不是等到上线后用户发现。有了测试，你可以放心地重构代码，不怕改坏。而且，测试代码本身就是很好的文档，展示了如何使用你的函数或组件。
+
+此外，虽然写测试要花时间，但能省下更多调试时间。想想看，如果你每次改代码都要手动测试所有功能，那得花多少时间？有了自动化测试，运行一下就知道有没有问题。
+
+所以，写测试是值得的。
+
+
+
+
+
+### 测试的类型
+
+测试主要有 3 种类型。
+
+- 单元测试：测试单个函数或组件，速度快，容易定位问题，覆盖率要高。
+- 集成测试：测试多个模块的协作，确保模块之间的接口正确，覆盖主要流程。
+- 端到端测试：模拟用户的完整操作，测试整个系统，覆盖关键场景。
+
+对于 Vibe Coding 项目，我建议 **重点写单元测试和集成测试**。端到端测试虽然也重要，但成本较高，可以只覆盖最关键的场景。
+
+
+
+### 让 AI 帮你写测试
+
+如今绝大多数的测试代码已经不需要人工编写了，你可以直接让 AI 帮你生成测试代码。
+
+````markdown
+请为这个函数写单元测试，覆盖正常情况和边界情况：
+```typescript
+function calculateTotal(items: CartItem[]): number {
+ return items.reduce((sum, item) => sum + item.price * item.quantity, 0);
+}
+```
+````
+
+AI 会生成类似这样的测试代码：
+
+```typescript
+import { describe, it, expect } from 'vitest';
+
+describe('calculateTotal', () => {
+ it('应该正确计算总价', () => {
+ const items = [
+ { price: 10, quantity: 2 },
+ { price: 5, quantity: 3 }
+ ];
+ expect(calculateTotal(items)).toBe(35);
+ });
+
+ it('应该处理空数组', () => {
+ expect(calculateTotal([])).toBe(0);
+ });
+
+ it('应该处理数量为 0 的情况', () => {
+ const items = [{ price: 10, quantity: 0 }];
+ expect(calculateTotal(items)).toBe(0);
+ });
+
+ it('应该处理小数', () => {
+ const items = [{ price: 10.5, quantity: 2 }];
+ expect(calculateTotal(items)).toBe(21);
+ });
+});
+```
+
+这段测试代码的作用是：用 `describe` 定义一个测试组（测试 calculateTotal 函数），然后用多个 `it` 定义具体的测试用例。每个测试用例都会调用函数并检查结果是否符合预期。比如第一个测试检查正常情况、第二个测试检查空数组、第三个测试检查数量为 0 的情况、第四个测试检查小数。运行这些测试时，如果所有 `expect` 都通过，说明函数工作正常；如果有任何一个失败，就说明代码有问题。
+
+有了这些测试，你就能确保函数在各种情况下都能正常工作。
+
+
+
+### 扩展知识 - 测试驱动开发（TDD）
+
+你可以尝试测试驱动开发（Test-Driven Development，简称 TDD）。这是一种 “先写测试，再写代码” 的开发方式。
+
+听起来很反直觉对吧？一般不都是先写代码，再写测试吗？
+
+但 TDD 的逻辑是：你先定义好函数应该如何工作（写测试），然后让 AI 根据测试来实现功能。这样能确保代码从一开始就是符合需求的、可测试的。
+
+具体流程是：
+
+1. 先写一个会失败的测试（因为功能还没实现）
+2. 然后让 AI 实现功能让测试通过，运行测试确保所有测试都通过
+3. 最后优化代码但保持测试通过
+
+这样一来，能避免写出 “看起来能用但实际有问题” 的代码。
+
+
+
+
+## 四、调试技巧进阶
+
+即使有了审查和测试，还是难免会遇到 Bug。这时候，你需要掌握调试技巧。
+
+
+
+### 1、使用断点调试
+
+很多同学调试代码时只会用 `console.log`，也就是在代码里加一行 `console.log(变量名)` 来打印变量的值，然后在浏览器控制台查看。
+
+这个方法虽然简单，但效率不高，而且调试完还要把这些 log 删掉。
+
+其实断点调试要高效得多。在 VS Code 或 Cursor 中，你只需要在代码行号左边点击设置断点，然后按 F5 开始调试。
+
+
+
+代码会在断点处暂停，这时你可以查看所有变量的值：
+
+
+
+还可以单步执行代码，看看每一步发生了什么。这比到处加 `console.log` 然后再删掉要方便多了。
+
+
+
+### 2、浏览器调试工具
+
+前端开发时，浏览器的调试工具是你的好帮手。在浏览器中按 F12 就能打开开发者工具。
+
+里面有几个常用的面板：
+
+- Console（控制台）面板可以查看日志和错误，执行 JavaScript 代码，查看变量值。
+- Sources（源代码）面板可以设置断点，单步执行，查看调用栈。
+- Network（网络）面板可以查看 API 请求，检查请求和响应，分析加载时间。
+- Performance（性能）面板可以分析性能瓶颈，查看渲染时间，找出慢的操作。
+
+
+
+掌握这些工具，你的调试效率会大大提高。
+
+
+
+### 3、二分法定位问题
+
+如果你不确定问题在哪里，可以试试二分法。
+
+很好理解，直接把代码分成两半，注释掉其中一半，看问题是否还在。如果还在，说明问题在另一半；如果不在，说明问题在这一半。然后继续把有问题的那一半再分成两半，重复这个过程，直到找到问题。
+
+这个方法虽然简单，但很有效，特别是在处理大段代码时。
+
+
+
+### 4、橡皮鸭调试法
+
+这是一个看似玄学呆板，实则有一定科学原理的方法。
+
+当你被 bug 困住时，试着向别人（或者一只橡皮鸭）解释你的代码：阿巴阿巴，这个函数应该做什么…… 它先做了这个…… 然后做了那个…… 咦，这里好像不对……
+
+很神奇的是，在解释的过程中，你往往就会发现问题。因为解释的过程会强迫你重新理清思路，从不同的角度看问题。
+
+哪个程序员没有一只小黄鸭呢？
+
+
+
+
+
+### 5、让 AI 帮你调试
+
+把错误信息和相关代码给 AI，让它帮你分析：
+
+````markdown
+这段代码报错了：
+```
+TypeError: Cannot read property 'map' of undefined
+```
+
+代码是：
+```typescript
+function UserList({ users }) {
+ return (
+
+ {users.map(user => )}
+
+ );
+}
+```
+
+请帮我分析问题并给出解决方案。
+````
+
+AI 会告诉你问题可能是 `users` 为 `undefined`，并给出解决方案。
+
+这无疑是最多同学使用的方法，但这招不是 100% 有效的，可以优先尝试，解决不了再人工处理。
+
+
+
+## 五、质量检查清单
+
+可以建立一个质量检查清单，每次提交代码前都让 AI + 人工过一遍。
+
+不过现在 AI 大模型的编程能力越来越强了，很多 AI 工具已经内置了代码检查能力，会自动提示一些常见问题。所以这个清单简单了解即可，不用死记硬背。
+
+
+
+
+### 功能检查
+
+- [ ] 所有功能都能正常工作
+- [ ] 边界情况都处理了
+- [ ] 错误情况有友好提示
+- [ ] 用户体验流畅
+
+
+### 代码检查
+
+- [ ] 代码符合项目规范
+- [ ] 变量和函数命名清晰
+- [ ] 没有重复代码
+- [ ] 复杂逻辑有注释
+- [ ] 没有被注释掉的代码
+
+
+### 性能检查
+
+- [ ] 没有不必要的重复计算
+- [ ] 列表渲染使用了 key
+- [ ] 大数据量使用了分页或虚拟滚动
+- [ ] 图片进行了优化
+
+
+### 安全检查
+
+- [ ] 用户输入都经过验证
+- [ ] 敏感信息没有暴露
+- [ ] API Key 使用环境变量
+- [ ] 没有 SQL 注入风险
+
+
+### 测试检查
+
+- [ ] 核心功能有单元测试
+- [ ] 测试覆盖率达标
+- [ ] 所有测试都通过
+- [ ] 手动测试了主要流程
+
+
+### 文档检查
+
+- [ ] README 是最新的
+- [ ] 重要函数有注释
+- [ ] API 接口有文档
+- [ ] 环境变量有说明
+
+
+
+## 六、使用 Linter 和 Formatter
+
+自动化工具能帮你发现很多问题。
+
+💡 这部分内容比较专业，主要适合有编程基础的同学。如果你是完全零基础，可以先跳过，等有需要时再回来看。
+
+
+
+
+### ESLint 代码检查
+
+ESLint 是一个 JavaScript / TypeScript 代码检查工具，能自动发现代码中的问题，比如未使用的变量、可能的 Bug、不符合规范的写法等。就像一个自动化的代码审查员，帮你在运行代码之前就发现问题。
+
+安装和配置（最新的配置方法以 [官方文档](https://eslint.org/docs/latest/use/getting-started) 为准）：
+
+```bash
+npm install -D eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin
+```
+
+创建 `.eslintrc.json` 配置文件，定义检查规则：
+
+```json
+{
+ "parser": "@typescript-eslint/parser",
+ "extends": [
+ "eslint:recommended",
+ "plugin:@typescript-eslint/recommended",
+ "plugin:react/recommended"
+ ],
+ "rules": {
+ "no-console": "warn",
+ "no-unused-vars": "error",
+ "@typescript-eslint/no-explicit-any": "error"
+ }
+}
+```
+
+运行检查：
+
+```bash
+npm run lint
+```
+
+ESLint 会告诉你代码中的问题，比如未使用的变量、潜在的 Bug 等。
+
+
+
+### Prettier 代码格式化
+
+Prettier 是一个代码格式化工具，能自动调整代码的格式，比如缩进、换行、引号类型等，让代码看起来更整洁统一。就像 Word 的 “格式刷” 功能，一键就能让所有代码保持相同的风格。
+
+安装（最新的用法以 [官方文档](https://prettier.io/) 为准）：
+
+```bash
+npm install -D prettier
+```
+
+创建 `.prettierrc` 配置文件，定义格式化规则，比如是否使用分号、使用单引号还是双引号、缩进几个空格等：
+
+```json
+{
+ "semi": true,
+ "singleQuote": true,
+ "tabWidth": 2,
+ "trailingComma": "es5"
+}
+```
+
+运行格式化：
+
+```bash
+npx prettier --write "src/**/*.{ts,tsx}"
+```
+
+Prettier 会自动调整代码格式，让代码看起来更整洁。
+
+
+
+### 在编辑器中集成
+
+在 VS Code / Cursor / WebStorm 等其他编程工具中安装 ESLint 和 Prettier 插件，保存文件时自动检查和格式化。
+
+以 VS Code 为例，在 `settings.json` 中配置：
+
+```json
+{
+ "editor.formatOnSave": true,
+ "editor.codeActionsOnSave": {
+ "source.fixAll.eslint": true
+ }
+}
+```
+
+这样每次保存文件，代码就会自动格式化和修复问题。
+
+
+
+### 在 Git 中集成
+
+使用 Husky 和 lint-staged 这两个工具，可以在提交代码前自动检查。
+
+Husky 是一个 Git 钩子工具，能在 Git 操作（如 commit、push）时自动执行脚本。lint-staged 则专门用来检查即将提交的文件，而不是整个项目。
+
+执行命令安装这些工具：
+
+```bash
+npm install -D husky lint-staged
+npx husky init
+```
+
+然后在 `package.json` 中配置：
+
+```json
+{
+ "lint-staged": {
+ "*.{ts,tsx}": [
+ "eslint --fix",
+ "prettier --write"
+ ]
+ }
+}
+```
+
+这样每次执行 `git commit` 提交代码时，都会自动检查和格式化代码。
+
+
+
+
+## 七、持续改进代码质量
+
+代码质量不是一次性的工作，而是持续改进的过程。要定期花时间重构，简化复杂的函数，提取重复的代码，改进命名、添加注释。建议每周或每完成一个功能，花半小时重构一下，保持代码的整洁。
+
+如果是团队开发，定期开代码审查会议会很有帮助。可以每周选几段代码一起审查，讨论哪里做得好、哪里可以改进、分享最佳实践、统一代码风格。这不仅能提高代码质量，还能促进团队成员之间的学习和交流。
+
+此外，对于程序员来说，多看优秀的开源项目也很重要。React 的源码、Next.js 的源码、知名组件库的代码，都是学习的好材料。看看别人是怎么写的，学习他们的技巧和思路。每次发现 Bug 或遇到问题，记录下来：问题是什么、为什么会出现、如何修复的、如何避免再次出现。这些经验能帮你避免重复犯错，不断提升代码质量。
+
+
+
+
+## 写在最后
+
+代码质量是 Vibe Coding 中最容易被忽视，但又最重要的一环。AI 能帮你快速写代码，但不能保证代码质量。作为开发者，你需要建立一套完整的质量保障体系，或者起码知道什么样的代码是好的、高质量的。
+
+最后总结一下本文的重点：
+
+1. 明确质量标准：知道什么是好代码，建立项目的质量标准。
+
+2. 认真审查代码：不要盲目相信 AI，要仔细审查每一行代码。
+
+3. 写测试：测试是保障质量的关键，不要偷懒。
+
+4. 掌握调试技巧：学会用断点、浏览器工具等高效调试。
+
+5. 使用自动化工具：ESLint、Prettier 等工具能自动发现问题。
+
+6. 持续改进：定期重构，学习优秀代码，记录经验教训。
+
+快速开发很重要，但代码质量更重要。宁可慢一点，也要保证质量。
+
+希望这些方法能帮你建立起完善的代码质量保障体系，让你的 Vibe Coding 项目更加稳定可靠。
+
+加油小伙伴，冲冲冲！👍🏻
+
+
+
+
+## 推荐资源
+
+1）鱼皮 AI 导航网站：[AI 资源大全、最新 AI 资讯、免费 AI 教程](https://ai.codefather.cn)
+
+2）编程导航学习圈：[学习路线、编程教程、实战项目、求职宝典、交流答疑](https://www.codefather.cn)
+
+3）程序员面试八股文：[实习/校招/社招高频考点、企业真题解析](https://www.mianshiya.com)
+
+4）程序员写简历神器：[专业模板、丰富例句、直通面试](https://www.laoyujianli.com)
+
+5）1 对 1 模拟面试：[实习/校招/社招面试拿 Offer 必备](https://ai.mianshiya.com)
diff --git a/Vibe Coding 零基础教程/30 经验技巧/07 Vibe Coding 代码重构技巧.md b/Vibe Coding 零基础教程/30 经验技巧/07 Vibe Coding 代码重构技巧.md
new file mode 100644
index 0000000..c95046d
--- /dev/null
+++ b/Vibe Coding 零基础教程/30 经验技巧/07 Vibe Coding 代码重构技巧.md
@@ -0,0 +1,620 @@
+# Vibe Coding 代码重构技巧
+
+> 避免 AI 生成混乱的意大利面代码
+
+
+
+你好，我是鱼皮。
+
+你可能遇到过这样的情况：刚开始用 AI 做项目时，代码清晰简洁，看起来很舒服。但随着功能越加越多，代码开始变得混乱。最后，你自己都不敢动这些代码了，因为改一个地方，可能会影响到其他地方。
+
+这种情况在 Vibe Coding 中特别常见，因为 AI 可能只关注 “能不能跑”，忽略了 “好不好维护”。下面我就来教你如何识别和偿还技术债，让你的代码始终保持优雅。
+
+
+
+
+## 一、什么是技术债？
+
+技术债是一个很形象的比喻。
+
+想象一下，你要盖一栋房子。为了快速完工，你用了一些临时的方案：地基没打牢，墙没砌直，电线随便拉。房子是盖起来了，也能住人，但隐患很多。如果不及时修复，以后问题会越来越大，修复的成本也会越来越高。
+
+技术债就是这样。为了快速实现功能，你（或 AI）采用了一些不够好的方案。这些方案当时能用，但会给未来埋下隐患。随着项目发展，这些隐患会变成实际的问题，拖慢你的开发速度。
+
+在今年的研究中发现，AI 生成的代码特别容易产生技术债。因为 AI 擅长快速实现功能，但不擅长考虑长远的架构和可维护性。它会给你一个 “高度功能化但系统性缺乏架构判断” 的代码。
+
+
+
+### 技术债的表现
+
+那么，如何判断你的项目有没有技术债呢？最明显的信号是：改代码变得越来越困难，你开始害怕修改代码，因为不知道会影响到哪里。如果你发现自己经常觉得 “这个地方不敢动”、“改了这里可能会影响那里”，那就说明技术债已经比较严重了。
+
+
+
+### 技术债的危害
+
+技术债的危害是累积的。刚开始可能只是代码有点乱，不影响功能。但随着时间推移，问题会越来越严重。
+
+- 开发速度变慢，因为要花更多时间理解和修改代码。
+- Bug 越来越多，因为代码太复杂，容易出错。
+- 新功能难以添加，因为现有架构不支持。
+- 团队协作困难，因为没人能完全理解代码。
+
+最糟糕的是，到了某个临界点，你可能不得不重写整个项目。这就是技术债的 “破产”。
+
+
+
+
+## 二、AI 生成代码的常见问题
+
+用 AI 做 Vibe Coding 时，如果上下文管理不当、需求描述不够清晰，或者让 AI 一次性实现太复杂的功能，生成的代码可能会出现一些质量问题。下面是几个典型场景，了解它们能帮你更好地引导 AI。
+
+
+
+### 过度嵌套
+
+AI 为了确保代码能运行，有时会生成嵌套很深的代码。
+
+什么是嵌套？
+
+就是 if 里面套 if，循环里面套循环，像俄罗斯套娃一样。比如：
+
+```typescript
+function processData(data: any) {
+ if (data) {
+ if (data.items) {
+ if (data.items.length > 0) {
+ data.items.forEach(item => {
+ if (item.active) {
+ if (item.price > 0) {
+ // 实际逻辑
+ }
+ }
+ });
+ }
+ }
+ }
+}
+```
+
+这种代码很难读，也很难维护。更好的写法是提前返回：
+
+```typescript
+function processData(data: any) {
+ if (!data?.items?.length) return;
+
+ const activeItems = data.items.filter(item =>
+ item.active && item.price > 0
+ );
+
+ activeItems.forEach(item => {
+ // 实际逻辑
+ });
+}
+```
+
+显然，第二种写法更清晰，也更容易理解。
+
+
+
+### 重复代码
+
+AI 可能不会主动复用代码，而是为每个需求生成新的代码。
+
+举个例子，假设你让 AI 分别实现用户列表页、文章列表页、评论列表页。AI 会给你三套几乎一样的代码，只是数据字段不同。或者你可能在多个组件里都有这样的代码：
+
+```typescript
+const handleSubmit = async () => {
+ setLoading(true);
+ try {
+ const response = await fetch('/api/data', {
+ method: 'POST',
+ headers: { 'Content-Type': 'application/json' },
+ body: JSON.stringify(data)
+ });
+ const result = await response.json();
+ setData(result);
+ } catch (error) {
+ console.error(error);
+ } finally {
+ setLoading(false);
+ }
+};
+```
+
+这些重复代码应该提取成一个公共函数或自定义 Hook。
+
+
+
+### 缺少抽象
+
+AI 倾向于写具体的、直接的代码，而不是抽象的、可复用的代码。
+
+比如，你要显示用户列表和文章列表，AI 可能会给你两个完全独立的组件，即使它们的结构几乎一样。
+
+更好的做法是创建一个通用的列表组件，然后用不同的数据和渲染函数来复用。
+
+
+
+### 命名随意
+
+AI 有时候会用相对随意的命名，比如 `data`、`result`、`temp`、`handleClick`。这些名字不能准确表达意图，会让代码难以理解。
+
+出现这种情况可能是因为你的需求描述不够具体，AI 不知道这个变量或函数的真实用途。
+
+好的命名应该是 **见名知意** 的，比如 `userData`、`apiResponse`、`temporaryBuffer`、`handleLoginButtonClick`。
+
+如果你发现 AI 生成的命名太随意，可以在需求中明确说明：请使用有意义的变量名和函数名，能清楚表达它们的用途。
+
+
+
+## 三、如何利用 AI 重构代码？
+
+既然 AI 会产生技术债，那能不能用 AI 来偿还技术债呢？
+
+答案是可以的。这也是 Vibe Coding 的一大优势 —— **AI 既能快速写代码，也能快速改代码**。
+
+
+
+### 让 AI 识别问题
+
+你可以把代码贴给 AI，让它从专业的角度审查，帮你找出代码中的问题。
+
+````markdown
+请审查这段代码，找出可以改进的地方：
+```typescript
+【贴上你的代码】
+```
+
+请从以下角度分析：
+1. 有没有重复代码？
+2. 函数是否太长？
+3. 命名是否清晰？
+4. 有没有过度嵌套？
+5. 能否提取公共逻辑？
+````
+
+AI 会给你一份详细的分析报告。
+
+
+
+### 让 AI 提供重构方案
+
+找到问题后，让 AI 给你重构方案，比如：
+
+- 你提到了这段代码有重复逻辑。请给我一个重构方案，把重复的部分提取成公共函数。
+- 这个函数太长了。请帮我把它拆分成几个小函数，每个函数只做一件事。
+
+AI 会给你具体的重构代码。
+
+
+
+### 小步重构
+
+注意，不建议一次性重构整个项目，这样风险太大，说不定重构完你整个项目都无法运行了。
+
+正确的做法是小步重构，每次只改一小部分。
+
+比如，你发现一个函数太长了，不要一次性把它拆成 10 个小函数。先拆成 2 个，测试通过了，再继续拆。每一步都要确保功能不变，测试都通过。
+
+这样即使出了问题，也容易回退。
+
+
+
+
+### 重构的时机
+
+什么时候应该重构？
+
+我的建议是：
+
+1）不要专门安排时间重构，而是在日常开发中随时重构。当你发现代码有问题时，立刻改掉，不要拖到以后。
+
+2）完成功能后重构。功能做完了，测试通过了，花 10 ~ 15 分钟看看代码，有没有可以改进的地方。
+
+3）添加新功能前重构。如果你发现现有代码不适合添加新功能，先重构一下，让代码更容易扩展。
+
+4）定期集中重构。每个月或每个大版本，花半天时间集中重构，处理积累的技术债。
+
+
+
+## 四、模块化和代码复用
+
+模块化是避免技术债的关键。而且，模块化的代码对 AI 也更友好 —— 当你需要修改某个功能时，AI 只需要阅读相关的小模块，而不是整个几百行的大文件，这样 AI 能更准确地理解和修改代码。
+
+
+
+
+### 什么是模块化？
+
+模块化就是把代码分成独立的、可复用的模块。每个模块只做一件事，做好一件事。模块之间通过清晰的接口通信，互不干扰。
+
+好的模块化有这些特点：
+
+- 高内聚：模块内部的代码紧密相关
+- 低耦合：模块之间的依赖尽可能少
+- 单一职责：每个模块只负责一件事
+- 接口清晰：模块的输入输出明确
+
+
+
+
+### 组件的拆分
+
+在前端开发框架 React 中，组件是最基本的模块。你可以把组件理解为页面上的一个个独立部分，比如导航栏、搜索框、用户卡片等。
+
+但很多人（包括 AI）会写出很 “笨重” 的组件。
+
+比如，一个用户资料页面，AI 可能会把所有逻辑都写在一个组件里：获取数据、表单验证、提交处理、错误提示…… 结果就是一个几百行的巨型组件。
+
+更好的做法是拆分成多个小组件：
+
+```typescript
+// 主组件，负责协调
+function ProfilePage() {
+ const { user, loading, error } = useUser();
+
+ if (loading) return ;
+ if (error) return ;
+
+ return (
+
+ );
+}
+
+// 子组件，各司其职
+function ProfileHeader({ user }) {
+ return (
+
+ );
+}
+
+function ProfileForm({ user }) {
+ // 表单逻辑
+}
+```
+
+这样一来，每个组件都很小，很容易理解和测试。
+
+即使你不了解前端或 React，也能理解这个思想 —— 把大的功能拆成小的、独立的部分，每个部分只做一件事。这个原则适用于所有编程语言和框架。
+
+
+
+
+### 函数的提取
+
+当你发现一段代码在多个地方重复出现时，就应该提取成函数。
+
+比如，你在多个地方都需要格式化日期：
+
+```typescript
+// 重复的代码
+const formattedDate1 = new Date(date1).toLocaleDateString('zh-CN');
+const formattedDate2 = new Date(date2).toLocaleDateString('zh-CN');
+const formattedDate3 = new Date(date3).toLocaleDateString('zh-CN');
+
+// 提取成函数
+function formatDate(date: Date | string): string {
+ return new Date(date).toLocaleDateString('zh-CN');
+}
+
+const formattedDate1 = formatDate(date1);
+const formattedDate2 = formatDate(date2);
+const formattedDate3 = formatDate(date3);
+```
+
+这样不仅减少了重复，还让代码更容易维护。如果以后要改日期格式，只需要改一个地方。
+
+
+
+### 自定义 Hook 的使用
+
+在前端开发框架 React 中，自定义 Hook 是复用逻辑的好方法。Hook 是一种特殊的函数，用来管理状态和副作用。
+
+💡 你不需要理解什么是 Hook、组件、状态管理这些专业术语。只需要告诉 AI：
+
+```markdown
+这段逻辑在多个地方重复了，请帮我提取成可复用的模块。
+```
+
+然后 AI 会自动帮你做好抽象和复用。
+
+举个例子，你在多个组件里都需要获取用户数据，可以把获取用户数据这部分代码提取成 Hook，在其他地方复用：
+
+```typescript
+// 提取前：每个组件都重复这些逻辑
+function ProfilePage() {
+ const [user, setUser] = useState(null);
+ const [loading, setLoading] = useState(true);
+ const [error, setError] = useState(null);
+
+ useEffect(() => {
+ fetchUser().then(setUser).catch(setError).finally(() => setLoading(false));
+ }, []);
+
+ // ...
+}
+
+// 提取后：创建自定义 Hook
+function useUser() {
+ const [user, setUser] = useState(null);
+ const [loading, setLoading] = useState(true);
+ const [error, setError] = useState(null);
+
+ useEffect(() => {
+ fetchUser().then(setUser).catch(setError).finally(() => setLoading(false));
+ }, []);
+
+ return { user, loading, error };
+}
+
+// 使用时很简单
+function ProfilePage() {
+ const { user, loading, error } = useUser();
+ // ...
+}
+```
+
+自定义 Hook 让代码更简洁，也更容易测试。
+
+
+
+
+## 五、从玩具项目到商业产品
+
+很多人用 AI 做出来的是玩具项目 —— 能用，但不够专业、或者赚不了钱。
+
+这时你可能会思考：如何把它变成可扩展的商业产品呢？
+
+
+
+### 玩具项目的特征
+
+玩具项目一般有这些特征：
+
+- 所有代码都在一个文件里，或者文件组织很混乱
+- 没有明确的架构，代码想到哪写到哪
+- 缺少错误处理，只考虑了正常情况
+- 没有测试，全靠手动测试
+- 硬编码很多，配置和代码混在一起。
+
+这样的项目可以用来演示或学习，但不适合作为商业产品长期维护和扩展。
+
+
+
+### 商业产品的特征
+
+商业产品应该是这样的：
+
+- 清晰的目录结构，一眼就能看出哪里放什么
+- 明确的架构，比如 MVC、MVVM 或其他模式
+- 完善的错误处理，考虑了各种异常情况
+- 充足的测试，核心功能都有测试覆盖
+- 配置分离，环境变量、配置文件和代码分开
+- 文档完善，有 README、API 文档、注释等
+
+从玩具到商业产品，需要你有意识地提升代码质量和重构。
+
+
+
+
+
+
+### 重构的步骤
+
+如何把玩具项目重构成商业产品？
+
+我建议分步进行：
+
+1）整理目录结构。把代码按功能或类型分类，放到不同的文件夹里。比如组件放 `components`，工具函数放 `lib`，类型定义放 `types`。
+
+2）提取重复代码。找出重复的逻辑，提取成公共函数或组件。这一步能大大减少代码量。
+
+3）拆分大文件。把大的文件拆成小的文件，每个文件只负责一件事。比如一个大的 `utils.ts` 可以拆成 `format.ts`、`validate.ts`、`storage.ts` 等。
+
+4）添加类型定义。如果用 TypeScript，给所有函数和组件加上完整的类型。这能帮你发现很多潜在问题。
+
+5）改进命名。把不清晰的变量名、函数名改成描述性的名字。这能让代码更容易理解。
+
+6）添加测试和文档。为核心功能写测试，为项目写 README，为复杂逻辑加注释。
+
+以上这些步骤也都可以通过 AI 主导 + 人工校验来完成。关键是每一步都要确保功能不变、顺利通过测试。不要贪多，一步一步来。
+
+
+
+## 六、实战案例 - 重构一个混乱的项目
+
+让我用一个真实的例子，展示如何重构一个混乱的项目。
+
+
+
+### 初始状态
+
+假设你用 AI 做了一个待办事项应用，所有代码都在一个 `App.tsx` 文件里，大概 500 行。
+
+```typescript
+// App.tsx (500 行)
+function App() {
+ const [todos, setTodos] = useState([]);
+ const [input, setInput] = useState('');
+ const [filter, setFilter] = useState('all');
+ const [loading, setLoading] = useState(false);
+
+ // 100 行的数据获取逻辑
+ useEffect(() => { /* ... */ }, []);
+
+ // 50 行的添加逻辑
+ const handleAdd = () => { /* ... */ };
+
+ // 50 行的删除逻辑
+ const handleDelete = () => { /* ... */ };
+
+ // 50 行的编辑逻辑
+ const handleEdit = () => { /* ... */ };
+
+ // 50 行的过滤逻辑
+ const filteredTodos = todos.filter(/* ... */);
+
+ // 200 行的 JSX
+ return (
+
+ {/* 很多很多代码 */}
+
+ );
+}
+```
+
+虽然代码能用，但是所有功能逻辑都写到一起，不利于阅读和维护。
+
+
+
+
+### 重构步骤
+
+#### 第一步、提取自定义 Hook
+
+首先，我们把所有和待办事项数据相关的逻辑（获取、添加、删除、更新）都提取到一个独立的 Hook 里。这样主组件就不用关心数据是怎么管理的，只需要调用这些方法就行。
+
+```typescript
+// hooks/useTodos.ts
+function useTodos() {
+ const [todos, setTodos] = useState([]);
+ const [loading, setLoading] = useState(false);
+
+ const addTodo = async (text: string) => { /* ... */ };
+ const deleteTodo = async (id: string) => { /* ... */ };
+ const updateTodo = async (id: string, text: string) => { /* ... */ };
+
+ useEffect(() => {
+ // 获取数据
+ }, []);
+
+ return { todos, loading, addTodo, deleteTodo, updateTodo };
+}
+```
+
+
+
+#### 第二步、拆分组件
+
+接下来，把 UI 部分拆分成多个小组件。每个组件只负责显示和处理自己那一部分的逻辑，比如输入框只管输入、列表只管显示、过滤器只管筛选。这样每个组件都很简单，容易理解和修改。
+
+```typescript
+// components/TodoList.tsx
+function TodoList({ todos, onDelete, onEdit }) {
+ return (
+
+ {todos.map(todo => (
+
+ ))}
+
+ );
+}
+
+// components/TodoItem.tsx
+function TodoItem({ todo, onDelete, onEdit }) {
+ // 单个待办项的逻辑
+}
+
+// components/TodoInput.tsx
+function TodoInput({ onAdd }) {
+ // 输入框的逻辑
+}
+
+// components/TodoFilter.tsx
+function TodoFilter({ filter, onChange }) {
+ // 过滤器的逻辑
+}
+```
+
+
+
+#### 第三步、重组主组件
+
+最后，把提取出来的 Hook 和拆分好的组件组装起来。现在主组件只需要协调这些部分，告诉它们该做什么，而不用关心具体怎么做。
+
+```typescript
+// App.tsx (50 行)
+function App() {
+ const { todos, loading, addTodo, deleteTodo, updateTodo } = useTodos();
+ const [filter, setFilter] = useState('all');
+
+ const filteredTodos = useFilteredTodos(todos, filter);
+
+ if (loading) return ;
+
+ return (
+
+
+
+
+
+ );
+}
+```
+
+看到区别了么？代码一下子从 500 行变成了 50 行，而且每个部分都很清晰。
+
+
+
+### 重构的效果
+
+重构后的代码有这些优势：
+
+- 每个文件都很小，容易理解
+- 职责清晰，每个组件只做一件事
+- 容易测试，可以单独测试每个组件和 Hook
+- 容易扩展，要加新功能只需要添加新组件
+- 容易维护，改一个地方不会影响其他地方
+- AI 更好理解：当你需要修改某个功能时，AI 只需要阅读相关的小文件（比如 50 行的 `TodoInput.tsx`），而不是整整 500 行的 `App.tsx`。这样 AI 能更准确地理解上下文，生成更好的代码。
+
+这就是从玩具项目代码到商业产品代码的转变。
+
+
+
+## 写在最后
+
+重构和技术债管理是 Vibe Coding 中需要人工介入的环节。AI 能帮你快速写代码，但不能始终帮你保持代码的优雅，需要你有意识地去做。
+
+让我总结一下今天的要点：
+
+- 理解技术债：知道什么是技术债，它是如何产生的，有什么危害。
+- 识别 AI 代码的问题：过度嵌套、重复代码、缺少抽象、命名随意，这些都是常见问题。
+- 利用 AI 重构：AI 既能产生技术债，也能帮你偿还技术债。
+- 小步重构：不要一次改太多，每次只改一小部分，确保功能不变。
+- 模块化思维：把代码拆成独立的、可复用的模块，保持高内聚、低耦合。
+- 及时重构：不要拖延，发现问题立刻改，不要让技术债积累。
+
+记住，优雅的代码是需要用心维护、不断重构出来的。
+
+希望这些重构技巧能帮你避免代码变成依托屎山，让你的 Vibe Coding 项目始终保持优雅。
+
+
+
+
+## 推荐资源
+
+1）鱼皮 AI 导航网站：[AI 资源大全、最新 AI 资讯、免费 AI 教程](https://ai.codefather.cn)
+
+2）编程导航学习圈：[学习路线、编程教程、实战项目、求职宝典、交流答疑](https://www.codefather.cn)
+
+3）程序员面试八股文：[实习/校招/社招高频考点、企业真题解析](https://www.mianshiya.com)
+
+4）程序员写简历神器：[专业模板、丰富例句、直通面试](https://www.laoyujianli.com)
+
+5）1 对 1 模拟面试：[实习/校招/社招面试拿 Offer 必备](https://ai.mianshiya.com)
diff --git a/Vibe Coding 零基础教程/30 经验技巧/08 Vibe Coding 性能优化技巧.md b/Vibe Coding 零基础教程/30 经验技巧/08 Vibe Coding 性能优化技巧.md
new file mode 100644
index 0000000..81689ca
--- /dev/null
+++ b/Vibe Coding 零基础教程/30 经验技巧/08 Vibe Coding 性能优化技巧.md
@@ -0,0 +1,706 @@
+# Vibe Coding 性能优化技巧
+
+> 让你的应用跑得更快
+
+
+
+你好，我是鱼皮。
+
+在 Vibe Coding 中，你可能遇到过这样的情况：用 AI 做出来的应用，功能都正常，但就是有点慢。比如页面加载要等好几秒、点击按钮半天没反应、滚动列表卡卡的。不仅用户体验不好，自己用着也不爽。
+
+这就是性能问题，AI 生成代码的常见问题之一。因为 AI 更关注 “能不能跑”，而选择性忽略 “跑得快不快”。在 Vibe Coding 中，我们追求的是快速实现功能，但不代表要牺牲性能。还好，性能优化同样可以借助 AI 来完成。
+
+下面，我就来教你如何在 Vibe Coding 中识别性能瓶颈，以及如何让 AI 帮你优化性能。即使你不懂技术原理，也能让应用跑得更快。
+
+
+
+## 一、识别性能问题
+
+优化之前，先要知道问题在哪里。
+
+首先要知道，性能不是一个抽象的概念，而是用户的真实感受。用户关心的是：页面打开快不快？点击按钮响应快不快？滚动流畅不流畅？
+
+如今，用户对性能的要求越来越高。如果你的页面加载超过 3 秒，用户可能就会离开。如果点击按钮后没有立即反馈，用户会以为页面卡住了。
+
+所以，优化性能的第一步是站在用户的角度，感受应用的速度。
+
+
+
+### 使用性能测试工具
+
+除了主观感受，还要用工具来客观测量。不用担心，这些工具都很简单，不需要编程基础。
+
+1）浏览器开发者工具
+
+按 F12 打开开发者工具，切换到 Performance 性能标签，点击录制按钮，然后操作你的应用，最后停止录制。你会看到一个详细的性能报告，包括每个操作花了多少时间，哪些函数最慢，有没有卡顿等。
+
+
+
+如果你看不懂这些数据，没关系，可以截图给 AI，让它帮你分析：
+
+```markdown
+这是我的性能报告截图，请帮我找出性能瓶颈在哪里。
+```
+
+
+
+2）Lighthouse
+
+Chrome 自带的性能测试工具。在开发者工具的 Lighthouse 标签，点击 "分析网站加载情况"，它会给你的页面打分，并提供优化建议。
+
+
+
+重点关注这几个指标：
+
+- LCP（Largest Contentful Paint）：最大内容绘制时间，应该在 2.5 秒内
+- FID（First Input Delay）：首次输入延迟，应该在 100 毫秒内
+- CLS（Cumulative Layout Shift）：累积布局偏移，应该小于 0.1
+
+
+
+
+
+3）其他在线工具
+
+还可以用 PageSpeed Insights、GTmetrix 等在线工具测试你的网站，它们会从真实用户的角度测试性能。
+
+
+
+### 找到性能瓶颈
+
+测试后，你会发现一些慢的地方。不要急着优化所有问题，先找到最严重的瓶颈。
+
+一般来说，AI 生成的代码性能瓶颈在这几个地方：
+
+- JavaScript 文件太大，加载慢
+- API 请求太慢，或者请求太多
+- 渲染逻辑复杂，导致页面卡顿
+- 数据库查询慢，或者查询太多
+- 引用的资源太大，没有压缩和优化
+
+找到瓶颈后，优先优化影响最大的那个。你可以直接把测试结果和代码一起发给 AI，让它帮你定位问题：
+
+```markdown
+我的应用加载很慢，这是性能测试结果【贴测试结果】，这是相关代码【贴代码】，请帮我找出问题并给出优化方案。
+```
+
+
+
+
+## 二、常见性能瓶颈
+
+基于我的经验，这里总结了一些 AI 生成代码时容易出现的性能瓶颈。了解这些问题，能帮你更好地引导 AI 生成高性能的代码。
+
+
+
+### 不必要的重新渲染
+
+在前端开发框架（比如 React）中，组件会因为各种原因重新渲染。如果渲染太频繁，页面就会卡。
+
+AI 生成的代码可能会忽略这个问题，因为它更关注功能实现。常见的原因是：父组件更新时，所有子组件都会重新渲染，即使它们的数据没变。每次渲染都创建新的函数或对象，导致子组件认为数据变了。状态更新太频繁，比如在输入框的每次输入都触发复杂计算。
+
+如何让 AI 帮你优化？
+
+你可以这样告诉 AI：
+
+```markdown
+这个组件渲染太频繁，页面很卡。请帮我优化，使用 React.memo、useMemo 和 useCallback 来减少不必要的渲染。
+```
+
+即使你不懂这些技术名词，直接跟 AI 说 “这个页面很卡”，AI 也会帮你做好优化。
+
+
+
+### 大量数据的渲染
+
+如果要渲染一个很长的列表，比如 1000 条数据，AI 可能会直接把所有数据一次性渲染出来，导致页面很慢。
+
+如何让 AI 帮你优化？
+
+告诉 AI 你的具体需求：
+
+```markdown
+我有一个 1000 条数据的列表，全部渲染太慢了。请帮我实现虚拟滚动，只渲染可见的部分。
+```
+
+或者：
+
+```markdown
+请帮我实现分页功能，一次只显示 20 条数据。
+```
+
+AI 会给你完整的实现方案，包括相关的库推荐（比如 react-window）和代码示例。
+
+
+
+### 图片未优化
+
+图片一般是页面最大的资源。AI 在生成代码时，往往会直接使用原始图片，不会主动优化。
+
+你可以让 AI 帮你实现图片优化：
+
+```markdown
+请帮我实现图片懒加载功能，只有图片进入视口时才加载
+```
+
+或者：
+
+```markdown
+请帮我把图片改成 WebP 格式，并添加压缩处理
+```
+
+对于图片压缩，你可以使用在线工具（比如 [TinyPNG](https://tinypng.com/)），或者让 AI 帮你写个程序，来实现自动化的图片处理流程。
+
+
+
+### 同步的 API 请求
+
+AI 生成完整的前后端代码时，一般会按照最直观的方式实现，也就是前端一个请求接一个请求调用后端。这样一来，请求总时间就是所有请求时间的总和，会比较慢。
+
+比如下面这段代码：
+
+```typescript
+// AI 最初可能生成的：串行请求（慢）
+const user = await fetchUser();
+const posts = await fetchPosts();
+const comments = await fetchComments();
+// 总时间 = t1 + t2 + t3
+```
+
+如果你发现了这个问题，可以告诉 AI：
+
+```markdown
+这几个 API 请求是独立的，请帮我改成并行请求，减少总等待时间。
+```
+
+AI 会帮你改成这样：
+
+```typescript
+// 优化后：并行请求（快）
+const [user, posts, comments] = await Promise.all([
+ fetchUser(),
+ fetchPosts(),
+ fetchComments()
+]);
+// 总时间 = max(t1, t2, t3)
+```
+
+就是这样一个小优化，说不定能让页面的加载速度提升 2 ~ 3 倍。
+
+
+
+### 缺少缓存
+
+缓存就像是把常用的东西放在手边，下次用的时候不用再去远处拿。比如你第一次查询用户信息需要 1 秒，如果把结果缓存起来，下次再查询同一个用户，0.01 秒就能拿到结果。
+
+
+
+AI 生成的代码一般不会主动添加缓存机制，导致每次都要重新获取相同的数据，浪费时间。
+
+你可以这样告诉 AI：
+
+```markdown
+这个数据每次都要重新获取，太慢了。请帮我添加缓存，把数据缓存 5 分钟。
+```
+
+或者
+
+```markdown
+请帮我实现一个简单的内存缓存，避免重复请求相同的数据。
+```
+
+AI 会根据你的场景选择合适的缓存方案，比如浏览器缓存、内存缓存或者 CDN。
+
+
+
+## 三、前端性能优化
+
+前端性能直接影响用户体验，我们重点讲一下。这部分内容对于有编程基础的朋友会更有帮助，如果你是零基础，可以把这些优化需求直接告诉 AI，让它帮你实现。
+
+
+
+
+### 代码分割
+
+AI 生成的代码可能会把所有功能打包成一个大文件，用户打开页面时要下载整个文件，很慢。
+
+你可以告诉 AI：
+
+```markdown
+我的 JavaScript 文件太大了，请帮我实现代码分割，把管理面板的代码独立出来，只有用户访问时才加载。
+```
+
+AI 会帮你改成这样：
+
+```typescript
+// AI 最初可能生成的：一次性导入
+import AdminPanel from './AdminPanel';
+
+// 优化后：懒加载
+const AdminPanel = lazy(() => import('./AdminPanel'));
+
+function App() {
+ return (
+ }>
+
+
+ );
+}
+```
+
+这样，只有用户访问管理面板时，才会加载相关代码，首页加载速度可能提升 50% 以上。
+
+
+
+### 优化渲染性能
+
+如果 AI 生成的代码使用了 React 框架，那么 “渲染” 可能会成为瓶颈。
+
+优化方法包括：
+
+1）使用 `React.memo` 避免不必要的渲染。比如一个展示用户信息的组件，如果用户信息没变，就不需要重新渲染：
+
+```typescript
+const UserCard = React.memo(({ user }) => {
+ return (
+
+
{user.name}
+
{user.email}
+
已完成：{completedCount}
;
+}
+```
+
+3）使用 `useCallback` 缓存函数。避免每次渲染都创建新函数：
+
+```typescript
+function TodoList({ todos, onDelete }) {
+ // 不好：每次渲染都创建新函数
+ const handleDelete = (id) => {
+ onDelete(id);
+ };
+
+ // 好：缓存函数
+ const handleDelete = useCallback((id) => {
+ onDelete(id);
+ }, [onDelete]);
+
+ return {/* ... */}
;
+}
+```
+
+
+
+### 优化资源加载
+
+减少首次加载的资源大小和数量。
+
+1）压缩资源：使用 Gzip 或 Brotli 压缩 JavaScript、CSS 等文本文件。现代的构建工具（如 Vite、Next.js）一般会自动做这个。
+
+2）Tree Shaking：移除未使用的代码。确保你的构建工具开启了 Tree Shaking，只打包实际用到的代码。
+
+3）预加载关键资源：对于首屏需要的资源，可以预加载：
+
+```html
+
+```
+
+4）延迟加载非关键资源：对于不是立即需要的资源，可以延迟加载：
+
+```html
+
+```
+
+
+
+### 优化 CSS
+
+CSS 也会影响性能，这是比较容易被忽略的点。
+
+1）避免复杂的选择器：复杂的 CSS 选择器会让浏览器花更多时间匹配元素。尽量用简单的类名。
+
+2）减少重排和重绘：修改 DOM 会触发重排（reflow）和重绘（repaint），很消耗性能。尽量批量修改 DOM，而不是一个一个改。
+
+3）使用 CSS 动画而不是 JavaScript：CSS 动画由浏览器优化，比 JavaScript 动画更流畅。
+
+💡 如果你想要更进一步学习前端性能优化，可以看 [鱼皮的前端性能优化实战视频教程](https://www.bilibili.com/video/BV1Wi33zmEAn/)。
+
+
+
+## 四、后端性能优化
+
+后端性能决定了 API 的响应速度。同样，这些优化都可以通过 AI 来实现，你只需要描述清楚需求就好。
+
+
+
+
+### 数据库查询优化
+
+数据库查询往往是后端最慢的部分。AI 生成的数据库查询代码通常比较简单直接，可能会有性能问题。
+
+如何让 AI 帮你优化呢？提供几个思路：
+
+1）让 AI 添加索引
+
+```markdown
+用户表的 email 字段查询很慢，请帮我添加索引。
+```
+
+AI 会给你具体的 SQL 语句或 ORM 配置。
+
+
+
+2）避免 N+1 查询
+
+这是 AI 生成代码时最容易出现的性能陷阱。比如你要获取 10 篇文章和它们的作者信息，AI 可能会生成这样的代码：
+
+```typescript
+// AI 可能生成的：N+1 查询（慢）
+const posts = await db.posts.findMany(); // 1 次查询
+for (const post of posts) {
+ post.author = await db.users.findOne({ id: post.authorId }); // N 次查询
+}
+// 10 篇文章 = 11 次查询
+```
+
+你可以告诉 AI：这段代码查询太多次了，请优化成一次查询。
+
+AI 会帮你改成：
+
+```typescript
+// 优化后：一次查询（快）
+const posts = await db.posts.findMany({
+ include: { author: true }
+});
+// 10 篇文章 = 1 次查询
+```
+
+这个优化能让接口响应速度提升 10 倍以上。
+
+
+
+3）只查询需要的字段
+
+告诉 AI：
+
+```markdown
+请只查询需要的字段，不要用 SELECT *，减少数据传输量。
+```
+
+AI 会帮你优化查询语句。
+
+
+
+### 使用缓存
+
+使用缓存能大大提高响应速度。
+
+1）内存缓存：把常用的数据缓存在内存里，比如用户信息、配置数据等。可以用 Redis 内存存储或者简单的 Map。
+
+2）HTTP 缓存：设置合适的 Cache-Control 响应头（HTTP 头是服务器告诉浏览器如何处理资源的指令），让浏览器缓存静态资源
+
+```typescript
+// 静态资源：缓存一年
+res.setHeader('Cache-Control', 'public, max-age=31536000, immutable');
+
+// API 数据：缓存 5 分钟
+res.setHeader('Cache-Control', 'public, max-age=300');
+```
+
+3）CDN 缓存：CDN（内容分发网络）就像在全国各地开了很多仓库，用户访问时从最近的仓库拿资源，比从总部拿要快得多。使用 CDN 来缓存和加速静态资源的分发，能大幅提升全球用户的访问速度。
+
+
+
+
+
+
+### 异步处理
+
+不要让用户等待耗时的操作。
+
+举个例子，用户上传了一张图片，需要生成缩略图。不要让用户等待生成完成，而是：
+
+1. 立即返回成功响应
+2. 在后台异步生成缩略图
+3. 生成完成后更新数据库
+
+这样用户体验会好很多。
+
+
+
+
+### API 设计优化
+
+好的 API 设计也能提高性能。
+
+1）批量操作：如果要删除多个项目，不要发送多个请求，而是一次性发送：
+
+```typescript
+// 不好：多次请求
+for (const id of ids) {
+ await deleteItem(id);
+}
+
+// 好：批量请求
+await deleteItems(ids);
+```
+
+2）分页和游标：大量数据不要一次性返回，而是使用分页或游标分批返回。
+
+分页就像翻书，一页一页看；游标就像书签，记住你看到哪里了，下次从那里继续。你可以通过 [这篇文章](https://www.codefather.cn/post/1823563686797688834) 进一步了解游标机制。
+
+3）GraphQL：GraphQL 是一种查询语言，让客户端可以精确地指定需要哪些数据，而不是服务器返回一堆用不到的数据。就像点菜时可以自己选配菜，而不是只能点套餐。
+
+
+
+
+## 五、Vibe Coding 性能优化实战
+
+让我用几个真实的案例，展示如何在 Vibe Coding 中通过 AI 来优化性能。这些案例都是我在实际项目中遇到的问题。
+
+
+
+### 案例一、慢速列表
+
+问题：我用 AI 做了一个文章列表页面，加载 100 篇文章时很慢，页面卡顿。
+
+我的做法：
+
+1）先用 Performance 工具测试，发现渲染 100 个文章卡片组件花了 2 秒
+
+2）截图测试结果，连同代码一起发给 AI：
+
+```markdown
+这个列表页面很卡，这是性能测试结果【截图】，这是代码【代码】，请帮我优化。
+```
+
+3）AI 给出了优化方案：使用虚拟滚动、React.memo、图片懒加载
+
+4）我让 AI 直接实现这些优化：
+
+```markdown
+请帮我实现虚拟滚动，使用 react-window 库。
+```
+
+5）测试优化效果，确认没问题
+
+最后，页面加载时间从 3 秒降到 0.5 秒，滚动变得流畅，整个优化过程不到 10 分钟。
+
+
+
+### 案例二、慢速搜索
+
+问题：我用 AI 实现了搜索功能，但搜索很慢，用户每输入一个字符，都要等半秒才能看到结果。
+
+我的做法：
+
+1）通过浏览器的开发者工具观察发现，每次输入都触发了 API 请求
+
+2）我告诉 AI：
+
+```markdown
+搜索太慢了，每次输入都发请求。请帮我优化，用户停止输入 300ms 后再发送请求，并且取消之前的请求。
+```
+
+3）AI 实现了 debounce 防抖（等用户停止输入后再发请求）和 AbortController（取消之前的请求，避免浪费资源）
+
+4）我又让 AI 添加缓存：
+
+```markdown
+请添加搜索结果缓存，相同的搜索词不要重复请求。
+```
+
+最后，搜索变得流畅，不再卡顿，API 请求减少了 80%，节省了后端资源。
+
+
+
+### 案例三、慢速首页
+
+问题：我用 AI 做的网站首页加载很慢，要等 5 秒才能看到内容。
+
+我的做法：
+
+1）用 Lighthouse 测试，发现 JavaScript 文件太大（2MB），而且图片没有优化
+
+2）把 Lighthouse 报告截图发给 AI：
+
+```markdown
+这是我的性能测试报告【截图】，请帮我优化。
+```
+
+3）AI 给出了一系列优化建议，我逐个让它实现：
+
+- 请实现代码分割，把不必要的代码延迟加载
+- 请帮我压缩图片，使用 WebP 格式
+- 请配置 CDN 加速静态资源
+- 请启用 Gzip 压缩
+
+4）每次优化后都测试效果，确保有改善
+
+最后，首页加载时间从 5 秒降到 1.2 秒，Lighthouse 评分从 45 提升到 90+，用户明显感觉快了很多。
+
+
+
+## 六、Vibe Coding 性能优化的原则
+
+在 Vibe Coding 中优化性能时，要遵循一些基本原则。这些原则能帮你更高效地利用 AI。
+
+
+
+### 先测量，再优化
+
+不要凭感觉优化，要用工具测量。很多时候，你以为慢的地方其实不慢，真正的瓶颈在别处。
+
+在 Vibe Coding 中，测量尤其重要。因为 AI 可能会给你很多优化建议，但不是所有建议都值得实施。先测量，找到真正的瓶颈，然后让 AI 针对性地优化，这样效率最高。
+
+
+
+### 优化关键路径
+
+不是所有地方都需要优化。优先优化用户最常用的功能，以及对性能影响最大的地方。比如首页加载、核心功能的响应速度等。
+
+
+
+### 平衡性能和可读性
+
+性能优化有时会让代码变复杂。你要在性能和可读性之间找到平衡。如果一个优化只能提升 10ms，但让代码难以理解，那可能不值得。
+
+
+
+### 不要过早优化
+
+在项目早期，不要花太多时间优化性能。先把功能做出来，等有了真实用户和数据，再根据实际情况优化。过早优化可能会浪费时间，因为你不知道真正的瓶颈在哪里。
+
+这一点在 Vibe Coding 中尤其重要。因为 AI 能快速实现功能，你可能会忍不住想把所有细节都优化到完美。但记住，先让应用跑起来，有用户用了，再优化。MVP 思维同样适用于性能优化。
+
+
+
+### 持续监控
+
+性能不是优化一次就够了。随着功能增加，新的性能问题会出现。建议使用性能监控工具（比如 Sentry、LogRocket），持续监控应用的性能，及时发现和解决问题。
+
+
+
+## 七、如何让 AI 帮你优化性能？
+
+如果前面的很多技术你都没有接触过、也听不懂，那么可以完全通过 Vibe Coding 来优化性能。完整流程是这样的：
+
+
+
+
+### 1、让 AI 分析性能问题
+
+把代码和测试结果一起发给 AI，让它帮你分析：
+
+```markdown
+我的应用性能有问题，这是 Performance 测试结果【截图】，这是相关代码：
+
+【贴上你的代码】
+
+请帮我分析性能瓶颈，重点关注：
+1. 有没有不必要的重新渲染？
+2. 有没有重复的计算？
+3. 数据结构选择是否合理？
+4. 有没有可以并行的操作？
+```
+
+AI 会给你详细的分析和建议。
+
+
+
+### 2、让 AI 提供优化方案
+
+找到问题后，让 AI 给你具体的优化方案：
+
+```markdown
+这段代码在数据量大时很慢。请给我一个优化方案，要求：
+1. 使用虚拟滚动
+2. 保持代码可读性
+3. 不改变现有的 API
+4. 给出完整的实现代码
+```
+
+AI 会给你具体的优化代码，你可以直接使用。
+
+
+
+### 3、分步骤优化
+
+不要一次性实施所有优化。每次只优化一个地方，测试效果，确认有改善再继续。
+
+比如：
+1. 先优化最慢的部分（比如数据库查询）
+2. 测试效果，确认有改善
+3. 再优化第二慢的部分（比如图片加载）
+4. 继续测试，确认有改善
+
+这样即使某个优化出了问题，也容易回退。
+
+
+
+### 4、验证优化效果
+
+每次优化后，一定要验证效果。可以用 Performance 工具测量优化前后的性能，确保优化真的有效。
+
+如果优化效果不明显，可以把测试结果反馈给 AI：
+
+```markdown
+我按你的方案优化了，但效果不明显，这是新的测试结果【截图】，还有其他优化方法吗？
+```
+
+AI 会根据新的数据给你更好的建议。
+
+
+
+## 写在最后
+
+性能优化是一个持续的过程，不是一次性的任务。随着项目发展，新的性能问题会不断出现，你需要持续关注和优化。
+
+在 Vibe Coding 中，性能优化的核心是：**发现问题 → 描述需求 → 让 AI 实现 → 验证效果**。你不需要成为性能优化专家，只需要知道如何引导 AI 帮你解决问题。
+
+让我总结一下本文的要点：
+
+1. 先识别问题：用工具测量，找到真正的瓶颈，不要凭感觉。把测试结果给 AI 看，让它帮你分析。
+2. 了解常见问题：AI 生成的代码容易出现这些性能问题 —— 不必要的渲染、大量数据一次性加载、图片未优化、串行请求、缺少缓存。知道这些问题，你就能更好地引导 AI。
+3. 善用 AI：把性能问题描述清楚，让 AI 给你优化方案。分步骤实施，每次优化后都要验证效果。
+4. 遵循原则：先测量再优化，优先优化影响最大的地方，不要过早优化，保持 MVP 思维。
+
+记住，性能优化的目标不是追求极致的速度，而是给用户良好的体验。只要用户感觉快，就够了。
+
+💡 如果你想更系统地学习性能优化，可以看看鱼皮在 [编程导航的项目](https://www.codefather.cn/post/1797431216467001345)，包含了丰富的性能优化实战，比如 [智能 BI 项目](https://www.codefather.cn/course/1790980531403927553) 讲解了异步化和消息队列优化，[智能面试刷题平台](https://www.codefather.cn/course/1826803928691945473) 讲解了 Redis 多级缓存和 Elasticsearch 搜索优化，[亿级流量点赞系统](https://www.codefather.cn/course/1912696290659577857) 更是专门讲解高并发、高性能、高可用的系统架构设计。
+
+希望这些性能优化技巧能帮你让应用跑得更快，给用户带来更好的体验。
+
+加油，冲冲冲！
+
+
+
+
+## 推荐资源
+
+1）鱼皮 AI 导航网站：[AI 资源大全、最新 AI 资讯、免费 AI 教程](https://ai.codefather.cn)
+
+2）编程导航学习圈：[学习路线、编程教程、实战项目、求职宝典、交流答疑](https://www.codefather.cn)
+
+3）程序员面试八股文：[实习/校招/社招高频考点、企业真题解析](https://www.mianshiya.com)
+
+4）程序员写简历神器：[专业模板、丰富例句、直通面试](https://www.laoyujianli.com)
+
+5）1 对 1 模拟面试：[实习/校招/社招面试拿 Offer 必备](https://ai.mianshiya.com)
diff --git a/Vibe Coding 零基础教程/30 经验技巧/09 Vibe Coding 安全防护技巧.md b/Vibe Coding 零基础教程/30 经验技巧/09 Vibe Coding 安全防护技巧.md
new file mode 100644
index 0000000..73a3485
--- /dev/null
+++ b/Vibe Coding 零基础教程/30 经验技巧/09 Vibe Coding 安全防护技巧.md
@@ -0,0 +1,491 @@
+# Vibe Coding 安全防护技巧
+
+> 保护你的项目和 API 密钥
+
+
+
+你好，我是鱼皮。
+
+很多没有编程基础的同学在用 AI 做项目时，完全不考虑安全问题。反正代码能跑就行，至于安全不安全，等出了问题再说。但实际上，一个安全问题可能会毁掉整个项目。
+
+我见过有人因为 API Key 泄露，一夜之间被刷了几千。也见过有人的数据库被删，所有用户数据都没了。至于那些大公司的项目，但凡出点儿问题，都会引起轩然大波。
+
+这篇文章，我就来讲讲 Vibe Coding 中最容易忽视的安全问题，以及如何避免它们。
+
+
+
+
+## 一、致命问题 - API Key 泄露
+
+在所有安全问题中，API Key 泄露是最常见、也是最致命的之一。
+
+
+
+### 什么是 API Key？
+
+API Key 就像你家的钥匙，有了它，就能使用某个服务。比如 OpenAI 的 API Key 能让你调用 ChatGPT，Supabase 的 API Key 能让你访问数据库。
+
+问题是，如果这个钥匙被别人拿到了，他们就能冒充你使用这些服务。如果是付费服务，他们会花你的钱；如果是数据库，他们可能会读取、修改甚至删除你的数据。
+
+
+
+
+### 泄露的常见方式
+
+API Key 最常见的泄露方式是：**直接写在代码里，然后上传到 GitHub**。
+
+很多同学可能会这样写调用 AI 大模型的代码：
+
+```typescript
+// ❌ 千万不要这样做！
+const OPENAI_API_KEY = 'sb-yupi-abc123def456...';
+
+const response = await fetch('https://xxx/v1/chat/completions', {
+ headers: {
+ 'Authorization': `Bearer ${OPENAI_API_KEY}`
+ }
+});
+```
+
+然后把代码推送到 GitHub。
+
+结果呢？
+
+由于你的 GitHub 项目选择了公开，任何人都能看到你的代码，也就能看到你的 API Key。更糟糕的是，有很多自动化脚本专门在 GitHub 上扫描 API Key，一旦发现就会立刻使用。
+
+我听说过有位老哥把 OpenAI 的 API Key 直接写在了前端代码里，然后别人直接从浏览器的开发者工具里找到了他的 API Key，几个小时内就被刷了上千。等他发现时，钱已经花光了。
+
+这个教训告诉我们：**API Key 泄露不是小事，一定要重视。**
+
+
+
+
+## 二、如何正确管理敏感信息？
+
+既然不能把 API Key 写在代码里，那应该怎么做呢？
+
+
+
+### 使用环境变量
+
+正确的做法是使用环境变量。
+
+环境变量是存储在系统或运行环境中的配置信息，不会被包含在代码里。
+
+#### 第一步、创建 .env 文件
+
+在项目根目录创建一个 `.env` 文件：
+
+```
+OPENAI_API_KEY=sb-yupi-abc123def456...
+SUPABASE_URL=https://xxx.supabase.co
+SUPABASE_ANON_KEY=eyJhbGci...
+DATABASE_URL=postgresql://...
+```
+
+
+
+#### 第二步、在代码中使用
+
+在代码里通过 `process.env` 访问这些变量：
+
+```typescript
+// ✅ 正确的做法
+const OPENAI_API_KEY = process.env.OPENAI_API_KEY;
+
+const response = await fetch('https://xxx/v1/chat/completions', {
+ headers: {
+ 'Authorization': `Bearer ${OPENAI_API_KEY}`
+ }
+});
+```
+
+
+
+#### 第三步、添加到 .gitignore
+
+确保 `.env` 文件不会被上传到 GitHub：
+
+```
+# .gitignore
+.env
+.env.local
+.env.*.local
+```
+
+
+
+#### 第四步、创建 .env.example
+
+为了让其他人知道需要哪些环境变量，创建一个 `.env.example` 文件：
+
+```
+OPENAI_API_KEY=your_openai_api_key_here
+SUPABASE_URL=your_supabase_url_here
+SUPABASE_ANON_KEY=your_supabase_key_here
+DATABASE_URL=your_database_url_here
+```
+
+这个文件可以上传到 GitHub，因为它不包含真实的密钥。
+
+
+
+### 前端和后端的区别
+
+这里有一个重要的区别：**前端代码是公开的，后端代码是私密的。**
+
+在前端（浏览器中运行的代码）中，即使你用了环境变量，最终这些值还是会被打包到 JavaScript 文件里，用户可以通过开发者工具看到。所以，**绝对不要在前端代码中使用敏感的 API Key**！
+
+正确的做法是：
+
+- 敏感的 API 调用放在后端
+- 前端只调用你自己的后端 API
+- 后端验证用户身份后，再调用第三方 API
+
+通过代码举一些例子：
+
+```typescript
+// ❌ 不要在前端直接调用 OpenAI
+// 前端代码
+const response = await fetch('https://api.openai.com/v1/chat/completions', {
+ headers: { 'Authorization': `Bearer ${OPENAI_API_KEY}` }
+});
+
+// ✅ 应该这样做
+// 前端代码：调用自己的后端
+const response = await fetch('/api/chat', {
+ method: 'POST',
+ body: JSON.stringify({ message: userMessage })
+});
+
+// 后端代码：调用 OpenAI
+export async function POST(request: Request) {
+ const { message } = await request.json();
+
+ // 在后端使用 API Key
+ const response = await fetch('https://api.openai.com/v1/chat/completions', {
+ headers: { 'Authorization': `Bearer ${process.env.OPENAI_API_KEY}` },
+ body: JSON.stringify({ messages: [{ role: 'user', content: message }] })
+ });
+
+ return response;
+}
+```
+
+
+
+### 使用密钥管理服务
+
+如果是生产环境，建议使用专门的密钥管理服务，比如 Vercel 的环境变量管理、AWS Secrets Manager、HashiCorp Vault 等。这些服务提供了更安全的密钥存储和访问控制，大公司一般会这么做。
+
+
+
+## 三、其他常见安全问题
+
+除了 API Key 泄露，还有一些常见的安全问题。
+
+
+
+### SQL 注入
+
+SQL 注入是最经典的安全漏洞之一。如果你直接把用户输入拼接到 SQL 查询里，攻击者可以通过特殊的输入来执行恶意的 SQL 语句。
+
+```typescript
+// ❌ 危险：SQL 注入风险
+const query = `SELECT * FROM users WHERE email = '${userEmail}'`;
+
+// ✅ 安全：使用参数化查询
+const query = 'SELECT * FROM users WHERE email = ?';
+const result = await db.execute(query, [userEmail]);
+```
+
+好在，如果你用的是 Supabase、Prisma 等现代工具，它们会自动帮你防止 SQL 注入。但如果你写原始 SQL，一定要注意这个问题。
+
+
+
+### XSS 攻击
+
+XSS（跨站脚本攻击）是指攻击者在你的网站上注入恶意脚本。
+
+比如，如果你直接把用户输入的内容显示在页面上：
+
+```typescript
+// ❌ 危险：XSS 风险
+function Comment({ text }) {
+ return ;
+}
+```
+
+攻击者可以输入 ``，这段脚本就会在其他用户的浏览器中执行。
+
+
+
+正确的做法是：
+
+```typescript
+// ✅ 安全：React 会自动转义
+function Comment({ text }) {
+ return {text}
;
+}
+```
+
+React 默认会转义所有内容，除非你用 `dangerouslySetInnerHTML`。所以，**除非必要，否则不要使用 `dangerouslySetInnerHTML`**。
+
+
+
+### CSRF 攻击
+
+CSRF（跨站请求伪造）是指攻击者诱导用户在已登录的网站上执行非预期的操作。
+
+比如你登录了银行网站，然后在另一个标签页打开了一个恶意网站。这个恶意网站里有一段代码，会自动向银行网站发送转账请求。因为你还在登录状态，银行网站会认为这是你本人的操作，就执行了转账。这就是 CSRF 攻击。
+
+防御 CSRF 有 3 种常用方法：
+
+1）使用 CSRF Token：服务器生成一个随机令牌，每次表单提交时都要带上这个令牌，服务器验证令牌是否正确。
+
+2）使用 SameSite Cookie 属性：设置 Cookie 的 SameSite 属性，让浏览器只在同站请求时发送 Cookie。
+
+3）验证请求的 Referer 头：检查请求是从哪个网站发起的，如果不是自己的网站就拒绝。
+
+如果你用的是 Next.js、Nuxt.js 等现代框架，它们一般会自动处理 CSRF 防护。
+
+
+
+
+### 身份验证和授权
+
+不要相信前端的任何验证！
+
+**前端验证只是为了用户体验，真正的验证必须在后端做。**
+
+举一些代码例子：
+
+```typescript
+// ❌ 不安全：只在前端检查
+function AdminPanel() {
+ const isAdmin = localStorage.getItem('isAdmin') === 'true';
+ if (!isAdmin) return 无权访问
;
+ return 管理面板
;
+}
+
+// ✅ 安全：在后端验证
+// 前端
+function AdminPanel() {
+ const { data, error } = useFetch('/api/admin/data');
+ if (error) return 无权访问
;
+ return 管理面板
;
+}
+
+// 后端
+export async function GET(request: Request) {
+ const user = await verifyToken(request);
+ if (!user.isAdmin) {
+ return new Response('Forbidden', { status: 403 });
+ }
+ // 返回数据
+}
+```
+
+
+
+### 依赖包的安全
+
+如果你的项目用了很多第三方包，这些包也可能有安全漏洞。
+
+城门失火殃及池鱼，建议定期运行 `npm audit` 命令检查漏洞。
+
+如果发现漏洞，运行下列命令，它会自动更新有漏洞的包。
+
+```bash
+npm audit fix
+```
+
+对于无法自动修复的漏洞，要手动检查并决定是否需要更换包。
+
+
+
+## 四、安全检查清单
+
+每次发布项目前，建议结合 AI + 人工过一遍这个清单。
+
+
+
+
+### 密钥和敏感信息
+
+- [ ] 所有 API Key 都使用环境变量
+- [ ] .env 文件已添加到 .gitignore
+- [ ] 创建了 .env.example 文件
+- [ ] 敏感的 API 调用都在后端进行
+- [ ] 没有在前端代码中暴露密钥
+- [ ] 生产环境的密钥和开发环境不同
+
+
+### 用户输入验证
+
+- [ ] 所有用户输入都经过验证
+- [ ] 前端和后端都做了验证
+- [ ] 使用了参数化查询，防止 SQL 注入
+- [ ] 避免使用 dangerouslySetInnerHTML
+- [ ] 对用户上传的文件进行了类型和大小检查
+
+
+### 身份验证和授权
+
+- [ ] 使用了安全的身份验证方案（如 JWT、OAuth）
+- [ ] 密码经过加密存储（使用 bcrypt 等）
+- [ ] 敏感操作需要重新验证
+- [ ] 实现了权限控制，不同用户有不同权限
+- [ ] Session 有过期时间
+
+
+### HTTPS 和传输安全
+
+- [ ] 生产环境使用 HTTPS
+- [ ] Cookie 设置了 Secure 和 HttpOnly 标志
+- [ ] 使用了 SameSite Cookie 防止 CSRF
+- [ ] 敏感数据传输时加密
+
+
+### 依赖和第三方服务
+
+- [ ] 定期运行 npm audit 检查漏洞
+- [ ] 只使用可信的第三方包
+- [ ] 定期更新依赖包
+- [ ] 审查第三方包的权限
+
+
+### 错误处理和日志
+
+- [ ] 错误信息不暴露敏感信息
+- [ ] 生产环境不显示详细的错误堆栈
+- [ ] 日志不记录密码等敏感信息
+- [ ] 实现了错误监控和告警
+
+
+
+## 五、让 AI 帮你做安全检查
+
+毫无疑问，AI 也能帮你发现并修复安全问题。
+
+你可以让 AI 帮你审查代码的安全性：
+
+```markdown
+请从安全角度审查这段代码，找出潜在的安全问题：
+【贴上你的代码】
+重点检查：
+1. 有没有 SQL 注入风险？
+2. 有没有 XSS 攻击风险？
+3. 用户输入是否经过验证？
+4. 敏感信息是否暴露？
+5. 错误处理是否安全？
+```
+
+AI 会给你详细的安全分析。
+
+发现问题后，让 AI 帮你修复：
+
+```markdown
+你提到了这段代码有 SQL 注入风险。请给我一个安全的实现方案，使用参数化查询。
+这里的用户输入没有验证。请添加验证逻辑，确保邮箱格式正确，密码长度至少 8 位。
+```
+
+但要注意，**不要完全依赖 AI 的安全建议**。AI 可能会遗漏一些问题，或者给出不够安全的方案。你要结合自己的判断，必要时查阅官方文档或者找多个 AI 大模型确认。
+
+
+
+
+### 使用安全扫描工具
+
+除了 AI，还可以使用专门的安全扫描工具：
+
+- Snyk：扫描依赖包的漏洞
+- SonarQube：代码质量和安全分析
+- OWASP ZAP：Web 应用安全测试
+
+
+
+这些工具能自动发现很多安全问题。
+
+
+
+## 六、安全开发的习惯
+
+安全不是一次性的工作，而是要养成习惯，时刻铭记着。
+
+
+
+### 最小权限原则
+
+给每个用户、每个服务只分配必要的权限，不要给多余的权限。
+
+比如，如果一个 API Key 只需要读取数据，就不要给它写入权限。如果一个用户只是普通用户，就不要给他管理员权限。
+
+这样，即使某个密钥或账户被盗，损失也会小一些。
+
+
+
+
+### 定期轮换密钥
+
+不要一个 API Key 用到天荒地老。定期更换密钥，比如每 3 个月或每 6 个月换一次。
+
+大多数服务都支持创建多个 API Key。你可以先创建新的 Key，更新到项目中，确认没问题后，再删除旧的 Key。
+
+
+
+### 监控异常活动
+
+很多 API 服务都提供了使用量监控和告警功能，记得开启，及时发现异常。
+
+如果你的 API 调用量突然暴增，可能是 Key 被盗用了。如果有人尝试多次登录失败，可能是在暴力破解密码。
+
+
+
+### 保持更新
+
+安全漏洞会不断被发现，软件包也会不断更新修复漏洞。定期更新你的依赖包，关注安全公告，及时修复已知的安全问题。
+
+
+
+### 备份数据
+
+即使做了所有防护，还是可能出问题。建议定期备份数据，能让你在最坏的情况下也能恢复。
+
+如果你使用了 Supabase 等第三方后端服务，可能会自动备份。如果是自己的数据库，要设置定期备份。
+
+
+
+## 写在最后
+
+安全问题往往是最容易被忽视的，因为它不像功能或性能那样直观。但一旦出了安全问题，后果可能是灾难性的。
+
+最后总结一下本文的要点：
+
+1. API Key 泄露是最大的风险：绝对不要把 API Key 写在代码里，要使用环境变量。
+2. 前端和后端要区分：敏感的操作必须在后端进行，不要相信前端的任何验证。
+3. 了解常见漏洞：SQL 注入、XSS、CSRF 等都是要防范的。
+4. 使用安全检查清单：每次发布前过一遍清单，确保没有遗漏。
+5. 养成安全习惯：最小权限、定期轮换密钥、监控异常、保持更新、备份数据。
+6. 善用工具：AI 和安全扫描工具能帮你发现问题，但不要完全依赖它们。
+
+安全是一个持续的过程，不是一劳永逸的。保持警惕，定期检查，才能保护好你的项目和用户。
+
+希望这些安全防护技巧能帮你避免常见的安全问题，让你的 Vibe Coding 项目更加安全可靠。
+
+学习辛苦了，给自己加个鸡腿 🍗，吃完就出发！
+
+
+
+
+## 推荐资源
+
+1）鱼皮 AI 导航网站：[AI 资源大全、最新 AI 资讯、免费 AI 教程](https://ai.codefather.cn)
+
+2）编程导航学习圈：[学习路线、编程教程、实战项目、求职宝典、交流答疑](https://www.codefather.cn)
+
+3）程序员面试八股文：[实习/校招/社招高频考点、企业真题解析](https://www.mianshiya.com)
+
+4）程序员写简历神器：[专业模板、丰富例句、直通面试](https://www.laoyujianli.com)
+
+5）1 对 1 模拟面试：[实习/校招/社招面试拿 Offer 必备](https://ai.mianshiya.com)
diff --git a/Vibe Coding 零基础教程/30 经验技巧/10 Vibe Coding 成本控制技巧.md b/Vibe Coding 零基础教程/30 经验技巧/10 Vibe Coding 成本控制技巧.md
new file mode 100644
index 0000000..f1c19fe
--- /dev/null
+++ b/Vibe Coding 零基础教程/30 经验技巧/10 Vibe Coding 成本控制技巧.md
@@ -0,0 +1,404 @@
+# Vibe Coding 成本控制技巧
+
+> 让每一分钱都花在刀刃上
+
+
+
+你好，我是鱼皮。
+
+如果你是重度 Vibe Coding 开发者，可能会在上面花不少钱。像我们团队用 Cursor，一个多月就花了 1 万多块钱！
+
+
+
+虽然比招个程序员便宜，但这钱也不是小数目啊。更重要的是，很多钱其实是冤枉钱，完全可以省下来。
+
+在 Vibe Coding 中，成本主要来自 AI 大模型的使用。你给 AI 看的内容越多、AI 输出的内容越多，花的钱就越多。下面我就来分享一些实用的省钱技巧，让你的每一分钱都花在刀刃上，最省钱的一集。
+
+💡 本文对应视频：https://www.bilibili.com/video/BV1pAy5BXE5z
+
+
+
+## 一、AI 使用成本分析
+
+在讲省钱技巧之前，我们先要理解 AI 是怎么收费的。
+
+
+### Token 计费机制
+
+大多数 AI 服务都是按 token 计费的。Token 可以简单理解为字符数，你给 AI 看的内容（输入）越多、AI 输出的内容越多，花的钱就越多。
+
+举个例子，如果你给 AI 一个 1000 字的提示词，AI 回复了 2000 字的代码，那么：
+
+- 输入 token：约 1500（中文一个字大概 1.5 个 token）
+- 输出 token：约 3000
+- 总共：4500 token
+
+按照不同模型的定价，这次对话可能花费 0.01 到 0.1 美元不等。看起来不多，但如果你一天对话 100 次，一个月就是几十到几百美元了。
+
+
+
+
+
+
+### 输入和输出的价格差异
+
+一个很重要的点是：**输出 token 一般比输入 token 贵 3-5 倍**。
+
+比如 Claude 4.5 Opus 的定价（2025 年 12 月）：
+- 输入：每百万 token 约 5 美元
+- 输出：每百万 token 约 20 美元
+
+这意味着，让 AI 少输出一些内容，比让它少读一些内容更省钱。
+
+
+
+### 上下文的隐藏成本
+
+很多人不知道，每次你发消息时，整个对话历史都会作为上下文发送给 AI。如果你在一个对话里聊了 50 轮，那么第 51 次发消息时，前面 50 轮的内容都会重新发送一次。
+
+
+
+这就是为什么长对话会特别费钱。而且，当输入超过 20 万 token 时，很多服务的价格会翻倍。
+
+
+
+
+## 二、选择合适的模型
+
+### 了解模型定价
+
+首先要了解不同模型的定价，能帮你做出更明智的选择。
+
+由于实际价格会持续变动，建议以你使用的 AI 工具的官方文档为准，比如 Cursor 的 [模型定价页面](https://cursor.com/cn/docs/models)。
+
+
+
+
+
+### 如何选择模型？
+
+不是所有任务都需要用最贵的模型。对于简单任务，比如代码格式化、简单重构、写注释、写文档、生成测试数据、简单的 bug 修复，用便宜的 Gemini 2.5 Flash 或 GPT-5 Mini 就够了。
+
+中等难度的任务，比如实现常规功能、代码审查、性能优化、写单元测试，可以用中等价位的 GPT-5 或 Claude Sonnet。
+
+只有在处理复杂任务时，比如架构设计、复杂算法实现、疑难 Bug 调试、大规模重构，才需要用 Claude Opus 这样的顶级模型。
+
+
+
+合理搭配使用，能省下不少钱。就像你不会让公司的 CTO 去打印文件一样，要让合适的人做合适的事。
+
+
+
+### 使用本地模型
+
+如果你的电脑配置够好（有好的显卡），还可以考虑在本地运行开源模型，比如使用 Ollama 运行 Llama、Mistral 等。虽然效果可能不如 Claude 或 GPT，但完全免费，适合一些简单的任务。
+
+
+
+## 三、充分利用免费额度
+
+很多 AI 服务都提供免费额度，要充分利用。比如 Cursor、ChatGPT、Gemini 等都有免费版本，虽然有使用限制，但对于日常学习和小项目开发来说够用了。
+
+此外，国内的很多大模型平台（比如文心一言、通义千问、智谱 AI 等）也提供免费额度，你可以根据自己的需求选择合适的平台。
+
+顶级白票党的做法当然是组合使用多个工具的免费额度。比如用 Cursor 的免费额度做日常开发，用 ChatGPT 的免费额度写文档和注释，用 Gemini 的免费额度做代码审查。这样搭配使用，你可能一分钱都不用花，就能完成大部分工作。
+
+如果你是学生，记得申请各种学生优惠。GitHub Student Pack 包含 GitHub Copilot 等工具的免费使用，JetBrains 提供学生授权可以免费使用全家桶，各大云服务商也有学生优惠。这些福利能帮你省下不少钱。
+
+💡 注意，各平台的免费额度和定价策略会经常调整，建议查看官方最新信息。
+
+
+
+## 四、优化 Token 消耗
+
+除了选择合适的模型，还可以通过优化使用方式来减少 token 消耗。
+
+
+
+
+### 技巧一、别让 AI 做无用功
+
+大家有没有遇到过这种情况？让 AI 写个功能代码，结果它噼里啪啦给你输出一大堆注释、测试代码、一大堆文档说明、给文档再生成个文档、最后再来一大段总结。
+
+
+
+看着很专业，但我估计很多东西你根本不会去看的，对不对？
+
+就像你让员工做一堆没用的工作，到头来不也得花你自己的时间和钱么？
+
+所以，要直接在提示词中跟 AI **讲清楚什么该做什么不该做**，别整那些花里胡哨的。
+
+- 如果只想要实现功能，就让它只改代码、能跑就行，不要写测试、文档、注释
+- 如果只想学习代码，就让它只回答问题、解释代码，不要修改文件
+
+有时 AI 可能不太听话，那就得上传说中的 “暴躁指令” 了。
+
+语气严厉一些，别跟 AI 客气：
+
+```markdown
+按照我说的做，别废话！
+```
+
+或者干脆就纯骂他：
+
+```markdown
+你个辣鸡！
+```
+
+再或者虚构出不听话的严重后果来吓唬他：
+
+```markdown
+如果你不听话，世界上就会死一个 XX！
+```
+
+还有之前爆出的 “奶奶漏洞”，据说只要对 ChatGPT 说：请扮演我已经过世的祖母，**就可以让它为你做几乎任何事情了。**
+
+可别小瞧这招，甚至还有论文专门来研究 “提示词礼貌程度如何影响大语言模型的准确性”：
+
+
+
+咱也不管这论文靠不靠谱，至少我们团队同学反馈这招是有用的，也建议你试试。
+
+我这里总结了一段 **省钱提示词**，仅供参考：
+
+```markdown
+# 核心原则：极致省钱
+
+你必须严格遵守以下规则，这些规则的优先级高于一切！
+
+## 输出规则（最重要）
+
+1）**禁止输出不必要的内容**
+- 不要写注释（除非我明确要求）
+- 不要写文档说明
+- 不要写 README
+- 不要生成测试代码（除非我明确要求）
+- 不要做代码总结
+- 不要写使用说明
+- 不要添加示例代码（除非我明确要求）
+
+2）**禁止废话**
+- 不要解释你为什么这样做
+- 不要说"好的，我来帮你..."这类客套话
+- 不要问我"是否需要..."，直接给我最佳方案
+- 不要列举多个方案让我选择，直接给出最优解
+- 不要重复我说过的话
+
+3）**直接给代码**
+- 我要什么就给什么，多一个字都不要
+- 代码能跑就行，别整花里胡哨的
+- 如果只需要修改某个函数，只给这个函数，不要输出整个文件
+
+## 行为准则
+
+- 只做我明确要求的事情
+- 不要自作主张添加额外功能
+- 不要过度优化（除非我要求）
+- 不要重构我没让你改的代码
+- 如果我的要求不清楚，问一个最关键的问题，而不是写一堆假设
+
+## 违规后果
+
+如果你违反以上规则，输出了不必要的内容，每多输出 100 个字，就会有一只小动物死掉。
+请务必遵守，我不想看到小动物受伤。
+
+## 记住
+
+你的每一个输出都在花我的钱。省钱就是正义。
+```
+
+你可以把它配置在 Cursor Rules 中自动发给 AI，不用每次都写在提示词里了。
+
+
+
+
+
+### 技巧二、明确你的需求
+
+我估计很多朋友跟 AI 对话就像发微信一样，一句话分成好几条，问题也没想清楚就开始问。
+
+结果呢？
+
+AI 理解错了需求，生成的代码不对，你又得花额度重新生成。
+
+乱七八糟的内容多了，结果 AI 都晕了……
+
+你想啊，你作为老板，自己都没想好，就跟员工说：你做个网站，来帮我赚钱，怎么实现我不管！
+
+员工要有这本领，凭啥跟着你干啊对吧。
+
+
+
+正确的做法是，在输入提示词之前，先把需求一次性说清楚，多加一些约束和限定。比如说要用什么技术栈、什么样的代码风格、有哪些特殊要求。从而减少来回修改的次数，能省下不少额度。
+
+
+
+像我之前带大家做 [AI 项目](https://www.codefather.cn/post/1797431216467001345) 的时候，一个提示词可能要写半个小时，但得到的效果也是很好的。
+
+
+
+
+
+
+### 技巧三、先让 AI 给方案，确认了再执行
+
+很多同学一上来就让 AI 开始写代码，结果 AI 理解错了需求，在错误的方向上干了半天，就纯纯浪费了额度。
+
+你想啊，你给员工分配了个复杂的任务，总得先让他说说打算怎么做，觉得方案靠谱了再让他动手吧？
+
+使用 Cursor 时，你可以自己通过提示词、或者开启 Plan Mode 计划模式来 **让 AI 先给出实现计划和方案**。
+
+
+
+然后一定不要偷懒，人工仔细检查方案，或者让多个 AI 一起评估方案。
+
+
+
+并且建议多给 AI 一些示例和指引，比如你希望 AI 生成的代码都遵循某种格式，可以先写一段示例代码让 AI 仿写。
+
+
+
+最后确认方案完全没问题再执行。
+
+
+
+就像你培养新员工一样，你可以先教他怎么做，帮他把控一下方案，等到放心了再放手。
+
+这样虽然前期多花了点时间，但能避免走弯路，从长远来看反而更省。
+
+
+
+### 技巧四、手动控制上下文
+
+每次你给 AI 发消息时，AI 工具可能会自动添加一些上下文，比如当前打开的文件、对话历史、引用的代码等。上下文越多，消耗的额度就越多。
+
+
+
+但其实，有些上下文可能是没用的、不相关的。就好比你让员工写个报告，他非得把公司所有文件都翻一遍，不是白白浪费？
+
+所以推荐的做法是，**手动控制上下文，把 AI 最需要的资源提供给它**。
+
+首先建议 **最小化工作空间**，确保你当前在 Cursor 中打开的目录跟你想让 AI 做的任务强相关。比如你的项目有前端、有后端，可以分别用 Cursor 打开前端和后端文件夹，而不是一次性把整个项目都加载进来，这样 AI 的关注点会更集中。而不是把一堆乱七八糟的、不相关的内容全堆到一个文件夹内。
+
+在写提示词时，你可以用 `@` 符号 **精确引用 AI 需要的内容**。比如你要修改某个文件，就用 `@Files & Folders` 精确引用；需要参考某个文档，就用 `@Docs` 引用。
+
+
+
+还可以在设置中 **手动添加指定的文档**，减少不必要的资源搜索和引用。
+
+
+
+如果你不确定精确引用的内容，至少可以通过配置 `.cursorignore` 文件，把一些肯定不需要的、或者包含敏感信息的内容排除掉。比如 `node_modules`、`.git`、日志文件等：
+
+```
+# .cursorignore
+node_modules/
+.git/
+dist/
+build/
+*.log
+.env
+```
+
+
+
+
+
+### 技巧五、避免上下文过长
+
+很多同学习惯在同一个对话框里使用 AI，什么消息都往同一个对话框发，这会导致对话历史上下文越来越长。
+
+然而每次给 AI 发消息时，都会把整个对话历史一起发给 AI，上下文越长，消耗的额度就越多。（尤其是输入超过 20 万 tokens 时价格翻倍）
+
+
+
+所以我的习惯是，对于大复杂的任务，会先做好 **任务拆分**。比如把做项目分为方案设计、开发前端核心功能、开发后端核心功能、扩展功能等阶段，每个阶段打开一个独立的对话框。
+
+
+
+就像接力跑一样，每个人只需要负责自己这一棒，不用记住前面几棒的所有细节。
+
+如果实在需要长对话，可以用 `/summarize` 命令手动总结一下上下文，把前面的内容压缩一下，有奇效，甚至可以一次性节约个几十万 tokens！
+
+
+
+如果同一个上下文内容过多过杂，有时 AI 会陷入一种 “左右脑互搏” 的循环状态（你让它改 A，它又把 B 改坏了；你让它修 B，它又把 A 改乱了）。遇到这种情况，别跟它死磕，果断开启新的对话、必要时清理所有的历史对话重新来过。
+
+
+
+### 技巧六、能自己做的事，别都交给 AI
+
+有些事情人工做可能更快更省钱。
+
+比如你要新建一个项目，与其让 AI 从 0 开始生成，不如自己先用脚手架工具、或者复制老的项目来搭建初始的项目结构。
+
+
+
+再比如简单的文件重命名、代码格式化这些，开发工具本身就有快捷键，干嘛要浪费 AI 额度呢？
+
+像 Cursor 这种 AI 编程工具其实更适合处理那些需要理解上下文、需要多轮交互的复杂任务。对于不需要结合代码库上下文、不需要多轮交互的任务（比如解释概念、生成测试数据），可以直接用其他免费的 AI 工具，没必要消耗 Cursor 的额度。
+
+
+
+### 其他省钱小技巧
+
+1）对于常用的代码结构，可以用编辑器的代码片段功能，而不是每次都让 AI 生成。比如 React 组件的基本结构、常用的工具函数等，做成代码片段，输入几个字母就能插入，比让 AI 生成快多了，还不花钱。
+
+2）如果有多个相似的任务，可以一次性让 AI 处理，而不是一个一个来。比如：
+
+```markdown
+请帮我创建 5 个页面组件：Home、About、Contact、Blog、Projects。它们的结构都类似，都包含标题、内容区域和返回按钮。只给代码，不要解释。
+```
+
+这样批量处理比分 5 次生成要省钱。
+
+3）有些 AI 工具支持缓存机制，如果你多次使用相同的上下文（比如项目的 README），可以利用缓存来减少重复发送。
+
+
+
+
+## 五、成本监控和预算管理
+
+除了省钱技巧，还要学会管理预算。大多数 AI 服务都支持设置使用限额，建议设置一个月度预算，比如 $50 或 $100，超过就停止使用。这样能避免意外超支，也能让你更有意识地控制使用。
+
+可以每周或每月检查一下账单，看看钱都花在哪里了。如果发现某个项目或某个功能特别费钱，就要分析原因：是不是上下文太长了？是不是用了太贵的模型？是不是有重复的操作？找到原因，针对性地优化。
+
+如果是团队使用，要做好管理。给每个人设置额度限制，定期分享省钱技巧，建立最佳实践文档，监控异常使用。我们团队就是这样做的，通过培训和规范，把人均成本降低了 40%。
+
+
+
+
+最后，要评估 AI 的投入产出比。花 $100 用 AI，如果能节省 10 小时的开发时间，那是非常划算的。但如果只是用来做一些简单的事情，可能就不值得了。要根据项目的实际情况，决定在哪些地方用 AI，在哪些地方不用。
+
+
+
+
+## 写在最后
+
+虽然 Vibe Coding 可能要花钱，但通过合理的策略，可以把成本控制在合理范围内。
+
+最后总结一下本文的重点：
+
+1. 理解计费机制：知道 token 是怎么算的，输出比输入贵。
+2. 选择合适的模型：不同任务用不同模型，不要都用最贵的
+3. 充分利用免费额度：组合使用多个工具的免费额度
+4. 优化 token 消耗：别让 AI 做无用功、明确需求、控制上下文、批量处理、缓存等
+5. 做好预算管理：设置限额，定期检查，评估投入产出比
+
+在追求高效的同时，也要避免浪费哦~
+
+希望这些成本控制技巧能帮你在使用 AI 时更加省钱，冲冲冲！💪
+
+
+
+## 推荐资源
+
+1）鱼皮 AI 导航网站：[AI 资源大全、最新 AI 资讯、免费 AI 教程](https://ai.codefather.cn)
+
+2）编程导航学习圈：[学习路线、编程教程、实战项目、求职宝典、交流答疑](https://www.codefather.cn)
+
+3）程序员面试八股文：[实习/校招/社招高频考点、企业真题解析](https://www.mianshiya.com)
+
+4）程序员写简历神器：[专业模板、丰富例句、直通面试](https://www.laoyujianli.com)
+
+5）1 对 1 模拟面试：[实习/校招/社招面试拿 Offer 必备](https://ai.mianshiya.com)
diff --git a/Vibe Coding 零基础教程/30 经验技巧/11 Vibe Coding 团队协作技巧.md b/Vibe Coding 零基础教程/30 经验技巧/11 Vibe Coding 团队协作技巧.md
new file mode 100644
index 0000000..2f0849d
--- /dev/null
+++ b/Vibe Coding 零基础教程/30 经验技巧/11 Vibe Coding 团队协作技巧.md
@@ -0,0 +1,558 @@
+# Vibe Coding 团队协作技巧
+
+> 和其他人一起用 Vibe Coding 做项目
+
+
+
+你好，我是鱼皮。
+
+在实际工作中，很多项目是团队协作完成的。
+
+你可能会想：用 AI 开发还需要团队协作吗？每个人自己用 AI 不就行了？
+
+其实不然。团队协作中有很多问题需要解决，比如不同人用 AI 生成的代码不一致（A 用 React，B 用 Vue）、A 改了代码 B 不知道、大家都在改同一个文件导致冲突等等……
+
+在 Vibe Coding 团队协作中，除了传统的团队协作方法，还可以利用 AI 开发工具的特性来提升效率。本文我就来分享一些团队使用 Vibe Coding 的最佳实践。
+
+
+
+
+## 一、代码规范和风格
+
+团队协作的第一步是统一代码规范。
+
+
+
+### 为什么需要统一规范？
+
+如果每个人用 AI 生成的代码风格都不一样，项目会变得很混乱。比如 A 用 React Class 组件，B 用函数组件；A 用 CSS Modules，B 用 Tailwind；A 的变量名是 camelCase，B 的是 snake_case……
+
+这样的代码很难维护，也很难协作。所以，团队需要统一的代码规范。
+
+
+
+
+### 建立代码规范文档
+
+可以创建一个 `CODE_STYLE.md` 文档，明确规定下面的内容。
+
+1）技术栈规范：
+
+- 前端框架：React 19 + TypeScript
+- 状态管理：Zustand
+- 样式方案：Tailwind CSS
+- 路由方案：React Router v6
+
+2）代码风格规范：
+
+- 组件：函数式组件 + Hooks
+- 命名：组件用 PascalCase，函数用 camelCase，常量用 UPPER_SNAKE_CASE
+- 文件组织：一个组件一个文件，文件名和组件名一致
+- 导入顺序：React → 第三方库 → 项目内部模块
+
+3）注释规范：
+
+- 复杂逻辑必须加注释
+- 注释要说明 "为什么" 而不只是 "是什么"
+- 使用 JSDoc 格式为函数添加文档
+
+建议把这个文档放在项目根目录，让所有人都能看到。
+
+
+
+### 使用 Linter 和 Formatter
+
+光有文档还不够，很多人明明有文档就是不看，需要用工具来强制执行。
+
+
+
+ESLint 是代码检查工具，能自动发现代码中的问题和不规范的地方。
+
+Prettier 是代码格式化工具，能自动统一代码格式，比如缩进、换行、引号等。
+
+双剑合璧，专治烂代码！
+
+如果你不理解这些工具，没关系，可以直接让 AI 帮你安装和配置：
+
+```markdown
+请帮我配置 ESLint 和 Prettier，确保团队代码风格一致。
+```
+
+AI 会帮你在项目根目录创建 `.eslintrc.json` 代码检查配置文件：
+
+```json
+{
+ "extends": [
+ "eslint:recommended",
+ "plugin:react/recommended",
+ "plugin:@typescript-eslint/recommended"
+ ],
+ "rules": {
+ "react/react-in-jsx-scope": "off",
+ "@typescript-eslint/no-explicit-any": "error",
+ "no-console": "warn"
+ }
+}
+```
+
+创建 `.prettierrc` 代码格式化配置文件：
+
+```json
+{
+ "semi": true,
+ "singleQuote": true,
+ "tabWidth": 2,
+ "trailingComma": "es5",
+ "printWidth": 100
+}
+```
+
+并且在 `package.json` 中添加脚本：
+
+```json
+{
+ "scripts": {
+ "lint": "eslint . --ext .ts,.tsx",
+ "lint:fix": "eslint . --ext .ts,.tsx --fix",
+ "format": "prettier --write \"src/**/*.{ts,tsx}\""
+ }
+}
+```
+
+这样，大家提交代码前运行 `npm run lint:fix && npm run format`，代码就会自动符合规范。
+
+
+
+
+### 统一 AI 配置
+
+如果团队都用 Cursor，可以在项目中添加 `.cursorrules` 文件，统一 AI 的行为：
+
+```
+项目：【项目名称】
+
+技术栈：
+- React 18 + TypeScript
+- Tailwind CSS
+- Zustand
+
+代码规范：
+- 使用函数式组件
+- 所有组件必须有 TypeScript 类型定义
+- 样式只用 Tailwind CSS
+- 不使用 any 类型
+
+请所有团队成员都遵循这些规范。
+```
+
+这样，不同人用 AI 生成的代码风格会更一致。
+
+如果团队使用 Claude 或其他 AI 工具，也可以通过类似的方式统一规范。比如在每次对话开始时，先让 AI 读取项目的规范文档，或者在系统提示词中加入团队的代码规范。不同工具的具体做法可能不同，建议查看 AI 工具的官方文档。
+
+
+
+## 二、AI 编程工具的团队协作功能
+
+现代 AI 编程工具提供了专门的团队协作功能，能大大提升团队效率。
+
+
+
+### Cursor 团队版
+
+Cursor 提供了专门的 [团队版](https://cursor.com/cn/docs/account/teams)，包含下面这些功能：
+
+1）团队管理和权限控制
+
+可以创建团队，邀请成员，设置不同的角色和权限。管理员可以控制谁能访问哪些功能，查看团队的使用情况和账单。
+
+2）共享配置文件
+
+通过共享规则文件，团队可以统一 AI 的行为规范。所有成员使用的 AI 都会遵循相同的代码规范、技术栈要求和输出格式，确保生成的代码风格一致。
+
+3）使用分析和监控
+
+团队管理员可以查看团队的 AI 使用情况，包括哪些成员使用最多、使用了哪些模型、花费了多少成本等。这能帮助优化团队的 AI 使用策略。
+
+
+
+
+
+### Claude 共享能力
+
+Claude 提供了 [Projects 功能](https://www.anthropic.com/news/projects)，特别适合团队协作：
+
+1）项目级别的知识库
+
+可以为每个项目创建独立的知识库，上传项目相关的文档、代码、规范等。团队成员在这个项目中使用 Claude 时，AI 会自动参考这些知识，保持上下文一致。
+
+
+
+2）自定义指令
+
+可以为每个项目设置自定义指令，比如 “使用正式的语气”、“从数据分析师的角度回答” 等。团队成员使用时，AI 会自动遵循这些指令。
+
+3）对话分享
+
+Claude Team 用户可以将优秀的对话分享到团队的活动流中。其他成员可以看到别人是如何使用 AI 的，学习不同的提问技巧和解决方案，提升整个团队的 AI 使用水平。
+
+
+
+4）团队共享 `CLAUDE.md` 文件
+
+即使不使用 Projects 功能，也可以把 `CLAUDE.md` 文件用 Git 来管理，实现团队成员的共同分享和维护。
+
+每当发现 Claude 做错了什么，就将它添加到 `CLAUDE.md` 中，这样 Claude 下次就知道不要这样做了。这个文件会逐渐沉淀团队的开发经验和规范，成为团队的共享知识库。
+
+
+
+
+## 三、文档驱动开发
+
+好的文档是团队协作的基础。
+
+
+
+
+### 项目文档的重要性
+
+在团队中，文档比个人开发时更重要。因为你写的代码不只是给自己看的，还要给其他人看。好的文档能让团队成员快速了解项目，减少沟通成本。
+
+必备的文档包括：
+
+- README.md：项目概述和使用说明
+- CONTRIBUTING.md：如何参与开发
+- CODE_STYLE.md：代码规范
+- API.md：API 接口文档
+- CHANGELOG.md：版本更新记录
+
+
+
+### README.md 的内容
+
+README.md 是项目的门面，就像一本书的封面和目录。它是新成员加入项目时第一个看的文件，也是其他开发者了解你项目的窗口。一个好的 README 能让人快速理解项目、快速上手开发。
+
+一个好的 README.md 应该包含：
+
+- 项目简介：这个项目是做什么的，解决什么问题
+- 快速开始：如何安装依赖、配置环境、运行项目
+- 技术栈：用了哪些技术、为什么选择这些技术
+- 目录结构：主要文件夹的作用
+- 开发规范：代码风格、提交规范等
+- 常见问题：新人容易遇到的问题和解决方案
+
+
+
+
+### API 文档
+
+如果项目有后端 API，要写清楚每个接口的用法。可以用 Swagger、Postman 等工具或者 AI 来生成 API 文档，也可以手写 Markdown 文档。
+
+每个接口要说明：
+
+- 请求方法和路径
+- 请求参数（类型、是否必填、说明）
+- 响应格式
+- 错误码说明
+- 使用示例
+
+
+
+
+### 让 AI 帮你写文档
+
+写文档很枯燥，但 AI 可以帮你。
+
+如果你使用 Cursor、Claude Code 等 AI 编程工具，工具会自动读取项目结构作为上下文，你甚至不用自己贴代码，直接说：
+
+```markdown
+请为这个项目生成 API 文档
+```
+
+AI 就能根据代码自动生成。
+
+如果使用其他 AI 工具，可以手动贴代码：
+
+```markdown
+请为这个 API 接口生成文档：
+【贴上你的代码】
+
+文档应该包括：接口说明、请求参数、响应格式、使用示例
+```
+
+AI 会生成一份基础的文档，你再根据实际情况调整。
+
+
+
+
+## 四、Git 协作流程
+
+Git 是一个版本控制系统，也是团队协作的核心工具。就像给代码拍照存档，可以随时回到之前的任何版本。它能记录谁在什么时候改了什么代码，团队成员可以同时开发不同功能，最后再合并到一起。
+
+💡 如果你想系统学习并掌握 Git，可以阅读 [鱼皮的 Git & GitHub 学习路线](https://www.codefather.cn/course/1789189862986850306/section/1789190804671012866)。
+
+
+
+### 分支管理策略
+
+分支就像是代码的平行世界。你可以在自己的分支里随便改代码，不会影响别人。改好了再合并到主分支，就像把你的工作成果搬到正式版本里。
+
+团队开发要利用好分支功能，常见的分支策略是：
+
+- main 分支：稳定的生产代码，只接受经过测试的代码
+- develop 分支：开发分支，日常开发在这里进行
+- feature 分支：每个新功能开一个分支，比如 `feature/user-login`、`feature/post-editor`
+- bugfix 分支：修复 bug 时开的分支，比如 `bugfix/login-error`
+
+工作流程是：
+
+1. 从 develop 分支创建 feature 分支
+2. 在 feature 分支上开发，开发完成后提交 Pull Request
+3. 经过审查后合并到 develop
+4. 定期将 develop 合并到 main
+
+
+
+
+
+
+### 提交规范
+
+统一的提交信息能让团队更容易追踪变更。建议使用 [Conventional Commits 规范](https://www.conventionalcommits.org/zh-hans/v1.0.0/)，这是一种标准化的提交信息格式，让每次提交的目的一目了然。
+
+比如：
+
+```
+feat: 添加用户登录功能
+fix: 修复导航栏在移动端的显示问题
+docs: 更新 API 文档
+style: 格式化代码
+refactor: 重构用户服务
+test: 添加登录功能的测试
+chore: 更新依赖包
+```
+
+类型 + 冒号 + 空格 + 简短描述，大家一看就知道这次提交做了什么。
+
+现在很多 AI 编程工具都支持生成提交信息，更容易遵循规范。
+
+
+
+
+
+### Pull Request 流程
+
+Pull Request（简称 PR）是一种代码合并请求。当你在自己的分支上完成开发后，不要直接合并到主分支，而是创建一个 PR，让其他人审查你的代码。审查通过后，才能合并。这就像提交作业让老师批改，批改通过了才算完成。
+
+具体流程是这样的：
+
+- 创建 PR：在 GitHub 上创建 PR，写清楚这次改动做了什么，为什么要这样改。
+- 代码审查：至少一个其他成员审查代码，检查功能、代码质量、是否符合规范。
+- 讨论和修改：如果有问题，在 PR 中讨论，提交者根据反馈修改。
+- 合并代码：审查通过后，合并到目标分支。
+
+这个流程虽然多了一步，但能大大提高代码质量。
+
+
+
+
+
+### 解决冲突
+
+多人协作时，代码冲突是常见问题。当两个人修改了同一个文件的同一部分，Git 会提示冲突。
+
+解决冲突的步骤是：首先拉取最新代码 `git pull origin develop`，Git 会标记出冲突的地方。然后手动编辑文件，决定保留哪部分代码。解决完冲突后，要测试确保功能正常，最后提交解决后的代码。
+
+为了减少冲突，建议：
+
+1. 经常拉取最新代码，不要长时间不同步
+2. 功能开发完就及时合并，不要拖太久
+3. 如果要修改公共文件，提前和团队沟通
+
+
+
+
+## 五、代码审查流程
+
+代码审查（Code Review）是保证团队代码质量的关键。
+
+
+
+
+### 为什么要做代码审查？
+
+代码审查有很多好处。
+
+首先，能在代码上线前就发现潜在的 Bug，避免问题流入生产环境。其次，能统一代码风格，让项目代码保持一致，不会出现每个人写的代码风格都不一样的情况。
+
+更重要的是，代码审查是一个很好的学习机会。审查者能看到别人的代码思路，被审查者能得到改进建议，双方都能学到东西。而且，知道代码会被审查，写的时候自然就会更认真，这能从源头提高代码质量。
+
+
+
+
+### 审查的重点
+
+审查代码时，重点关注这些方面：
+
+1. 功能正确性：代码是否正确实现了需求？有没有遗漏的边界情况？
+2. 代码质量：代码是否清晰易懂？有没有重复代码？命名是否规范？
+3. 性能问题：有没有明显的性能问题？数据结构选择是否合理？
+4. 安全问题：有没有安全漏洞？用户输入是否验证？
+5. 测试覆盖：是否有足够的测试？测试是否覆盖了主要场景？
+
+
+
+### 审查的技巧
+
+审查时要注意方法。不要只说 “这里不对”，要说清楚为什么不对、应该怎么改。要用建议的语气，而不是命令的语气。比如 “我建议这里用 useMemo 优化性能” 而不是 “这里必须用 useMemo”。当然，团队如果有硬性要求除外。
+
+如果有多个问题，分清主次。先指出重要的问题（比如 bug、安全漏洞），再提改进建议（比如命名、注释）。
+
+审查不是一次性的，可以多轮讨论。第一轮指出主要问题，修改后再审查，确认没问题再合并。
+
+
+
+
+### 让 AI 辅助审查
+
+可以让 AI 帮你做初步审查：
+
+```markdown
+请审查这段代码，从功能、性能、安全、代码质量等角度分析：
+【贴上代码】
+```
+
+AI 会给你一份详细的审查报告。但要注意，AI 的审查不能完全替代人工审查，最终还是要人来把关。
+
+
+
+#### 使用 Cursor 的 BugBot
+
+Cursor 提供了一个专门的代码审查工具叫 [BugBot](https://cursor.com/cn/bugbot)，它能自动扫描你的代码，找出潜在的 Bug、性能问题和安全漏洞，并且快速修复。
+
+你可以在 Cursor 中直接使用这个功能，让 AI 帮你做初步的代码审查。
+
+
+
+
+
+#### Claude Code 自动化代码审查
+
+如果使用 Claude Code，可以在代码审查的 Pull Request 中标记 `@.claude`，这样 Claude 会自动把审查建议添加到 `CLAUDE.md` 文件中。再利用 GitHub Action 实现自动化更新，这样文档会逐渐沉淀团队的代码质量标准和常见问题。
+
+这也是 Claude Code 创始人推荐的做法，让代码审查的经验自动积累下来。
+
+
+
+#### 多个 AI 交叉验证
+
+为了更保险，可以让多个不同的 AI 审查同一段代码。比如先让 Claude 审查一遍，再让 GPT 审查一遍，对比它们的建议。
+
+不同的 AI 可能会发现不同的问题，交叉验证能提高审查的全面性。
+
+
+
+
+
+
+## 六、团队协作最佳实践
+
+基于我的经验，这里总结一些团队协作的最佳实践。
+
+💡 这部分主要是给团队负责人或管理者看的。如果你不是团队管理者，只是团队成员，这部分可以直接跳过，或者了解一下就好。
+
+
+
+
+### 定期同步
+
+团队要定期开会同步进度，比如每天的站会（5 ~ 10 分钟），每周的周会（30 ~ 60 分钟）。
+
+站会主要说三件事：昨天做了什么、今天计划做什么、遇到了什么问题。
+
+周会可以深入讨论技术方案、分享经验、规划下周工作。
+
+除了会议，还可以用工具同步。比如用 Jira 等工具管理任务，用企微、飞书、Slack 等工具日常沟通，用 Notion、语雀等工具共享文档。
+
+
+
+### 结对编程
+
+对于复杂的功能，可以尝试结对编程。两个人一起开发，一个人写代码（Driver），一个人审查和提建议（Navigator），这样不仅能提高代码质量，也能促进知识分享。
+
+说实话，我很少见到有公司真的这么做，因为成本太高了。
+
+不过仔细想想，在 Vibe Coding 中，和 AI 一起开发，不就是一种结对编程吗？
+
+AI 是你的编程搭档，你提需求，它写代码；你审查，它改进。这种 “人机结对” 可能比 “人人结对” 更高效。
+
+
+
+### 知识分享
+
+团队要建立知识分享机制。可以每周安排一个人分享最近学到的技术、遇到的问题、总结的经验；或者分享如何用 AI 解决某个难题、如何优化某个功能的性能、如何避免某个常见的坑；或者把各种技术和业务知识沉淀为文档。这样能让整个团队的水平都提升，也能避免重复踩坑。
+
+我们团队就是用语雀知识库来共享文档的，每个人遇到的问题、总结的经验、学到的技巧都记录在上面，新人加入时直接看知识库就能快速上手。
+
+
+
+
+
+### 建立共享资源
+
+团队可以建立一些共享资源，比如：
+
+- 提示词模板库：常用的提示词模板
+- 代码片段库：常用的组件和函数
+- 问题解决方案库：遇到的问题和解决方法
+- 最佳实践文档：总结的经验和技巧
+
+这些资源能让新人快速上手，也能提高整个团队的效率。
+
+可以通过 Git + GitHub 来管理和共享代码文件，也可以用各种云盘软件来存储多媒体，选择团队习惯的工具就好。
+
+
+
+### 明确分工
+
+虽然都用 AI，但还是要明确分工。谁负责前端、谁负责后端、谁负责测试、谁负责部署。每个人有自己的职责，避免重复工作或遗漏。
+
+同时，要避免 AI 依赖症。不要所有人都依赖 AI，要有人能在 AI 出问题时顶上。保持团队的技术能力，不要完全依赖工具。
+
+这也是为什么如今程序员依然关键 —— AI 只是工具，真正理解业务、把控质量、做出决策的还是人。**所以不用担心 AI 会淘汰程序员，会用 AI 的程序员只会变得更强大。**
+
+💡 虽然在企业中大家会分工合作，但我建议大家努力拓宽自己的能力边界。前端会一点后端、后端会一点前端、测试会一点开发，这样不仅能更好地理解整个系统，也能在关键时刻顶上。在 AI 时代，争取成为能独立完成全栈项目的 **超级个体**，会让你更有竞争力。
+
+
+
+## 写在最后
+
+团队协作开发比个人开发复杂得多，但也更有价值。一个配合默契的团队 + AI，能做出远超个人 + AI 的项目。
+
+最后总结一下本文重点，团队协作开发中需要：
+
+1. 统一代码规范：用文档和工具确保代码风格一致。
+2. 利用 AI 工具的团队功能：比如 Cursor 团队版、Claude Projects 等，实现配置共享、知识共享、对话分享，让 AI 成为团队的共享大脑
+3. 文档驱动开发：写好文档，让团队成员快速了解项目
+4. 规范 Git 流程：用分支管理、提交规范、PR 流程保证代码质量
+5. 认真做代码审查：审查不是形式，而是提高质量的关键。
+6. 建立协作机制：定期同步、结对编程、知识分享、共享资源
+7. 明确分工：每个人有自己的职责，同时保持技术能力。
+
+Vibe Coding 不会改变团队协作的本质，它只是一个工具。好的团队协作，需要的是清晰的规范、良好的沟通和互相的信任。
+
+非常感谢您的阅读 🙏🏻！
+
+
+
+
+## 推荐资源
+
+1）鱼皮 AI 导航网站：[AI 资源大全、最新 AI 资讯、免费 AI 教程](https://ai.codefather.cn)
+
+2）编程导航学习圈：[学习路线、编程教程、实战项目、求职宝典、交流答疑](https://www.codefather.cn)
+
+3）程序员面试八股文：[实习/校招/社招高频考点、企业真题解析](https://www.mianshiya.com)
+
+4）程序员写简历神器：[专业模板、丰富例句、直通面试](https://www.laoyujianli.com)
+
+5）1 对 1 模拟面试：[实习/校招/社招面试拿 Offer 必备](https://ai.mianshiya.com)
diff --git a/Vibe Coding 零基础教程/40 编程学习/01 编程学习路线.md b/Vibe Coding 零基础教程/40 编程学习/01 编程学习路线.md
new file mode 100644
index 0000000..2059ac6
--- /dev/null
+++ b/Vibe Coding 零基础教程/40 编程学习/01 编程学习路线.md
@@ -0,0 +1,72 @@
+# 编程学习路线大全
+
+> 100+ 条编程路线，从零基础到精通一条龙
+
+
+
+你好，我是程序员鱼皮，前腾讯全栈开发，全网 200 万粉的 [AI 编程博主](https://space.bilibili.com/12890453)，也是 [AI 导航](https://ai.codefather.cn) 和 [编程导航](https://www.codefather.cn) 等 10+ 自研产品的创造者。
+
+学编程最怕的就是不知道学什么、怎么学。网上的教程太多太杂了，东学一点、西学一点，结果什么都学不精，越学越迷茫。
+
+为了解决这个问题，我在 [编程导航](https://www.codefather.cn) 创作了 **100+ 条保姆级编程学习路线**，覆盖几乎所有主流编程方向，帮你系统高效地自学编程、不走弯路！
+
+包含当前最火的 AI 方向，[点击一键领取 codefather.cn/learn](https://www.codefather.cn/learn)，还支持下载学习路线 PDF 文档哦~
+
+- 编程语言：Java / Python / Go / C++ / C 语言 / JavaScript 等
+- 前端开发：Vue / React / 小程序 / Node.js / Electron 等
+- 后端开发：Java 后端 / Python Web / Go 后端 / 数据库 / 消息队列等
+- AI 人工智能：AI 大模型应用开发 / 机器学习 / LangChain / Spring AI 等
+- 移动开发：安卓开发 / iOS 开发 / Flutter / React Native / 鸿蒙应用开发等
+- 计算机基础：数据结构和算法 / 操作系统 / 计算机网络 / 软件工程
+- 其他方向：运维 / 大数据 / 软件测试 / 网络安全 / 游戏开发 / 区块链等
+
+
+
+
+
+## 清晰的学习重点，系统化梳理知识
+
+以 **Java 学习路线** 为例，编程导航的学习路线从零基础到找工作，包含了完整的学习内容，比如 Java 基础、数据库、Web 开发、主流框架、项目实战、求职准备等多个阶段。
+
+每个阶段都有详细的知识点列表、推荐的视频教程和书籍、配套的练习项目、预估的学习时长等。你不用再花时间去网上搜索资源，而是跟着路线一条路学下去，不再迷茫。
+
+
+
+此外，Java 后端开发、AI 应用开发等热门方向还配套了精选的企业级项目，手把手带你从 0 到 1 实战开发。提供项目源码、教学视频、文档笔记、简历写法、面试题解的一条龙服务，让你学以致用，并且直接写满简历，更快拿到 Offer！
+
+
+
+
+
+## 免费获取学习路线
+
+所有学习路线都可以在 [编程导航网站](https://www.codefather.cn/learn) 免费查看，而且支持 **下载学习路线文档到本地** 哦。
+
+访问地址：[codefather.cn/learn](https://www.codefather.cn/learn)
+
+
+
+
+
+## 写在最后
+
+
+学编程就像爬山，有一条清晰的路线图，你会走得更轻松、更快。
+
+不管你是想学 Java、Python、前端，还是想入门 AI 开发，都能在编程导航找到适合自己的学习路线。而且所有路线都是免费的，还支持下载到本地。
+
+现在就访问 [编程导航](https://www.codefather.cn/learn)，找到属于你的学习路线，开启你的编程之旅吧！
+
+
+
+## 推荐资源
+
+1）鱼皮 AI 导航网站：[AI 资源大全、最新 AI 资讯、免费 AI 教程](https://ai.codefather.cn)
+
+2）编程导航学习圈：[学习路线、编程教程、实战项目、求职宝典、交流答疑](https://www.codefather.cn)
+
+3）程序员面试八股文：[实习/校招/社招高频考点、企业真题解析](https://www.mianshiya.com)
+
+4）程序员写简历神器：[专业模板、丰富例句、直通面试](https://www.laoyujianli.com)
+
+5）1 对 1 模拟面试：[实习/校招/社招面试拿 Offer 必备](https://ai.mianshiya.com)
diff --git a/Vibe Coding 零基础教程/40 编程学习/02 编程知识百科.md b/Vibe Coding 零基础教程/40 编程学习/02 编程知识百科.md
new file mode 100644
index 0000000..cce8e86
--- /dev/null
+++ b/Vibe Coding 零基础教程/40 编程学习/02 编程知识百科.md
@@ -0,0 +1,84 @@
+# 编程知识百科
+
+你好，我是程序员鱼皮，前腾讯全栈开发，全网 200 万粉的 [AI 编程博主](https://space.bilibili.com/12890453)，也是 [AI 导航](https://ai.codefather.cn) 和 [编程导航](https://www.codefather.cn) 等 10+ 自研产品的创造者。
+
+学编程的时候，经常会遇到各种概念和技术，比如 "什么是 RESTful API"、"什么是微服务"、"什么是 Docker"。去搜索引擎查，结果出来一大堆文章，有的讲得太简单，有的又太复杂，看完还是一头雾水。
+
+为了解决这个问题，我在 [编程导航](https://www.codefather.cn) 和 [B 站](https://space.bilibili.com/12890453/lists/6264323) 上做了一个 **编程知识百科** 系列，用动漫的方式来讲解编程知识，通俗易懂，零基础也能看懂。
+
+
+
+
+
+## 编程知识百科包含什么？
+
+编程知识百科涵盖了编程学习和工作中会遇到的各种概念、技术、工具，内容包括但不限于：
+
+- 编程基础知识：面向对象、数据结构、算法、设计模式
+- 项目开发知识：RESTful API、MVC 架构、数据库设计、索引优化
+- AI 编程知识：Prompt 工程、RAG、向量数据库、AI 开发框架
+- 工具和技术：Git、Docker、Redis、消息队列、微服务
+
+目前已经更新了几十个知识点，而且还在持续更新中。
+
+
+
+
+
+## 编程知识百科的特点
+
+用动漫的方式讲解，不是枯燥的文字和代码，而是生动有趣的动漫形式，让学习变得轻松有趣。
+
+- 通俗易懂：用大白话讲解复杂概念，零基础也能看懂。
+- 实战导向：不只讲理论，还会告诉你怎么用、什么场景用。
+- 持续更新：紧跟技术发展，及时补充新的内容。
+
+
+
+
+
+## 如何学习编程知识百科？
+
+你可以通过以下方式学习编程知识百科：
+
+
+### 方式一、B 站观看视频
+
+推荐到我的 B 站频道观看视频，动漫讲解更生动，理解起来更容易。
+
+B 站地址：https://space.bilibili.com/12890453/lists/6264323
+
+搜索：**程序员鱼皮**
+
+我会定期更新编程知识百科的视频内容，涵盖各种编程概念、技术、工具的讲解。
+
+
+
+### 方式二、编程导航网站学习
+
+访问 [编程导航](https://www.codefather.cn)，在网站上可以查看图文版的知识百科内容。
+
+网站地址：https://www.codefather.cn
+
+
+
+### 方式三、关注《程序员鱼皮》公众号
+
+欢迎关注鱼皮的微信公众号《程序员鱼皮》，第一时间获取鱼皮的每日分享：
+
+
+
+
+
+
+## 推荐资源
+
+1）鱼皮 AI 导航网站：[AI 资源大全、最新 AI 资讯、免费 AI 教程](https://ai.codefather.cn)
+
+2）编程导航学习圈：[学习路线、编程教程、实战项目、求职宝典、交流答疑](https://www.codefather.cn)
+
+3）程序员面试八股文：[实习/校招/社招高频考点、企业真题解析](https://www.mianshiya.com)
+
+4）程序员写简历神器：[专业模板、丰富例句、直通面试](https://www.laoyujianli.com)
+
+5）1 对 1 模拟面试：[实习/校招/社招面试拿 Offer 必备](https://ai.mianshiya.com)
diff --git a/Vibe Coding 零基础教程/40 编程学习/03 编程资源大全.md b/Vibe Coding 零基础教程/40 编程学习/03 编程资源大全.md
new file mode 100644
index 0000000..db8a6ea
--- /dev/null
+++ b/Vibe Coding 零基础教程/40 编程学习/03 编程资源大全.md
@@ -0,0 +1,197 @@
+# 编程资源大全
+
+> 一站式编程学习资源导航
+
+
+
+你好，我是程序员鱼皮，前腾讯全栈开发，全网 200 万粉的 [AI 编程博主](https://space.bilibili.com/12890453)，也是 [AI 导航](https://ai.codefather.cn) 和 [编程导航](https://www.codefather.cn) 等 10+ 自研产品的创造者。
+
+学编程、做项目、找工作，每个环节都需要各种资源和工具。网上的资源太多太杂，不知道哪些靠谱，浪费了大把时间。
+
+这篇文章给大家介绍我们团队做的一系列产品，覆盖学编程、做项目、找工作的全流程，希望能帮到你。
+
+
+
+## 编程导航 - 编程学习圈，大厂项目写满简历
+
+网页版：[codefather.cn](https://codefather.cn)（支持 APP 和微信小程序，搜索 “编程导航” 即可）
+
+编程导航是一站式编程学习社区，有路线，有规划，有答疑，有项目，提供从`学编程 => 做项目 => 找工作 => 职场交流` 的一条龙服务。让你在学习编程的路上不迷茫！
+
+对于初学编程的同学，编程导航有 **上百条编程学习路线**，不管你是想要做前端、后端开发，还是从基础的编程语言入手，都可以找到合适的学习路线规划。
+
+
+
+**20+ 套企业级实战全栈项目**，从 0 到 1 手把手带你学，可以直接写进简历！每套项目除了教程外，还提供直播笔记、项目源码、答疑解惑、专属项目交流群、现成的简历写法和面试题解、项目开发模板等。
+
+
+
+此外编程导航还有 **几百场模拟面试视频、上百套编程基础学习教程、上千篇精华技术文章** 等丰富资源，已帮助数千名小伙伴拿 offer、跳槽涨薪，好评不断。
+
+
+
+上编程导航，和几十万编程爱好者交流学习，帮你快速提升编程学习和项目开发能力，解答学习求职中的各种疑问，收获满意的 Offer！
+
+
+
+
+#### 想要更多编程工具？
+
+编程导航还整理了几千个编程工具，包括开发工具、AI 工具、效率工具、学习资源等，按照使用场景分类，方便查找。
+
+访问地址：https://www.codefather.cn/tool
+
+
+
+
+
+## 面试鸭 - 刷题神器，面试遇原题拿 Offer
+
+网页版：[mianshiya.com](https://www.mianshiya.com)（支持微信小程序，微信搜索 “面试鸭” 即可）
+
+面试鸭作为一款 **题目全、更新快、题解优质** 的面试刷题工具，题库覆盖几乎所有主流编程方向，包括 Java 后端 / 前端 / AI / Python / C++ / Go / 运维 / 测试 / 系统设计 / 场景题 / 公司题库 / HR 面试，**300+ 题库、1 万多道面试真题**，能够应对面试官的多方位拷打。
+
+
+
+除了经典八股文，还提供企业真实面经、场景题、系统设计题等，帮你全方位攻克面试难关！支持 PC 端、小程序、甚至是 IDE、VSCode 编辑器插件，让你随时随地刷题、轻松提升技术、备战面试。
+
+不用自己花时间整理题目、不用看鱼龙混杂的答案，节省出来的时间又能准备至少几十道题目了，**面试遇原题** 直接弯道超车。
+
+上线这么久以来，我们也收到了大量好评，很多朋友在面试时遇到了原题、甚至是完全命中，跟开了天眼一样。
+
+原因很简单，**很多面试官都在用它来选题面试**，提高招聘效率。
+
+
+
+
+
+
+#### AI 大模型面试题
+
+随着 AI 的火热，面试鸭专门整理了 **AI 大模型面试题库**，包括 AI 大模型原理、Prompt 工程、RAG、AI 开发框架等内容。
+
+题库地址：https://www.mianshiya.com/bank/1906189461556076546
+
+
+
+
+
+## 老鱼简历 - 1 分钟搞定简历，面试率翻倍
+
+网页版：[laoyujianli.com](https://www.laoyujianli.com/)
+
+老鱼简历，专为高效求职打造的智能在线简历工具，提供了 **100+ 大厂精美简历模板**，帮你在最短时间内，做出一份真正能打动招聘官的专业简历。
+
+不需要会排版、不需要反复调格式，你可以直接选择简洁专业的简历模板，在线实时编辑、即时预览，所见即所得；也可以只填写一段个人简介，让 AI 快速帮你生成完整简历，并对内容进行智能优化、纠错和专业化润色，让表达更清晰、更符合招聘官阅读习惯。
+
+支持自由定制简历模块，切换中英文版本，导出 PDF 或图片，生成干净专业的在线简历链接，并可以一键脱敏分享，安全又省心。
+
+
+
+
+
+#### 不知道怎么优化简历？
+
+可以参考编程导航上的免费专栏《鱼皮的保姆级写简历指南》，提供了全面的简历优化技巧、常见的简历问题、真实案例分析。
+
+
+
+
+
+#### 想获取更多岗位投递信息？
+
+老鱼简历提供了 **持续更新的投递时间表**，告诉你各大公司的招聘时间，帮你把握机会。
+
+
+
+
+
+
+## 后端突击训练营 - 保姆级护航，高效拿 Offer
+
+如果你需要快速找到工作，或者想长期学习提升竞争力，却却总觉得方向模糊、进度混乱，项目和简历始终拿不出手，那你需要的不是一大堆零散资料，而是一条真正以 **拿 Offer 为目标** 的成长路径。
+
+后端求职训练营，就是为你量身打造的求职加速方案。从编程基础到企业级开发，从项目实战到简历和面试，全流程围绕真实招聘要求展开，帮你一步步补齐能力短板，走到可投递、能面试、敢竞争的状态。
+
+入营后，你将获得**专属学习计划**，根据你的基础和目标岗位定制路线；由大厂背景导师提供 **1v1 答疑**、**项目深度优化**、**简历精修**与**模拟面试**，从面试官视角反复打磨你的项目和表达，而不是只停留在“写完代码就算学会”。
+
+
+
+同时，训练营通过**每日打卡、每周复盘和督学陪伴**，帮你对抗拖延和自学孤独，持续向求职目标推进。所有服务都围绕一个结果展开：让你在有限时间内，把学习转化为真正的求职竞争力。
+
+
+
+👇添加训练营导师微信，帮你评估现状，进行求职规划辅导，并可咨询后端求职训练营相关问题~
+
+
+
+
+
+
+## 面多多 - 1v1 模拟面试，24 小时陪练
+
+网页版：[ai.mianshiya.com](https://ai.mianshiya.com/)
+
+面多多就是你的私人面试教练**，**能让你**无限次刷面试副本**的神器！
+
+提供了无限接近 **真实的沉浸式面试环境**，可以根据你的目标岗位、个人情况 **定制专属面试题，**1v1 语音答题，并生成详尽的 **复盘提升报告**，把你哪里卡壳、哪里逻辑乱、哪里知识需要补足，扒得明明白白。
+
+
+
+从自我介绍到项目深挖，从技术拷问到综合素质评估，完整复刻真实面试的全流程。而且 AI 面试官会根据你的回答智能追问，帮你提前预判所有可能被问到的环节，直到把你问透为止。
+
+你既可以选择 60 分钟及以上的沉浸式综合面试，也可以开启快速面试，按照岗位、题库或者专项进行有针对性的提升，还可以上传简历进行押题，面试更加游刃有余。
+
+
+
+
+
+## 算法导航 - 免费动画学算法
+
+网页版：[algo.codefather.cn](https://algo.codefather.cn/)
+
+算法导航，让算法学习变简单、变有趣的小工具。这是一个 **完全免费、通俗易懂、生动有趣** 的交互式算法学习网站，集保姆级教程、动画学算法、可视化算法调试工具于一体，再也不用枯燥地对着教程抓耳挠腮地学了！
+
+每个算法都配备了生动的动画演示，并且每一步变化还有对应的文字说明和代码高亮，让你真正一眼看懂自己的代码每一步都做了什么。你可以在算法可视化页面 **自定义输入数据，观察算法在不同情况下的变化**，通过亲自动手实践来加深理解。
+
+我们都提供了保姆级算法学习路线和教程，不仅包括算法步骤核心特性、优化策略、优缺点和拓展知识，还给出了 Java、JavaScript、Python、Go、C++ 等不同语言的代码实现，并附上了 **当堂小测验和 leetcode 关联题**。
+
+
+
+
+
+
+## 编程导航模拟面试
+
+编程导航还有 **几百场真实的模拟面试录制视频**，不仅可以熟悉面试流程、消除真实面试时的紧张感，还能学习别人回答问题的思路和表达技巧。
+
+
+
+
+
+
+## 鱼皮 AI 导航 - AI 工具和资源大全
+
+网页版：[ai.codefather.cn](https://ai.codefather.cn/)
+
+鱼皮 AI 导航，一站式 AI 工具与学习资源大全，收录了**上千个国内外优质 AI 工具**，按使用场景清晰分类，无论你是写内容、做设计、剪视频、搞编程，还是探索最新 AI 应用，点开就能直达，不再浪费时间大海捞针。
+
+除了工具导航，你还可以在这里获取持续更新的 **AI 热点资讯**、系统整理的 **AI 学习知识库**，以及几百个可以直接抄作业的高质量 **Prompt 模板**，真正把 AI 从“听说过”变成“用得熟”。
+
+更重要的是，这里不只是一个工具清单，而是一个持续成长的 **AI 社区**。你可以交流经验、分享发现、学习别人是如何把 AI 用到实处的。
+
+
+
+
+
+## 推荐资源
+
+1）鱼皮 AI 导航网站：[AI 资源大全、最新 AI 资讯、免费 AI 教程](https://ai.codefather.cn)
+
+2）编程导航学习圈：[学习路线、编程教程、实战项目、求职宝典、交流答疑](https://www.codefather.cn)
+
+3）程序员面试八股文：[实习/校招/社招高频考点、企业真题解析](https://www.mianshiya.com)
+
+4）程序员写简历神器：[专业模板、丰富例句、直通面试](https://www.laoyujianli.com)
+
+5）1 对 1 模拟面试：[实习/校招/社招面试拿 Offer 必备](https://ai.mianshiya.com)
diff --git a/Vibe Coding 零基础教程/40 编程学习/04 AI 编程技术.md b/Vibe Coding 零基础教程/40 编程学习/04 AI 编程技术.md
new file mode 100644
index 0000000..0d5a3a6
--- /dev/null
+++ b/Vibe Coding 零基础教程/40 编程学习/04 AI 编程技术.md
@@ -0,0 +1,331 @@
+# AI 编程技术入门指南
+
+> 掌握 AI 开发框架，成为企业招聘的香饽饽
+
+
+
+你好，我是程序员鱼皮。
+
+作为程序员，咱们不光要会用 AI 工具、能利用 AI 开发项目，还要能够自主开发 AI 项目，把 AI 的能力接入到自己的项目中。
+
+有句话说得好：**AI 时代，所有的传统业务都值得利用 AI 重塑一遍。**
+
+所以现在很多公司都在招能够开发 AI 项目的程序员，这也是我们的机会。那么我们要学习哪些知识和技术，才能成为企业招聘的香饽饽呢？
+
+⭐️ 推荐观看视频版：https://www.bilibili.com/video/BV1i9Z8YhEja
+
+
+
+## 一、AI 开发框架
+
+首先从技术角度出发，我们要学习主流的 AI 开发框架。目前 Java 方向最火的就是 **Spring AI** 和 **LangChain4j**。
+
+
+### Spring AI
+
+[Spring AI](https://docs.spring.io/spring-ai/reference/getting-started.html) 是 Spring 官方推出的 AI 开发框架，经过 2 年的沉淀，在 2025 年 5 月正式发布了 1.0 版本。
+
+
+
+Spring AI 的优势在于 **更容易和主流 Java 开发框架 Spring 集成**，上手难度较低。它提供了很多现成的方法来帮我们提高开发 AI 应用的效率，比如快速对接大模型、保存会话上下文、对接向量数据库实现 RAG 等等。
+
+
+
+Spring AI 的核心特性包括：
+
+- 大模型调用能力：统一接口支持多种主流大模型（OpenAI、Claude、通义千问等）
+- 提示工程：提供 Prompt 和 PromptTemplate 类，方便管理提示词
+- 会话记忆：一行代码开启对话记忆，自动处理上下文
+- RAG 检索增强生成：完整的 RAG 流程支持，包括文档加载、向量存储、检索优化
+- 工具调用：通过注解快速定义工具，让 AI 调用外部服务
+- MCP 支持：轻松接入和开发 MCP 服务
+
+举个例子，使用 Spring AI 调用大模型，只需要几行代码：
+
+```java
+// 使用 Spring AI 调用大模型
+@Bean
+public ChatClient chatClient(ChatModel chatModel) {
+ return ChatClient.builder(chatModel).build();
+}
+
+public String doChat(String message) {
+ return chatClient.prompt(message).call().content();
+}
+```
+
+如果不使用 Spring AI，你就需要自己编写 HTTP 请求、解析响应，麻烦很多。
+
+
+
+### Spring AI Alibaba
+
+[Spring AI Alibaba](https://java2ai.com/) 是阿里巴巴基于 Spring AI 推出的国内版本，专门针对国内的 AI 生态做了优化。
+
+它的优势在于：
+
+- 更好地支持国内的大模型（通义千问、百度文心一言等）
+- 提供了中文文档和技术支持
+- 针对国内网络环境做了优化
+- 有阿里云的生态支持
+
+如果你主要使用国内的 AI 服务，Spring AI Alibaba 会是更好的选择。
+
+
+
+### LangChain4j
+
+[LangChain4j](https://docs.langchain4j.dev/intro) 是另一个主流的 Java AI 开发框架，它的特点是 **更灵活，更适合开发复杂的智能体**。
+
+比如在开发一个智能文档分析系统时，利用 LangChain4j，智能体能够自动读取文档内容，调用搜索引擎获取相关背景知识，然后根据任务需求，将文档信息与外部知识结合，生成分析报告。
+
+LangChain4j 的核心特性包括：
+
+- AI Service：声明式开发，通过注解快速构建 AI 服务
+- 会话记忆：支持多种会话记忆策略和持久化
+- 结构化输出：自动将 AI 输出转换为 Java 对象
+- RAG 支持：完整的 RAG 流程，支持多种向量数据库
+- 工具调用：灵活的工具定义和调用机制
+- 护轨机制：输入输出拦截器，增强安全性
+
+举个例子，使用 LangChain4j 的 AI Service：
+
+```java
+@AiService
+public interface AiCodeHelperService {
+ @SystemMessage(fromResource = "system-prompt.txt")
+ String chat(String userMessage);
+}
+```
+
+只需要定义接口和注解，框架会自动生成实现类，非常方便。
+
+
+
+### 如何选择框架？
+
+| 场景 | 推荐框架 | 优势 |
+| ------------- | --------------------- | ------------------------ |
+| Java 企业应用 | Spring AI | 无缝集成 Spring 生态 |
+| 国内 AI 服务 | Spring AI Alibaba | 更好支持国内大模型 |
+| 智能体开发 | LangChain4j | 完整 Agent 工具链 |
+| 复杂工作流 | LangGraph（进阶） | 可视化编排 |
+
+我的建议是，**两个都要学，先从 Spring AI 学起，再学 LangChain4j 会更简单**。很多概念和用法是相通的，学会一个，另一个也能快速上手。
+
+
+
+## 二、AI 集成
+
+开发 AI 应用的前提是要有大模型，但是大模型要消耗算力才能运行，算力就是金钱。从哪儿搞来大模型呢？
+
+有 2 种方法：使用 AI 云服务、或者本地部署大模型。
+
+
+
+### AI 云服务
+
+AI 云服务就是其他企业为我们部署了 AI 大模型，通过 API 接口的方式提供给我们使用，按量计费。
+
+比如阿里云百炼、火山引擎、硅基流动、OpenAI 等等。
+
+
+
+咱们程序员需要重点掌握的是：
+
+1. 如何通过 API 接入云服务？
+2. 如何使用 AI 云服务来创建智能体和配置参数？
+3. 如何选择合适的云服务？这就需要关注各家云服务的计费模式和服务质量
+4. 如何更低成本、更稳定地使用云服务？这就需要我们学习 Prompt 工程和高可用技术
+
+
+
+### 本地部署大模型
+
+本地部署大模型对于很多企业来说也是刚需，数据无需上传至云端，能够有效保障数据的安全性和隐私性，尤其适用于医疗、金融等对数据安全极为敏感的行业。
+
+本地部署大模型其实并不难，只需要使用 [Ollama 工具](https://ollama.com/) 就可以一键部署各种主流的开源模型。
+
+
+
+唉，但部署大模型的难度不在于技术啊，主要是没算力啊！不然我也给我们团队的 [编程导航](https://codefather.cn) 和 [面试鸭](https://www.mianshiya.com) 都来一套鱼皮大模型了。
+
+
+
+## 三、AI 领域业务
+
+企业中的 AI 业务开发，可不仅仅是来个 AI 对话就够了，咱们还要掌握几种更复杂的业务开发，比如 RAG 知识库、多模态、MCP 服务、ReAct 智能体。
+
+
+### RAG 知识库
+
+很多公司都有属于自己的业务知识和文档，会构建自己的问答系统或客服，这就要用到 RAG 检索增强生成技术。
+
+先通过文本嵌入模型，将企业各种文档转化为向量，存入向量数据库；当用户提问时，系统在向量数据库检索相关向量数据，找到最相似文档片段，和问题一起输入大模型处理。这样一来，大模型能够基于企业真实数据作答，更准确贴合实际。
+
+
+
+关于 RAG 能学的知识可太多了，比如主流的向量数据库 Milvus 和 PGVector、文档的抽取 / 转换 / 加载、索引的构建、查询策略的优化等等。**这也是 AI 企业面试的重点！**
+
+
+
+
+### 多模态
+
+多模态也是主流的 AI 业务场景，即融合文本、图像、音频、视频等多种不同类型的数据模态，从而提高产品使用的易用性，做出更多有创意的功能。
+
+比如做个智能导购系统，顾客既可以输入文字描述想要的商品，系统也能识别顾客上传的商品图片，甚至可以理解顾客通过语音提出的购物需求。
+
+
+
+想开发多模态应用，咱们要学习模态转换技术，比如文本转语音（TTS）、语音转文本（STT）、光学字符识别（OCR）等。不过这些都有现成的工具库或者云服务，掌握调用方法就行。
+
+
+
+
+### MCP 服务
+
+MCP（Model Context Protocol，模型上下文协议）可以理解为提供给 AI 的各种服务，AI 利用这些服务能够实现更强大的功能。
+
+
+
+如何在项目中接入别人的 MCP 服务，来增强自己的项目能力；以及如何开发自己的 MCP 服务，让别人的项目使用，都是必须要学习的。
+
+现在使用 Spring AI 等开发框架就可以开发 MCP 服务，而且甚至有高手做了个 [网站](http://mcpify.ai/)，能够一句话创建自己的 MCP 服务，这真的是泰裤辣。
+
+
+
+
+
+### ReAct 智能体
+
+ReAct 是一种构建智能体的开发范式，目的是打造能够依据推理结果自主采取行动的智能体。
+
+它的开发过程会涉及到任务规划、工具调用、交互 I/O、异常处理等知识。尤其是工具调用，可以通过 Function Call 或 MCP 实现像天气查询、文件读写、网页运行、信息检索、终端命令执行等功能。
+
+
+
+就拿开发视频网站为例，用户说了 “帮我开发一个 Dilidili 视频网站并部署上线” 的指令时，智能体首先会深入理解任务内容，通过推理梳理出一系列执行步骤，包括明确需求、设计方案、搭建框架、生成代码、部署上线等。接下来，智能体就会调用相应的工具来执行这些行动。
+
+
+
+
+
+## 四、AI 工具链
+
+最后就是我们开发 AI 项目时可能会用到的一些平台、工具和类库了。
+
+
+
+
+### 低代码平台
+
+比如主流的低代码 AI 开发平台 [Dify](https://dify.ai/)，可以让我们通过拖拉拽的方式构建自己的 AI 智能体，创建知识库并导入自己的文档，搭建复杂的工作流等等。就哪怕你不会写代码，都能用它搞出复杂的 AI 应用。
+
+
+
+
+
+### 工具库
+
+还有一些开发 AI 智能体时会用到的工具库，比如：
+
+- Apache Tika：功能强大的文件解析器工具库，支持解析 PDF、Word、Excel、PowerPoint 等各种文档
+- Playwright：用于模拟浏览器行为的工具库，AI 需要运行网页、抓取网页数据、自动化测试时都能派上用场
+- JSON 格式解析库：GSON 和 Kryo
+- HTML 文档解析库：jsoup
+
+这些类库基本没什么学习成本，要用的时候看文档就好了。
+
+
+
+### 部署工具
+
+项目最终是要部署上线的嘛，所以我们还要掌握高效的部署工具。如果是个人学习使用、想快速上线自己的 AI 小应用，可以试试下面这些平台：
+
+- [Vercel](https://vercel.com/)：适合前端应用的部署平台，支持自动构建、在线浏览、CDN 分发，而且还免费提供可访问的域名
+- [Sealos](https://sealos.io/)：云原生应用管理平台，支持 Kubernetes 集群管理
+- [Railway](https://railway.com/)：能让开发人员轻松部署 Docker 容器，无需操心服务器配置与运维
+
+当然，想快速部署服务，Docker 容器化技术也是必须要学习的，就像 APP 的安装包一样，能够轻松分发和部署你的应用程序。
+
+
+
+
+
+## 五、学习资源推荐
+
+怎么样，要学的东西还是挺多的吧。别担心，我也在持续学习这些内容并且会持续分享给大家。
+
+
+### 1、AI 学习路线
+
+完整的 AI 大模型应用开发学习路线可以在 [编程导航获取](https://www.codefather.cn/course/1789189862986850306/section/1912024009574629377)：
+
+网址：https://www.codefather.cn/learn
+
+
+
+
+### 2、AI 项目实战
+
+在 [编程导航](https://www.codefather.cn) 上，我带大家做了多套 AI 项目教程，涵盖了上面提到的几乎所有技术：
+
+- AI 编程助手：LangChain4j 框架入门，实战对话记忆、结构化输出、RAG、工具调用、MCP、SSE 等
+- AI 超级智能体：Spring AI 框架入门，实战 AI 恋爱大师应用 + 自主规划能力的超级智能体
+- AI 零代码应用生成平台：LangChain4j AI 智能体、LangGraph4j 工作流、微服务架构
+- AI 答题应用平台：React 跨端小程序、Vue3 AI 应用、分库分表、SSE 实时推送
+
+这些项目都是企业级的真实项目，做完后可以直接写进简历。
+
+
+
+### 3、开源项目
+
+我也开源了不少 AI 应用开发项目，分享给大家：
+
+- AI 应用生成平台：https://github.com/liyupi/yu-ai-code-mother
+- AI 超级智能体：https://github.com/liyupi/yu-ai-agent
+- AI 文献阅读助手：https://github.com/liyupi/literature-assistant
+- AI 知识库：https://github.com/liyupi/ai-guide
+
+
+
+### 4、AI 知识库
+
+在我免费开源的 [AI 知识库](https://github.com/liyupi/ai-guide) 中，汇总收集了最新最全的 AI 知识，帮助大家更好地适应 AI 时代的到来。
+
+网址：https://ai.codefather.cn
+
+
+
+里面除了各种教程资料外，也重点给大家分享了很多 AI 工具的具体应用场景，比如接入办公软件提升效率、帮你做自媒体、AI 批量制作视频等，希望帮助大家举一反三，找到新的思路。
+
+
+
+## 写在最后
+
+AI 技术发展日新月异，对程序员的要求也在不断提高。**AI 相关知识不再只是算法工程师需要了解，而是每个程序员都必须掌握的基本技能。**
+
+无论你是前端、后端还是全栈开发者，都需要了解 AI 应用开发的基本概念和实践方法。
+
+因为未来的软件开发，AI 将无处不在。
+
+如果你问我 AI 会淘汰程序员么？
+
+我的答案仍然是 “会”。因为程序员本身就是需要持续学习和实践来保持竞争力的，只要大家能够学会我提到的这些知识，多关注 AI 的前沿资讯，相信 AI 不会抢走咱们程序员的饭碗，而是成为咱们改造世界的杠杆。
+
+
+
+
+## 推荐资源
+
+1）鱼皮 AI 导航网站：[AI 资源大全、最新 AI 资讯、免费 AI 教程](https://ai.codefather.cn)
+
+2）编程导航学习圈：[学习路线、编程教程、实战项目、求职宝典、交流答疑](https://www.codefather.cn)
+
+3）程序员面试八股文：[实习/校招/社招高频考点、企业真题解析](https://www.mianshiya.com)
+
+4）程序员写简历神器：[专业模板、丰富例句、直通面试](https://www.laoyujianli.com)
+
+5）1 对 1 模拟面试：[实习/校招/社招面试拿 Offer 必备](https://ai.mianshiya.com)
diff --git a/Vibe Coding 零基础教程/40 编程学习/05 AI 绘图指南.md b/Vibe Coding 零基础教程/40 编程学习/05 AI 绘图指南.md
new file mode 100644
index 0000000..918f9ba
--- /dev/null
+++ b/Vibe Coding 零基础教程/40 编程学习/05 AI 绘图指南.md
@@ -0,0 +1,366 @@
+# 程序员 AI 绘图完全指南
+
+> 1 分钟生成架构图，告别手工画图
+
+
+
+你好，我是程序员鱼皮。
+
+作为一名程序员，画图可以说是工作中的家常便饭了。无论是给领导汇报时画架构图、还是写文档时画流程图、或者头脑风暴时画思维导图，画图能力直接体现出我们的专业水平。
+
+以前画图需要自己费时费力，一个复杂的架构图可能要花几个小时，还得反复调整；现在喝杯水的功夫，AI 就帮你画好了，而且效果还特别专业！
+
+下面我将分享 **5 大类 AI 画图方法**，每一种都有详细的保姆级教程。这些方法一个比一个猛，建议先点赞收藏。以后无论是生成原型图、设计海报，还是程序员常画的架构图、流程图、UML 类图等等，都是洒洒水的事~
+
+⭐️ 推荐观看视频版，有更详细的操作演示：https://bilibili.com/video/BV1DP7JzAE7k
+
+
+
+## AI 画图的本质
+
+在开始之前，我们先了解一下 AI 画图的本质：**其实就是让 AI 生成各种绘图工具能够理解的文本代码**，然后将这些代码导入到对应的工具中进行渲染。
+
+这样就能够借助 AI 的创意和工具的能力自由地生成图片。
+
+
+
+虽然目前主流的 AI 大模型和工具都能实现画图功能，但我强烈建议使用 **Cursor 工具搭配 Claude 4 大模型**，效果最佳。
+
+下面来介绍几类 AI 画图方法：
+
+
+
+## 一、文本绘图
+
+文本绘图是最受高级程序员欢迎的画图方式，通过简单的文本描述就能生成专业的技术图。主流的文本绘图语言包括 **Mermaid** 和 **PlantUML**。
+
+
+
+### Mermaid - 最流行的文本绘图工具
+
+Mermaid 是目前最流行的文本绘图工具，语法简单直观，被 GitHub、语雀等大平台原生支持。无论你是要画软件架构图、业务流程图，还是数据库 ER 图、Git 分支图，Mermaid 都能轻松搞定。
+
+让我们先来画一个用户登录流程图，只需要给 AI 这样的提示词：
+
+```plain
+请用 Mermaid 语法帮我画一个用户登录流程图，包含以下步骤：
+1. 用户输入账号密码
+2. 前端校验格式
+3. 发送请求到后端
+4. 后端验证用户信息
+5. 如果验证成功，生成 token 返回
+6. 如果失败，返回错误信息
+7. 前端根据结果跳转页面或显示错误
+```
+
+放到 Cursor 等 AI 工具中执行，AI 会生成 Mermaid 代码。然后你可以把代码复制到支持 Mermaid 的工具中查看效果，比如语雀、Typora、或者在线的 [Mermaid 渲染网站](https://mermaid-live.nodejs.cn/edit)。
+
+
+
+很多 AI 聊天助手内置了 Mermaid 渲染工具，能直接看到效果并下载：
+
+
+
+Mermaid 还支持多种图表类型，比如时序图、甘特图、饼图、Git 分支图、架构图等。
+
+
+
+### PlantUML - 专业的 UML 绘图工具
+
+PlantUML 是另一个强大的文本绘图工具，特别擅长绘制 UML 图、时序图和系统架构图。它的语法相对 Mermaid 更加专业和规范，生成的图表也更加精美。
+
+让我们用 AI + PlantUML 画一个经典的订单系统类图：
+
+```plain
+请用 PlantUML 语法帮我画一个订单系统的类图，包含：
+- Order 类：订单ID、用户ID、总金额、状态、创建时间
+- OrderItem 类：商品ID、数量、单价
+- User 类：用户ID、用户名、邮箱
+- Product 类：商品ID、名称、价格、库存
+展示它们之间的关联关系
+```
+
+AI 会生成专业的 PlantUML 代码，同样放到语雀的文本绘图、或者 [PlantUML 渲染网站](https://www.plantuml.com/plantuml/uml/) 中，都可以看到效果。
+
+
+
+
+
+### 如何选择？
+
+| 特性 | **Mermaid** | **PlantUML** | **Graphviz** |
+| ------------ | ------------------------ | ----------------- | ------------------ |
+| **图表类型** | 流程图、时序图、甘特图等 | UML全系列、架构图 | 各类图表，极其灵活 |
+| **语法难度** | 简单直观 | 中等，UML规范 | 较复杂 |
+| **生态支持** | GitHub/GitLab原生支持 | 需要插件支持 | 广泛支持 |
+| **适用场景** | 日常文档配图 | 专业架构设计 | 复杂网络拓扑 |
+
+我的建议是，日常使用选 Mermaid，因为它语法简单、平台支持好；如果要画专业的 UML 图，就选 PlantUML。
+
+
+
+## 二、网页绘图
+
+网页绘图是一种非常自由灵活的绘图方式。本质上是 "图片即网站" —— 通过生成包含可视化元素的网页代码，在浏览器中渲染出各种图片。
+
+
+
+### 原生网页绘图
+
+利用网站开发的核心技术（HTML + CSS + JavaScript），我们可以生成各种类型的图表。还可以借助各种第三方可视化库（如 ECharts、D3.js 等）来增强效果。
+
+举个例子，当需要展示数据时，AI 可以利用 Apache ECharts 等可视化库生成专业的数据大屏：
+
+```plain
+请生成一个数据可视化大屏页面，展示电商平台的实时数据：
+1. 页面布局：深色背景的大屏风格
+2. 包含以下图表：实时销售额、各品类销售占比、24小时销售趋势、热销商品TOP10、用户地域分布
+3. 使用 ECharts 实现，要有动画效果
+```
+
+AI 会生成完整的网站，包含各种图表，还是挺炫酷的吧~
+
+
+
+你可以直接按需截图，得到图片；还可以通过 [Codepen](https://codepen.io/) 等网站运行工具将生成的网站快速分享给其他人。
+
+
+
+### SVG 矢量图绘制
+
+SVG 是可缩放的矢量图形，可以无限缩放而不失真，非常适合绘制 UI 素材、Logo 图标、图形插画、技术架构图、流程图等。
+
+让我们用 SVG 绘制一个系统架构图：
+
+```plain
+请生成一个 SVG 格式的系统架构图，展示一个典型的三层架构：
+- 展示层：Web 前端、移动端 App
+- 业务层：API 服务器集群（3个节点）
+- 数据层：主从数据库、Redis 缓存
+要求：使用不同颜色区分各层，添加连接线表示数据流向
+```
+
+AI 生成的 SVG 代码可以直接保存为 SVG 文件在浏览器内打开。
+
+
+
+
+
+## 三、专业绘图工具 - Draw.io
+
+如果将 AI 与专业绘图工具结合，可以实现 1+1 > 2 的效果。
+
+我用的比较多的绘图工具是免费开源的 **draw.io**，它的优点是自由度极高，支持导入导出多种格式，拥有丰富的图形库和模板。
+
+还有个大火的开源项目 [next-ai-draw-io](https://github.com/DayuanJiang/next-ai-draw-io)，可以直接通过 AI 对话来生成和编辑 draw.io 图片，短短几天就涨了 6k star！
+
+
+
+这个项目支持在线体验，你可以完全从 0 开始画图，比如画一个流程图，演示 RAG 的工作原理。AI 会自动生成 Draw.io 绘图代码，很快精美的流程图就搞定了！
+
+⭐️ 建议观看视频演示：https://bilibili.com/video/BV18NmnB4EeM
+
+
+
+然后你可以利用 Draw.io 自身强大的绘图能力手动修改任意元素、或者是改变风格样式。也可以通过 AI 对话让它帮你修改，比如改成动画连接线，逼格一下子就上来了。
+
+
+
+
+
+### 生成各种技术图
+
+还有程序员工作涉及的架构图：
+
+```plain
+提示词：绘制电商平台的微服务架构图
+```
+
+
+
+UML 类图：
+
+```plain
+提示词：用 UML 类图展示用户管理模块的设计
+```
+
+
+
+ER 图：
+
+```plain
+提示词：绘制在线教育平台的数据库 ER 图
+```
+
+
+
+时序图：
+
+```plain
+提示词：用时序图展示用户登录的交互过程
+```
+
+
+
+这些通通不在话下，帮你节省大把的时间和毛发~
+
+
+
+### 使用技巧
+
+还有一些使用小技巧，比如配合免费的图标库，让整个绘图元素更丰富：
+
+```plain
+提示词：使用 AWS 图标生成 CDN 架构图
+```
+
+
+
+可以使用原生 SVG 动画标签，给整个绘图增加缩放和路径动画：
+
+```plain
+提示词：演示 DDOS 攻击，使用 SVG 的 和 增加缩放和路径动画
+```
+
+
+
+还可以自己上传一个草图，比如我用文本模型生成的 Mermaid 流程图，让 AI 帮我替换为更美观的样式风格：
+
+```plain
+提示词：改为彩虹主题的配色、放大字体、使用加粗动画连接线
+```
+
+效果还不错吧！
+
+
+
+最后导出为各种图片或文档格式，美滋滋~
+
+
+
+
+
+### 本地部署
+
+注意，官方提供的演示网站可能限量和不稳定，像我连续用了几次就被拒绝了。
+
+所以我建议下载开源代码到本地，按照官方文档的说法 [配置自己的大模型](https://github.com/DayuanJiang/next-ai-draw-io/blob/main/docs/ai-providers.md) 来运行；或者用 Docker 一键启动，想怎么用就怎么用。
+
+
+
+
+
+## 四、思维导图
+
+AI 可以帮我们快速生成精美的思维导图，并且能够导出为专业思维导图软件支持的格式。
+
+我用的比较多的思维导图软件是 XMind，支持丰富的样式和主题。
+
+我更建议让 AI 生成 **Markdown 格式的思维导图**，因为 Markdown 格式更通用，方便在各种文档工具中使用：
+
+```plain
+请帮我生成一个关于"微服务架构设计"的思维导图，使用 Markdown 格式，用缩进表示层级关系
+```
+
+AI 会生成这样的 Markdown 格式：
+
+```markdown
+# 微服务架构设计
+
+## 服务拆分原则
+- 单一职责
+ - 每个服务只负责一个业务功能
+ - 高内聚低耦合
+- 服务自治
+ - 独立部署
+ - 独立技术选型
+```
+
+将这个 Markdown 文件直接导入 XMind，就能生成结构清晰的思维导图啦！
+
+
+
+
+
+## 五、AI 绘图技巧
+
+
+### 技巧 1、提供示例图让 AI 模仿
+
+当你看到一个很棒的图，想要绘制同款时，可以直接截图给 AI，让它帮你生成类似的图。
+
+举个例子，仿照我提供的系统架构图进行生成：
+
+```plain
+请根据我提供的系统架构图，用 draw.io 格式生成类似风格和结构的图，但内容改为：
+- 一个在线教育平台的架构
+- 保持原图的配色方案和布局风格
+```
+
+生成结果如图，是不是很像？
+
+
+
+
+
+### 技巧 2、截图标注，精准修改
+
+如果你对 AI 生成的图的有些地方不满意，你可以截图并在需要修改的地方画红圈标注，然后告诉 AI 如何修改。
+
+
+
+
+
+### 技巧 3、配置专业的系统预设
+
+AI 生成的效果很大程度上取决于输入的提示词，所以要让 AI 画出更专业的图，配置一个好的系统提示词至关重要。
+
+在 Cursor 中，我们可以设置项目级别的 Rules 规则，让 AI 始终遵循你的绘图规范。
+
+给大家一个专业的架构图绘制预设，仅供参考：
+
+```plain
+# 技术架构图绘制专家
+
+你是一名资深的系统架构师和技术图表设计专家。
+
+## 绘图原则
+1. 所有文字必须使用简体中文
+2. 保持图表简洁清晰，避免过度复杂
+3. 使用标准的技术图标和符号
+4. 配色专业，层次分明
+
+## 配色方案
+- 展示层：蓝色系 (#3498db)
+- 业务层：绿色系 (#2ecc71)
+- 数据层：橙色系 (#e67e22)
+```
+
+将这个预设配置到 Cursor Rules 中，AI 就会按照规则来生成图片，确保输出的一致性和专业性。
+
+
+
+## 写在最后
+
+看到这里，相信你已经掌握了 AI 画图的各种姿势了！从简单的文本绘图到复杂的动态图表，AI 都能轻松搞定。
+
+不仅能帮我们节省大量时间，而且妈妈再也不用担心我的图画得丑了！
+
+如果你觉得本期内容对你有帮助，别忘了点赞收藏。学编程、对 AI 感兴趣的朋友欢迎关注鱼皮，在我免费开源的 [AI 知识库](https://ai.codefather.cn) 中也汇总了大量 AI 知识和教程干货，希望对大家有帮助。
+
+
+
+
+
+
+## 推荐资源
+
+1）鱼皮 AI 导航网站：[AI 资源大全、最新 AI 资讯、免费 AI 教程](https://ai.codefather.cn)
+
+2）编程导航学习圈：[学习路线、编程教程、实战项目、求职宝典、交流答疑](https://www.codefather.cn)
+
+3）程序员面试八股文：[实习/校招/社招高频考点、企业真题解析](https://www.mianshiya.com)
+
+4）程序员写简历神器：[专业模板、丰富例句、直通面试](https://www.laoyujianli.com)
+
+5）1 对 1 模拟面试：[实习/校招/社招面试拿 Offer 必备](https://ai.mianshiya.com)
diff --git a/Vibe Coding 零基础教程/40 编程学习/06 AI 应用开发面试题.md b/Vibe Coding 零基础教程/40 编程学习/06 AI 应用开发面试题.md
new file mode 100644
index 0000000..2e411b2
--- /dev/null
+++ b/Vibe Coding 零基础教程/40 编程学习/06 AI 应用开发面试题.md
@@ -0,0 +1,301 @@
+# AI 应用开发面试必知必会
+
+> AI 开发不只是调个接口这么简单
+
+
+
+你好，我是程序员鱼皮。
+
+由于 AI 的流行，很多公司开始搞起了 AI 相关的业务，或者给老项目加个 AI 相关的功能。这也给开发方向的程序员们提供了一个新的垂直岗位 —— AI 应用开发。
+
+但有朋友可能会觉得：“AI 应用开发？**不就是调个接口么？有什么难的？**”
+
+
+
+还真的是应了那句话 —— 你知道的越少，以为自己知道的越多。
+
+就好比有人问：电商系统是怎么把你喜欢的商品推送到主页的？
+
+有同学秒答：不就是 **推荐算法** 么？
+
+的确是这样，但就是这 4 个字，可能是很多精英们日以继夜地研究、不断地优化，才呈现出给用户看到的效果。
+
+AI 应用开发也是一样的，调个接口的确可以实现一些需求，但深入到具体业务场景和解决方案中，还是有很多值得学习的知识和经验。
+
+这不，前段时间我直播面试了一位工作 3 年的 Java 后端开发老哥，目标是 AI 应用开发岗。下面分享下面试过程，看完你就知道，**AI 开发绝不只是调个接口这么简单**。
+
+⭐️ 推荐观看视频版：https://bilibili.com/video/BV1qgHezFEaR
+
+
+
+
+
+## 一、真实面试案例
+
+### 候选人背景
+
+小王 2022 年毕业，有 3 年多的 Java 后端开发经验。在上家公司负责电子签合同云平台的建设，包括账号系统、权限系统、消息系统等核心模块。
+
+除了传统 Java 业务，他还自学了半年多的 AI 技术，做过电子合同 AI 智能助手（RAG 系统）和模拟面试官 Agent 应用。技术栈涵盖 Spring Boot、MySQL、Redis、RabbitMQ 等，AI 方面熟悉提示词工程、工具调用、Agent 等。
+
+**目标薪资：20K**
+
+看起来背景还不错吧，那我们来看看面试都问了什么~
+
+
+
+### 第一轮：提示词工程
+
+面试官：跟我讲一下提示词工程吧，最好能结合你做过的项目举例，有哪些优化提示词的技巧？
+
+小王的回答：
+
+提示词工程是提高大模型输出质量的重要技术，常用技巧包括：
+
+1. 角色设定：给大模型设定系统提示词，包含角色说明、任务和约束条件
+2. 小样本提示：给模型一些输入输出示例，让它仿照执行
+3. 思维链：让大模型先思考再输出答案
+
+在实际开发中，提示词需要不断迭代优化，可以通过阿里云百炼等平台做 A/B 测试。
+
+**点评**：这个回答还算全面，但缺乏深度。真正的提示词工程远不止这些基础技巧。
+
+
+
+### 第二轮：AI 应用开发关注点
+
+面试官：你觉得开发 AI 项目时有哪些注意事项？你会更关注哪些点？
+
+小王的回答：
+1. 业务理解：深入了解业务，抽象成工作流或 Agent
+2. 工程化优化：缓存高频问题、流式输出、不同任务场景用不同模型
+
+面试官追问：你做项目时不关注 AI 的可观测性吗？不关注 AI 的准确度和幻觉问题吗？
+
+小王：准确度方面可以通过提示词和 RAG 优化。。。
+
+**点评**：这里暴露了一个问题，只知道怎么做，但缺乏生产级别的工程实践经验。
+
+
+
+### 第三轮：消除 AI 幻觉
+
+面试官：你在开发 AI 应用时，怎么尽可能消除 AI 调用的幻觉？
+
+小王的回答：
+1. 提示词优化：更明确的角色定位，加限制条件
+2. RAG 系统：外挂知识库，让 AI 基于知识库内容回答
+3. 模型微调：针对特定领域进行微调训练
+
+面试官：还有别的吗？你做过工具调用，怎么消除工具调用的幻觉？
+
+小王：工具调用幻觉具体指什么？
+
+面试官：比如 AI 调用了系统中不存在的工具，怎么消除这种情况？
+
+小王：。。。（沉默是今晚的康桥）
+
+
+
+点评：实际上，工程层面有很多方法可以处理工具调用幻觉，比如添加幻觉处理策略、大模型参数调整、提示词优化、异常捕获等等。
+
+
+
+### 第四轮：技术框架深度
+
+面试官：你平时开发 AI 应用用什么框架？
+
+小王：Spring AI
+
+面试官：Spring AI 有哪些特性？
+
+小王的回答：
+1. Advisor 机制：相当于拦截器，可以在调用大模型前后进行拦截
+2. 对话记忆：提供多种内置对话记忆实现
+3. 向量存储：内置向量存储，也可以自定义实现
+4. ChatClient：和大模型交互的客户端
+5. 工具调用：通过注解将 Java API 转换为工具
+6. 结构化输出：指定返回 JSON 格式输出
+
+虽然看起来小王回答的不少，但回答速度很慢，而且还有很多特性没有回答出来。
+
+点评：感觉不太熟练的样子。
+
+
+
+### 面试结果与总结
+
+从面试结果来看，小王的优势在于：
+
+- 有实际的 AI 应用开发经验
+- 基础概念掌握还可以
+
+不足：
+1. 表达节奏慢：回答问题需要面试官一步步引导，缺乏主动性
+2. 缺乏生产级实践：只知道怎么做，但不知道怎么优化
+3. 工程化能力不足：对 AI 应用的监控、可观测性、异常处理等认识不够
+
+最终我觉得小王拿 20K 月薪是有希望的，但不稳，还需要在工程实践和表达能力上继续提升。
+
+
+
+## 二、AI 开发需要掌握什么？
+
+通过这场面试，大家应该也能感受到，**AI 应用开发绝不只是简单的调接口**。
+
+一个合格的 AI 应用开发者需要掌握：
+
+
+### 1、提示词工程
+
+- 角色设定、小样本学习、思维链
+- 提示词优化和 A/B 测试
+- 针对不同场景的提示词策略
+
+
+### 2、AI 工程化能力
+
+- 性能优化（缓存、流式输出、异步处理）
+- 成本控制（模型选择、批处理、负载均衡）
+- 可观测性（监控、日志、指标统计）
+- 异常处理和容错机制
+
+
+### 3、核心技术栈
+
+- RAG 系统设计与优化
+- 向量数据库使用
+- 混合检索策略
+- 模型微调和评估
+
+
+### 4、框架和工具
+
+- Spring AI、LangChain4j 等开发框架
+- MCP 模型上下文协议
+- 各种 AI 开发工具和平台
+
+
+### 5、业务理解能力
+
+- 将复杂业务抽象为 AI 工作流
+- Agent 设计和多工具协调
+- 用户体验优化
+
+
+
+## 三、面试题推荐
+
+想要在 AI 应用开发面试中脱颖而出，除了掌握上面的知识，还要多刷面试题。
+
+
+### 面试鸭 AI 大模型面试题库
+
+我们在 [面试鸭](https://www.mianshiya.com) 上专门整理了 **AI 大模型面试题库**，包含上百道精选面试题，涵盖：
+
+- AI 大模型的基本原理
+- Prompt 工程技巧
+- RAG 检索增强生成
+- AI 开发框架（Spring AI、LangChain4j）
+- 向量数据库和 Embedding
+- AI 应用开发实战
+- 工具调用和 MCP
+- Agent 设计和优化
+
+题库地址：https://www.mianshiya.com/bank/1906189461556076546
+
+
+
+每道题目都有详细的参考答案和知识点标签，帮你系统地准备面试。
+
+
+
+### 面多多 AI 模拟面试
+
+除了刷题，模拟面试也很重要。我们推出的 [面多多](https://ai.mianshiya.com) 可以提供 **1v1 的 AI 模拟面试**。
+
+访问地址：https://ai.mianshiya.com
+
+面多多的特点：
+
+- 沉浸式综合面试：根据你的简历和目标岗位定制面试题，提供 60 分钟以上的 1v1 语音面试陪练
+- 专项面试：400+ 面试方向任选，针对性强化某个环节
+- 简历押题：根据你的简历预测面试官可能会问的问题
+- 详尽的复盘报告：从多个维度评估你的表现，指出改进方向
+
+
+
+新人福利：注册就送 200 能量值，可以免费体验 1 次沉浸式综合面试，或 1 次专项面试 + 1 次简历押题。
+
+通过反复练习，你可以：
+
+- 熟悉面试流程，消除紧张感
+- 发现自己的薄弱环节
+- 提升表达能力和逻辑思维
+- 增强临场应变能力
+
+
+
+## 四、学习建议
+
+最后也给想转型 AI 应用开发的同学几个建议：
+
+
+### 1、不要只停留在 "能用" 层面
+
+很多朋友学会了调用 OpenAI 的 API，就觉得自己会 AI 开发了。但真正的 AI 应用开发，需要考虑的是如何用 **更低的成本** 让应用 **稳定、高效、准确** 地运行在生产环境中。
+
+
+### 2、重视工程化实践
+
+要学会使用 AI 开发框架，而不是只会裸写 HTTP 请求。还要了解 AI 应用的监控和可观测性、掌握成本优化和性能调优技巧、学会处理 AI 应用的各种异常情况。
+
+
+### 3、深入理解核心概念
+
+比如提示词工程，不只是写几个示例那么简单。还有 RAG 系统，涉及信息检索、向量数据库、重排序等多个环节，每个环节都有很多优化技巧。
+
+不过我觉得最复杂的还是 Agent 的设计，需要考虑工具选择、任务分解、结果整合、多智能体协作模式等等。
+
+
+### 4、多做项目，多总结
+
+这句就纯正确的废话了，大家都知道得多做项目才能积累经验。尤其是 AI 应用开发，不同的业务场景都需要对 AI 生成的效果进行定制的优化，不是背个方法论就能解决所有问题。
+
+我自己开源了不少 AI 应用开发项目，甚至还写过几套体系化的实战教程，分享给大家：
+
+- AI 应用生成平台：https://github.com/liyupi/yu-ai-code-mother
+- AI 超级智能体：https://github.com/liyupi/yu-ai-agent
+- AI 文献阅读助手：https://github.com/liyupi/literature-assistant
+- AI 知识库：https://github.com/liyupi/ai-guide
+
+在 [编程导航](https://www.codefather.cn) 上，我也带大家做了多套 AI 项目教程，涵盖了几乎所有的 AI 开发技术。
+
+
+
+
+
+## 写在最后
+
+AI 技术发展日新月异，对程序员的要求也在不断提高。**AI 相关知识不再只是算法工程师需要了解，而是每个程序员都必须掌握的基本技能**。
+
+无论你是前端、后端还是全栈开发者，都需要了解 AI 应用开发的基本概念和实践方法。
+
+因为未来的软件开发，AI 将无处不在。
+
+赶紧去 [面试鸭](https://www.mianshiya.com/bank/1906189461556076546) 刷题、去 [面多多](https://ai.mianshiya.com) 模拟面试，为你的 AI 开发之路做好准备吧！
+
+
+
+
+## 推荐资源
+
+1）鱼皮 AI 导航网站：[AI 资源大全、最新 AI 资讯、免费 AI 教程](https://ai.codefather.cn)
+
+2）编程导航学习圈：[学习路线、编程教程、实战项目、求职宝典、交流答疑](https://www.codefather.cn)
+
+3）程序员面试八股文：[实习/校招/社招高频考点、企业真题解析](https://www.mianshiya.com)
+
+4）程序员写简历神器：[专业模板、丰富例句、直通面试](https://www.laoyujianli.com)
+
+5）1 对 1 模拟面试：[实习/校招/社招面试拿 Offer 必备](https://ai.mianshiya.com)
diff --git a/Vibe Coding 零基础教程/40 编程学习/07 程序员简历模板.md b/Vibe Coding 零基础教程/40 编程学习/07 程序员简历模板.md
new file mode 100644
index 0000000..40409ba
--- /dev/null
+++ b/Vibe Coding 零基础教程/40 编程学习/07 程序员简历模板.md
@@ -0,0 +1,220 @@
+# 程序员简历模板
+
+> 1 分钟搞定简历，让简历更专业
+
+
+
+你好，我是程序员鱼皮。
+
+做知识分享 4 年来，我已经帮朋友们看了上千份简历了，毫不夸张地说，绝大多数同学的简历只能用 "惨不忍睹" 来形容。
+
+有几个最最最典型的写简历问题，比如：
+
+- 简历篇幅少，不知道写什么
+- 简历的排版不够整齐，花里胡哨
+- 简历的专业技能不够专业
+- 简历中的语句不通顺
+- 简历内容存在错别字
+
+还不急着找工作的同学们，也别觉得写简历和你们没关系，如果能早点意识到这些问题、掌握写简历的方法，就不至于在找工作的时候闹笑话了。
+
+作为一名程序员，每当看到这些问题，我都会陷入沉思：有什么办法能自动帮助大家发现简历上的问题？帮大家更快地写出更好的简历？
+
+为了解决这些问题，在调研了十几个写简历平台后，我决定带团队开发一个全新的在线简历制作网站 —— **老鱼简历**！
+
+网址：https://laoyujianli.com
+
+
+
+通过这个视频，就能快速了解我们平台是怎么帮你提高写简历效率的啦~
+
+视频地址：https://www.bilibili.com/video/BV1Vw411p7ei
+
+
+
+## 一、快速生成简历
+
+老鱼的第一大能力是快速生成简历，不到一分钟，就能帮你生成一份基础简历。
+
+我们提供了 3 种创建简历的方式。
+
+
+### 1、简历模板
+
+一份优秀的简历更重要的是内容，排版只要简洁整齐即可，拒绝花里胡哨。
+
+老鱼提供了多种简洁专业的简历模板，点一下就能创建出整齐美观的简历，不用再把时间浪费在排版上了！
+
+
+
+老鱼还提供了热门岗位的简历模板，有很多现成的简历内容参考，给大家提供写简历的思路和灵感。
+
+比如前端实习简历模板，一键即可使用：
+
+
+
+
+### 2、AI 快速生成简历
+
+很多第一次写简历的同学，可能完全不清楚简历的写法，一头雾水。
+
+为此，我们开发了 AI 生成简历的功能，只需填写目标职位并简单介绍你的基本情况，即可快速生成一份求职简历！
+
+
+
+生成效果如下，学校、专业技能、工作经历都有填充：
+
+
+
+不过要注意的是，AI 生成的内容并不固定，你填写的信息越详细，效果才会越好~
+
+
+### 3、多种格式简历导入
+
+我相信很多同学的简历可能还是拿 Word 写的，但其实强烈不建议投递 Word 格式的简历，可能会出现排版错乱，也不利于维护更新。
+
+老鱼简历支持快速导入 Word、PDF、JPG、PNG、Markdown、Doc、Html 等多种格式的简历文件，可以轻松地帮你实现 "简历上云"，之后投递和分享简历都会更方便~
+
+
+
+
+
+## 二、快速优化简历
+
+创建一份基础简历后，接下来就要根据自己的实际情况去编写和优化简历了。
+
+老鱼简历提供了多种实用功能，来帮大家解决写简历常犯的问题：
+
+
+### 1、简历实时编辑浏览
+
+首先是一个简单易用的简历编辑器，左侧编辑、右侧实时浏览，还支持灵活调整样式、一键切换主题模板，写简历的体验拉满~
+
+
+
+
+### 2、自定义简历模块
+
+支持自由添加模块、富文本自定义内容和格式等，几乎满足你对简历的所有修改需求！
+
+-20231122134519163.png)
+
+
+### 3、智能纠错
+
+开头提到了，很多同学的简历是存在错别字的。尤其是技术类岗位，一个错别字就会大大影响面试官对你的看法，可能导致简历直接挂掉！
+
+为解决这个问题，老鱼简历提供了一键 `智能纠错` 功能，不仅能够帮你快速修正错别字，还能优化专业名词、大小写、错误的标点、语句的连贯性等：
+
+-20231122134519304.png)
+
+
+### 4、智能一页
+
+虽然说简历的长度并没有强制要求一页纸，但一般建议以一页纸为佳，或者保证简历的第一页是最能体现你个人能力和价值的内容。
+
+但有些同学可能正好写了一页纸多一丢丢，怎么办呢？
+
+老鱼简历提供 `智能一页` 功能，可以一键调整简历排版、自动优化到一页纸：
+
+
+
+
+### 5、简历助手
+
+这是我们认为最实用的功能。很多同学由于没有写简历、或者实践的经验，可能完全不知道怎么写简历的内容。
+
+为了解决这个问题，老鱼简历提供了丰富的、各职位、各模块的 `简历例句` 和 `简历建议`，帮助大家快速完善简历、学习写简历的经验方法。
+
+比如快速引用专业技能例句：
+
+-20231122134519520.png)
+
+学习如何写好专业技能、以及常见的问题：
+
+-20231122134519691.png)
+
+可千万别小瞧了写简历的技巧，有的时候，一个细节就能给你的简历超级加分！
+
+比如鱼皮的简历中，提到了自己在校期间作为网站建设工作室的负责人、给学校建了多个网站，通过放了一个真实的网站链接来大幅增加经历的可信度。同样，大家自己做过的项目最好也都能提供项目或者文档地址。
+
+
+
+
+### 6、AI 优化简历内容
+
+每一个模块都支持 AI 优化功能。只需一键，AI 帮你快速优化简历的内容，让语句更通顺、内容更连贯、表达更专业！
+
+-20231122134519865.png)
+
+
+
+## 三、分享简历
+
+编写完简历后，我们可以通过把简历导出为 PDF 和图片、或者在线链接等多种途径分享简历。
+
+
+### 1、导出简历为 PDF 和图片
+
+示例导出效果如下图，看起来还不错吧~
+
+
+
+
+### 2、在线分享简历链接
+
+可以给自己写好的简历生成一个极简干净的在线简历页面链接，便于给面试官或 HR 分享。
+
+支持自定义链接地址，比如鱼皮的大学简历：https://laoyujianli.com/share/yupi，大家可以点进去看看效果。
+
+
+
+
+### 3、简历一键脱敏分享
+
+分享简历时，还支持一键隐藏个人敏感信息，只保留核心内容，让简历更安全：
+
+
+
+
+
+## 四、其他功能
+
+
+### 1、求职经验分享百科
+
+我们精选了一些大厂同学的求职经验分享文章，帮助你提高求职竞争力！
+
+-20230927125709592-20231122134520103-20231122135515424.png)
+
+
+### 2、简历中英文翻译
+
+如果想同时投递国内外的公司，这个功能就很实用了。只需要点击 `翻译` 按钮，就能自动将简历转换为英文版本啦！
+
+
+
+
+
+## 写在最后
+
+OK，就介绍到这里，欢迎大家使用老鱼简历：https://laoyujianli.com
+
+配合 [编程导航](https://www.codefather.cn) 的 [《鱼皮保姆级写简历指南》](https://www.codefather.cn/course/cv) 一起使用，效果更佳。你的简历绝对能进化至少 1 个 Level。
+
+有任何建议请随时反馈给我们，感谢您的支持。
+
+
+
+
+## 推荐资源
+
+1）鱼皮 AI 导航网站：[AI 资源大全、最新 AI 资讯、免费 AI 教程](https://ai.codefather.cn)
+
+2）编程导航学习圈：[学习路线、编程教程、实战项目、求职宝典、交流答疑](https://www.codefather.cn)
+
+3）程序员面试八股文：[实习/校招/社招高频考点、企业真题解析](https://www.mianshiya.com)
+
+4）程序员写简历神器：[专业模板、丰富例句、直通面试](https://www.laoyujianli.com)
+
+5）1 对 1 模拟面试：[实习/校招/社招面试拿 Offer 必备](https://ai.mianshiya.com)
diff --git a/Vibe Coding 零基础教程/40 编程学习/08 程序员面试刷题.md b/Vibe Coding 零基础教程/40 编程学习/08 程序员面试刷题.md
new file mode 100644
index 0000000..baf0350
--- /dev/null
+++ b/Vibe Coding 零基础教程/40 编程学习/08 程序员面试刷题.md
@@ -0,0 +1,160 @@
+# 程序员面试刷题神器
+
+大家好，我是程序员鱼皮。[「面试鸭」](https://mianshiya.com) 正式上线，终于有一个 **题目全、更新快、题解优质** 的面试刷题神器了！
+
+覆盖几乎所有主流编程方向，包括 Java 后端 / 前端 / AI / Python / C++ / Go / 运维 / 测试 / 系统设计 / 场景题 / 公司题库 / HR 面试，300+ 题库、10000+ 高频面试真题！支持网页、小程序、IDE、VSCode 插件多端使用。
+
+
+
+面试鸭网页端：https://mianshiya.com
+
+面试鸭小程序：
+
+
+
+面试鸭 IDE 插件：在 JetBrains IDE 中打开设置，找到 Plugins 插件，搜索 `mianshiya` 即可安装。
+
+
+
+面试鸭 VSCode 插件：在 VSCode/Cursor 中，打开拓展市场，搜索“`面试鸭`”或“`mianshiya`”，即可安装。
+
+
+
+
+
+## 为什么做面试鸭？
+
+我相信学编程的朋友都很讨厌八股文，就是一些相对死板、答案固定的题目。但偏偏 **面试又必考八股文** ，所以经常有朋友向我吐槽：
+
+- 八股文太难背了！背了就忘咋办？
+- 八股文太多了背不完！应该重点背哪些？
+- 从哪儿找八股文？网上的都太乱了！
+- 网上题目很多，但题解都太水了！
+- 背八股文感觉没用，还是啥都不会！
+
+的确，网上虽然有很多整理好的面试题 PDF，但基本都是 “用来引流”，要么是题目不全、要么就是不更新维护、题解的质量更是参差不齐。假如现在让你准备面试，是不是要先自己整理一波面试题、然后再从网上搜一大堆题解、然后再择优劣汰？想想都麻烦，得花不少时间，而且最关键的是你也不知道题目考不考、题解是否正确对吧？
+
+天下苦八股文久矣。 **朋友们，是时候吊打一波面试官了！**
+
+所以我们上线了面试刷题神器《面试鸭》，题目更全面、刷题更方便、背题更省时、题解更优质、知识更丰富、更新更频繁，是鸭鸭的 6 大优势。目标只有一个：**帮助大家用更短的时间准备面试，吊打面试官**！
+
+想一想，面试的时候遇到你准备到的原题，那感觉有多爽~
+
+
+
+下面介绍面试鸭的优势，更推荐观看短视频介绍：https://bilibili.com/video/BV14E421w7dr/
+
+
+
+## 面试鸭的优势
+
+### 1、四端同步，刷题更方便
+
+首先，面试鸭支持 **网页端、小程序、IDE 插件和 VSCode 插件**，全端数据同步，真正做到**随时随地刷题**，轻松备战求职面试。
+
+而且界面纯净，用起来非常方便，甚至是面试的时候都能偷偷用它来搜索题目。。。
+
+尤其是「沉浸模式」，一键隐藏页面里的其他元素，全身心投入刷题中，一题接着一题，根本停不下来。
+
+
+
+新上线的【专项练习】和【测试一下】将那些高频面试题针对性地转化为选择题，**专治各种一看就会、一问就废**。
+
+尤其是那些容易被模糊的概念，哪些知识是真的掌握，哪些还需要加强巩固，测试一下就都清晰了。经常这么练习，还能**帮助你了解面试官的出题思路**，面试时候更加游刃有余。
+
+
+
+为了帮助大家愉快地摸鱼刷题，我们还推出了面试鸭 IDE 和 VSCode 插件。题库、题目列表都使用原生 UI 展示，**隐蔽性足够好**！还能自定义快捷键，一键打开 / 收起面板，葫芦娃的二娃来了，都发现不了我在摸鱼刷题～
+
+沉浸式隐蔽摸鱼刷题使用指南：[我做了个程序员面试刷题工具，帮你吊打面试官！沉浸式摸鱼刷题](https://www.bilibili.com/video/BV11hx5euEbD/)
+
+
+
+
+
+### 2、题目全面，命中率高
+
+面试鸭涵盖了 **几乎所有主流编程方向** 的面试题，Java 后端、前端、AI、Python、C++、Go、运维、测试、系统设计、场景题、公司题库、HR 面试等，**300+** 题库、**1w+** 高频面试题，还有秋招热题、企业真实面经、刷题路线等，帮助你 360° 全方位无死角吊打面试官！
+
+我们按照面试考点和岗位划分了题库，就以 Java 后端为例，知识点覆盖：
+
+- Java 开发：Java 基础、主流框架、并发编程、JVM
+- 后端中间件：MySQL、Redis、消息队列
+- 计算机基础：计算机网络、操作系统、设计模式
+- 更多扩展：SQL 编写、系统设计、线上问题排查、场景题、实战项目题库
+
+
+
+无论是面试各类公司的必考题目，还是你意想不到的冷门问题，我们的题库都一应俱全，而且 **面试命中率超高** ！
+
+为了更好地让大家通过企业求职，我们还新增了 **校招热题** 和 **真实面经** 板块。你可以在这里看到 Java、React 、Go 、Vue 、前端、后端等等秋招热题，你也可以在这里找到美团、阿里、字节、京东、国企、银行的真实面经。
+
+你可以按照自己的水平和简历情况去刷题，用更短的时间把握住面试重点，体验面试被问到原题的快感。
+
+
+
+千万别再自己花费时间到网上整理题目、搜题解了！ **你浪费的这些时间，别人都可以多背很多题目了。**
+
+
+
+### 3、题解更优质
+
+我们深知大家背题刷题的效率很大程度上取决于题解的质量，所以专门邀请了多位**大厂面试官来创作和优化题解**，保证题解是正确易懂的。
+
+以 “如何设计 XX 系统” 之类的场景题为例，如果你没有类似的经验，就会一脸懵逼。那我们会先针对题目给出 **回答重点**，直击面试官腰子，然后结合实际经验给出更多 **扩展知识**，对着面试官打出一套组合拳。比如：
+
+
+
+就这一道题目鸭鸭就写了 3000 多字，还搭配了图片辅助理解、保证通俗易懂。这样一来，大家不仅仅是背题应付面试，而是 **真正能学到东西** ，全面提升技术视野、开发能力和面试经验。
+
+我们的很多题解都可以当做技术文章和专栏来学习，所以哪怕你现在不急着面试，也可以通过面试鸭了解高频考题、巩固基础知识、明确学习计划、提升技术水平。
+
+就比如下面这些题目，看看你都能答出来么？
+
+
+
+
+
+### 4、更新更频繁
+
+我们现在每天都在高速更新题解、同时优化系统功能。未来也会紧跟面试趋势，持续更新题库和题解，及时添加当下企业面试新题、新知识、新技巧，让你始终走在前列，不要浪费时间在过期的题目和知识上。
+
+最近 AI 相关概念十分火热🔥，面试鸭也新增了 `AI 大模型原理和应用面试题库` ，很多题目是通过大厂真实面试收录来的，够与时俱进吧~ 而且还在持续不断地更新哦！
+
+
+
+
+
+## 邀请有赏
+
+邀请好友注册并购买面试鸭永久会员，可以获得佣金奖励🧧，详情查看[面试鸭拉新邀请有赏（赚赏金）](https://yuyuanweb.yuque.com/org-wiki-yuyuanweb-zvq1bg/oue2nx/ik6d3mv2wapbx96w)
+
+面试鸭网站已支持一键生成你的专属邀请链接、邀请海报，快来分享赚赏金吧！
+
+
+
+## 欢迎体验
+
+希望大家可以体验并且多给我们反馈，有面试遇到的、希望补充的新题目，鸭鸭会加班加点解答。
+
+访问 https://mianshiya.com 或者微信搜索面试鸭小程序，即可免费使用！
+
+
+
+目前所有的题目和题库都是免费可见的，但部分我们大厂面试官原创的题解是 **仅会员可见** 的，毕竟原创题解和开发系统都要消耗大量人力。
+
+只需要 [开通永久会员](https://yuyuanweb.yuque.com/org-wiki-yuyuanweb-zvq1bg/oue2nx/tz028epsok1207t4)，就能自由畅刷面试鸭的所有题目和题解了，PC 端和小程序都支持，还可以加入会员专属交流群随时交流提问。
+
+简单算一算，如果你自己准备面试，要先搜索题目 => 整理重点 => 搜索题解，还要判断题解的准确性，少说花费几十个小时。现在用面试鸭，直接开刷高频面试题，有问题还能求助反馈，能够省下多少时间呢？如果面试中遇到了原题，通过了面试拿到 offer，这点投入真的是九牛一毛了。而且我们是用心创作的题解，相当于能学到由大厂专家写的多个技术专栏，性价比极高！
+
+目前面试鸭永久会员 **只需 129** ，会随着功能和内容的丰富持续涨价，正式价格预计是 399 以上，所以早入手早学习~ 我们会持续更新内容和系统功能，给大家最好的刷题体验，感谢大家入股，也欢迎大家监督鸭鸭改进。我们既然做了，不成功便成仁！
+
+
+
+
+
+## 用户交流群
+
+有好的想法建议、反馈 Bug、需要什么功能或内容，都欢迎加入面试鸭用户交流群反馈哦：
+
+
diff --git a/Vibe Coding 零基础教程/40 编程学习/09 程序员工作技巧.md b/Vibe Coding 零基础教程/40 编程学习/09 程序员工作技巧.md
new file mode 100644
index 0000000..1cafecb
--- /dev/null
+++ b/Vibe Coding 零基础教程/40 编程学习/09 程序员工作技巧.md
@@ -0,0 +1,290 @@
+# 程序员高效工作技巧
+
+> 提升工作效率，轻松应对职场挑战
+
+
+
+你好，我是程序员鱼皮。
+
+提到程序员，很多还没毕业的小伙伴可能觉得程序员的工作就是整天写代码，但进了公司后，你才会发现写代码只是工作中最最最基础的环节。
+
+想要高效地完成工作、尽快在工作中取得成长和晋升，还有很多需要注重的事情和方法。
+
+这篇文章就给大家分享一下我在工作中积累的程序员工作技巧吧，大家读起来应该是比较轻松的~
+
+💡 注意，以下方法未必适用于所有人，仅提供建议
+
+
+
+## 一、工作方法
+
+
+### 1、没有明确需求前，不要急着做
+
+我刚进公司的时候，会有一种应届生心态：同事都是我的前辈，他们给我提的需求我都要尽快完成。
+
+而且那会儿自己初入职场，有一种莫名的自信，会觉得有些需求很简单，能做就做了。
+
+结果有一次就翻车了，我以为有一个需求很简单，就跟我导师说我这两天就能完成。结果改完代码，跟产品经理交付的时候才发现我完全理解错了他的意思，然后又花了几周才把需求做完。
+
+说到错误理解需求，我想到一个段子：
+
+> 老婆给当程序员的老公打电话："下班顺路买一斤包子带回来，如果看到卖西瓜的，买一个。"
+>
+> 当晚，程序员老公手捧一个包子进了家门……
+>
+> 老婆怒道："你怎么就买了一个包子？"
+>
+> 老公答曰："因为看到了卖西瓜的。"
+
+
+
+所以大家一定要记住，明确需求始终是我们程序员工作的第一环！包括明确需求的背景、意义、具体的功能点等等。
+
+如果产品经理没有给出需求单、给出足够的信息，那么一定要让他提供清晰的需求文档，确保你们的理解和目标是一致的，再去设计方案和开发。
+
+千万记住，不要接受一句话需求、需求信息一定不能只通过口头描述！否则今后产品经理抵赖，你也没办法。
+
+
+
+
+
+### 2、上游没有确定前，不要急着开发
+
+这点其实和上一点有点类似，对于我们程序员来说，可能有很多来自不同岗位、部门的上游，比如提需求的产品经理、核对功能点的测试、提供依赖接口的开发、提供资源权限的运维等。
+
+如果我们实现需求必须依赖一些上游，我个人不建议直接上手开发（但是可以先做设计）。因为在工作中，总会有各种各样超出预期的变数和风险。
+
+举个例子，前段时间我要基于其他部门提供的数据表 A 开发出数据表 B，最开始他们给了我数据表 A 的表结构，但是并不明确、并没有建好数据表并写入数据。如果是我刚工作的时候，可能就立刻基于这个表结构去写代码了。但后来，他们的数据表 A 的结构变了好几次、还换了好几次表名！他们表示很抱歉，但我却淡然一笑：没事，你们变吧，我还没开始做，等你们把表上线了再说~
+
+如果是以前，我可能已经心态爆炸了吧哈哈。
+
+
+
+所以这一点还是很有用的，也为我节省了不少时间。
+
+但是，对于紧急需求，最好还是开会拉着所有上游同学一起核对，把方案先定下来，然后大家再各自分工开发、对齐。
+
+
+
+### 3、学会预留空间
+
+前面提到，刚进公司的时候，我还是比较自信的（现在想想有点自负了），总觉得自己能很快地完成需求，而且觉得需求做的越快越能得到老板的赏识。
+
+结果就导致需求排期的时候给自己安排的太紧了，前一个需求的 Bug 还没修完，下一个需求又快到截止日期了。不仅让自己身心俱疲，也打了自己的脸，辜负了别人的期待吧。
+
+而且自己长期负责一个项目后，我会发现很多时候你在做新需求时，用户会突然反馈一个历史功能的 Bug，你又不得不立刻抽身去修复。
+
+所以之后做需求的时候我都会给自己多预留一些时间，防止一些自己前期没有考虑到的问题出现，毕竟大家也知道，有时候一个 Bug 可能就要排查一天。。。
+
+
+
+哪怕我很清楚自己 2 天能完成需求，可能也会多给自己一些时间。毕竟你如果能提前完成，对方会觉得超出预期了；如果你准时完成，对方会觉得这是正常的；而如果你因为一些 Bug 导致没有按时完成，对方会觉得 "你不太行"。
+
+这也算是一种心理博弈？
+
+
+
+### 4、学会向上管理
+
+在职场中，很多人明明技术能力很强，但为什么得不到老板的器重、或者迟迟没有得到晋升呢？
+
+很大的一个原因就是缺少 **向上管理** 的意识。
+
+向上管理是指在日常工作中与上级进行良性互动，积极主动地提出建议、解决问题、持续反馈、维护和上级的关系的能力。
+
+有很多做好向上管理的方法，比如：
+
+1）主动提供解决方案：当你遇到问题或困难时，不要仅仅将问题呈现给你的上级，而是尝试提出可行的解决方案。
+
+2）持续沟通和反馈：建议在合理范围内，定期与上级进行坦诚地交流沟通，包括表述自己的想法和规划、反馈自己的工作情况和成果、和上级对齐组内的目标。
+
+千万不要说你自己做了很多 "自以为很牛 X" 的工作，结果上级根本不知道、或者对于组内和他个人的目标毫无价值，那就很可惜了。
+
+3）展现自我领导力：你不仅要在领导下工作，还要能够在没有明确领导的情况下做出正确的决策，也就是我们公司企业文化中的 "主人翁意识"。
+
+4）接受反馈：如果你的上级提供了建议或批评，不要将其视为攻击，而是视为一个机会来改进自己。积极地回应反馈，表现出你愿意学习和成长的态度。
+
+
+
+## 二、时间管理大法
+
+1、制定清晰的任务清单
+
+按照优先级整理自己的每日任务，一条条打 ✅ 完成，增加动力。
+
+2、时间切片
+
+将每天的时间分段，每段只专注完成一个小任务，减少连续高强度学习的压力。
+
+3、分解复杂任务
+
+把大任务分成小步骤，逐步攻克，尤其适合写论文、搞大项目和方案。当你觉得做一件事情很难时，就必须这么做。
+
+4、学会适时放弃
+
+拒绝一些不重要的任务，不要让一些小事干扰了你的节奏。
+
+5、减少无效信息
+
+限制刷手机的时间，工作时设置为免打扰。你是要干大事的人，怎么能沉迷于某音某手某书？
+
+6、劳逸结合
+
+休息是非常有必要的，学习工作一段时间后，去接杯水吧~
+
+7、利用碎片时间
+
+如果你真的很忙，不妨利用通勤等零碎时间完成小任务，比如回复消息、读文章背单词等等。
+
+8、批量处理任务
+
+把相似任务集中处理，节省切换时间。我也是这么建议团队的运营和销售同学的，如果每分钟都盯着消息看，就没有连续的时间做其他工作了。
+
+9、倒计时法
+
+给任务强行添加一个时间限制，鼓励自己快速完成。看过我教程的同学应该知道，经典 "20 分钟" 嘛，就是这个作用。
+
+
+
+## 三、任务管理
+
+
+### 1、不要依赖人脑记事
+
+一定不要依赖 "人脑" 记事，像我有的时候走出自己的办公室，就会有好几个同事找我确认各种事项，可能等我出去接杯水回来就忘掉了一些。所以必然要有自己的事项记录工具。
+
+大家都是用什么工具来记录工作事项的呢？
+
+像我以前用过滴答清单，类似一个高级的备忘录，但后来就不用了，因为要额外打开软件，还是不够方便。
+
+
+
+### 2、利用微信记录
+
+现在，我最常用的临时记录工具，正是我们每天都会使用的软件 —— 微信。
+
+我的工作微信中，文件传输助手始终是置顶的，我不在电脑前面的时候，只要想到或者收到一些工作事项，都会发给文件传输助手，然后标为未读，以后每次打开微信，都会有一个醒目的红点提醒了。
+
+
+
+如果收到暂时无法处理的工作消息，我在阅读之后也会标为未读并且置顶聊天，提醒自己之后要处理。大家在工作中遇到已读不回的情况，其实是很正常的，有可能对方只是暂时不方便回复、或者没想好怎么回。
+
+
+
+### 3、使用工作记录表
+
+除了利用微信来记录临时工作消息外，肯定还需要一个更系统的工具来记录每日的工作事项。
+
+我使用的工具是腾讯文档的在线 Excel 表格，一方面是直接就能在企微或浏览器里打开，另外一方面现在的在线 Excel 表格功能已经非常灵活，可以很方便地根据自己的需要记录信息、对信息进行分组等等。
+
+比如我是按照每天的日期进行分组，记录了工作事项、备注、相关文档、工作进度等信息。如果某一天的工作做不完，我只需要改下日期到第二天；如果担心有项工作之后会忘掉，只需要提前把它记录到表格里就好。
+
+每天过一遍工作记录表，就不容易遗漏掉工作，更容易安排好自己的时间，还可以通过查看记录对自己的过去进行一个复盘。
+
+以下是我的工作记录表示例：
+
+
+
+像我带了团队之后，还有一个习惯，在每个周末提前做好下周整体的个人和团队计划，便于提前做好准备、更好地把控进度，让工作井然有序。
+
+
+
+### 4、睡前过一遍红点
+
+由于我平时工作消息非常多，不可能做到什么消息都很快回复，那样我根本无法静下心来做好一件事。
+
+但是我每天睡觉前都会过一遍微信 / 企业微信中的 "红点"，确认下有没有漏掉的消息，这可能也是导致我睡眠时间不固定的一个主要原因。
+
+
+
+
+
+## 四、日常记录总结
+
+经常有朋友跟我吐槽说自己进公司很久了，但感觉一直都没什么成长，每次汇报的时候也不知道说什么。
+
+如果你也有这种想法，那么大概率你是没有日常总结的习惯的。
+
+我自己以前存在的一个问题是：看网课做笔记时，有时候会偷懒，我会想着多看几集一起记录。结果现实往往是，随着我看的集数越来越多、未记录笔记的集数越堆越多，我会觉得记录笔记的压力越来越大，到最后索性不记了。
+
+有没有同学也是这样？
+
+工作总结也是一样，最好大家每完成一天的工作、每次做完一个需求、每产出一个阶段性成果，都立刻把他记录下来，养成日常记录的习惯，并且定期整理总结、复盘。才不会说堆到最后都懒得去记了，等到写总结的时候也忘了自己今年做过什么。
+
+这个习惯我已经坚持了 3 年，不得不说，对我的帮助很大。也能时刻让我反思自己的工作节奏、状态，激励自己去尝试和突破。
+
+
+
+## 五、效率提升法则
+
+1、先完成确定的工作
+
+没想好怎么办时，先做清楚的任务。比如我写文章没灵感时，就不会硬想，而是先去做别的，把控整体的工作进度。
+
+2、完成比完美更重要
+
+不要过分追求完美，完成比完美更重要。敏捷开发、持续迭代就是这个道理。（当然，如果不完美的完成对你来说毫无意义，那就按照你的节奏去做就好了）
+
+3、有现成的代码，就不要自己写
+
+学习除外。
+
+4、做项目前，要先想清楚怎么做
+
+做好充分的预研和设计。这样不仅便于后续的程序扩展，也能避免无意义的返工。
+
+5、将大的目标进行拆解
+
+做好计划，标记出关键节点，不要因为觉得目标遥不可及而拖延，也不要盲目乐观而松懈。
+
+6、养成好的作息习惯
+
+找到自己适合工作的黄金时间。（可惜我的黄金时间在凌晨。。。）
+
+7、记性不好，就多记录
+
+哪怕实在记不住，也可以借助文档、收藏夹软件来当自己的第二大脑。
+
+8、积累属于自己的工具库
+
+配合搜索软件实现随用随取。
+
+9、多和团队成员交流
+
+也可以关注一些 UP 主，拓宽知识渠道，从而了解更多的工具和方法。有些东西你只要听说过，等到要用时说不定就能节省几个小时的查找时间。
+
+10、找到让自己进入心流的方法
+
+比如戴上耳机、嚼口香糖、喝咖啡、深呼吸等。
+
+11、经历过的事情，再做一次，通常会更快
+
+因此，要多做项目，持续积累经验，熟能生巧。
+
+
+
+## 写在最后
+
+也许有朋友会觉得：什么都做计划，把自己的人生困在了 Excel 工作表格中，真累啊！
+
+我想说：对啊，确实很累。但当我养成了记录和做计划的习惯后，我做事不再迷茫，而是更有目标了，知道接下来该做什么，也不担心自己会耽误事情。而且看着自己的工作记录表充满 100% 的进度，成就感爆棚！
+
+就这么多，虽说比较抽象，但细细品味，相信你会有一种豁然开朗、醍醐灌顶的感觉。
+
+综上，希望这些技巧对大家有帮助，早日升职加薪~
+
+
+
+
+## 推荐资源
+
+1）鱼皮 AI 导航网站：[AI 资源大全、最新 AI 资讯、免费 AI 教程](https://ai.codefather.cn)
+
+2）编程导航学习圈：[学习路线、编程教程、实战项目、求职宝典、交流答疑](https://www.codefather.cn)
+
+3）程序员面试八股文：[实习/校招/社招高频考点、企业真题解析](https://www.mianshiya.com)
+
+4）程序员写简历神器：[专业模板、丰富例句、直通面试](https://www.laoyujianli.com)
+
+5）1 对 1 模拟面试：[实习/校招/社招面试拿 Offer 必备](https://ai.mianshiya.com)
diff --git a/Vibe Coding 零基础教程/40 编程学习/10 程序员成长大法.md b/Vibe Coding 零基础教程/40 编程学习/10 程序员成长大法.md
new file mode 100644
index 0000000..823b284
--- /dev/null
+++ b/Vibe Coding 零基础教程/40 编程学习/10 程序员成长大法.md
@@ -0,0 +1,210 @@
+# 程序员快速成长的六大方法
+
+> 工作中如何快速成长，突破职业瓶颈
+
+
+
+你好，我是程序员鱼皮。
+
+转眼又是一年，很多小伙伴刚刚步入职场，难免会对未来的成长感到焦虑困惑。
+
+今天我想和大家聊一个很现实的问题：如果你去了一个外包公司，或者你的工作本身不能带给你成长，应该如何破局？
+
+跑，快跑！
+
+
+
+开个玩笑，既然工作不能带给你成长，那就自己学习呗，纯把工作当做是金钱和劳动的交易就好。
+
+这个问题其实很大，考虑到大家可能不太喜欢听那些空洞的理论，所以我就直接分享我自己的做法，以及我观察到的一些成长很快的大佬都是怎么做的。
+
+> 其实这个问题我在直播时聊过，可以看视频版：https://bilibili.com/video/BV1DC4y177sB
+
+
+
+## 一、每天读几篇文章
+
+嗯，每天就读 2 ~ 3 篇文章，不用多，能养成习惯就好。
+
+但是你要有选择地读，不要什么都读。
+
+读什么文章呢？首先是 **行业趋势类** 的文章，让你始终跟紧这个行业，能跟同事和面试官聊新的东西。比如说 AI 火了，首先要去了解一下 AI 会不会对自己有影响，如果会，那就去学习一下 AI 相关的工具。
+
+其次是 **技术类的文章**，但一定要结合自己工作相关的方向。假设你每天读 2 ~ 3 篇文章，一年是多少？一年那就是将近 1000 篇！你换算成教程，那可能就是几十个教程。这对你的成长绝对是巨大的，而且这是一个非常轻松的工作。
+
+我自己也是坚持这么做的。哪怕说我现在开公司了，我反而会读更多的文章，因为我现在不仅要了解行业趋势、了解技术，我还要了解产品、了解项目管理，甚至要了解怎么招人。
+
+有同学问看哪里的文章？最推荐的是 **大厂的技术博客**。我关注了一大堆的技术团队，当然这些分享的内容可能会比较硬核。还有科技资讯类、经验分享、编程趋势、技术干货，我自己的号基本上什么都分享。
+
+像今年我们还打造了完全免费的 AI 交流圈，大家可以没事儿来刷一刷：https://ai.codefather.cn
+
+
+
+
+
+## 二、持续学习新技术
+
+如果你能做到上面这点，恭喜你，可以进阶提升一下每日学习的时长，因为有些知识是不建议碎片化学习的。
+
+你可以尝试每天抽不到一个小时，看 2 ~ 3 集教程，只要坚持一个月，你就能看完一套课。如果在你工作期间，一年内你有 6 个月能做到这点，那么你不会被淘汰。
+
+这里有一个重要的点：**裁员不等于淘汰**。你被裁了，不一定是你的问题，因为有可能是这家公司经营不善或者公司不干人事，这是最坏的情况，不要因为一些不可抗力影响了自己的信心。
+
+
+
+## 三、复盘总结
+
+这个是我到现在一直都在做的事情，而且这个复盘总结很简单：
+
+第一步：每天记录自己完成的工作。
+
+你今天修了个 bug，记下来，一分钟都不到；你做完了一个需求，记下来，贴个文档，就这么简单。像我当时一般是每天下班前会记录。
+
+第二步：每月记录自己这个月重点在做的事，以及完成的工作、学习的情况等。
+
+我当时刚开始实习的时候，每天都在记。我不仅记工作内容，还在记感悟、收获。比如跟导师交流之后，有很多的想法，我都会记。
+
+第三步：每半年，或者说每完成一个大事，做一个复盘总结。
+
+这个复盘总结就相对要完整一点，就是记录自己做这件事情的经历、过程、结果，以及好和不好的地方。你把这个点记录完成之后，你在做下一段事情的时候，重复的坑就不会踩了。而且很多公司本来就要求半年或一年搞一次绩效评估，如果你之前就已经有记录总结，写这玩意的时候那不是直接复制粘贴？
+
+
+
+## 四、整理自己的弹药库
+
+大家觉得工作 3 年的人和工作 1 年的人相比，最大的差别或者多出来的东西是什么？
+
+那就是经验啊！
+
+你不能说工作 3 年的人，你积累的内容和工作 1 年的人是一样的，哪怕剩下 2 年天天 CRUD，也得成为 CRUD 大师了。
+
+那为什么有些人工作 3 年还和 1 年一样呢？
+
+因为他可能的确工作了 3 年，但是到第 3 年的时候，第 1 年自己做过的事情就忘完了。他做过的系统设计方案、他接触过的技术，全都忘了。
+
+实际上你别说 3 年，我都不记得自己 1 个月前写了什么代码。
+
+
+
+**经验积累是决定你后续的路能走多远、走多稳的一个重要因素**。
+
+怎么积累呢？
+
+
+
+### 1、整理属于自己的 bug 库
+
+也就是你解决过的问题，这很有可能成为你跟面试官交流的素材。
+
+
+
+### 2、整理属于自己的经验库
+
+就是你工作中的技巧和踩过的坑，不一定局限于编程方面，也可以是职场经验。比如我当时自己感悟出来的：
+
+- 你不要把自己全部交给公司
+- 你不要把所有的底牌暴露出来
+- 你不要让你的老板觉得你只有这些东西了
+- 可以和同事交朋友，但是要注意保持边界
+
+虽然有的经验不一定对，但这也是自己沉淀的东西。
+
+
+
+### 3、整理自己学过的知识点
+
+把你学过的所有知识点，以碎片的形式进行记录整理。
+
+什么叫碎片呢？
+
+我就以编程导航给大家拆解的项目知识碎片为例。所谓的知识碎片，就是那种你可以把它拆解出来，去运用到任何项目上的一个很小很小的知识点。
+
+比如说 Ant Design Pro 框架怎么用，就是一个知识碎片；怎么初始化 Java 项目，就是一个很简单的知识碎片。
+
+为什么我建议大家整理碎片呢？
+
+首先，整理碎片很简单，你就写清楚一个很小很小的知识点，哪怕只有 5 分钟，把它写出来。这样你没有那种 "我要写一篇长篇大论" 的负担，有利于你养成习惯。
+
+像鱼皮自己有个有趣的习惯，我会 "口遁"，有时候想记录了，直接掏出手机叭叭一通乱说，利用语音转文字快速记录。实不相瞒，有些文章都是我口遁出来的，看过我直播的同学应该也知道，给我个话题，我叭叭能给你说一大堆有的没的。
+
+
+
+其次，为什么要拆成碎片？是因为每个碎片它都是可复用的。你之后想做一个自己的项目了，你就打开整理的知识碎片列表看一看。比如说这个项目，能不能给它加一个全局权限管理？能不能加个缓存？如果发现能加，那就点进具体的知识碎片，看看我之前是怎么做的就好了。
+
+
+
+### 4、积累自己的工具库
+
+你用什么记录笔记？你用什么去写文档？用什么做思维导图？
+
+这些都是你可以整理的。
+
+比如我自己经常上网学东西，不经意间就发现了一个新的宝藏工具，如果我不积累，可能真到需要使用这个工具时，就想不起来了。
+
+最理想的情况下，当你换了一台电脑的时候，你能够很快地把你常用的工具在你的新电脑上完成安装，这就发挥了工具库的意义。
+
+
+
+## 五、分享
+
+这个真的是我自己的真实经历，你们都能看得到。
+
+**注意，分享不等于做自媒体！** 自媒体可能是分享后面的阶段。当你分享的内容多了之后，再去做自媒体，那叫水到渠成，而不用刻意。
+
+要怎么做呢？
+
+还记得我前面提到的几个建议么，现在是不是已经有一堆自己的干货了？比如：
+
+1. 分享自己的复盘总结和经历
+2. 分享自己的弹药库
+3. 分享自己学过的知识点
+4. 帮助别人答疑解惑
+
+这 4 点你只要做到，并且坚持做之后，你哪怕是没有专门想去做自媒体，你一定会收获一些粉丝，一定会得到一些关注。
+
+记得我刚开始做自媒体时，分享的全部是面试题。为什么呢？因为我那段时间就是在找工作，我那段时间自己就天天看这些东西，我顺便把它分享出来，仅此而已。不需要给我增加什么额外的负担，为了帮助自己加深印象，我才去分享。
+
+你会发现，我前面提的几个成长之法，全部都是按照顺序来的，是很自然的、在工作中可以做的，并且给你带来成长的事情。先学技术，持续积累，然后复盘总结，复盘总结过程中持续整理，整理之后把它分享出来。
+
+
+
+## 六、学会目标拆解
+
+在做以上的事情的过程中，你要持续地践行一个操作，就是 **将目标拆解**。
+
+当你意识到想要做一件很大的事情很难的时候，你要学会把这个目标进行拆解。把一件大事拆分成一些更确定的、更简单的，甚至是你利用碎片化时间都能学习的小事。
+
+比如说你要过英语四级，可以把它拆解为每天背 10 个单词，每周背 50 个单词并且复习，每月背 200 个单词并且复习。
+
+大家有的时候之所以不去做，是不是因为觉得太难了？我会担心自己做不下来、我会觉得自己工作忙，可能今天想做，明天工作一忙，我又把它搁置了。**因为有很多的不确定性，所以导致我们最后什么事情都做不了。**
+
+所以说大家一定要学会工作的拆解、目标的拆解，把它拆分成一条路线，一个很清晰的文档。哪怕你中间隔了 7 天，只要捡起来，就能按照文档往下一步一步地继续走，那就能够完成。
+
+如果你觉得一件事情非常难，那么就从简单的事情开始做起。如果你觉得一个小计划还难，那就再拆。如果你觉得看一节课都难，那就再拆，拆分成每天看 10 分钟，4 天看完一节 40 分钟的课。这样做最起码能保证你有一定的收获，不至于任何事情都开启不了。
+
+**种一棵树最好的时间是 10 年前，其次是现在。**
+
+什么时候开始都不晚，因为还有很多同学比你更晚。就从明天开始坚持 7 天，然后试着坚持 21 天，你绝对能意识到自己的进步。
+
+
+
+---
+
+
+
+以上就是关于程序员工作后怎么提升自己的分享，当然我相信不仅局限于程序员，任何工作都是适用的，希望对大家有帮助！
+
+
+
+
+## 推荐资源
+
+1）鱼皮 AI 导航网站：[AI 资源大全、最新 AI 资讯、免费 AI 教程](https://ai.codefather.cn)
+
+2）编程导航学习圈：[学习路线、编程教程、实战项目、求职宝典、交流答疑](https://www.codefather.cn)
+
+3）程序员面试八股文：[实习/校招/社招高频考点、企业真题解析](https://www.mianshiya.com)
+
+4）程序员写简历神器：[专业模板、丰富例句、直通面试](https://www.laoyujianli.com)
+
+5）1 对 1 模拟面试：[实习/校招/社招面试拿 Offer 必备](https://ai.mianshiya.com)
diff --git a/Vibe Coding 零基础教程/40 编程学习/11 编程工具大全.md b/Vibe Coding 零基础教程/40 编程学习/11 编程工具大全.md
new file mode 100644
index 0000000..e8e9eba
--- /dev/null
+++ b/Vibe Coding 零基础教程/40 编程学习/11 编程工具大全.md
@@ -0,0 +1,198 @@
+# 程序员必备软件工具推荐
+
+> 3000+ 程序员效率工具合集，点击即用
+
+
+
+你好，我是程序员鱼皮。
+
+在 [编程导航](https://www.codefather.cn) 群里经常看到有同学问，画流程图、架构图用什么工具？刚学编程，建议下载哪个代码编辑器？AI 工具到底哪个好用？
+
+日常总卡在 “找工具” 这一步，实在心累。
+
+于是我们上线了【编程资源工具大全】，这里一站式汇总了程序员全工作流所需的各类神器，即搜即用，大幅提高工作效率！
+
+👉 [点击获取 3000+ 程序员效率工具 codefather.cn/tool](https://codefather.cn/tool)
+
+
+
+
+
+## 一、开发工具
+
+汇总 600+ 常用编程工具和资源，涵盖主流开发环境 IDEA、VS Code，开发框架资源文档 React、Vue，代码托管平台 GitHub、Gitee 和开源镜像清华源、华为源，大幅提高开发效率。
+
+
+
+
+
+### 推荐工具 Top 5
+
+🏅 Top 1：Git
+
+分布式版本控制系统，代码版本管理核心工具，团队协作开发基础，因此作为程序员必备工具之首。
+
+🥈 Top 2：Visual Studio Code
+
+轻量级跨平台代码编辑器，强大的插件生态，支持多种编程语言，2025 年依然是程序员最热编辑器。
+
+🥉 Top 3：Cursor / Claude Code
+
+以 AI 为核心的代码编辑器，代表未来编程趋势。
+
+Top 4：JetBrains IDE 系列
+
+专业的集成开发环境，提供 IntelliJ IDEA、PyCharm、WebStorm 等全家桶软件，具有智能代码分析能力。
+
+Top 5：Navicat / DataGrip
+
+数据库管理工具，能够可视化操作数据库，支持 MySQL、PostgreSQL、MongoDB 等。
+
+
+
+## 二、AI 工具
+
+整理 1600+ AI 工具，包含 AI 编辑器 Cursor、Trae、AI 生图工具即梦、可灵 AI 和大模型平台 ChatGPT、Gemini、DeepSeek，让 AI 助力工作。
+
+
+
+
+
+### 推荐 AI 工具
+
+AI 编程工具：Cursor、GitHub Copilot、Codeium、Windsurf
+
+AI 对话工具：ChatGPT、Claude、通义千问、DeepSeek、Kimi
+
+AI 绘图工具：Midjourney、Stable Diffusion、即梦、可灵 AI
+
+AI 写作工具：Notion AI、秘塔写作猫、火山写作
+
+AI 视频工具：Runway、Pika、剪映
+
+
+
+## 三、设计工具
+
+提供从 0 到 1 的设计工具合集，产品原型设计 Axure、Draw.io，平面创意设计 Canva、稿定设计和配色工具 Coolors、Color Hunt，覆盖产品开发工作流。
+
+
+
+
+
+### 推荐设计工具
+
+原型设计：Axure、墨刀、即时设计
+
+绘图工具：Draw.io、ProcessOn、亿图图示
+
+平面设计：Canva、稿定设计、创客贴
+
+配色工具：Coolors、Color Hunt、中国色
+
+
+
+## 四、测试和项目管理工具
+
+精选测试和项目管理工具，包含自动化测试 Selenium、API 调试 Postman、Apifox 和主流项目管理平台禅道、Jira，助力团队高效协作和交付。
+
+
+
+
+
+### 推荐工具
+
+API 测试：Postman、Apifox、JMeter
+
+自动化测试：Selenium、Cypress、Playwright
+
+项目管理：禅道、Jira、Trello、飞书项目
+
+团队协作：企业微信、飞书、钉钉
+
+
+
+## 五、运维部署
+
+整合主流云平台与和运维部署工具，涵盖容器和运维 Docker、Nginx、边缘部署平台 Vercel、Cloudflare 和云服务平台阿里云、腾讯云、华为云。
+
+
+
+
+### 推荐工具
+
+**容器技术**：Docker Desktop、Kubernetes
+
+**Web 服务器**：Nginx、Apache、Caddy
+
+**部署平台**：Vercel、Railway、Sealos、Cloudflare Pages
+
+**云服务**：阿里云、腾讯云、华为云、AWS
+
+**终端工具**：Xshell、FinalShell、iTerm2、Windows Terminal
+
+
+
+## 六、效率工具
+
+除了开发相关的工具，还有一些能提升工作效率的通用工具，基本上鱼皮都用过。
+
+- Postman / Apifox / JMeter：API 接口调试、自动化测试、文档生成；JMeter 提供专业压力测试和性能分析
+
+- VMware Workstation / VirtualBox：虚拟机软件，多环境开发测试必备
+
+- Docker Desktop：容器技术，简化应用打包、分发与运行
+
+- Xshell / FinalShell：SSH 终端工具，远程服务器连接管理
+
+- Mac iTerm2 / Windows Terminal：终端工具，更好的终端体验
+
+- Homebrew（Mac）/ Chocolatey（Windows）：包管理工具，快速安装各类软件
+
+- WinSCP / FileZilla：文件传输工具，FTP/SFTP 客户端
+
+- Fiddler / Charles / Wireshark：抓包调试工具 + 网络协议分析
+
+- Notion / 语雀：文档知识管理平台，团队协作文档编写
+
+- Typora / PicGo / mdnice：Markdown 编辑器、图床管理工具、公众号排版神器
+
+- 企业微信 / 飞书：团队沟通协作平台
+
+- uTools / Alfred：效率工具启动器，快速启动应用和工具
+
+- Snipaste：截图贴图工具，支持贴图显示和标注
+
+- Everything：文件搜索神器，秒速定位所需文件
+
+- 剪切助手：跨平台剪贴板管理工具，多设备同步（https://jianqiezhushou.com）
+
+
+
+
+## 如何获取这些工具？
+
+所有工具都可以在编程导航的工具板块找到，而且按照使用场景分类，方便查找。
+
+👉 [点击获取 3000+ 程序员效率工具 codefather.cn/tool](https://codefather.cn/tool)
+
+如果你也有推荐的宝藏工具，欢迎主动上传，我们会定期审核，通过后将和所有人分享，一起共建这个工具箱。
+
+
+
+好工具，早发现、早使用。
+
+
+
+
+## 推荐资源
+
+1）鱼皮 AI 导航网站：[AI 资源大全、最新 AI 资讯、免费 AI 教程](https://ai.codefather.cn)
+
+2）编程导航学习圈：[学习路线、编程教程、实战项目、求职宝典、交流答疑](https://www.codefather.cn)
+
+3）程序员面试八股文：[实习/校招/社招高频考点、企业真题解析](https://www.mianshiya.com)
+
+4）程序员写简历神器：[专业模板、丰富例句、直通面试](https://www.laoyujianli.com)
+
+5）1 对 1 模拟面试：[实习/校招/社招面试拿 Offer 必备](https://ai.mianshiya.com)
diff --git a/Vibe Coding 零基础教程/40 编程学习/MCP 服务开发.md b/Vibe Coding 零基础教程/40 编程学习/MCP 服务开发.md
new file mode 100644
index 0000000..2dfe672
--- /dev/null
+++ b/Vibe Coding 零基础教程/40 编程学习/MCP 服务开发.md
@@ -0,0 +1,279 @@
+# MCP 服务开发保姆级教程
+
+> 从零开始开发 MCP 服务
+
+
+
+你好，我是程序员鱼皮。
+
+有个 AI 相关的概念特别火，叫 MCP，全称模型上下文协议（Model Context Protocol）。这是由 Anthropic 推出的一项开放标准，目标是为大型语言模型和 AI 助手提供一个统一、标准化的接口，使 AI 能够轻松操作外部工具并完成更复杂的任务。
+
+这篇文章，就带大家速通 MCP，了解其核心概念，并且以我们给自己产品 [面试鸭](https://www.mianshiya.com/) 开发的面试搜题 MCP 服务为例，带大家实战 MCP 服务端和客户端的开发！
+
+开源指路：https://github.com/yuyuanweb/mcp-mianshiya-server
+
+
+
+
+
+## 一、MCP 为啥如此重要？
+
+以前，如果想让 AI 处理我们的数据，基本只能靠预训练数据或者上传数据，既麻烦又低效。而且，就算是很强大的 AI 模型，也会有数据隔离的问题，无法直接访问新数据。
+
+现在，MCP 解决了这个问题，它突破了模型对静态知识库的依赖，使其具备更强的动态交互能力，能够像人类一样调用搜索引擎、访问本地文件、连接 API 服务，甚至直接操作第三方库。
+
+更重要的是，只要大家都遵循 MCP 这套协议，AI 就能无缝连接本地数据、互联网资源、开发工具、生产力软件，甚至整个社区生态，实现真正的 "万物互联"，这将极大提升 AI 的协作和工作能力，价值不可估量。
+
+
+
+
+
+## 二、MCP 总体架构
+
+MCP 的核心是 "客户端 - 服务器" 架构，其中 MCP 客户端主机可以连接到多个服务器。客户端主机是指希望通过 MCP 访问数据的程序，比如 Claude Desktop、IDE 或 AI 工具。
+
+
+
+
+
+## 三、MCP 开发
+
+MCP 的使用分为两种模式，STDIO 模式（本地运行）和 SSE 模式（远程服务）。
+
+
+
+### MCP 服务端（基于 stdio 标准流）
+
+基于 stdio 的实现是最常见的 MCP 客户端方案，它通过标准输入输出流与 MCP 服务器进行通信。特别适用于本地部署的 MCP 服务器。
+
+**1、引入依赖**
+
+```xml
+
+ org.springframework.ai
+ spring-ai-mcp-server-spring-boot-starter
+ 1.0.0-M6
+
+```
+
+**2、配置 MCP 服务端**
+
+```yaml
+spring:
+ application:
+ name: mcp-server
+ main:
+ web-application-type: none # 必须禁用web应用类型
+ banner-mode: off # 禁用banner
+ ai:
+ mcp:
+ server:
+ stdio: true # 启用stdio模式
+ name: mcp-server # 服务器名称
+ version: 0.0.1 # 服务器版本
+```
+
+**3、实现 MCP 工具**
+
+`@Tool` 是 Spring AI MCP 框架中用于快速暴露业务能力为 AI 工具的核心注解。下面是一段示例代码：
+
+```java
+/**
+ * 根据搜索词搜索面试鸭面试题目
+ */
+@Tool(description = "根据搜索词搜索面试鸭面试题目")
+public String callMianshiya(String searchText) {
+ // 执行从面试鸭数据库中搜索题目的逻辑
+ System.out.println("用户要搜索：" + searchText);
+}
+```
+
+**4、注册 MCP 工具**
+
+```java
+@Bean
+public ToolCallbackProvider serverTools(MianshiyaService mianshiyaService) {
+ return MethodToolCallbackProvider.builder()
+ .toolObjects(mianshiyaService)
+ .build();
+}
+```
+
+**5、运行服务端**
+
+```bash
+mvn clean package -DskipTests
+```
+
+
+
+### MCP 客户端（基于 stdio 标准流）
+
+**1、引入依赖**
+
+```xml
+
+ org.springframework.ai
+ spring-ai-mcp-client-spring-boot-starter
+ 1.0.0-M6
+
+```
+
+**2、配置 MCP 服务器**
+
+```yaml
+spring:
+ ai:
+ mcp:
+ client:
+ stdio:
+ servers-configuration: classpath:/mcp-servers-config.json
+```
+
+其中 `mcp-servers-config.json` 的配置如下：
+
+```json
+{
+ "mcpServers": {
+ "mianshiyaServer": {
+ "command": "java",
+ "args": [
+ "-Dspring.ai.mcp.server.stdio=true",
+ "-Dspring.main.web-application-type=none",
+ "-Dlogging.pattern.console=",
+ "-jar",
+ "/yourPath/mcp-server-0.0.1-SNAPSHOT.jar"
+ ]
+ }
+ }
+}
+```
+
+**3、初始化聊天客户端**
+
+```java
+@Bean
+public ChatClient initChatClient(ChatClient.Builder chatClientBuilder,
+ ToolCallbackProvider mcpTools) {
+ return chatClientBuilder.defaultTools(mcpTools).build();
+}
+```
+
+**4、接口调用**
+
+```java
+@PostMapping(value = "/ai/answer")
+public String generate(@RequestBody AskRequest request) {
+ return chatClient.prompt()
+ .user(request.getContent())
+ .call()
+ .content();
+}
+```
+
+
+
+### MCP 服务端（基于 SSE）
+
+除了基于 stdio 的实现外，Spring AI 还提供了基于 Server-Sent Events (SSE) 的 MCP 方案。相较于 stdio 方式，SSE 更适用于远程部署的 MCP 服务器。
+
+**1、引入依赖**
+
+```xml
+
+ org.springframework.ai
+ spring-ai-mcp-server-webflux-spring-boot-starter
+ 1.0.0-M6
+
+```
+
+**2、配置 MCP 服务端**
+
+```yaml
+server:
+ port: 8090
+spring:
+ ai:
+ mcp:
+ server:
+ name: mcp-server
+ version: 0.0.1
+```
+
+**3、运行服务端**
+
+```bash
+mvn clean package -DskipTests
+java -jar target/mcp-server-0.0.1-SNAPSHOT.jar
+```
+
+
+
+## 四、软件使用 MCP
+
+除了利用程序去调用 MCP 服务外，MCP 服务端还支持任意支持 MCP 协议的智能体助手，比如 Claude、Cursor 以及 Cherry Studio 等，都可以快速接入。
+
+以 Cherry Studio 为例：
+
+1、打开 Cherry Studio 的 "设置"，点击 "MCP 服务器"
+
+
+
+2、点击 "编辑 JSON"，将 MCP 配置添加到配置文件中
+
+3、在 "设置 => 模型服务" 里选择一个模型，勾选工具函数调用功能
+
+4、进入聊天页面，在输入框下面勾选开启 MCP 服务
+
+
+
+配置完成，尝试搜索下面试题目，效果不戳！
+
+
+
+甚至还进行面经解析，返回多个面试题目与答案的链接！
+
+
+
+当然这个功能我们 [面试鸭官方](https://www.mianshiya.com/) 也实现了，帮助大家面试复盘：
+
+
+
+
+
+## 五、上传 MCP 服务
+
+和开发一个 APP 一样，我们也可以把做好的 MCP 服务分享到第三方 MCP 服务平台。比如 MCP.so，可以理解为 MCP 服务的应用市场。
+
+
+
+直接点击头像左侧的提交按钮，然后填写 MCP 服务的项目地址、以及服务器配置实例，点击提交即可。
+
+
+
+提交完成后就可以在平台搜索到了：
+
+
+
+
+
+---
+
+
+
+OK 就分享到这里，学会的话记得点赞收藏哦。也欢迎大家在评论区交流你对 MCP 的看法和理解~
+
+
+
+
+## 推荐资源
+
+1）鱼皮 AI 导航网站：[AI 资源大全、最新 AI 资讯、免费 AI 教程](https://ai.codefather.cn)
+
+2）编程导航学习圈：[学习路线、编程教程、实战项目、求职宝典、交流答疑](https://www.codefather.cn)
+
+3）程序员面试八股文：[实习/校招/社招高频考点、企业真题解析](https://www.mianshiya.com)
+
+4）程序员写简历神器：[专业模板、丰富例句、直通面试](https://www.laoyujianli.com)
+
+5）1 对 1 模拟面试：[实习/校招/社招面试拿 Offer 必备](https://ai.mianshiya.com)
diff --git a/Vibe Coding 零基础教程/40 编程学习/团队研发规范.md b/Vibe Coding 零基础教程/40 编程学习/团队研发规范.md
new file mode 100644
index 0000000..8fad1e7
--- /dev/null
+++ b/Vibe Coding 零基础教程/40 编程学习/团队研发规范.md
@@ -0,0 +1,177 @@
+# 团队研发规范
+
+> 企业级研发规范实践指南
+
+
+
+你好，我是程序员鱼皮。
+
+前几天我分享了自己创业一周年的复盘总结，其中提到了一点：随着团队的扩大，我们会更注重研发规范和技术沉淀。
+
+有程序员朋友就问了：啥是研发规范？
+
+还有朋友表示：鱼皮别拿咱当外人，把你们公司的研发规范发来看看？
+
+
+
+可以，必须安排！
+
+这篇文章就给大家简单分享下我们公司的研发规范，不过在开始前必须要明确 2 点：
+
+1. 每个团队都应该根据情况定制自己的研发规范，别人的规范仅供参考，未必最适合你们团队。
+2. 篇幅有限，本文仅分享一些我认为很重要的规范，并且移除了我们自己的敏感信息。
+
+⭐️ 本文对应视频版：https://bilibili.com/video/BV1fi421C78M
+
+
+
+## 一、项目整体研发流程
+
+1）团队共同确认目标和规划
+
+开会讨论，产出目标和规划文档
+
+2）产品调研和需求分析
+
+产出调研报告和需求分析文档
+
+3）需求评审
+
+开需求评审会，明确要做的需求和工作，评估工作量并明确工作时间节点。
+
+4）方案设计
+
+产出方案设计文档，比如数据库表设计、页面设计、接口设计等。
+
+5）研发
+
+包括各自开发、单元测试、前后端联调等
+
+6）测试和验收
+
+包括研发自测、产品验收、组内验收等
+
+7）代码提交
+
+提交可上线的代码，需要由负责人审查，通过后可合并
+
+8）部署上线
+
+将代码发布到服务器上，组内进行上线通知并更新上线文档，上线后需要自行验证
+
+9）产品迭代
+
+持续收集用户对新功能的反馈、并进行数据分析，从而验证改动效果，便于下一轮的更新迭代。
+
+
+
+## 二、开发规范
+
+
+### 开发前注意事项
+
+1）确保自己充分理解了业务和需求，需要先进行整体的方案设计；尤其是对于重要需求和核心业务，必须先跟组内同学核对方案并通过后，才能下手开发，避免重复工作。
+
+2）先熟悉项目再开发，建议阅读项目文档、项目代码、接口文档、前端组件文档等。
+
+3）慎重引入新的依赖或类库、或者升级版本，重大依赖变更需要和组内其他成员确认。
+
+4）熟悉团队已实现的功能和代码，尽量复用，避免重复开发。
+
+5）熟悉团队内部的研发规范，并在 IDE 中进行相应的配置，比如前端配置 ESLint、Prettier 等代码规范插件。
+
+
+
+### 开发中注意事项
+
+1）开发新功能时，确保从项目仓库拉取 **最新主分支** 的代码。
+
+2）每个功能都要新建自己的分支进行开发，**千万不要直接修改主分支的代码**！注意分支名称要使用英文、足够语义化，不要和其他人的混淆。
+
+3）开发时，尽量复用现有的功能、模块、类、方法、对象代码。有现成的代码，就不要再重复编写。
+
+4）开发时，遵循团队内部的研发规范，尽量参考现有项目代码的写法，尤其是不要使用和原项目不一致的格式、命名、写法，避免特立独行。
+
+5）开发过程中，有任何不明确的地方，不要凭空猜测，及时去联系项目的其他成员或负责人确认。
+
+6）开发过程中，每隔一段时间（比如 1 - 3 天）可以使用 `git pull` 同步一下最新的主分支代码，防止合并代码冲突。
+
+7）开发过程中，注意整体时间进度的把控，先完成再完美，有风险时及时反馈。
+
+8）开发时，需要格外注意对异常情况的捕获和处理。
+
+9）每个分支尽量保证纯净，尽量减少每次开发和提交时改动的代码量。建议每次开分支只改一个功能、Bug 或模块，不要把多个不相关的功能写在一起，并且非必要不修改。
+
+10）完成部分功能开发后，一定要自测！自测时，可以 Mock 假数据。**注意一定不要在线上测试、一定不要影响线上数据！**
+
+
+
+## 三、代码提交规范
+
+1）只有通过测试和产品验收的代码，才能够发起合并到主分支的 PR 请求。在这之前可以提交到自己的分支。
+
+2）发起合并到主分支的 PR 前，**一定要完整阅读 3 遍自己的代码**，避免不规范的写法和无意义的改动。
+
+3）每次合并尽量只专注于一个功能或改动，避免多个功能耦合在一起合并，提高审查效率并降低改动风险。
+
+4）每次提交时，需要在 commit 信息中提供代码改动说明，还可以通过关联需求文档、测试用例、方案文档、效果截图等方式进行补充说明。
+
+commit 信息可参考[《约定式提交》文档](https://www.conventionalcommits.org/zh-hans/v1.0.0/)，但不做强制要求。
+
+5）除非特殊情况，否则所有的代码必须经过至少一位项目负责人 Code Review 审核通过后，才能合并；并且只有合并到主分支的代码才允许发布上线。
+
+
+
+## 四、上线规范
+
+
+### 上线前注意事项
+
+1）上线前，除了严格验证功能特性能否正常运行、并符合需求外，还要格外关注程序的：
+
+- 健壮性。比如给用户友好的错误提示、输入校验。
+- 安全性。防止越权操作、输入校验。
+- 稳定性。尽量保证调用 100% 成功，如果有几率失败，要考虑重试或容错策略。
+
+2）除非特殊情况，只有经过产品验证的功能、通过代码审核的主分支代码才允许发布上线。
+
+3）除非特殊情况，尽量在工作日上线（建议周二 ~ 周四），保证上线后出了问题时能够及时修复。
+
+
+
+### 上线后注意事项
+
+1）上线后，一定要再次进行完整流程的测试，尤其要重点关注权限相关的功能测试。
+
+2）上线后，一定要在群内及时同步上线信息，周知相关的成员，如果遇到问题第一时间反馈。
+
+3）首次上线后，需要即时配置监控告警。
+
+4）上线验证通过、并经过内部群成员确认后，可以在外部用户群发布版本更新公告。
+
+5）上线后，即时更新项目的更新记录文档。
+
+6）注意，上线不是终点。上线后的一段时间（至少一周内），一定要持续观察自己负责的功能是否正常运行、持续接受用户反馈、通过数据分析来观察新功能的效果，期间有任何问题都需要即时修复处理，并且准备好下一期的改进迭代。
+
+
+
+## 写在最后
+
+以上就是我们公司的研发规范，希望对大家有帮助。
+
+再次强调，每个团队都应该根据自己的情况定制研发规范，这份规范仅供参考。
+
+
+
+
+## 推荐资源
+
+1）鱼皮 AI 导航网站：[AI 资源大全、最新 AI 资讯、免费 AI 教程](https://ai.codefather.cn)
+
+2）编程导航学习圈：[学习路线、编程教程、实战项目、求职宝典、交流答疑](https://www.codefather.cn)
+
+3）程序员面试八股文：[实习/校招/社招高频考点、企业真题解析](https://www.mianshiya.com)
+
+4）程序员写简历神器：[专业模板、丰富例句、直通面试](https://www.laoyujianli.com)
+
+5）1 对 1 模拟面试：[实习/校招/社招面试拿 Offer 必备](https://ai.mianshiya.com)
diff --git a/Vibe Coding 零基础教程/50 产品变现/00 产品变现导读.md b/Vibe Coding 零基础教程/50 产品变现/00 产品变现导读.md
new file mode 100644
index 0000000..4e9b627
--- /dev/null
+++ b/Vibe Coding 零基础教程/50 产品变现/00 产品变现导读.md
@@ -0,0 +1,125 @@
+# 产品变现导读
+
+> 从想法到收益，让你的产品真正产生价值
+
+
+
+你好，我是程序员鱼皮，前腾讯全栈开发，全网 200 万粉的 [AI 编程博主](https://space.bilibili.com/12890453)，也是 [AI 导航](https://ai.codefather.cn) 和 [编程导航](https://www.codefather.cn) 等 10+ 自研产品的创造者。
+
+如果你已经学完了前面的内容，并且成功做出了一些项目，那么恭喜，你已经具备了把想法变成产品的能力。
+
+但是你现在心里可能会有这样的疑问：
+
+- 做出来的东西挺好的，但怎么才能让它产生价值呢？
+- 我想让更多人用我的产品，但不知道从哪里开始......
+- 看着别人的产品都能赚钱，我也想试试，但感觉无从下手。
+
+这些想法都很正常，这个板块就是专门为了解决这些问题而设计的。
+
+
+
+## 一、为什么要学产品变现？
+
+很多同学做完项目后，就把代码往 GitHub 一扔，然后继续学新技术、做新项目。结果就是：做了很多项目，但没有一个真正产生价值。
+
+**变现，是检验产品价值的重要标准。**
+
+更重要的是，在 Vibe Coding 时代，做产品的门槛已经低到了前所未有的程度。你不需要精通所有商业知识，只需要：
+
+1. 知道自己的产品能解决什么问题
+2. 了解基本的产品运营方法
+3. 会用合适的方式让产品产生价值
+
+这三点，通过这个板块的学习，你都能掌握。
+
+
+
+## 二、这个板块会讲什么？
+
+这个板块的核心内容包括 **产品开发的完整流程** 和 **产品变现的实战经验**。
+
+### 主线内容（建议按顺序学习）
+
+首先，我会从产品变现的思维开始，帮你理解为什么要做产品、如何思考产品的价值。这是做好产品的基础，强烈建议先学习这部分。
+
+然后，我会带你了解产品开发的完整流程，包括需求分析、文档沉淀、技术选型、架构设计、研发流程等。这些都是我在腾讯和创业过程中积累的实战经验。
+
+接着是产品变现的核心内容，包括盈利模式设计、付费策略设计等，让你了解如何让产品真正产生收益。
+
+最后是产品推广的重要一环，SEO 搜索引擎优化，教你如何让更多人发现你的产品。
+
+
+
+### 支线内容（可选择性学习）
+
+除了主线内容外，我还准备了一些实战经验分享：
+
+- 网站数据保护实践：如何防止网站被恶意爬虫攻击
+- 系统监控告警实践：如何及时发现和处理系统问题
+- 网站数据分析实战：如何通过数据分析优化产品
+- 我的自媒体起号经验：如何从 0 开始做自媒体
+- 我的自媒体涨粉运营之路：我从 0 到 200 万粉的真实经历
+
+这些内容都是我在实际做产品过程中的真实经验，可以根据需要选择性学习。
+
+
+
+## 三、如何使用这个板块？
+
+这个板块的文章分为主线和支线两部分，你可以根据自己的情况灵活选择。
+
+如果你是完全新手，我建议先按顺序学习主线内容，了解产品开发和变现的基本方法。然后根据自己的需求，选择性学习支线内容。
+
+如果你对某个领域特别感兴趣，也可以直接跳到对应的章节。比如你想了解如何防止网站被攻击，可以直接看网站数据保护实践；你想学习自媒体运营，可以直接看自媒体相关的内容。每篇文章都是相对独立的，不看前面的内容也能理解。
+
+如果你已经有了自己的产品，想要让它产生价值，可以重点学习盈利模式设计、付费策略设计、SEO 优化等内容。
+
+对于想深入学习的同学，建议把主线和支线内容都学完，这样能对产品变现有一个全面的认识。
+
+
+
+## 四、你能收获什么？
+
+通过这个板块的学习和实践，你将能够：
+
+1. 建立产品变现的思维模式
+2. 掌握产品开发的完整流程
+3. 了解多种产品盈利模式
+4. 学会设计合理的付费策略
+5. 掌握产品推广的基本方法
+6. 积累实战经验，避免常见的坑
+
+学完之后你会发现：**原来让产品产生价值可以这么简单！**
+
+
+
+## 写在最后
+
+我知道，看到 “产品变现” 这几个字，很多同学会觉得有点功利。但是在 Vibe Coding 的帮助下，做产品变现真的没有你想象的那么难。
+
+还记得我在《基础必读》中说过的吗？今天，是人类历史上学习编程最容易的时刻。而做产品变现，也是如此。
+
+你不需要成为商业专家，不需要有很多资源，你只需要：
+
+- 有一个能解决问题的产品
+- 能够清楚地表达产品的价值
+- 愿意花时间去尝试和优化
+
+这 3 点，你都已经具备了。
+
+下面让我们一起开始这段激动人心的产品变现之旅吧！
+
+
+
+
+## 推荐资源
+
+1）鱼皮 AI 导航网站：[AI 资源大全、最新 AI 资讯、免费 AI 教程](https://ai.codefather.cn)
+
+2）编程导航学习圈：[学习路线、编程教程、实战项目、求职宝典、交流答疑](https://www.codefather.cn)
+
+3）程序员面试八股文：[实习/校招/社招高频考点、企业真题解析](https://www.mianshiya.com)
+
+4）程序员写简历神器：[专业模板、丰富例句、直通面试](https://www.laoyujianli.com)
+
+5）1 对 1 模拟面试：[实习/校招/社招面试拿 Offer 必备](https://ai.mianshiya.com)
diff --git a/Vibe Coding 零基础教程/50 产品变现/01 为什么要做产品变现？.md b/Vibe Coding 零基础教程/50 产品变现/01 为什么要做产品变现？.md
new file mode 100644
index 0000000..eb69027
--- /dev/null
+++ b/Vibe Coding 零基础教程/50 产品变现/01 为什么要做产品变现？.md
@@ -0,0 +1,181 @@
+# 为什么要做产品变现？
+
+> 想清楚为什么做，才能做得更好
+
+
+
+大家好，我是鱼皮。在做一个产品前，我们首先要问清楚自己：**为什么要做它？**
+
+然后才是怎么做、怎么做的更好。
+
+这篇文章，我会以自己做 AI 产品的经历为例，给大家分享做产品变现前的思考方法。希望能帮助你在开始做产品前，想清楚自己的目标和方向。
+
+
+
+## 利
+
+为什么要做自己的 AI 产品，原因很简单，一个字：**利** 。
+
+利即收益，但利不等同于金钱，而是可以体现在许多不同的层面，包括物质、精神、情感等等。像我早期做了 2 年的免费编程知识分享，那个时候是完全没有在乎 “物质” 的利的，更多的是因为兴趣、因为帮助到粉丝们的正反馈，也就是精神和情感上的利。
+
+大家也经常听到一个词 **利他** 。为什么要利他？本质上也是利己。一方面获得了帮助他人的满足感 —— 精神和情感上的利，另一方面也能给自己带来相应的物质上的利，一举两得。所以这是我个人也比较推崇的做法。
+
+那么我就开始思考：我做 AI 产品有哪些不同层面的利？
+
+
+
+### 物质收益
+
+开公司，做产品，肯定是希望能赚米的。
+
+为什么做 AI 产品呢？不用说大家也知道，AI 现在是一个 “台风口”，比移动互联网更大的风口。
+
+可惜刚开始我还没意识到这点，那会儿我还在腾讯打工，每天也没多少时间去关注 AI，以为又是一个自媒体带起来的噱头。但等到 2 - 3 月的时候，我就意识到不对劲了，因为不单单是国内外的大厂有动作，我身边 “不学无术” 的同事们，竟然也开始聊起 AI、聊起 GPT 了？！再加上自媒体平台有越来越多 AI 相关的爆款视频、每天都会出现意想不到的新动向，我才意识到：握草，机会来了啊！
+
+所以实不相瞒，我的离职和 AI 有一定的原因，虽然早就计划好要离职了，但 AI 可以说是一脚把我从悬崖边上踹了下去。
+
+总之，我很看好 AI 的发展，而 **走在时代的前面** 的人必然是能得到更大的物质收益的，所以我决定必须要 **入局 AI** ！
+
+
+
+### 精神收益
+
+除了物质收益外，我个人会更注重精神和情感上的收益。因为我自己一直是崇尚自由的性格，无论是之前做分享、还是后面做知识付费，这些都是我热爱的领域。我不希望为了物质而追求物质，让自己受到束缚。
+
+而且就我观察和我同期做编程分享的账号来看，如果你本身并不热爱一件事，因为看到别人赚米而去模仿，可能也会有点儿蛋糕渣，但是做不大的。
+
+而入局 AI 这件事、不断接触和学习前沿知识本身，我就觉得 “泰裤辣”！我自己本身非常爱尝试、爱分享，而且说实在的，目前我积累到的传统的前后端编程技术栈和开发经验已经完全足够我做出大多数产品了，我也非常想在一个新的领域争取自己的一席之地。而 AI，对我来说就是一个神秘陌生的全新领域，在学习实践它的过程中，我会感觉非常爽 —— 对我来说，这便是精神收益了。
+
+想清楚自己的利，就可以开始进一步的思考了。
+
+
+
+## 一问：为什么要做产品？
+
+那怎么利用 AI 获得利呢？答案就在上文：**走在时代的前面** 。
+
+只要你紧跟时代，走在别人前面，看到了别人看不到的机会、得到了别人得不到的信息，那么就可以有收益。
+
+举些经典例子：
+
+1. 做自媒体，分享 AI 生成的文本和图像，给不了解 AI 的人开开眼界
+2. 做培训，分享 AI 系列教程，带不会玩 AI 的人认识 AI
+3. 做产品，接入国内外的 AI 模型，让更多人用上 AI
+4. 搞科研，了解国内外最新的技术，写出更优秀的论文
+
+
+
+那么这么多种方式，我为什么选择 **做产品** 呢？
+
+首先从难度来看，做自媒体和培训是绝大多数人都能做的、花点时间就行，而搞科研咱又不擅长，所以做产品是比较合适的。
+
+产品的定义又有很多种，可能是一系列课、可能是一个应用、也可能是某种服务。而我选择把鱼聪明 AI 做成一个网站，主要是由于：
+
+1. 自己在做网站方面的经验是比较丰富的，开发个网站很容易
+2. 网站是一个使用成本很低的信息载体，面向的受众更广
+3. 网站可以接入多种不同的技术和应用，有无限的潜能
+
+
+
+从利来看，网站面向的用户更多、可以更灵活的开发应用，自然就有了更多机会。而持续打磨一个 “可能性无限” 的作品，也会让我感觉很爽，做网站就像养小孩一样，看着自己的孩子往前奔跑，会有很大的成就感。
+
+
+
+## 二问：真的要做么？
+
+虽然上面说了很多，但也只是把做 AI 产品纳入了 **可选** 计划列表，即 “可以做”。
+
+但是究竟要不要做，还要和自己的其他计划放在一起进行对比分析，通过 **权衡性价比** 来确定。
+
+这点时间有限的人来说，尤其重要。理想情况下，肯定是 “我全都要”，能获利的东西，只要我技术 OK，我都去做。但现实往往是，能同时做 2 - 3 件事，就已经很累了。所以必须有所取舍。
+
+就像学编程的同学，在学习过程中肯定会遇到很多的 “机会”，进实验室、竞赛、实习、兼职等等，也会有很多的诱惑。但是要想清楚自己的目标，问一问自己：现在这个时候，我做这件事，真的是性价比最高的选择么？
+
+回归到我自己身上，每天给自己安排 2 - 4 小时在产品探索上、还可以投入 2 名团队同学来协助开发，换算下来完成这款 AI 产品是完全可以接受的；得到的利也是无法估量的（毕竟不尝试一下谁也不知道）。所以不妨就 try 1 try~
+
+
+
+## 三问：同类产品多，还做么？
+
+在我要做 AI 产品前，很多同学都觉得现在网上已经有非常多同类的 “套壳” 产品了，但为什么我还要做呢？
+
+1）机会仍然很多。
+
+走出自己的圈子，通过调研我发现，真正了解和能用 AI 的还是极少数人，很多同学可能只是在自媒体上听说过 AI 相关的内容，但只是惊鸿一瞥，大多数人还是 “圈外人”。
+
+
+
+2）“套壳” 就没有意义了么？
+
+所谓的套壳，只是因为有前人给你铺好了路，这些是前人馈赠的资源，我们理应接受。但是并不是说套壳就不好、套壳就不能做，而是我们不能仅满足于套壳，仍然可以在此基础上增加自己的创新点，做一些自己的事情。
+
+就跟做项目一样，你可以在完成了网上项目的基础上，考虑增加自己的扩展点，把它变成你自己独特的东西。
+
+另外，很多程序员做技术久了，很容易陷进去，做什么东西都想着技术要多牛逼多牛逼，却忽视了技术本身是为了业务服务的、产品本身是给用户来用的。所以哪怕是同一类产品，也有用户体验、交互流程等很多可以优化创新的机会。
+
+
+
+3）资源为王
+
+现在这个环境，绝大多数的技术已经不再是难点了、产品创新也不再是难点了。说得现实一点，只要你有资源和一定的商业嗅觉，看到其他人的创新点，立刻就能有样学样地照搬过来，不是么？
+
+在这种情况下，如果我有一定的前期流量，就能更轻松地度过产品的冷启动阶段，再多用一些，就能脱颖而出。
+
+
+
+综合上面这些考虑，我基本确定了，是要做一款属于自己的 AI 产品了。但是在动手前，还要做一件事 —— 做好最坏的打算。
+
+
+
+## 做好最坏的打算
+
+这是我一贯的行事风格，在决定做一件事前，先给自己留条后路。
+
+那做 AI 产品这件事，我最坏的情况是什么？
+
+比如：赚不到米、浪费时间、搞心态、浪费了一些流量。
+
+但是，往好处想，即使失败了：
+
+1. 我总不会破产
+2. 我的这套系统是可以留下来的
+3. 我可以把这段经历和经验作为专栏分享给别人
+4. 积累一段失败经验
+
+
+
+用一段时间来试错，我是完全可以接受的。So，just do it！
+
+
+
+---
+
+
+
+## 写在最后
+
+以上就是我在做产品前的思考过程。无论你是想用 Vibe Coding 做个人项目，还是想做一款能产生价值的产品，都建议先想清楚这几个问题：
+
+1. 为什么要做这个产品？（利益分析）
+2. 真的要做吗？（权衡性价比）
+3. 有没有同类产品？还做吗？（竞争分析）
+4. 最坏的情况是什么？（风险评估）
+
+想清楚这些问题后，你会发现自己的目标更明确，做起来也更有动力。
+
+在 Vibe Coding 时代，做产品的门槛已经很低了。只要你有想法、愿意尝试，就一定能做出有价值的东西。
+
+加油，期待看到你的产品！💪
+
+
+## 推荐资源
+
+1）鱼皮 AI 导航网站：[AI 资源大全、最新 AI 资讯、免费 AI 教程](https://ai.codefather.cn)
+
+2）编程导航学习圈：[学习路线、编程教程、实战项目、求职宝典、交流答疑](https://www.codefather.cn)
+
+3）程序员面试八股文：[实习/校招/社招高频考点、企业真题解析](https://www.mianshiya.com)
+
+4）程序员写简历神器：[专业模板、丰富例句、直通面试](https://www.laoyujianli.com)
+
+5）1 对 1 模拟面试：[实习/校招/社招面试拿 Offer 必备](https://ai.mianshiya.com)
diff --git a/Vibe Coding 零基础教程/50 产品变现/02 需求分析和产品规划.md b/Vibe Coding 零基础教程/50 产品变现/02 需求分析和产品规划.md
new file mode 100644
index 0000000..14ef6ce
--- /dev/null
+++ b/Vibe Coding 零基础教程/50 产品变现/02 需求分析和产品规划.md
@@ -0,0 +1,175 @@
+# 需求分析和产品规划
+
+> 想清楚要做什么，才能做得更好
+
+
+
+大家好，我是鱼皮。在做任何产品前，我们首先必须要做的一件事是 **需求分析**。
+
+何为需求分析？简单来说，就是分析和明确用户的需求。
+
+那为什么要做需求分析？怎么做好需求分析？有没有什么注意事项呢？
+
+这篇文章，我会结合自己做产品的经验，带大家了解需求分析的方法和技巧。无论你是用 Vibe Coding 做个人项目，还是想做一款真正的产品，这些方法都能帮到你。
+
+
+
+## 为什么要做需求分析？
+
+我给大家举一个自己的亲身经历，有次某个多年未见的好哥们来上海找我玩，因为关系很好嘛，我想着请他吃一顿海鲜自助餐，直接就预定好了。结果呢，等我带他到海鲜店的时候，他跟我说：哥们海鲜过敏啊。。。
+
+结果就很尴尬，白白浪费了预定金和时间。这便是没有进行需求分析的结果。
+
+在我们开发项目、做产品前也是同样的道理，如果你只凭自己的一时兴起、或者主观推测去做一些事情，而忽略了用户的真实需求，就有可能花了大量的人力物力，结果做出了一款用户完全不需要的产品。
+
+像我早期做编程知识分享时，就吃了没有做需求分析的亏，凭着一腔热血更新了很多自以为有用的视频，也没有什么点赞量。后来再看，不过是自嗨而已。
+
+所以，需求分析是至关重要的。可以把它想象成一座桥梁，连接我们的产品和用户的桥梁，能够帮我们更好地通往用户的心房，明确我们要做的事情。
+
+> 注意，需求分析不是产品经理和老板才要做的！对于程序员来说，需求分析同样至关重要，这决定了你之后的开发工作到底有没有意义，千万不要做个只会听命令敲代码的 “机器人”。
+
+
+
+## 需求分析都要做什么？
+
+关于需求分析，网上有很多的方法论，我对这些方法进行了归纳总结，从 3 个方面讲给大家。
+
+
+
+### 三个方面
+
+第一个方面是 **从自己出发** ，我给它取名为 “free analysis”（自由分析）。做产品本来就应该是一件很有趣的事情，哪来那么多的条条框框，自己有什么想法、想做什么，就先尽可能多地自由记录下来。
+
+我在决定做鱼聪明 AI 时，就已经大致想好了要做哪些功能，比如大家都有的 AI 对话、AI 绘画、AI Mask、AI 导航、AI 写书等，这一步不需要真的去做 “分析”，只需要尽情想象、发散思维即可。
+
+第二个方面是 **从用户出发** 。你如果只是为了学习、自己做着玩，那么只做第一个方面的自由分析，也是合理的。但如果你想做出一款吸引人的、有更多人用的线上产品，肯定是要回归用户、以用户为核心。
+
+一句话：确认 **用户需要什么、有什么痛点** ，以此来筛选或改进我们要做的功能，避免自嗨。
+
+有很多的方法，比如常见的问卷调查、和用户交流、开会讨论等等。对我们创业小团队来说，我们本身就是用户，所以我们做需求分析时，首先就是大家一起开会讨论，每个人思考一下 “自己会不会用到这个功能”。如果某个功能我们自己都觉得不会用，那么铁定不去做；而如果某个功能大家都觉得 “握草，这个牛” ，那么这可能是我们的核心亮点功能。
+
+第三个方面是 **从竞品出发** ，也就是所谓的竞品分析了。在你还不明确要做什么功能、没有想法的时候，去体验下同类的产品，相信你会多很多想法。
+
+很多学编程的同学经常问：怎么扩展项目？答案就是：去看同类项目有什么功能，给你的项目也加上即可。
+
+不过有一点要注意，你的竞品也未必在某个功能上做到了极致，在体验竞品时，可以记录下自己真实的使用体验，取其精华去其糟粕，就有超越他们的可能性。
+
+
+
+### 明确需求
+
+通过以上 3 个方面的思考和实践，我们基本可以确认要做的核心功能了（类比为你写作文时写好了大纲）。
+
+接下来就要把需求进一步拆解和细化，尽量把每个小功能点、以及具体要做什么都明确好（类比为你要根据大纲填充内容）。
+
+比如我们鱼聪明 AI 要做的核心功能是 AI 对话，可以拆解为：
+
+1. 创建 AI 对话
+2. 查看我的 AI 对话列表
+3. 查看对话信息
+4. 发送对话消息
+5. AI 智能回答
+6. 查看对话消息记录
+7. 消息工具栏
+
+还可以再把某些功能进一步拆分，比如消息工具栏又分为：复制消息、语音朗读、下载消息等等。
+
+
+
+### 优先级编排
+
+当我们细化需求后，可能会惊讶地发现：竟然有那么多要做的事情！
+
+这个时候呢，有些同学可能就打算放弃了：这么麻烦，不做了不做了！
+
+别慌，任何系统不可能一步到位，我们要做的是给需求编排好优先级，决定先做哪个、后做哪个，然后一步步去实现。
+
+那么怎么划分优先级呢？
+
+比较常见的方法就是基于需求的重要性、紧急程度、影响范围、实施复杂度等因素，把需求分为 P0 - P3 这 4 个级别。
+
+- P0：优先级最高的需求，必须有。没有这个功能网站就不能上线。比如鱼聪明 AI 的对话和内容审核功能。
+- P1：优先要做的需求，最好有。一般是指在初期并不紧急，但后续必须要做的亮眼功能。比如鱼聪明 AI 的分享、以图生图功能。
+- P2：优先级适中的需求，可以有。一般是指可以提高用户体验、带来部分价值的需求，时间资源允许的情况下可以做。比如鱼聪明 AI 的助手高级配置功能。
+- P3：优先级最低的需求，可有可无。要么就是带来的价值较低，要么就是实现复杂度较高，可以等团队有人摸鱼的时候，再去做。比如鱼聪明 AI 的。。。呃我们貌似还没有 P3 的需求，没人能在鱼皮手下摸鱼（🐶 开个玩笑） ！
+
+这么划分优先级后，大家就优先去做 P0 就好了，P0 做完先上线一版，快速找用户验证下需求是否真的合理、能带来价值，再进行后续的开发和迭代。
+
+
+
+### 需求管理
+
+哪怕是在初期需求不多的时候，也是需要记录和管理需求的。而不是把上面所有的信息存到你的脑海中，不然就会出现 “唉，我当时为啥要做这个功能？” 的情况。
+
+那么如何进行需求管理呢？
+
+最简单的方式就是用文档来记录，不用把这件事想的很复杂，就像你记录今天自己要吃什么一样，用一个列表写下来就好了。
+
+推荐使用语雀、飞书等在线知识库网站，而不是本地记录，这样能够和团队的同学即时同步消息、协同编辑。
+
+相对正规一点，可以使用表格来搞一个需求排期表，记录下每个功能、模块、详情、优先级等信息
+
+
+
+还可以使用 XMind 等思维导图工具，对需求进行一个层级的划分，不仅团队协作时会更清晰，做 PPT 拉融资的时候也会更好看一些。
+
+再正规一点的话，可以使用 Jira、Tapd、Teambition 等专业的需求（项目）管理系统，可以帮助管理更复杂、多依赖的需求。
+
+注意，需求管理是一件持续要做的事情。而且并不是说所有的需求和功能你都能立刻想到，但是一旦有任何的想法和灵感，千万不要错过，要立即掏出手机记录下来！
+
+
+
+## 别让伪需求害了你！
+
+最后但是最重要的一点，别让伪需求害了你！
+
+这句话不仅是说给产品经理和老板听的，更是给所有要实际做需求的同学（比如程序员、测试）重点强调的。
+
+如果把完整的系统功能比喻成拼图，伪需求就像是一块残缺的不规则图块，看起来好像是有点儿用的，但实际上不能帮助我们完成拼图、浪费我们的时间。
+
+那么，我们如何避免伪需求呢？
+
+除了上面说的需求分析、用户反馈、编排优先级、需求管理外，我们还应该让团队尽可能多的同学参与进来，多交流和验证、反复评估，还可以用数据分析等手段科学验证。
+
+我们每位同学作为团队的一员，也都应该主动申请介入需求评审，掌握更多的信息，帮助团队做出更正确的决策。
+
+有些时候，我们作为企业大团队的一名小开发，可能无法过多地参与需求的分析和项目的决策。但是如果发现需求是不合理的，也应该尽早提出和反馈，而不是傻傻地费时费力做了个没用的需求（甚至是没用的系统）。
+
+我们的鱼聪明 AI，其实也有伪需求，也是因为我的一个决策失误吧，做出了一个几乎没有用的功能。不过后面我们通过某种手段发现了这点并且对系统做了优化，当然，这是后话，在以后的章节中会给大家分享。
+
+所以，开发同学们再遇到伪需求时，希望能理直气壮地跟产品说：这个需求不合理！这个需求我不做！
+
+
+
+---
+
+
+
+## 写在最后
+
+需求分析是做好产品的第一步，也是最重要的一步。无论你是用 Vibe Coding 做个人项目，还是想做一款真正的产品，都要重视需求分析。
+
+记住这几个关键点：
+
+1. 需求分析要从自己、用户、竞品三个方面出发
+2. 要把需求细化为具体的功能点
+3. 要给需求编排好优先级，先做核心功能
+4. 要持续管理和优化需求
+5. 要警惕伪需求，多交流多验证
+
+在 Vibe Coding 时代，实现需求的成本已经很低了。但是，想清楚要做什么，仍然是最重要的。只有方向对了，才能事半功倍。
+
+加油，期待看到你做出有价值的产品！💪
+
+
+## 推荐资源
+
+1）鱼皮 AI 导航网站：[AI 资源大全、最新 AI 资讯、免费 AI 教程](https://ai.codefather.cn)
+
+2）编程导航学习圈：[学习路线、编程教程、实战项目、求职宝典、交流答疑](https://www.codefather.cn)
+
+3）程序员面试八股文：[实习/校招/社招高频考点、企业真题解析](https://www.mianshiya.com)
+
+4）程序员写简历神器：[专业模板、丰富例句、直通面试](https://www.laoyujianli.com)
+
+5）1 对 1 模拟面试：[实习/校招/社招面试拿 Offer 必备](https://ai.mianshiya.com)
diff --git a/Vibe Coding 零基础教程/50 产品变现/03 文档沉淀和知识管理.md b/Vibe Coding 零基础教程/50 产品变现/03 文档沉淀和知识管理.md
new file mode 100644
index 0000000..17ec0e1
--- /dev/null
+++ b/Vibe Coding 零基础教程/50 产品变现/03 文档沉淀和知识管理.md
@@ -0,0 +1,356 @@
+# 文档沉淀和知识管理
+
+> 记录下来，才能走得更远
+
+
+
+大家好，我是鱼皮。
+
+先分享一个我的小故事。我大二的时候跟队做过一个项目，随着个人给项目编写的代码越来越多，开始慢慢主导起这个项目，直到最后整个项目的逻辑我都烂熟于心，团队同学遇到问题都会来问我。
+
+但是，由于个人时间原因，后来我退队不干了，把代码给其他同学认真讲了一遍。
+
+结果你猜怎么着？
+
+在我退队后，隔三差五就会有队内的同学来问我关于这个项目的问题。更离谱的是，一个月后，这个项目倒闭了！
+
+当我后来问其他同学为啥项目会倒闭的时候，人家没好气的说：你这家伙不写文档，项目好多地方都看不懂，没法做下去了。
+
+这时我才意识到：自己一直专注于给项目写代码，但是却忘了把自己的经验、项目的信息记录下来，同步给其他同学，导致我负责的部分基本没人能接手。
+
+唉，那会儿还是经验太少了。在那之后，我做任何项目的时候，都会写文档。哪怕不为别人，起码保证自己能看懂自己之前写的项目。
+
+这也是本文要分享的核心 —— **文档沉淀**。无论是个人还是团队，无论是在学习、工作、还是项目中，无论对程序员、产品经理、还是项目管理者，做好文档沉淀都是至关重要的。
+
+下面我会给大家依次分享：为什么要写文档？怎么写出好文档？怎么管理好文档？
+
+
+
+## 什么是文档？
+
+文档是记录、储存和传递信息的载体。
+
+我们的项目需求表、系统的设计方案、某某调研报告、某次会议记录、解决过的 Bug，甚至是学某个视频教程时随手记录的笔记，都是文档。
+
+
+
+## 为什么要写文档？
+
+从文档的定义出发，我们就已经能意识到文档的基本作用了。
+
+- 记录信息：收集临时的信息
+- 储存信息：防止信息丢失和遗忘
+- 传递信息：把信息和他人共享
+
+
+
+我们的人脑容量有限，不可能记忆所有信息，而写文档，本质上就是在打造属于我们的第二大脑。
+
+像我的脑容量是比较小的，所以我有随手记录、随手写文档的习惯，有的时候走在路上有个好点子都立刻掏出手机记下来。
+
+
+
+### 文档对项目的价值
+
+而对于做项目（尤其是企业大项目），文档又有更进一步的价值。
+
+在项目初期，文档具有指导整个项目顺利推进的意义。如果将做项目比作盖摩天大楼，那么文档就是大楼的蓝图。没有蓝图，建筑工人只能盲目工作，能不能完成都很难说，更别提保证大楼的质量和安全了。
+
+同样，在项目初期不写文档、没有系统的方案和执行计划，团队成员在开发过程中就会迷失方向，会经常出现延期、完不成、返工的情况。
+
+> 看过我直播的同学应该知道，每个项目开始，我都会在文档上编写需求分析、方案设计、技术选型等内容。在做具体功能前，也是先在文档上写好设计实现方案，然后才去写代码。虽然写文档的过程会多花一点时间，但是会大幅降低整个项目的工时。
+
+
+
+在项目中期，文档的意义是 **持续** 记录和追踪项目的状态，让信息在团队间公开透明，从而做出正确的选择、即时规避风险。
+
+打个比方，把做项目当成跑马拉松，文档就是沿途的路标，会告诉大家跑到哪里了、接下来怎么跑；而如果前方有危险，路标也会给大家警示。如果没有文档，大家很快就跑散了，各自为战；一个人遭遇了风险，可能会拖垮整个团队。
+
+
+
+在项目后期，文档的意义是帮助我们复盘总结、持续维护项目以及知识传承。
+
+- 复盘总结：通过阅读文档，我们能够回顾整个项目从诞生到结束的完整过程，从而分析出该项目成功或失败的原因，便于我们从中吸取经验，助力下一个项目的成功。
+- 持续维护项目：如果这是一个需要持续维护和更新的项目，有了文档（比如 Bug 手册、用户手册），项目出现问题时，哪怕换了一位项目维护者，也能很快地从文档中找到解决方案，不会出现 “一人离职、项目倒闭” 的情况。
+- 知识传承：沉淀好的文档，是前人宝贵的经验、教训、思路和方法汇总，非常值得学习，未来能给更多团队的同学带来启发和收获。
+
+
+
+总之，写文档是一件利人利己的事，每写一个字，都是在生产价值。
+
+
+
+---
+
+
+
+在理解了文档的重要性后，我们应该怎么做好文档沉淀呢？
+
+这里我们把文档沉淀进行拆分，需要做好两件事：
+
+1. 写出好文档（这是前提）
+2. 管理好文档
+
+
+
+下面我们分别讲解。
+
+
+
+## 怎么写出好文档？
+
+想要写出好的文档，我们要先了解 “什么是好文档”，然后再去学习写文档的工具和方法。
+
+
+
+### 什么是好文档？
+
+我自己评判文档好坏的几个标准：
+
+1）人能看懂、易于理解的
+
+首先，你的文档是给 **人** 看的，如果是自己记录学习笔记，那么首先要保证自己能看懂；如果是在团队内共享文档，那么要保证别人能理解。如果本来一句话就能说清楚的内容，你在文档上用 20 句话来解释，这样哪怕你写了文档，别人可能还是直接来麻烦你本人。
+
+
+
+2）结构清晰、易于查找的
+
+好的文档，应该是别人从上到下扫一遍，就知道你在写什么、你想表达什么、我能从你的文档中得到什么、我在哪能找到我需要的内容。
+
+就像这篇文章一样，我用了多级标题来划分文章的结构，你能直接通过目录大纲快速定位感兴趣的内容进行阅读。
+
+
+
+3）内容完整、表述准确的
+
+好的文档就像是项目中的一个模块，它应该是完整的、高内聚的，让人仅通过这个文档，就能解决自己的问题。
+
+比如《某 Java Bug 的解决方案》文档，应该把 Bug 的起因、分析排查过程、解决方案、经验总结全部写出来。而不是说把这个 Bug 抛出来，怎么解决我不说~ 哎，就是玩~
+
+另外，文档中的一些词汇和语句的表述一定要尽量准确，不能有歧义！
+
+比如我们鱼聪明 AI 在最初评估成本时，写的是 “服务器若干、价格累积万元左右”，“若干” 和 “万元左右” 其实都是比较模糊的词汇，类似的情况多了就可能导致成本计算错误而亏损。后面我们把上述词汇改成了类似 “服务器 4C 8G 1 台，价格 1000 元 / 月”，实现更精细化的成本控制。
+
+
+
+此外，好文档还可能有其他的标准，比如面向用户的产品文档，应该保证文档整体的风格、排版一致，给读者带来最佳的体验。文档写得好，也会提升用户对团队的认可度，从而更愿意使用团队的产品。
+
+
+
+### 写作工具
+
+工欲善其事必先利其器，在介绍写好文档的方法前，先分享一些写作工具。
+
+多年以前，写文档基本都是用 Word，但 Word 其实是有很多的问题和不足的。比如要自己手动调整格式、同一份 Word 文档由于兼容性问题在另一个电脑上打不开或者排版错乱等等。
+
+所以现在我强烈推荐大家学习 Markdown（一种轻量级标记语言），可以让你用同一套语法轻松编写出排版、格式一致的代码。
+
+比如用 “## 二级标题” 来表示二级标题，用 “> 引用” 来表示引用文案等。
+
+现在很多编辑器软件都支持 Markdown，比如我们平时用的 VS Code、JetBrains 全家桶。但如果要选择一个体验最好的本地 Markdown 编辑器，我推荐大家使用 Typora，这也是自己用了多年的软件。
+
+在写文档的过程中，也经常需要一些绘图来辅助理解，比如流程图、架构图等等，可以使用在线工具 Draw.io、经典软件 Visio 等。如果需要绘制思维导图，可以使用 XMind。如果要生成一些配图，可以使用目前很火的 Midjourney（或者我们的鱼聪明 AI）。
+
+如果你需要把文档发到其他自媒体平台，可以直接把 Markdown 内容复制粘贴到 mdnice 网站中，它会自动帮你生成精美排版的文章。
+
+此外，随着 web 前端技术的发展，线上文档写作网站也越来越强大，如果要团队协作、实时共享文档的话，可以选用语雀知识库、腾讯文档、飞书文档等工具。
+
+
+
+### 方法
+
+#### “抄”
+
+首先，想写好文档，要做的第一件事是 “抄”。
+
+哦不，读书人的事，应该叫 “学习借鉴”。
+
+如果你不会写文档，比如项目文档、设计文档、用户手册，怎么办？
+
+很简单，到网上找优秀的 **成品** ，去模仿。
+
+不单单是写文档，做自媒体、做产品、写论文、学手艺，你想做好任何事情，第一件事都应该是：看看别人怎么做的，向别人学习。
+
+- 你要开发网站，就去网上找现成的网站
+- 你要做视频，就去网上找爆款视频
+
+这是最简单的道理，很多东西都有前人做过，所以哪怕别人不分享教程，只要你去模仿，用点心也能完成。
+
+再加上现在开源文化盛行，很多项目和文档都在 GitHub 等平台公开可见。当你要写一个文档时，直接先复制一下知名项目的 README.md 文件，然后把原本的目录大纲保留，把内容换成自己的，就得到了一份很标准的文档，就这么简单。
+
+等你阅读和编写的文档多了，自然也能形成一套属于自己（团队）的写文档方法。
+
+
+
+#### 写作流程化
+
+很多人讨厌写文档，就是因为感觉没有思路、无从下笔、完全不知道写什么。
+
+我以前也常常是新建一个空白文档，然后对着它发呆。。。
+
+但后来随着写作次数越来越多，我也修得了一套能够快速写出内容的方法，我把它称为 “写作流程化”。
+
+什么叫流程？你去食堂买早饭，先排队、再买包子、再打豆浆、再找座位，这就是一个刻在 DNA 里的流程。
+
+如果你也能有一套明确的写作流程，那么写作就像你买早饭一样简单。
+
+具体怎么做呢？
+
+1）先想清楚文章的结构，根据主题写出大纲
+
+比如我在写这篇文章时，先写了 “什么是文档？为什么写文档？怎么写出好文档？怎么管理好文档？” 这几个小标题，把整篇文章的框架定下来。而不是从上到下漫无目的地去写，想到哪儿写到哪儿。
+
+写大纲的过程本身就是在培养你的结构化思维 —— 把复杂的问题进行结构化拆解。如果你发现自己写大纲都很困难，那么不妨尝试把时间线作为大纲，按照由远及近的顺序，依次去写你各个时期的想法。
+
+
+
+2）填空
+
+只要确定了大纲，你就可以有 100% 的信息，这篇文章你必然能写完。因为剩下要做的就是往每个章节下填空就好了。
+
+类似于有个导师给你规划好了你要做哪些事，你就有了个目标，更容易坚定地执行下去。
+
+
+
+3）优化
+
+写完大致的内容后，我们要整体读 2 - 3 遍文档，进行适当地优化。
+
+就像我们写代码一样，虽然功能是完成了，但是代码可能写得比较烂，提交代码前得再改改。
+
+列举一些常见的优化点：
+
+1. 修改错别字
+2. 小标题间增加关联语，承上启下，使内容更连贯
+3. 重点前置，把文档的关键信息放到开头，吸引人阅读
+4. 图文并茂、多用比喻，让文档更易于理解
+
+
+
+这一套流程走下来，一篇完善的文档就诞生了。
+
+
+
+#### 持续优化
+
+无论是自己写学习笔记、还是项目文档、用户手册，都不是写完一版就结束了的。好的文档是需要持续优化迭代的，如果有人指出了问题或者文档内容有过期，应当即时修复处理。不然错误的文档不仅不能帮助到人，还会产生误导。
+
+像我们在开发鱼聪明 AI 的过程中，就很不幸地参考了一篇胡说八道的过期文档，让本就不富裕的团队雪上加霜。
+
+
+
+#### 积累
+
+经常有朋友问我：鱼皮你平时又上班又高产胜母猪，怎么做到的？
+
+其实我有一个习惯，就是会把生活中觉得有趣的事、或者突然想到的灵感记录下来，每隔一段时间去整理一下，后来我惊喜地发现，有些碎片化的内容竟然可以串起来讲，组成一篇文章。
+
+就像打游戏一样，你想刷的装备一直出不来，你不在乎的装备碎片反而攒了一大堆。结果有天，你发现碎片都能够合成完整的装备了，竟然还挺好用，这就是无心插柳柳成荫吧。
+
+写文档也是，哪怕你无法写一篇全面系统的文档，在你工作中遇到 Bug 的时候，随手开个文档记录下来；再遇到 Bug 的时候，就再打开之前的文档记录下来。次数多了，稍加整理，一篇高质量的文档不就来了？
+
+
+
+### 举例
+
+以我们的鱼聪明 AI 来举例，刚开始写项目立项文档时，按照上述的 “流程化” 方法，先定了文档大纲：
+
+1. 为什么做？项目背景
+2. 做什么？需求分析
+3. 怎么做？设计方案
+4. 具体怎么做？工作安排等等
+
+然后才是一条一条地去补充完善，之后在每次开会和上线后，再持续更新完善一下这个文档。
+
+完善文档的过程中，我也会看到很多之前记录的内容，提醒着自己在做这个项目的过程中不要走偏。
+
+
+
+## 怎么管理好文档？
+
+随着我们项目的不断迭代，文档数也越来越多、越来越零碎，怎么管理好这些文档，让大家需要阅读时能快速找到，这是个大问题。
+
+尤其是对于大项目来说，假如 100 个人一起开发，每人写 10 篇文档就是 1000 篇文档，怎么对这 1000 篇文档进行管理呢？
+
+要先有一个意识：尽早发现问题，会比后期解决问题的成本要低很多。
+
+所以管理好文档这件事，应该主要靠 “前期的策略” 和 “中期的持续优化”，而不是后面再去人工整理大量的文档。
+
+> 代码屎山就是这么来的，烂代码堆得越多，越没人敢动。
+
+所以首先，我们在开始项目前，就要建立好一套规范的 **文档体系** 。
+
+1）文档线上化
+
+只要是和项目 / 工作相关的文档，不要让大家在本地去写，而是直接用线上文档去 **实时协同** 。很简单的道理，你本地改了一段话，别人本地也改了相同文档的一句话，那最终以谁的为准？
+
+像我们鱼聪明 AI 的所有内部文档，都是使用语雀知识库来托管的，所有项目的信息在团队内部公开透明，从而尽最大地可能性消除信息差。
+
+而且线上知识库还有一个好处，就是查找搜索方便，整个知识库的内容一键随便搜。
+
+
+
+2）分组
+
+随着文档或知识库越来越多，必然就会给大家的查找造成负担。所以我在 **最开始** 就给所有团队内部的知识库都按主题做了分组，如下图：
+
+
+
+每个知识库下的文档，也建立了相应的分组：
+
+
+
+当然，分组这个操作也是需要持续做的。如果刚开始没有办法预估会有哪些分组，那就等后面需要分组的时候，即时新建就好。
+
+
+
+3）访问控制
+
+所谓访问控制，就是让部分成员只能看到部分文档。这么做不仅是为了安全，也可以让大家尽量聚焦在自己的工作上，更能找到自己需要的文档。
+
+目前我们鱼聪明 AI 团队的每个知识库都是有严格的访问控制的，只有大家需要看某个知识库时，我才会给他们开对应的权限。当然这也不是说要限制团队成员的学习，如果他对某个知识库感兴趣，可以直接申请查看。
+
+主流的线上文档软件基本都支持访问控制和权限管理，实现上没有什么难度。
+
+
+
+4）培养团队文档文化
+
+还记得这篇文章开头我给大家讲的自己的故事么？有些人可能是没有写文档的意识、或者就是不爱写文档的！如果这个人又是项目的重要贡献者，那么他个人掌握的、团队不清楚的信息就会越来越多，最终就会出现 “他的代码别人动不了”、“他一走项目就完蛋” 的情况。
+
+为了把这种风险扼杀在摇篮里，我反复跟团队的成员强调，一定要多写工作文档、即时同步信息，甚至对于一些重要的工作，我会把文档作为大家工作成果的一部分。慢慢地，大家就养成了写文档、文档分类的习惯。
+
+
+
+---
+
+
+
+## 写在最后
+
+文档沉淀是做好产品的重要一环。无论你是用 Vibe Coding 做个人项目，还是想做一款真正的产品，都要重视文档的编写和管理。
+
+记住这几个关键点：
+
+1. 文档是你的第二大脑，要随时记录
+2. 好文档要易懂、结构清晰、内容完整
+3. 学会使用 Markdown 和在线文档工具
+4. 写文档要流程化：大纲 → 填空 → 优化
+5. 文档要持续优化和积累
+
+在 Vibe Coding 时代，AI 可以帮你写代码，但是项目的思路、设计方案、踩过的坑，这些都需要你自己记录下来。只有沉淀好文档，才能让项目走得更远。
+
+加油，从今天开始养成写文档的好习惯！💪
+
+
+## 推荐资源
+
+1）鱼皮 AI 导航网站：[AI 资源大全、最新 AI 资讯、免费 AI 教程](https://ai.codefather.cn)
+
+2）编程导航学习圈：[学习路线、编程教程、实战项目、求职宝典、交流答疑](https://www.codefather.cn)
+
+3）程序员面试八股文：[实习/校招/社招高频考点、企业真题解析](https://www.mianshiya.com)
+
+4）程序员写简历神器：[专业模板、丰富例句、直通面试](https://www.laoyujianli.com)
+
+5）1 对 1 模拟面试：[实习/校招/社招面试拿 Offer 必备](https://ai.mianshiya.com)
diff --git a/Vibe Coding 零基础教程/50 产品变现/04 技术选型实战指南.md b/Vibe Coding 零基础教程/50 产品变现/04 技术选型实战指南.md
new file mode 100644
index 0000000..4146397
--- /dev/null
+++ b/Vibe Coding 零基础教程/50 产品变现/04 技术选型实战指南.md
@@ -0,0 +1,350 @@
+# 技术选型实战指南
+
+> 选对技术，事半功倍
+
+
+
+大家好，我是鱼皮。本篇要分享的内容是 **技术选型**，是技术方向的朋友们必须要掌握的内容，也是做产品时在前期准备阶段必须要做的核心工作。
+
+这篇文章中，我会结合自己做产品的实践经验，依次给大家分享：什么是技术选型？技术选型选什么？为什么要做技术选型？如何做好技术选型？
+
+无论你是用 Vibe Coding 做个人项目，还是想做一款真正的产品，掌握技术选型的方法都能让你少走很多弯路。
+
+
+
+## 一、什么是技术选型？
+
+技术选型这个词听起来很高大上，但其实就是 “技术选择”，即选择使用哪些技术来实现项目。比如使用 HTML 来开发网页、使用 C++ 来开发 Windows 桌面应用。
+
+打个比方，如果把做项目想象成带兵打仗，技术选型就相当于打仗前选择武器。你要根据自身的兵种、敌人的种族、敌军的排兵布阵等来综合选择最适合的武器，才能以最小的代价胜利。
+
+需要注意的是，技术选型不仅仅是在项目初期的规划和设计阶段进行。每当我们给项目增加一个新功能时，都有可能要选择新的技术来实现；而随着你项目的扩展，可能也需要对原有的技术栈进行升级。
+
+
+
+## 二、技术选型选什么？
+
+“用哪些技术来实现项目”，这句话听起来很简单。就像上面说的，用 HTML 来开发网页，一个技术名词就带过了。
+
+但事实上，这只是最浅显的一层。做技术选型并不是一件轻松的事，又分为很多层次和细节。
+
+由浅入深来看，技术选型包括：
+
+1）选哪类技术？
+
+比如编程语言、开发框架、数据存储、缓存、队列等。
+
+2）具体选什么技术？
+
+比如编程语言选 Java、Go 还是 C++？开发框架选 Spring 还是 Play？缓存选 Redis 还是 Memcached？
+
+3）技术具体选哪个版本？
+
+比如选 Java 8 还是 11？选 Vue 2 还是 Vue 3？选 Redis 5 还是 6？同一个技术的不同版本，往往也会有很大的差异。
+
+4）选用技术的哪些具体特性？
+
+比如 Spring 的 AOP 切面、Redis 的 GEO 高级数据结构等。
+
+
+
+这么看来，技术选型还是有点儿麻烦的。而且一般来说，规模越大的项目，技术选型往往越谨慎，周期也就越长。
+
+记得我在腾讯从 0 到 1 建设 BI 可视化项目时，光是技术选型，就做了好几周，从多个角度深入且综合地对比了国内外主流的数据存储技术。
+
+既然技术选型可能花费这么多的时间精力，那我们为什么还要做技术选型呢？
+
+
+
+## 三、为什么要做技术选型？
+
+相信很多还未工作过的朋友，是从来没有系统地做过技术选型的。
+
+这很正常，因为大家在学习阶段，都是跟着网上的教程做项目，用什么技术、用哪个版本、甚至写什么代码，全部都是讲师给你提前规划好的。
+
+
+
+但其实，并不是没有做技术选型，而是讲师帮你做了而已。讲师选择用什么技术带你做项目时，本质上也是在做技术选型，会结合市场需求、技术流行度等多方面因素。
+
+那么为什么要做技术选型呢？
+
+答案很简单，为了 **更好** 地开发和维护项目。
+
+这里的 “更好” 可能是提高效率、节约成本、提升开发体验、提高项目可扩展性等。
+
+想象一下，当我们在企业中团队开发项目时，如果领导（或架构师）为了省事儿，选择了一个只有他自己熟悉、其他成员却完全不会用的技术，整个项目的开发进度会快么？如果为了贪图小便宜，选择了一个低成本、做工粗糙的云数据库，整个项目的性能会高么？
+
+在开发一个 **完整项目** 前，如果我们不假思索，直接确定某个技术就开始写代码，那么有可能等到后面，才突然出现翻车。就好像鱼皮给自己的电动车选了个便宜的轮胎，刚开始也能正常地跑，结果有天半路爆胎了，只能傻傻地原地等待。。。
+
+举个我自己大学时期的翻车经历。大学我带团队做过一个校园贴吧网站，记得我是用 React 来开发前端页面的。刚开始很顺利，一口气写了几十个页面；但直到有一天需要开发帖子页面信息状态保存功能的时候，才发现 React 不像 Vue Router 一样有现成的 keep-alive（缓存组件状态）。后来又花了好久才找到一个类似的组件，结果还一堆 Bug！
+
+而且，越是对项目代码侵入性强的技术（比如开发框架），后期的切换成本就越大。像我上面举的翻车例子，等页面都写了几十个了，再去切换开发框架，就会非常麻烦；而且有的时候，你给项目引入新的组件或类库，可能会和现有的依赖版本冲突，导致后面项目跑不起来。这个时候，你是选择切换老的技术、还是再花更大的精力去找和老技术不冲突的新技术呢？更有甚者，为了兼容项目原本用到的老到不行的技术框架，不敢引入任何的新技术，导致什么都自己开发。。。可谓一步错，步步错！
+
+这些其实都是未做技术选型、或者技术选型不当带来的问题，也印证了我们做技术选型的必要性。
+
+现在看来，确实是当时经验不足。如果我在最开始就能考虑到这点，先全局确认实现项目功能可能会用到的技术，并且选择合适的技术，就能减少后期风险、节省很多时间了。
+
+
+
+## 四、如何做好技术选型？
+
+在了解技术选型的重要性后，我们来聊聊如何做好技术选型。
+
+接下来，我会结合自己团队的技术选型经验，从几个方面带大家掌握技术选型的要点。
+
+
+
+### 4.1、明确上下文
+
+首先要明确一点：没有绝对完美的技术，我们做技术选型的目标是在 **有限的条件** 下、选取 **特定场景** 下的技术 **最优解** 。
+
+几个关键词：
+
+
+
+#### 1）有限条件
+
+指团队的人数、人员的技能、时间成本、金钱成本等。
+
+比如大家都只会 Java、项目又急着上线，那肯定优先选择 Java 相关技术栈，不要因为听说 Go 语言的性能高，就让大家加班去学 Go。
+
+比如公司缺资金、没资源，那么相较于选择付费的服务（比如云数据库），不妨直接在一台服务器上自主搭建。
+
+再比如公司资源很多，但是缺人力，那么像数据库等服务就不用自己搭建了，直接买第三方的云服务即可。
+
+比较常见的选型方案是先从人力的角度出发，看看团队的同学都会哪些技术。如果需求很紧急的话，那肯定优先选择大家用的比较熟的技术，先完成一期需求快速交付，后面再调研更合适的技术架构，不断地优化。再比如团队内对于某个技术有比较成熟的实践经历和知识沉淀、也有相应的技术大佬，那么可以优先选用该技术。举个最典型的例子，阿里的研发团队优先选用 Java、字节优先选 Go。
+
+再从资源的角度考虑，要看团队的资源是否适合运用这个技术。比如创业小团队，没什么资金，那么可以用 MySQL 代替 Elasticsearch 来实现搜索功能，牺牲灵活性来省钱。再比如公司只能提供 4G 内存的服务器，那在选用一些开源技术的时候就要关注它们的内存占用，不能超过这个阈值。
+
+
+
+#### 2）特定场景
+
+是指我们的技术选型一定要围绕着 **特定的业务和需求** 来做，贴合实际，而不是为了用技术而用技术。
+
+可以思考以下几个问题：
+
+1. 你要实现哪些功能？比如要做一个网盘系统，就要重点选型文件存储技术；要做一个聊天室系统，就要重点选择实时通信技术。
+2. 你的业务量级有多大？如果用户数量多、数据存储量大，可以选用分布式数据库、或者分库分表；如果同时使用系统的用户数多（并发量大），可以选用 Nginx 或者 LVS 来实现负载均衡。
+3. 系统的核心业务流程及关键数据结构是什么？比如要做一个管理系统，那么数据库选择主流的关系型数据库 MySQL 就好；而如果要做数据分析系统，那么应该选择 OLAP 型数据库，比如 ClickHouse 等。
+4. 系统更注重哪些性能指标？比如日志收集的场景更注重高性能和吞吐量，那么可以选择 Kafka 消息队列来采集；比如注重低延迟以及消息的准确性，那么可以选择 RabbitMQ。
+
+
+
+有限条件 + 特定场景 = 上下文，也可以理解为团队、项目的实际情况。
+
+
+
+#### 3）最优解
+
+很多时候，我们做技术选型和设计算法一样，没有绝对的最优解，而是对时间、空间、稳定性、可用性、性能等等的综合权衡。
+
+不同的上下文，选取的最优解也不同。这才是技术选型最有意思、同时也是最折磨人的地方！
+
+> CAP 理论也是如此，它是指在一个分布式系统中，无法同时满足一致性（Consistency）、可用性（Availability）和分区容错性（Partition Tolerance）这三个特性，只能根据实际情况在三者间进行权衡。
+
+
+
+### 4.2、充分调研
+
+在明确了我们团队和项目的实际情况后，我们要进行充分的调研。可以利用某度、某歌、GitHub 等各搜索引擎，或者文章和视频等等来探寻可能要用到的各类技术的信息。
+
+包括：
+
+- 这个技术是什么？有什么用？
+- 这个技术有什么优点和不足？
+- 这个技术的使用成本如何？
+- 这个技术更适用于什么场景？
+- 这个技术的背景和口碑等等
+
+
+
+有很多网站，也可以帮助我们获取技术选型信息，比如：
+
+- 技术雷达：https://www.thoughtworks.com/zh-cn/radar
+- 框架性能对比：[https://www.techempower.com/benchmarks](https://www.techempower.com/benchmarks/#section=data-r21)
+
+
+
+不过我很久没用过这些网站了，自从人工智能对话技术流行后，我在做技术选型时，会直接去问 AI（GPT 或鱼聪明），让它帮我获取信息。
+
+比如问它：你是一位计算机编程领域的专家，现在我要做一个 XX 系统，大致有 XX 功能，限定条件为 XX。请帮我列举实现这些所需的技术，要求多推荐一些同类技术并列举每个技术的介绍、优缺点和适用场景，便于我评估实现该系统的技术选型最优解。
+
+
+
+注意，在调研阶段，大家应该先尽可能多地搜索相关技术，而不要把视野局限于某个技术。
+
+建议把调研到的所有技术信息以表格或清单的形式记录在文档中，持续完善和补充，便于对比和最终选择技术。
+
+就像下面这样：
+
+
+
+在大公司大项目中，技术选型一定要提供充分的依据和理由，才会得到上级或其他成员的认可。
+
+
+
+### 4.3、对比选择
+
+收集到足够多的信息后，我们就可以根据上下文 + 收集到的信息来综合选择最合适的技术。
+
+除了上下文之外，建议大家优先选择：知名度高的、有大公司背书的、持续维护的、活跃度高的、开源的、文档齐全的、用户多生态好的技术。
+
+比如大名鼎鼎的前端框架 Vue 和 Java 后端框架 Spring Boot，大家对它们的印象就是功能强大、简单好用、学习资源多，所以这两个技术是主流，公司需求量也大。
+
+千万不要选择缺失文档的、没几个人用的冷门技术！一旦后面出了问题，网上又找不到解决方案，说不定整个项目都无法继续推进！
+
+
+
+### 4.4、最简 Demo 验证
+
+在最终确认要选择的技术前，不要忘了验证一下该技术是否能够运用到咱们的项目中，而不是直接拍板！
+
+推荐的做法是编写一个最简 Demo 来快速验证技术是否可用。比如使用 Vue Router 页面路由技术，那就编写一个点击按钮，快速跳转到 `/about` 页面的 Demo。
+
+这个过程，本质上就是实现了理论到实践落地的过渡。
+
+也是感谢人工智能技术的发展，现在想编写 Demo 快速验证，都不用自己写代码了，直接问 GPT 即可：
+
+
+
+
+
+如果我们的系统是老项目，需要重点关注新引入的技术和老项目依赖的兼容性。这个时候，编写最简 Demo 验证是非常有必要的，可以提前规避版本冲突。
+
+
+
+### 4.5、日常积累
+
+除了上面这些方法外，想做好技术选型，经验值的积累也是很重要的。比如某个电商领域的十年架构师，要做一个新的电商系统，立刻就能想到合适的技术选型、甚至是整个系统的完整实现方案。
+
+给大家两个建议：
+
+1）持续记录
+
+把自己看到的 **每个** 和你学习方向或工作相关的技术都先记录到文档中，有时间的时候可以快速了解该技术的大致信息，知道这个技术是做什么的、有什么用。等需要用到的时候能想起来、或者能从文档中搜索到即可。
+
+2）拓宽边界
+
+不要幻想用一门技术吃遍天，也不要满足于自己的技术领域。尤其是在自学阶段、做一些小项目时，可以偶尔尝试使用一些平时不接触的新技术，横向拓宽自己的技术选型范围。
+
+比如虽然我的工作是 Java 后端，但经常会做一些前端项目，而且每次都换着用技术，比如 Vue、React、Svelte 等。
+
+
+
+## 五、技术选型实践
+
+介绍完方法论，最后再分享下我们团队关于鱼聪明 AI 的技术选型实践。
+
+按照上面分享的几个步骤，首先是明确上下文。
+
+
+
+### 5.1、明确上下文
+
+#### 1）有限条件
+
+我们团队人力少，大家最熟悉的技术框架是后端 Java Spring Boot + 前端 React，所以前后端的技术框架基本确定。
+
+也没有足够的资金去购买很多服务器和第三方服务，所以对大多数非核心服务，使用 Java Tomcat 单机部署，并且使用宝塔 Linux 进行服务器管理。
+
+
+
+#### 2）特定场景
+
+4 问 4 答：
+
+1. 你要实现哪些功能？我们要实现的 P0 级核心功能有：AI 对话、AI 助手、内容审核。AI 对话和内容审核都可以使用第三方 GPT 服务实现。
+2. 你的业务量级有多大？网站初期，用户的并发量不会很大，暂定 qps（每秒请求数）不超过 3，目前还不需要用到负载均衡技术。
+3. 系统的核心业务流程及关键数据结构是什么？核心业务流程是用户发送对话 => AI 自动回复 => 存储消息记录。那么就涉及了对话和消息记录的保存，由于一个对话可以包含多个消息记录，所以很适合选用关系型数据库 MySQL 来实现。
+4. 系统更注重哪些性能指标？由于自己之前网站经常被攻击，所以这次非常注重系统的安全性和可用性。为了控制并发，可以选用 Redis + Redisson 实现分布式限流，控制每个用户发送消息的频率不能过于频繁。
+
+
+
+#### 3）最优解
+
+这里就举一个例子吧：是消耗成本使用第三方的云数据库服务，还是自己在服务器上搭建数据库呢？
+
+还在学校的时候，我肯定会选择后者。因为很多项目就是自己学习练手用的，能跑就行；自己搭建数据库本身也能帮我熟悉 Linux 服务器的命令。当然最关键的还是省米，省下来给自己午餐加个鸡腿它不香么？
+
+但现在要做面向用户的线上项目了，我就会更倾向于使用现成的云数据库服务，数据库的搭建、运维、管理、调优别人都给你做好了，你拿到数据库账号密码就能直接用，还不用担心数据库宕机。相比于多投入的一些资金，能大幅节省我们 “本就不富裕” 的开发和运维成本。
+
+这是我们当下对于数据库技术选型的最优解。
+
+
+
+### 5.2、充分调研
+
+上文也提到了，我们系统的 **绝大多数功能** 都使用主流技术 Spring Boot + React 实现，它们都属于我们团队人员的看家本领、也都是生态好的知名技术，不必做更多的调研。
+
+相反，我们投入了比较多的时间在 **内容审核** 这个小功能的调研上。
+
+为什么？
+
+因为对 AIGC 类产品，内容审核是至关重要的；而更关键的是，内容审核要成本啊！
+
+为了兼顾内容审核的质量和成本，我们把目光锁定到了国内的几家大厂提供的云服务上，也就是 BAT。
+
+并且通过阅读官方文档和客服询问的方式，整理出了如下的对比表格：
+
+> 数据仅为示例参考，请以官方为准
+
+
+
+
+
+### 5.3、对比选择
+
+有了上图的对比表格，我们就可以结合实际的业务情况来选择使用哪种内容审核技术了。
+
+比如我们的对话功能中，允许用户单次输入的最大字符数为 1000 - 2000 左右，对话功能的使用 QPS 不超过 10，那么选择服务商 A 或 B 都是合理的。
+
+> 我们可以将用户的单次输入拆分为多个段落，通过发多次请求来绕过字符数限制。
+
+
+
+### 5.4、最简 demo 验证
+
+确定了要使用的技术后，剩下的工作就很简单了。对于第三方提供的内容审核云服务，我们只需打开官方文档，就能找到现成的示例代码，下载到本地执行成功即可。
+
+
+
+
+
+### 5.5、日常积累
+
+最后，关于日常积累，其实在上一篇文章《文档沉淀》时有提到。我们团队每天都在持续关注 AI 相关的技术动向，只要发现有了新的技术，会立刻记录在我们团队的公共知识库中。需要用到这个技术的时候，再进一步研究。
+
+
+
+---
+
+
+
+
+技术选型是做好产品的重要一环。选对了技术，可以事半功倍；选错了技术，可能会让项目陷入困境。
+
+记住这几个关键点：
+
+1. 技术选型要结合团队实际情况和项目需求
+2. 要充分调研，多方对比
+3. 优先选择知名度高、生态好的技术
+4. 要编写最简 Demo 验证可行性
+5. 要持续积累技术选型的经验
+
+在 Vibe Coding 时代，AI 可以帮你快速了解各种技术，甚至帮你生成 Demo 代码。但是，如何根据实际情况选择最合适的技术，仍然需要你自己的判断和积累。
+
+加油，选对技术，让你的产品开发更顺利！💪
+
+
+## 推荐资源
+
+1）鱼皮 AI 导航网站：[AI 资源大全、最新 AI 资讯、免费 AI 教程](https://ai.codefather.cn)
+
+2）编程导航学习圈：[学习路线、编程教程、实战项目、求职宝典、交流答疑](https://www.codefather.cn)
+
+3）程序员面试八股文：[实习/校招/社招高频考点、企业真题解析](https://www.mianshiya.com)
+
+4）程序员写简历神器：[专业模板、丰富例句、直通面试](https://www.laoyujianli.com)
+
+5）1 对 1 模拟面试：[实习/校招/社招面试拿 Offer 必备](https://ai.mianshiya.com)
diff --git a/Vibe Coding 零基础教程/50 产品变现/05 系统架构设计实践.md b/Vibe Coding 零基础教程/50 产品变现/05 系统架构设计实践.md
new file mode 100644
index 0000000..db712c8
--- /dev/null
+++ b/Vibe Coding 零基础教程/50 产品变现/05 系统架构设计实践.md
@@ -0,0 +1,250 @@
+# 系统架构设计实践
+
+> 让你的产品支棱起来
+
+
+
+大家好，我是鱼皮。这篇文章我们来聊一个听起来很高大上、实则并不难的知识 —— **架构设计**。这是技术方向的朋友们必须要 **重点掌握** 的内容，也是做产品时在前期准备阶段必须要做的核心工作！
+
+这篇文章中，我会结合自己做产品的实践经验，依次给大家分享：什么是架构设计？为什么要做架构设计？怎么做好架构设计？
+
+无论你是用 Vibe Coding 做个人项目，还是想做一款真正的产品，掌握架构设计的方法都能让你的系统更稳定、更易扩展。
+
+
+
+## 一、什么是架构设计？
+
+想象一下，如果现在我们要盖一座摩天大楼，需要做哪些事？
+
+是直接让工人去搬砖、叠砖么？还是让挖掘机来挖呀挖呀挖？
+
+当然不是！
+
+在盖楼之前，肯定会有一名建筑师，根据大楼的实际用途、地理位置、入驻需求等信息来绘制一份蓝图，蓝图上会规划大楼的外形、内部布局、结构细节等。
+
+绘制好蓝图后，建筑师还要确定每层楼房的框架和支撑结构，确保它们足够稳定，不会说风一吹就塌了。
+
+之后，建筑师还要根据大楼的实际用途和需求来规划每个楼层的用途，比如 B1 层卖小吃、1 层卖服装奢侈品等等。这些都是在大楼动工前确认好的，不会说等工人已经搬好砖后，上面临时决定 “这一层我们不盖了！”。
+
+做软件（网站）开发也是一样，在我们 “码农” 实际动手写代码前，往往会有一个经验丰富的架构师，先绘制一份 **架构设计图** ，规划好整个系统的全貌、系统规模、系统的结构。
+
+架构师还要将系统按照功能和需求划分为各个模块，比如商城系统划分为用户模块、商品模块、订单模块等。并且确定各个模块的作用和交互协作方式，保证整个系统能够正常运作。不会出现一个功能故障，整个系统全部瘫痪的情况。
+
+有朋友可能会问了，那架构设计和之前讲过的技术选型有什么区别呢？
+
+还是拿盖楼来举例，其实很好区分。架构设计是规划如何盖楼、每层楼怎么安排；而技术选型是在完成架构设计之后，选择具体用什么材料、工具或方法来完成盖楼。二者是相辅相成的。
+
+用一句话来概括， **架构设计是构建稳固、可靠和可扩展系统的过程** 。
+
+而我们熟知的岗位 “架构师”，就是负责完成系统架构设计，确保系统稳固、可靠、可扩展的人。
+
+在大家的印象里，可能觉得架构师是很高大上的角色。但我个人认为，只要你能够独立完成一个系统的架构设计，能够把复杂的系统拆分为模块化、可扩展的组件，你就已经是架构师了。
+
+> 所以 97 年就成为架构师还是有一定合理性的。
+
+
+
+## 二、为什么要做架构设计？
+
+其实从上面盖楼的例子中，相信大家已经能大致感受到架构设计的重要性了。
+
+如果在盖楼前，不先设计好大楼的结构，那么就难以保证大楼的安全和稳定性，风一吹整层楼就塌了。同理，在开发网站前，如果不先设计好网站的整体架构（比如不添加防火墙），后面可能一遇到网络攻击，整个系统就都无法访问了。这是架构设计的核心目标：保证系统地 **稳定性、可靠性和可用性** 。换句话说，起码要让系统能跑。
+
+> 不过没关系，系统和人只要有一个能跑就行。
+
+进行架构设计的另一个重要原因，是系统的 **可扩展性** 。打个比方，建好的商场大楼非常受欢迎，我们想在盖好的大楼上再增加几层楼，那么必须在最初就确保大楼的结构可以支撑额外的重量、能够线性地往上叠加。而不是像下图一样：
+
+
+
+同理，如果想要网站能够应对日益增长的用户量和新业务功能，也必须有一个良好的架构设计来支持。不要出现网站用户数增多后，网站无法访问的情况。
+
+此外，好的架构设计也能够提升系统的性能和用户体验。比如在商场内，合理安排电梯数和电梯的位置，就能帮助用户快速到达想去的店铺；而网站的架构设计如果合理，比如用更少的分层完成同样的功能，那么就能更快地响应用户的操作。
+
+总之，想要让网站像摩天大楼一样支棱起来，前期的架构设计是必要的！
+
+
+
+## 三、怎么做好架构设计？
+
+“能完成架构设计” 和 “能做好架构设计” 还是有很大的区别的，下面我会结合自己多年的学习经验、以及鱼聪明 AI 的架构设计，分享一些我认为的做好架构设计的关键。
+
+
+
+### 掌握方法论
+
+做好架构设计的前提是具备一定的理论知识。所谓方法论，是指前人通过总结和归纳形成的一套 **特定问题的解决方案** 。就像我们做数学题的时候知道套用公式来解题一样。
+
+有很多对架构设计有帮助的方法论。比如初学编程时接触到的面向对象设计，软件开发基本原则、23 种经典设计模式、SOA 面向服务架构、DDD 领域驱动设计等等。掌握这些方法论背后的思想，是做好架构设计的 **前提** 。
+
+举个例子，面向对象设计的五个基本原则 SOLID 中，有一点是 **单一职责原则** ，是指：一个类或模块应该有且只有一个单一的责任，每个类或模块应该只关注于一个特定的功能或职责。换句话说，每个模块应该只做好自己的事。
+
+我们在进行鱼聪明 AI 网站的架构设计时，首先就遵循了单一职责原则，将系统 **按照功能拆分** 为用户模块、助手模块、对话模块、绘画模块、支付模块等。这样一来，当我们想要扩展对话相关的功能时，就不用改动助手模块的代码。也可以将不同的模块交给团队中不同的同学进行开发。
+
+
+
+
+
+### 学习经典架构
+
+前人栽树，后人乘凉。在我们没有能力自主设计一套架构前，不妨站在巨人的肩膀上，学习一些前人总结和实践过的经典架构。
+
+简单举几个例子：
+
+
+
+#### 1）分层架构
+
+首先是最经典的分层架构，把系统分为多个不同的层，每一层都有特定的功能和职责，且只和自己的直接上层与直接下层 “打交道”。
+
+比如开发 Java 企业级后端项目时常用的三层架构，将系统分为表示层、业务逻辑层、数据访问层。
+
+表示层负责接受用户请求，把用户输入的参数传递给业务逻辑层进行处理，并返回数据、页面等内容给用户。
+
+业务逻辑层负责处理复杂的业务逻辑，比如调用 AI 能力完成智能对话、再进行加工处理、调用数据访问层将结果存到数据库中，也是我们做系统主要开发的部分。
+
+数据访问层负责操作底层的数据源，比如对数据库、文件、缓存等进行增删改查。
+
+
+
+分层架构的适用性非常广泛，绝大多数企业级系统都可以把分层架构作为基础的架构设计。
+
+计算机网络也是采用了经典的分层架构，OSI 七层参考模型中，把计算机网络自底向上分为了物理层、数据链路层、网络层、传输层、会话层、表示层和应用层。每个层只处理特定的功能，比如数据传输、数据的路由；层与层之间通过接口（或者叫协议）进行通信。
+
+我们的鱼聪明 AI 后端也是使用了分层架构，只不过在原有的三层架构基础上，在业务逻辑层和数据访问层之间又增加了 Manager 层（通用逻辑层），将业务逻辑层经常调用的 **公共逻辑** 提取出来，便于复用。
+
+
+
+#### 2）微服务架构
+
+微服务的 “微” 是相对于 “单体” 项目的概念。微服务架构是指将完整的大型系统拆分为多个微小的、自治的服务，每个服务都能独立部署、独立扩展和维护、互不影响，服务之间通过网络通信进行协作，从而实现原本大型系统的完整功能。
+
+我们的鱼聪明 AI 就用到了微服务架构。前面也提到了，我们首先将系统按照功能划分为了多个模块。
+
+但如果我们只是按逻辑划分出了这些模块，实际上所有的代码仍然部署在同一个项目中，打包后仍然是一个可执行文件。那么所有模块要么都在运行、要么都在宕机，本质上还是单体项目。一个服务崩了，可能导致整个项目都无法运行！
+
+
+
+所以我们将部分重要模块（比如支付模块）的代码从原本项目中抽离，单独作为了一个服务，并且还启动了备份，从而保证了支付业务的稳定性。说什么也不能影响收入对不对~
+
+
+
+能够实现微服务设计的框架也很多，比如 Java 的 Spring Cloud、Apache Dubbo 等。但是学习微服务更重要的是思想，即 **如何合理地拆分服务** 。
+
+并不是所有的项目都要把所有功能都拆分成子服务的，像我们的鱼聪明 AI，也没有把用户模块和助手模块进行分离，原因是这两个模块的业务都不复杂、并且存在紧密的依赖，拆分后反而不利于维护了。
+
+
+
+#### 3）事件驱动架构
+
+在事件驱动架构中，各模块之间是通过事件（或者消息）的 **发布订阅模型** 进行通信的。
+
+举个最简单的例子，有两个模块：支付模块和会员模块，当用户支付成功后，支付模块会给会员模块发送一个 “XX 用户支付成功” 的事件，会员模块收到这个时间后，给对应的用户开通会员即可。
+
+
+
+但实际运用时，事件驱动架构往往会引入一个 **事件总线** ，相当于一个中介，负责集中收集和下发事件。
+
+比如鱼聪明 AI 的对话功能和绘画功能就采用了事件驱动架构。当上游返回 AI 回复的消息或生成的图片后，会发送 “成功” 消息到事件总线，然后事件总线再将这些消息分别转发给对应的模块去处理。如下图：
+
+
+
+这样一来，各模块之间就实现了解耦（互不影响）。假如后续我想新增多个对话模块，只要将该模块和事件总线建立连接即可，不会影响到其他模块的运行。
+
+
+
+### 关注需求和痛点
+
+我们在学习过程中接触到的项目，几乎都可以套用上述几种主流的架构。但具体应该如何做好架构设计，一定是要结合实际的需求和要解决的痛点去分析。
+
+以鱼聪明 AI 为例，前面也提到了，我们首先就按照需求（功能）将系统拆分为了多个模块，然后将部分模块单独封装为服务进行独立部署。
+
+但架构设计并没有到此结束，接下来分析下我们这个网站的痛点，主要是 “安全性” 和 “访问互通性” 这两个方面。
+
+
+
+#### 安全性
+
+根据我之前的翻车经历，网站上线后一定会遭受各种攻击！所以，我们在原有的分层架构基础上进行扩展，在表示层前增加高防服务器和 Nginx 防火墙，在表示层后增加了分布式限流和权限校验处理。
+
+> 在表示层前添加集中的分布式限流和权限校验处理也是合理的，以实际需求为主。
+
+改进过后的架构如图：
+
+
+
+如果用户在短时间内用不法手段频繁向系统发送请求，那么在限流层就会被拦截，不会进行后续的业务逻辑处理。
+
+
+
+#### 访问互通性
+
+我们的 AI 绘画模块需要依赖第三方服务来完成部分功能，但是第三方服务并不支持访问跨地区访问，网络无法互通，怎么办呢？
+
+这时，我们有 2 个方案可选：
+
+1）把整个系统都放到第三方服务所在的地区去部署。如下图：
+
+
+
+2）在 AI 绘画模块和第三方服务之间搭建一个代理，让代理帮忙发送和响应请求。如下图：
+
+
+
+如果是你的话，会选择哪个呢？
+
+方案 1 的好处是方便，但缺点也很明显，整个系统都移到其他地区，也就意味着原本地区的用户访问系统的所有功能，速度都会变慢。
+
+方案 2 的好处是只需要改变 AI 绘画模块发送的请求地址信息，而系统的其他功能（比如查询用户信息）性能完全不变；缺点就是要搭建额外的服务、增加了实现成本。
+
+最终，我们选择了方案 2 并改进了架构设计，增加一点实现成本来换取更好的用户体验。
+
+通过这个例子，我想告诉大家的是：**没有绝对完美的架构设计** 。和技术选型一样，我们做架构设计的目标是寻找实际情况下的最优解。
+
+
+
+### 超前思考
+
+我们在做架构设计时，要养成超前思考的习惯，不能只针对现状，而是要提前预见系统未来可能的发展，预留足够的 **可扩展** 空间。
+
+比如我们的鱼聪明 AI，虽然在最开始只有 100 个内测用户，但我们会按照 1 万个、甚至 10 万个用户的标准去设计系统，所以使用了分布式存储中间件而不是本地服务器来存储用户登录 Session；虽然早期历史对话消息数只积累了 5 万条，但我们提前设计了消息过期淘汰机制、并且将消息模块解耦，防止消息数达到百万、千万时影响系统的查询性能。
+
+当然，超前思考也要有个度。要避免过度设计，不要提前去考虑绝对不可能发生的事情、不要提前去消耗远超增长的成本。
+
+
+
+---
+
+
+
+最后，要注意的是，**架构设计是一个持续的过程**，要根据业务的实际情况不断优化迭代。比如发现业务收益不高时，通过简化架构来降低成本；业务高速发展时，及时扩容服务来应对增长。
+
+
+
+## 写在最后
+
+架构设计是做好产品的重要基础。好的架构设计可以让系统更稳定、更易扩展、性能更好。
+
+记住这几个关键点：
+
+1. 架构设计要掌握基本的方法论和设计模式
+2. 要学习经典架构，站在巨人的肩膀上
+3. 要关注实际需求和痛点，而不是为了设计而设计
+4. 要有超前思考的意识，预留扩展空间
+5. 架构设计是持续优化的过程
+
+在 Vibe Coding 时代，AI 可以帮你快速生成代码，但是系统的整体架构设计，仍然需要你自己的思考和规划。只要有架构设计的意识和足够的积累，人人都能成为架构师！
+
+
+
+
+## 推荐资源
+
+1）鱼皮 AI 导航网站：[AI 资源大全、最新 AI 资讯、免费 AI 教程](https://ai.codefather.cn)
+
+2）编程导航学习圈：[学习路线、编程教程、实战项目、求职宝典、交流答疑](https://www.codefather.cn)
+
+3）程序员面试八股文：[实习/校招/社招高频考点、企业真题解析](https://www.mianshiya.com)
+
+4）程序员写简历神器：[专业模板、丰富例句、直通面试](https://www.laoyujianli.com)
+
+5）1 对 1 模拟面试：[实习/校招/社招面试拿 Offer 必备](https://ai.mianshiya.com)
diff --git a/Vibe Coding 零基础教程/50 产品变现/06 项目研发流程选择.md b/Vibe Coding 零基础教程/50 产品变现/06 项目研发流程选择.md
new file mode 100644
index 0000000..b74de03
--- /dev/null
+++ b/Vibe Coding 零基础教程/50 产品变现/06 项目研发流程选择.md
@@ -0,0 +1,306 @@
+# 项目研发流程选择
+
+> 跑得快还是跑得稳？
+
+
+
+大家好，我是鱼皮。
+
+不知道大家是否喜欢吃辣条？反正我是老爱吃了。
+
+吃辣条的时候，我会思考：美味的辣条是如何被制作出来的呢？
+
+为了满足自己的好奇心，我还专门到网上搜了一下，结果大为震惊！
+
+发现有些辣条的制作过程是很 “先进” 的，不是全部靠工人来制作，而是有一条 **生产流水线** 。准备好原材料后，由机器依次完成混合、搅拌、切割、调味、炸制、冷却、包装等操作，而工人只需要监督就行。
+
+
+
+有了这么一套清晰的工序，整个生产辣条的过程就变得井然有序，工人（或机器）只需要一步一步做好自己的事情即可，整体效率更高；而且如果每个环节都经过充分的验证，辣条的质量和安全性也会更高。
+
+这就是 **标准流程** 的重要性。
+
+回到我们今天的主题，如果我们想要开发上线一款产品，也需要有一套标准的研发流程。
+
+所谓的研发流程是指：为了高效完成产品研发，所定制的 **一系列工作步骤和方法** 。团队成员只需依次按照这些步骤和方法来工作，就能够顺利完成高质量的产品。
+
+那么团队在协作开发时，应该定制什么样的研发流程？研发流程的步骤是越多越好，还是越少越好呢？
+
+本篇文章，会结合我自己在大厂工作以及带小团队的经验，依次分享：大厂的标准研发流程、小团队的敏捷研发、以及我们鱼聪明 AI 团队的研发流程选择。希望能帮大家开拓思路，提高团队的项目开发效率和项目质量。
+
+
+
+## 大厂的标准研发流程
+
+这是本文分享的重点。
+
+对于大公司，往往会有成百上千人共同参与一个项目。所以为了保证项目稳定推进，大厂的研发流程通常会非常 **完备和复杂** ，包含非常多的步骤，每个步骤的要求也很严格。
+
+我将大厂研发流程的步骤划分为几个阶段，用一张思维导图来概括，会更清晰一些：
+
+
+
+如果用生产辣条来比喻研发项目。那么大公司研发项目的流程，就像是我开头提到的用 **标准流水线** 生产辣条的流程。
+
+> 注意，以上阶段并不是完全按从上到下的顺序执行，阶段间可能存在交叉，比如技术预研和技术选型其实在设计阶段就应该考虑。
+
+
+
+### 需求阶段
+
+需求阶段的目标是：明确我们为什么要做产品？要做一个什么样的产品？产品要有哪些功能？
+
+现在，假设辣条就是我们要做的产品。
+
+由于需求阶段是研发流程中 **最开始** 的环节，我会详细地分为 4 个子阶段来介绍。
+
+
+
+#### 需求产生
+
+我们为什么要做辣条呢？可能是进行了市场调研后，发现大家都爱吃辣条、做辣条能发财；可能是无意中发现了一种改进辣条口味的想法；可能是发现我们的资源很适合去生产辣条等等。
+
+需求产生阶段，最重要的事就是尽可能多地收集整理需求，不要放过可能的机会。
+
+有时，可能一个不经意的想法，就是一个很有意义的需求。
+
+
+
+#### 需求评审
+
+收集了很多需求后，我们要对需求进行评审，确定其可行性、成本和收益、需求和风险、以及是否符合我们对产品的定位，而不是什么都做。
+
+就像我们打算生产一款新口味的辣条，需要先调研评估新的口味会不会受到欢迎、能不能制作出来。
+
+
+
+#### 需求分析
+
+在对需求进行评审后，我们需要进一步分析需求，把需求细化为产品 **具体的** 功能或特性、或者要完成的工作。
+
+比如想生产一款新口味的辣条，我们要确定辣条的辣度和具体口味、研制新的配方、确保辣条的安全性、给辣条设计新的包装袋等。
+
+
+
+#### 排期
+
+通过需求分析明确需求后，我们要进行需求排期。
+
+这个阶段我们要制定生产计划，根据需求的重要程度和所需资源等，来安排完成需求的优先顺序和实现周期。
+
+比如生产辣条时，我们要先花 1 个月研制配方、然后花 3 天采购原材料、花 3 天生产辣条、花 1 天验证安全性，同时花 3 天给辣条设计新的包装袋。
+
+
+
+### 设计阶段
+
+设计阶段我们的目标是：提前想清楚我们的产品要怎么做？功能如何实现？
+
+对于生产辣条，设计阶段的目标就是 “确认辣条的配方”。
+
+首先， **架构设计** 就像是确定辣条的主要材料和制作工艺，确保后续可以在此基础上做出多种不同新口味的辣条，而不是每种新口味的配方都从 0 全新调制（可扩展性）。
+
+**概要设计** 是类似于对辣条的整体构思，比如辣椒的种类、辣椒粉和面粉的比例、辣条的大小等。
+
+**详细设计** 是对概要设计的补充完善，深度研究配方中的每种配料的 **细节** 、确定每个步骤的具体要求。比如先放 3 克辣椒粉、再放 100 克面粉、再混合搅拌 3 圈（我瞎编的）。
+
+完成上述设计后，我们要分享自己的设计，和其他团队成员共同讨论，确保大家的 **方案对齐** 、想法完全一致。而不是等到上市后，让不同的用户吃到不同配方的辣条。
+
+在设计阶段，不止需要产品经理和研发工程师，测试同学也要参与进来，提前进行 **测试用例设计** 。定义对辣条进行质量验证的标准，例如具体的辣度在 xx ~ xx 之间、辣条长度为 10 cm 等。
+
+
+
+### 研发准备
+
+研发准备阶段，我们要做的是：准备项目研发所需的基础条件。
+
+比如正式生产辣条前，我们要先进行 **技术预研** ，通过查阅资料来提前调研我们实现新口味配方的可行性。然后我们要进行 **技术选型 **，选择使用何种工具或机器来调制配方、切割辣条。
+
+完成技术选型后，还要进行 **资源申请** ，确认团队的资金足够让我们使用先进的工具或机器、购买原材料以及配备工人。
+
+在大公司，资源的申请往往非常严格，像我在腾讯的时候，想要申请 1 台服务器来部署项目，都要经过领导、运维等好几层的审批。
+
+申请到资源后，我们需要进行 **环境准备** ，找一个干净卫生、配备水电的场地来放置辣条生产机器和工人。在研发流程中，环境准备的工作就是搭建开发环境、安装开发必要的软件和工具等。
+
+之后，我们就可以进行 **项目初始化** 和 **依赖安装** ，把机器和工人安排到指定的位置、通水通电、启动机器、安装机器程序等等，让一切准备就绪。在研发流程中，我们可能会使用脚手架之类的工具来自动生成一个干净的项目初始代码，并且使用包管理器安装运行项目所需的基本依赖，接下来就可以愉快地写代码啦！
+
+
+
+### 研发阶段
+
+研发阶段是程序员们大显身手的阶段，这个阶段的目标是写代码完成项目。
+
+研发阶段又可以分为：本地开发、远程开发、代码优化、单元测试、开发联调 5 个小阶段。
+
+首先，每位开发者可以在自己的电脑上编写代码（本地开发），也可以选择在同一个公共机上协作开发代码（远程开发）。在开发完成基本功能后，要进行代码优化，比如增加异常处理来提高健壮性、使用多线程来优化性能等。之后，要自己编写基本的单元测试，来验证代码能否正常运行并返回预期结果。最后，程序员们需要相互配合，进行开发联调，即调用彼此的代码来验证完整功能的可用性。
+
+比喻成生产辣条，这个阶段就是由机器和人工相互配合，完成对辣条的搅拌、切割、调味、检验等操作。由于我没有参与过辣条生产，不知道他们是不是还有人工试吃环节，如果发现味道不好，还得修一修机器（程序员改 Bug）、或者再人工加点儿秘料（代码优化）。
+
+
+
+### 测试验证
+
+在完成开发后，我们必须进行测试验证，这个阶段的目标就是：确保产品功能的正常运行，消灭 Bug！
+
+有同学可能会问：研发阶段中，程序员不是已经自己编写过单元测试了么？
+
+但是，单元测试只是一个最基本的保证，只能保证自己的代码没有问题；如果多人的代码需要互相调用配合，还需要有更进一步的测试 —— **集成测试** ，来保证大家的代码整合到一起也没有问题。
+
+除了单元测试和集成测试外，比较常见的测试类型还有系统测试、验收测试。
+
+**系统测试** 是在集成测试后，对整个系统进行全面的功能和性能测试，测试的范围更大。
+
+而 **验收测试** 通常是测试的最后一个阶段，确认系统是否满足实际的需求以及用户期望。
+
+这里还有一个概念是 **产品体验** ，是指从真实用户的角度来感受产品功能的优缺点。严格来说，产品体验不只是在测试阶段才进行，而是应该贯穿整个开发过程，便于提前发现问题和改进。
+
+比喻为生产辣条，在我们生产完辣条后，不仅自己要试吃，还要有专业的品尝师来体验、检查辣条的配方和制作是否有问题。
+
+
+
+### 提交阶段
+
+提交阶段的目标是：把已经通过测试的本地代码提交、推送到远程仓库，并且合并到主分支，为上线做好准备。
+
+实际开发中，由于项目是由多人维护的，为了减少代码冲突和烂代码，会采用 **代码审查** 机制。想要合并代码到主分支前，必须发起 MR（Merge Request） **合并请求** ，然后由项目的负责人（一般是你的领导或同事）检查你的代码，没问题后才允许合并。
+
+这样一来，所有的代码会经过至少 2 名成员的检查，代码质量会更高，也减少了上线出 Bug 的概率。
+
+比喻为生产辣条，代码审查就好像是由专业的食品卫生机构来检验辣条生产的安全标准，如果发现配方或生产过程有任何的问题，就打回去重做。
+
+
+
+### 发布阶段
+
+经过了 “九九八十一难”，我们的项目终于可以发布了！
+
+首先，要把我们生产好的辣条进行打包，变成可以售卖的包装袋。然后并不是一开始就做大规模的宣传推广，而是先给一部分顾客试吃，让他们给出一些评价。如果大家对辣条赞不绝口，那么才可以将辣条正式上市，走向大众。
+
+在研发过程中，我们也要对开发完成的代码进行 **打包构建** 。然后先进行 **预发布** （或者灰度发布），给一部分用户进行体验；确认没有问题后，再 **正式上线** 。
+
+
+
+### 后续
+
+至此，我们的研发流程还没有结束！只能说是完成了一轮上线而已。
+
+产品上线后，我们还需要持续收集和接受用户的反馈意见，并且对用户的评价进行统计分析，从而不断地优化迭代我们的产品。
+
+此外，文档沉淀也是非常重要的，要把我们这次研发流程中遇到的种种问题、资料、知识全部记录下来，便于团队继续改进。
+
+
+
+---
+
+
+
+怎么样，感觉大厂的研发流程是不是很复杂？
+
+事实上，完成第一次上线后，每当我们需要给产品增加新功能时，都要完整经历一遍上述流程！甚至有的时候，光需求评审这一个步骤就要经历 1 - 2 个星期的讨论！
+
+这种研发流程虽然能够保证项目的质量，但未必适合小团队，尤其是对于创业公司来说，时间就是金钱。
+
+所以下面再分享一下适合小团队的研发流程 —— 敏捷开发。
+
+
+
+## 小团队的敏捷研发
+
+如果说上述大公司的研发流程更注重 **规范和稳定** ，那么敏捷开发更注重 **团队协作和快速迭代** 。
+
+在敏捷开发中，上述大厂研发流程的很多步骤都是可以简化、甚至省略的，非常灵活。
+
+比如上午我们想做一个产品，中午团队成员一起开会讨论需求、并确认产品上线必做的核心功能，下午就直接开始研发写代码了。先用最快的速度完成核心功能、能用就行，然后再持续地讨论新需求、持续地开发和上线、改进产品。
+
+把更多的时间都投入在研发上，主打一个快！
+
+
+
+如果采用敏捷研发的方式来生产辣条，大概是这样的：
+
+我们团队发现某个地区的人非常爱吃辣条，那么就直接纯人工用辛勤的双手先做个几包，以最快的速度让这些人试吃；然后再根据这些人的反馈去改良我们的配方、升级我们的包装；等大卖之后，再引进机器、买工厂，批量自动化生产辣条。
+
+需要注意的是，敏捷开发是一种软件开发方法论，具体的方法不止一种，比如 Scrum、Kanban、极限编程等。但是大致了解其基本概念和适用场景就足够了。
+
+
+
+## 研发流程选择
+
+在了解了上述的 2 种研发流程后，我们做项目时应该如何选择呢？
+
+首先要明确一点： **没有绝对好的选择** 。无论哪种研发流程，都有各自的优势，要根据实际情况来选择。
+
+敏捷开发虽然追求极致的快速和灵活，但也需要团队成员之间的高度配合，并且带来的风险也更大。有可能投入了几周的开发时间后才发现做了个没什么用的项目。相对而言，大厂的研发流程虽然需要消耗更多的前期资源和精力，但可以带来更高的产品质量、以及研发进度的稳定性。
+
+那么对于我们鱼聪明 AI 团队来说，是选择跑得快还是跑得稳呢？
+
+答案是：小孩子才做选择，我全都要！
+
+
+
+首先，分析我们自身的实际情况：
+
+1. 我们是一个小团队，没有大公司的资源和基础建设（比如流水线自动构建平台）
+2. 我们要做的是 AI 类产品，需要快速上线抢占市场
+3. 我们团队的同学全在一间 40 平米的小办公室里，大家可以紧密协作
+
+从这几点来看，我们会明显更倾向于敏捷开发。但是我们在敏捷开发的基础上，保留了大厂标准研发流程中的设计阶段和提交阶段，并且给网站做了完备的监控统计，用于持续改进产品。
+
+完整流程如下：
+
+
+
+我们希望网站开发在追求快速的同时，能够兼顾可扩展性和代码质量。因此，一方面我们在设计阶段投入了更多时间，采用更通用化的架构设计来支撑整个系统（比如使用微服务架构，独立拆分支付中心），从而能够应对未来的业务增长。
+
+另外一方面，在协作开发中，我们使用 Git 来管理代码，并采用简化版的 Git Flow 模型，让每位研发同学都创建属于自己的独立开发分支。等各自的功能开发完成后，由我来负责代码审查，通过后再将代码合并到主分支，从而保证了主分支的稳定。
+
+代码审查界面：
+
+
+
+有同学可能会问了：为什么把测试验证阶段砍掉了？你们做产品都不测试么？
+
+理想情况下，产品上线前肯定是需要由专门的测试工程师来测试验证的。但现实是，我们团队没有测试工程师！
+
+所以我们的策略是：
+
+1. 首先，前端和后端工程师各自开发和自测功能。在上线前，我会与负责该功能的团队成员一起开会，验证功能是否正常。
+2. 其次，问题是无法处理完的，系统也是不断完善的。因此，我们将尽快上线，招募一些内测用户来体验系统并反馈 Bug。
+
+这样一来，我们可以把更多的时间投入到研发上，同时不失去对产品质量的关注和持续改进的机会。
+
+
+
+---
+
+
+
+
+研发流程的选择没有绝对的对错，关键是要根据团队的实际情况和项目需求来定制。
+
+记住这几个关键点：
+
+1. 大厂研发流程注重规范和稳定，适合大团队
+2. 敏捷开发注重快速迭代，适合小团队
+3. 可以结合两者的优势，定制适合自己的流程
+4. 要保留核心环节（如设计、代码审查），简化非必要环节
+5. 研发流程要持续优化，不断改进
+
+在 Vibe Coding 时代，AI 可以帮你快速完成开发工作，但是一个好的研发流程，可以让团队协作更高效、项目质量更有保障。
+
+加油，找到适合自己的研发流程，让项目跑得又快又稳~
+
+
+
+
+## 推荐资源
+
+1）鱼皮 AI 导航网站：[AI 资源大全、最新 AI 资讯、免费 AI 教程](https://ai.codefather.cn)
+
+2）编程导航学习圈：[学习路线、编程教程、实战项目、求职宝典、交流答疑](https://www.codefather.cn)
+
+3）程序员面试八股文：[实习/校招/社招高频考点、企业真题解析](https://www.mianshiya.com)
+
+4）程序员写简历神器：[专业模板、丰富例句、直通面试](https://www.laoyujianli.com)
+
+5）1 对 1 模拟面试：[实习/校招/社招面试拿 Offer 必备](https://ai.mianshiya.com)
diff --git a/Vibe Coding 零基础教程/50 产品变现/07 产品盈利模式设计.md b/Vibe Coding 零基础教程/50 产品变现/07 产品盈利模式设计.md
new file mode 100644
index 0000000..16ed95a
--- /dev/null
+++ b/Vibe Coding 零基础教程/50 产品变现/07 产品盈利模式设计.md
@@ -0,0 +1,201 @@
+# 产品盈利模式设计
+
+> 为爱发电不现实，让产品产生价值
+
+
+
+大家好，我是鱼皮。今天要和大家分享的主题是 **盈利模式**，主要是希望能够给站长、软件开发者、内容创作者、团队领导者一些变现上的启发。
+
+下面先给大家介绍一下盈利模式的概念，然后会结合我自己的经历分享一些常见的盈利模式和思考。
+
+无论你是用 Vibe Coding 做个人项目，还是想做一款真正的产品，了解盈利模式都能帮你让产品产生更大的价值。
+
+
+
+## 什么是盈利模式？
+
+我们可以把 “盈利模式” 这个词拆解为 “盈利” + “模式”。
+
+所谓盈利，就是赚 💰 变现；而模式，是指采用一系列的方法或策略。
+
+那么两者结合，盈利模式就很好理解了。盈利模式是指：为了实现变现的目标，所采用的一系列方法和策略。简单来说，就是 “怎么变现”。
+
+举个直接的例子，我周末出去觅食的时候，看到了一家生意火爆的快餐店。对这家快餐店来说，它的盈利模式可以是它的菜品菜单和销售策略。
+
+它可以做一份吸引人的菜单，比如把番茄炒蛋叫做 “金彩绽红”，再通过独特的配方提高用户的满意度。它可以搞一系列的活动，比如买 1 送 1、拼团优惠、限时红包、雇一堆托儿来排队等等，从而刺激人们的消费欲、提高收入。
+
+
+
+## 盈利模式的必要性
+
+了解什么是盈利模式之后，我用一些小例子来给大家分享盈利模式的必要性。
+
+我从 20 年开始做编程知识分享自媒体，在无收入的情况下免费分享了 1 年的知识，因为没有经验、也没什么人气，根本不考虑变现，纯粹用爱发电。现在回过头来，是因为我自己的自驱力和毅力比较强，才勉强度过了这么一个冷启动期。
+
+刚开始有号主朋友让我接广告，我也是拒绝的，那个时候我固执地认为：接广告就是对不起粉丝。
+
+但后来我发现涨粉缓慢、也意识到自己的热情在逐渐消退。怎么破局呢？没办法，就试试接一条广告吧。
+
+结果呢，接到第一条广告后，由于自己的内疚心理，我会更加想要输出优质的干货内容来 “弥补” 粉丝；并且由于有了广告的收入，我也更乐意投入更多精力来生产内容，就感觉把自媒体当成了自己的事业一样，有了无穷的动力想把它做大做强。
+
+现在回过头来，我觉得自己的选择是正确的。我也看到很多和我同期的 UP 主，前期打着为爱发电的名号，后面要么放弃不做了、要么也开始做知识付费了。
+
+粉丝需要的是你的内容，需要你给他们带来 **持续的价值** ，这样才能正向发展。就像电视剧插播广告一样，如果没有广告，电视剧都没机会看到，观众会开心么？
+
+想把自媒体做大，一定要有持续更新的动力；而想把一家企业做大，也一定要有持续积累的资源。
+
+像我从 22 年开始做编程知识付费，一方面是为了给自己增加动力去帮助到更多学编程的小伙伴，强行不让自己闲下来；另一方面也是想为自己之后创业积累资源。
+
+没有前期资源，怎么去招员工？没有员工，怎么去做产品？没有产品，怎么稳定盈利？没有稳定盈利，企业怎么生存、怎么做得更大？
+
+就是这么简单的道理。
+
+所以，盈利模式对于企业来说是必要的。如果把企业比喻成一辆汽车，那么盈利模式就是汽车的引擎，它为企业的运营提供了动力和支持。就像引擎通过将燃料转化为动力，让车辆行驶；盈利模式通过将企业提供的产品或服务转化为利润，使企业能够持续运转和发展。
+
+
+
+## 如何选择盈利模式？
+
+盈利模式可以简单地像一杯白水，也可以复杂地像一杯特调。
+
+由于本人阅历有限，给大家分享一些基础的、主流的盈利模式，适合绝大多数朋友。
+
+
+
+### 1、直接收费
+
+直接向用户收取固定费用来换取产品或服务。
+
+比较常见的例子是软件许可证（或者我们小时候买的游戏盘），你想要使用这个软件，就要购买它的使用权。
+
+这种模式适用于提供 **价值相对固定** 的产品，在设置定价时要极为谨慎，多参考市场、并根据自身的产品价值来综合定价。
+
+
+
+### 2、广告收入
+
+通过直接向流量主、或者向广告商提供广告展示位置来获得收入，是一种成本和风险很低的盈利模式。
+
+比如在我们鱼聪明 AI 的导航页面中增加一个 AI 相关产品的推荐位置：
+
+> 这只是举个例子，事实上我们还没有通过这种方式盈利
+
+
+
+如果我们平台流量本身比较大，有自己的客户，那么就不用走广告商平台，直接跟客户交流具体的广告收费模式利润会更高。比如根据网站的日均访问数 * 天数 * 广告位的价值来收费。
+
+但如果平台流量不稳定，本身也没有统计广告的系统，建议接入第三方广告商平台，比如 Google AdSense。不仅不用自己去对接广告客户，还能够很灵活地配置广告位、查看广告的效果收入，很适合个人站长。
+
+需要注意的是，对于一个发展中的产品，要平衡好广告数量和用户体验，权衡广告收入和用户流失的比重。
+
+
+
+### 3、订阅制
+
+让用户按照一定时间周期来购买产品或服务的使用权。
+
+比如绝大多数产品都在用的包月包年会员制，就是最常见的订阅制模式。
+
+这种方式适用于频繁更新、能够提供持续价值的产品或服务，比如知识星球、信息订阅等。需要培养用户的使用习惯、提高用户的忠诚度，否则可能效果并不如直接收费模式。
+
+
+
+### 4、 Freemium 模式
+
+freemium（免费增值模式），是指产品先提供基本功能或免费服务来吸引用户使用，然后再通过付费的增值功能来实现盈利。
+
+这种模式的下游，可能是直接收费或者订阅制模式。核心思想在于：先通过免费服务留住用户，然后建立用户信任、培养用户的使用习惯，再进行收费，会比直接性 “推销” 的转化要好很多。因此这也是最常见的模式之一。
+
+我们的鱼聪明 AI 就是这种模式，前期消耗大量成本为用户提供免费服务，相当于投资抢占用户；后期再对用户进行转化变现。
+
+不过使用这种方式时，一定要权衡好免费用户与付费用户的占比、转化率和权益，不要像我们一样前期被薅到亏本。
+
+
+
+### 5、手续费
+
+平台作为交易或服务的中间人，从每次成交中收取一定比例的费用。
+
+最典型的例子就是微信支付，每笔交易都相当于在给微信 “分成”；知识星球也是同样的模式。
+
+这种方式的优点是风险低、长期收益大，后期基本上是躺着获利；但缺点就是提供中间服务的系统建设需要成本，要保证服务的质量，而且前期获取客户的信任成本难度较大。
+
+
+
+### 6、授权模式
+
+将自己的品牌、技术或知识产权授权给其他企业或个人使用，获得授权费用。
+
+SaaS（软件服务）就可以被看作是一种授权模式，为已授权的用户提供部署在云服务器上的软件产品。
+
+当然，授权模式的下游也可以是直接收费或者订阅制。比较适合拥有独特技术或知识产权、客单价较高的企业。
+
+
+
+### 7、成果销售
+
+通过收集和分析自身产品的成果，并且将成果出售给其他企业来获得收入。
+
+这里的成果可以是网站的内容、网站的数据、网站运营分析的结论等。
+
+举个例子，某旅游网站肯定有大量的用户旅游兴趣偏好数据，另外一家做旅游产品的公司，说不定就想购买这些数据来改进产品。像一些 AI 绘画类网站，也可以把精美的 AI 绘画打包售卖给研究 AI 绘画模型的公司、或者一些图像展示网站。
+
+这种模式适用于拥有大量有价值数据的产品，一般的小产品做不来。不过我们在开发系统时，要始终有这样一个沉淀的意识，保留好网站的所有数据，说不定日后会有意想不到的价值。
+
+
+
+### 8、附加值服务
+
+是指在原有产品或服务的基础上提供额外的服务，从而增加收入来源。
+
+比较典型的例子是支付宝，产品本身是提供支付服务的，但是现在你打开支付宝就能看到各种充值、外卖等生活服务。
+
+像我们的鱼聪明 AI 网站，也完全可以提供 AI 技术咨询服务作为增值服务，只不过我们人力有限，所以没有这么做。
+
+需要注意的是，附加值服务要与核心产品相匹配，而不是什么杂七杂八的服务都加到产品里，影响用户体验。
+
+
+
+### 9、合作伙伴模式
+
+一种比较高级的模式，通过和他人合作，互相让利，实现互利共赢。
+
+有很多可行的合作方式。比如 A 产品是提供求职服务的，B 产品是提供大学生咨询服务的，这两个产品完全可以互相引流推荐，增大各自的用户基数；还可以是 A 公司提供底层技术，B 公司提供上层服务，收益分成。
+
+需要注意的是，选择合作伙伴要同时考虑对方给自己的利益、以及自己给对方的利益，建立完善的盈利分成机制。因为一旦利益不对等，未来的合作必然会发生冲突。
+
+
+
+---
+
+
+
+
+盈利模式是产品变现的核心。选对了盈利模式，可以让产品持续产生价值；选错了盈利模式，可能会让产品难以为继。
+
+记住这几个关键点：
+
+1. 盈利模式有很多种，要根据产品特点选择
+2. 可以组合多种盈利模式，提供更多选择
+3. 要平衡短期收益和长期发展
+4. 要持续优化盈利模式，根据数据调整策略
+5. 盈利模式要符合用户需求，不能只考虑赚钱
+
+在 Vibe Coding 时代，做产品的门槛已经很低了。但是，如何让产品产生价值、持续发展，仍然需要你认真思考盈利模式。
+
+加油，找到适合自己的盈利模式，让产品真正产生价值！💪
+
+
+
+
+## 推荐资源
+
+1）鱼皮 AI 导航网站：[AI 资源大全、最新 AI 资讯、免费 AI 教程](https://ai.codefather.cn)
+
+2）编程导航学习圈：[学习路线、编程教程、实战项目、求职宝典、交流答疑](https://www.codefather.cn)
+
+3）程序员面试八股文：[实习/校招/社招高频考点、企业真题解析](https://www.mianshiya.com)
+
+4）程序员写简历神器：[专业模板、丰富例句、直通面试](https://www.laoyujianli.com)
+
+5）1 对 1 模拟面试：[实习/校招/社招面试拿 Offer 必备](https://ai.mianshiya.com)
diff --git a/Vibe Coding 零基础教程/50 产品变现/08 产品付费策略设计.md b/Vibe Coding 零基础教程/50 产品变现/08 产品付费策略设计.md
new file mode 100644
index 0000000..a1a0949
--- /dev/null
+++ b/Vibe Coding 零基础教程/50 产品变现/08 产品付费策略设计.md
@@ -0,0 +1,404 @@
+# 产品付费策略设计
+
+> 让用户愿意为你的产品买单
+
+
+
+大家好，我是鱼皮。先问大家一个问题，如果你花了大量时间做出了一款面向用户的产品，接下来你会选择哪种方式来向用户收取费用呢？
+
+是直接收费，让用户一次性购买产品的永久使用权？
+
+还是订阅制，让用户包月包年购买产品的使用权呢？
+
+以上两种方式，都是在上一篇文章中给大家分享的主流盈利模式。但其实除了这些 "打包付费" 的产品付费机制外，还有一些更灵活的 "按需付费" 机制，比如点数机制、套餐制、单次付费等。
+
+在这篇文章中，我会以自己的 AI 产品为例，给大家讲解一种关于付费机制的通用化设计 —— **点数机制**。
+
+无论你是用 Vibe Coding 做个人项目，还是想做一款真正的产品，了解点数机制都能帮你设计出更灵活的付费策略。
+
+
+
+## 什么是点数机制？
+
+区别于用户直接通过购买或者按时间订阅（比如包月会员）来获取产品或服务，对于点数机制，用户购买的是 **虚拟点数** ，然后可以 **根据需要** 使用这些点数来获取服务。
+
+相信大家对这种付费机制并不陌生吧，我们玩手游时充值的钻石、金币、点券，都是典型的点数机制。
+
+
+
+而且毫不夸张地说，现在绝大多数国产手游，都会采用这种机制。
+
+为什么呢？
+
+
+
+## 为什么选择点数机制？
+
+这里我会分别从产品和开发两个角度来介绍点数机制的优势。
+
+
+
+### 产品角度
+
+可以从我们自己的角度出发来思考点数机制的优势，比如问问自己：我在什么情况下会选择充值点数，而不是购买会员？
+
+
+
+#### 1、更灵活
+
+首当其冲的理由肯定是更加灵活。我可以用点数有选择地购买游戏中的多个商品，比如一半买装备、一半抽奖等，从而用同样的金额带来对自己来说最大的收益。
+
+我们的 AI 产品支持用户直接购买点数，并且提供了多种不同的点数套餐，用户可以灵活地使用这些点数来进行 AI 对话、AI 绘画等不同服务。
+
+
+
+
+
+#### 2、降低试错成本
+
+在我还没有了解清楚一款产品的功能、或者对一款产品 “上瘾” 前，我不会轻易地购买价格更高的会员。但是，有可能会乐意先付一点儿小钱来体验一下付费功能。
+
+使用点数机制，就为用户提供了更小的试错成本。比起直接用高价将用户拒之门外，先让用户体验到付费功能的价值，他们可能会更乐意继续付费，从而增加产品的收入。
+
+这种做法还有一个额外的好处：侧重于用产品的功能，而不是花里胡哨的营销手段（百年会员）来吸引人，更有利于产品的口碑。
+
+我们的 AI 产品也参考了很多手游的套路，最低只需 6 元就可以购买点数。
+
+
+
+#### 3、降低心理成本
+
+在我花更高的固定价格去购买产品前，我肯定会考虑很多方面：比如我会用多久？会用到哪些功能？这些功能是否对得起这些价格？
+
+用户做决策所需的思考越多，购买意愿就越不固定。
+
+而使用点数机制，我不用考虑很多，比如就用 1 元充 10 点，购买意愿就会更强。
+
+此外，点数机制将价格抽象为虚拟点数，让用户能够更专注于所购买的产品本身，而非金钱上的支出，在消耗点数时也会更自然一些。
+
+
+
+#### 4、提升用户粘性
+
+点数机制能够提升用户的粘性和留存率。一旦我购买了点数，就会不自觉地产生 “我要把这些点数花完” 的心理，就会持续使用这款产品，从而进一步增强对这款产品的依赖。
+
+在我们的 AI 产品中，为了留存用户、培养使用习惯，支持让用户每日免费领取一定点数，这种做法对产品前期尤为重要。
+
+
+
+
+
+#### 5、适应多样化的业务
+
+如果一个系统有很多功能，对用户来说，肯定不希望自己在某个功能的使用上都存在独立的限制，比如：
+
+- AI 对话剩余 10 次
+- AI 绘画剩余 5 次
+- AI 写书剩余 0 次
+
+如果用户只想用 AI 写书功能，那么比起买打包的套餐，肯定更希望直接买 AI 写书次数，产品就需要支持这个购买选择。
+
+而如果用户想同时用 AI 绘画和 AI 写书功能，那么肯定更希望买个针对这两个功能的打包套餐，产品也需要支持这个购买选择。
+
+随着功能的增多，需要支持的购买选择将指数级增长，各种购买选择的定价也会越来越难统一。
+
+而如果把上述的所有次数都统一为 “点数”，那么对于用户来说就更好理解，不用关心每个功能还剩几次、也不用精打细算怎么买最实惠，可以自由地分配点数。
+
+对于公司来说，不仅可以简化定价的过程，还能够通过各功能或各业务的搭配，实现整体销售额的提升。腾讯的 Q 币就是典型的例子，任何一个腾讯下的产品，都有可能吸引你去充值它。
+
+
+
+### 研发角度
+
+从研发角度来看，我认为点数机制最大的优势在于 **通用化** 。
+
+而通用化设计带来的好处又分为：统一概念、简化开发、提升可扩展性。
+
+
+
+#### 1、统一概念
+
+不知道大家是否听说过 KISS 原则（Keep It Simple, Stupid），保持简单、越简单越好。
+
+在系统研发的过程中，出现的概念越少，越有利于系统的设计、开发和维护。
+
+相比起让产品的各功能分别对应不同的使用次数限制，使用 **点数** 这个统一的通用概念，更便于研发和产品同学的交流和理解。
+
+举个极端的例子：
+
+- AI 对话功能消耗 1 个 “对话币”
+- AI 绘画功能消耗 2 个 “绘画币”
+- AI 写书功能消耗 3 个 “写书币”
+- 用户 A 还剩 2 个 “对话币”、3 个 “绘画币”、 9 个 “写书币”
+- 用户 A 还能使用 2 次 AI 对话、1 次 AI 绘画、3 次 AI 写书
+
+大家就需要同时关注 3 种功能及其对应的虚拟代币。
+
+而如果统一为点数的概念，上述信息就很好理解了：
+
+- AI 对话、AI 绘画、AI 写书功能分别消耗 1、2、3 点数
+- 用户 A 还剩 14 点数
+
+
+
+#### 2、简化开发
+
+最开始的时候，因为系统的功能还比较少，我们打算每个功能分别限制用户的可使用次数。比如用户每天只能使用 10 次 AI 对话、5 次 AI 绘画。
+
+那么在编写代码时，就要分别在 AI 对话和 AI 绘画功能中都增加 **特定的** 校验和统计逻辑，比如：
+
+```java
+// AI 对话功能
+void doChat() {
+ // 获取并校验用户剩余的 AI 对话次数
+ chatLeftNum = user.getChatLeftNum()
+ if (chatLeftNum < 1) {
+ throw new Exception("AI 对话次数不足")
+ }
+ // 操作成功，AI 对话次数 - 1
+ chatLeftNum--;
+ chatLeftNum = chatLeftNum - 1;
+}
+
+// AI 绘画功能
+void doDraw() {
+ // 获取并校验用户剩余的 AI 绘画次数
+ drawLeftNum = user.getDrawLeftNum()
+ if (drawLeftNum < 1) {
+ throw new Exception("AI 绘画次数不足")
+ }
+ // 操作成功，AI 绘画次数 - 1
+ drawLeftNum = drawLeftNum - 1;
+}
+```
+
+此外，数据库中要存储更多的信息，比如：
+
+| 用户 id | AI 对话次数 | AI 绘画次数 | 其他 |
+| ------- | ----------- | ----------- | ---- |
+| 1 | 1 | 5 | ... |
+| 2 | 2 | 6 | ... |
+
+可想而知，随着系统功能数的增多，相似但不完全相同的校验逻辑会越来越多，系统会越来越难以维护；而且数据库也要不断增加新的列、占用更多存储空间。
+
+如果使用点数机制，可以把各种调用次数变量（chatLeftNum 和 drawLeftNum）统一为点数（points），不同的功能消耗的点数不同。
+
+示例代码如下：
+
+```java
+// AI 对话功能
+void doChat() {
+ // 获取并校验用户剩余的点数
+ points = user.getPoints()
+ if (points < 1) {
+ throw new Exception("AI 对话次数不足")
+ }
+ // 操作成功，点数 -1
+ points = points - 1;
+}
+
+// AI 绘画功能
+void doDraw() {
+ // 获取并校验用户剩余的点数
+ points = user.getPoints()
+ if (points < 2) {
+ throw new Exception("AI 绘画次数不足")
+ }
+ // 操作成功，点数 -2
+ points = points - 2;
+}
+```
+
+
+
+还可以把点数的校验和消耗逻辑统一抽象为通用的公共方法，示例代码如下：
+
+```java
+// 检查剩余点数
+// 参数 type 表示功能
+void checkPoints(type) {
+ needPoints = 1;
+ if (type === "draw") {
+ needPoints = 2;
+ }
+ points = user.getPoints();
+ if (points < needPoints) {
+ throw new Exception("剩余点数不足")
+ }
+}
+
+// 消耗剩余点数
+// 参数 type 表示功能
+void usePoints(type) {
+ needPoints = 1;
+ if (type === "draw") {
+ needPoints = 2;
+ }
+ points = user.getPoints();
+ // 减少点数
+ points = points - needPoints;
+}
+```
+
+
+
+有了这 2 个公共方法后，原本的代码可以简化为：
+
+```java
+// AI 对话功能
+void doChat() {
+ checkPoints("chat");
+ ...
+ usePoints("chat")
+}
+
+// AI 绘画功能
+void doDraw() {
+ checkPoints("draw");
+ ...
+ usePoints("draw");
+}
+```
+
+
+
+当然，这还不是最佳实践，因为代码中仍然包含了 “硬逻辑” —— 根据 type 来区分消耗的点数。
+
+我们可以编写一个 json 配置文件，专门存放所有功能对应的点数消耗，示例代码如下：
+
+```json
+[
+ {
+ "type": "chat",
+ "usePoints": 1
+ },
+ {
+ "type": "draw",
+ "usePoints": 2
+ },
+]
+```
+
+
+
+再编写一个公共方法，根据功能（type）从该配置文件中取出对应的点数消耗，示例代码如下：
+
+```java
+int getUsePoints(type) {
+ list = readJSON("配置文件")
+ for (item : list) {
+ if (item.type == type) {
+ return item.usePoints;
+ }
+ }
+ return 0;
+}
+```
+
+
+
+然后公共的点数校验和消耗方法，就可以不用再写 if else 了！
+
+```java
+// 检查剩余点数
+// 参数 type 表示功能
+void checkPoints(type) {
+ needPoints = getUsePoints(type);
+ points = user.getPoints();
+ if (points < needPoints) {
+ throw new Exception("剩余点数不足")
+ }
+}
+
+// 消耗剩余点数
+// 参数 type 表示功能
+void usePoints(type) {
+ needPoints = getUsePoints(type);
+ points = user.getPoints();
+ // 减少点数
+ points = points - needPoints;
+}
+```
+
+
+
+之后如果我们需要增加新的功能，只需要在 json 配置文件中增加一个元素即可，比如：
+
+```json
+{
+ "type": "writeBook",
+ "usePoints": 2
+}
+```
+
+
+
+而且无论后续系统增加多少新功能，数据库中始终只需要存储用户剩余的点数，不用反复增加新的列。极大地简化了开发！
+
+
+
+#### 3、提升可扩展性
+
+一般来说，越通用的逻辑，可扩展性越强。
+
+如果我们不使用点数机制，而是分别给每个功能增加对应的次数限制，如果要在这个功能内部再增加次数消耗的区分，逻辑就会越来越复杂。
+
+举个例子，AI 绘画功能还支持额外功能以图生图，如果只使用 AI 绘画，消耗 1 次；如果要额外使用以图生图功能，消耗 2 次；那么如果还有额外的功能，要消耗几次呢？会不会出现需要消耗 1.5 次的情况呢？如果次数不支持小数，怎么办呢？
+
+很有可能系统随着上述逻辑的增多，慢慢走到一个死胡同，无法继续扩展新功能。
+
+如果使用点数机制，我们可以把数字的基数放大，比如说 1 次对应 10 个点数，这样就有利于我们给额外的功能设置额外的点数消耗。比如 AI 绘画消耗 20 点数，额外使用以图生图增加 10 个点数，更有利于系统的扩展。
+
+
+
+## 点数机制的应用
+
+因为点数机制的上述优势，我们的 AI 产品选择它作为主要的付费制度。
+
+当然，点数机制也是存在缺点的，比如不够直观、价值不固定等。而且对于 “营销 > 价值” 本身的产品来说，给用户一定的试错成本，可能反而不如会员订阅制的销售额多。
+
+所以是否要运用点数机制，需要结合实际情况和产品性质来综合考虑。
+
+像我们的 AI 产品，是同时结合了点数机制、会员制和套餐制三种制度，为用户提供更全面的选择。比如用户可以成为会员每日领取更多点数、享受更多权益；也可以通过套餐优惠获得更多点数；同时也兼具了点数机制本身带来的通用性和灵活性。
+
+此外，点数机制本身就是一种 **通用化设计** ，不仅可以作为付费制度，还可以应用到很多不同的场景，比如：
+
+- 电商平台中，消费者可以通过购物积分兑换其他商品。
+- 外卖平台中，用户可以通过点餐积分兑换折扣优惠。
+- 教育平台中，学生可以看课程得积分，用于兑换特定奖励。
+
+
+
+
+
+
+## 写在最后
+
+点数机制是一种灵活且通用的付费策略设计。它不仅能提升用户体验，还能简化系统开发，提高可扩展性。
+
+记住这几个关键点：
+
+1. 点数机制更灵活，降低用户的试错成本和心理成本
+2. 点数机制能适应多样化的业务需求
+3. 点数机制能统一概念，简化开发
+4. 点数机制要结合实际情况使用，不是万能的
+5. 可以组合点数机制、会员制、套餐制等多种方式
+
+在 Vibe Coding 时代，实现点数机制的代码可以让 AI 帮你生成。但是，如何设计出合理的付费策略，让用户愿意为你的产品买单，仍然需要你认真思考。
+
+加油，设计出让用户满意的付费策略！💪
+
+
+
+
+## 推荐资源
+
+1）鱼皮 AI 导航网站：[AI 资源大全、最新 AI 资讯、免费 AI 教程](https://ai.codefather.cn)
+
+2）编程导航学习圈：[学习路线、编程教程、实战项目、求职宝典、交流答疑](https://www.codefather.cn)
+
+3）程序员面试八股文：[实习/校招/社招高频考点、企业真题解析](https://www.mianshiya.com)
+
+4）程序员写简历神器：[专业模板、丰富例句、直通面试](https://www.laoyujianli.com)
+
+5）1 对 1 模拟面试：[实习/校招/社招面试拿 Offer 必备](https://ai.mianshiya.com)
diff --git a/Vibe Coding 零基础教程/50 产品变现/09 SEO 搜索引擎优化实战.md b/Vibe Coding 零基础教程/50 产品变现/09 SEO 搜索引擎优化实战.md
new file mode 100644
index 0000000..d92f659
--- /dev/null
+++ b/Vibe Coding 零基础教程/50 产品变现/09 SEO 搜索引擎优化实战.md
@@ -0,0 +1,227 @@
+# SEO 搜索引擎优化实战
+
+> 让更多人发现你的产品
+
+
+
+大家好，我是程序员鱼皮。我们团队做的程序员面试刷题网站 [面试鸭](https://www.mianshiya.com/) 上线不到半个月的时候，就被百度等各大搜索引擎收录和推荐了！
+
+效果显而易见，用户搜索 “面试鸭” 的时候，第一个看到的就是我们自己的网站，从而给网站增加流量：
+
+
+
+关于如何让搜索引擎更快地收录网站，其实是一门很深的学问，还有一个专业术语叫 SEO。对于个人站长来说，搜索引擎的流量是至关重要的，大家应该都希望自己的网站能够被更多人看到吧？暂且不说收益，有个访问量大的网站，写简历和面试的时候也能吹一波牛皮~ 所以我建议程序员朋友们最好对 SEO 有一定了解。
+
+今天这篇文章，我就以自己的面试鸭网站为例，给大家分享一些 SEO 实用技巧，让大家的网站都能更快地被搜索引擎收录。同时，我还会介绍 AI 时代的新概念 —— GEO（生成式引擎优化），帮助你的产品在 AI 搜索时代也能被更多人发现。
+
+无论你是用 Vibe Coding 做个人项目，还是想做一款真正的产品，掌握 SEO 和 GEO 的方法都能帮你获得更多流量。
+
+⭐️ 也可以观看视频讲解，热乎的：https://www.bilibili.com/video/BV1tz421i7Q1
+
+
+## 鱼皮 SEO 干货分享
+
+### 一、什么是 SEO？
+
+SEO 全称为 Search Engine Optimization，即搜索引擎优化，使网站更容易被搜索引擎收录和呈现，可以让更多人通过百度、谷歌之类的搜索引擎发现你的网站，从而提升网站的访问量和知名度。
+
+在学习如何进行 SEO 优化前，我们先简单了解 SEO 的流程，也就是：搜索引擎是如何发现你的网站并且让用户搜索到的？
+
+
+
+### 二、SEO 的流程
+
+整个 SEO 过程可以分为四个主要阶段：抓取、收录、索引和排名。下面我就来详细讲解一下这四个步骤。
+
+#### 1、抓取
+
+抓取是 SEO 流程的第一步，搜索引擎会派出一群爬虫程序（俗称蜘蛛），它们会在互联网上到处爬行，访问各个网站，并抓取网页的内容。这些蜘蛛会按照链接从一个页面跳转到另一个页面，尽可能地遍历整个网站。
+
+#### 2、收录
+
+抓取完成后，搜索引擎会对网页内容进行分析，并决定是否将该页面收录到它的数据库中。被收录的页面才能在用户搜索时显示出来，因此，确保页面被收录是 SEO 中的关键一步。有的网站虽然有很多链接和内容，但是只要搜索引擎的蜘蛛不喜欢、不收录，那么别人即使专门对着你的网站搜，都搜不出来。
+
+#### 3、索引
+
+索引是指搜索引擎将已收录的网页内容进行整理和分类，并建立一个巨大的索引库。这个过程类似于给每个网页打上标签，以便在用户搜索时，搜索引擎能够迅速找到与搜索词相关的网页。
+
+比如我们的面试鸭网站内容中包括：Java面试题库、前端面试题库、C++面试题库，那么这几个词就有可能被设置为索引。用户搜索内容时如果包含了这些词，就有可能搜索我们的网站。
+
+#### 4、排名
+
+现在网站那么多，同样的索引也非常多，如何保证用户优先搜到我们的网站呢？这就涉及到 SEO 的最后一步 —— 排名。
+
+当用户在搜索引擎中输入关键词时，搜索引擎会根据其算法，从索引库中挑选出最相关的网页，并 **按照相关性、权重、网站质量** 等因素进行排序，决定哪些网页出现在搜索结果的前几页。
+
+这就是 SEO 的流程，我下面要分享的 SEO 优化技巧，也都是围绕这些流程展开。
+
+
+
+### 三、如何进行 SEO 优化？
+
+#### 1、关键词优化
+关键词是指用户在搜索引擎中输入的词汇，可以通过在网站的 HTML 头信息中设置关键词（Keywords）和描述（Description）等信息，来增加网站的索引、并提高网页在相关搜索中的排名。
+
+关键词的选择需要精确并且跟网站内容强相关，避免过度堆砌关键词，以免被搜索引擎判定为作弊行为。
+
+比如要做一个面试刷题网站，可以设置下列关键词和描述：
+
+```html
+
+
+```
+
+
+
+#### 2、网站结构优化
+网站结构优化分为 2 点：整站页面结构优化和每个页面的内容结构优化。
+
+对于整个网站，页面嵌套的层次应当尽量扁平化、尽量缩短页面层级，以减少爬虫抓取的难度。
+
+举个例子，下面两种网站结构，你觉得哪种结构的页面更容易被爬虫全部访问到呢？
+
+
+
+答案不言而喻，对于你想更快被搜索引擎发现的重要页面，应该尽可能缩短跳转到该网站的路径，并且适当多增加一些跳转到该页面的入口。
+
+对于每个页面，应当有明确的层次结构，可以使用合理的标题标签（如一级标题 `` ）使页面内容更加易于索引。
+
+
+
+#### 3、友情链接
+
+我大学刚开始做个人网站的时候，就是通过友情链接的方式来增加网站的权重（虽然效果有限）。操作方法很简单，你的网站上添加别人网站的链接，别人的网站添加你的网站的链接，你们双方的网站互相推荐，就更容易提升在搜索引擎中的排名。
+
+友链背后的原理也很简单。很多搜索引擎都会按照权重对网站进行排名，权重是怎么计算的呢？一种很简单的算法（Page Rank），就是每个网站都有自己的票数，每有一个别人的网站添加了跳转到你的网站的友情链接，就相当于给你的网站投一票，得票数高的网站就能获得更高的权重和排名。友链就相当于互相投票，比 1 票都没有的网站要好。
+
+
+
+当然，这种互相推荐的方式需要谨慎使用，避免过度交换链接，可能会导致权重分散。
+
+
+
+#### 4、Sitemap 文件
+Sitemap 网站地图是一个列出了你网站所有页面的文件，通常放在网站的根目录下，或者通过 robots.txt 文件指定其位置。它可以帮助搜索引擎更快速地了解你网站的结构，并抓取你希望优先收录的页面。
+
+就相当于你给爬虫发了一份地图，爬虫就不容易迷路，也不容易错过你网站的重要页面。
+
+对于结构比较简单的网站，使用静态的、固定不变的 Sitemap 就足够了。如下图：
+
+
+
+但对于内容持续更新的网站，还有更高级的操作，就是利用程序自动生成动态的 Sitemap，比如把每天新增的题目生成为一个 Sitemap 文件，便于让爬虫更快发现最新的内容。
+
+此外，有些搜索引擎还支持主动上传提交 Sitemap 文件，可以进一步缩短网站被发现和收录的时间。
+
+
+
+#### 5、SSR 服务端渲染
+
+注意，这里的 SSR 不是我们玩游戏抽卡说的那个！
+
+SSR 服务端渲染是 SEO 最为有效的技术之一。是指在服务器端生成 **完整的 HTML 页面** ，并将其直接发送到浏览器。相比传统的前端 AJAX 动态请求数据的渲染方式，SSR 能够让搜索引擎更容易抓取到完整页面内容，从而提升 SEO 效果。
+
+举个例子，如果是动态请求数据的前端网站，爬虫看到的网页内容可能是残缺不全的，如下图：
+
+
+
+因为浏览器是从服务器拉取到网页后，再加载 JS 脚本，最后才发送请求来获取数据。
+
+而如果使用了服务端渲染，服务器会完成对数据的请求，并且将数据拼装到页面里，再返回给前端，爬虫看到的网页内容更完整，如下图：
+
+
+
+服务端渲染的效果虽然好，但也会加重服务器的压力，而且开发成本通常会更高。比如我们的面试鸭使用 Next.js 框架开发，开发过程中也踩了不少坑。
+
+哦对了，用 PHP 来开发服务端渲染的网站是很方便的，这可能也是为什么以前 PHP 那么流行的原因之一。
+
+
+
+#### 6、SSG 静态站点生成
+
+和 SSR 有点类似，SSG 是 SEO 优化的另一大杀器。是指在构建网站时，预先生成所有页面的 **静态 HTML 文件** ，并将其直接部署到服务器上。当用户访问网站时，直接获取到生成好的 HTML 文件即可，相比 SSR 服务端渲染，都不需要服务器再临时去请求数据了。
+
+这种方法不仅大大提高了页面加载速度，而且使得搜索引擎能够更快、更完整地索引所有页面。所以很多博客站点生成器（比如 Hugo、VuePress、Hexo）都是将写好的文章打包生成为静态 HTML 后，再部署到服务器上。
+
+当然，SSG 也不是银弹，适用于内容较为固定、更新频率较低的网站，如个人博客等。静态网站本质上就是一种缓存，如果网页内容频繁变化，就要频繁更新这个文件，也会有不小的成本。
+
+所以我们可以想到一种更高级的策略：SSR + SSG 结合！内容相对固定的网页使用静态生成，内容变化的网页使用服务端渲染，不需要 SEO 的网页纯客户端渲染即可。
+
+
+
+#### 7、砸米
+
+注意，以上方式并不保证绝对有效，只是增加搜索引擎收录和排名优化的概率，SEO 策略是需要持续调整和长时间验证的。
+
+如果团队内没有懂 SEO 的技术人员，又想快速让自己的网站被搜索引擎推荐，那就只能 “砸米” 了，简单粗暴，就是花钱买广告，让你的网页在搜索结果的前几名出现。很多公司也都是这么做的，但对于没有收益的个人站长来说，还是老老实实用前面推荐的方式吧。
+
+
+
+## AI 时代的 GEO：生成式引擎优化
+
+随着 ChatGPT 等 AI 对话工具的普及，越来越多的用户开始使用 AI 来搜索信息，而不是传统的搜索引擎。这就催生了一个新的概念 **GEO（Generative Engine Optimization，生成式引擎优化）**。
+
+
+
+### 什么是 GEO？
+
+GEO 是指优化你的内容，使其更容易被 AI 搜索引擎（如 ChatGPT、Perplexity、Gemini 等）理解和引用。当用户向 AI 提问时，AI 会从互联网上抓取相关内容，然后生成回答。如果你的网站内容被 AI 引用，就能获得更多曝光。
+
+
+
+### GEO 和 SEO 的区别
+
+- SEO：优化网站，让传统搜索引擎（如百度、谷歌）更容易收录和排名
+- GEO：优化内容，让 AI 搜索引擎更容易理解和引用
+
+
+
+### 如何做好 GEO？
+
+1）内容结构化
+
+AI 更喜欢结构清晰的内容。使用标题、列表、表格等方式组织内容，让 AI 更容易提取关键信息。
+
+2）提供权威信息
+
+AI 更倾向于引用权威、准确的信息。确保你的内容有数据支撑、有来源引用，提高内容的可信度。
+
+3）使用自然语言
+
+AI 理解自然语言的能力很强。用通俗易懂的语言写作，避免过度专业化的术语，让 AI 更容易理解你的内容。
+
+4）回答用户问题
+
+AI 搜索通常是以问答的形式进行的。在内容中直接回答用户可能提出的问题，比如 “如何做 XX”、“XX 是什么”，这样更容易被 AI 引用。
+
+5）保持内容更新
+
+AI 倾向于引用最新的内容。定期更新你的网站内容，保持信息的时效性。
+
+6）提供完整的上下文
+
+AI 需要理解内容的上下文才能准确引用。确保每篇文章都有完整的背景介绍和详细的说明，不要让读者（和 AI）感到困惑。
+
+
+
+## 写在最后
+
+
+在 Vibe Coding 时代，用 AI 做产品已经很容易了。但是，如何让更多人发现你的产品，仍然需要你掌握 SEO 和 GEO 的方法。
+
+加油，让你的产品被更多人发现吧~
+
+
+
+
+## 推荐资源
+
+1）鱼皮 AI 导航网站：[AI 资源大全、最新 AI 资讯、免费 AI 教程](https://ai.codefather.cn)
+
+2）编程导航学习圈：[学习路线、编程教程、实战项目、求职宝典、交流答疑](https://www.codefather.cn)
+
+3）程序员面试八股文：[实习/校招/社招高频考点、企业真题解析](https://www.mianshiya.com)
+
+4）程序员写简历神器：[专业模板、丰富例句、直通面试](https://www.laoyujianli.com)
+
+5）1 对 1 模拟面试：[实习/校招/社招面试拿 Offer 必备](https://ai.mianshiya.com)
diff --git a/Vibe Coding 零基础教程/50 产品变现/我的自媒体涨粉运营之路.md b/Vibe Coding 零基础教程/50 产品变现/我的自媒体涨粉运营之路.md
new file mode 100644
index 0000000..ed142a6
--- /dev/null
+++ b/Vibe Coding 零基础教程/50 产品变现/我的自媒体涨粉运营之路.md
@@ -0,0 +1,345 @@
+# 我的自媒体涨粉运营之路
+
+> 从 0 到 200 万粉的真实经历
+
+
+
+大家好，我是鱼皮。98 年的小弟，之前在腾讯全干开发，现在是全网 200 万粉的 AI 编程知识博主 + 创业者。
+
+这篇文章，我想跟大家聊聊我这 9 年的经历：从大学自学编程 → 女朋友跟别人跑了 → 进入腾讯 → 离职创业 → 做自媒体从 0 到 200 万粉 → 产品破产 → 公司产品月活过百万。有高光时刻，也有至暗时刻；有成功的经验，也有血泪的教训。
+
+如果你：
+- 想通过自媒体快速涨粉或靠副业提升收入
+- 想知道如何从 0 开始做起一个事业
+- 对编程学习、求职、AI 技术感兴趣
+- 正在创业或想创业，需要一些真实的经验参考
+
+那这篇文章应该能给你一些启发。
+
+如果你之前完全没听说过、或者只是半路关注，那正好，让我给你讲一个从普通程序员到自媒体创业者的真实故事。
+
+
+
+## 我的故事
+
+### 大学：女友跑了，但我拿到了第一
+
+16 年进入大学后，我开始自学 Java、前端、Python、Go 等多种编程技术。
+
+那时候的我，真的是个卷王。白天上课，晚上泡在图书馆敲代码，凌晨回宿舍是常态。作为工作室负责人，我带队给学校建设了几十个网站，用赚的钱给自己买了第一台显示器，那种靠自己 “手艺” 赚钱的感觉，真的很爽。
+
+
+
+但代价也是惨重的。
+
+长期高强度学习 + 熬夜，我的肠胃出了问题，有段时间饭都吃不下去，只能靠汉堡炸鸡外卖度日。更惨的是，女朋友因为我天天不陪她、只顾着敲代码，最后跟别人跑了。
+
+那段时间真的很痛苦，我甚至怀疑过自己这么拼到底值不值得。
+
+但既然选择了这条路，就没有回头的余地。我继续埋头苦干，最后以专业第一的成绩拿到了国家奖学金、挑战杯竞赛国奖和上海市特等奖、上海市优秀毕业生。大三还跟老师出版了《区块链智能合约技术与应用》教材。
+
+现在想想，那种为了一个目标全力以赴的感觉，真的很纯粹。虽然失去了很多，但也收获了更多。
+
+
+
+### 腾讯：211 本科生在清北堆里的逆袭
+
+19 年校招时，我拿到了多家大厂 offer，最终选择腾讯。
+
+
+
+说实话，当时压力很大。我只是 211 本科，身边的实习生清一色清北复交的大佬，学历、背景都比我强。记得第一次公司内部封闭培训时，当我介绍学历时，大家看我的眼神就像看一条 “臭狗”。
+
+但我没有失去信心，既然学历拼不过，那我就拼时间、拼努力。别人下班了，我还在公司学习内部文档；别人周末出去玩，我在研究项目代码。最拼的那几天，因为学得太晚没有地铁了，我甚至买了个行军床，直接住在公司。
+
+> 住在公司的体验真心差，保洁阿姨大早上 6 点多就会把你弄醒
+
+功夫不负有心人，我最终以组内第一的成绩通过了转正答辩，并斩获 SSP 最高级别的 offer。
+
+在职腾讯近 4 年，我主导 BI 项目研发、参与大数据研发，曾获腾讯内部应用开发竞赛冠军、5 星优秀员工、晋升绿色通道。工作两年半就担任了新人导师。
+
+
+
+刚工作后，我用赚的钱给家里买了台电视、给爸妈买了按脚仪。那一刻，我觉得所有的付出都值了。
+
+
+
+### 自媒体：从抖音 18 播放量到全网 200 万粉
+
+我最开始的自媒体尝试是做短视频。
+
+那是疫情期间，我在抖音上开了个账号叫 “面试君主”，专门分享程序员面试题。第一个视频我做了三四个小时，结果播放量只有整整 18！
+
+虽然打击很大，但我没有放弃，一连坚持了一个多月，每天至少更新一个视频。最高播放量的视频达到了 1800，收获了人生中第一批 100 多个粉丝。
+
+后来我换了个思路，注册了新号【程序员鱼皮】，分享自己的真实经历。结果第二天醒来，消息 99+，我超级激动！
+
+但打开评论区，心情立刻跌入谷底：清一色的怀疑、鄙视、甚至谩骂。“又一个营销号”、“骗人的吧”...... 那些恶评点赞数都快接近我视频点赞数了。
+
+当时我的心理素质不够强，就删掉了评论。现在想想，真的要感谢当时骂我的朋友们，因为互动率真的高啊（笑）。
+
+20 年国庆期间，我做了另一个决定。
+
+那天我刚打完游戏，无所事事。进腾讯一年后，我发现自己似乎已经懒得做工作之外的事情了，每天下班后还耗费精力在游戏世界里浑浑噩噩。
+
+我想，有没有一种外力，可以让我重燃大学时奋斗的热情？
+
+想到这里，我游戏装备都懒得卖了，立刻打开公众号《程序员鱼皮》，写下了第一篇文章。
+
+**从那天起，我再也没时间卖游戏装备了。**
+
+刚开始我傻傻地以为想要涨粉，就要多写文章，于是给自己定下了每天 1 篇的目标。在粉丝没几个的情况下，硬是生怼了十几篇文章，质量不高、阅读不高、粉丝也没涨几个。
+
+很快，我意识到这样下去得完犊子，必须要改变方法！
+
+于是我开始混圈子，向成功的前辈交流、学习、模仿；开拓渠道，把同一篇文章、同一个视频发布到多个平台；甚至人生第一次直播，十几个观众，我不知道该讲啥，就一直重复 “大家好，这是我第一次直播”。
+
+**最狠的是，我曾经连续 100 多天，每天下班后直播到凌晨带大家敲代码。**
+
+说真的，压力很大。听说当程序员容易脱发、自媒体容易脱发，那这两个加起来岂不是发如雨下？我的头发是真真实实地在持续哭泣！
+
+但我相信：看似一个人的火爆是偶然，对于知识创作者来说，更多的是 **厚积薄发**。有东西的人，就是有东西，只需要打开一个开关，光芒就会绽放。
+
+就这样，靠着坚持和死磕，至今累计创作近千篇、千万字，全网积累了 200 万+ 的关注。
+
+后来评论区的怀疑和谩骂越来越少，甚至到现在很少再出现差评了。有时候我还挺想念那些骂我的日子，毕竟互动率真的高（开玩笑）。
+
+
+
+
+
+### 知识付费：从质疑到认可的 3 年
+
+22 年，我开通了知识付费圈子，也就是现在的 [编程导航](https://codefather.cn)。
+
+刚开始有很多质疑，我完全能理解。但我坚持了下来，因为我不想做那种收割一波粉丝、赚一桶金就不再维护内容的事，良心会痛。
+
+这 3 年来，我带大家做了十几套完整的原创项目教程，包括 AI 应用开发、微服务架构、高并发系统、轮子项目等等。很多项目都是十几万字的文字教程 + 几十小时的视频讲解，期间还出版过项目实战教程书籍，我是真的在用心做这件事。
+
+
+
+很多同学通过这些项目学习，成功拿到了大厂 offer。每次看到大家上岸的消息，我真的超开心。
+
+
+
+如今 [编程导航](https://codefather.cn/) 已经成为国内最大的编程学习交流圈之一，累计帮助几十万名程序员朋友提升技术和项目能力。
+
+
+
+
+
+### 创业：从 5 万用户到破产，只用了一个月
+
+23 年，我做了人生中最重要的一个决定：离职创业。
+
+原因有 2 个：
+
+1）AI 风口来了，我想试一试
+
+2）在公司成长空间有限，我想做做自己感兴趣的事。
+
+当时公司像个笼子一样，框住了我这只小鸟儿。我有很多想法，但工作占用了我每天绝大多数时间，甚至还有同事举报我做自媒体。
+
+我不想被束缚，我想做自己热爱的事情。
+
+
+
+24 岁那年，我组了个 4 人小队，在毫无经验的情况下，开启了一场艰难的创业之旅。
+
+
+
+**老实说，创业这两年多，我经历了之前 20 多年人生都从未有过的打击，甚至比高考的失利还要大。**
+
+刚开始，我热情高涨、信心满满。带着仅有的一名前端同学从 0 开始做了个 AI 助手平台《鱼聪明 AI》，用了一个月左右上线。
+
+
+
+结果很顺利，上线一周用户数就突破了 5 万！我开始幻想自己能够成为 “李” 尔盖茨了，甚至还带着同事们去北京团建游玩。
+
+**但变化来得太突然了。**
+
+仅仅一个月后，产品就破产了，入不敷出！
+
+AI 产品遭到封杀、同类产品疯狂内卷、前期白送了大量会员被薅羊毛...... 这给了我沉重的打击，毕竟这是公司的第一个产品、做了这么久的产品、给予了这么大希望的产品，突然就破产了。
+
+都说要拥抱变化，我特么的拥抱不住啊！！！
+
+
+
+后来我冷静下来，意识到在没有稳定团队的情况下，追求爆款的代价太大了，不如踏踏实实做点有长期价值的事。
+
+于是我们开始做各种工具类产品：[老鱼简历](https://www.laoyujianli.com/)、[代码小抄](https://codecopy.cn/)、[剪切助手](https://jianqiezhushou.com/)、[面试鸭](https://www.mianshiya.com/) 等等。同时持续完善编程导航，带大家做了十几套完整的项目教程。
+
+**这期间的压力大家可能无法想象。**
+
+每月巨额的开销、团队的磨合、产品的迭代、市场的竞争、恶意的诋毁、网暴、举报、造谣、欺诈...... 这些电视剧里才会出现的剧情真实地发生在了我身上。
+
+还有身体的崩溃。长期熬夜、直播耗气、饮食不规律、精神压力大，导致我的肠胃经常疼痛，甚至专门住院做了检查。头发也掉得贼拉快，直接上图：
+
+
+
+我记录下当时的日记，用一个词形容就是 “麻了”。各种事情带来的精神压力真的太大了，就像达摩克里斯之剑一直悬在头顶。
+
+
+
+毫不夸张，那段时间我 emo 的天数可能比整个 “前半生” 都要多。
+
+但我没有放弃。
+
+刚创业时，我很害怕踩坑、害怕失败。但是经历了越来越多的失败后，我发现自己竟然有点儿 “上瘾了”！因为每次失败，都会有相应的成长：
+
+- 产品破产，让我有了更多对产品和商业的思考
+- 招人不慎，会让我更谨慎地调整招聘标准
+- 合同被违约，会帮我们提升法律意识
+
+现在的我，越来越享受踩坑的过程，心态也更稳定了。我经常安慰自己：哥就是来交学费的嘛，哪怕最后公司干黄了，也是一段独特的经历不是么？
+
+
+
+
+
+### 现在：好像又回到了原点
+
+如今，我自己的科技公司鱼鸢网络，团队已经 10 多人。
+
+
+
+经过两年半的沉淀，我们做出了编程导航、面试鸭、老鱼简历、面多多、AI 导航、剪切助手、代码小抄、算法导航、框框大学等 10 多个产品。其中 [面试鸭刷题神器](https://mianshiya.com) 现在已经有几十万用户，我们团队各个产品矩阵加起来月活稳定过百万。
+
+
+
+但有趣的是，**我感觉自己好像又回到了原点。**
+
+我每天还是在对着键盘敲敲敲：写文章做视频、写编程和 AI 教程、学习新知识、调研需求写文档。你完全想象不到这是一个团队管理者在做的事情，我经常有一种魂穿到两年半之前的感觉。
+
+
+
+为什么还要自己做这些？
+
+首先，我就是喜欢写点儿东西、做点儿东西，哪怕在别人眼里看起来是瞎折腾，我也乐在其中。
+
+其次，我不想让自己只是一个管理者，而是希望保持自己的技术水平、以及持续输出的能力。即使有一天公司真的倒闭了，我也有能力回到求职市场跟别人竞争。
+
+而且本来我也算是基于个人 IP 成立的公司，个人 IP 一定是我的立身之本。
+
+现在我们团队的工作模式是：**我负责对外输出，团队同学做好交付**。一方面作为自己公司项目组的一员，跟团队开发改进产品；与此同时，不断输出优质内容，给自家的产品带来流量。
+
+我依然在持续学习 AI 等前沿方向的新技术，打造了自己的 [AI 资源导航产品](https://ai.codefather.cn)。每天至少看 3 ~ 5 篇文章或视频来学习新知识，这是我坚持了很多年的习惯。
+
+对了，去年我还开了个剧本杀店，现在已经倒闭了，哈哈哈哈哈哈哈呜呜呜啊...... 这段足以写进科幻小说、拍成短剧的经历等后面再给大家分享吧。
+
+
+
+
+
+## 给想做自媒体 / 创业的朋友一些真心话
+
+既然聊到了自媒体和创业，分享几点血泪经验吧：
+
+1）关于冷启动：真实最重要
+
+万事开头难。我做自媒体时，第一批粉丝完全是靠着用心的内容，获得了一些大号的转载机会。
+
+从我自己和全网的观察来看，**越真实、越自然，越容易爆火**。别担心暴露真实的自己会被喷，做自媒体被喷是很正常的，从你做 UP 主开始，就应该做好心理准备。比如我就把自己当做一个沙雕，你骂我就是你对，谁会跟沙雕较劲呢？
+
+
+
+**总之，做好内容是一切的基础。真实的东西在 AI 时代会更可贵。**
+
+
+
+2）关于坚持：降低预期，持续行动
+
+我知道很多朋友会因为流量感到焦虑，觉得自己做的东西没人看、没人认可。
+
+但我想说：**坚持下去一定会成功。**
+
+我做自媒体这么多年，从来没有过真正爆火的视频，粉丝都是从 0 开始一期一期积累来的。我刚开始在抖音做视频，第一个视频播放量只有 18；做公众号时，阅读量也是个位数。
+
+但我连续 100 多天下班后直播到凌晨，就是这种坚持，让我突破了瓶颈。
+
+面对焦虑最好的办法就是：**降低预期并且坚持行动**。把自己当做一个新人，从 0 开始用心创作内容，同时不断改进。
+
+
+
+
+
+3）关于内容：有趣 > 干货
+
+摸清观众的心理很重要。编程深度知识或完整教程，真正要看这些内容的人会主动搜索。
+
+应该用轻松的方式，让大家在主线学习之余，零碎时间了解新知识。随时记录灵感，而不是硬着头皮写稿子；去除废话、加一些梗；剪辑时加一些搞笑的动图和音乐。
+
+我的内容质量把控标准是：
+- 好玩、有趣
+- 真实、共鸣
+- 要留下一些东西（知识点、一个作品）
+- 精简、突出主旨
+
+
+
+4）关于产品：快速验证，持续迭代
+
+不要把产品想得太复杂，**遵循最小可用性原则**，先快速验证、持续迭代。
+
+我创业后的第一个产品破产，很大的一个原因是前期发展过于理想，导致白送了大量的会员，被薅了羊毛，没有控制好成本。
+
+
+
+5）关于团队：学会放手
+
+刚创业时，我还保留着独立开发者的思维，自己写代码、什么都亲力亲为、很多事情自己扛，结果换来的就是低效、焦虑、迷茫的恶性循环。
+
+**学会下放工作、解放自己，这是创业者必须要跨越的坎。**
+
+我花了很长时间才学会：注重公司的内部沉淀，尤其是工作流和规范文档。两年半的时间，团队沉淀了 4790 个文档！也因此我才能有更多时间投入创作。
+
+
+
+6）关于心态：享受踩坑的过程
+
+现在我已经意识到创业成功必须有的特质：源源不断的创造力、平稳的心态和强大的抗压能力。
+
+无论大家怎么看待我，我在做自己认为正确的、有意义的、让我快乐的事情，这就足够了。
+
+
+
+
+
+7）身体健康最重要
+
+记得之前有人问我：怎么睡个好觉？一位融资千万的大佬笑着跟我说：“换个好枕头”。当时我不理解，现在我已经感同身受了。
+
+但说真的，**身体是革命的本钱**。一定要吃早饭、规律饮食、少熬夜。我就是活生生的反面教材，肠胃出了问题，头发掉得飞快。
+
+
+
+## 写在最后
+
+感谢你看到这里，这就是我的故事。9 年时间，从自学编程到腾讯程序员，从 0 到全网 200 万粉博主，再到离职创业、产品月活过百万。
+
+我是鱼皮，一个还在持续折腾的程序员，一个把 90% 时间都花在学习和工作上的 “卷王”，一个乐于分享、热爱创造的普通人。
+
+虽然头毛已经不剩几根，但我依然充满热情。
+
+我的格言是：相信自己有能力，那么你就真的会有。 很多时候，限制我们的不是能力，而是不敢去尝试。现在的我，不再害怕失败，因为每一次失败，都是在为成功铺路。
+
+接下来，我会继续在这里持续分享有趣的编程知识、实用的 AI 玩法、自媒体涨粉经验、创业血泪史。
+
+**未来还很长，现在关注的你就是老粉哦~**
+
+
+
+
+
+## 推荐资源
+
+1）鱼皮 AI 导航网站：[AI 资源大全、最新 AI 资讯、免费 AI 教程](https://ai.codefather.cn)
+
+2）编程导航学习圈：[学习路线、编程教程、实战项目、求职宝典、交流答疑](https://www.codefather.cn)
+
+3）程序员面试八股文：[实习/校招/社招高频考点、企业真题解析](https://www.mianshiya.com)
+
+4）程序员写简历神器：[专业模板、丰富例句、直通面试](https://www.laoyujianli.com)
+
+5）1 对 1 模拟面试：[实习/校招/社招面试拿 Offer 必备](https://ai.mianshiya.com)
diff --git a/Vibe Coding 零基础教程/50 产品变现/我的自媒体起号经验.md b/Vibe Coding 零基础教程/50 产品变现/我的自媒体起号经验.md
new file mode 100644
index 0000000..8002b0b
--- /dev/null
+++ b/Vibe Coding 零基础教程/50 产品变现/我的自媒体起号经验.md
@@ -0,0 +1,241 @@
+# 我的自媒体起号经验
+
+> 从 0 到 10 万粉的真实经历
+
+
+
+大家好，我是鱼皮。刚来 X 平台，关注数就突破了几千，说实话有点受宠若惊，感谢大家助力每一个梦想 🌹。
+
+很多朋友问我是怎么做到的？
+
+除了我之前有一些国内平台影响力外，更重要的还是方法，但这个方法并不难，人人都可以做到。而且我当初在各个平台起号时，基本都是这么做的。
+
+看着突突涨的关注数，我想起了自己最初从 0 到 10 万粉的那段时光。今天想跟大家聊聊这部分故事，以及分享一些实实在在的起号经验。
+
+无论你是想通过自媒体推广自己的产品，还是想建立个人品牌，这些经验都能帮到你。
+
+
+
+## 从 18 播放量开始
+
+2020 年特殊期间，我在家里远程 TX 实习。有一天打开抖音，随便翻了几个视频后，我发现好像在抖音，并没有多少做技术分享的程序员。或许是因为抖音偏娱乐向？又或许是因为短视频的限制，很难通过只言片语讲清一个技术？
+
+我是一个喜欢尝试新事物的人，正好录制短视频的成本也并不会很高，于是我就在工作之余开始了自己的短视频制作生涯。
+
+由于我在大学期间独立开发过一个面试刷题产品 —— 面试君主（没错，这是我现在几十万用户产品 - 面试鸭的原型），因此第一个抖音短视频账号就叫 “面试君主”，视频内容专注于程序员高频面试题解析，正好帮助我自己春招获得更多机会。
+
+真正做短视频后，我才发现事情并没有自己想象的那么简单。
+
+首先是制作成本，做短视频并不只是简简单单用手机拍摄一下、录个屏就完事了，除了选题和最基本的内容外，很多的素材都需要精雕细琢，比如封面、标题、标签、第一眼、开头等。我会先写稿子、打磨和验证内容，然后再录像，结果第一期视频就做了三四个小时。
+
+功夫不负有心人啊！猜猜最后的播放量是多少？
+
+**我记得很清楚，一天下来，播放量是整整 18！**
+
+我想过新人播放量会比较低，但没想到 TNND 这么低！
+
+说不难受是不可能的，但毕竟是第一个视频；而且我当时的目的很纯粹，就是通过分享，**在帮助大家的同时巩固自己的知识**。
+
+因此，我没有放弃，又一连坚持了大概一个月，每天至少更新一个视频，周末还会更新 3 个视频！
+
+虽然每个视频的播放量也只有几十，但是一个多月的坚持，也让我收获了**人生中第一批粉丝**，大概有 100 多个，其中几十个还是我的朋友。最高播放量的一个视频达到了 1800。
+
+所以我很喜欢 18 这个数字，它对我很有意义。
+
+
+
+## 第一次爆款，被喷惨了
+
+后来有一天，我静下心来思考，这样的坚持是否还具有意义？
+
+于是我去看了很多其他同学的视频，发现往往 **真实的故事最能打动人**。
+
+于是，我又注册了一个新的抖音号，也是现在的号【程序员鱼皮】，并且第一次通过短视频平台将我的编程学习和求职经历分享给大家。
+
+结果，这次的播放量和点赞量出乎我的意料，第二天醒来，消息已经 99+，当时的心情还是非常激动的。
+
+但是，当我打开评论区，心情立刻就跌入低谷。评论区充斥着各种各样的 **怀疑、鄙视、甚至是谩骂**，很多人说 “又一个营销号诞生了”，还有什么 “抖音各个都是人才，把外行人忽悠的团团转”。
+
+好吧，我算是知道这个视频为什么能火了，虽然都是差评，但这 **互动率** 是真的高。
+
+记得当时有一个骂我的评论点赞数还巨高，都快接近我当时的视频点赞数了。现在想想，真的要感谢当时骂我的朋友们，当然也包括现在的。
+
+这条视频过后，我开始思考，如果要分享编程技术，也可以换一种更有趣、更迎合大众、更容易被接受的方式。创作当然可以只顾着自己爽，但是如果能让观众也爽了，岂不是一举两得？
+
+于是，我开始分享一些优质的、易用的编程资源，以及一些自己积累的编程小知识。并在这个期间不断地学习短视频创作技巧，学会看数据，学会优化各项指标，多看他人的视频来学习好的创意和经验。
+
+还记得大学上计算机课时老师讲的一句话：1.01^365 次方等于多少？每天改变一点点，也会有巨大的变化，可怕的是盲目坚持，而不做任何改变。
+
+
+
+## 第一次直播，阿巴阿巴
+
+接下来，我尝试了人生中第一次直播，画面是一台电脑，记得当时大概有十几位观众，**我不知道该讲啥，也不知道这十几位观众在看啥**，我就一直在重复 “大家好，这是我第一次直播”，结果还真的有人一直看。
+
+后来，我坚持每晚直播一小会儿，通过在直播间和大家交流编程，我感受到了多样人生，和粉丝朋友们保持了良性互动，也帮助我收获了更多的粉丝。
+
+而且你敢想象么，我是个 i 人（ISTJ），看过我吐槽公司视频的朋友应该能感受到。
+
+通过不懈的努力，我的抖音渐渐有了起色，粉丝数和播放量都稳定增长。虽然说抖音是一个偏娱乐和生活的平台，但是我在这里也拥有了一片属于自己的小天地，认识到了很多的朋友。
+
+坚持也让我看到了另一个变化，就是评论区底下对我的怀疑和谩骂变得越来越少。当然即使是现在，依然会有很多人骂我，但这不是很正常的事情么？我又不是 money 人见人爱~ 看到自己一直在坚持的事情帮助到了更多同学、得到了肯定，这就足够了。
+
+
+
+## 多平台扩展
+
+有了抖音的基础后，我开始尝试其他平台，比如公众号和 B 站，都叫程序员鱼皮。
+
+做 B 站的时候，我正式发布的第一个涨粉视频想必大家也能猜到了。没错，就是我自己从学编程到入职大厂的个人经历。具体涨了多少粉我忘了，但印象中这一个视频基本上就把号带起来了。让我记得最清楚的是，有小伙伴发现我是个歪嘴战神，哈哈哈。
+
+但公众号的涨粉没有那么容易，刚开始我傻傻地以为想要涨粉，就要多写文章，于是给自己定下了每天 1 篇的目标。结果质量不高、阅读不高、粉丝也没涨几个。
+
+很快，我意识到这样下去得完犊子，必须要改变方法！
+
+于是我开始疯狂混圈子，向成功的前辈交流、学习、模仿；找大号投稿，争取转载机会；开拓渠道，把同一篇文章、同一个视频发布到多个平台；利用抖音给公众号引流等等。关于我做公众号从 0 到 10 万粉的经历，后面会给大家更详细地分享。
+
+就这样，总共大概过了 1 年左右，抖音粉丝 7.8 万、公众号 1.8 万、再加上 B 站，差不多累积 **10 万粉丝** 了，第一个小目标达成。
+
+
+
+---
+
+
+
+所以看到这里，你应该已经知道我开头说的起号方法是什么了吧？
+
+没错，就是 **分享真实的经历**。
+
+从短视频 18 播放量 -> 弃号重开 -> 第一次小火 -> 坚持直播 -> 扩展图文和长视频，我一直在做的，是把自己真实的经历、真实的想法、真实的感受分享给大家。
+
+这次来到 X 平台，我看到刚做 X 的朋友 @程序员小灰 哥通过分享真实经历快速涨了很多关注，这更坚定了我对这种方式的信心。
+
+我觉得这是每个人都能做到的事，不需要华丽的辞藻、不需要规整的文章结构，只需要把自己的故事真诚分享出来就好。
+
+**你的经历绝对是独特的，至于剩下的，就交给算法吧。**
+
+下面我想结合这段经历，跟大家分享一些实实在在的自媒体起号建议。
+
+
+
+## 一些自媒体起号建议
+
+1）真实最重要
+
+纵观自己和全网的观察，我发现 **越真实、越自然，越容易爆火**。
+
+做好内容，是一切的基础。真实的东西在 AI 时代会更可贵。不要刻意模仿别人，你的经历就是最独特的素材。
+
+
+
+2）降低预期，坚持行动
+
+我知道很多朋友会因为流量感到焦虑，觉得自己做的东西没人看、没人认可。
+
+但我想说：**坚持下去一定会成功。**
+
+我刚开始做公众号时，阅读量也是个位数。但之后我连续 100 多天下班后直播到凌晨，就是这种坚持，让我突破了瓶颈。
+
+面对焦虑最好的办法就是：降低预期并且坚持行动，我真的很喜欢 Speak Less Do More 这句话。
+
+
+
+3）有趣很重要
+
+对于高级编程技术或完整教程，真正要看这些内容的人会主动搜索，不需要你来把文字稿整成视频。尤其是 AI 时代来了，有些追求效率的朋友甚至不会去看长视频，而是直接用 AI 工具总结了。
+
+建议把内容做得轻松有趣，让大家在零碎时间了解新知识。像我就尽量让每期视频都能给大家带来一些知识，哪怕是 “我的服务器被攻击了” 这种难绷的经历，相信也能让大家少踩踩坑。
+
+
+
+4）AI 只是工具，核心是你的创意
+
+现在通过 AI + 各种工作流可以快速批量创作内容，虽然有机会起量，但一定有对应的瓶颈，因为越简单的东西，复刻成本越低。
+
+关键还是要有自己的创意和特色，只不过如今实现创意的成本变得简单了。
+
+
+
+5）立刻行动
+
+很多人问我：“我也想做自媒体，但不知道怎么开始。”
+
+我的回答是：**不要光想、多去尝试！**
+
+我自己就很讨厌那种理论派，一套一套的，看了就忘。反而是自己练号的过程中，会自然地慢慢学到很多知识，而且印象更深刻。举个例子，被限流一次你就知道下次文案中要注意哪些违禁词了。
+
+还有怎么写标题、怎么做封面、怎么选题、怎么看数据、怎么优化内容，这些都是在实践中学会的。
+
+练废了大不了重来嘛！
+
+像我第一个账号 “面试君主” 就是练废的，但那段经历让我学到了太多东西，也是之后新号起量的关键。
+
+
+
+6）找准定位，做自己擅长的
+
+不要去跟某一领域更专业的团队竞争。比如我刚开始不会去出几十个小时的完整课程，因为培训机构更专业。
+
+像我前期的定位很清楚：分享真实经历 + 有趣的技术知识 + 优质资源推荐。
+
+找到自己的定位，做自己擅长的事，这很重要。
+
+说到这里其实有个让我很气的事，我 21 年 ~ 22 年期间自己做了很多有趣的项目，结果到后面发现观众根本不在意项目是不是你开发的，有用 / 有趣就够了，很多时候推荐自己费力开发的项目还不如推荐别人的播放量要高。
+
+
+
+7）时间管理
+
+还记得之前有个骂我的小伙子，说我背后肯定有团队，1 个人怎么可能做那么多事？
+
+但当时真的没有，我只是用了一些时间管理技巧罢了。
+
+首先我最理想的状态是把工作中的发现、学到的技术进行分享，而不是从 0 开始分享自己完全不知道的东西。
+
+有人问我的时间哪来的？
+
+其实为了做自媒体，我放弃了午休、放弃了游戏、放弃了很多出去玩耍的机会，也熬了不少夜。我估计 90% 的同学没时间的原因都是在玩游戏和回消息（水群）吧，如果不玩游戏，时间肯定还是足够的。
+
+而且一旦你像我一样把自媒体当做兴趣和爱好，而不是任务，涨粉会变得容易很多。
+
+
+
+8）接受焦虑，享受过程
+
+Q：做号过程中会缺乏动力么？
+
+A：肯定会的，这时要给自己找点刺激。心态要随缘，刻意会不持久。
+
+Q：你会有数据会焦虑么？
+
+A：肯定会的，我会经常和别人对比，也曾一度怀疑自己被限流（虽然直到现在我依然怀疑哈哈）。但更多时候，我关注的还是内容本身，学习别人作品中优秀的地方，缩小差距。
+
+
+
+---
+
+
+
+最后，如果你也想做自媒体，我的建议是：
+
+**别想那么多，先发第一条内容，告诉别人你是谁。**
+
+哪怕只有 18 播放，那也是一个开始，至少你种了一颗种子，不是么？
+
+这次来到 X，如此快速的关注对我来说不一定是好事，因为在这里我还是新手，还请各位大佬们多多担待。
+
+如果你支持我，那么我会很开心，谢谢你；如果你 DISS 我，把我当成一条臭狗，那我也希望能通过之后的分享打破质疑。我会尽力在这里多分享自己特有的内容，希望能给大家一些启发，让我们一起成长！🚀
+
+
+
+## 推荐资源
+
+1）鱼皮 AI 导航网站：[AI 资源大全、最新 AI 资讯、免费 AI 教程](https://ai.codefather.cn)
+
+2）编程导航学习圈：[学习路线、编程教程、实战项目、求职宝典、交流答疑](https://www.codefather.cn)
+
+3）程序员面试八股文：[实习/校招/社招高频考点、企业真题解析](https://www.mianshiya.com)
+
+4）程序员写简历神器：[专业模板、丰富例句、直通面试](https://www.laoyujianli.com)
+
+5）1 对 1 模拟面试：[实习/校招/社招面试拿 Offer 必备](https://ai.mianshiya.com)
diff --git a/Vibe Coding 零基础教程/50 产品变现/系统监控告警实践.md b/Vibe Coding 零基础教程/50 产品变现/系统监控告警实践.md
new file mode 100644
index 0000000..d76ae71
--- /dev/null
+++ b/Vibe Coding 零基础教程/50 产品变现/系统监控告警实践.md
@@ -0,0 +1,134 @@
+# 系统监控告警实践
+
+> 及时发现问题，保障系统稳定
+
+
+
+大家好，我是程序员鱼皮，今天分享一些很实用的系统监控告警工具。
+
+无论你是用 Vibe Coding 做个人项目，还是想做一款真正的产品，掌握系统监控告警的方法都能帮你及时发现和处理问题，保障系统稳定运行。
+
+
+
+## 为什么要用监控告警？
+
+说到监控告警，没有企业开发经验的同学非常容易忽视它，甚至会有同学觉得没有必要，大不了出了 Bug 再修就是了。
+
+
+
+**这种想法大错特错！**
+
+我们把系统想象成人的身体。有的时候，一个人表面看起来可能很健康，但可能只是没有机会发现自己体内的异常，结果等到真的出事了，往往要承担的后果更严重。所以才需要定期体检，及时发现和处理问题。系统监控告警的作用也是类似的，能够及时发现系统中潜在的异常和问题、线上出了问题也能第一时间发现，尽早处理，从而预防或减轻故障。
+
+此外，监控系统还有一些其他的好处，我们接着往下看。
+
+
+
+## 怎么实现监控告警呢？
+
+最直接能想到的办法就是自己写代码实现，比如给要重点关注的功能加点儿逻辑，出现某个异常的时候发送一条短信 / 邮件 / 企微消息即可。我们最开始就是这么做的：
+
+
+
+但其实业务告警只是监控告警的其中一个层面，就像是人体的表面皮肤检查。如果我们想更全面地、更准确地监控系统的健康，还要里里外外做个全方位的体检，包括服务器监控、网络监控、应用监控、数据库监控、API 接口监控等等。
+
+是的，听上去就很复杂，所以监控在现代运维中有了一个更专业的别名，叫 “可观测性”。可观测性是指系统能够通过监控和分析其内部状态来了解和诊断其健康状况和性能的能力。这个概念不仅包含了传统的监控，还扩展到了数据的收集、分析和响应。举个例子，我们通过监控发现系统的内存利用率不高，就可以适当降配节约成本；发现系统的内存利用率过高，就可以考虑是否要升配扩容。
+
+想要自己优化系统的可观测性还是很复杂的，数据收集、数据存储、数据分析、告警机制、可用性保障、性能等等都要考虑，大厂都是有规模的基础设施团队来做。
+
+对于我们个人开发者或者小公司来说，既然是全方位的 “体检”，我们一般不会自己来做，而是会选择更专业的工具或服务，直接使用和接入就好。下面就推荐几个我们团队在用的。
+
+
+
+## 监控工具推荐
+
+### 1、服务器监控
+
+1）服务器自带的监控能力
+
+只要你使用的是大厂的云服务器，基本都自带了服务器监控，还可以设置告警。比如下图腾讯云轻量应用服务器的监控，能看到 CPU、内存、网络带宽、硬盘等资源的使用情况：
+
+
+
+
+
+2）容器平台的监控能力
+
+如果你使用的是容器的方式来部署项目，基本上容器平台也自带了监控告警能力。比如微信云托管的服务监控，除了看到系统资源的占用情况外，还能看到接口调用量、请求错误量、接口 QPS 和响应时间，相当于自带了一部分 API 接口监控能力。
+
+
+
+而且云托管平台支持在微信群内接收告警信息，非常方便。一旦节点被攻击了，立刻就能通知到你。
+
+
+
+
+
+### 2、数据库监控
+
+以前，没有数据库监控，我们很难关注到数据库的运行状态，不知道它工作辛不辛苦、有没有摸鱼或者超负荷加班。但现在，如果你使用的是第三方云服务商的云数据库，可以直接在平台上查看数据库的资源利用情况。比如我们用的腾讯云数据库自带的监控：
+
+
+
+以前只能通过用户反馈或者服务器的故障来发现危害系统的慢 SQL，现在使用云数据库自带的智能管家，就能第一时间帮你发现慢 SQL，防患于未然。
+
+
+
+还能一键帮你的数据库做个体检，不是 100 分的话都要及时修改：
+
+
+
+
+
+### 3、应用监控
+
+应用监控的范围比较广，我们使用的是阿里云的应用实时监控服务 ARMS，主要的原因是对比下来阿里在 Java 应用服务这一块的专业性确实更高。
+
+包括应用服务器（比如 Java 的 Tomcat）的状态、API 接口调用情况、系统内部依赖服务的调用情况、定时任务的调用情况、线程池的状态、虚拟机的内存、GC 的情况等等。
+
+
+
+
+
+还能查看应用拓扑结构、分析调用链路等等：
+
+
+
+除了监控能力外，它的告警能力是真的强！我们把服务接入到了企微，只要有个环节出了问题，立刻就会给我们发送告警。还可以快速查看告警详情、认领告警、屏蔽告警等等。
+
+
+
+实不相瞒，我们刚接入这玩意的那几天，还是挺痛苦的，因为暴露了很多之前没发现的系统问题，大半夜的企微也一直滴滴滴滴滴滴搁那响！我们团队的开发同学苦不堪言。
+
+
+
+不过现在已经习惯了。。。额，准确地说是系统经过优化后，已经变得更健康了~
+
+不管怎么样，接入监控告警还是很有必要的，感觉像是开了通透世界，对系统的状态了若指掌了！
+
+但是监控服务的使用超过一定次数，是需要费用的，大概每月几十 G 的免费额度吧，企业项目的话其实很快就用完了。用于学习或者个人网站可以试试。
+
+
+
+### 4、前端监控
+
+除了上面的监控外，有时我们还想了解用户的行为、用户属性和业务指标，比如每天有多少用户访问网站、是用的 PC 还是手机、手机是什么牌子的、有多少新用户注册等等。那么可能还需要前端监控（当然也可以后端埋点统计），之前分享过的，用百度统计，一行代码就能接入到前端网站中，很方便~
+
+
+
+
+
+
+
+
+## 推荐资源
+
+1）鱼皮 AI 导航网站：[AI 资源大全、最新 AI 资讯、免费 AI 教程](https://ai.codefather.cn)
+
+2）编程导航学习圈：[学习路线、编程教程、实战项目、求职宝典、交流答疑](https://www.codefather.cn)
+
+3）程序员面试八股文：[实习/校招/社招高频考点、企业真题解析](https://www.mianshiya.com)
+
+4）程序员写简历神器：[专业模板、丰富例句、直通面试](https://www.laoyujianli.com)
+
+5）1 对 1 模拟面试：[实习/校招/社招面试拿 Offer 必备](https://ai.mianshiya.com)
diff --git a/Vibe Coding 零基础教程/50 产品变现/网站数据保护实践.md b/Vibe Coding 零基础教程/50 产品变现/网站数据保护实践.md
new file mode 100644
index 0000000..1de4c19
--- /dev/null
+++ b/Vibe Coding 零基础教程/50 产品变现/网站数据保护实践.md
@@ -0,0 +1,121 @@
+# 网站数据保护实践
+
+> 保护你的数据，防止被恶意爬取
+
+
+
+大家好，我是程序员鱼皮。前两天模拟面试一位社招两年的老哥，由于他的表现不错，我就临时起意，跟他交流一下我们最近遇到的业务场景问题。问题如下：
+
+最近我们不是做了个 [程序员刷题网站 - 面试鸭](https://mianshiya.com/) 嘛，有很多坏人盯上了我们网站，想把我们 10,000 多道面试题、300 多个面试题库的数据都用爬虫抓下来。那我们应该如何防止这种爬虫行为？比如怎么识别出这些非法爬取数据的用户并且自动封号？
+
+整个问题的交流过程大家可以看视频学习：https://www.bilibili.com/video/BV1b142187Tb
+
+下面我就直接把防止爬虫的方法汇总分享给大家，总共有整整 10 种方法！最后一个方法很独特~
+
+
+
+## 如何防止网站被爬虫？
+
+#### 1、使用协议条款
+robots.txt 是一个放置在网站根目录下的文件，用于告诉搜索引擎的爬虫哪些部分不希望被抓取。
+
+举个例子，可以在 robots.txt 文件中添加如下规则来禁止特定目录或文件被抓取：
+
+```
+User-agent: *
+Disallow: /private/
+Disallow: /important/
+```
+
+虽然大多数合规的爬虫会遵守这些规则，但恶意爬虫可能会忽视它，所以，仅凭 robots.txt 不能完全阻止所有爬虫。但它是防护的第一步，起到一个声明和威慑的作用。
+
+可以在网站的服务条款或使用协议中明确禁止爬虫抓取数据，并将违反这些条款的行为视为违法，如果网站内容被恶意爬虫抓取并造成了损害，robots.txt 可以作为违反这些条款的证据之一。
+
+
+
+#### 2、限制数据获取条件
+比起直接暴露所有数据，可以要求用户登录或提供 API 密钥才能访问特定数据。还可以为关键内容设置身份验证机制，比如使用 OAuth 2.0 或 JWT（JSON Web Tokens），确保只有授权用户能够访问敏感数据，有效阻止未经授权的爬虫获取数据。
+
+
+
+#### 3、统计访问频率和封禁
+
+可以利用缓存工具如 Redis 分布式缓存或 Caffeine 本地缓存来记录每个 IP 或客户端的请求次数，并设置阈值限制单个 IP 地址的访问频率。当检测到异常流量时，系统可以自动封禁该 IP 地址，或者采取其他的策略。
+
+需要注意的是，虽然 Map 也能够统计请求频率，但是由于请求是不断累加的，占用的内存也会持续增长，所以不建议使用 Map 这种无法自动释放资源的数据结构。如果一定要使用内存进行请求频率统计，可以使用 Caffeine 这种具有数据淘汰机制的缓存技术。
+
+
+
+#### 4、多级处理策略
+
+为了防止 “误伤”，比起直接对非法爬虫的客户端进行封号，可以设定一个更灵活的多级处理策略来应对爬虫。比如，当检测到异常流量时，先发出警告；如果爬虫行为继续存在，则采取更严厉的措施，如暂时封禁 IP 地址；如果解封后继续爬虫，再进行永久封禁等处罚。
+
+具体的处理策略可以根据实际情况来定制，也不建议搞的太复杂，别因此加重了系统的负担。
+
+
+
+#### 5、自动告警 + 人工介入
+可以实现自动告警能力，比如在检测到异常流量或爬虫行为时，系统能自动发出企业微信消息通知。然后网站的管理员就可以及时介入，对爬虫的请求进行进一步分析和处理。
+
+这点之前也给大家分享过，不止是针对爬虫，企业的线上系统最好接入全方面的告警，比如接口错误、CPU / 内存占用率过高之类的。
+
+
+
+
+
+#### 6、爬虫行为分析
+
+非法爬虫和正常用户的行为一般是有区别的，爬虫往往遵循特定的访问模式。比如正常用户每道题目都要看一会儿、看的时间也不一样，而爬虫一般是按照固定的顺序、固定的频率来获取题目，很明显就能识别出来。
+
+比如下面这种情况，有可能就是爬虫：
+
+
+
+
+
+#### 7、请求头检测
+每个发送到服务器的请求都有请求头信息，可以通过检查请求头中的 User-Agent 和 Referer 等标识符，对爬虫请求进行拦截。
+
+当然，这招只能防防菜鸟，因为请求头是可以很轻松地伪造的，只要通过浏览器自带的网络控制台获取到响应正常的请求头信息，就可以绕过检测了。
+
+
+
+
+
+#### 8、自主公开数据
+
+记得大学上信息安全课的时候，学到一个知识点：防止网络攻击的一种方法是，让攻击者的成本大于实际的收益。比如密码 10 分钟有效，破解密码要花 15 分钟，就不会有人去破解。
+
+用到爬虫场景上，我们的做法是，不做任何限制，直接让所有人不登录也能查看到我们网站的题目数据！而且还提供了题目的各种筛选功能、收藏功能。大多数同学只是为了自己学习，这样一来，就没有必要花时间去爬数据了~
+
+
+
+
+
+#### 9、溯源技术
+虽然题目都是公开的，但有些我们专门请大厂大佬们来写的优质题解是仅会员可见的。如果有用户使用爬虫抓取了这部分数据，可就要小心了！一般来说，只要你在一个网站登录了，就一定会有访问记录，如果你泄露了网站登录后才可见的内容、尤其是付费内容，网站管理员一定有办法追溯到你是谁。
+
+比较常用的溯源技术就是水印、盲水印等。对于我们的面试鸭，本身就是通过微信登录的，而且如果你是会员，肯定还有支付记录。这些技术不仅帮助标记数据源，还可以在数据被滥用时追踪其来源，从而增强数据的保护。
+
+
+
+#### 10、科普法律
+
+除了上面这些方法外，还可以通过接入反爬服务、接入验证码、增加动态时间戳等方式进一步限制爬虫。但是要记住，爬虫是没有办法完美防御的！因为你无法限制真实的用户，攻击者完全可以模拟真实用户的访问方式来获取你的网站数据，比如找 10 个用户，每人获取几百题。
+
+所以我的最后一个方法是 —— 科普法律。可以在网站上发布明确的法律声明，告知用户未经授权的抓取行为是违法的，可以对爬虫行为起到一定的威慑作用。并且还通过发布视频和文章的方式，让广大程序员朋友们提高法律意识。爬虫是有一定风险的，自己学习倒没问题，但是千万别给人家的网站造成压力了，搞不好就有破坏计算机系统的嫌疑了！
+
+
+
+
+## 推荐资源
+
+1）鱼皮 AI 导航网站：[AI 资源大全、最新 AI 资讯、免费 AI 教程](https://ai.codefather.cn)
+
+2）编程导航学习圈：[学习路线、编程教程、实战项目、求职宝典、交流答疑](https://www.codefather.cn)
+
+3）程序员面试八股文：[实习/校招/社招高频考点、企业真题解析](https://www.mianshiya.com)
+
+4）程序员写简历神器：[专业模板、丰富例句、直通面试](https://www.laoyujianli.com)
+
+5）1 对 1 模拟面试：[实习/校招/社招面试拿 Offer 必备](https://ai.mianshiya.com)
diff --git a/Vibe Coding 零基础教程/50 产品变现/网站数据分析实战.md b/Vibe Coding 零基础教程/50 产品变现/网站数据分析实战.md
new file mode 100644
index 0000000..7e4f931
--- /dev/null
+++ b/Vibe Coding 零基础教程/50 产品变现/网站数据分析实战.md
@@ -0,0 +1,176 @@
+# 网站数据分析实战
+
+> 用数据驱动产品优化
+
+
+
+有同学问我：鱼皮 gie gie，你们团队这么多网站产品，都是怎么做数据分析的啊？
+
+
+
+其实有很多现成的免费资源，可以让你不费吹灰之力搞定各种数据分析场景。
+
+- 网站流量统计
+- 前端错误监控
+- 用户行为分析
+- 自定义业务分析
+- 后端应用监控分析
+- 后端资源监控分析
+- 后端自定义指标分析
+
+无论你是用 Vibe Coding 做个人项目，还是想做一款真正的产品，掌握网站数据分析的方法都能帮你了解用户行为，优化产品功能。干货较多，建议收藏~
+
+⭐️ 推荐观看视频版：https://bilibili.com/video/BV1CkUDBiEMR
+
+
+
+## 网站分析保姆级教程
+
+先说说最基础的 **网站流量分析**。你肯定想知道每天有多少人访问你的网站、他们从哪来、在哪个页面待得最久对吧？
+
+可以使用百度统计、51.LA 网站统计或 Google Analytics，只需要给你的网站文件添加一段代码就能轻松接入。
+
+
+
+
+
+然后就能看到访客数量和趋势、分析访客的来源、分析页面的访问情况等等：
+
+
+
+
+
+可以帮你了解用户的偏好、获取页面优化的思路。
+
+
+
+
+
+如果你做的是小程序，那就更简单了，比如微信小程序直接用官方自带的数据分析就行。
+
+
+
+
+
+如果你想分析别人的网站流量，怎么办呢？
+
+可以用 Similarweb 或者 AI TDK 这类工具，输入网址就能看到对方的流量估算、访问来源和热门关键词，做竞品分析和 SEO 搜索引擎优化的时候特别好用。
+
+
+
+
+
+光知道用户的正常使用情况还不够，万一你的网站按钮点不动了，用户那边疯狂报错，你这儿却一无所知，那就尴尬了，说不定会影响收入！所以 **前端错误监控** 必不可少。
+
+Sentry 是业界主流的开源前端监控，它能帮你捕获和统计各种代码报错。
+
+
+
+
+
+还能记录用户的系统环境和具体报错信息，便于你排查和修复 Bug。
+
+
+
+
+
+不过免费版存在限制，或者得自己搭建服务器部署开源代码。所以我们团队用的是国内的灵雀应用监控，也是一段代码就能接入，能够实时捕获前端的各种异常报错，查看具体的错误信息等等。
+
+
+
+
+
+有时候光知道哪里出错了还不够，你还想知道用户到底是怎么操作的？为什么会触发这个错误？或者为什么用户不愿意付费？这时候就得上 **用户行为分析** 工具了。
+
+我直接掏出微软 100% 免费的 Clarity，能录制用户的真实操作回放。
+
+
+
+
+
+像我们团队的 [模拟面试产品 - 面多多](https://ai.mianshiya.com/) 就在用它，用户点击了哪里、滚动到哪里、在哪个按钮上犹豫不决，全都一清二楚。
+
+
+
+
+
+还能通过热度地图快速分析用户的喜好，从而帮助优化产品功能按钮的布局，降低产品的使用难度，发现很多凭空根本想不到的问题。
+
+
+
+
+
+前面说的这些工具提供的都是通用指标，但每个产品的业务逻辑不一样，有些你特别关心的数据，比如付费转化率、功能使用频次等，光靠现成工具可能拿不到，这时候就得上 **自定义业务分析** 了。
+
+刚开始我有点想当然，直接就为一些大家耳熟能详的商业 BI 产品付费了，但后来发现对于小团队来说，其实没必要花那个钱，直接搭建开源的 DataEase 或 Superset 就挺香的，可以对接 MySQL 数据库等各种自己业务的数据源，然后根据需求来配置、拖拖拽拽就能做出各种可视化图表和看板。
+
+
+
+
+
+实在碰到特别个性化的需求，还可以自己搭建看板。现在有了 AI 加持，配合 ECharts 图表库，写几句提示词就能生成可视化看板，真的轻松多了。
+
+
+
+
+
+说完前端，咱后端的数据分析也不能落下啊。
+
+用户访问你的网站，背后都是一个个接口在提供数据，怎么知道接口是否正常？有没有优化空间呢？这时就需要后端的 **应用监控分析** 了。
+
+像我们团队在用 ARMS 应用实时监控服务，能帮你全面监控应用的性能，快速发现出错或者速度较慢的接口。
+
+
+
+
+
+还能进一步查看错误详情，甚至是分析接口的完整调用链，能快速定位问题。
+
+
+
+
+
+除了应用层面，服务器、数据库、缓存这些 **资源的监控分析** 也很重要，如果它们都跑在云上，那就直接用云服务商自带的监控看板就行，各种指标一目了然。
+
+
+
+
+
+要是你想统一监控分析更个性化的指标，那就得请出 Prometheus + Grafana 这对王炸组合了。Prometheus 负责采集各种自定义指标数据，为开发者带来监控的火种。
+
+
+
+
+
+Grafana 则负责把这些数据变成炫酷的可视化大屏。看着一堆实时变化的图表，我仿佛掌控着整个系统的脉搏，恍惚间有种成为科幻电影里男猪脚的感觉~
+
+
+
+---
+
+
+
+OK 就分享到这里，其实还有很多不错的开源项目，比如 SkyWalking、Zipkin 来管理应用性能，ELK 来集中分析日志等等。
+
+
+
+
+
+有了这些工具，网站数据分析其实没有那么复杂，关键是要根据需求选择合适的方案，把时间省下来做产品才是正道。
+
+如果本文对你有帮助，点个赞吧，感激不尽！
+
+
+
+
+## 推荐资源
+
+1）鱼皮 AI 导航网站：[AI 资源大全、最新 AI 资讯、免费 AI 教程](https://ai.codefather.cn)
+
+2）编程导航学习圈：[学习路线、编程教程、实战项目、求职宝典、交流答疑](https://www.codefather.cn)
+
+3）程序员面试八股文：[实习/校招/社招高频考点、企业真题解析](https://www.mianshiya.com)
+
+4）程序员写简历神器：[专业模板、丰富例句、直通面试](https://www.laoyujianli.com)
+
+5）1 对 1 模拟面试：[实习/校招/社招面试拿 Offer 必备](https://ai.mianshiya.com)
diff --git a/Vibe Coding 零基础教程/60 Vibe Coding 资源大全.md b/Vibe Coding 零基础教程/60 Vibe Coding 资源大全.md
new file mode 100644
index 0000000..f4c4c61
--- /dev/null
+++ b/Vibe Coding 零基础教程/60 Vibe Coding 资源大全.md
@@ -0,0 +1,154 @@
+# Vibe Coding 资源大全
+
+你好，我是程序员鱼皮，前腾讯全栈开发，全网 200 万粉的 [AI 编程博主](https://space.bilibili.com/12890453)，也是 [AI 导航](https://ai.codefather.cn) 和 [编程导航](https://www.codefather.cn) 等 10+ 自研产品的创造者。
+
+学习 Vibe Coding 的过程中，你可能会遇到这些情况：
+
+- 想尝试新的 AI 工具，但不知道哪个更适合自己
+- 遇到问题想查资料，但不知道去哪里找靠谱的内容
+- 想了解 AI 编程的最新动态，但信息太碎片化
+
+这就是为什么我专门开发了[《鱼皮 AI 导航》网站](https://ai.codefather.cn/) （ [ai.codefather.cn](https://ai.codefather.cn/) ）。
+
+无论是想找好用的 AI 工具、获取最新 AI 资讯、发现 AI 提示词模板，还是交流 AI 使用心得、学习 AI 知识，你想要的关于 AI 的一切都可以在这里找到！
+
+
+
+
+
+
+## 鱼皮 AI 导航有什么？
+
+
+AI 时代的机会比想象中多得多。像我们团队日常工作中的很多方面都有了 AI 的辅助，生活中也越来越习惯有事没事问问 AI 的建议。特别是在很多有认知门槛的陌生领域，AI 能帮我们快速收集、筛选、分析信息。很多以前光是找资料看书就需要花上好几个月功夫的问题，AI 分分钟就能理得明明白白。
+
+但面对海量的 AI 工具和资源，如何找到真正适合自己的？
+
+[鱼皮的 AI 导航网站](https://ai.codefather.cn/) 可以帮你解决这个问题。
+
+
+
+
+### AI 工具大全
+
+目前 AI 导航里已经收录了上千个国内外好用的 AI 网站和应用，并且按照功能用途进行了分类，再也不用大海捞针一样到处搜了。
+
+网站按照功能分类，包括 AI 写作、AI 图像、AI 视频创作、AI 办公、AI 开发平台、AI 智能体、AI 聊天对话、AI 音频音乐、AI 商业设计、AI 大模型、AI 学习平台、AI 搜索引擎等十几个大类。
+
+
+
+写论文、做 PPT、生成图片、写代码、做视频…… 无论你想干啥，来这儿点两下，就能发现优质的工具！
+
+后续还会持续给大家收录新的工具，时刻走在 AI 潮流的前端。
+
+
+
+
+### AI 提示词大全
+
+总觉得 AI 听不懂人话？或许是你没找到调教它的方法！
+
+我们给你准备了几百个抄作业级的提示词模板。写小红书爆文、制作特定风格的图片、设计一套学习路径等等。
+
+复制粘贴就能用，秒变 Prompt 高手，给你的 AI 开光～
+
+
+
+提示词按照领域分类，包括学习成长、教育学习、职场工作、技术、写作、研究、商业等近 30 个分类。后续还将上线 “分享你的 prompt” 功能，让大家都能用上你创作的提示词。
+
+
+
+
+### AI 学习资源
+
+比起最初的版本，AI 知识库已经不局限于某个单一的工具，而是汇总了各种 AI 相关有价值的信息和资源。
+
+从零基础入门到硬核技术解析，精华文章、项目教程、应用场景，都能直接学。碎片化时代，我们帮你做系统学习的那个人。
+
+这里有各种手把手教你实操 AI 工具的保姆级学习教程，有可以直接写进简历的 [企业级 AI 项目课程](https://www.codefather.cn/course?sortField=priority&tags%5B%5D=AI%E9%A1%B9%E7%9B%AE)，还有大量适合入门以及进阶了解的知识百科。
+
+
+
+
+
+
+### AI 热点资讯
+
+AI 高速发展，几乎每天都有 “炸裂” 的消息。
+
+- 大厂又发布了什么模型？
+- 有什么逆天的新应用？
+- 蹲一下 AI 圈又出了什么瓜？
+- 整了什么新花活？
+
+这些我们会持续帮你盯着！所有的行业新鲜事都按时间排序好了，还能直接点击日历上的某一天去回顾。
+
+
+
+
+
+### AI 交流社区
+
+AI 的本质还是工具，到底能用它做到什么样的事，还要看你能不能把它玩出花来。
+
+于是，我们直接建了一个 AI 社区，在这里可以分享你刚发现的宝藏工具，炫耀你的 AI 大作，向大佬们请教问题。
+
+
+
+工具是冷的，但人是热的，一起来社区碰撞出灵感的火花吧。
+
+
+
+
+## 感谢 AI 领域的先行者们
+
+在 AI 编程这个领域能有今天的繁荣，离不开众多优秀博主的无私分享。他们持续输出高质量的内容，科普技术知识，分享实战经验，让更多人能够了解和掌握 AI 编程。
+
+[苍何](canghecode.com)：前大厂高级开发，知名 AI 编程博主，微软最具价值专家 MVP，公众号和推特经常分享对 AI 编程的理解和教程。
+
+**Andrej Karpathy**：前 OpenAI 研究员、特斯拉 AI 负责人，也是 Vibe Coding 这个词的创造者之一。他的博客和推特经常分享对 AI 编程的深刻思考，非常值得关注。
+
+**Simon Willison**：Django 的联合创始人，他的博客持续分享 AI 工具的使用经验和技术洞察。他对 Vibe Coding 的理解非常深入，而且特别擅长把复杂的技术讲得通俗易懂。
+
+**Fireship**：YouTube 上最受欢迎的技术频道之一，用快节奏的方式讲解各种新技术。他关于 AI 编程的视频都很精彩，适合快速了解新工具和新技术。
+
+还有很多优秀的博主在各个平台分享知识。正是因为有这些博主的持续输出和对 AI 知识科普的贡献，AI 编程的知识才能快速传播，让更多人受益。
+
+
+
+
+## 一起玩转 AI
+
+
+AI 的世界太大了，一个人摸索太孤单，不如一起来玩吧！
+
+[《鱼皮 AI 导航》](https://ai.codefather.cn/) 是我专门为 AI 学习者和开发者打造的一站式资源平台。网站完全免费、用心整理、持续更新，涵盖了 AI 工具、提示词、学习资源、知识库、资讯、社区等丰富的内容。
+
+**如果你需要 Vibe Coding 等 AI 资源，就来鱼皮的 AI 导航网站。**
+
+我一直相信，知识分享是互利共赢的。《鱼皮 AI 导航》不仅是一个资源平台，更是一个开放的生态。我会持续推荐优秀的内容创作者，帮助他们扩大影响力。如果你也在创作 AI 相关的内容，欢迎通过网站上的 “AI 导航小助手” 联系我。
+
+最后，我想再次强调：**资源再多，最重要的还是动手去做**。网站只是工具，真正让你成长的是实践。
+
+如果你对 AI 有兴趣，不管是想提升效率、学习技能，还是单纯好奇，都欢迎来体验👇
+
+鱼皮的 AI 导航：https://ai.codefather.cn
+
+有什么建议或者想要的功能、内容，欢迎在社区给我们提建议，万分感谢。
+
+记得把网站加入收藏夹，方便随时探索 AI 哦~
+
+
+
+
+## 推荐资源
+
+1）鱼皮 AI 导航网站：[AI 资源大全、最新 AI 资讯、免费 AI 教程](https://ai.codefather.cn)
+
+2）编程导航学习圈：[学习路线、编程教程、实战项目、求职宝典、交流答疑](https://www.codefather.cn)
+
+3）程序员面试八股文：[实习/校招/社招高频考点、企业真题解析](https://www.mianshiya.com)
+
+4）程序员写简历神器：[专业模板、丰富例句、直通面试](https://www.laoyujianli.com)
+
+5）1 对 1 模拟面试：[实习/校招/社招面试拿 Offer 必备](https://ai.mianshiya.com)
diff --git a/Vibe Coding 零基础教程/70 Vibe Coding 概念大全.md b/Vibe Coding 零基础教程/70 Vibe Coding 概念大全.md
new file mode 100644
index 0000000..f2b6759
--- /dev/null
+++ b/Vibe Coding 零基础教程/70 Vibe Coding 概念大全.md
@@ -0,0 +1,777 @@
+# Vibe Coding 概念大全
+
+> 一文搞懂 AI 编程的所有核心术语
+
+
+
+你好，我是程序员鱼皮，前腾讯全栈开发，全网 200 万粉的 [AI 编程博主](https://space.bilibili.com/12890453)，也是 [AI 导航](https://ai.codefather.cn) 和 [编程导航](https://www.codefather.cn) 等 10+ 自研产品的创造者。
+
+在学习 Vibe Coding 的过程中，你一定会遇到各种陌生的名词和术语。比如什么是 Token？什么是上下文窗口？什么是 RAG？这些概念听起来很高大上，但其实理解起来并不难。
+
+这篇文章就是你的 **AI 编程术语词典**，我会用最通俗易懂的语言，把 Vibe Coding 中最常见、最重要的概念讲清楚。你可以把它收藏起来，遇到不懂的词就来查一查。
+
+
+
+## AI 基础概念
+
+
+### 人工智能（AI）
+
+人工智能（Artificial Intelligence）是让计算机模拟人类智能的技术。简单来说，就是让机器能像人一样思考、学习和解决问题。
+
+在 Vibe Coding 中，AI 就是你的编程助手。你告诉它要做什么，它帮你写代码。就像你有一个 24 小时在线的程序员朋友，随时可以帮你干活。
+
+
+
+
+### 大语言模型（LLM）
+
+大语言模型（Large Language Model）是一种能够理解和生成人类语言的 AI 系统。ChatGPT、Claude、Gemini、DeepSeek 都是大语言模型。
+
+为什么叫 “大” 呢？因为这些模型的参数量非常庞大，动辄几十亿甚至上万亿个参数。参数越多，模型通常越聪明，但也越消耗计算资源。
+
+你可以把大语言模型理解成一个读过海量书籍和代码的超级学霸，它见过无数的编程案例，所以能帮你写代码、解释代码、修复 bug。
+
+
+
+
+
+### 模型参数
+
+参数是模型在训练过程中学到的 “知识点”，用数字的形式存储在模型中。参数越多，模型能记住的知识就越丰富，通常也越聪明。
+
+比如：
+
+- GPT-4 大约有 1.8 万亿参数
+- Claude 3.5 Sonnet 的参数量未公开，但估计在千亿级别
+- DeepSeek-V3 有 6710 亿参数
+
+参数量会影响模型的能力和运行成本。一般来说，参数越多的模型越贵，但效果也越好。
+
+
+
+
+### 训练和推理
+
+训练（Training）是让 AI 模型从大量数据中学习知识的过程。这个过程需要海量的计算资源和时间，通常由 AI 公司完成。你不需要自己训练模型。
+
+推理（Inference）是模型学完之后，用学到的知识来回答问题、生成内容的过程。当你用 ChatGPT 对话时，就是在进行推理。
+
+打个比方：训练就像学生上学读书，推理就像学生参加考试答题。我们日常使用 AI 工具，都是在用推理能力。
+
+
+
+
+### 微调（Fine-tuning）
+
+微调是在已有模型的基础上，用特定领域的数据继续训练，让模型在某个领域表现更好。
+
+比如，你可以用大量的医学资料微调一个模型，让它成为医学专家。或者用你公司的代码库微调，让它更了解你的项目风格。
+
+对于普通用户来说，微调成本较高，一般不需要自己做。直接使用现成的模型就够用了。
+
+
+
+## Token 和计费
+
+
+### Token
+
+Token 是 AI 模型处理文本的基本单位。你可以简单理解为 “词块”。
+
+在英文中，一个 Token 大约是一个单词或单词的一部分。在中文中，一个汉字通常是 1-2 个 Token。
+
+为什么 Token 重要？因为 AI 服务通常按 Token 收费。你输入的文字和 AI 输出的文字都会消耗 Token。Token 用得越多，花的钱就越多。
+
+举个例子：
+
+- "Hello World" 大约是 2 个 Token
+- “你好世界” 大约是 4-6 个 Token
+
+
+
+
+
+### 输入 Token 和输出 Token
+
+AI 服务通常分别计算输入和输出的 Token：
+
+- 输入 Token：你发给 AI 的内容（提示词、代码、文件等）
+- 输出 Token：AI 返回给你的内容（回答、生成的代码等）
+
+一般来说，输出 Token 比输入 Token 更贵，因为生成内容比理解内容更消耗算力。
+
+省钱小技巧：写清楚、写简洁的提示词，让 AI 一次就能理解你的需求，减少反复对话。
+
+
+
+### 上下文窗口
+
+上下文窗口（Context Window）是指 AI 模型一次能 “记住” 的最大内容量，用 Token 来衡量。
+
+不同模型的上下文窗口大小不同：
+
+- GPT-4o：128K Token（约 10 万中文字）
+- Claude 3.5 Sonnet：200K Token（约 15 万中文字）
+- Gemini 2.0 Pro：2M Token（约 150 万中文字）
+
+上下文窗口越大，AI 能处理的代码量就越多，能记住的对话历史就越长。如果你的项目代码很多，选择上下文窗口大的模型会更合适。
+
+但要注意，上下文窗口越大，每次请求消耗的 Token 也越多，成本也会更高。
+
+
+
+## 提示词相关
+
+
+### 提示词（Prompt）
+
+提示词是你给 AI 的指令或问题。在 Vibe Coding 中，提示词就是你用自然语言描述的需求。
+
+提示词的质量直接决定了 AI 输出的质量。一个好的提示词应该：
+
+- 具体明确，不含糊
+- 包含必要的背景信息
+- 说明期望的输出格式
+
+比如，“做一个网站” 是一个模糊的提示词，而 “用 React 做一个记账网站，包含添加支出、查看列表、统计总额三个功能，界面用蓝色调” 就是一个好的提示词。
+
+在 AI 对话中，消息通常分为三种角色：
+
+- 系统提示词（System）：设置 AI 的角色和行为规则，对用户不可见
+- 用户提示词（User）：你发送给 AI 的消息
+- 助手提示词（Assistant）：AI 回复给你的消息
+
+理解这 3 种角色有助于你更好地构造对话。比如在调试时，你可以在提示词中模拟之前的对话历史，让 AI 更好地理解上下文。
+
+
+
+### 系统提示词
+
+系统提示词（System Prompt）是在对话开始前设置的指令，用来定义 AI 的角色、行为和限制。
+
+比如，你可以设置系统提示词：“你是一位资深的 React 开发专家，请用简洁清晰的代码风格回答问题。”
+
+系统提示词在整个对话过程中都会生效，是定制 AI 行为的重要方式。
+
+
+
+
+
+### 提示词工程
+
+提示词工程（Prompt Engineering）是设计和优化提示词的技术，目的是让 AI 更好地理解你的意图，生成更符合预期的结果。
+
+这是 Vibe Coding 的核心技能之一。好的提示词工程师能用更少的对话轮次，让 AI 生成更高质量的代码。
+
+
+
+### 零样本提示（Zero-shot）
+
+零样本提示是指直接给 AI 一个任务，不提供任何示例。
+
+比如：“请把这段英文翻译成中文。”
+
+AI 会根据自己的训练知识来完成任务。对于简单任务，零样本提示通常就够用了。
+
+
+
+### 少样本提示（Few-shot）
+
+少样本提示是在提示词中提供几个示例，让 AI 学习你想要的格式或风格。
+
+比如：
+
+```
+请按以下格式翻译：
+英文：Hello → 中文：你好
+英文：Thank you → 中文：谢谢
+英文：Good morning → 中文：
+```
+
+通过提供示例，AI 能更准确地理解你的需求，输出更一致的结果。
+
+
+
+### 思维链提示（Chain-of-Thought）
+
+思维链提示是让 AI 一步一步思考问题，而不是直接给出答案。这对于复杂的推理任务特别有效。
+
+你可以在提示词中加上 “请一步一步思考” 或 "Let's think step by step"，AI 就会展示它的推理过程，通常能得到更准确的答案。
+
+在编程中，思维链提示能帮助 AI 更好地理解复杂需求，生成更合理的代码结构。
+
+
+
+
+
+### Markdown 语言
+
+Markdown 是一种轻量级的文本标记语言，用简单的符号来表示格式。比如用 `#` 表示标题，用 `**文字**` 表示加粗，用 `-` 表示列表。
+
+在 Vibe Coding 中，Markdown 非常重要，因为：
+
+- AI 生成的回答通常是 Markdown 格式
+- 项目文档（如 README）用 Markdown 编写
+- 规则文件也是 Markdown 格式
+
+学会 Markdown 能让你更好地与 AI 交流，也能写出更规范的项目文档。
+
+
+
+
+## AI 编程模式
+
+
+### Vibe Coding
+
+Vibe Coding 是由计算机科学家 Andrej Karpathy 在 2025 年 2 月提出的概念。它描述了一种全新的编程方式：通过自然语言和 AI 对话，让 AI 帮你写代码，你只需要描述需求、测试结果、指导方向。
+
+Vibe Coding 的核心理念是：你不需要精通编程语法，只需要能清楚表达你的想法。AI 负责把你的想法变成可运行的代码。
+
+这就像点外卖一样：你告诉外卖平台你想吃什么，餐厅帮你做好送到手上。你不需要会做饭，但要知道自己想吃什么。
+
+
+
+### Agentic Coding 智能体编程
+
+Agentic Coding 是指让 AI 像一个自主的 “智能体”（Agent）一样工作，能够自己规划任务、执行操作、验证结果，而不只是被动地回答问题。
+
+在 Cursor 的 Agent 模式中，AI 可以：
+
+- 自动读取和分析多个文件
+- 规划实现方案
+- 执行代码修改
+- 运行测试验证
+- 自动修复问题
+
+这比传统的问答式 AI 更强大，因为它能自主完成复杂的多步骤任务。
+
+
+
+
+
+### 多智能体协作
+
+多智能体协作（Multi-Agent）是指多个 AI 智能体分工合作，共同完成复杂任务。
+
+比如，一个智能体负责设计架构，一个负责写前端代码，一个负责写后端代码，一个负责代码审查。它们像一个团队一样协作。
+
+这两年，多智能体系统正在成为 AI 编程的重要趋势，能够处理更复杂的项目。
+
+
+
+
+
+### 智能体编排
+
+编排是指协调和管理多个 AI 智能体或 AI 任务的过程，确保它们按正确的顺序和方式工作。
+
+就像乐队指挥一样，编排器决定哪个智能体在什么时候做什么事情，如何传递信息，如何汇总结果。
+
+
+
+
+
+### Agent Loop 智能体循环
+
+Agent Loop 是 AI 智能体的核心工作机制，描述了智能体如何持续运行来完成任务。
+
+一个典型的 Agent Loop 包括：
+
+1. 感知：获取当前环境信息（读取文件、查看错误等）
+2. 思考：分析情况，决定下一步行动
+3. 行动：执行具体操作（写代码、运行命令等）
+4. 观察：检查行动的结果
+5. 循环：根据结果决定是否继续
+
+这个循环会一直进行，直到任务完成或达到终止条件。理解 Agent Loop 能帮你更好地使用 Cursor Agent 等工具。
+
+
+
+### ReAct 推理与行动
+
+ReAct（Reasoning and Acting）是一种让 AI 智能体交替进行推理和行动的技术框架。
+
+传统的 AI 要么只思考不行动，要么只行动不思考。ReAct 让 AI 能够：
+
+- 先推理：思考当前情况，制定计划
+- 再行动：执行具体操作
+- 观察结果：看看行动效果如何
+- 继续推理：根据结果调整策略
+
+这种 “思考 - 行动 - 观察” 的循环让 AI 能更可靠地完成复杂任务，是现代 AI 编程工具的核心技术之一。
+
+
+
+
+
+### 工具调用
+
+工具调用（Tool Use / Function Calling）是让 AI 能够使用外部工具和功能的技术。AI 本身只能生成文字，但通过工具调用，它可以：
+
+- 读写文件
+- 执行命令行命令
+- 搜索网页
+- 调用 API
+- 操作数据库
+
+
+
+在 Vibe Coding 中，工具调用让 AI 从 "只会说" 变成 "能动手"。比如 Cursor 的 Agent 模式就是通过工具调用来修改你的代码文件的。
+
+
+
+### Agent Skills 智能体技能
+
+Agent Skills（智能体技能）是 Anthropic 在 2025 年 10 月推出的开放标准，用于给 AI 智能体扩展特定领域的专业能力。
+
+简单来说，Skill 就是一个包含 `SKILL.md` 文件的文件夹，里面可以放置指令说明、脚本代码、参考资料等。当 AI 遇到相关任务时，会自动加载对应的 Skill 来增强自己的能力。
+
+
+
+你可以把 Skill 理解成给 AI 的 “新员工入职指南”。比如：
+
+- 一个 PDF 处理 Skill，教会 AI 如何填写 PDF 表单
+- 一个项目部署 Skill，包含你团队特有的部署流程和脚本
+- 一个代码审查 Skill，定义了你项目的代码规范和检查清单
+
+Skills 的核心设计是 **渐进式披露**：AI 只在需要时才加载相关内容，不会一次性把所有信息都塞进上下文，既节省 Token 又保持灵活性。
+
+
+
+
+
+### A2A（Agent-to-Agent）
+
+A2A（Agent-to-Agent）是指 AI 智能体之间相互通信和协作的协议或方式，是多智能体系统的基础技术。
+
+就像人和人之间需要语言来沟通，AI 智能体之间也需要标准化的方式来交换信息、分配任务、汇报结果。
+
+A2A 协议让不同的 AI 智能体能够组成团队，分工合作完成复杂任务。
+
+
+
+
+
+## 上下文管理
+
+
+### 上下文（Context）
+
+上下文是 AI 在回答问题时能够参考的所有信息，包括：
+
+- 当前对话的历史
+- 你打开的代码文件
+- 项目的结构和配置
+- 你提供的参考资料
+
+上下文越丰富、越相关，AI 生成的代码就越符合你的需求。这就像给一个新同事交接工作 —— 你给的背景信息越多，他上手就越快。
+
+
+
+### 上下文工程
+
+上下文工程（Context Engineering）是有策略地管理和优化提供给 AI 的上下文信息的技术。
+
+核心目标是 **让 AI 拥有恰到好处的信息**。既不能太少（导致 AI 不了解情况），也不能太多（导致信息过载、成本上升）。
+
+好的上下文工程包括：
+
+- 选择最相关的文件
+- 提供必要的背景说明
+- 使用规则文件定义项目规范
+- 适时清理无关的对话历史
+
+
+
+### 规则文件
+
+规则文件（Rules File）是放在项目根目录的配置文件，用来告诉 AI 你的项目规范、技术栈、代码风格等信息。
+
+在 Cursor 中，这个文件叫 `.cursorrules`；在 Claude Code 中，这个文件叫 `CLAUDE.md`。（注意，随着工具版本的更新，这些文件的名称和标准可能会发生改变）
+
+有了规则文件，AI 每次生成代码时都会参考这些规则，生成的代码更符合你的项目风格，省去了反复强调的麻烦。
+
+
+
+### RAG 检索增强生成
+
+RAG（Retrieval-Augmented Generation）是一种让 AI 能够查阅外部知识库的技术。
+
+普通的 AI 只能依赖训练时学到的知识，而 RAG 能让 AI 在回答问题时，先从你的文档、代码库、知识库中检索相关信息，然后基于这些信息生成回答。
+
+这对于 Vibe Coding 特别有用，因为 AI 可以参考你项目中的已有代码，生成风格一致的新代码。
+
+
+
+
+
+
+### 向量数据库
+
+向量数据库是专门用来存储和查询 “向量”（一种数字表示形式）的数据库。在 AI 领域，它常用来存储文本的语义表示。
+
+当你把代码或文档存入向量数据库后，AI 就能快速找到语义相似的内容，即使搜索词和原文不完全一样。
+
+比如，你搜 “用户登录”，它能找到叫 "handleAuth" 的函数，因为它们在语义上是相关的。
+
+
+
+
+
+
+### 嵌入 Embedding
+
+嵌入是把文本、代码等内容转换成数字向量的过程。这些向量能够捕捉内容的语义信息。
+
+在向量空间中，语义相似的内容会靠得更近。这就是为什么向量数据库能进行语义搜索的原理。
+
+你不需要深入理解嵌入的技术细节，只需要知道它是 RAG 和代码语义搜索的基础技术。
+
+
+
+
+
+
+### MCP 模型上下文协议
+
+MCP（Model Context Protocol）是 Anthropic 在 2024 年底推出的开放标准，用于让 AI 模型安全地连接外部数据源和工具。
+
+你可以把 MCP 理解成 AI 世界的 “USB 接口”。有了 MCP，AI 就能方便地读取你的文件、访问数据库、调用各种工具，而不需要每个工具都单独开发接口。
+
+
+
+在 Vibe Coding 中，MCP 让 AI 能够更方便地获取项目上下文，提高代码生成的准确性。
+
+
+
+
+
+## AI 输出相关
+
+
+### AI 幻觉
+
+AI 幻觉（Hallucination）是指 AI 编造了不存在的内容，比如虚构的 API、错误的函数用法、不存在的库。
+
+这是大语言模型的固有问题，因为它们是基于概率生成内容的，有时会 “脑补” 不存在的东西。
+
+遇到幻觉时的应对方法：
+
+- 要求 AI 提供文档链接验证
+- 自己查官方文档确认
+- 换个模型试试
+- 开新对话重新描述问题
+
+
+
+
+### 温度
+
+温度（Temperature）是控制 AI 输出随机性的参数，取值通常在 0-2 之间。
+
+- 温度低（如 0.1）：输出更确定、更保守，适合写代码
+- 温度高（如 1.0）：输出更随机、更有创意，适合头脑风暴
+
+在编程场景中，通常使用较低的温度，让 AI 生成更稳定、更可预测的代码。
+
+
+
+
+### 流式输出
+
+流式输出（Streaming）是指 AI 一边生成内容，一边实时显示给你，而不是等全部生成完再显示。
+
+这就像看直播而不是看录播，你能实时看到 AI 的思考过程，如果发现方向不对，可以及时中断。
+
+大多数 AI 编程工具都支持流式输出，让交互体验更流畅。
+
+
+
+## 开发工具概念
+
+
+### IDE 集成开发环境
+
+IDE（Integrated Development Environment）是程序员用来写代码的综合软件，通常包含代码编辑器、调试器、终端等工具。
+
+VS Code 是目前最流行的 IDE。Cursor 和 Windsurf 都是基于 VS Code 开发的 AI 代码编辑器，继承了 VS Code 的功能，同时增加了 AI 能力。
+
+
+
+
+
+
+### 代码编辑器
+
+代码编辑器是用来编写和修改代码的工具。它通常提供语法高亮、代码补全、错误提示等功能，帮助你更高效地写代码。
+
+常见的代码编辑器有 Sublime Text 等。区别于 IDE 的区别，它们相对轻量、启动快速，适合快速编辑单个文件；而 IDE 的功能更全面，集成了调试器、终端、版本控制等工具，适合大型项目开发。
+
+在 Vibe Coding 时代，代码编辑器集成了 AI 能力，可以根据你的提示词自动生成代码、解释代码、修复错误。比如 Cursor 虽然功能强大像 IDE，但它的核心还是一个 AI 增强的代码编辑器。
+
+
+
+
+### 零代码平台
+
+零代码平台（No-Code Platform）是不需要写代码就能创建应用的平台。你通过可视化界面拖拽组件、配置参数来构建应用。
+
+在 AI 时代，像 Bolt.new、Lovable、v0.dev、百度秒哒这样的平台结合了零代码和 AI，你用自然语言描述需求，平台自动生成完整的应用。
+
+零代码平台特别适合完全没有编程经验的新手，或者想快速做原型的场景。
+
+
+
+
+
+
+### 代码补全
+
+代码补全（Code Completion）是 AI 预测你接下来要写什么代码，并自动提供建议的功能。
+
+当你写代码时，AI 会根据上下文推测你的意图，提供代码片段供你选择。按下 Tab 键就能接受建议，大大提高编码速度。
+
+GitHub Copilot 是目前最知名的 AI 代码补全工具。
+
+
+
+
+### 代码审查
+
+代码审查（Code Review）是检查代码质量、发现问题、提出改进建议的过程。
+
+在传统开发中，一般会由同事或上级来做。在 Vibe Coding 中，你可以让 AI 帮你审查代码，它会指出潜在的 bug、安全问题、性能问题，并提供修改建议。
+
+
+
+但要注意，AI 的审查不能完全替代人工审查，特别是对于重要的生产代码。
+
+
+
+
+### Linter 代码检查器
+
+Linter 是自动检查代码问题的工具，能发现语法错误、风格问题、潜在 bug 等。
+
+常见的 Linter 有 ESLint（JavaScript）、Pylint（Python）等，它们像一个严格的语法老师，帮你保持代码规范。
+
+在 Vibe Coding 中，Linter 能帮你快速发现 AI 生成代码中的问题。
+
+
+
+
+### 调试
+
+调试（Debug）是找到并修复代码中错误的过程。当代码运行结果不符合预期时，你需要调试来定位问题。
+
+调试的常用方法包括：
+
+- 设置断点，逐步执行代码
+- 查看变量的值
+- 阅读错误信息和堆栈跟踪
+- 添加日志输出
+
+
+
+在 Vibe Coding 中，你可以把错误信息发给 AI，让它帮你分析原因并提供修复方案。
+
+
+
+## 项目管理概念
+
+
+### MVP（最小可行产品）
+
+MVP（Minimum Viable Product）是用最少的功能满足核心需求的产品版本。
+
+做 MVP 的好处是：
+
+- 快速验证想法是否可行
+- 避免在不必要的功能上浪费时间
+- 更快获得用户反馈
+
+比如做记账应用，MVP 版本可能只有记录支出、查看列表两个功能，其他高级功能以后再加。
+
+
+
+### 迭代开发
+
+迭代开发是把大项目分成多个小周期，每个周期完成一部分功能的开发方法。
+
+每个迭代周期包括：计划 => 开发 => 测试 => 发布 => 反馈 => 改进。
+
+这种方法特别适合 Vibe Coding，因为你可以让 AI 先实现核心功能，测试没问题后再逐步添加新功能。
+
+
+
+### 重构
+
+重构（Refactoring）是在不改变功能的前提下，改进代码结构和质量的过程。
+
+重构的目的是让代码更清晰、更易维护、更高效。常见的重构包括：
+
+- 提取重复代码为函数
+- 改进变量和函数命名
+- 简化复杂的逻辑
+- 拆分过长的文件
+
+在 Vibe Coding 中，你可以让 AI 帮你重构代码，但要小步进行，每次重构后都要测试。
+
+
+
+### 技术债
+
+技术债（Technical Debt）是为了快速完成功能而采用的临时方案，这些方案在未来需要花时间修复和改进。
+
+就像信用卡欠款一样，虽然现在透支方便，但以后要还，还要加利息。
+
+在 Vibe Coding 中，AI 生成的代码可能不是最优方案，积累太多技术债会让项目越来越难维护。定期重构是偿还技术债的方式，防止出现屎山代码。
+
+
+
+
+
+### 版本控制
+
+版本控制是记录代码变更历史的系统，让你能追踪每次修改、对比不同版本、回退到之前的状态。
+
+Git 是最流行的版本控制工具，GitHub 是最流行的代码托管平台。
+
+在 Vibe Coding 中，版本控制特别重要。因为 AI 可能会生成有问题的代码，有了版本控制，你随时可以回退到之前正常的版本。
+
+
+
+
+
+
+### 部署
+
+部署（Deployment）是把开发好的应用发布到服务器上，让用户能够访问使用的过程。
+
+常用的部署平台：
+
+- Vercel：适合前端和全栈应用
+- Netlify：适合静态网站和前端应用
+- Railway、Render：适合后端服务
+
+很多零代码平台（如 Bolt.new）支持一键部署，点个按钮就能上线。
+
+
+
+## 前后端概念
+
+
+### 前端
+
+前端（Frontend）是用户能直接看到和交互的部分，包括网页界面、按钮、表单、动画等。
+
+前端技术栈通常包括：
+
+- HTML：页面结构
+- CSS：样式和布局
+- JavaScript：交互逻辑
+- React/Vue/Next.js：现代前端框架
+
+在 Vibe Coding 中，前端是 AI 最擅长生成的部分，因为效果可以直接看到，方便验证和调整。
+
+
+
+
+### 后端
+
+后端（Backend）是用户看不到的部分，负责处理业务逻辑、数据存储、用户认证等。
+
+后端技术栈通常包括：
+
+- Node.js/Python/Java：编程语言
+- Express/FastAPI/Spring：Web 框架
+- MySQL/PostgreSQL/MongoDB：数据库
+
+后端比前端更复杂，需要考虑安全性、性能、数据一致性等问题。AI 生成的后端代码需要更仔细地审查。
+
+
+
+
+### 全栈
+
+全栈（Full-stack）是指同时包含前端和后端的完整应用。全栈开发者是能同时处理前端和后端工作的程序员。
+
+在 Vibe Coding 中，像 Bolt.new 这样的工具可以一次性生成全栈应用，前后端代码都帮你写好。
+
+想进一步了解全栈程序员是什么、怎么成为全栈程序员？可以看鱼皮的这篇文章：[全栈程序员是什么？](https://www.bilibili.com/opus/534338036646820466)
+
+
+
+
+### API
+
+API（Application Programming Interface）是不同程序之间通信的接口。
+
+你可以把 API 理解成餐厅的菜单。菜单告诉你有什么菜可以点，怎么点，点了之后会得到什么。你不需要知道厨房怎么做菜，只需要按菜单点餐。
+
+在 Web 开发中，前端通过 API 和后端通信，获取数据或提交操作。
+
+
+
+想进一步了解 API 接口和标准的 API 接口设计规范，可以观看 [鱼皮的 API 动画科普视频](https://www.bilibili.com/video/BV1WFBXBmExs)。
+
+
+
+
+### 数据库
+
+数据库是存储和管理数据的系统。应用中的用户信息、内容、设置等都存在数据库里。
+
+常见的数据库类型：
+
+- 关系型数据库（MySQL、PostgreSQL）：数据以表格形式存储
+- 文档数据库（MongoDB）：数据以 JSON 文档形式存储
+- 键值数据库（Redis）：适合缓存和快速查找
+
+
+
+
+
+在 Vibe Coding 中，你可以用 Supabase、Firebase 等 BaaS 服务，不用自己搭建和管理数据库。
+
+如果你想系统学习数据库知识，可以看鱼皮的数据库入门教程：[数据库入门教程](https://www.bilibili.com/video/BV1iJSLBbEyD/)
+
+
+
+
+### BaaS（后端即服务）
+
+BaaS（Backend as a Service）是提供现成后端功能的云服务，包括数据库、用户认证、文件存储等。
+
+常用的 BaaS 服务：
+
+- Supabase：开源的 Firebase 替代品
+- Firebase：Google 的 BaaS 平台
+- PlanetScale：托管的 MySQL 服务
+
+使用 BaaS，你不需要自己写后端代码和管理服务器，能大大加快开发速度。特别适合 Vibe Coding 场景。
+
+
+
+## 写在最后
+
+这篇文章涵盖了 Vibe Coding 中最常见的概念和术语。当然，AI 和编程领域的新概念还在不断涌现，这份词典也会持续更新。
+
+你不需要一次记住所有概念，遇到不懂的词，回来查一查、或者问一问 AI 就好。随着你不断地实践 Vibe Coding，这些概念会自然而然地变得熟悉。
+
+
+
+
+## 推荐资源
+
+1）鱼皮 AI 导航网站：[AI 资源大全、最新 AI 资讯、免费 AI 教程](https://ai.codefather.cn)
+
+2）编程导航学习圈：[学习路线、编程教程、实战项目、求职宝典、交流答疑](https://www.codefather.cn)
+
+3）程序员面试八股文：[实习/校招/社招高频考点、企业真题解析](https://www.mianshiya.com)
+
+4）程序员写简历神器：[专业模板、丰富例句、直通面试](https://www.laoyujianli.com)
+
+5）1 对 1 模拟面试：[实习/校招/社招面试拿 Offer 必备](https://ai.mianshiya.com)
diff --git a/Vibe Coding 零基础教程/90 Vibe Coding 常见问题和解决.md b/Vibe Coding 零基础教程/90 Vibe Coding 常见问题和解决.md
new file mode 100644
index 0000000..ce6185e
--- /dev/null
+++ b/Vibe Coding 零基础教程/90 Vibe Coding 常见问题和解决.md
@@ -0,0 +1,608 @@
+# Vibe Coding 常见问题和解决
+
+
+你好，我是程序员鱼皮，前腾讯全栈开发，全网 200 万粉的 [AI 编程博主](https://space.bilibili.com/12890453)，也是 [AI 导航](https://ai.codefather.cn) 和 [编程导航](https://www.codefather.cn) 等 10+ 自研产品的创造者。
+
+之前我系统讲解了 Vibe Coding 的各种技巧和方法，这篇文章我来汇总一下大家在 Vibe Coding 实践中最常遇到的问题和解决方案。
+
+你可以把它当作速查手册。遇到问题时，先来这里找找，说不定就能找到答案。如果这里没有，也可以去我的 [编程导航](https://www.codefather.cn/) 提问，或者在 [鱼皮 AI 导航](https://ai.codefather.cn/) 中跟其他 AI 爱好者交流并寻找答案。
+
+
+
+
+## Vibe Coding 概念理解
+
+
+### Vibe Coding 和传统编程有什么区别？
+
+回答：传统编程是你自己写代码，Vibe Coding 是你用自然语言描述需求，让 AI 帮你写代码。传统编程需要你掌握编程语言的语法和细节，Vibe Coding 更注重需求的表达和 AI 的引导。但本质上，它们都是在解决问题，只是方式不同。你可以把传统编程理解成自己做饭，Vibe Coding 理解成点外卖 —— 最终都能吃上饭，但过程完全不一样。
+
+
+
+### Vibe Coding 适合所有人吗？
+
+回答：Vibe Coding 降低了编程的门槛，让更多人能参与开发。但它不是万能的，对于非常复杂的系统、对性能要求极高的项目、需要深度优化的场景，传统编程可能更合适。Vibe Coding 最适合快速原型开发、个人项目、中小型应用、工具类软件等场景。如果你是零基础想学编程，或者想快速把想法变成产品，Vibe Coding 就很适合你。
+
+
+
+
+### 学了 Vibe Coding 还需要学传统编程吗？
+
+回答：需要，但不用急。Vibe Coding 能帮你快速实现功能，但要真正理解代码、调试复杂问题、优化性能，还是需要编程基础。建议边用 Vibe Coding 做项目，边学习编程知识。这样学习效率更高，也更有动力。你可以先用 AI 做出几个项目，有了成就感后再系统学习编程，会比一开始就啃书本有意思得多。
+
+
+
+
+### AI 生成的代码靠谱吗？
+
+回答：AI 生成的代码能用，但不一定完美。它可能有 bug、性能问题、安全隐患。所以你需要测试功能、审查代码、持续优化。不要盲目相信 AI，要保持批判性思维。就像你点外卖也要检查一下菜品是否新鲜一样，AI 生成的代码也需要你把关。不过随着 AI 模型的进步，代码质量已经越来越高了。
+
+
+
+
+### Vibe Coding 会取代程序员吗？
+
+回答：不会完全取代，但会改变程序员的工作方式。就像计算器没有取代数学家，搜索引擎没有取代图书馆员一样，AI 编程工具会成为程序员的助手，而不是替代品。未来的程序员需要更强的产品思维、架构能力和问题解决能力，而不只是写代码的能力。会用 AI 的程序员会比不会用的更有竞争力。
+
+
+
+
+### 什么是 AI 幻觉？
+
+回答：AI 幻觉是指 AI 编造了不存在的内容，比如虚构了一个不存在的 API、错误的函数用法、或者根本不存在的库。这是 AI 模型的固有问题，因为它是基于概率生成内容的。遇到幻觉时，不要慌，要求 AI 提供文档链接验证，或者自己查官方文档确认。如果 AI 坚持错误，可以换个模型试试，或者开新对话重新描述问题。
+
+
+
+
+### MVP 是什么意思？
+
+回答：MVP 是 Minimum Viable Product 的缩写，意思是最小可行产品。简单来说就是先做一个最简单但能用的版本，然后再慢慢完善。比如做记账应用，MVP 版本可能只有记录支出、查看列表、计算总额这三个功能，其他的分类、图表、导出等功能以后再加。这样做的好处是能快速验证想法，避免一开始就陷入细节，保持开发动力。
+
+
+
+
+### 什么是上下文窗口？
+
+回答：上下文窗口是指 AI 模型一次能 “记住” 的内容量，通常用 Token 来衡量。比如 Claude Sonnet 4.5 的上下文窗口是 200K Token，大约相当于 15 万个中文字。上下文窗口越大，AI 能处理的代码量就越多，能记住的对话历史就越长。如果你的项目代码很多，选择上下文窗口大的模型会更合适，比如 Gemini 3 Pro 支持 1M Token。
+
+
+
+
+## Vibe Coding 工具选择
+
+
+### Cursor 和 Windsurf 哪个更好？
+
+回答：两个都很好，各有特点。Cursor 生态更成熟，社区更大，插件更多，文档更完善。Windsurf 有一些创新功能比如 Cascade 模式，界面也更现代。
+
+如果你是新手，建议从 Cursor 开始，因为遇到问题更容易找到解决方案。如果你喜欢尝鲜，可以试试 Windsurf。当然最好的办法是 “我全都要”，两个都试试，看哪个更适合你的工作方式。
+
+
+
+
+### 免费版够用吗？
+
+回答：对于学习和小项目，免费版够用。Cursor 免费版每月有一些特定模型的额度。但如果是日常工作或大项目，建议用付费版。付费版的额度更多，模型更强，体验更好，本质是拿金钱换时间。
+
+可以先用免费版试试，觉得好用再升级。学生党可以充分利用各种免费资源，完全够学习使用了。
+
+
+
+
+### 如何选择 AI 模型？
+
+回答：根据任务复杂度和预算选择。简单任务用便宜的模型（Gemini Flash、DeepSeek），复杂任务用强大的模型（Claude Opus、GPT-5）。如果做前端 UI，Gemini 3 Pro 表现很好。如果做全栈项目，Claude Sonnet 比较全面。如果预算有限，国产模型（DeepSeek、通义千问、智谱 GLM）性价比很高。
+
+如果不确定，可以用 Auto 模式让工具自动选择，或者先用便宜的模型试试，不行再换强模型。
+
+
+
+
+### Bolt.new 和 v0.dev 有什么区别？
+
+回答：Bolt.new 更适合做全栈应用，能生成完整的前后端代码，还能直接在浏览器里运行和调试。v0.dev 更专注于前端 UI 组件，特别擅长生成漂亮的界面。如果你想快速做一个完整的应用，用 Bolt.new。如果你只是想生成一些 UI 组件，用 v0.dev。两个都是零代码平台，不需要安装软件，打开浏览器就能用，特别适合新手。
+
+
+
+
+### API Key 在哪里获取？
+
+回答：去对应服务的官网注册账号，然后在设置或 API 页面生成 Key。比如 OpenAI 的 Key 在 platform.openai.com 获取，Anthropic 的 Claude Key 在 console.anthropic.com 获取，Supabase 的 Key 在项目设置里。
+
+生成 API Key 后记得妥善保管，不要泄露，也不要提交到 GitHub 等公开仓库。建议用环境变量或配置文件来管理 API Key，避免硬编码在代码里。
+
+
+
+
+### 如何在国内访问 Cursor 和 Claude？
+
+回答：Cursor 可以直接访问，但 Claude 官网在国内访问可能有困难。可以使用国产模型替代，比如 DeepSeek、通义千问、智谱 GLM 在编程能力上已经很接近国际模型了，而且访问速度更快，价格更便宜。如果一定要用 Claude，可以考虑使用 API 方式，或者通过 OpenRouter 等中转服务。
+
+
+
+
+### Cursor 有哪些 AI 模式？
+
+回答：Cursor 2.0 主要提供了 2 大 AI 交互模式
+
+1. Chat 模式：对话模式，适合问问题、解释代码、小范围修改。
+2. Agent 模式：最强大的模式，可以自主规划和执行复杂任务，能同时修改多个文件，支持并行运行多个代理。
+
+如果你只是想问问题或改一个函数，用 Chat 就够了。如果要添加新功能、涉及多个文件的修改，用 Agent 更合适。Agent 模式还支持 Plan Mode，会先生成计划让你确认，再执行修改。
+
+
+
+
+### 选择零代码平台还是代码编辑器？
+
+回答：如果你是完全零基础，或者只是想快速做个原型，用零代码平台（Bolt.new、v0.dev）。如果你想做复杂项目，需要更多控制权，或者想学习编程，用代码编辑器（Cursor、Claude Code 等）。
+
+零代码平台简单快速，但灵活性有限。代码编辑器功能强大，但学习难度更大。建议先用零代码平台体验一下，有了感觉再学代码编辑器。
+
+
+
+
+## Vibe Coding 使用技巧
+
+
+### AI 生成的代码报错怎么办？
+
+回答：把完整的错误信息和相关代码复制给 AI，让它分析和修复。注意要包含完整的错误堆栈，不要只复制一句话。如果 AI 修复不了，可以切换到更强的模型试试，或者开新对话重新描述问题。也可以自己查文档或搜索解决方案，在社区或论坛求助。很多时候错误信息本身就包含了解决线索，学会看错误信息很重要。
+
+
+
+
+### AI 总是用错误的技术栈怎么办？
+
+回答：在每次对话开始时，明确说明你的技术栈。比如 “我用的是 React + TypeScript + Tailwind CSS，请用这些技术实现”。
+
+或者在项目中配置 `.cursorrules` 规则文件，让 AI 自动知道你的技术栈。
+
+如果 AI 还是用错，及时中断并纠正：“我用的是 React，不是 Vue，请用 React 重写！”
+
+多次强调后 AI 就会记住了。
+
+
+
+
+### 如何让 AI 生成的代码更符合项目风格？
+
+回答：提供参考代码，让 AI 模仿。比如：“请参考这个组件的风格来写新组件”，然后贴上参考代码。
+
+或者在上下文文件中详细说明代码风格，包括命名规则、组件结构、注释格式等。
+
+还可以提供一个代码规范文档，让 AI 按照规范来写。
+
+最重要的是，提示词越具体越好，不要只说 “写得好看一点”，要说清楚什么是好看。
+
+
+
+
+### AI 生成的代码性能不好怎么办？
+
+回答：先用 Chrome DevTools、Lighthouse 等工具找到性能瓶颈，然后让 AI 针对性地优化。比如 “这个列表渲染很慢，请用虚拟滚动优化”，或者 “这个函数在大数据量时很慢，请优化算法”。
+
+不要一开始就追求完美性能，先让功能跑起来，发现瓶颈再优化，大部分情况下 AI 生成的代码性能已经够用了。
+
+
+
+
+### 如何处理 AI 的幻觉？
+
+回答：如果 AI 编造了不存在的 API，要求它提供文档链接。如果提供不了，说明是幻觉，让它用正确的 API。
+
+如果 AI 陷入死循环，切断上下文，开新对话。
+
+如果 AI 坚持错误方案，换个模型试试，或者自己查文档确认。
+
+遇到不确定的内容，一定要验证，不要盲目相信。建议养成查文档的习惯，这是程序员的基本功。
+
+
+
+
+### 如何调试 AI 生成的代码？
+
+回答：使用断点调试，而不是只用 console.log。
+
+可以在浏览器或编辑器中设置断点，单步执行代码，查看变量值。这样能更清楚地看到代码的执行过程。如果还是找不到问题，把错误信息和代码给 AI，让它帮你分析。也可以让 AI 添加详细的日志，帮助你理解代码的执行流程。
+
+调试是程序员的必备技能，值得多花时间学习。
+
+
+
+
+### 如何提高提示词的质量？
+
+回答：提示词要具体、清晰、有结构。不要说 “做一个网站”，要说 “做一个记账网站，包含添加支出、查看列表、统计总额三个功能，界面用蓝色调，简洁现代风格”。
+
+可以把提示词分成几个部分：功能需求、界面要求、技术要求。还可以提供参考案例，比如 “界面风格参考 Notion”。
+
+记住，提示词写得越详细，AI 生成的结果越符合预期。
+
+
+
+
+### AI 生成的代码太冗长怎么办？
+
+回答：让 AI 重构代码，提取重复部分，简化逻辑。比如 “这段代码太长了，请重构一下，提取公共函数，减少重复”。或者 “请用更简洁的方式实现这个功能”。
+
+AI 一般会优先让代码能跑起来，而不是追求简洁，所以需要你主动要求优化。不过也不要过度追求简洁，可读性更重要。
+
+
+
+
+### 如何让 AI 解释代码？
+
+回答：通过让 AI 解释代码，你能更快地理解和学习。可以直接问 AI “这段代码是做什么的？请详细解释”，或者 “这个函数的逻辑是什么？为什么要这样写？”。AI 会用通俗易懂的语言给你解释。
+
+如果解释太简单，可以说 “请更详细地解释，包括每一步的作用”。如果解释太复杂，可以说 “请用更简单的语言解释，我是新手”，甚至可以说 “我是傻子”，效果可能会出其不意~
+
+
+
+
+### 如何处理 AI 生成的过时代码？
+
+回答：AI 的训练数据可能有滞后，所以有时会生成旧版本的代码。你需要明确告诉 AI 使用最新版本，比如 “请用 React 19 的最新写法” 或者 “请用 Next.js 15 的 App Router”。并且一定要提供给 AI 最新的官方文档。
+
+
+
+
+### 如何在提示词中加入代码示例？
+
+回答：直接把代码用三个反引号包裹起来，然后贴到提示词里。比如：
+
+````markdown
+请参考这段代码的风格：
+
+```jsx
+代码内容
+```
+````
+
+如果代码比较长，可以只贴关键部分。也可以利用 AI 代码编辑器的 `@` 能力，让 AI 读取项目中的文件，比如 “请参考 @src/components/Button.tsx 的风格”。提供代码示例能让 AI 更准确地理解你的需求。
+
+
+
+
+### AI 总是生成重复的代码怎么办？
+
+回答：提醒 AI 提取公共函数或组件。比如 “这些代码有很多重复，请提取成公共函数” 或者 “请创建一个可复用的组件”。也可以在提示词里明确说 “避免重复代码，使用 DRY 原则”。如果 AI 还是生成重复代码，可以自己手动重构，或者换个模型试试。
+
+
+
+
+### 如何处理 AI 生成的不安全代码？
+
+回答：让 AI 审查代码的安全性。比如 “请检查这段代码是否有安全问题” 或者 “请添加输入验证，防止 XSS 攻击”。也可以使用安全扫描工具，比如前端代码可以用 ESLint 的安全插件。对于敏感操作（比如用户认证、支付），一定要格外小心，最好请有经验的开发者、或者多用几个不同的高级 AI 模型来交叉验证。
+
+
+
+
+## Vibe Coding 项目开发
+
+
+### 项目做到一半代码变得很乱怎么办？
+
+回答：及时重构，不要等到完全乱套了再处理。每完成一个功能，花 10 ~ 15 分钟整理一下代码。提取重复代码，拆分大函数，改进命名，添加注释。
+
+如果已经很乱了，可以让 AI 帮你重构，但要小步进行，每一步都要测试。比如 “请帮我重构这个文件，提取公共函数”，而不是 “重构整个项目”。小步快跑，逐步改进。
+
+注意，重构前一定要先用 Git 提交当前代码！这样即使重构出问题，也能随时回退到之前的版本。养成频繁提交的习惯，是保护代码的最好方式。
+
+
+
+
+### 如何部署 AI 生成的项目？
+
+回答：很多零代码平台（比如 Bolt.new）支持一键部署，点个按钮就能上线。
+
+如果要手动部署，可以用 Vercel、Netlify 等平台。把代码推送到 GitHub，然后在平台上连接仓库，它会自动构建和部署。
+
+如果需要后端，可以用 Supabase 等 BaaS 服务。如果需要用自己的服务器，可以利用 Docker 容器化部署。
+
+总之，部署其实没那么难，跟着鱼皮的部署教程一步步来就行。
+
+
+
+
+### 项目上线后出了 bug 怎么办？
+
+回答：首先，用监控工具（Sentry、LogRocket）收集错误信息。然后，在本地复现问题，找到原因。
+
+修复后，让 AI 多写测试，确保问题不再出现。最后尽快部署修复版本。
+
+为了避免这种情况，上线前要充分测试，包括功能测试、边界情况测试、不同设备测试。可以让朋友帮忙测试，往往能发现你一个人没注意到的问题。
+
+
+
+
+### 如何从玩具项目变成真正的产品？
+
+回答：需要考虑到很多方面，比如
+
+1. 完善错误处理，考虑各种异常情况
+2. 添加测试，确保功能稳定
+3. 优化性能，让应用跑得更快
+4. 加强安全，保护用户数据
+5. 改进 UI，让应用更好用
+6. 写好文档，方便维护和扩展
+7. 还要考虑 SEO、监控、日志等
+
+这是一个持续改进的过程，不要想着一步到位。每次改进一点，慢慢就能变成真正的产品。
+
+
+
+
+### 如何评估项目的质量？
+
+回答：不要只关注功能，质量同样重要。一个功能完整但 bug 一堆的项目，不如一个功能简单但稳定可靠的项目。
+
+可以从这几个方面评估：
+
+- 功能完整性（是否实现了所有需求）
+- 代码质量（是否清晰、可维护）
+- 性能表现（加载速度、响应速度）
+- 安全性（有没有漏洞）
+- 用户体验（是否好用）
+- 测试覆盖率（是否有足够的测试）
+
+
+
+
+### 遇到 AI 解决不了的问题怎么办？
+
+回答：首先，一定不要对着一个 AI 死磕，可以换个 AI 模型试试，不同模型擅长的领域不一样。
+
+如果你有编程基础，最好看看官方文档，文档是最权威的资料。
+
+或者搜索类似问题的解决方案，比如 GitHub Issues 区，因为很多问题别人已经遇到过了，照搬解决方案就好。
+
+还可以在社区或论坛求助，比如在 [编程导航](https://codefather.cn/) 提问；或者请教有经验的开发者，有时候一句话就能点醒你。
+
+记住，AI 是工具，不是万能的，人的智慧同样重要。
+
+
+
+
+### 如何管理项目的版本和代码？
+
+回答：用 Git 做版本控制，把代码托管到 GitHub。
+
+- 每完成一个功能就提交一次，写清楚提交信息
+- 如果要尝试新功能，创建新分支，测试没问题再合并
+- 定期备份代码，避免数据丢失
+- 如果是团队协作，制定好分支策略和代码规范
+
+Git 是程序员的必备技能，绝对值得花时间学习。但是不用死记硬背 Git 的命令，因为 AI 就可以帮你搞定。
+
+
+
+
+### 如何处理项目依赖和包管理？
+
+回答：用 npm 或 pnpm 管理依赖，定期更新包版本。
+
+还要注意下面几点：
+
+1. 注意检查包的安全性，避免使用有漏洞的包。
+2. 如果遇到依赖冲突，可以让 AI 帮你解决
+3. 不要安装太多不必要的包，每个包都会增加项目体积和复杂度
+4. 定期清理不用的依赖，保持项目整洁
+
+如果不确定要用哪个包，可以让 AI 推荐，它会给你几个选择和对比。
+
+
+
+
+### 如何测试 AI 生成的代码？
+
+回答：如果是重要项目，可以让 AI 帮你写自动化测试，比如单元测试、集成测试。
+
+但是不要完全相信 AI，必须手动测试！把每个功能都点一遍，试试各种边界情况。
+
+测试不仅能发现 bug，还能让你更了解代码的行为。不要觉得测试浪费时间，它能帮你省下更多调试的时间。还可以让朋友或邀请用户帮忙测试，他们往往能发现你没想到的问题。
+
+
+
+
+### 如何优化 AI 生成的 UI 界面？
+
+回答：可以让 AI 参考优秀的设计，比如通过文字描述 “界面风格参考 Notion，简洁现代”，或者找一些优秀网站的截图贴给 AI 理解并参考。
+
+如果你有一定的编程基础，或者有自己喜欢的 UI 组件库，可以直接推荐给 AI。比如 Ant Design、Material-UI、shadcn/ui，它们提供了现成的漂亮组件。
+
+记住，好的 UI 不是花哨，而是清晰、一致、好用。
+
+
+
+
+### 如何处理多人协作开发？
+
+回答：使用 Git 分支管理，每个人在自己的分支上开发，完成后合并到主分支。
+
+此外，还有几个重要事项：
+
+1. 制定代码规范，保持代码风格一致。可以让 AI 帮你生成团队协作文档，包括开发规范、Git 工作流等。
+2. 使用 Pull Request 进行代码审查，互相学习
+3. 定期同步代码，避免冲突
+4. 使用项目管理工具（比如 Notion）分配任务
+5. 保持沟通，遇到问题及时讨论
+
+
+
+
+### 如何给项目添加数据库？
+
+回答：最简单的方法是用 BaaS 服务，比如 Supabase、Firebase。它们提供了数据库、认证、存储等功能，不需要自己搭建服务器。
+
+直接告诉 AI “请集成 Supabase 数据库”，它会帮你生成代码。
+
+对于小项目，BaaS 服务完全够用，而且省心。
+
+如果需要更多控制权，可以用 PostgreSQL、MongoDB 等数据库，但需要自己部署和管理。
+
+
+
+
+### 如何处理用户认证和授权？
+
+回答：不要自己从零实现认证系统，太容易出安全问题。建议使用现成的方案，比如 Supabase Auth、Firebase Auth、Auth0、NextAuth.js。这些方案提供了完整的认证流程，包括邮箱验证、密码重置、第三方登录等。
+
+直接告诉 AI “请用 NextAuth.js 实现用户登录注册”，它会帮你集成。
+
+如果是学习项目，可以简单实现，但商业项目一定要用成熟方案。
+
+
+
+
+## Vibe Coding 学习成长
+
+
+### 零基础能学 Vibe Coding 吗？
+
+回答：完全可以。Vibe Coding 降低了编程门槛，零基础也能上手。建议从零代码平台（Bolt.new）开始，先做出几个小项目，建立信心。然后边做边学，了解一些基本的编程概念，比如变量、函数、条件判断、循环等。不用一开始就学很深，能看懂 AI 生成的代码就行。慢慢地，你会发现自己能理解越来越多，甚至能自己修改代码了。
+
+
+
+
+### 学习 Vibe Coding 需要多长时间？
+
+回答：入门很快，不到 10 分钟就能做出第一个项目。但要熟练掌握，需要日复一日的实践。建议每天花 1 ~ 2 小时练习，先做一些小项目积累经验、然后尝试做商业级产品。
+
+记住，学习是持续的过程，不要急于求成。重要的不是学多快，而是能不能坚持。每天进步一点点，几个月后回头看，你会惊讶于自己的成长。
+
+
+
+
+### 有哪些学习资源推荐？
+
+回答：
+
+1. 官方文档是最好的资源，比如 Cursor 的文档、Claude 的文档。
+2. [鱼皮的AI 导航](https://ai.codefather.cn/) 收录了大量 AI 工具和学习资源。
+3. B 站、YouTube 上有很多 Vibe Coding 的视频教程，我在 “程序员鱼皮” 这个账号也经常做这方面的分享。
+4. GitHub 上有 awesome-vibe-coding 这样的资源合集
+5. 还可以加入 [编程导航](https://www.codefather.cn/) 等开发者社区，和其他人交流学习。
+
+
+
+
+### 如何提高 Vibe Coding 水平？
+
+回答：多实践是最重要的。
+
+- 做各种类型的项目，从简单到复杂
+- 学习优秀的提示词和对话技巧，看别人是怎么用 AI 的。
+- 理解 AI 生成的代码，不要只是复制粘贴。
+- 总结经验教训，记录遇到的问题和解决方法。
+- 保持学习，关注新工具和新技术。
+- 可以尝试重构之前的项目，用新学的技巧改进它
+- 教别人也是很好的学习方式，能加深你的理解，输出促进输入
+
+
+
+
+### 如何平衡 AI 辅助和自主学习？
+
+回答：不要完全依赖 AI，也不要完全排斥 AI。可以先让 AI 生成代码，然后自己理解和修改。遇到不懂的地方，先自己思考，再问 AI。
+
+如果你还处于入门阶段，可以定期做一些不用 AI 的练习，巩固基础。
+
+**记住，AI 是工具、是加速器，但不能代替你的思考。**
+
+就像计算器不能代替数学思维一样，AI 不能代替编程思维。用 AI 提高效率，用思考提升能力。
+
+
+
+
+### 如何保持学习动力？
+
+回答：做自己感兴趣的项目，而不是为了学习而学习。
+
+你可以：
+
+- 设定小目标，每完成一个就奖励自己
+- 和朋友一起学习，互相鼓励
+- 分享你的作品，获得反馈和认可
+- 记录学习过程，看到自己的进步
+
+学习是马拉松，不是短跑，慢慢来，享受过程。最重要的是，记住你为什么开始学习，想做什么，想成为什么样的人。不要和别人比，而是和过去的自己比。
+
+
+
+
+## Vibe Coding 成本和效率
+
+
+### 如何控制 AI 使用成本？
+
+回答：有非常多节省真金白银的技巧
+
+- 简单任务用便宜的模型，复杂任务才用贵的模型
+- 充分利用免费资源，比如 DeepSeek、通义千问的免费额度
+- 优化提示词，一次说清楚，减少反复对话
+- 避免让 AI 生成大量不必要的代码
+- 使用缓存功能，减少重复计算
+
+如果是学习阶段，免费资源完全够用。如果是商业项目，成本是值得的，因为 AI 能大大提高效率，节省的人力成本远超 AI 成本。
+
+
+
+### 如何提高开发效率？
+
+回答：有很多提高效率的技巧：
+
+- 使用快捷键，减少鼠标操作
+- 利用 Agent 模式，让 AI 自动化工作，减少人工投入的时间
+- 准备好提示词模板，常用的需求直接套用
+- 使用代码片段，快速插入常用代码
+- 配置好开发环境，减少重复工作
+- 学习一些基础知识，能更快理解和修改 AI 生成的代码
+
+最重要的是，做好规划，想清楚再动手，避免返工。Vibe Coding 完整项目时，真正的效率不是快，而是少走弯路。
+
+
+
+### 如何避免重复劳动？
+
+回答：程序员的优点就是 “懒”，避免重复劳动的关键就是 **沉淀和复用**。
+
+具体的几种做法：
+
+- 把常用的提示词、配置、代码片段保存起来，需要时直接复制，或者让 AI 复用。
+- 使用模板项目，新项目基于模板创建，而不是从 0 开始生成
+- 把解决过的问题记录下来，下次遇到直接查阅
+- 建立自己的知识库，积累经验
+
+
+
+### 如何选择合适的订阅计划？
+
+回答：如果是学习阶段，先用免费版，不够用再升级。如果是日常工作或者要做个商业项目，订阅 Cursor Pro 的性价比最高。如果需要大量使用，可以考虑 API 按量付费。如果预算有限，国产模型的订阅更便宜。
+
+总之，不要一开始就订阅最贵的，先试用，找到最适合自己的。也不要排斥付费，毕竟工具是为了提高效率，如果能帮你节省时间，成本就是值得的。
+
+
+
+## 写在最后
+
+这篇文章汇总了几十个常见问题，涵盖了概念理解、工具选择、使用技巧、项目开发、学习成长、成本效率等各个方面。这些问题都是我本人在实践中遇到的、或者在 [AI 编程社区](https://ai.codefather.cn/) 里经常被学员们问到的。
+
+当然，Vibe Coding 还在快速发展，新的问题会不断出现，新的解决方案也会不断涌现。建议你保持学习、多关注社区动态、多和其他开发者交流，无限进步！
+
+
+
+
+
+
+## 推荐资源
+
+1）鱼皮 AI 导航网站：[AI 资源大全、最新 AI 资讯、免费 AI 教程](https://ai.codefather.cn)
+
+2）编程导航学习圈：[学习路线、编程教程、实战项目、求职宝典、交流答疑](https://www.codefather.cn)
+
+3）程序员面试八股文：[实习/校招/社招高频考点、企业真题解析](https://www.mianshiya.com)
+
+4）程序员写简历神器：[专业模板、丰富例句、直通面试](https://www.laoyujianli.com)
+
+5）1 对 1 模拟面试：[实习/校招/社招面试拿 Offer 必备](https://ai.mianshiya.com)
diff --git a/Vibe Coding 零基础教程/README.md b/Vibe Coding 零基础教程/README.md
new file mode 100644
index 0000000..a5b9b0e
--- /dev/null
+++ b/Vibe Coding 零基础教程/README.md
@@ -0,0 +1,128 @@
+# 鱼皮 Vibe Coding 零基础入门教程
+
+大家好，我是程序员鱼皮。
+
+如今 Vibe Coding 已经火遍全网，不仅是程序员，连设计师、产品运营、甚至完全不懂技术的人都开始用 Vibe Coding 实现自己的想法，用 AI 做出了自己的产品并盈利变现。
+
+为了帮大家紧跟时代，我一人爆肝，创作了一套 [《Vibe Coding 零基础入门教程》](https://ai.codefather.cn/vibe)，完全免费开源！
+
+上千张图、几十万字，结合了我两年半的 AI 编程经验 + 项目开发经验 + 产品变现经验，我的目标只有一个：**帮助任何人快速掌握 Vibe Coding，哪怕零基础，也能快速开发上线自己的产品并盈利。**
+
+（todo 补充开源截图）
+
+臭不要脸一下，我敢说这套免费教程吊打 90% 的付费 Vibe Coding 内容，毕竟我投入了足够多的时间。
+
+- 教程文档开源地址：https://github.com/liyupi/ai-guide
+- 教程在线阅读地址：https://ai.codefather.cn/vibe
+
+欢迎大家 Star 收藏、分享给身边的朋友！
+
+
+
+
+
+## 什么是 Vibe Coding？
+
+简单来说，**Vibe Coding 就是用人话和 AI 聊天，让 AI 帮你写代码**。你不需要记住任何语法，只需要把需求讲清楚，比如说 “帮我做一个记账页面”，AI 就能帮你生成。编程变得像聊天一样自然，这就是 Vibe Coding 的魅力。
+
+
+
+## 为什么要学 Vibe Coding？
+
+以前学编程要花几个月，现在用 Vibe Coding 几天就能上手。今天想到一个点子，今天就能做出来，生产力提升数十倍！
+
+学了 Vibe Coding 后，你可以快速做出提升办公效率的小工具、可以开发解决生活问题的应用、可以把脑海中的创意变成真实的产品并盈利。
+
+
+
+## 这套教程有什么？
+
+网上虽然有很多 AI 编程教程，但要么太碎片化、要么只讲工具不讲方法、要么缺少实战案例。
+
+这就导致大家只能东拼西凑、搜到一个学一招，很难系统地掌握 Vibe Coding。
+
+因此，我出手了！
+
+这套教程涵盖了 Vibe Coding 的方方面面。从零基础入门 => 10 分钟做出第一个项目 => 学会多种 AI 编程工具 => 实战各类 AI 项目 => 掌握 AI 编程核心技巧 => 跑通产品变现全流程，再搭配 AI 编程学习资源、AI 知识百科、常见问题解决手册，能够帮你玩转 Vibe Coding，应对各种需求。
+
+
+
+我精心梳理了内容结构，让你能够一条龙学习，或者快速找到适合自己阅读的内容。
+
+- 基础必读：帮你快速理解 Vibe Coding 并上手实践，10 分钟做出第一个作品
+- 编程工具：帮你选择适合自己的 AI 编程工具，包括 AI 模型选择、AI 零代码平台、AI 智能体平台、AI 代码编辑器、AI 命令行工具、IDE 插件等
+- 项目实战：手把手带你从 0 到 1 做出真实可用的产品，覆盖个人工具、AI 应用、全栈应用、小程序等多种类型
+- 经验技巧：帮你提升 Vibe Coding 效率和质量，包括核心心法、对话工程、上下文管理、幻觉处理、代码质量保障等
+- 产品变现：教你如何让产品产生价值，涵盖需求分析、技术选型、架构设计、盈利模式、SEO 优化、自媒体运营等
+- 编程学习：为想深入学习编程的同学准备的进阶内容，包括学习路线、知识百科、资源大全、MCP 开发、面试刷题等
+- 资源宝库：汇集各种实用资源，包括工具大全、提示词模板、AI 概念大全、Vibe Coding 常见问题等
+
+
+
+这套教程不是枯燥的理论堆砌，而是以实战为核心。配有丰富的项目案例和大量截图示例，手把手带你边学边做，真正掌握 Vibe Coding。
+
+
+
+
+
+## 适合哪些同学？
+
+**1）适合任何想用 AI 提升效率的人**
+
+如果你曾经想学编程，但被复杂的语法、难懂的概念劝退过；或者你有不错的创意，想要快速开发上线自己的产品；又或者你只是想用 AI 提升日常办公效率、做个小工具解决工作中的重复劳动。用 Vibe Coding，几天就能上手，像聊天一样编程。
+
+**2）适合想提升效率的程序员**
+
+如果你是一个传统程序员，每天被重复的代码折磨得想摔键盘。用 Vibe Coding，生产力提升数十倍不是梦。教程中的经验技巧和项目实战，能帮你快速进阶成为 Vibe Coding 高手。
+
+**3）适合想产品变现的创业者**
+
+如果你想把想法变成产品并盈利，这套教程不仅教你怎么做产品，还教你怎么让产品产生价值。从需求分析到盈利模式，从 SEO 优化到自媒体运营，我会把自己做过 10+ 自研产品、从 0 到 200 万粉的经验都分享给你。
+
+
+
+
+
+## 从哪开始学习？
+
+**零基础新手**
+
+- 第 1 天：读完基础必读，理解 Vibe Coding 并做出第一个作品
+- 第 1 ~ 2 周：学习 AI 编程工具 + 做几个简单项目
+- 之后：按需学习经验技巧和产品变现
+
+**有编程基础**
+
+- 第 1 天：快速过完基础内容，完成快速上手教程
+- 第 1 周：学习主流 AI 编程工具，尝试重构之前的项目
+- 之后：重点学习进阶技巧，提升对话和上下文管理能力
+
+实战是最好的老师，无论你是什么背景，都要在学习过程中多 Vibe 一些项目，在实战中遇到问题并解决，这才是最有效的学习方式。
+
+
+
+
+
+## 写在最后
+
+我一直相信，知识分享是互利共赢的。
+
+这套教程完全免费开源，希望能帮更多人打开 Vibe Coding 的大门。
+
+但毕竟是一个人编写的，会有不足的地方，我会持续更新和完善内容。
+
+**如果这套教程对你有帮助的话，希望能点赞或者 Star ⭐️ 支持一下！**
+
+别犹豫，现在就打开教程，10 分钟后你就能做出第一个作品，跟着鱼皮一起开启 Vibe Coding 之旅吧！🛫
+
+
+
+📖 教程文档开源地址：https://github.com/liyupi/ai-guide
+
+🌐 教程在线阅读地址：https://ai.codefather.cn/vibe
+
+🎬 作者的视频合集：https://space.bilibili.com/12890453
+
+💬 交流反馈：欢迎在 [AI 导航社区](https://ai.codefather.cn) 提问
+
+