全网刷屏的「SBTI」测试，我用AI零代码1 小时就成功复刻，附完整实操教程

这两天各种 SBTI 测试在朋友圈刷屏了，打开朋友圈全是各种趣味人格截图：

（原SBTI测试网站：https://sbti.unun.dev/ ）
刚好最近各种 0 代码、低代码的 AI 工具都说自己功能强大，都说能轻松实现“小白也能做网站”。作为完全没有代码基础的小白，我决定借这个机会实测一番，给AI上上强度，看看它到底能不能帮我快速复刻一个SBTI测试网站。
于是我用 AI 工具试着搭了一个，整个过程不到两小时。
我搭建的测试网站，欢迎体验哈哈哈：
https://stbi-gogogo.netlify.app/

这篇文章，我会把从 0 到上线的完整流程，毫无保留地分享给大家。没有“只需三步”的废话，也没有晦涩的专业术语，把实际遇到的坑、需要避开的弯路、具体可用的提示词，都会一一交代清楚，你只需照着做，基本能一比一复现我的成果。

SBTI 是个啥？

先花2分钟简单科普，帮大家节省去别处搜索的时间，也能更好地理解后续搭建逻辑。

SBTI 全称「Silly Big Personality Test」，直译过来就是"愚蠢的大人格测试"。它本质上是对 MBTI 的人格分类框架的一次戏仿，MBTI 正儿八经给你贴个"INTJ"或"ENFP"的标签，SBTI 则走趣味荒诞路线，给你贴上"死者 DEAD""愤世者 SHIT""吗喽 MALO"这类接地气又搞笑标签。

原版测试一共 30 道题，题目设计得很接地气，不是那种"你更喜欢团队协作还是独立工作"的废话题，而是"对象 5 小时没回消息说拉稀了，你怎么想"这种让人会心一笑的场景题。

答题结束之后，系统会从 15 个心理维度给你打分，最终匹配到 27 种人格类型之一，其中包括两个隐藏彩蛋："傻乐者 HHHH"和"酒鬼 DRUNK"。

我用了哪些 AI 工具？

先把工具清单列清楚，避免大家中途反复问“用什么工具”，全程可用免费版本，零成本就能上手：：

• 豆包（或Kimi）：用来生成题库、人格描述和处理逻辑
• ChatGPT（或 Midjourney、可灵）：用来生成配图
• 任一前端 AI 工具（如 Cursor、Windsurf）或者直接让 Claude 写完整的 HTML 单文件
• Vercel 或 Netlify：免费托管静态网站

整个流程可以全用免费工具完成，我最后用的是纯 HTML 单文件方案，好处是零成本、可离线、想改就改，缺点是交互体验不如正经框架做出来的精致。对于流量在几万以内的场景，纯 HTML 够用了。

第一步：用 AI 整理测试框架

很多小白容易犯的错：上来就让AI写代码，结果因为没有明确的框架，AI 生成的代码杂乱无章，还要反复修改，反而更费时间。正确的做法是：先让AI帮你梳理清楚SBTI 的核心结构，再动手写代码。

这样做有两个好处：一是自己能建立全局认知，后续和 AI 对接需求的时候效率高很多；二是可以基于原版框架做差异化，避免直接照搬原版内容，既规避版权问题，也能做出自己的特色。

找一个 AI 工具，把下面的提示词丢给它：

请分析以下内容，帮我梳理出一个"SBTI人格测试"的知识框架，包括：

1. 测试包含哪些心理维度？每个维度代表什么含义？

2. 人格类型有哪些？每个类型的大概特征是什么？

3. 评分机制是怎样的？（L/M/H三级还是其他？）

4. 有哪些隐藏彩蛋机制？

AI 给你的回答会帮你快速建立一个全局认知，建议复制到笔记软件里存下来，后面写代码的时候要反复参考维度定义和评分逻辑。

