【生活娱乐赛道】人格图鉴——沉浸式关系生存模拟器
一、Demo 简介
是什么： 一款基于 AI 驱动的互动小说式网页应用，用户选择人格标签组合（如 NPD-INTJ）后，进入分阶段闯关的"关系生死局"，在虚拟场景中演练识人技巧。
面向谁：
-
18-35 岁对心理学、人格标签感兴趣的年轻人
-
正在经历或曾经历情感困惑、想要提升关系洞察力的都市青年
-
对 MBTI、NPD 等话题有天然好奇心、想"低成本试错"的社交活跃用户
主要功能：
- 词条组合选择页
提供 NPD/双向人格障碍 × 6 种 MBTI 类型（INTJ、ENTJ、ENFP、INFJ、ESTP、ISFJ）的组合点选，实时显示难度等级。
- 分阶段生存闯关页
每局剧本按"相识→热恋→博弈"的生命周期推进。顶部展示 AI 生成的动漫风格场景插图，中部呈现情境文本与角色对话，底部显示实时能量值进度条，用户需在三个选项中做出决策。
- 即时反馈与知识讲解
选择后立即判定正误，弹出知识点讲解弹窗——包含心理学概念解释（如 love bombing、煤气灯效应、DARVO 策略）和通俗易懂的避雷建议。
- 结算复盘报告页
通关后生成全方位复盘：生存成功/失败判定、通过阶段数、正确决策数、剩余能量值、平行宇宙全网对比百分比、ECharts 性格雷达图（边界感/觉察力/共情力/应变力/自尊值五维分析）、核心缺陷提示与避雷建议。
界面截图：
【此处请插入 3-5 张 Demo 核心界面截图：首页、词条选择页、闯关页、反馈弹窗、结算报告页】
二、Demo 创作思路
灵感来源：
过去半年，社交平台上"情感反诈"“NPD 识别”"煤气灯效应"等话题频繁登上热搜。年轻人对人格标签（MBTI、NPD、回避型依恋）的讨论热度极高，但现有的产品形态存在明显断层：测试题枯燥缺乏沉浸感，泛聊天 AI 缺乏目标导向与知识复盘。用户在现实情感中试错成本极高，甚至带来心理创伤。我们想做一款能让用户在"安全环境"中体验有毒关系演进过程的产品。
想解决的问题：
-
没有产品能让用户在零成本、零伤害的虚拟环境中，体验有毒关系的演进过程
-
心理学知识看完就忘，缺乏情境化的记忆锚点
-
现实中识别 NPD 等操控者时，往往已经付出沉重代价
-
现有的情感测试只能给标签，无法训练"临场反应"
为什么做这个方向：
“心理健康教育”“严肃游戏"与"AI 陪伴"三个领域的交叉点存在巨大空白。传统的反诈/反操控教育以"说教"为主，而年轻人更接受"体验式学习”。互动小说（Interactive Fiction）的形式天然适合将抽象的心理学知识转化为可感知的"肌肉记忆"。我们通过"选错即出局"的分阶段闯关机制，让用户在 5-10 分钟内完成一次完整的关系推演，认知效率远高于阅读长篇科普文章。
三、Demo 体验地址\
https://animated-longma-339e96.netlify.app/
https://personality-atlas-nu.vercel.app/
本 Demo 为交互式 HTML 格式文件，已打包为 Zip 格式，请下载后在浏览器中解压打开 personality-atlas.html 即可体验。
RGTJ.zip (5.1 MB)
体验路径：
-
首页点击"开始生存挑战"
-
选择人格标签组合（推荐尝试 NPD + INTJ，难度适中，剧本最完整）
-
进入闯关页，阅读情境文本后做出决策
-
查看即时反馈与心理学知识点
-
通关后查看复盘报告与性格雷达图
四、TRAE 实践过程
开发流程概述
本次 Demo 的开发全程使用 TRAE Work 完成，从需求理解到最终交付经历了以下阶段：
-
需求解析阶段：上传需求分析文档，由 TRAE 解析产品核心玩法、用户流程和 MVP 功能点
-
架构规划阶段：确定 5 个核心页面（首页→词条选择→闯关→反馈弹窗→结算报告）的交互流程
-
技术实现阶段：使用 TRAE Work 生成完整的 HTML/CSS/JS 代码，集成 ECharts 雷达图
-
素材生成阶段：使用 TRAE 内置的 AI 生图能力生成 3 张动漫风格场景插图
-
测试交付阶段：本地启动 HTTP 服务，在浏览器中完成全流程测试
关键步骤截图
【此处请插入不少于 3 张 TRAE Work 开发过程截图，建议包含以下内容：】
- 截图 1：向 TRAE 描述需求/上传需求文档的对话框
- 截图 2：TRAE 生成代码的关键步骤
- 截图 3：TRAE 生成场景插图的步骤
- 截图 4：在浏览器中测试 Demo 的界面
关键任务 Session ID
【请将你在 TRAE Work 中完成以下关键任务时的 Session ID 填入此处，双击 TRAE 对话头像即可复制】
-
需求解析与架构规划 Session ID： 2637047730285819:b0c571e16493500a13df0acdd1d2724f_6a3208a9e2d3e06406c0e1c6.6a3208a96ac194e678c310c2.6a3208a9e2d3e06406c0e1c8:TRAE Work CN.0.1.29.no_sid.no_ppe.T(2026/6/17 10:38:33)
-
前端代码生成 Session ID： .2637047730285819:3df11b066a3e234b1cb60970a60aa358_6a3235e10d75f842b4602b9f.6a4238cf7c75f3beb393fb22.6a4238ce4bcc88d24a1fc33b:Trae CN.T(2026/6/29 17:20:15)
-
AI 场景插图生成 Session ID： 2637047730285819:c5766058a3ccead7fdc2bde222647c72_6a3e354c9cc5af807254de61.6a3e354c9cc5af807254de64.6a3e354c9cc5af807254de62:TRAE Work CN.0.1.29.no_sid.no_ppe.T(2026/6/26 16:16:12)
-
测试与调优 Session ID： .2637047730285819:80fd1c1b4db9027b87c8e32d968e4fc9_6a3235e10d75f842b4602b9f.6a4cc4aae23dbec76ae7bdd4.6a4cc4a8de10984fe8c27c4f:Trae CN.T(2026/7/7 17:19:38)
五、补充说明
报名帖链接：
报名：【生活娱乐赛道】人格图鉴——沉浸式关系生存模拟器
通过
：https://forum.trae.cn/t/topic/63989
开发心得：
在开发过程中，我们刻意将 Demo 的复杂度控制在"可完整体验"的范围内，而非追求功能堆砌。核心设计原则是：每一个交互步骤都必须服务于"让用户感受到价值"这一目标。例如，即时反馈弹窗不仅告知对错，还强制输出一个心理学知识点和一个避雷建议——这样即使用户答对了，也能学到新东西。能量值进度条的设计则让抽象的"自尊受损"变得可视化，当能量归零时，用户能直观感受到"这段关系把我消耗完了"。
未来迭代方向：
-
接入 AI 动态剧本生成，支持用户自定义输入真实聊天记录进行"镜像模拟对决"
-
增加语音读题、环境音效等多模态交互
-
引入 AI 心理学导师"场外指导"功能
-
搭建数据统计引擎，为"平行宇宙"功能提供真实的全网对比数据
本作品由 TRAE Work 开发完成，感谢 TRAE AI 创造力大赛提供的展示平台。
