docs: 新增 4 篇文章并更新教程体系

新增文章：
- 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

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)