这一步的作用： 节省你大概 1-2 小时自己研究原始题库的时间。AI 总结的框架可以直接作为你和下一个 AI 对接时的"需求文档"使用。

第二步：让 AI 生成差异化题库

原版 SBTI 的题目和结果网上已经有了，直接照搬会涉及版权问题，而且也没有原创性。我的做法是：让 AI 基于原版框架，自己生成一套新的题目和人格结果。

具体提示词如下：

请帮我设计一套"SBTI人格测试"的题目。我需要：

1. 30道选择题，每道题3个选项，涵盖以下15个维度（每个维度2道题）：自尊自信、自我清晰度、核心价值、依恋安全感、情感投入度、边界与依赖、世界观倾向、规则灵活度、人生意义感、动机导向、决策风格、执行模式、社交主动性、人际边界感、表达与真实度

2. 题目的提问方式要场景化、幽默化，不要像心理问卷那样枯燥

3. 设计25种人格结果类型（包括名称、代号、一句话签名和100字左右的解读），风格要有趣，不要中规中矩

4. 指定L/M/H三级评分规则

AI 生成的题目大概率不能直接用，但可以作为初稿。让我比较意外的是，豆包生成的第一版题目在场景化方面已经做得相当不错，只需要调整一些过于"正经"或"说教"的表述。

生成的题目参考（可直接借鉴风格）：

好的 SBTI 题目有两个特点：一是场景接地气，让答题者有代入感；二是选项没有标准答案，测的是倾向而不是对错。举两个例子：

Q：对象超过5小时没回消息，说自己拉稀了，你会怎么想？

A. 拉稀不可能5小时，ta肯定隐瞒了什么

B. 在信任和怀疑之间摇摆

C. 也许ta今天真的不太舒服

Q：你因便秘坐在马桶上（已长达30分钟），拉不出很难受，此时你更像：

A. 再坐三十分钟看看，说不定就有了

B. 用力拍打自己的屁股："死屁股，快拉啊！"

C. 使用开塞露，快点拉出来才好

你看，这种题目让人看了就想答。场景荒诞但不失真实感，选项都是日常生活中会发生的反应，而且没有一个选项是"标准答案"——这才是这类测试的核心。

第三步：写代码

终于到写代码这最关键的一步了，但大家不用慌，这一步你完全可以不用自己写，直接把前面AI生成的题库、评分逻辑，交给AI，让它帮你组装成可运行的网页即可。

方案一：让 AI 写完整单页 HTML

这是我最终采用的方案。找一个上下文足够长的 AI，把以下提示词一次性丢给它：

请帮我制作一个"SBTI人格测试"的单页网站，要求：

1. 包含完整题库（30道选择题 + 1道补充题 + 1道隐藏题）

2. 包含15维度评分逻辑和27种人格匹配逻辑

3. 支持进度条、答题动画、结果展示和分享功能

4. 界面风格参考 WordPress 果酱公众号：简洁现代、深色主题、高对比度

5. 全部代码写在一个HTML文件里，不需要服务器，纯本地运行

6. 隐私声明：所有数据仅本地处理，不上传服务器

AI 给你的代码大概率不是一键可用的，可能会有样式冲突、逻辑 bug 或者交互细节不完善。建议大家不要一次给 AI 太多需求，先让 AI 生成一个基础版本，跑通核心流程，再提出修改需求，逐步完善，这样可能效率还更高。

方案二：用 Cursor / Windsurf 直接写

如果你有 Cursor 或 Windsurf 的使用权限，整个过程会流畅很多。这类工具的优势在于可以实时预览、逐行修改、让 AI 直接在代码库里做增量修改，比复制粘贴一整段代码然后调试要高效得多。

评分算法核心逻辑

整个测试最难的部分其实不是界面，而是评分算法。很多小白卡在这里，其实不用自己写，直接参考下面的核心逻辑，让AI帮你实现即可，我把关键代码贴出来，大家可以直接复制给AI：

