生活娱乐 | 人生说明书
1. Demo 简介
是什么： 一个 Web 单页应用。AI 与用户进行深度访谈，生成一份结构化的"个人使用说明书"——从沟通方式、情绪雷区、激励开关、决策风格、压力反应、边界底线六个维度，帮你读懂自己，也让在乎你的人用对的方式靠近你。本帖已最大的诚意全面分享供大家讨论学习，实在看不下去其他作者遮遮掩掩又是打码又是截图区域做手脚的行为，用什么模型都不愿意分享的还来参赛干嘛？
面向谁： 任何想更了解自己、或想改善亲密关系/职场关系/家庭关系的人。不设年龄门槛，不需要心理学背景。
主要功能： 围绕"说明书"这一核心数据，衍生出 8 大功能模块：
| 功能 | 说明 |
| 说明书生成 | AI 深度访谈（15 轮对话），6 大维度 9 字段结构化输出 |
| 关系匹配 | 输入对方特征，生成双人雷达图 + 相似/差异/建议/摩擦/甜蜜区指南 |
| AI 关系顾问 | 描述具体场景，基于说明书给出核心提醒、推荐说法、避免说法、关系维护四色策略 |
| 冲突模拟器 | 预演冲突场景——你的可能反应、对方的可能反应、化解路径 |
| 关系温度计 | 定期记录三维度状态（沟通顺畅度/情绪安全感/满意度），生成 SVG 温度趋势曲线 |
| 说明书 DNA | 六维度数据生成独一无二的六瓣花形 Canvas 视觉指纹，支持下载和编码复制 |
| 团队/家庭地图 | 2-5 人特征输入，生成角色分工、潜在冲突、互补优势、协作建议 |
| 分享导出 | 卡片式分享、文本复制、浏览器打印、历史记录（本地保存最多 20 份） |
两套模式：
-
快速体验模式：预设访谈脚本，零门槛零成本，立刻出结果
-
真实 AI 模式：对接豆包大模型（doubao-seed-2.0），真正的深度对话
界面预览：
（首页 Hero 区域截图）
（说明书展示页截图 —— 六大维度杂志式章节）
（关系匹配雷达图 + 匹配结果截图）
（DNA 指纹截图）
2. Demo 创作思路
灵感来源：
朋友之间闹矛盾，我经常听到一句话：“我也不知道为什么，ta 就是不懂我。”
后来我发现，不是不想懂，是不知道该从哪懂。人和人之间最远的距离，不是立场不同，而是连对方的基本操作手册都没有。
在职场、亲密关系、家庭里，我们每天都在猜对方想要什么、怕什么、怎么沟通才不踩雷。这些"想说但说不出口"的信息，如果能被结构化地呈现出来，很多摩擦根本不会发生。
想解决的问题：
-
自我认知的碎片化：很多人对自己的了解是零散的、感性的，无法用语言传给别人。访谈 + 结构化输出，把模糊的自我认知变成一份能拿出手的文档。
-
关系中的信息不对称：两个人互相猜，猜错就踩雷。说明书提供了"对的方式"和"别碰的雷区"，降低沟通成本。
-
缺乏持续追踪工具：关系不是一次性的事，温度计让你定期记录，看见变化趋势，而不是等到出问题才反思。
为什么做这个方向：
-
心理学工具太学术、太复杂，普通人用不起来；星座/性格测试太娱乐、太模糊，缺乏可操作性
-
用 AI 访谈的方式，既有专业深度，又有对话温度，降低使用门槛
-
从一个人到两个人到一群人，产品有天然的扩展路径
3. Demo 体验地址
下载下方 HTML 文件并在浏览器中打开（推荐）
index-v2.zip (60.7 KB)
4. TRAE 实践过程
开发工具： TRAE IDE（全程在 TRAE IDE 中完成）
开发方式： 初始 Demo 框架由 TRAE 生成，后续所有功能迭代、UI 优化、BUG 修复均通过 TRAE IDE 与 AI 对话协作完成。
关键开发节点：
-
Demo 架构搭建：从零开始，用 TRAE 生成单文件 HTML 单页应用框架，包含 7 个核心视图（欢迎页、设置页、访谈页、生成中、说明书展示、关系匹配、分享页），实现预设模式 + AI 模式双通道。
-
豆包 API 集成：对接豆包大模型 API，实现真实 AI 深度访谈。期间解决 Model ID 格式问题（需使用带日期后缀格式如
doubao-seed-2-0-lite-260215），并建立完整的错误降级机制（404/401/403/429 各状态码映射友好提示）。 -
UI 全面升级：采用 Soft Structuralism（柔和结构主义）风格 + 双嵌套架构（Double-Bezel），重写全部 CSS，建立 4 级阴影系统、4 级圆角网格、物理弹簧缓动曲线、IntersectionObserver 滚动揭示动画、Toast 通知系统、ripple 波纹效果等。
-
说明书内容大幅扩充：每个维度从 3 字段扩展到 9 字段（tags/desc/detail/examples/do/dont/tips/level/compat），并全部重写文案去 AI 味——禁用排比、说教、模板句、机械转折，改为口语化表达。
-
周边功能扩展：从单一说明书生成，衍生出关系匹配（双人雷达图 + 匹配度评分）、AI 关系顾问（四色策略卡）、冲突模拟器（三方预演）、关系温度计（SVG 趋势曲线 + 本地存储）、说明书 DNA 指纹（Canvas 绘制六瓣花形）、团队/家庭对比（群体相处地图）等 8 大功能模块。
-
代码审查与质量保障：进行全面的代码审查，修复 5 个严重 BUG（fadeUp 动画未定义、空指针风险、placeholder 不换行等）、7 个中等问题（CSS 重复定义、死代码、视图切换不一致等），统一各页面标题/背景/卡片/输入框样式。
关键步骤截图：
（TRAE IDE 对话界面截图1 ）
（TRAE IDE 对话界面截图2）
（TRAE IDE 对话界面截图3）
关键任务对话 Session ID（不少于 3 个）：
|.3041719401614576:0974df2aea2e46f1527b980486f62b04_6a31ec88049b15b4a5b96de2.6a31f1d4049b15b4a5b96e48.6a31f1d4a758e1bf1625ff84:Trae CN.T(2026/6/17 09:01:08) |
|.3041719401614576:6be64eb510f6f524c8644994c6274d2e_6a31ec88049b15b4a5b96de2.6a31f66d049b15b4a5b96eb1.6a31f66ca758e1bf1625ff85:Trae CN.T(2026/6/17 09:20:45) |
|.3041719401614576:6110446cabcc7687d512e75ff14870f5_6a31ec88049b15b4a5b96de2.6a31fa31049b15b4a5b96f25.6a31fa30a758e1bf1625ff87:Trae CN.T(2026/6/17 09:36:49) |
报名帖链接：
开发心得（可选补充）
这个项目让我体会最深的是——TRAE 不只是帮你写代码，它帮你迭代思想。
从最初"做一个性格测试工具"的模糊想法，到最终包含 8 大功能模块的完整产品，中间经历了 26 轮对话迭代。每一轮 TRAE 都在帮我梳理逻辑、发现盲区、提出新方向。
几个踩过的坑：
-
豆包模型名格式：
doubao-seed-2.0-pro是 Coding Plan 用的，通用 API 需要用带日期后缀的doubao-seed-2-0-lite-260215 -
AI 味文案：AI 生成的内容很容易有模板句、排比、说教，需要反复调整 prompt 让它"说人话"
-
单文件 HTML 的边界：所有功能塞在一个文件里，CSS 和 JS 都超过 2000 行，维护成本越来越高。复赛阶段考虑拆分为模块化结构
如果你也在做类似的 AI 访谈类产品，欢迎交流~
