Case 11｜SBTI刷屏？我用WorkBuddy直接做了个测试网站上线
WorkBuddy 案例集 · 第 11 篇 分类：网站与应用开发
一、场景描述
4月9日，全网突然被 SBTI 人格测试刷屏。微博热搜、朋友圈、微信群全在晒结果：「我是死者·吗喽」「你是狗屎人吗」「ATM‑er 报到」。
我点进原版想测一测，结果网站直接被流量挤崩。既然这么火，我干脆自己用 WorkBuddy，从零搭了一个稳定可访问的版本。
SBTI 全称 Silly Big Personality Test，傻大个儿人格测试。以 MBTI 为框架恶搞改编，把 16 型人格变成 27 种扎心自嘲标签：死者、吗喽、狗屎人、草者、ATM‑er、幽灵、机器人……没有心理学依据，纯娱乐玩梗，但年轻人疯狂转发，因为每一句都像在说自己的真实精神状态。
二、想要完成的任务
借助 WorkBuddy 从零搭建一个稳定可访问的 SBTI 人格测试网站，包含题库、计分逻辑、27 种人格结果、专属头像、保存图片功能，并一键部署上线。
三、使用的 Skill
| Skill / 能力 | 用途 | 来源 | 所需权限 |
|---|---|---|---|
| web-access / 联网搜索 | 搜集全网最完整的 SBTI 测试题库与人格标签 | 内置 Skill | 网络访问 |
| 代码生成能力 | 生成 HTML+CSS+JS 全套前端代码、答题计分逻辑、Canvas 保存图片功能 | 内置能力 | 文件读写 |
| cloudstudio-deploy | 自动找到 Git 仓库、提交代码、推送并触发部署上线 | 内置 Skill | Git 仓库访问、部署权限 |
四、前置条件
- 已安装并登录 WorkBuddy 客户端
- 本机已有可用的 Git 仓库与远程部署通道（用于一键上线）
- 网络可正常访问外部站点用于素材搜集
五、在 WorkBuddy 中的操作
步骤 1：搜集素材
把整理 SBTI 题库的需求直接丢给 WorkBuddy，让 AI 把全网零散的测试题、评分维度、人格标签统一整理成结构化数据。 关键步骤：向 WorkBuddy 下达搜集指令，要求输出包含 15 道题目、4 个评分维度、27 种人格标签及解读的 JSON 数据。
步骤 2：生成前端代码
把整理好的素材交给 WorkBuddy，让它一次性生成完整网页：HTML+CSS+JS 全套代码、答题计分维度计算逻辑、结果匹配与百分比展示、纯前端运行不需要服务器后端。 关键步骤：将 JSON 数据作为输入，让 AI 一次性写出答题、计分、维度计算、结果匹配、15 维度评分的完整代码。
步骤 3：制作 27 个 SVG 卡通头像
每种人格一个专属头像：死者（灰色 X 眼躺平表情）、吗喽（极简猴子线条头）、ATM‑er（绿色机器+硬币元素），其他 24 种人格逐一设计。全部用 SVG 手写，轻量化、加载快、风格统一。 关键步骤：让 WorkBuddy 为 27 种人格逐一设计 SVG 头像，保持风格统一。
步骤 4：加动效和细节打磨
粒子背景动画、渐变配色、按钮悬停、数字滚动、进度条动画，最终效果为深色背景+紫色渐变主题+浮动粒子，打开就有科技感。 关键步骤：让 AI 补充粒子背景、渐变配色、按钮悬停、数字滚动、进度条等动画细节。
步骤 5：AI 自动排查保存图片 BUG
功能做完后加了"保存结果图片"功能，但保存出来的图片缺东西：15 个维度评分只显示 8 个、人格头像消失、解读卡片空白。把现象描述给 WorkBuddy，AI 自动读码定位问题出在 Canvas 缩放后的像素单位混淆，并给出统一使用 CSS 像素的修复方案，同时排查出头像 SVG 嵌套重复、解读卡片 drawResultCard 函数漏写两个隐藏坑并一并修复。 关键步骤：只描述现象，WorkBuddy 自动完成读码 → 定位 → 修复 → 优化全流程。
步骤 6：一键部署上线
代码改完后只对 WorkBuddy 说一句"帮我把这个项目部署上线"，AI 自动找到之前的 Git 仓库位置、匹配项目结构、提交推送到仓库、触发部署流程。 关键步骤：一句话指令，WorkBuddy 自动完成 Git 仓库定位、代码提交、推送、部署触发。
六、提示词或任务指令
| 步骤 | 指令 | 作用 |
|---|---|---|
| 1 | 帮我搜集全网最完整的 SBTI 测试题库，整理成结构化数据，包含 15 道题目、4 个评分维度、27 种人格标签及解读，输出 JSON 格式。 | 搜集并结构化 SBTI 题库素材 |
| 2 | 页面显示正常，但保存图片时，15 个维度只显示 8 个，头像消失，解读卡片不显示。 | 让 AI 自动定位并修复保存图片 BUG |
| 3 | 帮我把这个项目部署上线。 | 一句话触发自动部署上线流程 |
七、在 WorkBuddy 中的效果
交付物
- 一个 HTML 文件，打开就能用，功能完整
- 15 道扎心打工人题目
- 27 种魔性人格结果
- 27 个专属 SVG 卡通头像
- 匹配度百分比+滚动动画
- 15 维度详细评分（摆烂度、内耗度、社恐度、打工人指数）
- 次级人格展示（第二、第三匹配类型）
- 一键保存结果图片功能
结果证明
全程工作量对比
| 环节 | 传统做法 | WorkBuddy 做法 |
|---|---|---|
| 搜集题库 | 手动翻网页核对版本，至少半小时 | AI 5 秒输出结构化 JSON |
| 写前端代码 | 从零敲代码 | AI 一次性写完 |
| 画 27 个头像 | 手动设计绘制 | AI 逐一设计 SVG |
| 排查保存图片 BUG | 手动查代码、用工具扫描 | 只描述现象，AI 自动定位修复 |
| 部署上线 | 手动操作 Git 与部署平台 | 一句话 AI 自动完成 |
八、验收标准
- [ ] 网站包含 15 道 SBTI 测试题目
- [ ] 支持 27 种人格结果匹配与展示
- [ ] 每种人格有专属 SVG 卡通头像
- [ ] 展示匹配度百分比与滚动动画
- [ ] 展示 15 维度详细评分（摆烂度、内耗度、社恐度、打工人指数等）
- [ ] 展示次级人格（第二、第三匹配类型）
- [ ] 一键保存结果图片功能正常，图片内容完整不缺失
- [ ] 网站部署上线后可公网访问
- [ ] 手机/电脑通用，双击 HTML 即可打开