liyupi
1ce719ffb3
新增文章： - 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
198 lines
8.4 KiB
Markdown
198 lines
8.4 KiB
Markdown
# 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 道选择题来测试出你的人格类型，只不过，结果会更抽象……
|
||
|
||
比如我测试出来自己是「握草人」，可能是我还不够抽象？这个人格的解读我都读不懂……
|
||
|
||
|
||
|
||
我看完就想：握草？这个网站为啥能火啊？现在用 AI 编程做这种测试小网站还不简单？要不我也来一个？
|
||
|
||
说干就干，于是我花了 1 个小时，用 AI 编程做出了程序员专属的 **CBTI（Coder Behavior Type Indicator）程序员行为类型测试**。
|
||
|
||
👉🏻 在线体验：https://cbti.codefather.cn
|
||
|
||
|
||
|
||
用 30 道题测出你的编程人格，而且代码完全开源。
|
||
|
||
👉🏻 开源地址：https://github.com/liyupi/cbti-test
|
||
|
||
|
||
|
||
|
||
|
||
## CBTI 是什么？
|
||
|
||
首先郑重声明，CBTI 是一个有科学依据的正经测试，不是抽象整活的！
|
||
|
||
我让 AI 深度分析了 MBTI 和 SBTI 的题库、计分逻辑，还有 MBTI 16personalities 的人格体系，在这个基础上设计了 CBTI 的维度模型。整套测试覆盖代码质量、Bug 处理、团队协作、技术驱动、AI 态度这 5 大方向，一共 15 个维度。
|
||
|
||
随便给大家看几道题目感受一下：
|
||
|
||
1）产品说「先上，后面优化」，你心想？
|
||
|
||
- 后面是哪辈子？行吧先糊上去
|
||
- 写个 TODO，虽然大概率会变成遗书
|
||
- 写技术方案，排进迭代里
|
||
|
||
|
||
|
||
2）周五 5:59 群里弹消息，线上炸了。你？
|
||
|
||
- 假装没看到，手机静音，人已消失
|
||
- 先看看严重不严重
|
||
- 秒回 “我看看”，打开监控面板
|
||
|
||
|
||
|
||
而且现在 AI 编程也很火嘛，我也与时俱进加了相关的题。比如 Cursor/Copilot 到期了公司不报销，你？
|
||
|
||
- 到期就到期，手写也不是不行
|
||
- 找找免费替代品
|
||
- 秒续！求求再给我点 tokens！
|
||
|
||
|
||
|
||
我自己测出来是 HACK 野生黑客，座右铭是「又不是不能用.jpg」。个人觉得还挺准，毕竟在 AI 编程时代，我搞过很多 Vibe Coding 的小项目，确实是百无禁忌、能跑就行，做完一个就去搞下一个。
|
||
|
||
|
||
|
||
测试结果共有 28 种人格，命名全是跟编程相关的，比如什么 SUDO 万能管理员、NULL 空指针、CTRL-C 复制粘贴工程师、996 卷王之王、404 隐身人、VIBE 氛围程序员等等。另外还设计了一个隐藏人格 ☕ JAVA 咖啡因驱动开发者，能触发的朋友应该是有点儿东西的……
|
||
|
||
|
||
|
||
|
||
|
||
## 完整开发过程
|
||
|
||
这个项目我只花了 1 个小时左右就上线了，全程 Vibe Coding，用 Cursor + Claude 完成。
|
||
|
||
没有用什么复杂的方法论，也不需要什么 Harness Engineering，就是不断跟 AI 对话、提需求、给反馈。
|
||
|
||
下面分享一下关键流程。
|
||
|
||
**1、分析参考项目，提取产品精髓**
|
||
|
||
给 AI 的初始提示词很重要。我先在网上找到了一份 SBTI 的完整题库和计分逻辑报告，连同 SBTI 官网、MBTI 16personalities 官网一起丢给 AI，让它深度分析这些测试的人格体系、计分方式和传播机制。
|
||
|
||
并且给 CBTI 定了方向：面向编程，要有科学依据和实用价值，同时具备抽象整活和流量传播属性。
|
||
|
||
|
||
|
||
然后 AI 就直接完成了初始网站的开发和测试：
|
||
|
||
|
||
|
||
|
||
|
||
**2、内容反复迭代**
|
||
|
||
AI 初版生成的人格代码都差不多，看着毫无辨识度，于是我让它全网搜索程序员相关的热梗，一遍遍重做人格体系。
|
||
|
||
|
||
|
||
这个阶段来来回回改了很多版，最后我把人格从最初十几种扩展到了 27 种，引入了 AI 编程这个新维度，题目内容也从正经八百改成了口语化、有共鸣的风格。
|
||
|
||
|
||
|
||
|
||
|
||
**3、UI 设计优化**
|
||
|
||
一开始 AI 生成的主页像个 B 端管理后台，又丑又复杂。
|
||
|
||
我直接跟它说主页尽量简洁，一句 Slogan 再加一个「开始测试」按钮就够了。
|
||
|
||
|
||
|
||
配色换成橙色系，再用 frontend-design 这个 Agent Skill 来优化整体视觉效果。答题页面也加了答题卡、进度条、快速跳题这些交互细节。
|
||
|
||
|
||
|
||
|
||
|
||
**4、人格图片制作**
|
||
|
||
如果是以前，网站图片素材的制作绝对要花大把的时间。
|
||
|
||
但现在利用 AI，这件事可以在几分钟内完成。
|
||
|
||
我让 AI 参考 MBTI 官方网站那种低多边形风格的人物形象，生成给 Nano Banana 这个 AI 绘图工具使用的提示词。
|
||
|
||
注意，这里有个小技巧，我不是让 AI 分别给 28 个角色都生成一段提示词，那样又费时又烧钱。而是分为 2 批，每批 14 个人物放在 **同一张图片** 里生成。这样只需要使用 2 段提示词，生成 2 张图就够了。
|
||
|
||
|
||
|
||
效果还不错吧：
|
||
|
||
|
||
|
||
然后让 AI 自己去理解这张完整的图片，写 Python 脚本来切割图片、压缩调整尺寸、移除空白背景等等，最后得到了 28 个角色图片。
|
||
|
||
|
||
|
||
|
||
|
||
**5、更多功能完善**
|
||
|
||
确保题目内容和网站功能正常运行后，我还优化了很多网站的细节，加了分享文案、Canvas 渲染的分享海报、五维雷达图、隐藏人格彩蛋这些功能。
|
||
|
||
|
||
|
||
由于网站本身功能并不复杂，每个功能我都是无脑让 AI 生成，所以过程中也遇到了一些问题，比如分享海报一开始字太小、二维码没生成、后来又太大，调了好几轮才满意。
|
||
|
||
|
||
|
||
|
||
|
||
**6、部署上线和验证**
|
||
|
||
由于网站不依赖后端，所以部署上线操作无比简单。
|
||
|
||
我用了 EdgeOne Pages 这个 MCP，只需要跟 AI 对话，AI 会自动执行 Next.js 框架的 build 命令把代码导出为静态的 HTML 网页，然后部署网页到腾讯云 EdgeOne Pages 服务，1 分钟就完成了部署上线。
|
||
|
||
|
||
|
||
可以在腾讯云 EdgeOne Pages 控制台查看到已上线的项目，还可以自定义域名：
|
||
|
||
|
||
|
||
上线之后，我再让 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)
|