面向小学低/中年级(1-4年级)的趣味量感训练工具。通过**“视觉荒谬”制造认知冲突,结合 AI 动物导师“尺博士”(猫头鹰)的幽默引导,帮助学生建立长度、重量、容积、面积、体积、时间**六大维度的量感直觉。
传统的纸笔练习只用对错(红叉)反馈,缺乏尺度直观感。当学生在尺博士中填错单位时(如“铅笔长 18 米”),舞台区会动态绘制出一个比公交车还长的巨型铅笔与公交车并排展示,利用荒谬的戏剧冲突,让抽象数值化为具体的视觉冲击,引导学生发笑并主动纠错。
打破静态教材限制,学生可以在小工坊里输入天马行空的物体名称(如“孙悟空的金箍棒”),AI 实时现场烘焙出一张 8 位艺术像素风格或温馨儿童手绘风格 of SVG 卡片并自动归入数据库。学生可直接将其拖入沙盒与普通物品进行等比物理比对,让学生从“消费者”转变为“创造者”。
- 文本大脑:底层抽象兼容 DeepSeek-V4、小米 MiMo、智谱 GLM、Kimi、通义千问等主流国产大模型,可在页面底部设置中心一键热切换,无须重启服务。
- 生图算法:采用通义万相、即梦 AI、文心一格等国产 AI 生成生活实物卡通插图资产。
- 开发工具:通过国产 AI 编程工具 Trae,以“自然语言大白话”的 Vibe Coding(氛围编程)范式开发完成。
- 前端/全栈:Next.js 16 (App Router) + React 19 + TypeScript
- 样式与动画:TailwindCSS v4 + Framer Motion + Lottie
- 手绘风绘制:Rough.js + Wired Elements (Web Components)
- 大模型 API:兼容 OpenAI 规范的国产 LLM 接口(小米 MiMo / DeepSeek)
- 安装手册.md — 系统运行与部署安装说明。
- 使用手册.md — 系统功能操作与玩法说明。
- 开发记录.md — 系统详细的开发技术实现记录。
- PRODUCT.md — 完整的系统产品逻辑与六大维度对比策略。
- DESIGN_BRIEF.md — 页面视觉 UI 风格标准与 Duolingo 儿童奶油色配色规范。
- DEPLOY_TODO.md — 离线部署、图标资源本地化及构建优化待办清单。
src/
├── app/
│ ├── page.tsx # 首页(三大玩法入口:沙盒、字典、工坊)
│ ├── play/[dimension]/ # 六大维度的各路由模块
│ │ ├── sandbox/ # 动态自由沙盒
│ │ └── dictionary/ # 极速量感字典
│ ├── dev/icons/ # 造物小工坊
│ └── api/ # 服务端 API 接口(AI语义解析/像素生成/模型配置)
├── components/
│ ├── VisualCompare.tsx # 核心视觉对比渲染引擎(处理图标紧贴与等比缩放)
│ ├── FooterSettings.tsx # 底部大模型参数一键配置中心
│ └── Mascot.tsx / OwlReaction # 尺博士猫头鹰的情绪反应动画播放
└── lib/
├── deepseek.ts # 统一大模型 API 调用包装器
├── dictionary.ts # 内置离线量感知识库数据
└── references.ts # 内置 60+ 种日常实物与参照物物理尺寸数据
npm install复制根目录下的 .env.local.example 到新创建的 .env.local 文件,并填写你的 API Key:
cp .env.local.example .env.localnpm run dev打开浏览器访问 http://localhost:3000 开始量感探险!
- 本项目中的所有卡通人物、物品以及参照物插图资产均由 AI 生图工具辅助生成,并均在产品页面右下角清晰标注了“AI生成”。
- 本项目中大模型生成的对话吐槽文案、参照物匹配推荐由国产大模型(DeepSeek-V4/MiMo)实时处理。