SBTI 爆火后,我做了个程序员版的 CBTI。。已开源 + 附开发过程

张开发
2026/6/1 9:16:39 15 分钟阅读
SBTI 爆火后,我做了个程序员版的 CBTI。。已开源 + 附开发过程
大家好我是程序员鱼皮。大家应该听说过 MBTI 人格测试吧没想到这几天有个模仿 MBTI 测试的网站突然火了叫做「SBTI」。也是用 30 道选择题来测试出你的人格类型只不过结果会更抽象……比如我测试出来自己是「握草人」可能是我还不够抽象这个人格的解读我都读不懂……我看完就想握草这个网站为啥能火啊现在用 AI 编程做这种测试小网站还不简单要不我也来一个说干就干于是我花了 1 个小时用 AI 编程做出了程序员专属的CBTICoder Behavior Type Indicator程序员行为类型测试。 在线体验https://cbti.codefather.cn用 30 道题测出你的编程人格而且代码完全开源。 开源地址https://github.com/liyupi/cbti-testCBTI 是什么首先郑重声明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 个小时就能从一个想法变成一个可以分享给朋友的网站。如果你也想快速上手 AI 编程、做出自己的产品可以看看我免费开源的《Vibe Coding 零基础入门教程》上千张图、几十万字完全免费开源从零基础快速学会 AI 编程再到做出自己的产品、跑通变现全流程一次拿捏。我是鱼皮专注 AI 编程知识分享欢迎关注。你在 CBTI 测出了什么编程人格欢迎在评论区晒出来看看有没有测出隐藏款的大佬~

更多文章