【生活娱乐赛道】棱镜 Prism - Demo

[u4381977694970407]

0. 先和大家打个招呼吧

• 你是谁： 在读学生，同时是一名AI爱好者

• 你是怎么用 TRAE 把 Demo 做出来的： 棱镜这个想法在我脑子里想了很久，但我一直没动手，我不会写复杂的前端框架，纯手写又怕搞不定视图路由和三栏布局这些细节。直到我用 TRAE IDE，把想法一句句讲给它听。

• 第一步我描述了核心逻辑：“用户输入一个决定，AI 把它拆成几条路，每条路展开最好、一般、最坏三种发展，还要有当事人视角。”TRAE 帮我把这个模糊想法翻译成了清晰的数据结构和视图路由。那一刻我觉得，原来把脑子里的东西变成能跑的产品，可以这么直接。

• **中间遇到一个坎：**决策树在手机端文字太小看不清。我描述给 TRAE 听，它建议用 overflow-x:auto 让决策树横向滑动而不是等比缩小。这种“既保住可读性、又不破坏布局”的方案，我自己未必能第一时间想到。

• 棱镜的设计语言（纯白底 + Cormorant Garamond + 彩虹色阶动态强调色 + 伪 3D 棱镜意象）也是我和 TRAE 一轮轮磨出来的，从一开始的锥形棱镜改到三角棱镜、从直射光束改到散光折射，每一步都是“我描述感觉，它翻译成代码”。整个开发过程像和一个懂技术的合伙人聊天，我把方向，它出执行。

1. Demo 简介

• **是什么：**一个交互式决策辅助网站。用户输入一个纠结的决定，棱镜将其如一束白光般拆解为多条平行路径，每条路径展开最好 / 一般 / 最坏三种发展下的多维度可能性，让用户在决定前“提前活一遍每种可能”。

• **面向谁：**站在人生岔路口、对某个决定犹豫不决的普通人——要不要辞职创业、要不要离开北京回老家、要不要和对方分手。所有需要“多想一步”的人。

• **主要功能：
  1.决策折射：**AI 将一个决定拆解为 3 条平行路径（如”辞职创业”会拆成”辞职创业 / 继续打工 / 骑驴找马”），每条路径在三态下展开人际关系、工作发展、财务状况、1 年后的你、10 年后的你、当事人视角
  **2.三态横向对比：**每条路径展开最好 / 一般 / 最坏三种发展，三栏横向对比同一维度在不同发展下的变化，不是简单的优点/缺点，而是把每条路”活一遍”
  **3.多视角模拟：**模拟当事人（合伙人、父母、伴侣、领导等）在三种发展下的内心独白，补全用户看不见的盲区

• 界面展示：

  
  
  
  

2. Demo 创作思路

• 灵感来源：
  1.人在做重大决定时，最痛苦的不是“不知道选什么”，而是“看不见选了之后会发生什么”。我们的大脑天生只能模拟一条线性的未来，对平行的可能性几乎无感。但你纠结的每一个决定，其实都分裂出了无数条平行时间线——只是你只能活在其中一条里。
  2.棱镜的隐喻就来自这里：一束白光（你的决定）穿过棱镜，被折射成多条彩色的光（多条平行的可能）。棱镜不替你做选择，它只负责”展开”，让你在决定前看见每条路最好、一般、最坏的样子。

• 想解决的问题：
  1.**决策盲区：**人很难同时想象”最好”和”最坏”两种发展，更难横向对比同一维度（比如”财务状况”在三种发展下分别会怎样）
  2.**视角单一：**我们做决定时只从自己的角度看，很少站在父母、伴侣、合伙人、领导的位置想过
  3.**时间短视：**1 年后的我会怎么看这个决定？10 年后的我呢？人很难自己模拟这种长期回望

• **为什么做这个方向：**决策辅助工具市场上不少，但大多停在“帮你列出优点/缺点”的层面。棱镜的不同在于：
  1.**不是评判，是展开：**AI 全程不做价值判断，不告诉你“应该选哪条”，只负责把每条路的可能性展开给你看
  2.**三态结构：**不止“好/坏”二分，加了“一般”这个最真实的中间态，大多数决定既不会最好也不会最坏，就是“还活着”的状态
  3.**多视角：**不只是自己的视角，还模拟当事人内心，补全你的盲区
  4.**长期回望：**1 年后的你、10 年后的你，用回望的视角看现在的决定，会有完全不同的感受

