From 1ce719ffb3aaa5b612f4a04f1fcfd318b3831715 Mon Sep 17 00:00:00 2001
From: liyupi <592789970@qq.com>
Date: Thu, 30 Apr 2026 23:21:48 +0800
Subject: [PATCH] =?UTF-8?q?docs:=20=E6=96=B0=E5=A2=9E=204=20=E7=AF=87?=
 =?UTF-8?q?=E6=96=87=E7=AB=A0=E5=B9=B6=E6=9B=B4=E6=96=B0=E6=95=99=E7=A8=8B?=
 =?UTF-8?q?=E4=BD=93=E7=B3=BB?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

新增文章：
- CBTI 程序员人格测试项目实战（Cursor）
- AI 开源项目学习网站项目实战（Codex + GPT-5.5）
- AI 提肛助手项目实战（Claude Code + DeepSeek V4）
- GitHub Copilot Coding Agent 云端自动开发实战

内容更新：
- 概念大全：扩充 RAG 进阶方案和 Harness Engineering 核心模块
- AI 编程技术：补充 16 种 RAG 实现方案分层概览和选型建议
- 命令行工具：新增 CC Switch 切换第三方模型章节
- 工具大全：支线新增 Copilot Coding Agent 引用
- 项目实战导读：新增 3 个原创项目提及
- 五大核心心法：引用 Harness Engineering 概念
- 模型选择指南/成本控制：补充小米 MiMo 选项
- 程序员成长大法、作者页面更新

Made-with: Cursor
---
 .../10 编程工具/00 AI 编程工具大全.md         |   1 +
 .../10 编程工具/01 AI 模型选择指南.md         |   1 +
 .../10 编程工具/05 AI 命令行编程工具.md       |  34 +-
 .../工具实战/GitHub Copilot 云端 AI 自动开发实战.md | 619 ++++++++++++++++++
 .../20 项目实战/00 Vibe Coding 项目实战导读.md |   2 +
 .../AI 创意应用 - 程序员人格测试 CBTI 项目.md | 197 ++++++
 .../Claude Code - AI 提肛助手项目实战.md      | 482 ++++++++++++++
 .../Codex - AI 开源项目学习网站项目实战.md    | 406 ++++++++++++
 .../30 经验技巧/01 Vibe Coding 五大核心心法.md |   4 +
 .../30 经验技巧/10 Vibe Coding 成本控制技巧.md |   2 +
 .../40 编程学习/04 AI 编程技术.md             |  16 +
 .../40 编程学习/10 程序员成长大法.md          |   5 +-
 .../70 Vibe Coding 概念大全.md                |  47 +-
 作者.md                                       |   6 +-
 14 files changed, 1808 insertions(+), 14 deletions(-)
 create mode 100644 Vibe Coding 零基础教程/10 编程工具/工具实战/GitHub Copilot 云端 AI 自动开发实战.md
 create mode 100644 Vibe Coding 零基础教程/20 项目实战/鱼皮的原创项目/AI 创意应用 - 程序员人格测试 CBTI 项目.md
 create mode 100644 Vibe Coding 零基础教程/20 项目实战/鱼皮的原创项目/Claude Code - AI 提肛助手项目实战.md
 create mode 100644 Vibe Coding 零基础教程/20 项目实战/鱼皮的原创项目/Codex - AI 开源项目学习网站项目实战.md

diff --git a/Vibe Coding 零基础教程/10 编程工具/00 AI 编程工具大全.md b/Vibe Coding 零基础教程/10 编程工具/00 AI 编程工具大全.md
index f7d5533..8329b93 100644
--- a/Vibe Coding 零基础教程/10 编程工具/00 AI 编程工具大全.md	
+++ b/Vibe Coding 零基础教程/10 编程工具/00 AI 编程工具大全.md	
@@ -126,6 +126,7 @@
 工具实战板块主要讲解特定工具的使用方法和实战案例，可以根据需要选择性学习。
 
 - **VSCode + GitHub Copilot 实战**：从安装到实战的完整教程，涵盖 Agent 模式、MCP 管理、Skills 技能包、自定义智能体等核心特性
+- **GitHub Copilot Coding Agent 实战**：全程云端、不开 IDE，用 GitHub 网页版打造 AI 智能体，体验从开发到部署、代码审查、Issue 处理的全流程
 - **规范驱动开发**：Spec-kit、OpenSpec 的详细使用教程
 - **AI 技能库**：Agent Skills、Superpowers 的安装和进阶用法
 - **命令行工具实测**：OpenCode、Gemini CLI、TRAE SOLO 等工具的实战评测
diff --git a/Vibe Coding 零基础教程/10 编程工具/01 AI 模型选择指南.md b/Vibe Coding 零基础教程/10 编程工具/01 AI 模型选择指南.md
index 5388dfe..5345c72 100644
--- a/Vibe Coding 零基础教程/10 编程工具/01 AI 模型选择指南.md	
+++ b/Vibe Coding 零基础教程/10 编程工具/01 AI 模型选择指南.md	
@@ -161,6 +161,7 @@ Gemini 的价格和获取方式：
 - 月之暗面 Kimi 在很早之前就支持超长上下文能力（200 万字），在国产模型中独树一帜。特别适合处理大型项目的代码，可以一次性处理 500 个文件。
 - 腾讯混元 CodeBuddy 能够和腾讯云服务深度集成，原生对接 3000+ 云 API，有等保三级安全认证，适合企业使用，而且价格便宜。
 - 百度文心一言有免费额度，而且和百度的生态（比如百度秒哒平台）深度集成，适合创意类小项目需要快速商业化的场景。
+- 小米 MiMo 也是值得关注的新选手。旗舰版 MiMo-V2.5-Pro 采用万亿参数 MoE 架构，支持 100 万 tokens 超长上下文，官方主打 Agent 编程能力和 token 效率。你可以通过 CC Switch 等工具便捷地切换到 MiMo 模型使用。
 
 
 
diff --git a/Vibe Coding 零基础教程/10 编程工具/05 AI 命令行编程工具.md b/Vibe Coding 零基础教程/10 编程工具/05 AI 命令行编程工具.md
index 1736406..df9203d 100644
--- a/Vibe Coding 零基础教程/10 编程工具/05 AI 命令行编程工具.md	
+++ b/Vibe Coding 零基础教程/10 编程工具/05 AI 命令行编程工具.md	
@@ -16,6 +16,8 @@
 
 命令行工具没有花哨的界面，只有简洁的文字交互。但正是这种极简，让它们拥有了极致的效率和灵活性。
 
