一、Demo 简介
是什么： MBTI 认知学习引擎是一个基于荣格八维认知功能理论的单页 Web 应用。它为 16 种 MBTI 人格类型生成完全不同的学习路径——不只是措辞不同，而是切入角度、类比方式、输出格式都从根本上不同。
面向谁： 对 MBTI 感兴趣的终身学习者、希望提升学习效率的知识工作者、以及想理解"为什么同一件事我和别人理解方式完全不同"的好奇者。
主要功能：
1.16 宫格类型选择器 — 一键选择你的人格类型，系统自动识别你的认知功能栈（Ni/Ne/Si/Se/Fi/Fe/Ti/Te 的排列组合）
2.材料输入区 — 支持粘贴文本、输入链接、上传文件三种方式输入学习材料
3.个性化学习方案生成 — 基于你的认知功能栈，生成 5 大模块的专属学习策略：
· 核心模式透视：揭示这个主题对你而言最深层的模式
· 探险式学习路径：用引导性问题串联学习旅程，而非章节列表
· 洞见捕捉指南：告诉你学习过程中应该特别留意什么信号
· 框架构建蓝图：推荐最适合你的知识组织方式
· 整合与验证任务：一个能让你确认"真学会了"的产出任务
4.对比视图 — 同一篇材料，4 个不同类型（INTJ/ENFP/ISTJ/ESFP）的学习方案并排展示，直观感受"个性化"的深度
5.示例材料快速体验 — 内置"第一性原理思维"示例材料，一键加载即可体验完整的"输入材料 → 生成相关方案"闭环。系统基于荣格八维的 8 种主导功能（Ni/Ne/Si/Se/Ti/Te/Fi/Fe）自动匹配材料感知方案，每个模块都会标注"基于示例材料"，并融入材料具体内容（如 SpaceX 案例、2%原材料成本等），让用户直观感受到方案与材料是紧密关联的
首页与选择器 基于示例材料的输出结果 对比视图
二、Demo 创作思路
灵感来源： 我自己就是一个 Ni 主导型学习者（INTJ）。长期以来我发现，市面上所有的"个性化学习"本质上只是同一套方法的换皮——给所有人同样的步骤，只是措辞不同。但荣格的八维认知功能理论告诉我，不同人格类型的人，其大脑的默认信息处理模式是完全不同的：有人靠直觉洞察规律，有人靠感官体验细节，有人靠逻辑拆解系统，有人靠情感判断价值。
既然认知方式不同，那学习路径就不该相同。
想解决的问题： 知识工作者在学习新领域时，常常被"标准化学习路径"折磨：
强迫发散型思维的人按线性步骤走
强迫体验型学习者先看理论框架
强迫逻辑型学习者写感悟日记
结果是：学了但记不住，记住了但不会用，会用了但很痛苦。
更深层的问题是：很多人知道自己"学不进去"，但不知道为什么，也不知道该怎么调整。 INTJ 需要先看到底层架构才能开始学习，ESFP 需要一个能动手实操的 Demo，INFP 要先理解"这件事为什么值得学"才有动力，ESTJ 要直接给可执行的行动项——但现有 AI 学习工具（如 NotebookLM、ChatPDF）全部在做同一件事：给所有人生成"通用摘要+知识点清单"。
为什么做这个方向： MBTI 虽然流行，但大多数应用停留在"你是哪种类型"的标签化娱乐——测完就完了。我想把它拉回荣格理论的根源——认知功能栈——并真正落地为可操作的学习工具。市面上没有基于八维认知功能做学习路径定制的产品，这是"学习工作"赛道里一个被忽视但影响巨大的空白。
三、Demo 体验地址
交互式 HTML 文件（Zip 格式）： 下载 mbti-learning-engine.zip，解压后用浏览器打开 mbti-learning-engine.html 即可体验。
文件说明：
· 完全自包含，零外部 CDN 依赖
· 包含完整的 16 种人格类型策略数据
· 包含所需字体文件（InstrumentSans / JetBrainsMono / GeistMono）
· 单文件即可运行，无需服务器
四、TRAE 实践过程
整个作品从 0 到 1 完全使用 TRAE Work 开发完成。
关键步骤 1：创意构思与架构设计
在 TRAE Work 中，我首先向 AI 描述了创意方案——基于 MBTI 八维理论构建学习引擎。AI 帮我梳理了产品架构：16 宫格选择器、材料输入区、5 模块输出区、对比视图。并建议使用 html-report skill 作为项目脚手架，确保输出格式专业、自包含。
**关键任务 Session ID：**CN.1839950259032480:1a185e6d4f4c462ddacb913d2b955187_6a325a9c5617cfc450201e58.6a325a9e6c06c5cffab72708.6a325a9d5617cfc450201e59:TRAE Work CN.1.0.0.1950.4a576e56-54a8-4ba5-a59c-28c1f2418b9d.no_ppe.T(2026/6/17 16:45:24)
关键步骤 2：核心代码与 UI 实现
TRAE 生成了完整的单页应用 HTML，包含深色现代风格的 CSS、响应式布局、交互动效。我通过多轮对话迭代优化了 16 宫格选择器的视觉呈现（按分析师/外交官/守护者/探险家四色分类）、输出卡片的阅读体验、以及对比视图的布局。
**关键任务 Session ID：**CN.1839950259032480:fcde60e34ac5bb0f86bc312e401f33d2_6a325a9c5617cfc450201e58.6a45db9a962aebf2156db69a.6a45db9969c2cf99c8c77e66:TRAE Work CN.1.0.0.1950.4a576e56-54a8-4ba5-a59c-28c1f2418b9d.no_ppe.T(2026/7/2 11:32:30)
关键步骤 3：策略数据拓展与知识库整合
这是最具挑战性的部分。我从用户知识库中读取了「Ni主导型学习策略专家」Prompt 文档，提取其 5 模块方法论（核心模式透视、探险式路径、洞见捕捉、框架蓝图、验证任务），然后基于荣格八维认知功能理论，为全部 16 种 MBTI 类型逐一设计了专属学习策略。TRAE 协助我将这些数据结构化并集成到独立 JS 文件中，确保 HTML 加载性能。
关键任务 Session ID：
CN.1839950259032480:5bd41c16077c22e3e7002e3d2eb74b13_6a325a9c5617cfc450201e58.6a45dde1962aebf2156db701.6a45dde1394c208ed6526f36:TRAE Work CN.1.0.0.1950.4a576e56-54a8-4ba5-a59c-28c1f2418b9d.no_ppe.T(2026/7/2 11:49:02)
关键步骤 4：完善演示闭环——8 种主导功能 × 示例材料
为了确保演示效果的完整性，我在 DEMO 中预置了"第一性原理思维"示例学习材料，并基于荣格八维的 8 种主导功能（Ni/Ne/Si/Se/Ti/Te/Fi/Fe）设计了 8 套与该材料紧密相关的 5 模块学习方案。无论用户选择 16 种类型中的哪一种，系统都会自动识别其主导功能，并生成对应的材料感知方案。每个方案都引用了材料中的具体内容（如 SpaceX 案例、2%原材料成本、90%发射成本降低等），并标注"基于示例材料"，让用户直观感受到"输入材料 → 输出方案"的完整闭环。
为什么用 8 种主导功能而非 16 种独立方案？ 因为 I/E 和 J/P 决定了认知功能的外倾/内倾取向和排列顺序，但真正决定思维模式核心差异的是主导功能本身。INTJ（Ni-Te）和 INFJ（Ni-Fe）虽然辅助功能不同，但都以 Ni 主导——他们都首先"看到"底层模式。因此 8 套核心框架既保证了策略的精准性，又避免了数据冗余。
**关键任务 Session ID：**CN.1839950259032480:d01f4fa871242c944366780a24102b12_6a325a9c5617cfc450201e58.6a460be0d0dd628e79e942f4.6a460be0ad0be463b041fdcc:TRAE Work CN.1.0.0.1950.327b8322-184c-4614-9255-8bffcb80648e.no_ppe.T(2026/7/2 14:57:36)
关键步骤 5：架构优化——从 16 套独立方案到 8 种主导功能框架
在测试过程中，我发现最初为 4 种代表性类型（INTJ/ENFP/ISTJ/ESFP）设计的示例材料方案存在明显缺陷：其他 12 种类型加载示例材料后只能看到通用 mock 数据，无法体现"材料感知"的核心价值。经过与 AI 的深入讨论，我们重新审视了荣格八维的理论基础——I/E 和 J/P 决定了认知功能的外倾/内倾取向和排列顺序，但真正决定思维模式核心差异的是主导功能本身。INTJ（Ni-Te）和 INFJ（Ni-Fe）虽然辅助功能不同，但都以 Ni 主导，都首先"看到"底层模式。因此，我们将示例材料的架构从 16 套独立方案优化为 8 种主导功能框架（Ni/Ne/Si/Se/Ti/Te/Fi/Fe），并同步修复了 subtitle.innerHTML 销毁 DOM 元素的 bug。优化后，无论用户选择 16 种类型中的哪一种，都能获得与示例材料紧密关联的个性化方案。
**关键任务 Session ID：**CN.1839950259032480:d879560491154fb9afa4fc263be813b7_6a325a9c5617cfc450201e58.6a46157bd0dd628e79e94464.6a46157b69c2cf99c8c784ae:TRAE Work CN.1.0.0.1950.327b8322-184c-4614-9255-8bffcb80648e.no_ppe.T(2026/7/2 15:38:35)
开发关键步骤截图
截图 1：首页与 16 宫格类型选择器 首页
截图 2：INTJ 类型基于示例材料的完整学习方案输出 输出结果
截图 3：INTJ/ENFP/ISTJ/ESFP 四类型对比视图 对比视图
截图 4：示例材料"第一性原理思维"加载后的输出效果 点击"加载示例材料"按钮后，系统自动填入学习材料，生成的 5 模块方案中每个模块都标注"基于示例材料"，并引用材料具体内容（SpaceX 火箭案例、2%原材料成本、90%发射成本降低等），构成了完整的"输入材料 → 生成方案"演示闭环。 示例材料输出
附：通过的报名帖链接
【学习工作】MBTI 认知学习引擎——16型人格的专属学习路径生成器(链接：https://forum.trae.cn/t/topic/28323)
创意产物 HTML
mbti-learning-engine(初赛).zip (1.2 MB)