// 1. 收集每道题的答案（A=1分, B=2分, C=3分）
const answers = [/* 用户答案数组 */];
// 2. 计算每个维度的总分
const dimScores = {};
DIMENSIONS.forEach(d => { dimScores[d.code] = 0; });
answers.forEach((ans, i) => {
  if (ans !== -1) {
    dimScores[QUESTIONS[i].dim] += (ans + 1);
  }
});
// 3. 将总分转换为L/M/H等级
function getLevel(score) {
  if (score <= 3) return 'L';  // 低
  if (score === 4) return 'M'; // 中
  return 'H';                   // 高
}
// 4. 用汉明距离匹配人格模板
function hammingDistance(p1, p2) {
  let d = 0;
  for (let i = 0; i < p1.length; i++) {
    if (p1[i] !== p2[i]) d++;
  }
  return d;
}
// 5. 计算匹配度
const matchPct = Math.round((15 - bestScore) / 15 * 100);

第四步：上线网站

代码调试好后，就可以上线了，最简单的方式是用 Vercel，它对静态网站完全免费，而且 CDN 加速国内访问也还算稳定。操作步骤：

1. 去 vercel.com 用 GitHub 账号注册
2. 把项目代码上传到 GitHub 仓库
3. Vercel 里点击"Import Project"，选这个仓库
4. 不用改任何配置，直接 Deploy
5. 等 30 秒左右，网站就上线了，Vercel 会给你一个免费域名

如果你不想用 GitHub，还有一个更简单的方案：直接把 HTML 文件上传到 Netlify Drop（netlify.com/drop），拖拽上传，无需注册，30 秒搞定。缺点是域名比较随机，不适合长期运营。
注意： 国内访问 Vercel 和 Netlify 的速度一般，如果主要用户在国内，建议额外配置一个国内访问的备用方案，或者考虑 Cloudflare Pages。
下面就是我最终做的网站截图，大家可以自己去访问体验一下：https://stbi-gogogo.netlify.app/

几个我踩过的坑

搭建过程中我遇到了几个实际问题，记录下来供大家参考：

1. AI 生成的代码有样式冲突

这种情况很常见，尤其是让多个 AI 分别生成 HTML、CSS、JS 然后拼接的时候。我最后采用的方式是让一个 AI 一次性生成完整代码，而不是分段生成再拼接。

2. 结果页面分享到微信打不开

微信对部分第三方域名有限制，实测 Vercel 分配的 .vercel.app 域名在微信里可以直接打开。如果用其他平台，建议绑定自己的域名。

3. 移动端体验比 PC 端差很多

我在第一版里没有特别做移动端适配，后来看到用户反馈"选项按钮太小看不清"才发现问题。在 CSS 里加上移动端适配其实只需要几行代码，别省这个事。

总结一下

写这篇文章，是因为看到很多人在问"怎么搭建 SBTI 网站"，但大多数回答要么是"用XXX平台，三分钟搞定。实际操作起来全是坑；要么就是甩一个GitHub链接，让小白自己研究，门槛极高。

我的实际感受是：AI 工具确实让"普通人做网站"这件事变得门槛低了很多，但"低门槛"不等于"没有门槛"。
整个搭建过程中，最花时间的不是写代码（AI全帮你做了），而是想清楚自己要做什么：题库怎么设计、人格类型加哪些、界面风格定什么色调、要不要加隐藏彩蛋……这些决策，AI无法替你做，必须自己想清楚。
所以我的建议是：
先把整个测试网站的样子想清楚，画个简单的草图，或者写个核心提纲，明确自己的需求，再去找AI工具帮你实现。这样来回修改的次数会少很多，整体效率反而更高。
最后，大家可以去我的测试网站体验一下，也可以跟着教程，亲手搭建一个属于自己的SBTI测试网站，感受AI工具带来的便利～

转自：https://mp.weixin.qq.com/s/PJbZNZVxbtp97YRBz7ct9g