【学习工作】六六学神-高考提分助手：让高考660分不再需要天赋

TRAE AI 创造力大赛 【大赛初赛专区】
1

【学习工作】六六学神-高考提分助手：让高考660分不再需要天赋

【标签】学习工作

一、Demo 简介

产品形态

六六学神是一个面向高中生的知识封装 Agent Demo，采用纯前端单页应用形态，以 zip 包形式交付。打开即用，零配置，完全离线可用。

一句话定位：不是"再讲一遍答案"，而是帮学生完成学校教育里长期缺失的"知识封装"环节——把混乱的感觉训练成清晰的直觉。

面向用户

记忆、数理、推演三项能力暂时偏弱，但愿意正常努力、愿意配合训练的高中生，尤其是那些"学了很多，但考试反馈很差"的学生。

核心功能

功能 1：六阶段知识封装全流程体验

六六学神围绕一个知识点，设计了完整的六阶段学习闭环，已覆盖 9 个高考核心知识点（数学 4 个 + 物理 4 个 + 化学 1 个）：

阶段 名称 核心动作 差异化价值
① 第一印象采集 采集学生对知识点的第一感受 关注学习起点质量，其他产品没有的视角
② 名词拆解 拆词+英文词源+断句解释 消除"别扭感"，降低错误第一印象权重
③ 逻辑讲解 费曼式通俗讲解+复述验证 用学生能听懂的话讲清内部逻辑
④ 旧知关联 SVG 知识图谱+关联建立 可视化展示知识点之间的关联关系
⑤ 知识封装 生成封装卡+盖章确认 核心差异化：把厚知识压薄成可复用的直觉
⑥ 权重校准 错题练习+根因诊断+权重调整 诊断错误根因，动态调整信任权重和重要性权重

每个阶段都有即时视觉反馈：权重账本实时更新、能力画像动态变化、封装卡逐步完善。

功能 2：权重账本与能力画像可视化

六六学神创造性地提出了"权重账本"概念，将学习过程中的心理权重具象化：

  • 第一印象权重：错误的第一印象在大脑中的权重
  • 旧知关联权重：新知识与已有知识体系的连接强度
  • 封装完成度：知识点被成功封装进个人知识体系的程度
  • 错误印象权重：学习过程中产生的错误理解、错误方向的权重

每次交互后，权重变化都有数字滚动动画+浮动+/-提示，让抽象的"心理权重"变得可见、可感知。

同时，学生能力画像（记忆/数理/推演）以SVG 雷达图+进度条的形式动态展示，学习过程中的成长轨迹一目了然。

功能 3：SVG 知识图谱与封装卡系统

  • SVG 知识图谱：用贝塞尔曲线连接知识点，新关联建立时有路径绘制动画，已封装知识点有绿色高亮标记
  • 封装卡系统：便签贴纸风格的封装卡，包含记忆点、应用场景、推演方向、掌握感，封装完成时有"盖章"动画
  • 已封装知识库：左侧栏展示所有已封装的知识点，点击可回顾封装详情

二、Demo 创作思路

灵感来源

这个观点来自沈辛成老师关于应试教育与能力模型的公开演讲/对谈。沈老师提出：高考表面上考九门课，背后长期强化的是记忆、数理、推演三项能力。六六学神深受启发，但不止于引用——我们把"三项能力训练"和"知识封装"做成了可体验的交互流程。

参考来源：

想解决的问题

我见过太多学生被考试一点点磨掉志气。他们并不是假性努力，也不是态度差，只是：

  1. 第一印象容易固化：刚接触"一元二次方程"就觉得"别扭、难"，这个感觉一直跟着后续学习，从未被纠正
  2. 知识点之间连不起来：老师讲完了，学生脑子里的知识还是孤立的点，没有形成网络
  3. 做题之后不会重新封装：错题本抄了，但同样的错误反复犯，因为错误的印象权重没有被主动降低
  4. 学校教育的天然缺失：老师能讲清知识点内部逻辑，但很难帮每个学生完成"把这个知识点融入自己体系"的封装过程

六六学神要解决的，就是这个被忽略的"封装"节点。

为什么做这个方向

市面上已经有大量"AI 讲题工具"，但它们的核心逻辑是"你问→我答"。六六学神的核心逻辑是"你学→我帮你封装"。

我们不追求讲更多的题，而是追求让每一道题、每一个知识点都被真正装进学生自己的脑子里。

我们相信：660 分不应该被包装成玄学。660 分以上可能需要更高的天赋基础，但 660 分本身可以被拆解成方法、训练、反馈和持续封装。

三、Demo 体验地址

下载与体验方式

交互式 HTML 文件（zip 打包）：下载附件

liuliu-xueshen-demo.html (250.7 KB)

liuliu-xueshen-demo.zip (49.4 KB)

使用步骤：

  1. 下载 zip 文件
  2. 解压到任意文件夹
  3. 双击打开 liuliu-xueshen-demo.html
  4. 无需网络，无需安装，无需配置
  5. 选择左侧知识点（数学/物理/化学），开始体验六阶段知识封装流程

