SBTI人格测试刷屏了，我拆解了它的技术实现，顺便聊聊周末怎么复刻

昨天（2026年4月9日），SBTI 突然在朋友圈、微博、小红书等平台刷屏。测试网站一度因为访问量过大直接挤崩，很多人都只能靠截图“云测”。31道题答完就能得到一个荒诞又解压的人格标签，迅速成为这几天最火的娱乐话题。

作为日常喜欢拆解技术和分享职场观察的我，刷到这个测试后，第一反应不是急着测结果，而是打开浏览器 DevTools，看看它到底是怎么做出来的。

SBTI网站技术栈拆解

这个网站属于典型的现代轻量前端单页应用（SPA），整体技术栈非常简洁高效：

• 前端框架：基于 React（或 Next.js）开发
  使用函数组件 + Hooks（主要是 useState）管理题目状态、答题进度和用户选择。所有逻辑都在客户端完成，答题过程无需请求后端，结果几乎是秒出。

• 样式方案：大概率使用 Tailwind CSS
  采用原子化 CSS 类，实现了干净的暗黑风格界面，响应式布局优秀，移动端体验流畅。代码量少，维护非常方便。

• 核心逻辑实现：

  • 题库数据直接以 JS 对象或 JSON 形式写在代码里
  • 用户每选择一个选项，就实时更新状态
  • 答完后通过简单的计分算法匹配对应的人格标签
  • 支持结果动态生成文案，并提供一键复制或分享功能

• 部署方式：
  使用边缘托管平台（Vercel、Netlify 或 Cloudflare Pages 等）
  项目轻量，加载速度快，成本极低，非常适合个人快速上线的小工具。

整体来看，SBTI 的技术栈可以总结为：
React + Tailwind CSS + 纯客户端 JavaScript 逻辑 + 边缘部署

这种组合上手快、性能好、迭代成本低，是目前很多趣味小项目最常用的技术路径。

为什么这种极简技术能做出爆款？

因为它完美体现了**“好想法 + 轻量技术 = 快速传播”**的逻辑：

• 不需要复杂后端
• 不需要重型框架
• 核心功能（答题 + 计分 + 结果展示）全部在浏览器端完成
• 部署简单，一键上线

很多类似的人格测试、趣味小工具、在线quiz都是走的这条路。一个周末的时间，就能从0到1做出一个可分享的MVP。

如何周末复刻一个类似项目？

如果你也想动手试试，推荐以下技术路径：

1. 框架选择：React（Vite 创建项目）或 Next.js App Router
2. 样式：直接上 Tailwind CSS，省去大量样式代码
3. 状态管理：基础版用 useState + useEffect 就够，复杂一点可以加 Zustand
4. 数据存储：题库和结果映射直接写在代码里
5. 部署：Vercel 一键部署，免费且支持自定义域名

核心代码逻辑其实很简单：

• 用数组存储题目和选项
• 用状态记录用户答案
• 答题结束后根据得分匹配预设结果

整个项目代码量不会太大，适合作为周末练手项目。

最后

SBTI的爆火再次证明：一个有趣的想法，用极简的技术快速实现，就能获得不错的传播效果。技术本身没有高低之分，关键在于能否快速把想法落地。

看到好玩的项目，不妨拆一拆、复刻一下，再加上自己的理解和改进——这或许就是程序员的乐趣之一。

你测SBTI了吗？结果是什么？
欢迎在评论区分享你的测试结果，或者说说你最近有做过什么有趣的小项目。