news 2026/5/5 8:08:05

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

作者头像

张小明

前端开发工程师

1.2k 24
文章封面图
SBTI 爆火后,我做了个程序员版的 CBTI。。已开源 + 附开发过程

大家好,我是程序员鱼皮。

大家应该听说过 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 个小时就能从一个想法变成一个可以分享给朋友的网站。如果你也想快速上手 AI 编程、做出自己的产品,可以看看我免费开源的《Vibe Coding 零基础入门教程》,上千张图、几十万字,完全免费开源,从零基础快速学会 AI 编程,再到做出自己的产品、跑通变现全流程,一次拿捏。

我是鱼皮,专注 AI 编程知识分享,欢迎关注。

你在 CBTI 测出了什么编程人格?欢迎在评论区晒出来,看看有没有测出隐藏款的大佬~

版权声明: 本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若内容造成侵权/违法违规/事实不符,请联系邮箱:809451989@qq.com进行投诉反馈,一经查实,立即删除!
网站建设 2026/4/15 21:39:38

RobotStudio多版本共存避坑指南:5.0/6.0/2019版如何和平共处?

RobotStudio多版本共存实战指南:从兼容性到高效工作流 在工业机器人开发领域,ABB的RobotStudio是工程师们不可或缺的工具。随着项目需求的多样化,许多开发者发现单一版本的RobotStudio已经无法满足日常工作需要——旧项目维护需要5.0版本&…

作者头像 李华
网站建设 2026/4/14 4:51:10

当选择环保材料时,如何评估航美无漆实木板材的可靠性?

在选择环保建材时,我们对航美无漆实木板材产生了浓厚的兴趣。航美作为国内知名品牌,其无漆实木板材以高环保标准和优质的原材料受到广泛关注。这种板材采用天然木材,不经过化学漆涂层处理,因此在生产过程中减少了有害物质的释放&a…

作者头像 李华
网站建设 2026/4/14 4:49:12

从零搭建高可用广告联盟系统:核心技术栈 + 踩坑全记录

作为一名深耕流量变现领域 6 年的后端开发,我见过太多团队在广告联盟系统上栽跟头:要么是技术选型错误导致高并发下系统崩溃,要么是风控缺失被刷量刷到血本无归,要么是结算逻辑漏洞引发财务纠纷。最近半年,我带着团队重…

作者头像 李华
网站建设 2026/4/14 4:47:48

革命性智能交互助手:Live2D AI如何重塑用户体验边界

革命性智能交互助手:Live2D AI如何重塑用户体验边界 【免费下载链接】live2d_ai 基于live2d.js实现的动画小人ai,拥有聊天功能,还有图片识别功能,可以嵌入到网页里 项目地址: https://gitcode.com/gh_mirrors/li/live2d_ai …

作者头像 李华
网站建设 2026/4/15 6:29:36

Qwen1.5-0.5B-Chat vs TinyLlama对比:轻量模型精度评测

Qwen1.5-0.5B-Chat vs TinyLlama对比:轻量模型精度评测 1. 引言:为什么关注轻量模型? 如果你正在寻找一个能塞进普通电脑、甚至没有独立显卡也能跑起来的AI对话模型,那么这篇文章就是为你准备的。今天,我们不聊那些动…

作者头像 李华