提示：建议使用 Chrome、Edge 或 Firefox 浏览器打开，以获得最佳体验。

Demo 内容说明

当前 Demo 包含 9 个完整知识点，覆盖数学、物理、化学三科高考核心内容：

数学（4 个）

  • 一元二次方程
  • 等差数列
  • 等比数列
  • 二项分布

物理（4 个）

  • 牛顿第二定律
  • 安培定律 / 安培力
  • 洛伦兹力
  • 电磁感应定律（法拉第）

化学（1 个）

  • 氧化还原反应

每个知识点都包含完整的六阶段交互流程（第一印象采集 → 名词拆解 → 逻辑讲解 → 旧知关联 → 知识封装 → 权重校准），平均 3-5 分钟即可体验完一个知识点的封装全过程。

四、TRAE 实践过程

4.1 开发流程概述

整个 Demo 使用 TRAE IDE 开发，采用纯前端单文件方案，所有 HTML/CSS/JS 内联在一个文件中，便于 zip 打包上传。

开发分为 5 个关键阶段，每个阶段都在 TRAE 中完成：

阶段 任务 核心产出
阶段 1 架构设计与核心框架 三栏布局、对话引擎、状态管理
阶段 2 六阶段流程引擎 阶段状态机、选项交互、卡片渲染
阶段 3 权重账本与可视化 进度条动画、数字滚动、SVG 雷达图
阶段 4 知识点脚本与内容 3 个知识点的完整六阶段对话脚本
阶段 5 视觉润色与打包 考卷风格优化、动画调优、zip 打包

4.2 关键步骤与截图

步骤 1：需求拆解与架构设计

在 TRAE 中的 Prompt：

“我要做一个高考提分 Agent 的交互 Demo，核心概念是’知识封装’和’权重账本’。请帮我设计一个三栏布局的 HTML 框架，左侧知识点选择+能力画像，中央对话区，右侧封装卡+权重账本。视觉风格要继承现有的’考卷+红笔’美学。”

TRAE 帮我拆解了任务：

  1. 从现有静态 HTML 提取设计 token（色彩、字体、视觉风格）
  2. 设计三栏布局的 DOM 结构
  3. 搭建对话引擎基础框架（消息气泡、打字机效果、选项交互）
  4. 设计状态管理数据结构

开发截图：

[截图 1：TRAE 中设计架构的对话截图]

架构对话
架构对话1122×839 110 KB

Session ID：[Session ID 1 - 架构设计]3212111382851120:5c0d007ae0f9364f6271d31c03264949_6a56479eb0742b2cc6f1e1f6.6a56479eb0742b2cc6f1e1f9.6a56479eb0742b2cc6f1e1f7:TRAE Work CN.0.1.36.no_sid.no_ppe.T(2026/7/14 22:28:46)

步骤 2：交互流程设计

在 TRAE 中的 Prompt：

“请帮我实现六阶段知识封装流程的状态机。每个知识点有 6 个阶段：第一印象采集→名词拆解→逻辑讲解→旧知关联→知识封装→权重校准。每个阶段有 Agent 消息、选项交互或文本输入、权重变化。”

TRAE 实现了：

  • 完整的六阶段状态机
  • 阶段进度指示器（顶栏）
  • 选项选择后的分支逻辑
  • 阶段卡片渲染系统（5 种卡片类型）

关键代码片段：

function startStage(stageIndex) {
  const knowledge = sessionState.currentKnowledge;
  sessionState.currentStage = stageIndex;
  renderProgressSteps();
  
  const stage = knowledge.stages[stageIndex];
  addAgentMessage(stage.agentMessage, () => {
    if (stage.type === "options") {
      showOptions(stage.options, handleOptionSelect);
    } else if (stage.type === "card") {
      showStageCard(stage.cardType, stage.cardData);
    }
  });
}

开发截图：

[截图 2：TRAE 中实现六阶段流程的对话截图]

2-流程
2-流程1129×837 127 KB

Session ID：[Session ID 2 - 交互逻辑]3212111382851120:e4645e8f546fda5971bb678353175a1d_6a564e48b0742b2cc6f1e2ff.6a564e48b0742b2cc6f1e302.6a564e48b0742b2cc6f1e300:TRAE Work CN.0.1.36.no_sid.no_ppe.T(2026/7/14 22:57:12)

步骤 3：核心功能开发

在 TRAE 中的 Prompt：

“请帮我实现权重账本的可视化效果。需要：1）4 个核心权重的进度条展示；2）权重变化时的数字滚动动画；3）浮动+/-变化提示；4）能力画像的 SVG 雷达图。”

TRAE 实现了：

  • 渐变色进度条（根据权重类型显示不同颜色）
  • requestAnimationFrame 数字滚动动画
  • 浮动变化提示（CSS 动画）
  • SVG 三角形雷达图（记忆/数理/推演）

关键代码片段：

function animateNumber(element, from, to, duration) {
  const start = performance.now();
  function update(now) {
    const elapsed = now - start;
    const progress = Math.min(elapsed / duration, 1);
    const eased = easeOutQuad(progress);
    const current = Math.round(from + (to - from) * eased);
    element.textContent = current + '%';
    if (progress < 1) requestAnimationFrame(update);
  }
  requestAnimationFrame(update);
}

