核心摘要
最近，带有“送钱者”、“CTRL”等标签的 SBTI 测试 刷屏了朋友圈。作为一个独立开发者或产品经理，你是否想过：如果让我来做一个类似的爆款测试，需要多久？过去可能需要一周的前后端开发，但在 AI 时代，通过 Vibe Coding 和 Spec Coding，这个时间可以被压缩到 半天。本文将为你硬核复盘，我们是如何利用 AI 编程工具（如 Trae / Cursor），从零构建一个高颜值、带 15 维雷达图海报的 SBTI 测试站点的。
目录
- Vibe Coding vs Spec Coding
- 第一步：需求拆解与生成 Spec（1 小时）
- 第二步：核心架构与组件生成（2 小时）
- 第三步：死磕高保真体验（1.5 小时）
- 最佳实践：给独立开发者的避坑指南
- 常见问题 (FAQ)
- 总结
核心要点
- 开发范式转变：从“手写代码”转变为“撰写清晰的 Prompt 和 Spec”。
- 架构设计：使用 Next.js 独立路由 (
/quiz/[slug]) 配合 i18n 多语言体系。 - 动效优化：利用
requestAnimationFrame解决答题卡片切换时的视觉闪烁。 - 踩坑实录：分享如何绕过
html2canvas渲染 rgba 颜色和阴影的 Bug。
🔧 体验成品：你可以先访问 SBTI 在线测试，体验我们用 AI 辅助开发的最终产品。
Vibe Coding vs Spec Coding
在开始之前，我们需要明确两种 AI 辅助开发的流派：
- Vibe Coding（氛围编程）：跟着感觉走，直接用自然语言告诉 AI “我要一个什么样的页面”，边看边改。适合快速 MVP 和灵感验证。
- Spec Coding（规格编程）：工程化思维。先让 AI 产出
spec.md（需求说明）、tasks.md（任务拆解）、checklist.md（验收清单），确认无误后再让 Agent 批量执行。适合复杂状态管理和长线项目。
在复刻 SBTI 测试站点的过程中，我们采用了 “前期 Spec Coding + 后期细节 Vibe Coding” 的混合模式。
第一步：需求拆解与生成 Spec（1 小时）
SBTI 测试看似简单，其实包含复杂的流转：首页 (Intro) → 答题页 (Quiz) → 结果计算 → 结果海报页 (Result) → 人格图鉴 (Gallery)。
在生成 Spec 时，我们首先拆解了源站的核心视觉（如小丑 JOKE-R 的人物卡片设计）
我们首先在 AI IDE（如 Trae 或 Cursor）中进入 Spec 模式，输入一段高维度的 Prompt：
Prompt 示例： "我要构建一个类似 SBTI 的 15 维性格测试网站。前端框架为 Next.js (Pages Router) + CSS Modules。 核心需求：
- 数据源：从
quiz-definitions.ts读取 30 道题和 15 个人格维度映射。- 路由：独立的
/quiz/sbti体系，支持 SSR。- UI：高保真复刻，要求支持移动端响应式，包含毛玻璃效果。
- 功能：答题结束后生成 15 维雷达图，并支持长按保存海报。 请先生成
spec.md和tasks.md。"
AI 会瞬间为你梳理出清晰的数据结构和组件层级。只有当 Spec 足够严谨（比如明确了状态存在父组件还是子组件），后续的生成才不会陷入“无限循环的幻觉 Bug”中。
第二步：核心架构与组件生成（2 小时）
在确认 Spec 后，授权 AI Agent 开始批量执行（Execute）。在这个阶段，AI 的爆发力得到了完美体现：
1. 动态路由体系
AI 自动生成了 /pages/quiz/[slug]/index.tsx 和 /pages/quiz/[slug]/result/[code].tsx，这意味着系统不仅能跑 SBTI，未来还能零成本接入 MBTI、九型人格等其他测试。
2. 状态机流转
AI 生成了基于 useState 的视图切换逻辑，在不刷新页面的情况下实现了：
IntroView → QuizView → ResultView 的无缝切换，并保留了答案数组的上下文。
3. 多语言 i18n
只需提供一份基础的中文 JSON，AI Agent 就能自动补全英文 JSON，并在所有组件中植入 useTranslation('sbti-test') 钩子。
第三步：死磕高保真体验（1.5 小时）
骨架搭好了，但真正的魔鬼都在细节里。这时候我们切回 Vibe Coding 模式，针对具体 Bug 进行逐个击破：
痛点 1：答题卡片切换闪烁
当用户点击选项时，下一题的出现会有极其短暂的闪烁。
- Vibe 沟通：“现在的
setTimeout动画有闪烁感，请帮我重构，用纯 CSS transition 解决。” - AI 方案：AI 引入了 双重
requestAnimationFrame(rAF) 模式。先将卡片opacity设为 0，等待浏览器渲染一帧后，更新题目索引，再在下一帧恢复opacity: 1，实现了极其丝滑的淡入淡出。
痛点 2：海报生成红框 Bug
结果页需要用 html2canvas 截取 DOM 生成海报。但在测试时，海报边缘莫名出现了红框，且排版错乱。
这是最终修复后生成的完美海报效果
痛点 3：微信浏览器下载拦截
- Vibe 沟通：“在微信里点击‘保存海报’没反应。”
- AI 方案：AI 增加了一段
navigator.userAgent嗅探代码。如果检测到MicroMessenger，则隐藏下载按钮，并在顶部弹出提示：“请长按图片保存”。
最佳实践：给独立开发者的避坑指南
- CSS Modules 比 Tailwind 更容易微调：虽然 Tailwind 写起来快，但在让 AI 进行像素级 UI 修改（比如处理移动端的负 Margin 导致的空间冗余）时，隔离的 CSS Modules 能大幅减少样式污染。
- 单一数据源 (Single Source of Truth)：不要让 AI 在页面里硬编码题目。务必让 AI 先写一个
quiz-definitions.ts，所有组件只读这个文件。 - 分阶段 Commit：AI 也是会把代码改坏的。每当完成一个大模块（如答题逻辑），立刻 commit。一旦 AI 陷入改 Bug 的死循环，立刻回滚，重新思考 Prompt。
常见问题 (FAQ)
Q1: Vibe Coding 真的能完全替代手写代码吗？
目前不能。Vibe Coding 负责“快速起量”，但对于复杂的动画渲染时序（如 rAF）、特定的跨端兼容性问题（微信浏览器），仍然需要开发者有查错能力，引导 AI 去修复。
Q2: Spec Coding 适合什么样的项目？
适合有明确数据流转、涉及多个文件联动的项目（如包含用户系统、状态管理的 Web App）。如果是单页面的计算器工具，直接 Vibe Coding 即可。
Q3: 为什么要将测试结果页做成独立路由？
为了 SEO 和社交裂变。如果只有一个 /quiz/sbti，用户分享出去的链接别人打开只能看到首页。使用 /quiz/sbti/result/ATM-er 这种独立路由，配合 Open Graph 标签，可以实现“点击别人分享的链接，直接看到别人的测试结果”的裂变效果。
总结
从需求拆解到最终部署，借助 Spec Coding 和 Vibe Coding，一个原本需要几天工作量的全栈多语言性格测试站点，被浓缩到了一个下午。
在这个时代，代码实现能力正在贬值，而产品定义能力和 AI 驾驭能力正在飙升。掌握这种全新的开发范式，你一个人就能活成一支军队。
👉 去看看 Vibe Coding 的成果：体验 SBTI 测试
相关资源
- 什么是 SBTI 测试？ — 了解这个火爆全网的 15 维测试
- Spec Coding 完全指南 — 深入学习 AI 规格化编程
- Vibe Coding 最佳实践 — 提升你的 AI 结对编程效率