01
CHAPTER ONE
项目规划
智能教育 AI 工具网页专项开发 · 全站架构梳理
📋任务说明：让 AI 梳理学境 AI 学情诊断陪练工具的全页面架构，明确每页核心功能、页面逻辑、交互细节、设计规范，覆盖"引流-诊断-变现-留存"全环节，每页都有明确转化或留存目标。
// 工程脚手架 · 通过
pnpm create next-app@latest 初始化，配 App Router + TypeScript strict + TailwindCSS v3 + shadcn/ui + Framer Motion。学情诊断封装为 useDiagnosis() Hook 统一对接 Qwen-Math + DeepSeek-Coder 两套模型，拍照搜题走 PaddleOCR 离线模型，知识点图谱用 Neo4j + Cypher 查询薄弱点联动，全程 Sentry 错误上报保证诊断质量。AI 提示词 — Master Prompt
Core Model
核心模型：内容引流 → AI 学情诊断钩子 → 学情报告信任 → 课程商城购买 + 加学习规划师微信变现双引擎
I.入口与认证
启动页（品牌动画）
登录注册（手机号 + 微信 + 家长/学生角色）
首次引导（3 屏滑动 + 同意隐私）
II.核心闭环
首页（学情仪表盘 + CTA）
学情诊断引导页（如何答题准确）
智能答题页（自适应难度 + AI 引导）难点
分析中（loading 8-15 秒）
学情诊断报告页⭐ 爆款
知识点画像详情页（薄弱知识树）
个性化学习方案页（任务/视频/真题/讲解）
III.商城与变现
课程商城页（按学科/年级筛选）
课程详情页（试看 + 老师 + 评价）
购物车 + 结算 + 微信支付
加学习规划师微信引导页⭐ 私域承接
IV.留存模块
历史报告 / 学情趋势分析
每日学习打卡（错题本 + 学习时长 + 心情）
教育干货 / 升学资讯
个人中心（订单、错题本、积分、家庭）
V.管理后台 · PC 端 · 6 大模块
数据看板 · GMV / 诊断次数 / 转化漏斗 / 加微数
用户与报告 · 学生/家长列表、报告管理、教研复核队列
商品与订单 · 课程 SKU、订单、试看片段
内容与方案 · 题库、文章、学习方案模板、知识图谱
AI 配置 · 提示词模板、知识点规则、置信度阈值
运营 · 优惠券、Banner、规划师管理、企微集成
02
CHAPTER TWO
页面架构设计
拆解页面、明确逻辑，确保闭环流畅
🎯架构核心要求：移动端优先，核心流程不超过 3 步即可完成；所有页面贴合"学院常青藤"美学，深藏青 + 香槟金 + 暖米白配色，视觉风格统一；每页标注核心目标、交互重点、设计规范。
// 路由 / 状态 / 主题 · 路由按
app/(diagnose)/、app/(course)/、app/(my)/ 三大动线分组，状态管理走 Zustand + persist 本地化诊断草稿与错题本，题目列表用 react-window 虚拟滚动防卡顿，趋势图走 Recharts + D3 scale，主题以 CSS Variables 切换深藏青 / 护眼 / 夜间三套配色。I. 入口与认证 — 降低门槛，建立信任
1.启动页（品牌动画）
核心目标：传递品牌专业感与精英教育调性。
细节：深藏青 → 香槟金渐变（2-3 秒，可跳过），LOGO 居中（学院徽章圆环 + 上升箭头），底部 Slogan "AI 学情诊断 · 个性化提分"，背景暖米白 + 几何线条 + 学院徽章淡水印。
2.登录注册页
核心目标：识别家长/学生角色，多通道登录。
细节：顶部 Tab "我是家长 / 我是学生"（家长默认，香槟金下划线），手机号 + 6 位验证码 + 微信快捷登录，登录按钮深藏青（圆角 12px，active:scale-95）。
3.首次引导页
细节：3 屏滑动几何插图 + 衬线加粗文字 "15 分钟 AI 诊断 / 个性化方案 / 1V1 跟踪"，最后一屏"立即开始诊断"按钮（香槟金）。
9:41📶 🔋
學
學境 AI
Intelligent Learning
AI 学情诊断 · 个性化提分
拍学情 · 辨弱项 · 享提分
P1启动页
9:41📶 🔋
登录注册
未注册手机号自动创建账号
我是家长
我是学生
+86 手机号
138 0000 8888
验证码
●●●●●●
59s
登录 / 注册
登录即同意《隐私政策》《用户协议》
或
🟢 微信快捷登录
P2登录注册
9:41📶 🔋
跳过 →
15 分钟 AI 学情诊断
基于 100 万真题
精准定位薄弱点
精准定位薄弱点
下一步
P3首次引导
II. 核心闭环 — 用户留存与转化的关键
1.首页
细节：顶部 Hero（深藏青渐变）+ 香槟金 CTA "立即诊断学情"（圆角 16px，金色细边框，active:scale-95），下方分区"诊断流程""知识点科普""热门课程""规划师推荐"，底部导航栏 4 图标。
2.智能答题页 难点
细节：顶部进度条（香槟金渐变），题干白卡（16px，KaTeX 渲染数学公式），4 选项白底金边（选中变深藏青填充，active:scale-95），右上角知识点标签（金色气泡），停留 30 秒弹 AI 引导气泡。
3.学情诊断报告页 ⭐ 爆款
细节：评分 76/100（深藏青渐变），SVG 六边形雷达图（金色填充）+"薄弱知识点 TOP 5"+"AI 老师建议"（金色高光块）；底部双按钮"知识点画像"（深藏青）+"获取学习方案"（香槟金）。
4.个性化学习方案页
细节：4 Tab（任务/视频/真题/讲解，香槟金下划线），每模块底部"相关课程"金色入口，页面底"加规划师定制 1V1"（学院红，加粗）。
9:41📶 🔋
早上好，张同学 ✨
🔔
Today's Mission
AI 学情诊断
15 分钟 · 精准辨弱项
📊 立即诊断学情 →
已为 352,891 学生生成报告
📚 热门课程
更多 →
高考数学冲刺
¥298
英语完形精讲
¥168
👨🏫 规划师推荐
👨🏫
王老师
高级教师 · 12 年教龄
🏠
首页
首页
📚
商城
商城
📊
诊断
诊断
👤
我的
我的
P4首页
9:41📶 🔋
← 退出
第 5 / 25 题
剩余 12:34
数学 · 函数定义域
已知函数 f(x) = √(x-2) + lg(5-x)，
则 f(x) 的定义域为？
则 f(x) 的定义域为？
A
[2, 5]
B
[2, 5)
C
(2, 5]
D
(2, 5)
🤖
AI 提示：注意 √ 与 lg 的定义域条件
上一题
下一题 →
P6答题页
9:41📶 🔋
DIAGNOSTIC REPORT
学情诊断报告
2026.05.08 · 综合诊断
SCORE
76
/ 100 中等水平
数学 · 英语 薄弱
📊 6 大学科能力雷达
📌 薄弱知识点 TOP 3
函数定义域32%
三角函数41%
英语完形56%
⚜️ AI 老师：建议优先攻克函数定义域，搭配 30 天计划，可提升 15-20 分。
查看画像
获取方案
P7学情报告 ⭐
9:41📶 🔋
PERSONAL PLAN
专属学习方案
基于薄弱点定制 · 30 天提分计划
📋任务
📺视频
📝真题
💡讲解
📌 函数定义域 巩固
15min
5 道精选题 + 视频精讲
📌 三角函数 突破
20min
公式回顾 + 例题讲解
📌 英语完形 训练
10min
真题 1 篇 + 错题反思
⚜️
王老师 1V1 督学
30 天提分有保障
→
📱 加规划师 定制方案
P9学习方案
03
CHAPTER THREE
商城与变现
核心变现环节，提升转化效率
💰核心要求：商城页突出体质化课程推荐，详情页强化卖点 + 试看，支付链路 4 步内完成，加规划师微信引导页是私域承接核心。
// 商城转化实现 · 课程列表走
useInfiniteQuery 分页 + IntersectionObserver 懒加载封面，下单触发 wx.chooseWXPay，回调 Webhook 写 orders 表并把状态机推到 PAID，Realtime channel 立刻推送规划师企业微信二维码与课程激活码，退款走 BullMQ 异步队列防雪崩。I. 课程商城与详情页
细节：顶部搜索栏（圆角 12px，"搜索课程、知识点、老师"），下方"为您推荐"（基于学情）"学科分类""名师专区"，课程卡白色 + 金色细边框（圆角 16px），价格 16px 学院红加粗。
II. 购物车 → 结算 → 支付
购物车：课程列表 + 数量调整 + 删除确认，底部合计金额（学院红加粗 18px）+"去结算"按钮。结算：学生信息 + 默认微信支付 + 订单明细。支付成功：金色印章 ✓ + 加规划师微信入口（CTA 二次转化关键）。
III. 加学习规划师微信引导页 ⭐
细节：标题"添加专业学习规划师，定制提分方案"，二维码（深藏青边框，金色四角装饰），4 福利"1V1 学情解读 / 30 天提分计划 / 专属优惠 / 升学规划"（罗马数字编号）。
9:41📶 🔋
🔍 搜索课程、知识点、老师
为您推荐 基于学情
更多 →
高考数学冲刺
¥298
12,892 人
英语完形精讲
¥168
8,431 人
函数大题突破
¥128
5,672 人
物理力学专题
¥198
3,128 人
学科分类
数学物理英语语文
🏠
首页
首页
📚
商城
商城
📊
诊断
诊断
👤
我的
我的
P10课程商城
9:41📶 🔋
← 购物车
2 件
高考数学冲刺班
王老师 · 50 课时
¥298
−1+
英语完形精讲
李老师 · 30 课时
¥168
−1+
🎁
新人优惠券 -¥30 已自动使用
合计
¥436.00
去结算 →
P12购物车
9:41📶 🔋
✓
PAYMENT SUCCESS
支付成功
¥436.00
订单号：202605081234567
⚜️
王老师 已收到订单
24h 内联系您
🎁 立即领 30 元提分券
📅 制定 30 天提分计划
📚 课程搭配指导
📅 制定 30 天提分计划
📚 课程搭配指导
📱 添加规划师微信
查看订单
返回首页
P15支付成功
9:41📶 🔋
PRIVATE TUTOR
添加专业学习规划师
定制提分方案
定制提分方案
⚜️ 长按识别添加 ⚜️
I.1V1 学情解读
II.30 天提分计划
III.专属优惠福利
IV.升学规划指导
返回首页
学习方案
P16加规划师 ⭐
用了学境 AI 三个月，我家孩子数学从 92 分提升到 128 分。AI 诊断真的能精准找到薄弱点，规划师老师每周跟进，比传统辅导班高效太多。
04
CHAPTER FOUR
留存模块
提升活跃度，促进复购与转发
♻️核心要求：历史报告 + 趋势分析建立学情成长感；每日打卡培养学习习惯；干货内容沉淀品牌专业性；个人中心承接订单与积分。
// 留存与召回实现 · 打卡走
node-cron 每日 8 点定时任务 + Server-Sent Events 实时推送，学情趋势用 SVG + D3.js 渲染折线图，干货内容走 MDX + contentlayer 静态化，召回文案走 企业微信 API + RAG 检索个性化，连续打卡排行榜走 Redis ZSET + O(log N) 复杂度。I. 历史报告 / 学情趋势分析
细节：过往报告列表（按时间倒序，日期 + 评分 + 薄弱学科），趋势分析模块用 SVG 折线图（香槟金线条 + 学院红高亮节点），标注关键节点"数学提升 +15 分""英语需注意"。
II. 每日学习打卡
细节："错题整理 / 学习时长 / 今日心情"3 模块（金色图标），过往打卡日历视图（连续打卡金色高亮），打卡 +10 积分（可商城抵扣）。
III. 个人中心
细节：顶部用户头像 + 学情标签（如 "高三 · 数学薄弱型"），下方模块：我的订单 / 错题本 / 积分（学院红加粗）/ 家庭管理 / 设置。
9:41📶 🔋
HISTORY
历史学情报告
2026.05.08
综合 76 · 数学薄弱
查看 →
2026.04.20
综合 71 · 数英薄弱
查看 →
2026.04.05
综合 65 · 多科薄弱
查看 →
📈 趋势分析
+11 pts
📊 数学持续上升 · 英语需注意
P17历史 + 趋势
9:41📶 🔋
DAILY CHECK-IN
学习打卡
已坚持 7 天 🔥
📷
错题
⏱
时长
😊
心情
📅 过往打卡
5/2
5/3
5/4
5/5
5/6
5/7
今
月度打卡 80%
+10 积分
完成今日打卡
P18学习打卡
9:41📶 🔋
👤
张同学
高三 · 数学薄弱型
8
诊断
15
打卡
1234
积分
📦
订单
📚
错题本
💎
积分
👨👩👧
家人
⚙️ 设置
隐私设置→
账号安全→
关于我们→
P20个人中心
05
CHAPTER FIVE
管理后台开发
PC 端 · 6 大模块 · 聚焦高效管理
🖥️核心要求：PC 端 6 大模块（数据看板 / 用户与报告 / 商品订单 / 内容方案 / AI 配置 / 运营），模块划分清晰，操作流程符合 PC 端用户习惯。
// 后台实现 · 三类角色（
运营总监 / 学科主管 / 客服）基于 RBAC 权限分级使用，前端 Next.js 14 + shadcn Data Table + TanStack Table，数据看板走 Recharts 实时刷新，学情报告聚合用 ClickHouse 分析，订单/退款/优惠券走 Server Actions，权限审计落 audit_log 表保证 等保三级 合规与 GDPR 未成年人信息保护。核心模块
1. 数据看板：GMV（学院红加粗）、诊断次数、加微数、转化漏斗、热门学科饼图、课程销量 TOP 10。
2. 用户与报告：学生/家长列表、报告管理、教研复核队列（按提交时间，优先级标注）。
3. 商品与订单：课程 SKU、订单管理、售后处理。
4. 内容与方案：题库 + 干货 + 学习方案模板 + 知识图谱。
5. AI 配置 ⭐：提示词模板（多版本切换）、规则引擎（权重可调）、置信度阈值（≥80% 自动生成，<80% 教研复核）。
6. 运营：优惠券 + Banner + 规划师管理 + 企微集成。
⚜️ 學境 AI · Admin Console
GMV¥1.24M诊断8.5万加微1.2万
📊 数据看板
¥1.24M
本月 GMV · 同比 +24%
👥 用户与报告
142,892
报告 85,471 · 待复核 23 ⚠️
📚 课程管理
248
库存预警 5 · 本月新增 12
📝 内容与方案
1,524
题库 + 文章 · 方案模板 36
🤖 AI 配置
提示词 12 套
置信度 ≥ 80% · 规则引擎 ✓
💼 运营
规划师 18 在线
优惠券 23 · Banner 6 · 企微 ✓