3. Demo 体验地址

• **在线体验：**https://prism-demo.albedox.cc.cd/

• **GitHub 仓库：** GitHub - ZmcX-Z/Prism-Demo: 棱镜 Prism Demo · GitHub

• ZIP文件：

  prism-demo-public.zip (151.7 KB)

• 两种模式：
  1.**体验模式（默认，无需配置）：**内置三个预设场景（辞职创业 / 回老家 / 分手），每个场景有完整的分支、三态发展、当事人视角，点两下就能看到核心效果
  2.**正式模式：**点击顶部切换条切换，左下角配置 AI 接口后，可输入任意决定让 AI 实时拆解 3.**建议体验路径：**打开页面 → 点“要不要辞职创业”卡片 → 回答几个问题 → 决策树 → 点任意分支 → 看三栏对比 → 看总览。全程 3-4 步。

4. TRAE 实践过程

• **开发工具：**TRAE SOLO CN

• **开发流程：
  1.创意提案阶段：**在 TRAE SOLO CN 中与 AI 多轮讨论，从最初的“决策多重宇宙”概念，逐步收敛为“棱镜 Prism”——一个聚焦于“决定折射”的轻量工具。AI 帮我梳理了核心逻辑：决策输入 → 分支拆解 → 平行时间线展开 → 多视角观察 → 总览对比

  **2.视觉设计阶段：**用 TRAE SOLO CN 生成 HTML 提案文档，确立了设计语言——纯白底、Cormorant Garamond + Manrope 字体、伪 3D 棱镜意象、彩虹色阶动态强调色。经过多轮调整，最终确定了棱镜的渲染方式（前/后三角面 + 三个矩形侧面 + 六色折射光束）和交互效果（散光、粒子、闪烁）

  **3.功能开发阶段：**在 TRAE SOLO CN 中用原生 HTML/CSS/JS 开发，主要任务包括：
  ·视图路由系统（input → ask → loading → tree → detail → summary）
  ·AI 适配层（支持 OpenAI / Anthropic 双格式，可选 CoT、联网搜索、Tavily）
  ·决策树 SVG 渲染
  ·三栏布局（BEST/NEUTRAL/WORST triptych）
  ·AI 主动提问（多题型：选择题 / 滑动条 / 填空题）
  ·身份档案存储（localStorage）
  ·模式切换（体验模式 / 正式模式）
  **4.迭代优化阶段：**根据自测反馈不断修复，包括决策树文字错位、三态数据结构重构、添加视角浮层定位、移动端响应式适配等

• 开发关键步骤截图：

  
  
  

• 关键任务对话的 Session ID：
  1.
  4381977694970407:21586e823a1a2372e414476db970a536_6a4f624ae2a1a2284da5b9a7.6a4f6730e2a1a2284da5ba25.6a4f6730e2a1a2284da5ba23:TRAE Work CN.0.1.32.no_sid.no_ppe.T(2026/7/9 17:17:36)
  2.
  4381977694970407:5a637792fde55e45dae9fc8865c04a73_6a4f624ae2a1a2284da5b9a7.6a4f7591e2a1a2284da5ba5b.6a4f7591e2a1a2284da5ba59:TRAE Work CN.0.1.32.no_sid.no_ppe.T(2026/7/9 18:18:57)**
  3.**
  4381977694970407:e907b3af651edfc1c9bacf46e2e987ce_6a4f624ae2a1a2284da5b9a7.6a4f7b05e2a1a2284da5bae0.6a4f7b05e2a1a2284da5bade:TRAE Work CN.0.1.32.no_sid.no_ppe.T(2026/7/9 18:42:13)

5.对应的报名审核通过的帖子链接

【生活娱乐赛道】棱镜 Prism - TRAE AI 创造力大赛 / 【大赛报名专区】 - TRAE 官方中文社区

棱镜只是一面镜子，帮你看见自己看不见的角度。决策权始终在你手中。