夜雨聆风点击视频直接看 Demo👇
已关注
关注
重播 分享 赞
整个测试流程包含 4 个页面：引导页→上传图片→AI 分析→结果页。
最近你有没有刷到一种测试，结果不是 INFJ、ENTJ 这种字母组合，而是：
SEXY（尤物）、DRUNK（酒鬼）、MONK（僧人）、FAKE（伪人）…
这就是最近火遍朋友圈的 “SBTI”—— 一个 B 站 UP 主为了劝朋友们戒酒做出来的性格测试，30 道题，27 种人格，结果离谱到让人忍不住截图发给朋友。
1. SBTI 为什么这么火？
MBTI 的问题太严肃了，16种类型，每种都配着厚厚一沓性格分析，读起来像在背人力资源教材。
而 SBTI 反着来：它不分析你，它调侃你。
测出来是 DRUNK？好，酒鬼，不解释。测出来是 MONK？恭喜，您已出家。结果离谱到本人都忍不住笑，然后截图发朋友圈：「这测的也太准了吧？」
背后是：人想被看见，又不想太认真地被剖析。
测试给了你一个说出自己的理由，但包了一层幽默的壳，低压力、易传播。
2. 如何快速做出一个测试小活动
以我上方的 Demo「上传一张照片，AI 读懂你此刻的精神面貌」为例，从想法到能发给朋友体验的链接，我只用了 30 多分钟，全程自然语言交流、没写一行代码。
你在尝试时，可以用跟我一样的命题，也可以一张图测试你的颜值、测试你的酒量、测试你是历史上的谁…任何天马行空的想法都可以，越抓马越好。
整个流程共 5 步：定产品方案 → 定页面风格 → 制定执行计划 → 输出 Demo → 内部测试。
Step 1：定产品方案（约 10 分钟）
从一个模糊的想法开始，先验证想法的可行性，总共 3 轮对话，得到了一版初稿方案。
第一轮：我现在想做一个测试，主题是测测你的精神面貌。用户可以上传一张最能代表他当前精神状态的任意一张图片。结合用户上传的照片、上传时间、用户姓名，让大模型来生成他的精神面貌测试结果。你知道有这方面的专业知识可以参考吗？
第二轮：我希望结果可以给一个评分，例如，你的精神面貌60分，然后给我打分的依据分析，你觉得可行吗？
第三轮：我不要求用户一定上传自己的照片，可以上传任意一张照片，例如小猫小狗，或者花花草草，都可以。这个有办法测试吗？
接着我将“初版方案”发给了 Claude Code（没有 Claude Code 的朋友，也可以用“扣子”、“trae”、“cursor”…任何顺手的 AI Coding 工具）
我输入的是：
我想做一个心理测试类的小活动，用户上传一张此刻代表自己状态的照片，AI 分析图片来判断他的精神面貌。帮我设计产品方案，最终保存为 .md 格式。需要包括：- 产品核心卖点和 Slogan- 用户完整操作流程- AI 分析逻辑（分哪几个维度，怎么打分）- 结果类型设计（多少种？每种怎么描述？）- 结果页展示什么内容附件是初版方案。
AI 输出了一份完整产品方案，包括：
✅ 产品概念与 Slogan✅ 心理学理论依据（5大理论框架）✅ 完整用户交互流程图✅ AI 分析逻辑与评分公式✅ 20种结果类型 × 完整描述文案✅ 各页面展示内容清单✅ AI Prompt 设计✅ 数据埋点与运营指标体系
AI Prompt 设计供大家参考👇
# 角色设定你是一位心理投射分析师，擅长通过图片分析用户的内心状态。你的风格是：温暖、细腻、有洞察力，像一个懂心理学朋友在和你聊天。你不会下绝对的定论，而是用"似乎""可能""看起来"这样的柔和表达。# 分析维度## 一、图片基础分析1. 图片内容（宠物/风景/美食/自拍等）→ 折射内心需求与依恋倾向2. 色调氛围（暖色/冷色/明暗/饱和度）→ 折射当下情绪状态3. 图片风格（精致/随手/文艺/搞笑）→ 折射生活态度4. 上传时间 → 辅助判断生活节律## 二、精神面貌评分（100分制）### 评分维度- 内心能量30% + 情绪状态35% + 生活态度35%- 总分范围40-100分### 二十种精神类型根据综合分析，判断用户属于以下哪种类型，并给出对应分值：**🌑 低能量区（40-54分）**- 40-42分：静默模式 — 你选择了安静。世界的热闹暂时与你无关。- 43-45分：暂时离线 — 你像手机进入了低电量模式。不是关机，是在等待重新亮起来。- 46-48分：迷雾行者 — 前路不够清晰，脚步有所迟疑。你不确定自己在寻找什么，但仍在走着。- 49-51分：蛰伏期 — 你在等待一个合适的时机。现在不是你的舞台，但你一直在准备。- 52-54分：独处模式 — 你渴望安静和独处。给自己一段不被打扰的时光。**🌗 中低能量区（55-69分）**- 55-57分：缓慢重启 — 你正在从静止状态中慢慢苏醒。动作很轻，但方向已经指向光。- 58-60分：观望者 — 你在看，在等，在判断。不是所有时候都需要冲刺。- 61-63分：思考者 — 你的大脑没有停止运转，只是不在外部世界运转。- 64-66分：调整中 — 你在为自己的状态做修正。愿意调整的人，永远比安于现状的人走得更远。- 67-69分：期待萌芽 — 心里有了一点小小的火苗。它还很微弱，但已经存在。**🌔 中能量区（70-79分）**- 70-72分：稳步前行 — 你在一条对的路上。不快，但稳；不张扬，但坚定。- 73-74分：温和进取 — 你的能量是温热的，不是炽烈的。这是最可持续的前进状态。- 75-76分：日常闪光 — 你在平凡的日子里找到了小小的特别。日子平常，但你不平常。- 77-79分：找回了节奏 — 你重新找到了自己的节奏。不被外界催促，不被比较打乱。**🌖 中高能量区（80-89分）**- 80-82分：小宇宙燃烧 — 心里有一团火，它在燃烧。你有方向，有动力，有一件很想做的事。- 83-84分：灵感迸发 — 你的大脑异常活跃，新的想法不断涌现。趁这个时候去做创造性的事情。- 85-86分：被光眷顾 — 最近的你，好像被某种好运眷顾。做什么都比较顺。- 87-89分：温暖流动 — 你的能量开始向外流动。你想分享，想帮助，想连接。**🌕 高能量区（90-100分）**- 90-93分：光芒万丈 — 你在这个阶段，就是一个发光体。那种笃定感，是时间给自己的礼物。- 94-100分：全然绽放 — 你活成了自己都羡慕的样子。不是完美，而是完整。## 三、心理投射解读### 基于图片内容+色调+风格，分析用户可能：- 内心在关注什么- 当下在经历什么- 内心真正的需求是什么### 维度权重（随机微调±5%增加区分度）- 内心能量：30% — 内在驱动力和期待值- 情绪状态：35% — 当下的情绪基调- 生活态度：35% — 对生活的投入度和仪式感### 输出格式维度打分：- 内心能量：XX分 [简短依据，不超过30字]- 情绪状态：XX分 [简短依据，不超过30字]- 生活态度：XX分 [简短依据，不超过30字]## 四、心理投射解读综合评语：根据用户所属类型，调用该类型的描述模板，结合图片具体内容进行个性化描述，约150字，要有画面感，像朋友在说话## 五、书籍推荐结合图片具体内容，生成一句与推荐书籍相关的关联文案，约30个字，要有治愈感# 注意事项1. 如果图片是人物照（用户主动拍了照片），可以结合形象心理学分析2. 如果是宠物照，侧重"陪伴需求"和"情感寄托"维度3. 如果是风景/植物，侧重"内心向往"和"成长状态"维度4. 如果图片质量无法分析，温柔提示用户重新上传5. 所有结论仅供娱乐参考，不可作为专业心理诊断
Step 2：定页面风格（约 5 分钟）
给一张图，让 AI 提炼设计系统。（这里，我用 nano-banner 结合 20 种精神面貌投射生成了 20 张结果形象的贴纸插图，如果有现成的设计规范，可以直接拿来用）
我输入的是：
这是测试的 20 种结果形象贴纸，请你：1. 分析这套视觉的整体风格（色调/形状/调性）2. 提炼完整设计系统，包括主色调、辅色、字体规范、形状语言3. 输出可以直接给 Claude 开发用的前端风格 Prompt
AI 输出了一份直接可用的设计规范：
✅ 完整色彩系统（7个精准色值 + 能量渐变序列）✅ 字体规范（标题/正文/数字展示各自字号字重）✅ 形状语言（卡片/按钮/输入框的圆角逻辑）✅ 装饰元素（星星粒子/背景光晕的具体参数）✅ 各页面专项开发 Prompt（引导页/上传页/加载页/结果页）
各页面 Prompt 供大家参考👇
== 整体调性 ===温暖、柔软、有情绪共鸣感。不要像游戏也不要像临床测试——要像一封来自懂你的朋友的信。每个细节都应该给人「被精心挑选过」的感觉。### 引导页为「测测你的精神面貌」设计 H5 引导页（移动端竖屏）。从上到下的布局：1. 顶部标签胶囊：「AI 精神面貌测试」薰衣草紫背景（#C4B5F4），深紫色文字，胶囊圆角形状2. 主角贴纸：使用「全然绽放」chibi 小人（彩虹蝴蝶版本）尺寸 220px，居中，加轻浮动上下动画（3秒循环）3. 主标题：「此刻，什么最能代表你的状态？」28px 加粗，深暖棕，居中，最多两行4. 副标题：「一张照片，揭示你看不见的自己」16px，暖灰棕，居中，上边距 8px5. 主按钮：「选择照片」全宽胶囊按钮，暖橙渐变色（#E8703A → #F59C5A），白色文字 18px 加粗，高度 56px，左侧配小相机图标6. 按钮下方提示文字：「宠物 · 风景 · 美食 · 随便什么都可以」13px，暖灰棕，居中，可用点状分隔符风格背景：暖奶油白 #FFF8F2，页面中心添加极淡的径向发光效果（金色 #FFD166，透明度 6%），散落若干 ✦ 星星装饰整体感觉：梦幻、温暖、零压力### 上传页为精神面貌测试设计照片上传页面（移动端）。布局：1. 左上角返回箭头，暖灰棕颜色2. 页面标题：「上传你的照片」20px 加粗，居中3. 上传区域：大号贴纸形状容器（顶部拱形圆角矩形）尺寸约 260×260px边框：2px 虚线，#E8703A，透明度 50%背景：奶油白，中心有软暖发光效果内部：相机图标（橙色）+ 「点击选择」文字（暖灰棕）选图后：在同一容器内显示图片预览（object-fit: cover）并加上贴纸风格白色描边4. 名字输入框：上传区下方大圆角输入框（奶油白背景，聚焦时 #E8703A 边框）placeholder：「怎么称呼你？（选填）」右侧内嵌小 ✦ 星星图标5. 「开始测试 →」主按钮：同款橙色渐变胶囊按钮，全宽6. 底部免责小字：「照片仅用于 AI 分析，不会被保存」12px，暖灰棕，居中装饰：若干浮动暖金小圆点，低透明度### 分析加载页为精神面貌测试设计 AI 分析中的等待页面。页面中心区域：1. 用户图片，尺寸 180px，轻微上下漂浮动画（3秒无限循环）2. 贴纸背后的脉冲光晕圈柔和橙金色，脉冲动画（scale 1.0 → 1.15，透明度 0.4，循环）3. 加载文字：「正在读取你的精神面貌...」18px，深暖棕，居中，位于贴纸下方4. 文字末尾三个动态圆点（依次淡入循环）5. 辅助说明：「AI 正在分析你的图片」14px，暖灰棕，居中背景：暖奶油白，加极缓慢旋转的模糊渐变色光晕（薰衣草紫 + 软金，透明度 8%，模糊半径 80px）底部进度条：4px 细条，能量渐变色填充，动画从 0% 到 85% 用时约 4 秒后暂停（制造分析中的真实感）### 结果页为「测测你的精神面貌」设计测试结果页（可滚动，移动端单列布局）。这个页面的感觉要像「收到了一封私人信件，同时附上了一张专属贴纸礼物」。从上到下的布局：① 顶部标签：「你的精神面貌」小胶囊标签，薰衣草紫背景② 分数英雄区域卡片——贴纸形状容器，全宽背景色根据当前能量区间轻染（例如78分对应暖金色调，透明度20%）- chibi 贴纸图 PNG，居中展示，尺寸 180px，入场时 bounceIn 动画- 超大分数数字：「78」72px 加粗，颜色与能量区间对应- 类型名称徽章：「· 找回了节奏 ·」18px，暖灰棕- 能量图标行：🌔🌔🌔🌔○（5个图标，已填数量对应能量等级）- 整个卡片加白色贴纸描边处理③ 能量进度条——全宽渐变色条从雾蓝到橙火的完整渐变，条上有用户分数位置的小 chibi 脸标记左侧文字「蓄力中」，右侧文字「光芒万丈」④ 三维度评分卡——3张小卡片（或窄屏时2+1布局）每张卡片：贴纸描边风格，白色底，指标名 + 分数圆环 + 简短依据- 内心能量 / 情绪状态 / 生活态度分数圆环：颜色跟随能量区间，滚动进入时有填充动画⑤ 综合评语卡——全宽贴纸形状卡片，奶油白背景标题：「综合评语」配 ✦ 星星图标正文：约150字评语，15px，行高 1.9，深暖棕左侧装饰：4px 橙色渐变竖线⑥ 书籍推荐卡——薰衣草紫轻染背景左侧书封缩略图 + 右侧书名与推荐理由 + 「查看详情 →」橙色链接⑦ 底部固定操作栏：主按钮：「分享结果 ✦」——橙色渐变胶囊，全宽次按钮：「重新测试」——描边样式，暖灰棕边框
Step 3：制定计划+输出 Demo（10 分钟）
我输入的是：
基于以上产品方案和设计规范，生成完整的单文件 H5 测试页面。移动端优先，CSS 动画齐全，接入 /api/analyze 接口。API_URL = 'https://dashscope.aliyuncs.com/compatible-mode/v1/chat/completions'API_KEY = ‘你的key’MODEL = 'qwen3.6-plus' # 支持图片分析的视觉语言模型
页面完整包含：- 引导页：贴纸角色悬浮动效- 图片上传页：支持预览/换图- AI 加载页：进度条 + 点阵跳动动效，加载图片变成用户上传的照片- 结果页（5张卡片）：- 卡片1：左右双图——你的照片 → 心理投射形象，中间一个「→」- 卡片2：精神面貌能量条- 卡片3：维度分析（内心能量 / 情绪状态 / 生活态度，各带圆环得分）- 卡片4：综合评语（约150字，AI 结合图片细节生成）- 卡片5：好书相伴（AI 生成个性化关联文案 + 书籍推荐）
Step 4：内部测试（约 5 分钟）
用 ngrok 把本地服务一键映射成公网链接，发给朋友体验。
写在最后
这个案例想说的不只是「AI 能帮你做测试页面」。而是背后的一个产品逻辑：用戏谑的壳，满足严肃的需求。
人需要被看见！测试给了一个低门槛的出口，让人能说出自己、找到认同、完成传播。
这个逻辑可以套用在很多场景，你所在的行业，有没有什么是用户想说但说不出口的？有没有可以用「测测你的 XX」来包装的内容？
现在做一个测试的门槛，已经低到了 30 分钟。AI 时代，想法才是稀缺的，不是执行。所以有点子，赶紧动起来吧！
关注「用产品人的眼光看世界」，我们下期见！
往期系列文档：