开发截图：

[截图 3：TRAE 中实现权重可视化的对话截图]

3
3586×512 55.9 KB

Session ID：[Session ID 3 - 核心功能]3212111382851120:e4645e8f546fda5971bb678353175a1d_6a564e48b0742b2cc6f1e2ff.6a564e48b0742b2cc6f1e302.6a564e48b0742b2cc6f1e300:TRAE Work CN.0.1.36.no_sid.no_ppe.T(2026/7/14 22:57:12)

步骤 4：视觉设计与动画

在 TRAE 中的 Prompt：

“请帮我优化视觉细节，突出’660 努力即可，无需天赋’这条标语。需要：1）顶栏添加 660 印章标志；2）封装卡的便签贴纸风格+盖章动画；3）SVG 知识图谱的连线动画；4）整体’数字考卷’风格统一。”

TRAE 实现了：

  • 660 印章标志（顶栏品牌区）
  • 便签贴纸风格的封装卡（胶带效果、毛边边缘）
  • 盖章动画（从大到小+按压效果）
  • SVG 知识图谱（贝塞尔曲线+路径绘制动画）
  • 红笔批注手写体效果

开发截图：

[截图 4：TRAE 中优化视觉的对话截图]

4
4588×557 71.1 KB

Session ID：[Session ID 4 - 视觉设计]3212111382851120:e4645e8f546fda5971bb678353175a1d_6a564e48b0742b2cc6f1e2ff.6a5655b4b0742b2cc6f1e634.6a5655b4b0742b2cc6f1e633:TRAE Work CN.0.1.36.no_sid.no_ppe.T(2026/7/14 23:33:48)

步骤 5：调试与优化

在 TRAE 中的 Prompt：

“请帮我测试 Demo 的完整流程，修复发现的 bug，并优化体验。需要确保：1）3 个知识点都能完整走通；2）权重变化逻辑合理；3）动画流畅不卡顿；4）zip 打包后离线可用。”

TRAE 帮我完成了：

  • 多浏览器兼容性测试
  • 离线场景验证
  • 动画性能优化
  • zip 打包测试

开发截图：

[截图 5：TRAE 中调试优化的对话截图]

5
5585×591 60.8 KB

Session ID：[Session ID 5 - 调试优化]3212111382851120:a03098b026fd436bc39a614ff01877c2_6a564e48b0742b2cc6f1e2ff.6a5746f4178e76581e2d15fe.6a5746f4178e76581e2d15fc:TRAE Work CN.0.1.36.no_sid.no_ppe.T(2026/7/15 16:38:12)

4.3 开发心得

踩坑经历

坑 1：单文件体积控制
最初担心 3 个知识点的完整脚本会让 HTML 文件过大。解决方案是：精简 CSS（复用设计 token）、优化数据结构（用数组而非对象存储阶段数据）、避免冗余注释。

坑 2：打字机效果与选项交互的时序
Agent 消息用打字机逐字显示时，如果学生在显示完成前就点击选项，会导致状态混乱。解决方案：添加 sessionState.isTyping 标志，打字期间禁用所有交互。

坑 3：权重变化动画的同步
多个权重同时变化时，动画会互相干扰。解决方案：使用 requestAnimationFrame 统一调度，每个权重变化单独创建动画任务，避免冲突。

TRAE 使用技巧

  1. 任务拆解 Prompt：不要一次性要求做太多，先让 TRAE 设计架构，再逐步实现每个模块
  2. 保留 Session ID：每个关键开发步骤单独开一个 Session，方便后续截图和引用
  3. 代码审查：TRAE 生成的代码要仔细审查，特别是状态管理和事件绑定的逻辑
  4. 视觉迭代：视觉风格不要一次到位，先实现基础样式，再逐步添加动画和装饰

五、报名帖链接

[六六学神-高考提分助手 报名帖]

https://forum.trae.cn/t/topic/97021

附录：Demo 运行截图

截图 1：完整对话界面 + 封装卡 + 权重账本

[Demo 运行截图 1：展示主界面，左侧知识点选择+能力画像，中央对话区，右侧封装卡+权重账本]

架构
架构1436×791 150 KB

截图 2：错题复盘 / 权重校准界面

[Demo 运行截图 2：展示阶段 6 的错题练习和根因诊断，以及权重调整过程]

6
61440×790 173 KB

截图 3：知识图谱 / 能力画像

[Demo 运行截图 3：展示 SVG 知识图谱和雷达图能力画像]

7
7327×706 55.1 KB

8
81440×784 194 KB

版权说明

  • 沈辛成老师相关演讲/对谈内容，用于标明观点启发来源
  • 六六学神的产品设定、Agent 架构、知识点封装流程、权重账本设计，来自参赛者本人对中学学习过程的观察和项目构思
  • 所有知识点内容经过原创表述，符合高考教学大纲

660 分，努力即可，无需天赋。

六六学神，陪你把每一个知识点，都稳稳地装进自己的体系里。