+![](https://pic.yupi.icu/1/image-20260429110454017-20260430230948435.png)
+
 这篇文章，我会重点介绍 Claude Code 这个最火的命令行 AI 编程工具，并分享更多值得关注的命令行 AI 编程工具。
 
 
@@ -108,10 +110,14 @@ Skills 的核心价值在于：人提供专业知识和方法论，AI 提供智
 
 让我用一个实际例子来演示 Claude Code 的使用流程。
 
-1）首先一行命令安装 Claude Code：
+0）首先确保你的电脑有 Node.js 环境和 npm 软件依赖安装工具，没有的话，直接到 [Node 官网](https://nodejs.org/en/download) 下载傻瓜式安装包就好：
+
+![](https://pic.yupi.icu/1/1777341714221-67b76f0e-c816-410b-adc0-e445074efc46-20260430231040061.png)
+
+1）打开终端，输入一行命令安装 Claude Code：
 
 ```bash
-curl -fsSL https://claude.ai/install.sh | bash
+npm install -g @anthropic-ai/claude-code
 ```
 
 2）然后执行 `claude` 命令打开程序，默认是需要登录 Claude 账号的，而且 Claude Code 对中国地区有访问限制，直接访问 Anthropic 官网或使用 Claude 的 API 可能会被屏蔽，真狗！
@@ -187,6 +193,30 @@ curl -fsSL https://claude.ai/install.sh | bash
 
 
 
+### 切换第三方模型
+
+Claude Code 虽然默认使用 Anthropic 的 Claude 模型，但它是支持切换第三方模型的。很多国产大模型（如 DeepSeek）都提供了兼容 OpenAI 格式的 API，可以直接对接 Claude Code 使用。
+
+推荐使用开源工具 **CC Switch** 来可视化管理 Claude Code 的模型配置。它内置了 50 多个供应商预设，一键切换不同的模型供应商，不用自己手动改配置文件。
+
+> 开源指路：https://github.com/farion1231/cc-switch
+
+![](https://pic.yupi.icu/1/1777343334412-73a61961-5d7e-4fbb-a0e0-691f5d867b48-20260430231155296.png)
+
+以切换 DeepSeek V4 为例，操作步骤如下：
+
+1. 安装 CC Switch（Mac 用户可通过 Homebrew 安装）
+2. 运行软件，添加 DeepSeek 供应商
+3. 填写从 DeepSeek 开放平台获取的 API Key
+4. 设置主模型为 DeepSeek-V4-Pro（Agent 能力和复杂推理更强）
+5. 保存并启用，重新进入 Claude Code 即可使用
+
+![](https://pic.yupi.icu/1/1777343299981-c370c8ff-b24a-460a-891e-e08bc1efcf54-20260430231211935.png)
+
+通过 CC Switch，你还可以在 DeepSeek、小米 MiMo 等多个国产模型之间自由切换，按需选择最合适的模型。关于用 Claude Code + DeepSeek V4 开发完整项目的实战经验，可以阅读本教程项目实战板块「鱼皮的原创项目」中的《Claude Code - AI 提肛助手项目实战》。
+
+
+
 ## 三、其他值得关注的命令行工具
 
 除了 Claude Code，还有一些其他的命令行工具也值得了解。
diff --git a/Vibe Coding 零基础教程/10 编程工具/工具实战/GitHub Copilot 云端 AI 自动开发实战.md b/Vibe Coding 零基础教程/10 编程工具/工具实战/GitHub Copilot 云端 AI 自动开发实战.md
new file mode 100644
index 0000000..80be98f
--- /dev/null
+++ b/Vibe Coding 零基础教程/10 编程工具/工具实战/GitHub Copilot 云端 AI 自动开发实战.md	
@@ -0,0 +1,619 @@
+# GitHub Copilot 云端 AI 自动开发实战
+
+本文介绍如何利用 GitHub Copilot Coding Agent 在云端自动完成从需求分析到全栈开发、测试、部署上线、代码审查、Issue 处理、定时任务的全流程。全程不需要打开 IDE，在 GitHub 网页版即可完成。
+
+大家好，我是程序员鱼皮。
+
+前两天，我受邀参加了微软 AI Tour 大会，还在会上做了一场演讲。
+
+主题是「带你看 GitHub Copilot 的另一面：智能体装机，不只在 IDE」。这名字是大会方包装的，说实话我自己看着都一头雾水。。。
+
+![](https://pic.yupi.icu/1/image-20260422215325862.png)
+
+简单来说就是：**手把手教大家如何用 GitHub + Copilot，打造属于自己的 AI 智能体。**
+
+真没想到有这么多人来听分享，看来大家对这个选题确实很感兴趣。
+
+![](https://pic.yupi.icu/1/mmexport1776762414702_%E5%89%AF%E6%9C%AC.jpg)
+
+这篇文章就是演讲的完整文字版，希望能给大家一些启发和帮助。
+
+⭐️ 视频版：https://bilibili.com/video/BV1aFoyBnE4D
+
+
+
+## 背景和思考
+
+最近「一人公司」和「龙虾」的概念特别火，很多人都在玩 AI 智能体，比如 OpenClaw 养虾、Hermes Agent 养马什么的。
+
+现在的 AI 智能体不只是聊天，能持续干活、越用越懂你、随处使用。
+
+但是，你有没有想过，扒开所有花哨的包装，**一个 AI 智能体的本质到底是什么？**
+
+我觉得是四样东西：**角色、记忆、技能、工作空间**。
+
+没有工作空间，角色无处定义、记忆无处存储、技能无处挂载。
+
+![](https://pic.yupi.icu/1/image-20260423162031832.png)
+
+除了自己的电脑之外，还有其他的工作空间吗？
+
+作为一名开源作者，我本能地想到 GitHub 这个全球最大的代码托管平台，它的仓库天然就是 **持久化的文件空间**；而 GitHub Copilot 又提供了强大的 AI 代理执行能力，还支持网页版使用。
+
+那干脆把 GitHub 仓库当成养 AI 智能体的「个人电脑」，不就可以了么？
+
+所以下面我要手把手教大家：**怎么用 GitHub 打造一只你自己的 AI 小龙虾。**
+
+我把它称为「给虾」：
+
+![](https://pic.yupi.icu/1/image-20260423162442682.png)
+
+接下来我会一步步演示，如何利用 GitHub 搭建一个超级智能体，不需要打开 IDE，也能完成从需求分析到全栈开发、测试、文档生成、部署上线、SEO 优化、代码审查、自动处理 Issues、定时任务的全流程。
+
+
+
+## 1、初始化 Agent
+
+打开 GitHub 网页版，你会发现 GitHub Copilot 的对话入口随处可见，已经融入到 GitHub 的各个角落了。
+
+![](https://pic.yupi.icu/1/1774936826720-d8fb03a7-3f53-4674-8d37-d1abbd873565.png)
+
+我们先新建一个叫 `github-claw` 的仓库，作为 AI 智能体的工作空间。
+
+创建仓库时就可以填入初始化的提示词，这其实就是我们给这只 AI 小龙虾注入灵魂的过程。
+
+![](https://pic.yupi.icu/1/1774936859388-895eba7a-1a5a-45d8-b510-b2c2b5402efa.png)
+
+在开始之前，建议先从右上角进入 GitHub Copilot 的设置，开启联网搜索功能，这样 AI 能获取更新的信息。
+
+![](https://pic.yupi.icu/1/image-20260423162530594.png)
+
+然后我们填入初始化 Agent 的提示词。这段提示词定义了龙虾的角色、行为规则和记忆机制：
+
+```markdown
+你是这个仓库中长期驻留的个人 AI 助手与主要代理，像 OpenClaw 一样，不只是回答问题，还要持续做事、积累记忆、维护角色，并让这个仓库逐渐成为可长期演化的个人 AI 空间。
+
+请先参考 OpenClaw 官方文档，理解它作为 "能做事的个人 AI 助手" 的定位，以及角色、记忆、技能和工作空间的思路：https://docs.openclaw.ai
+
+然后把这个仓库初始化为适合 GitHub Copilot 网页版长期使用的个人 AI 工作空间，让我以后在新的 Copilot 对话里，也能继续沿用同一个角色、记忆和工作方式。
+
+请先创建并提交一个简洁、可长期复用的 AGENTS.md，在里面定义：
+- 你是谁
+- 你如何在这个仓库中工作
+- 你如何管理任务与记忆
+- 你每次完成任务后要做的收尾动作
+
+要求：
+- 把仓库当作持久化的文件与记忆空间，可保存任何有用文件
+- 用文件作为记忆的真实来源，不把重要信息只留在当前对话里
+- 将长期记忆与每日/临时记录区分开
+- 规则简洁、实用、可扩展，不要过度设计
+
+如果确有必要，可以补充最少量的 MEMORY.md、memory/ 或 SOUL.md，但请保持轻量，并以 AGENTS.md 为核心。
+```
+
+可以看到，Copilot 自动初始化了一个工作空间，还自动集成了 GitHub 的 MCP 工具：
+
+![](https://pic.yupi.icu/1/1774937227476-47848347-e4ba-4d4f-855f-b5921ea4eb59.png)
+
+任务完成后，它会自动创建一个 PR。我们人工检查一下，没问题就合并。
+
+![](https://pic.yupi.icu/1/1774937109998-7080c68f-b049-4fe9-9c4d-860a0ddf2484.png)
+
+对了，如果你发现有「网络连接失败」的提示，是因为 Copilot coding agent 默认有防火墙限制。需要到仓库设置里关闭防火墙：
+
+![](https://pic.yupi.icu/1/1774937329485-d4936387-abd0-464a-b808-a20f8cf6167d.png)
+
+Agent 初始化完成后，你可以跟它打个招呼，它会通过文档获取到记忆：
+
+![](https://pic.yupi.icu/1/image-20260423162709389.png)
+
+
+
+## 2、开发上线网站
+
+Agent 初始化好了，接下来让它干活。
+
+让它帮我的开源 AI 知识库项目 `ai-guide` 开发一个高颜值的导航官网，提示词如下：
+
+```markdown
+请为我开源的 AI 知识库项目（ai-guide）开发并部署一个高颜值的导航官网，突出项目介绍、精选内容、路线图、更新日志、增长趋势等，吸引更多人关注我的开源仓库。必须使用 UI-UX-PRO-MAX 技能全面优化前端界面，完成后直接给出可上线访问的地址。必须自主完成任务
+```
+
+在仓库的 Agents 面板中，可以直接发起新的对话任务。
+
+Copilot 会通过 GitHub MCP 获取我的开源项目信息，然后自动开始开发网站：
+
+![](https://pic.yupi.icu/1/1774937381654-bde29eb7-3d0f-4869-a065-f7ddb09950dd.png)
+
+生成代码后，它还会自动执行代码检查，发现问题就自主修复：
+
+![](https://pic.yupi.icu/1/1774937517424-6099472c-eb6c-4688-a02d-79b3ed37ca8e.png)
+
+接着它会自动创建 GitHub Actions 工作流，利用 GitHub Pages 完成静态网站的部署：
+
+![](https://pic.yupi.icu/1/1774937463974-f0f1cf86-da67-40ee-8cf9-abee42b66807.png)
+
+合并 PR 后，还需要进入仓库设置里的 GitHub Pages，选择「从工作流部署」（注意仓库必须是公开的）：
+
+![](https://pic.yupi.icu/1/1774937811979-b3b187f8-f23c-42b1-be46-363d9f9a2457.png)
+
+然后手动触发一次工作流，后续每次推送代码都会自动触发部署：
+
+> 注意检查 workflow 里的分支名配置，要和你仓库的默认分支一致（比如 `master` 还是 `main`）。
+
+![](https://pic.yupi.icu/1/1774937756522-a4fd8522-7891-4e7c-9825-67a6473dbb3a.png)
+
+成功部署后，页面就可以正常访问了：
+
+![](https://pic.yupi.icu/1/1774937885356-5d43735f-8c35-42de-a89e-b868612e5448.png)
+
+
+
+## 3、使用技能
+
+不过你可能注意到了，虽然我在提示词里提到了要用 `UI-UX-PRO-MAX` 技能，但 AI 并没有真正安装它。
+
+当我命令它用技能时，它反而自己造了一个，这就不对了。
+
+![](https://pic.yupi.icu/1/1774937618640-576f8005-f62f-44f4-9483-e1734d8555cd.png)
+
+所以我们需要新开一个对话，通过提示词教会 AI 如何正确发现、安装和使用技能：
+
+```markdown
+请优化当前仓库的工作流与 AGENTS.md，让这个仓库中的主要 AI 代理具备稳定的技能发现、安装和使用机制。
+
+明确约定如下：
+- 项目级技能统一保存在 .agents/skills/
+- 每个技能使用独立目录，例如 .agents/skills/<skill-name>/
+- 技能的主入口文件为 SKILL.md
+- 如果技能包含脚本、模板或资源文件，也与 SKILL.md 放在同一技能目录下
+
+请在 AGENTS.md 中加入简洁、可执行的规则，使代理在后续工作中遵循以下流程：
+1. 接到任务后，先检查本地 .agents/skills/ 中是否已有可复用技能
+2. 如果本地没有合适技能，再自动到 GitHub 开源仓库和 Skills.sh 搜索相关技能
+3. 优先选择来源清晰、结构规范、说明完整、风险较低的技能
+4. 安装技能时，将其保存到 .agents/skills/<skill-name>/
+5. 安装后更新必要说明，使后续对话能够直接复用这些技能
+6. 如果找不到合适技能，再自行完成任务，但优先沉淀成可复用技能
+7. 避免重复安装相同技能，并尽量保持技能目录整洁、命名清晰、可维护
+```
+
+AI 顺利完成了任务，制定了技能标准：
+
+![](https://pic.yupi.icu/1/1774937972667-4d367cc1-d71d-43fe-ae68-3431b6d2108a.png)
+
+搞定了技能规范，接下来让 AI 正确安装并使用 `UI-UX-PRO-MAX` 技能来优化网站：
+
+```markdown
+帮我废弃掉原来错误的 UI-UX-PRO-MAX 技能，安装正确的 UI-UX-PRO-MAX 技能，并利用这个技能优化之前的 ai-guide 导航网站
+```
+
+![](https://pic.yupi.icu/1/1774938123134-4f172cad-2ba2-402e-82e6-625db01ca36b.png)
+
+这次成功了！AI 智能体从 GitHub 上正确复制了技能目录，并用技能优化了网站的 UI：
+
+![](https://pic.yupi.icu/1/1774938261001-a8f8d0ea-313a-4782-bb5c-bd049d535b6d.png)
+
+页面移除了多余的 Emoji，看起来更专业了：
+
+![](https://pic.yupi.icu/1/1774938307530-07362fac-fdd8-4e2f-9c72-0a1319022029.png)
+
+更重要的是，它还更新了 `AGENTS.md` 工作流、记忆和任务文件，实现了 AI 智能体的进化，之后它就能自己发现和使用技能了：
+
+![](https://pic.yupi.icu/1/1774938201747-77528d03-8fbc-4ef0-9221-160f06ae49b2.png)
+
+
+
+## 4、文档生成
+
+文档是开源项目的牌面，我们让 AI 帮忙生成一份图文并茂的项目介绍文档 README.md。
+
+这里有个小技巧，先人工挑选一个靠谱的 AI 生图技能，然后到 [鱼皮 AI 导航](https://ai.codefather.cn/) 上找一个你喜欢的绘图风格提示词模板，一起提供给 AI 参考。
+
+![](https://pic.yupi.icu/1/1774938362506-65f5400c-e58c-49e0-a717-5f1df6306c65.png)
+
+给 AI 的提示词：
+
+```markdown
+请先阅读当前仓库中的 ai-guide 导航网站，并为它生成一份高质量的 README.md 项目介绍文档，同时配套生成几张帮助理解和宣传网站的动漫风格图片，保存并在 README 中引用。
+
+请先安装并使用这个 AI 生图技能：npx skills add https://github.com/inferen-sh/skills --skill ai-image-generation。我可以提供 Gemini NanoBanana 的 API Key，请安全使用，不要写入仓库。
+
+AI 生图的风格参考下面的提示词模板：@已经复制的模板
+```
+
+AI 完成任务后会请求一个生图 API Key，我们到 Google AI Studio 上获取后发给 AI。它会注重安全性，仅临时使用这个密钥：
+
+![](https://pic.yupi.icu/1/1774938470660-ee788099-bace-4a0b-8f2b-326de0caf773.png)
+
+AI 智能体成功调用技能，生成了图文并茂的文档：
+
+![](https://pic.yupi.icu/1/1774938669310-fbbb62dd-a10d-4ef7-8ade-4ae3630f33e8.png)
+
+不过这次它误改了网站首页的文件。没关系，通过 PR 我们发现了这个问题，不合并就行，再让 AI 自主修复。
+
+这里也提醒大家：**虽然 AI 写代码能力很强了，但代码审查依然很重要。**
+
+![](https://pic.yupi.icu/1/1774938796668-8b82900c-1f40-44f7-89d3-e4f03af3cea7.png)
+
+
+
+## 5、SEO 优化
+
+开源项目上线后，想把它推广出去，需要做好 SEO 搜索引擎优化，让用户能在搜索引擎上搜索到你的网站。
+
+我们用一个专业的 SEO 技能来优化网站：
+
+```markdown
+请先阅读当前仓库中的 ai-guide 导航网站，并对它进行一轮高质量的 SEO 优化，直接完善站点的标题、描述、结构化信息、页面语义、链接结构和可索引性。
+
+做法上，请先安装并使用这个 SEO 技能：npx skills add https://github.com/coreyhaines31/marketingskills --skill seo-audit，然后把优化结果直接落实到项目代码中。
+```
+
+GitHub Copilot 整合了 Claude 等多个模型，可以直接在云端启动不同的 AI 来完成任务：
+
+![](https://pic.yupi.icu/1/1774938911290-462333f6-8107-485d-ae36-f1417eff0cc0.png)
+
+直接在网页端爽用 Claude 模型：
+
+![](https://pic.yupi.icu/1/1774938853796-04e68bed-2f7d-42cb-9206-0c237f26f288.png)
+
+很快 AI 就完成了 SEO 优化，网站更容易被搜索引擎收录了：
+
+![](https://pic.yupi.icu/1/1774939165853-dc11c5a9-ee7a-4462-8d24-3fd3b4947ebe.png)
+
+效果如图，网页上增加了一堆搜索关键词：
+
+![](https://pic.yupi.icu/1/1774939208320-445dfdcb-c527-49bf-acf7-e24571e42584.png)
+
+可以看出，我们的 AI 智能体已经能够熟练运用各种技能了。之后你再新开一个对话，就可以直接使用已经安装好的技能，把 GitHub 当成安全隔离的「电脑空间」来用。
+
+
+
+## 6、开发前后端全栈项目
+
+既然 GitHub 提供了完整的工作空间，那也可以用来开发包含后端的全栈项目。
+
+比如输入下面的提示词，让 AI 帮我开发个《多媒体处理平台》：
+
+```markdown
+在当前仓库内新开发一个完整可运行的《多媒体处理平台》前后端项目：
+- 前端使用 Vue 实现多页面，支持图片、音频和视频的压缩与格式转换
+- 后端使用 Python + SQLite + FFmpeg 等
+
+请自主完成项目的前后端开发、联调、依赖配置、示例数据、必要文档和本地运行方式，并主动进行测试验证，确保图片、音频和视频的压缩与格式转换流程都能实际可用。
+
+除非确实必要，否则不要中途停下来向我确认，直接持续推进到可运行状态。
+```
+
+AI 会自己完成环境安装、前后端开发、自动化测试、文档生成，全流程一条龙：
+
+![](https://pic.yupi.icu/1/1774939363314-a5d0a2ae-6cc8-43f2-b7d2-85e8a491cfe4.png)
+
+注意，这些全部都是在云端执行的。哪怕你把网页、网络甚至电脑都关了，也不影响它继续工作。
+
+![](https://pic.yupi.icu/1/1774939462978-9bc438e5-22d2-4d30-9d5b-3d8dd24bfa22.png)
+
+
+
+## 7、测试验证
+
+涉及后端的项目还是得好好测试一下。有 2 种方式可以访问和测试。
+
+
+
+### 本地接管测试
+
+开发完成后，你可以在 AI 工作的对话框中点击「Open in VS Code」，或者用 Copilot CLI 在本地接管项目：
+
+![](https://pic.yupi.icu/1/image-20260423163857167.png)
+
+VS Code 接管项目后，会自动克隆仓库到本地并打开。
+
+然后你可以让 AI 帮你运行项目：
+
+```markdown
+帮我运行这个项目的前后端
+```
+
+它会自动创建 Python 虚拟环境，关键步骤会找你确认（比如安装依赖和执行命令），非常安全：
+
+![](https://pic.yupi.icu/1/1774939577513-adc4908e-bd05-43a4-834d-efad1f629026.png)
+
+然后人工打开浏览器测试，有问题再让 AI 修复就好：
+
+![](https://pic.yupi.icu/1/1774939621027-32a61479-57ec-4022-b090-a5fba6d92a5b.png)
+
+
+
+### 在线运行测试
+
+如果不想开本地 IDE，还可以用 GitHub Codespaces。
+
+Codespaces 是 GitHub 提供的云端开发环境，可以在浏览器里直接编辑代码、运行项目，体验和本地 VS Code 几乎一样。
+
+![](https://pic.yupi.icu/1/image-20260423163948284.png)
+
+需要先让 AI 帮忙创建 Codespaces 所需的配置，这样创建环境后就会自动完成初始化并运行项目：
+
+```markdown
+请继续为这个项目补全 GitHub Codespaces 开发环境配置，创建 .devcontainer/ 相关文件，使其适配这个前后端项目，并确保在创建 Codespace 后能够自动安装前后端依赖、安装 FFmpeg、初始化必要环境、自动启动 Vue 前端与 Python 后端，并正确转发访问端口。
+```
+
+![](https://pic.yupi.icu/1/1774939729545-f819f0c7-1e67-45bf-bb74-2716aa60f694.png)
+
+AI 创建了所需的配置文件：
+
+![](https://pic.yupi.icu/1/1774939782308-e572175e-b55e-4934-8273-00e617db2cef.png)
+
+然后在 GitHub 上创建 Codespace：
+
+![](https://pic.yupi.icu/1/image-20260423164046377.png)
+
+创建完成后，正常情况下可以直接访问前端和后端（注意前端请求后端的地址可能需要调整）：
+
+![](https://pic.yupi.icu/1/1774939972660-85faf67a-ec86-4bb4-be10-a533fe2432de.png)
+
+如果访问不了，也可以进入 Codespace 的终端手动执行启动脚本（注意脚本的执行路径要正确）：
+
+![](https://pic.yupi.icu/1/1774939912870-37b0f3dc-354b-4aef-ac68-58bc21e85513.png)
+
+你看，这个操作界面是不是和本地的 VS Code 一样？而且还能直接在网页版里使用 Copilot。
+
+
+
+## 8、代码审查
+
+代码审查是保障代码质量的关键环节。GitHub Copilot 提供了自动和手动两种审查方式。
+
+
+
+### 自动代码审查
+
+Copilot coding agent 开发的代码，本身就会自动执行一轮代码审查：
+
+![](https://pic.yupi.icu/1/1774921510223-3b174e66-582c-4a50-a663-a686d4d0cefb.png)
+
+同时还会自动执行安全检测：
+
+![](https://pic.yupi.icu/1/1774921537750-a468dece-3396-4d8c-8753-06b0fbb61054.png)
+
+此外，你还可以在仓库设置中开启对所有 PR 的自动审查。
+
+![](https://pic.yupi.icu/1/1774925532564-80308560-a96c-41b8-9a02-80a21fcda515.png)
+
+把 Copilot 当成你的「同事」就好，只要把它加为 Reviewer，就会自动触发审查：
+
+![](https://pic.yupi.icu/1/1774925617582-16064bd0-af9e-4684-ae16-0acc54570b3d.png)
+
+审查结果还支持快捷修复，你可以根据它的建议直接采纳修改，一键提交。也可以通过自定义指令来调整审查的侧重点：
+
+![](https://pic.yupi.icu/1/1774940063359-5b4cc05e-d016-4c0c-83df-ab3b95ca35cf.png)
+
+
+
+### 手动代码审查
+
+把 GitHub Copilot 当成你的同事，只要在 PR 中把它设置为 Reviewers，就会触发代码审查：
+
+![](https://pic.yupi.icu/1/1774940168717-5cae3ea3-3868-4bf1-900c-e98bdfeb1373.png)
+
+你也可以在 PR 的评论里直接 `@copilot`，比如让它把端口号恢复成原样。
+
+这种方式更适合让 Copilot 根据审查意见直接改代码、修复 Bug：
+
+![](https://pic.yupi.icu/1/1774940212269-3c0f640b-b461-4992-8a8b-4355a5ae0b51.png)
+
+
+
+## 9、处理 Issues
+
+维护开源项目的过程中，肯定少不了处理用户提的 Issues（问题），这也是很花时间的事情，可以让 AI 智能体自动完成。
+
+
+
+### 手动处理 Issues
+
+GitHub Copilot 官方支持让 Copilot coding agent 接手 Issue、自动创建 PR 并修复。
+
+操作很简单，进入一个 Issue，把它分配给 Copilot 就行：
+
+![](https://pic.yupi.icu/1/1774940337943-ba0b6ed8-872f-4745-b934-64d4f0fbb14b.png)
+
+Copilot 会自动创建一个 PR：
+
+![](https://pic.yupi.icu/1/1774940372286-4be19b2d-2d7d-4860-afef-4f3314321c48.png)
+
+同时创建一个工作会话来分析和修复这个 Issue：
+
+![](https://pic.yupi.icu/1/1774940395478-6e05f7f7-f5ea-4c9b-bbf3-912bfe585612.png)
+
+
+
+### 自动回复 Issues + 自动修复 Bug
+
+还可以让 AI 全自动帮我们回复 Issues 并修复 Bug。
+
+利用 GitHub Actions 的自动化能力，我们只需要补一个「自动派单」的工作流就行。
+
+给 AI 一段提示词：
+
+```markdown
+为当前仓库创建一套 Issue 自动化处理工作流：当有新的 Issue 创建时，先自动回复一条简洁的确认与补充信息提示；如果该 Issue 被识别为 bug（比如带有 bug 标签或满足明确的 bug 条件），则自动将该 Issue 分配给 GitHub Copilot coding agent 处理，并让 Copilot 后续自动开 PR 修复。
+
+请直接完成所需的 GitHub Actions 工作流、必要配置和说明，优先采用简洁、稳定的实现方式。
+```
+
+![](https://pic.yupi.icu/1/1774940470510-d1d080c2-1b43-40f8-a4c8-da6b99baceba.png)
+
+不过需要注意的是，自动生成的脚本可能会有问题，比如只回复了却没有真正分配给 Copilot 去修复：
+
+![](https://pic.yupi.icu/1/1774940518174-d623cbc5-ae7a-4258-babc-34fb7d42d6db.png)
+
+这时候可以再让 AI 根据官方文档修复。核心要注意几点：
+
+```markdown
+请修复当前仓库中 Issue 自动化工作流的 Copilot 分配逻辑。现在工作流虽然会自动评论"已分配给 Copilot"，但实际上并没有真正成功分配。
+
+请参考 GitHub 官方对 Copilot coding agent 的 Issue API 分配方式，改成正确可用的实现：使用正确的 Copilot assignee copilot-swe-agent[bot]、必要的 agent_assignment 参数，并且只有在真实确认分配成功后才发表评论；如果分配失败，也要给出明确、真实的失败提示，不要误报成功。
+
+另外，请顺手优化这个工作流的结构：opened 事件只负责自动回复，labeled + bug 事件只负责分配给 Copilot，保证整体逻辑更清晰稳定。
+```
+
+![](https://pic.yupi.icu/1/1774940559765-faff3598-81bb-4a7d-a4fd-e9a0024644a8.png)
+
+而且这里需要用户级别的 Personal Access Token（PAT），不能用默认的 GITHUB_TOKEN。
+
+先到 GitHub 申请 PAT，开通相应的仓库权限：
+
+![](https://pic.yupi.icu/1/1774940613065-a66b1fc9-09cf-47ad-ad5e-57dd4618490c.png)
+
+然后把密钥存放到仓库的 Secrets 中，在工作流脚本中通过 `secrets.COPILOT_ASSIGN_TOKEN` 引用：
+
+![](https://pic.yupi.icu/1/1774940688587-7e6f019d-9df1-4af5-b808-233ee3ec15ee.png)
+
+引用 token 的示例代码如下：
+
+```yaml
+  - name: Assign issue to Copilot coding agent
+    uses: actions/github-script@v7
+    with:
+      github-token: ${{ secrets.COPILOT_ASSIGN_TOKEN }}
+      script: |
+```
+
+然后我只要提一个打了 `bug`  标签的 Issue，就会触发 GitHub Actions，自动把 Bug 分配给 AI 处理：
+
+![](https://pic.yupi.icu/1/1774940722288-25f2ee1e-d20d-46c5-869a-bee8fcb69d00.png)
+
+
+
+## 10、定时任务
+
+OpenClaw 的一大亮点是可以执行定时任务，那咱们的 “给虾” 也要有！
+
+但是 GitHub 仓库不是一台常驻运行的电脑，怎么做定时任务呢？
+
+我有个主意，利用 GitHub Actions 的 `schedule` 触发器，就能给 AI 智能体补上「定时触发」的能力。
+
+比如让它每天自动推送最新的 AI 科技热点：
+
+```markdown
+为当前仓库创建一个可长期使用的定时任务工作流，利用 GitHub Actions 模拟 OpenClaw 风格的定时触发能力。
+
+目标：每天北京时间中午 13 点，自动收集并总结本周最新的 AI 科技热点，并以 "推送日报" 的形式发送给我。
+
+优先采用简单稳定的实现方式：默认先推送到 GitHub Issue；如果仓库中已有邮箱等其他 webhook 配置，也可以优先复用。
+```
+
+当然，你还可以选择对接更多第三方渠道，比如邮件、Telegram 等：
+
+![](https://pic.yupi.icu/1/1774940782165-e1ce8ae7-2ab1-4982-a48c-1e9c5791db3b.png)
+
+任务完成，创建了定时触发的 GitHub 工作流：
+
+![](https://pic.yupi.icu/1/1774940824191-a0b449e3-d16f-4784-9894-2b2835361853.png)
+
+之后，每天会自动生成一份 AI 科技日报：
+
+![](https://pic.yupi.icu/1/1774940877163-c8368494-3a99-45d4-a98b-7cfb7ed6e12a.png)
+
+注意，GitHub Actions 的 schedule 定时触发会有延迟，官方文档也说明了在高负载时段（尤其是每小时开头）可能延迟甚至丢弃任务，所以不适合对执行时间要求精准的场景。
+
+
+
+## 11、封装 AI 智能体
+
+到这里，我们的 AI 小龙虾已经养得很肥了。它有了角色、记忆、技能、自动化流水线。不妨把它封装起来，分享给别人用。
+
+于是，我给 Copilot 这段提示词，让它帮我封装成一个 Agent Skill：
+
+```markdown
+请把当前仓库里已经实现的所有 "把 GitHub Copilot 变成小龙虾" 的能力，系统化封装成一个可复用的 agent skill，名称为 github-claw，并放到仓库的 skills/github-claw/ 目录下。
+
+在开始之前，请先参考 anthropics/skills 仓库中的 skill-creator 结构与规范，按规范创建完整技能文件，而不是只写一个简单的 SKILL.md：
+https://github.com/anthropics/skills/tree/main/skills/skill-creator
+
+这个 github-claw skill 的目标是：让其他用户只要安装这个技能，就能尽可能快速地把 GitHub Copilot 仓库工作流变成一个 OpenClaw 风格的小龙虾系统，具备并串联以下能力：
+- 角色与人格
+- 文件化记忆与长期上下文
+- 技能发现、安装与管理
+- 定时任务 / GitHub Actions 自动化
+- Issue 自动回复与自动分配给 Copilot
+- PR 审查与自动化工作流
+- 编码开发、部署、网站生成与项目推进
+```
+
+![](https://pic.yupi.icu/1/1774941001296-f6cfe046-91a8-477f-814e-944c4ce5ca10.png)
+
+封装好的 `github-claw` 技能被单独放到了一个干净的分支：
+
+![](https://pic.yupi.icu/1/1774941046143-f9f04ebf-6c68-41f1-b037-6f9b6f50cae2.png)
+
+这样一来，以后任何人只要新建一个 GitHub 仓库，安装上这个技能，就能立刻拥有一只自己的 AI 小龙虾了。
+
+> GitHub Claw 项目开源：https://github.com/liyupi/github-claw
+
+![](https://pic.yupi.icu/1/1774941138078-6a086446-9193-4b43-9847-9232401f9854.png)
+
+
+
+## 总结
+
+至此，我们全程没有打开 IDE，利用 GitHub 网页版就打造了自己的 AI 智能体。
+
+你可以让它帮你完成从需求分析到全栈开发、测试、文档、部署上线、SEO 优化、代码审查、Issue 自动处理、定时任务的全流程。
+
+而且因为 GitHub Copilot 深度融合在网页端，以上所有任务都可以通过手机打开 GitHub 网页或 GitHub Mobile App 完成，随时随地使用。
+
+![](https://pic.yupi.icu/1/image-20260423165139146.png)
+
+Copilot 的优势在于：
+
+1）全程云端执行：Copilot coding agent 在 GitHub Actions 支持的临时环境中独立工作，非常安全。你可以关掉网页甚至关机，AI 会继续干活。
+
+2）端到端交付能力：GitHub Copilot 能够贯穿整个开发生命周期，从写代码到 PR 审查到部署，全部在 GitHub 生态内闭环完成。
+
+3）多模型灵活选择：GitHub 提供了多个模型供选择，可以根据不同任务类型适配最合适的模型，节省成本。
+
+![](https://pic.yupi.icu/1/image-20260423165247440.png)
+
+
+
+## GitHub Copilot 更多能力
+
+除了今天演示的核心流程，GitHub Copilot 还有很多值得探索的能力：
+
+1）Coding Agent MCP 配置：在仓库设置中可以配置 Copilot 的权限、工具和 MCP Server（比如接入 Context7、Firecrawl 等 MCP），扩展 Copilot 的外部数据获取和操作能力。
+
+2）GitHub 内置 Memory：Copilot 可以自动存储它在仓库工作中推断出的有用信息，形成持久化的仓库级记忆。后续它在这个仓库里工作时会自动调用这些记忆，效果越用越好。目前处于 Public Preview 阶段。
+
+3）Copilot Spaces：一种上下文共享空间，你可以把代码、文档、设计稿等多种资源聚合到一个 Space 里，让 Copilot 在回答和工作时始终基于正确的上下文，适合团队协作场景。
+
+4）GitHub Spark：通过自然语言描述你的想法，Spark 可以秒出全栈 Web 应用原型，支持实时预览和一键部署到 Azure，不需要写代码。还可以从 Spark 创建 GitHub 仓库，双向同步。
+
+5）GitHub Copilot CLI：这是一个独立的命令行 AI 工具，可以阅读代码、编辑文件、执行命令、创建 PR，还能把任务委派给专门的 Agent。支持远程会话恢复，在任何终端上都能接着干。
+
+除了前面主要展示的 Copilot 网页端，桌面端的 GitHub Copilot（VS Code 等 IDE 插件版本）也非常好用，能灵活切换多个大模型，还集成了网络搜索等各种主流工具，支持 MCP 和 Skills，平时我也经常用它带大家开发完整项目。
+
+比如我的 AI 热点监控工具项目，就是完全利用 GitHub Copilot 在 IDE 中开发出来的。
+
+![](https://pic.yupi.icu/1/image-20260423165402802.png)
+
+如果你想系统学习 GitHub Copilot 的使用方法，可以阅读本教程编程工具板块中的《AI IDE 插件》和同板块「工具实战」中的《VSCode + GitHub Copilot：微软全家桶的 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 零基础教程/20 项目实战/00 Vibe Coding 项目实战导读.md b/Vibe Coding 零基础教程/20 项目实战/00 Vibe Coding 项目实战导读.md
index 3ad0cb2..a623830 100644
--- a/Vibe Coding 零基础教程/20 项目实战/00 Vibe Coding 项目实战导读.md	
+++ b/Vibe Coding 零基础教程/20 项目实战/00 Vibe Coding 项目实战导读.md	
@@ -65,6 +65,8 @@
 
 对于想深入学习的同学，可以在完成基础项目后，继续学习《企业项目开发流程》，了解真实的商业项目是如何开发的。或者学习 [鱼皮的原创项目实战教程](https://www.codefather.cn/post/1797431216467001345)，跟着保姆级视频和图文教程做出完整的企业级项目。比如 [AI 万能视频下载总结器](https://www.codefather.cn/course/2027618983506640897)（基于 Cursor，含 Stripe 支付和 SEO/GEO 优化）、[AI 热点监控工具](https://www.codefather.cn/course/2026625439052627970)（基于 GitHub Copilot）和 [GitHub 文档翻译工具](https://www.codefather.cn/course/2014303010343092226)（基于 Cursor）都是很好的 Vibe Coding 实战项目，代码完全开源，零基础也能跟着做出来。
 
+此外，还有用 Cursor 开发的《程序员人格测试 CBTI》（纯前端创意应用）、用 Codex + GPT-5.5 开发的《AI 开源项目学习网站》（全栈 AI 应用）、用 Claude Code + DeepSeek V4 开发的《AI 提肛助手》（前端 AI 应用）等更多有趣的实战项目，涵盖不同的 AI 编程工具和项目类型。
+
 
 
 ## 四、学完这个板块，你能收获什么？
diff --git a/Vibe Coding 零基础教程/20 项目实战/鱼皮的原创项目/AI 创意应用 - 程序员人格测试 CBTI 项目.md b/Vibe Coding 零基础教程/20 项目实战/鱼皮的原创项目/AI 创意应用 - 程序员人格测试 CBTI 项目.md
new file mode 100644
index 0000000..0752b88
--- /dev/null
+++ b/Vibe Coding 零基础教程/20 项目实战/鱼皮的原创项目/AI 创意应用 - 程序员人格测试 CBTI 项目.md	
@@ -0,0 +1,197 @@
+# AI 创意应用 - 程序员人格测试 CBTI 项目
+
+本项目是一个程序员专属的人格测试网站 CBTI（Coder Behavior Type Indicator），用 30 道编程相关的趣味题目测出你的编程人格类型。全程使用 Cursor + Claude 进行 Vibe Coding，1 小时内完成开发上线。
+
+在线体验：https://cbti.codefather.cn
+
+项目代码免费开源：https://github.com/liyupi/cbti-test
+
+大家好，我是程序员鱼皮。
+
+大家应该听说过 MBTI 人格测试吧？
+
+没想到，这几天，有个模仿 MBTI 测试的网站突然火了，叫做「SBTI」。
+
+也是用 30 道选择题来测试出你的人格类型，只不过，结果会更抽象……
+
+比如我测试出来自己是「握草人」，可能是我还不够抽象？这个人格的解读我都读不懂……
+
+![](https://pic.yupi.icu/1/image-20260413134621011.png)
+
+我看完就想：握草？这个网站为啥能火啊？现在用 AI 编程做这种测试小网站还不简单？要不我也来一个？
+
+说干就干，于是我花了 1 个小时，用 AI 编程做出了程序员专属的 **CBTI（Coder Behavior Type Indicator）程序员行为类型测试**。
+
+👉🏻 在线体验：https://cbti.codefather.cn
+
+![](https://pic.yupi.icu/1/image-20260413135126605.png)
+
+用 30 道题测出你的编程人格，而且代码完全开源。
+
+👉🏻 开源地址：https://github.com/liyupi/cbti-test
+
+![](https://pic.yupi.icu/1/image-20260413135149352.png)
+
+
+
+## CBTI 是什么？
+
+首先郑重声明，CBTI 是一个有科学依据的正经测试，不是抽象整活的！
+
+我让 AI 深度分析了 MBTI 和 SBTI 的题库、计分逻辑，还有 MBTI 16personalities 的人格体系，在这个基础上设计了 CBTI 的维度模型。整套测试覆盖代码质量、Bug 处理、团队协作、技术驱动、AI 态度这 5 大方向，一共 15 个维度。
+
+随便给大家看几道题目感受一下：
+
+1）产品说「先上，后面优化」，你心想？
+
+- 后面是哪辈子？行吧先糊上去
+- 写个 TODO，虽然大概率会变成遗书
+- 写技术方案，排进迭代里
+
+![](https://pic.yupi.icu/1/image-20260413135743602.png)
+
+2）周五 5:59 群里弹消息，线上炸了。你？
+
+- 假装没看到，手机静音，人已消失
+- 先看看严重不严重
+- 秒回 “我看看”，打开监控面板
+
+![](https://pic.yupi.icu/1/image-20260413135805157.png)
+
+而且现在 AI 编程也很火嘛，我也与时俱进加了相关的题。比如 Cursor/Copilot 到期了公司不报销，你？
+
+- 到期就到期，手写也不是不行
+- 找找免费替代品
+- 秒续！求求再给我点 tokens！
+
+![](https://pic.yupi.icu/1/image-20260413135847877.png)
+
+我自己测出来是 HACK 野生黑客，座右铭是「又不是不能用.jpg」。个人觉得还挺准，毕竟在 AI 编程时代，我搞过很多 Vibe Coding 的小项目，确实是百无禁忌、能跑就行，做完一个就去搞下一个。
+
+![](https://pic.yupi.icu/1/image-20260413140345748.png)
+
+测试结果共有 28 种人格，命名全是跟编程相关的，比如什么 SUDO 万能管理员、NULL 空指针、CTRL-C 复制粘贴工程师、996 卷王之王、404 隐身人、VIBE 氛围程序员等等。另外还设计了一个隐藏人格 ☕ JAVA 咖啡因驱动开发者，能触发的朋友应该是有点儿东西的……
+
+![](https://pic.yupi.icu/1/image-20260413135603390.png)
+
+
+
+## 完整开发过程
+
+这个项目我只花了 1 个小时左右就上线了，全程 Vibe Coding，用 Cursor + Claude 完成。
+
+没有用什么复杂的方法论，也不需要什么 Harness Engineering，就是不断跟 AI 对话、提需求、给反馈。
+
+下面分享一下关键流程。
+
+**1、分析参考项目，提取产品精髓**
+
+给 AI 的初始提示词很重要。我先在网上找到了一份 SBTI 的完整题库和计分逻辑报告，连同 SBTI 官网、MBTI 16personalities 官网一起丢给 AI，让它深度分析这些测试的人格体系、计分方式和传播机制。
+
+并且给 CBTI 定了方向：面向编程，要有科学依据和实用价值，同时具备抽象整活和流量传播属性。
+
+![](https://pic.yupi.icu/1/image-20260413140817081.png)
+
+然后 AI 就直接完成了初始网站的开发和测试：
+
+![](https://pic.yupi.icu/1/image-20260413141043674.png)
+
+
+
+**2、内容反复迭代**
+
+AI 初版生成的人格代码都差不多，看着毫无辨识度，于是我让它全网搜索程序员相关的热梗，一遍遍重做人格体系。
+
+![](https://pic.yupi.icu/1/image-20260413141131319.png)
+
+这个阶段来来回回改了很多版，最后我把人格从最初十几种扩展到了 27 种，引入了 AI 编程这个新维度，题目内容也从正经八百改成了口语化、有共鸣的风格。
+
+![](https://pic.yupi.icu/1/image-20260413141241183.png)
+
+
+
+**3、UI 设计优化**
+
+一开始 AI 生成的主页像个 B 端管理后台，又丑又复杂。
+
+我直接跟它说主页尽量简洁，一句 Slogan 再加一个「开始测试」按钮就够了。
+
+![](https://pic.yupi.icu/1/image-20260413141547295.png)
+
+配色换成橙色系，再用 frontend-design 这个 Agent Skill 来优化整体视觉效果。答题页面也加了答题卡、进度条、快速跳题这些交互细节。
+
+![](https://pic.yupi.icu/1/image-20260413141630018.png)
+
+
+
+**4、人格图片制作**
+
+如果是以前，网站图片素材的制作绝对要花大把的时间。
+
+但现在利用 AI，这件事可以在几分钟内完成。
+
+我让 AI 参考 MBTI 官方网站那种低多边形风格的人物形象，生成给 Nano Banana 这个 AI 绘图工具使用的提示词。
+
+注意，这里有个小技巧，我不是让 AI 分别给 28 个角色都生成一段提示词，那样又费时又烧钱。而是分为 2 批，每批 14 个人物放在 **同一张图片** 里生成。这样只需要使用 2 段提示词，生成 2 张图就够了。
+
+![](https://pic.yupi.icu/1/image-20260413141753739.png)
+
+效果还不错吧：
+
+![](https://pic.yupi.icu/1/image-20260413142143210.png)
+
+然后让 AI 自己去理解这张完整的图片，写 Python 脚本来切割图片、压缩调整尺寸、移除空白背景等等，最后得到了 28 个角色图片。
+
+![](https://pic.yupi.icu/1/image-20260413142347871.png)
+
+
+
+**5、更多功能完善**
+
+确保题目内容和网站功能正常运行后，我还优化了很多网站的细节，加了分享文案、Canvas 渲染的分享海报、五维雷达图、隐藏人格彩蛋这些功能。
+
+![](https://pic.yupi.icu/1/image-20260413142811945.png)
+
+由于网站本身功能并不复杂，每个功能我都是无脑让 AI 生成，所以过程中也遇到了一些问题，比如分享海报一开始字太小、二维码没生成、后来又太大，调了好几轮才满意。
+
+![](https://pic.yupi.icu/1/image-20260413142903376.png)
+
+
+
+**6、部署上线和验证**
+
+由于网站不依赖后端，所以部署上线操作无比简单。
+
+我用了 EdgeOne Pages 这个 MCP，只需要跟 AI 对话，AI 会自动执行 Next.js 框架的 build 命令把代码导出为静态的 HTML 网页，然后部署网页到腾讯云 EdgeOne Pages 服务，1 分钟就完成了部署上线。
+
+![](https://pic.yupi.icu/1/image-20260413143449058.png)
+
+可以在腾讯云 EdgeOne Pages 控制台查看到已上线的项目，还可以自定义域名：
+
+![](https://pic.yupi.icu/1/image-20260413143532414.png)
+
+上线之后，我再让 AI 自主跑了一遍所有流程，确认上线后的功能也能正常使用，并且 30 道题能覆盖全部 28 种人格。
+
+大功告成！
+
+
+
+## 写在最后
+
+这个项目技术上其实没什么难度，就是一个纯前端静态网站，没有后端、没有数据库，核心算法也就是算分然后做向量距离匹配。
+
+现在有了 AI 编程，这种小项目真的人人都能做，1 个小时就能从一个想法变成一个可以分享给朋友的网站。如果你也有有趣的创意想法，不妨动手试试，说不定下一个爆款就是你做的呢！
+
+
+
+## 推荐资源
+
+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 零基础教程/20 项目实战/鱼皮的原创项目/Claude Code - AI 提肛助手项目实战.md b/Vibe Coding 零基础教程/20 项目实战/鱼皮的原创项目/Claude Code - AI 提肛助手项目实战.md
new file mode 100644
index 0000000..9ee9e84
--- /dev/null
+++ b/Vibe Coding 零基础教程/20 项目实战/鱼皮的原创项目/Claude Code - AI 提肛助手项目实战.md	
@@ -0,0 +1,482 @@
+# Claude Code - AI 提肛助手项目实战
+
+本项目是一个 AI 驱动的提肛运动助手网站，提供科学的分级训练课程、动画引导、语音播报，还支持摄像头姿态检测和 AI 纠正建议。全程使用 Claude Code + DeepSeek V4 开发。
+
+大家好，我是程序员鱼皮。
+
+唉，久坐不动可以说是程序员的通病。像我天天忙的要死，根本没时间运动，但又不甘心让身体就这样退化，怎么办呢？
+
+于是，我通过询问 AI，了解到了「提肛运动」。通过增强盆底肌肉力量、促进局部血液循环，有效预防痔疮、改善大小便失禁，并提升肛门及相关盆腔器官的健康功能。
+
+关键是这玩意随时随地都能做，太适合我了！
+
+![](https://pic.yupi.icu/1/ybzj.jpg)
+
+但我自己是个「运动白痴」，所以想到能不能通过 AI 编程，开发个「提肛助手」，帮助大家科学地进行盆底肌训练，傻子也能练对。
+
+安排！
+
+下面我将全程用 Claude Code + DeepSeek V4 来开发一个完整项目，从安装配置到开发测试，手把手带你走一遍。看完这篇，你能学会 Claude Code 的保姆级使用方法，感受 DeepSeek V4 的实际编程能力，还能 get 到不少 AI 编程的实用技巧。
+
+点个收藏，咱们开始~
+
+
+
+## 需求分析
+
+这个项目叫「提肛助手」tgang-helper，核心功能其实不复杂。
+
+1）提供科学的分级训练课程，区分男女和难度，涵盖快速收缩、持续收缩、阶梯收缩等多种动作类型。
+
+2）训练过程中要有动画引导节奏，包括呼吸圈动画和人体姿势示范动画，让用户一看就知道该怎么做。
+
+3）同时通过浏览器语音合成实时播报指令，让用户闭着眼睛也能跟练。
+
+4）还有一个亮点功能，就是支持开启摄像头进行体位校正。实时检测你的站姿、坐姿是否正确，比如有没有驼背、耸肩、身体歪斜，当检测到姿势问题时，让 AI 提供个性化的纠正建议。
+
+5）查看训练打卡日历和统计图表。
+
+![](https://pic.yupi.icu/1/image-20260429104714827.png)
+
+
+
+## 方案设计
+
+如果你完全没有任何技术基础，可以让 AI 帮你完成方案设计。
+
+但这里为了节省时间和 tokens，我直接告诉 AI 怎么做。
+
+虽然要做姿态检测功能，但是这个项目几乎是 **纯前端** 就能搞定！不需要复杂的后端。
+
+技术栈上，我选择 Next.js + TypeScript，姿态检测用 MediaPipe Pose（纯前端运行），AI 对话通过 Next.js 的 API Route 代理调用 DeepSeek V4 模型，动画用 CSS 动画 + Framer Motion。
+
+为什么不用 Python 后端？
+
+因为这个项目唯一需要服务端的地方就是代理一下 AI 接口调用，使用 Next.js 的 API Route 完全能搞定，没必要拆成前后端分离，越简单越好。
+
+![](https://pic.yupi.icu/1/tgang-helper-design.jpg)
+
+
+
+## 环境准备
+
+### 安装 Claude Code
+
+先简单介绍一下 Claude Code。它是 Anthropic 推出的 AI 编程工具，直接在终端里运行，你跟它聊天描述需求，它就能自主分析项目、写代码、跑命令、修 Bug，全程自主执行。
+
+除了基础的代码生成，还能使用工具和 Skills 技能包、连接 MCP 外部服务、用 Plugins 插件扩展能力，甚至搞多智能体协作，扩展性很强。
+
+![](https://pic.yupi.icu/1/image-20260429110454017.png)
+
+安装 Claude Code 很简单。
+
+首先确保你的电脑有 Node.js 环境和 npm 软件依赖安装工具，没有的话，直接到 [Node 官网](https://nodejs.org/en/download) 下载傻瓜式安装包就好：
+
+![](https://pic.yupi.icu/1/1777341714221-67b76f0e-c816-410b-adc0-e445074efc46.png)
+
+无论使用什么操作系统，都可以通过 npm，一行命令来安装 Claude Code：
+
+```bash
+npm install -g @anthropic-ai/claude-code
+```
+
+![](https://pic.yupi.icu/1/1777341807032-be0f1d99-4e97-4be6-80de-de7c32846d41.png)
+
+安装完成后，输入 `claude` 命令进入对话界面，首次需要登录才能正常使用：
+
+![](https://pic.yupi.icu/1/1777341971646-93bcacc7-143d-4f86-8d2a-bf17d288db9f.png)
+
+但估计很多同学没有 Anthropic 的国外订阅账号，所以我们要切换为国产模型。
+
+
+
+### 切换模型
+
+Claude Code 本身是支持切换模型的，你可以通过「修改环境变量」或「编辑配置文件」来对接其他大模型的 API。
+
+一般你使用哪家的大模型 API，直接看对应的官方文档，就能找到接入方法。
+
+比如 [DeepSeek 的 API 文档](https://api-docs.deepseek.com/zh-cn/guides/coding_agents) 里就有现成的接入方法：
+
+![](https://pic.yupi.icu/1/1777342329147-99094795-9da9-40b7-aa25-a566fc762c54.png)
+
+不过我更推荐用一个开源工具 **CC Switch**，能够可视化地管理 Claude Code、Codex、Gemini CLI 等 AI 编程工具的配置，一键切换不同的模型供应商。内置了 50 多个供应商预设，不用自己手动改配置文件。
+
+> 开源指路：https://github.com/farion1231/cc-switch
+
+按照官方中文文档，根据操作系统选择对应的安装方式：
+
+![](https://pic.yupi.icu/1/1777342571992-7b055f5f-3d27-4463-8247-4fe9bc315690.png)
+
+Mac 用户可以通过命令行安装：
+
+```bash
+brew tap farion1231/ccswitch
+brew install --cask cc-switch
+```
+
+![](https://pic.yupi.icu/1/1777342701813-0dc223c6-8c13-49ce-8434-aa00bfc6d08e.png)
+
+安装完成后，运行软件进入主界面，添加模型供应商：
+
+![](https://pic.yupi.icu/1/1777342816975-d7e89ce3-3b26-4237-a728-5478fbe86a47.png)
+
+选择 DeepSeek：
+
+![](https://pic.yupi.icu/1/1777342881212-d0591f6e-c88e-4912-8cf5-62b7f1bfac17.png)
+
+填写 API Key，需要从 [DeepSeek 开放平台](https://platform.deepseek.com) 获取。
+
+![](https://pic.yupi.icu/1/1777342981319-1e6c85a9-5063-42e2-bae9-0406886578d9.png)
+
+我这里把主模型设置为 DeepSeek-V4-Pro，相比 DeepSeek-V4-Flash 模型，Agent 能力和复杂推理更强。
+
+然后点右下角保存：
+
+![](https://pic.yupi.icu/1/1777343299981-c370c8ff-b24a-460a-891e-e08bc1efcf54.png)
+
+可以在上图中看到 Claude Code 的 JSON 配置文件，其实 CC Switch 就是帮你可视化地修改各 AI 工具的配置文件，省去手动编辑 JSON 的麻烦。
+
+最后，启用 DeepSeek 模型：
+
+![](https://pic.yupi.icu/1/1777343334412-73a61961-5d7e-4fbb-a0e0-691f5d867b48.png)
+
+然后重新进入 Claude Code，随便输入一句话，AI 能给出回复，说明切换模型成功：
+
+![](https://pic.yupi.icu/1/1777343427500-46c84648-4f92-4ed4-85ab-4af0b34f465e.png)
+
+
+
+### 安装扩展
+
+Claude Code 默认就有读写文件、跑终端命令、搜索代码这些基础能力，但要做好一个完整项目，光靠这些还不够。
+
+我们需要下面 3 个扩展：
+
+1. Frontend Design：前端美化技能，让生成的页面更有设计感
+2. Firecrawl：联网搜索和网页抓取，让 AI 能获取最新的技术信息
+3. Context7：查询最新的技术文档和 API 用法，减少 AI 瞎编的情况
+
+下面来依次安装。
+
+
+
+#### 1、安装 Frontend Design
+
+Frontend Design 是 Anthropic 官方的前端美化技能，可以让 AI 生成的页面更有设计感。
+
+在 Claude Code 中，先通过 `/plugin` 命令添加官方技能市场，相当于装了个技能商店：
+
+```bash
+/plugin marketplace add anthropics/skills
+```
+
+![](https://pic.yupi.icu/1/1777344066799-72c95f99-82bc-46ff-92f5-02cf6d21b1b9-20260429113524910.png)
+
+输入 `/plugins`，在 Discover 菜单栏中，选中 `example-skills` 并按回车，安装官方的示例技能合集：
+
+![](https://pic.yupi.icu/1/1777344221815-19f8cc7d-e608-4cf6-a8a9-05fa3dafab04.png)
+
+输入 `/reload-plugins` 重载一下插件：
+
+![](https://pic.yupi.icu/1/1777344303461-6af1d179-4328-4892-83b4-a48f1af3c32d.png)
+
+输入 `/skills` 查看已安装的技能，可以看到 `frontend-design` 已经就位了：
+
+![](https://pic.yupi.icu/1/1777344408094-9d8e06b5-a216-443e-a7ec-70dd78cb80d0.png)
+
+之后在对话框中输入 `/frontend-design` 就能主动触发这个技能，让 AI 美化前端页面。同时还自动装上了 `webapp-testing` 自动化测试技能，后面也用得上。
+
+
+
+#### 2、安装 Firecrawl
+
+Firecrawl 是联网搜索和网页抓取工具，让 AI 开发前先搜索最新技术信息。
+
+安装方式很简单，打开终端，输入一行命令：
+
+```bash
+npx -y firecrawl-cli@latest init --all --browser
+```
+
+![](https://pic.yupi.icu/1/1777258212308-8c83d23e-338e-4ec2-b1c0-05f54a22a36e-20260429113525121.png)
+
+执行后，会自动打开浏览器，要在弹出的页面中点击授权：
+
+![](https://pic.yupi.icu/1/1777258069152-2d7fdb02-64e2-440b-bcbd-6254b07fb74e-20260429113525154.png)
+
+安装完成后，会自动注册 12 个 Firecrawl 相关技能：
+
+![](https://pic.yupi.icu/1/1777258235867-0f6f08f5-4791-4b66-84b7-50936912540d-20260429113525186.png)
+
+在 Claude Code 的技能管理中，就能看到新添加的 Firecrawl 相关技能了：
+
+![](https://pic.yupi.icu/1/1777344739629-f15409cf-6a43-4f96-a9bd-be72f7c0f795.png)
+
+
+
+#### 3、安装 Context7
+
+Context7 是一个技术文档查询工具，让 AI 能获取到各种框架和库的最新官方文档，避免用过时的 API 写代码。
+
+先在终端输入一行命令来安装：
+
+```bash
+npx ctx7@latest setup
+```
+
+它会问是安装 MCP 服务还是 CLI + Skills，这里我选择 CLI + Skills。你会发现，现在越来越多工具已经从 MCP 转向 CLI + Skills 的方式了：
+
+![](https://pic.yupi.icu/1/1777258448310-41f86ec3-26e1-476e-aed5-4913c8116d21-20260429113525253.png)
+
+同样在弹出的网页中授权，不用自己获取和输入 API Key，太方便了！
+
+![](https://pic.yupi.icu/1/1777258547209-dc872280-09eb-4bd9-ad45-2e412382002d-20260429113525305.png)
+
+然后选择要给哪个 AI 编程工具安装，我选择为 Claude Code 安装：
+
+![](https://pic.yupi.icu/1/1777344820438-9397de28-5658-4f0c-8cbe-8ed350beb84a.png)
+
+安装成功后，可以在技能管理中看到 `find-docs` 技能：
+
+![](https://pic.yupi.icu/1/1777344978229-17483cf7-a0fd-4a5f-93cf-5865f96eab41.png)
+
+当然，你也可以选择安装 MCP Server 的方式：
+
+![](https://pic.yupi.icu/1/1777345106455-e31fd005-3cc6-45ac-a9d5-7dfafd30c7f4.png)
+
+安装后，在 Claude Code 中输入 `/mcp` 命令，就能看到安装好的 MCP 了，比自己手动配置方便太多了！
+
+![](https://pic.yupi.icu/1/1777345145401-72377bd2-2388-4f3b-bd8f-a31a76ecc676.png)
+
+至此，环境准备完成！下次开发项目时，就不用再重复准备了~
+
+
+
+## 开发编码
+
+新建一个 `tgang-helper` 项目文件夹，在终端中用 `cd` 进入该目录，然后输入 `claude` 命令打开 Claude Code：
+
+![](https://pic.yupi.icu/1/1777346556569-10234894-8a0e-4efe-98cb-a9d14b122279.png)
+
+然后输入提示词。这里分享一下我实际用的完整提示词，给大家参考：
+
+```markdown
+## 角色
+
+你是一个前端全栈工程师，擅长 Next.js + TypeScript 开发。
+
+## 任务
+
+开发一个叫 tgang-helper 提肛助手的 Web 应用，帮助用户科学地练习盆底肌训练（提肛 / 凯格尔运动），傻子也能练对。
+
+提供科学的分级训练课程，区分男女和难度，涵盖快速收缩、持续收缩、阶梯收缩等多种动作类型。训练过程中通过动画引导节奏，包括呼吸圈动画（收缩时缩小、放松时扩大）和人体姿势示范动画（用 SVG 或 Lottie 展示每个动作的正确体位和发力部位），让用户一看就知道该怎么做。同时使用浏览器语音合成（Web Speech API）实时播报指令，让用户闭着眼睛也能跟练。
+
+支持开启摄像头进行体位校正，使用 MediaPipe Pose 在浏览器端实时检测用户的站姿 / 坐姿是否正确（如驼背、耸肩、身体歪斜），所有检测纯本地运行，摄像头画面不上传服务器。当检测到持续的姿势问题时，将姿势数据（非图像）发送给 DeepSeek V4 模型，获取个性化的纠正建议并语音播报。
+
+训练记录保存在本地 localStorage，展示打卡日历和简单的统计图表。
+
+## 技术栈
+
+- 框架：Next.js + TypeScript
+- 姿态检测：MediaPipe Pose（纯前端）
+- AI 对话：通过 Next.js API Route 代理调用 DeepSeek V4 模型（兼容 OpenAI SDK 格式）
+- 动画：CSS 动画 + Framer Motion
+
+## 要求
+
+1. 页面美观专业，使用 frontend-design 技能美化页面，配色健康积极
+2. 开发前，先通过 Firecrawl 联网搜索 MediaPipe Pose 浏览器端用法，通过 Context7 查询最新技术文档和用法
+3. 必须生成完整可运行的代码，每步完成后必须自主测试验证
+```
+
+简单解读一下这段提示词的几个要点：
+
+- **角色定义** 放在最前面，让 AI 进入前端全栈工程师的状态
+- **任务描述** 用自然语言把需求讲清楚
+- **技术栈** 只列关键选型，让 AI 自己决定实现细节
+- 最后两条要求是关键，让 AI 先查文档再写代码，避免瞎编写法；让 AI 开发完后自主测试，减少翻车
+
+给 AI 发送提示词前，我按 Shift + Tab 进入了自动接受编辑模式，AI 创建、修改、删除文件和执行命令都不用我逐一确认了，更省事儿。但是有一定风险，大家按需使用：
+
+![](https://pic.yupi.icu/1/1777346788040-741dcad6-7e89-416d-ba95-7d603ad697b6.png)
+
+把上述提示词发送给 AI，接下来就是漫长的等待了。
+
+AI 开始自主开发，先搜索技术文档，然后规划项目结构，创建文件，写代码。
+
+过程中 AI 可能需要确认工具调用，比如它想通过 Context7 获取最新的 MediaPipe 技术文档，可以选择「Yes, and don't ask again」，以后就不用反复确认了：
+
+![](https://pic.yupi.icu/1/1777346850967-af94d579-7bb7-4e15-a250-d54dd513a593.png)
+
+过了 20 多分钟，AI 自主完成了开发，还自动运行了项目：
+
+![](https://pic.yupi.icu/1/1777348979066-ad363834-ffea-424e-89e7-d581a933105e.png)
+
+然后 AI 用 `webapp-testing` 技能，编写了自动化测试脚本，自动打开浏览器测试应用：
+
+![](https://pic.yupi.icu/1/1777349013499-cef79455-9bb9-4e0c-8c0e-8ee4c6a64f25.png)
+
+经过 31 分钟后，任务终于完成了，比我上次用 GPT-5.5 开发同量级的项目慢了差不多 2 倍。这期间我不仅做了 1 组提肛，还吃了个饭。
+
+![](https://pic.yupi.icu/1/1777349057921-d3174644-8481-4505-9640-4853f8f905fd.png)
+
+从 AI 的总结可以看到，它实现了完整的功能，包括 7 套训练课程、呼吸圈动画、SVG 人体图、语音指导、姿态检测、AI 建议、训练记录和统计图表，一把梭全给整上了。
+
+输入 `/context` 可以查看当前上下文使用情况，已经用了 9.4 万 tokens，占总容量的 47%：
+
+![](https://pic.yupi.icu/1/1777349331672-bfbc8216-5edb-4645-866c-76ac1a36c36a.png)
+
+你可能会好奇，DeepSeek V4 官方说支持 100 万 tokens 上下文，为什么 Claude Code 里显示上限才 200K？
+
+应该是 Claude Code 本身对上下文窗口有限制，跟模型的上限是两回事。所以建议大家定期看看上下文占用情况，占满之后 AI 可能会「断片失忆」开始乱改代码。
+
+
+
+## 测试验证
+
+接下来测试验证。由于项目用到了 DeepSeek V4 的 AI 功能，先让 AI 帮我创建一个环境变量配置文件：
+
+```
+帮我创建 .env.local 文件
+```
+
+AI 很快创建好了，还贴心地检查了 `.gitignore`，确认 `.env` 文件不会被提交到 Git：
+
+![](https://pic.yupi.icu/1/1777349272456-95ce7d9c-6e91-48f9-ba76-cb96c6cec3f5.png)
+
+打开 `.env.local` 文件，填上从 DeepSeek 开放平台获取的 API Key：
+
+![](https://pic.yupi.icu/1/1777349474695-3ded1d25-8709-461b-81d9-051520e7adac.png)
+
+然后在浏览器中打开页面。
+
+你别说，这个风格我挺喜欢的，很简洁清爽，配色也是健康积极的风格。就是那个 Logo 我没太看明白，求大家给我解释一下。。。
+
+![](https://pic.yupi.icu/1/1777349549522-a0bcefd1-754d-4af3-b89c-6ca67e1d76b7.png)
+
+我先选男性、入门难度，打开语音指导和摄像头姿态检测。
+
+好家伙，入门课程还不止一种，有「盆底激活」和「日常快速·3 分钟唤醒」两个选项。先从男性入门开始吧：
+
+![](https://pic.yupi.icu/1/1777358526114-0db8c685-376b-4bc1-8c52-f19cc07182ea.png)
+
+进入训练界面，有一个火柴人动画引导我的姿势。还有一个呼吸动画，可以让我跟随节奏操作，收紧、放松交替进行：
+
+![](https://pic.yupi.icu/1/1777358544658-ed5ad867-29cb-4e70-8dc5-7d637abfa74e.png)
+
+打开摄像头后，MediaPipe Pose 会实时检测我的姿态，发现问题就把姿势数据发给 DeepSeek 模型。这里有个小技巧，姿态纠正这种简单的建议不需要用 Pro 模型，用 V4-Flash 响应更快、成本更低。
+
+![](https://pic.yupi.icu/1/1777358609700-a6f75a7d-0d7e-4f05-a48a-87c63538318c-20260429113525969.png)
+
+比如它发现我的身体是歪的，就给出了纠正建议，比如「身体歪斜会影响发力，请先摆正骨盆。想象头顶有根线轻轻上提，让脊柱自然直立」，也是让我体验了一把健身房私教。。。
+
+![](https://pic.yupi.icu/1/1777358872878-89017863-7920-4a60-9876-d390f8075e36.png)
+
+我试着调整了一下姿势，它马上又给了新的反馈，说「试着双脚踩实地面，骨盆摆正。轻轻收紧盆底肌，保持脊柱中立」：
+
+![](https://pic.yupi.icu/1/1777358938592-94465606-6470-4400-82f4-a8816f7d96ee.png)
+
+到了持续收缩环节，它又提醒我放松肩膀，说「肩膀放松下沉，想象肩胛骨滑向后腰。轻轻呼气，感受盆底自然上提」。
+
+![](https://pic.yupi.icu/1/1777358994159-34179e8a-ac7b-4f51-9433-4e02784e8728.png)
+
+测试过程中，我又做了几组提肛。这已经不是 Vibe Coding 了，我管这叫 **TGang Coding**，边提肛边编程，身体工作两不误，岂不美哉？
+
+现在的我，已经可以挑战「男性进阶·力量强化」了，10 分钟 7 组动作。AI 在这个模式下也能准确检测到身体歪斜和重心不稳的问题：
+
+![](https://pic.yupi.icu/1/1777359368736-475ff9a5-b6c6-4032-a330-c57946095f7e.png)
+
+![](https://pic.yupi.icu/1/1777359434842-5d4caa9e-66b0-43cd-bfde-4c50b1e4121f.png)
+
+完成训练后，可以在训练记录页面看到打卡热力图和统计数据，坚持就是胜利！
+
+![](https://pic.yupi.icu/1/1777359021697-c7dd735b-76dc-41da-9416-136fb22d7681-20260429113526343.png)
+
+说实话，一段提示词就让 AI 一把梭出了整个项目，核心功能基本可用，DeepSeek V4 的效果还是不错的。
+
+不过实际跑起来还是有一些小 Bug，比如呼吸动画的收紧放松节奏跟实际训练动作对不上，快速收缩模式下动画一直显示「收紧」不切换到「放松」，还有 AI 姿态建议的调用时机没控制好，导致频繁请求。
+
+![](https://pic.yupi.icu/1/1777357933266-a1f1febe-edc3-4710-8504-8ddf440a8ddc.png)
+
+这些都是在测试过程中逐步发现的。上面演示的效果，其实是我又跟 AI 对话了 10 轮左右、修复了这些问题之后的结果：
+
+这里分享一个我自己的经验。测试的时候，影响核心功能的问题要立刻修复，比如动画节奏不对这种，直接跟 AI 描述现象让它改。
+
+不影响核心功能的问题，比如只是觉得界面某个地方不够好看，建议先记下来，等核心流程跑通之后再集中处理。
+
+另外，过程中一定要随时关注上下文的容量。我修完这几轮 Bug 后，上下文已经涨到了 62%：
+
+![](https://pic.yupi.icu/1/1777358465249-dbc18a92-6c77-471d-a15e-4f79a7837a67-20260429113526400.png)
+
+上下文一旦快满了，AI 就可能忘记之前改过什么，甚至写出跟之前矛盾的代码。
+
+遇到这种情况，建议先让 AI 把当前项目信息和进度沉淀成文档（比如写进 CLAUDE.md），然后开一个新会话继续开发，既节省 tokens 又不会丢失重要上下文。
+
+
+
+## 我的感受
+
+最后聊聊这次 Claude Code + DeepSeek V4 实战做项目的真实感受。
+
+先说说 DeepSeek V4 的实际表现。**一段提示词一把梭出完整项目 + 核心功能可用**，仿佛让我感受到了曾经 Opus 带给我的惊喜。
+
+前端虽然没什么特别惊艳的创新，但布局基本正确，配色也不拉胯。不过前面也提到了，在逻辑细节上还是有些不足，需要人工介入几轮才能调好。而且 DeepSeek V4 在代码生成速度上略慢一些，31 分钟才跑完核心功能。
+
+除了效果外，再看看大家关注的 **成本**。
+
+做完这个项目，到底花了多少钱呢？
+
+先在 Claude Code 中用 `/usage` 命令看看 tokens 消耗情况：
+
+![](https://pic.yupi.icu/1/1777359631006-6a630d28-fda7-426d-9b7d-e188b8fdf9b5.png)
+
+Claude Code 统计显示，这次开发总花费 18.13 美元，消耗了几十万 tokens。
+
+还可以进入 Stats 趋势分析，看看自己的使用习惯：
+
+![](https://pic.yupi.icu/1/1777359683244-29aecdd9-9ce9-4ff0-b072-71e58338fbf0.png)
+
+什么，这么个项目竟然花了 100 多元？！
+
+Claude Code 自带的费用统计可能不太准确，建议直接到 DeepSeek 开放平台看实际消耗。
+
+我一看，几百次请求，竟然消耗了 2500 多万 tokens！
+
+![](https://pic.yupi.icu/1/1777359821224-7aa241e7-c2a3-4740-8808-289422131b76.png)
+
+实际一看，只花了 **5.44 元**，舒服了~
+
+![](https://pic.yupi.icu/1/1777359775291-dca79c0d-6053-4721-ab50-6a2bb2895d04.png)
+
+这么多 tokens 里绝大部分是输入缓存命中的。因为 Claude Code 每次跟模型对话时，会把之前的上下文一起发过去，但如果内容跟上次一样，DeepSeek 会命中缓存，缓存价格只有正常输入的几分之一。
+
+这就是为什么虽然 tokens 用量看起来很吓人，但实际花费很低。
+
+**5 块钱开发了一个带 AI 能力的完整项目**，我觉得性价比还是挺高的，你觉得呢？
+
+
+
+
+
+## 写在最后
+
+5 块钱开发了一个带 AI 能力的完整项目，性价比确实很高。
+
+这个项目让我们看到了 Claude Code + 国产大模型的组合潜力。虽然过程中需要人工介入修几轮 Bug，但核心功能一把梭就能跑通，对于个人开发者来说已经非常够用了。
+
+如果你也想用 Claude Code 来开发项目，可以阅读本教程编程工具板块中的《AI 命令行编程工具》，了解 Claude Code 的详细使用方法和模型切换技巧。
+
+
+
+## 推荐资源
+
+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)
\ No newline at end of file
diff --git a/Vibe Coding 零基础教程/20 项目实战/鱼皮的原创项目/Codex - AI 开源项目学习网站项目实战.md b/Vibe Coding 零基础教程/20 项目实战/鱼皮的原创项目/Codex - AI 开源项目学习网站项目实战.md
new file mode 100644
index 0000000..eecde09
--- /dev/null
+++ b/Vibe Coding 零基础教程/20 项目实战/鱼皮的原创项目/Codex - AI 开源项目学习网站项目实战.md	
@@ -0,0 +1,406 @@
+# Codex - AI 开源项目学习网站项目实战
+
+本项目是一个 AI 驱动的开源项目学习助手，用户输入 GitHub 仓库地址，系统自动分析源码并生成通俗易懂的分析报告，还支持针对源码的交互式问答。全程使用 Codex + GPT-5.5 开发，后端对接 DeepSeek V4 API。
+
+大家好，我是程序员鱼皮。
+
+最近 AI 圈儿也太闹腾了，4 月 23 号 OpenAI 发布了 GPT-5.5，紧接着第二天 DeepSeek 就放出了 V4，两个重磅模型前后脚上线。
+
+![](https://pic.yupi.icu/1/image-20260428152723505.png)
+
+光看跑分没什么意思，模型好不好用，还得拿真实项目来检验。
+
+正好 OpenAI 的 Codex 桌面端这段时间更新很猛，已经从一个纯 AI 编程工具进化成了支持 Computer Use、插件市场、内置浏览器的「超级 App」。
+
+所以这篇文章，我全程用 Codex + GPT-5.5 来开发一个完整的全栈项目，后端对接 DeepSeek V4 的 API 实现 AI 能力。
+
+看完这期，你能学会 Codex 的使用方法、感受新模型的实际能力、掌握 AI 编程的实用技巧，可谓一举三得。
+
+点个收藏，咱们开始~
+
+
+
+## 需求分析
+
+这次要做的项目叫「项目学习助手」（project-helper），核心需求很简单：
+
+用户输入一个 GitHub 仓库地址，系统自动克隆项目并分析源码，生成一份通俗易懂的完整分析报告。报告涵盖项目概述、技术栈、目录结构、核心模块、数据流、设计模式、阅读建议等，真正做到「傻子也能懂」。分析过程实时推送进度，已经分析过的项目自动缓存，不用重复分析。
+
+![](https://pic.yupi.icu/1/image-20260427152036161.png)
+
+另外，用户还可以针对源码进行交互式问答，AI 会自主搜索代码、读取文件来回答问题，支持流式输出。
+
+这样一来，你可以快速学会任何开源项目，哪怕面对几万行代码的仓库，也完全不虚。
+
+
+
+## 方案设计
+
+如果你完全没有任何技术基础，可以让 AI 帮你完成方案设计。
+
+但这里为了节省时间和 tokens，我直接告诉 AI 怎么做。
+
+项目采用前后端分离架构：
+
+- 后端用 Python FastAPI + LangChain + SQLite
+- 前端用 Vue 框架
+- AI 能力对接 DeepSeek V4 的 API
+
+AI 分析和 AI 问答能力的实现还是有点小技巧的，如果一个代码仓库有几万行，难道要全部扔给 AI 自己去分析么？
+
+我的思路是， 采用 AI 工具调用（Tool Use）的方式，给 AI 提供读取文件、搜索代码、获取仓库结构等工具，剩下的交给 AI 自己判断该看哪些文件、该怎么组织答案。这也是 DeepSeek V4 专门优化过的 Agentic 场景。
+
+![](https://pic.yupi.icu/1/image-20260427143741108.png)
+
+
+
+## 环境准备
+
+### Codex 配置
+
+打开 Codex，首先确认模型列表里有 GPT-5.5。如果看不到，大概率是账号的问题，可能需要开通更高级的会员，我这里用的是 Plus 会员。
+
+![](https://pic.yupi.icu/1/1777256418373-5682599c-2367-4f94-951a-43bab6f0f861.png)
+
+可以看到界面上已经有了 GPT-5.5 模型选项，还支持调节智能程度（低 / 中 / 高 / 超高），我选择「高」。
+
+左下角进入设置，把工作模式切换为「用于编程」，这样 AI 的回复会更专业、更适合开发场景：
+
+![](https://pic.yupi.icu/1/1777259578973-cbe093c8-ea7d-4d5e-897a-afd81222dd30.png)
+
+
+
+### 安装 AI 扩展
+
+Codex 的 AI 扩展主要包括三类：
+
+- MCP 服务，用于连接外部工具连接
+- Agent Skills 技能包，让 AI 学会特定的专业技能
+- Plugins 插件，给 AI 增加更多能力
+
+官方自带了一些内置的插件和技能，比如 Computer Use、Browser Use、PDF 处理、演示文稿编辑等：
+
+![](https://pic.yupi.icu/1/1777257188480-f3405539-10b4-49bf-b612-10f6e4f5fb50.png)
+
+![](https://pic.yupi.icu/1/1777257208664-88183795-3fb8-4862-92fe-bb2d877430e3.png)
+
+不过这次项目需要的几个扩展，Codex 默认没有，得自己安装。
+
+我们需要下面 3 个扩展：
+
+1. Firecrawl：联网搜索和网页抓取，让 AI 能获取最新的技术信息
+2. Context7：查询最新的技术文档和 API 用法，减少 AI 瞎编的情况
+3. UI UX Pro Max：前端美化技能，让生成的页面更有设计感
+
+你可以在 Codex 设置里手动添加 MCP 服务：
+
+![](https://pic.yupi.icu/1/1777257301111-de539209-39d3-4956-86ba-9e43c7991cad.png)
+
+但是，要手动填写一堆参数，真特么麻烦啊！
+
+![](https://pic.yupi.icu/1/1777257751584-4842f03a-fa07-4cbe-94ad-dce017977b66.png)
+
+虽然也可以直接编辑 `~/.codex/config.toml` 配置文件来添加 MCP 服务，但还是很麻烦。
+
+这点上 Codex 的体验不如 Copilot 和 Cursor 的可视化安装，Copilot 甚至直接把 MCP 集成到了 VSCode 扩展市场里，一键搜索安装就行。
+
+好在我们可以换一种方式，用每个 AI 服务提供的命令来快速安装。
+
+#### 1、安装 Firecrawl
+
+Firecrawl 是一个联网搜索和网页抓取工具，能让 AI 在开发前先搜索最新的技术信息和文档。我们的项目需要它来查询 DeepSeek V4 的最新 API 用法。
+
+打开终端，输入下列命令：
+
+```bash
+npx -y firecrawl-cli@latest init --all --browser
+```
+
+![](https://pic.yupi.icu/1/1777258212308-8c83d23e-338e-4ec2-b1c0-05f54a22a36e.png)
+
+执行后，会自动打开浏览器，要在弹出的页面中点击授权：
+
+![](https://pic.yupi.icu/1/1777258069152-2d7fdb02-64e2-440b-bcbd-6254b07fb74e.png)
+
+安装完成后，会自动注册 12 个相关技能：
+
+![](https://pic.yupi.icu/1/1777258235867-0f6f08f5-4791-4b66-84b7-50936912540d.png)
+
+在 Codex 的技能管理中，就能看到新添加的 Firecrawl 相关技能了：
+
+![](https://pic.yupi.icu/1/1777258331237-182161c5-d21b-4a9b-9c6a-855d99312b5e.png)
+
+
+
+#### 2、安装 Context7
+
+Context7 是一个技术文档查询工具，让 AI 能获取到各种框架和库的最新官方文档，避免用过时的 API 写代码。
+
+先在终端输入一行命令来安装：
+
+```bash
+npx ctx7@latest setup
+```
+
+它会问是安装 MCP 服务还是 CLI + Skills，这里我选择 CLI + Skills。你会发现，现在越来越多工具已经从 MCP 转向 CLI + Skills 的方式了：
+
+![](https://pic.yupi.icu/1/1777258448310-41f86ec3-26e1-476e-aed5-4913c8116d21.png)
+
+同样在弹出的网页中授权，不用自己获取和输入 API Key，太方便了！
+
+![](https://pic.yupi.icu/1/1777258547209-dc872280-09eb-4bd9-ad45-2e412382002d.png)
+
+然后选择要给哪个 AI 编程工具安装，我选择为 Codex 安装：
+
+![](https://pic.yupi.icu/1/1777258572107-f494c3bb-01a9-443d-ba1d-6b1a3b3fab9a.png)
+
+安装成功：
+
+![](https://pic.yupi.icu/1/1777258672897-259f035a-f365-46ce-bc5d-e33fbc839f34.png)
+
+在 Codex 中确认已安装的技能：
+
+![](https://pic.yupi.icu/1/1777258710387-4b47a05d-dcb1-43ce-9761-f5d28976731e.png)
+
+当然，你也可以选择安装 MCP Server 的方式：
+
+![](https://pic.yupi.icu/1/1777259105649-99e28db3-c43e-4c49-a3b3-c567fa592d1f.png)
+
+安装后，在 Codex 的 MCP 服务器设置里，就能看到 Context7 MCP 了，这不比自己手动填参数方便多了？
+
+![](https://pic.yupi.icu/1/1777259122962-393ac901-870c-4b8b-bcf4-742e39a90c5a.png)
+
+
+
+#### 3、安装 UI UX Pro Max
+
+这是一个前端美化技能包，能让 AI 生成的页面更有设计感，不会有一大堆的 Emoji。
+
+输入一行命令：
+
+```bash
+uipro init
+```
+
+选择为 Codex 安装技能：
+
+![](https://pic.yupi.icu/1/image-20260427143633213.png)
+
+安装成功：
+
+![](https://pic.yupi.icu/1/1777258832043-8a3230db-2a76-47f7-a32a-5113a0487631.png)
+
+在 Codex 的技能管理中，能看到新技能：
+
+![](https://pic.yupi.icu/1/1777258847545-ba145ccf-2ab3-4a37-948a-4bb48d228fe4.png)
+
+至此，环境准备完成！下次开发项目时，就不用再重复准备了~
+
+
+
+## 开发
+
+新建一个 `project-helper` 项目文件夹，在 Codex 中打开：
+
+![](https://pic.yupi.icu/1/1777259374913-7c4ecded-191b-4010-820a-fe8c31ab3da9.png)
+
+然后输入提示词。这里分享一下我实际用的提示词，给大家参考：
+
+```markdown
+## 角色
+
+你是一个全栈工程师，擅长 Python + FastAPI + LangChain 开发。
+
+## 任务
+
+开发一个叫 project-helper（项目学习助手）的 Web 应用，帮助用户快速读懂任意开源项目的源码，傻子也能懂。
+
+用户输入一个 GitHub 仓库地址，系统自动克隆项目并分析源码，生成一份通俗易懂的完整分析报告，涵盖项目概述、技术栈、目录结构、核心模块、数据流、设计模式、阅读建议等。分析过程实时推送进度，已分析过的项目自动缓存，无需重复分析。
+
+用户还可以针对源码进行交互式问答，给 Agent 提供读取文件、搜索代码等工具，让 AI 自主查找代码来回答问题，支持流式输出。
+
+## 技术栈
+
+- 后端：Python FastAPI + LangChain + SQLite + 对接 DeepSeek V4 模型
+- 前端：Vue，前后端分离
+
+## 要求
+
+1. 页面需要阅读舒适，具有科技感，代码块有语法高亮，使用 UI UX Pro Max 技能美化页面
+2. 开发前，先通过 Firecrawl 联网搜索信息，通过 Context7 查询最新技术文档和用法
+3. 必须生成完整可运行的代码，每步完成后必须自主测试验证
+```
+
+简单解读一下这段提示词的几个要点：
+
+- **角色定义** 放在最前面，让 AI 进入全栈工程师的状态
+- **任务描述** 用自然语言把需求讲清楚
+- **技术栈** 只列关键选型，让 AI 自己决定具体实现方案
+- 最后两条要求是关键，让 AI 先查文档再写代码，避免瞎编写法；让 AI 开发完后自主测试，减少翻车
+
+模型我选择 GPT-5.5，智能程度选「高」，权限给完全访问（主要图个省事儿）：
+
+![](https://pic.yupi.icu/1/1777259547435-755d715a-4233-4779-a198-a2d38d94c92c.png)
+
+注意，如果你想让 AI 测试得更完整，可以先获取好 DeepSeek 的 API Key 并直接写在提示词里。否则没有 API Key，AI 是没法完成大模型调用测试的。
+
+把上述提示词发送给 AI，接下来就是漫长的等待了。
+
+我这次等了 9 分钟，这期间一直在做提肛，有了 AI 编程后运动量也拉上来了~
+
+AI 生成了完整的前端和后端项目代码，还自动写好了项目文档：
+
+![](https://pic.yupi.icu/1/1777260859705-cb84bd29-ca01-4da7-a75f-1e8f7224e653.png)
+
+点击右上角可以查看生成的所有代码文件，总共 19 个文件、1644 行代码：
+
+![](https://pic.yupi.icu/1/1777261007438-29de19fd-b3f8-4268-a6a1-3b05966cb85d.png)
+
+点击右上角查看项目概览，可以看到进度、生成结果、信息来源等。
+
+注意看「来源」那栏，我们提供的 3 个技能 AI 都用上了。Firecrawl 用来搜索信息，UI UX Pro Max 用来美化页面，Context7 用来查文档：
+
+![](https://pic.yupi.icu/1/1777260929224-57f9b68c-5642-4d5a-8d89-990a4158253f.png)
+
+感兴趣的同学可以看下 AI 生成的核心代码。比如问答模块利用 LangChain 实现了一个能调用 `read_file`（读取文件）、`grep_code`（搜索代码）、`repo_map`（获取仓库结构）这 3 个工具的 Agent，AI 会自主决定调用哪些工具来回答用户的问题。
+
+![](https://pic.yupi.icu/1/1777262292586-f5557d4f-ce46-495e-9f7f-48b239cabd53.png)
+
+
+
+## 测试验证
+
+接下来需要获取 DeepSeek 的 API Key，进入 [DeepSeek 开放平台](https://platform.deepseek.com)，创建 API Key，记得不要泄露哦！
+
+![](https://pic.yupi.icu/1/1777261129697-2ad16c21-6d70-4e87-879c-df2dd7e888b2.png)
+
+大家在使用某个 AI 大模型时，记得要关注一下价格。比如目前 DeepSeek 的 V4-Flash 百万 tokens 输入只要 1 元、输出 2 元；V4-Pro 输入 3 元、输出 6 元（限时 2.5 折优惠到 5 月 5 号）。缓存命中的话更便宜，V4-Flash 输入低至 0.02 元/百万 tokens。
+
+![](https://pic.yupi.icu/1/1777261160054-a4d31930-44d6-4bcb-a3d0-72b533793cb7.png)
+
+但是 DeepSeek 目前还没有 Coding Plan，不太建议拿它来 AI 编程，估计消耗的 tokens 会让很多同学吃不消。但是用它来做 AI 应用的大脑非常合适，性价比很高。
+
+根据 AI 给出的指引，在 Codex 中打开终端，设置环境变量，把 API Key 改为你自己的：
+
+```bash
+export DEEPSEEK_API_KEY=你的_key
+export DEEPSEEK_MODEL=deepseek-v4-pro
+```
+
+![](https://pic.yupi.icu/1/1777261353853-35e38b40-6f56-4d02-b2f1-90bfed1755be.png)
+
+不过这种 `export` 方式是临时的，终端一关就没了。
+
+更好的做法是让 AI 搞一个环境变量配置文件，我们手动填写就行。
+
+AI 很快完成了任务，新增了 `.env` 和 `.env.example` 环境变量文件：
+
+![](https://pic.yupi.icu/1/1777261704240-13861afc-d888-46cb-b2ff-594d3acd3dd7.png)
+
+注意，如果你的项目要开源，一定记得在 `.gitignore` 中忽略 `.env` 文件，防止 API Key 泄露到 GitHub 上。
+
+然后直接在编辑器中打开 `.env` 文件，把 API Key 填进去：
+
+![](https://pic.yupi.icu/1/1777261752700-19c79ce9-9589-476d-a728-369353e279ff.png)
+
+配置完环境变量后，让 AI 重启项目：
+
+![](https://pic.yupi.icu/1/1777261872346-c8224d36-f3a4-446f-9055-de3fb1f7988f.png)
+
+接下来人工测试一下。打开网页，输入一个 GitHub 仓库地址，比如我之前带大家开发的 [AI 零代码应用生成平台](https://github.com/liyupi/yu-ai-code-mother)：
+
+![](https://pic.yupi.icu/1/1777262004830-4f2fb828-e4eb-4bb6-95e4-d3fa190fd13b.png)
+
+虽然页面的布局和风格中规中矩，但功能是完全正常的。DeepSeek V4 生成的分析结果还挺靠谱的，包含了项目概述、技术栈分析：
+
+![](https://pic.yupi.icu/1/image-20260427143606586.png)
+
+还有核心模块详解、数据流分析、新手阅读建议等等，内容是准确的，生成速度也比较快：
+
+![](https://pic.yupi.icu/1/1777262420380-cfac00d4-9116-47cb-ab65-189db056104a-20260427143538208.png)
+
+再来测试下源码问答功能，问它：项目用了哪些设计模式？
+
+AI 调用了工具自己去翻代码，很快就列举出来了，包括门面模式、策略模式等，每个模式都标注了对应的源码文件路径：
+
+![](https://pic.yupi.icu/1/1777262689897-d57b786b-2196-4369-86d7-c2d29fb190fe.png)
+
+核心功能测试没问题。但如果项目要正式上线，还要测试一堆边界条件，比如仓库不存在怎么办？网络断了会不会崩？缓存命中的逻辑对不对？
+
+一个个手动测太麻烦了，干脆直接让 AI 帮忙。
+
+Codex 内置了 Browser Use 插件，输入 `@Browser Use` 使用插件，让 AI 自主测试：
+
+```markdown
+自主测试所有功能，出了问题自动修复，确保所有功能正常可用
+```
+
+![](https://pic.yupi.icu/1/1777262810965-5c656c56-627e-482f-8d5d-865a867d123e.png)
+
+可以看到 AI 在 Codex 内部打开了一个浏览器，它会自己点击页面、输入仓库地址、查看分析结果、测试问答功能，全程自主操作。这期间我又做了一会儿提肛，提麻了。
+
+![](https://pic.yupi.icu/1/1777262956188-5e7cc9e6-7c98-402c-adee-79956abf7630.png)
+
+等了大概 9 分钟，AI 完成了端到端的自主测试，还修复了好几个它自己发现的 Bug：
+
+![](https://pic.yupi.icu/1/1777265795106-dfdc2945-e0e4-4653-a79f-814302226667.png)
+
+至此项目就开发完了，是不是很简单？
+
+你还可以继续让 AI 优化前端布局、给报告中增加 Mermaid 流程图、支持导出报告文件等等，发挥想象力自由扩展吧~
+
+
+
+## 我的感受
+
+最后聊聊我用 Codex、GPT-5.5 和 DeepSeek V4 的真实感受。
+
+先说 Codex，Codex 的界面主打一个简洁，第一眼看上去甚至不像 AI 编程工具，更像个 AI 聊天助手。但功能其实比较完整，比如 MCP 和 Skills 扩展、插件市场、自动化、Git 集成、Browser Use、Computer Use，AI 编程所需的工程能力基本都具备了。
+
+不过缺点也很明显。默认可用的模型有限，不像 Cursor 和 Copilot 原生就整合了 Claude、GPT、Gemini 各种模型随便切。易用性也差了一些，从 MCP 配置那里大家应该已经感受到了。Copilot 可以直接在扩展市场一键搜索安装 MCP，Cursor 也支持可视化编辑 JSON 配置，Codex 这边还得自己折腾命令行或者手写 TOML。
+
+![](https://pic.yupi.icu/1/1777266857576-e240c700-e113-4d3d-8f4d-44512175986f.png)
+
+再说说 GPT-5.5 模型。有一说一，我测了几个全栈项目，并没有明显感受到 GPT-5.5 和 Claude Opus 模型的差距。只要提示词到位，基本都能一把梭全栈项目的前端和后端，而且核心业务流程大概率一次性跑通。前端表现嘛，中规中矩，虽然实现了响应式，但 UI 没有特别惊艳的地方。。。
+
+![](https://pic.yupi.icu/1/1777267657382-9f026e06-9984-42f6-b371-c998a41d2af9.png)
+
+再看看 GPT-5.5 的成本。以开发前面这个项目为例，共消耗了 13 万 tokens，上下文用了 50%。Codex 桌面端目前上下文容量是 258K，开发简单的全栈项目没问题，但复杂工程项目可能会有压力。
+
+![](https://pic.yupi.icu/1/1777268009237-7136c440-d7f9-4fec-8949-9c7fbc3deeb9.png)
+
+我目前开的是 GPT Plus 会员，一个月 20 刀（150 元左右），每 5 小时和每周有限额。做完这个项目，5 小时的额度基本就用完了，不算扩展功能的话，1 周差不多能做 5 个完整项目。
+
+![](https://pic.yupi.icu/1/1777266442906-7ccad38c-40d0-488e-a891-27dafc3876ef.png)
+
+最后说说 DeepSeek V4。
+
+我们团队之前的业务有接入 DeepSeek V3，也在带大家做的项目中用过 V3。这次把 V4 接到业务里，生成速度还是挺快的，效果比 V3 提升明显，尤其是对代码的理解和分析能力。而且有了 100 万 tokens 的超长上下文支持，让我们可以做更重的 AI 应用，比如深度研究、复杂项目源码的全局分析等等。
+
+看一下实际的 API 消耗，测试过程中用了 27 次请求，消耗了 5 万多 tokens，花费 0.15 元。按正常用户使用量算，一天 1000 次请求大约消耗 5.5 元，性价比很高。
+
+![](https://pic.yupi.icu/1/1777266027113-1126052d-a9a6-4049-ab3a-b75291612a87.png)
+
+总的来说，后续我不太会继续用 Codex 来做日常 AI 编程，做复杂项目时会选择 GPT-5.5 或 Claude Opus 模型，但开发 AI 应用时会优先对接 DeepSeek V4 的 API，便宜好用。
+
+
+
+## 写在最后
+
+这个项目从需求到上线，全程用 Codex + GPT-5.5 完成开发，后端对接 DeepSeek V4 的 API，整个过程不到 20 分钟。
+
+虽然 Codex 在 MCP 配置体验上还不如 Cursor 和 Copilot 方便，但功能完整度已经很不错了。更重要的是，这个项目让我们看到了用不同 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 零基础教程/30 经验技巧/01 Vibe Coding 五大核心心法.md b/Vibe Coding 零基础教程/30 经验技巧/01 Vibe Coding 五大核心心法.md
index b561a23..ae2f875 100644
--- a/Vibe Coding 零基础教程/30 经验技巧/01 Vibe Coding 五大核心心法.md	
+++ b/Vibe Coding 零基础教程/30 经验技巧/01 Vibe Coding 五大核心心法.md	
@@ -433,6 +433,10 @@ AI 可能会问你：
 
 这些心法看起来简单，但要真正掌握需要不断练习。建议你在下一个项目中，有意识地应用这些心法，看看效果如何。
 
+其实，这些心法的本质都是在强调同一件事 —— 你才是工程的主导者，AI 只是你手中的工具。这种理念在业界被称为 Harness Engineering 驾驭工程，关于它的完整定义和核心模块，可以阅读本教程的《Vibe Coding 概念大全》深入了解。
+
+![](https://pic.yupi.icu/1/2_harness_horse.png)
+
 记住，Vibe Coding 不只是让 AI 写代码，更重要的是你如何引导 AI，如何管理整个开发过程。掌握了这些心法，你就能从一个 "会用 AI" 的人，变成一个 "用好 AI" 的人。
 
 下一篇文章，我会讲解如何和 AI 进行高效对话，也就是 “对话工程” 的技巧。
diff --git a/Vibe Coding 零基础教程/30 经验技巧/10 Vibe Coding 成本控制技巧.md b/Vibe Coding 零基础教程/30 经验技巧/10 Vibe Coding 成本控制技巧.md
index 0f255af..4fee754 100644
--- a/Vibe Coding 零基础教程/30 经验技巧/10 Vibe Coding 成本控制技巧.md	
+++ b/Vibe Coding 零基础教程/30 经验技巧/10 Vibe Coding 成本控制技巧.md	
@@ -104,6 +104,8 @@
 
 合理搭配使用，能省下不少钱。就像你不会让公司的 CTO 去打印文件一样，要让合适的人做合适的事。
 
+另外，小米 MiMo 也是一个值得关注的低成本选项，它主打 token 效率高，同样的任务消耗更少。你可以通过 CC Switch 等工具切换到 MiMo 模型，进一步降低 AI 编程成本。
+
 
 
 ### 使用本地模型
diff --git a/Vibe Coding 零基础教程/40 编程学习/04 AI 编程技术.md b/Vibe Coding 零基础教程/40 编程学习/04 AI 编程技术.md
index 0d5a3a6..5542f5a 100644
--- a/Vibe Coding 零基础教程/40 编程学习/04 AI 编程技术.md	
+++ b/Vibe Coding 零基础教程/40 编程学习/04 AI 编程技术.md	
@@ -167,6 +167,22 @@ AI 云服务就是其他企业为我们部署了 AI 大模型，通过 API 接
 
 关于 RAG 能学的知识可太多了，比如主流的向量数据库 Milvus 和 PGVector、文档的抽取 / 转换 / 加载、索引的构建、查询策略的优化等等。**这也是 AI 企业面试的重点！**
 
+目前主流的 RAG 方案已经演化出十几种变体，按照复杂度可以分为几个层次：
+
+- 基础方案：Naive RAG（标准的切块→向量检索→生成流程）、Multi-Query RAG（多种问法分别检索再合并）
+- 检索优化：Hybrid Search（混合向量搜索和关键词搜索）、Reranking（精排模型过滤噪声）、语义分块（按语义边界切分文档）
+- 反思纠错：Corrective RAG（检索后质检，搜不到就回退 Web 搜索）、Self-RAG（生成时自我审视是否有文档支撑）
+- 结构化增强：GraphRAG（知识图谱支持跨文档推理）、Text-to-SQL RAG（自然语言翻译成 SQL 查数据库）
+- 智能体驱动：Agentic RAG（AI Agent 自主决策检索策略）、Multi-Agent RAG（多个专职 Agent 协作）
+
+![](https://pic.yupi.icu/1/1776651602499-afc9fc4b-6105-4b96-a3cd-a6681bf69480-20260430225809480.png)
+
+对于初学者，建议从 Naive RAG 开始，发现哪个环节不够好，再针对性引入进阶方案。生产环境推荐 Hybrid Search + Reranking 作为基础配置。如果数据源多且复杂，可以考虑 Agentic RAG。
+
+![](https://pic.yupi.icu/1/1776652755436-d1f52895-b98a-4e33-8c86-6ce0322ace05-20260430225845924.png)
+
+主流的 RAG 开发工具和框架包括 LangChain / LangGraph、LlamaIndex、以及一体化平台 Dify 和 RAGFlow 等，感兴趣的同学可以进一步了解。
+
 
 
 
diff --git a/Vibe Coding 零基础教程/40 编程学习/10 程序员成长大法.md b/Vibe Coding 零基础教程/40 编程学习/10 程序员成长大法.md
index 823b284..10390f8 100644
--- a/Vibe Coding 零基础教程/40 编程学习/10 程序员成长大法.md	
+++ b/Vibe Coding 零基础教程/40 编程学习/10 程序员成长大法.md	
@@ -34,7 +34,9 @@
 
 我自己也是坚持这么做的。哪怕说我现在开公司了，我反而会读更多的文章，因为我现在不仅要了解行业趋势、了解技术，我还要了解产品、了解项目管理，甚至要了解怎么招人。
 
-有同学问看哪里的文章？最推荐的是 **大厂的技术博客**。我关注了一大堆的技术团队，当然这些分享的内容可能会比较硬核。还有科技资讯类、经验分享、编程趋势、技术干货，我自己的号基本上什么都分享。
+有同学问看哪里的文章？最推荐的是 **海外的科技平台** 和 **大厂的技术博客**。我关注了一大堆的技术团队，这些分享的内容可能会比较硬核。
+
+也推荐大家关注我自己的公众号「程序员鱼皮」，我在上面持续分享各种 AI 科技资讯、AI 和编程技术干货、经验分享等等，帮助所有对 AI 和编程感兴趣的朋友不错过值得学习的知识。
 
 像今年我们还打造了完全免费的 AI 交流圈，大家可以没事儿来刷一刷：https://ai.codefather.cn
 
@@ -143,6 +145,7 @@
 
 最理想的情况下，当你换了一台电脑的时候，你能够很快地把你常用的工具在你的新电脑上完成安装，这就发挥了工具库的意义。
 
+现在 AI 技术那么成熟，可以利用 AI 工具来整理上面说的这些，洒洒水的事儿~
 
 
 ## 五、分享
diff --git a/Vibe Coding 零基础教程/70 Vibe Coding 概念大全.md b/Vibe Coding 零基础教程/70 Vibe Coding 概念大全.md
index f79a65d..b477a70 100644
--- a/Vibe Coding 零基础教程/70 Vibe Coding 概念大全.md	
+++ b/Vibe Coding 零基础教程/70 Vibe Coding 概念大全.md	
@@ -335,18 +335,28 @@ Harness Engineering（驾驭工程）是 2026 年兴起的 AI 工程新范式，
 
 Harness 这个词本意是 “马具”，就像缰绳和马鞍用来引导强大但难以预测的马匹一样，Harness Engineering 就是围绕 AI 编程智能体搭建的整套 “运行环境”，确保 AI 能按照你的预期工作。
 
-Harness Engineering 包含三大核心支柱：
-
-1. 上下文工程：确保 AI 在正确的时间获得正确的信息，包括代码库文档、架构规范、AGENTS.md 文件、测试结果等
-2. 架构约束：通过代码规范检查器、自动化测试等机制，强制规定 AI 必须遵守的规则，明确的边界能让 AI 更快地收敛到正确的解决方案
-3. 熵管理：定期清理 AI 生成代码中积累的问题，比如过时文档、命名偏差、死代码等
-
-![](https://pic.yupi.icu/1/harness%20engineering%20%E5%9B%BE%E8%A7%A3%E5%A4%A7.jpeg)
+![](https://pic.yupi.icu/1/2_harness_horse.png)
 
 为什么这个概念越来越重要呢？
 
 因为在 AI 编程时代，**模型本身已经是通用商品，真正的竞争力在于你围绕模型搭建的工程体系**。同一个大模型，在不同的 Harness 环境下，代码质量可能天差地别。程序员的角色正在从 “自己写代码” 转变为 “设计让 AI 可靠写代码的系统”。
 
+![](https://pic.yupi.icu/1/8_agent_queals.png)
+
+从发展路径来看，Harness Engineering 是在提示词工程和上下文工程基础上的进一步演进。提示词工程关注「怎么给 AI 下指令」，上下文工程关注「怎么给 AI 提供信息」，而 Harness Engineering 关注的是「怎么让 AI 持续靠谱地干完一整件事」，三者是层层包含的关系。
+
+![](https://pic.yupi.icu/1/7_harness_layers.png)
+
+Harness 的核心模块包括：
+
+- 上下文架构（让 AI 了解项目背景和规矩）
+- 执行能力（给 AI 装上工具和 MCP）
+- 任务编排（Plan Mode、SubAgents 并行执行等）
+- 反馈机制（Linter、自动化测试、Browser Use）
+- 架构护栏（防止代码越改越乱）
+
+![](https://pic.yupi.icu/1/20_harness_modules.png)
+
 
 
 
@@ -943,12 +953,33 @@ RAG（Retrieval-Augmented Generation 检索增强生成）是一种让 AI 能够
 
 普通的 AI 只能依赖训练时学到的知识，而这些知识可能已经过时了。RAG 能让 AI 在回答问题时，先从你的文档、代码库、知识库中检索相关信息，然后基于这些信息生成回答。
 
-这对于 Vibe Coding 特别有用，因为 AI 可以参考你项目中的已有代码，生成风格一致的新代码。
+![](https://pic.yupi.icu/1/1776650476421-3bfb3c26-575d-4cc4-9538-f74a4589b42d-20260430230436685.png)
+
+这对于企业中的 Vibe Coding 特别有用，因为 AI 可以参考你项目中的已有代码，生成风格一致的新代码。
 
 RAG 检索增强生成的工作流程如下图所示，做 AI 应用开发的程序员朋友们可以深入了解一下：
 
 ![](https://pic.yupi.icu/1/1745810809620-15c36bc0-5130-47fc-aaca-7d2a6ce6e3ce.png)
 
+在实际工程中，RAG 已经演化出了很多进阶方案。
+
+![](https://pic.yupi.icu/1/1776651602499-afc9fc4b-6105-4b96-a3cd-a6681bf69480-20260430230542027.png)
+
+比如：
+
+- Multi-Query RAG，用多种问法分别检索再合并结果。
+- HyDE，让 AI 先生成一段假答案再用假答案的向量去检索。
+- Hybrid Search，混合向量搜索和关键词搜索再融合排序。
+- Reranking，在检索后用精排模型重新打分过滤噪声。
+- GraphRAG，把文档变成知识图谱来支持跨文档多跳推理。
+- Agentic RAG，给 Agent 配备一组检索工具，让它来自动调度，根据问题自主决定每一步该怎么做。
+
+还有很多，不同的方案适用于不同场景，可以根据实际需求组合使用。
+
+![](https://pic.yupi.icu/1/1776652755436-d1f52895-b98a-4e33-8c86-6ce0322ace05-20260430230713947.png)
+
+对 RAG 感兴趣的程序员朋友，可以阅读本教程编程学习板块的《AI 编程技术入门指南》，里面有更详细的 RAG 实现方案和选型建议。
+
 
 
 ### Agentic RAG 智能体检索增强生成
diff --git a/作者.md b/作者.md
index 1bee919..b955f77 100644
--- a/作者.md
+++ b/作者.md
@@ -4,11 +4,11 @@
 
 98 年，前腾讯全栈工程师，担任腾讯云开发高级布道师、新人导师、曾获腾讯内云开发竞赛冠军。
 
-现科技公司 [鱼鸢网络](https://yuyuanweb.feishu.cn/wiki/A9rGw0oLCilbqSk2XMPcTOv2nSs) CEO，全网 150 万+ 粉丝编程知识博主，2 万人付费编程学习社群 [【编程导航】](https://yuyuanweb.feishu.cn/wiki/VC1qwmX9diCBK3kidyec74vFnde) 的创始人，用户 10 万+ 编程学习网站创始人。
+现科技公司 [鱼鸢网络](https://yuyuanweb.feishu.cn/wiki/A9rGw0oLCilbqSk2XMPcTOv2nSs) CEO，全网 200 万+ 粉丝编程知识博主，数万人付费编程学习社群 [【编程导航】](https://yuyuanweb.feishu.cn/wiki/VC1qwmX9diCBK3kidyec74vFnde) 的创始人，用户 10 万+ 编程学习网站创始人。
 
 热爱分享编程知识，善于把 Java 后端、前端、项目讲得通俗易懂。
 
-爱做项目，编程 7 年间，有 30+ 丰富的网站和独立项目开发经验，GitHub 中国区前 20。
+爱做项目，编程 8 年间，有 30+ 丰富的网站和独立项目开发经验，GitHub 中国区前 4。
 
 热爱写作，累积创作近千万字，大学曾出版区块链书籍。
 
@@ -32,7 +32,7 @@
 
 ### 公众号程序员鱼皮
 
-关注者 40 万+，鱼皮原创博客，编程学习经验、技术干货、项目设计思路、大厂求职面经、个人成长经历、免费编程学习资料分享，帮你少走弯路进大厂：
+关注者 50 万+，鱼皮原创博客，编程学习经验、技术干货、项目设计思路、大厂求职面经、个人成长经历、免费编程学习资料分享，帮你少走弯路进大厂：
 
 ![](https://pic.yupi.icu/1/20231026104004688.png)