蹭热点不丢人，蹭完没东西才丢人。

---

那天SBTI刷屏了

某天晚上，SBTI（一个性格测试）刷爆了我的朋友圈。每个人都在分享自己的测试结果。

我刷了30条朋友圈，其中22条是SBTI。

职业本能告诉我：这是一个内容窗口，而且窗口只有48小时。

热点内容的半衰期极短。今天刷屏的东西，后天就没人记得了。如果要蹭，必须在48小时内出成品。

问题是——从创意到完整的H5互动测试，传统流程至少需要一周：策划1天、文案2天、设计2天、开发2天。

48小时 vs 一周。差5倍。

---

4小时，从创意到上线

第一小时：策划——不是复制SBTI，是"嫁接"

蹭热点的核心不是抄。是借势表达你自己的东西。

SBTI测的是性格类型。我测什么？测你用AI用到了第几层。

根据我观察几十个人用AI的方式，分成4种类型：

类型	名字	特征
S型	打捞型	只在紧急时才用AI，像救生圈
B型	工具型	把AI当高级搜索引擎
T型	系统型	建了自动化工作流
I型	共生型	AI参与决策，改变了工作方式

命名：养虾SBTI——和热点的缩写一模一样，但内涵完全不同。这种"同名不同义"的设计自带传播力。

第二小时：文案——10道题 + 4套结果

让龙虾帮我设计了10道测试题，每道题4个选项分别对应S/B/T/I四种类型。

关键设计原则：

• 每道题不能有"显然正确"的选项——否则测试就变成了智力题
• 题目描述用日常场景而非抽象概念——"你开会前怎么准备？“而非"你如何利用AI？”
• 结果描述要正面——没有人喜欢看到"你是最低级的用法"

4套结果页文案，每套200字。不贬低任何类型，但暗示进阶路径。

第三小时：H5开发——HTML就是产品

不需要小程序。不需要App。一个HTML文件就够了。

让龙虾生成了一个完整的互动测试H5：

• 10道单选题，每道4个选项
• 点击选项自动计分
• 最后根据得分输出类型结果
• 结果页配一张类型卡片（龙虾IP素材）

<!-- 核心计分逻辑 -->
<script>
  const scores = {S:0, B:0, T:0, I:0};
  function selectOption(type) {
    scores[type]++;
    nextQuestion();
  }
  function getResult() {
    return Object.keys(scores).reduce((a,b) => scores[a] > scores[b] ? a : b);
  }
</script>

整个H5不到300行代码。纯前端，不需要后端和数据库。

第四小时：类型卡片——Design-as-Code

4张类型卡片，每张配不同姿势的龙虾IP素材。

不是AI生图——是HTML拼装。背景色、文字、龙虾素材、类型描述，全部用CSS定位。

为什么不用AI生图？因为文字准确性。AI生图的文字经常出错，但这种卡片的每个字都得准确。Design-as-Code保证了文字零错误。

---

数字说话

指标	传统流程	AI全流程	差异
从创意到成品	5-7天	4小时	-90%
策划文案	2-3天	2小时	-83%
H5开发	2天	45分钟	-96%
设计（类型卡）	1-2天	30分钟	-95%
人力投入	策划+文案+设计+开发	1个人	÷4

最重要的不是快——是快到能赶上热点窗口。 4小时意味着晚上看到热点、凌晨就能上线。

---

你也能复制：操作路径

Step 1：嫁接而非复制

蹭热点的公式：热点形式 × 你的内容 = 新产品。

SBTI的形式是"4类型测试"。我的内容是"AI使用分层"。嫁接起来就是"养虾SBTI"。

找到热点的"形式骨架"，把你自己的内容填进去。

Step 2：纯前端H5，够了

互动测试不需要后端。10道题的计分逻辑用JS就够了。不需要数据库、不需要登录、不需要服务器。

一个HTML文件，丢到任何静态托管服务上就能跑。

Step 3：IP素材复用

如果你有品牌素材（吉祥物/LOGO/角色），在类型卡片里复用。这比用通用素材多了识别度。

Step 4：48小时是硬窗口

超过48小时，热点凉了。如果你4小时做不出来，就别做了。

评估标准：我能在4小时内输出一个80分的成品吗？ 能就做，不能就放弃。不要花一周做一个100分的东西——到那时候已经没人关心了。

---

So What：这个案例背后的一般性原则

1. 速度是蹭热点的唯一门槛

内容质量90分但迟了3天 vs 内容质量75分但当天上线——后者的传播效果碾压前者。在热点场景下，速度就是质量。

2. AI不是帮你做得更好，是帮你做得更快

这个H5如果给我一周，不用AI我也做得出来。但没有AI，4小时不可能。AI的核心价值不在于"做不到"→"做得到"，而在于"一周"→"4小时"。

3. “一个HTML文件就是一个产品”

很多人听到"H5互动测试"就想到小程序、后端、数据库。其实纯前端HTML完全够了。降低技术复杂度 = 提高执行速度。

4. Design-as-Code适合所有"文字精确度要求高"的视觉内容

AI生图在创意场景好用，但在"每个字都不能错"的场景里不如HTML。选对工具比用好工具重要。

---

本篇工具链清单

工具	用途
AI Agent（龙虾）	策划 + 文案 + H5代码生成 + 类型卡片
HTML/CSS/JS	互动测试H5 + 类型卡片 Design-as-Code
龙虾IP素材	4种类型的角色配图
静态托管	部署上线

---

下一篇预告：第三季·07——公众号排版丑？AI帮你一键改造成「课堂型」高级感。

---

养虾系列 · 第三季「AI蹭热点」· 第 6 篇
路易乔布斯 © 2026