…
AI 智能抽背助手 - 原型系统
基于 PRD 和 UX 设计规范自动生成的原型系统。
📁 文件结构
prototype/
├── index.html # 统一入口页面
├── admin-index.html # 平铺展示入口（所有页面同时显示）
├── docs-index.html # 文档中心
├── server.js # 本地预览服务器
├── start.sh # 启动脚本
└── pages/admin/
├── dashboard.html # 数据概览
├── quiz-records.html # 抽背记录查询
├── student-management.html # 学生管理
├── knowledge-management.html # 知识点管理
├── task-management.html # 学习任务管理
└── settings.html # 系统设置
🚀 快速开始
方式一：使用 Node.js 服务器（推荐）
# 进入原型目录
cd prototype/
# 启动服务器
node server.js
# 或使用启动脚本（Linux/Mac）
./start.sh
服务器将在 http://localhost:8080 启动，浏览器会自动打开。
方式二：直接打开 HTML 文件
直接用浏览器打开以下任一文件：
index.html- 统一入口页面admin-index.html- 平铺展示页面docs-index.html- 文档中心
📄 页面说明
入口页面
| 页面 | 说明 | URL |
|---|---|---|
| 统一入口 | 展示项目介绍和页面列表 | /index.html |
| 平铺展示 | 所有页面同时显示，一目了然 | /admin-index.html |
| 文档中心 | 查看 PRD、UX 设计规范等文档 | /docs-index.html |
后台管理页面
| 页面 | 功能 | URL |
|---|---|---|
| 数据概览 | 总抽背次数、平均正确率、活跃用户数、趋势图 | /pages/admin/dashboard.html |
| 抽背记录查询 | 按用户/时间筛选，数据表格，导出功能 | /pages/admin/quiz-records.html |
| 学生管理 | 学生列表，添加/编辑学生 | /pages/admin/student-management.html |
| 知识点管理 | 知识点列表，添加/编辑知识点 | /pages/admin/knowledge-management.html |
| 学习任务管理 | 任务列表，创建/编辑任务 | /pages/admin/task-management.html |
| 系统设置 | 基本设置、抽背设置、提醒设置、数据管理 | /pages/admin/settings.html |
🎨 设计规范
色彩系统
| 颜色 | 用途 | 色值 |
|---|---|---|
| 主色 | 品牌、导航、按钮 | #1890FF |
| 成功色 | 正确、已完成 | #52C41A |
| 警告色 | 待复习、警告 | #FAAD14 |
| 错误色 | 错误、重要提示 | #F5222D |
| 文字主色 | 主要文字 | #262626 |
| 文字辅色 | 次要文字 | #8C8C8C |
| 背景色 | 页面背景 | #FFFFFF / #F5F5F5 |
字体规范
| 用途 | 字号 | 字重 |
|---|---|---|
| 大标题 | 24px | Medium |
| 标题 | 18px | Medium |
| 副标题 | 16px | Regular |
| 正文 | 14px | Regular |
| 辅助文字 | 12px | Regular |
📚 参考文档
🛠️ 技术栈
- 样式框架: Tailwind CSS (CDN)
- 图标库: Font Awesome 6.4.0
- 字体: 系统默认字体栈
📝 生成信息
- 生成工具: generate-prototype-grid skill
- 生成日期: 2026-03-28
- 项目名称: AI 智能抽背助手
- 模式: 桌面端管理后台
本文档由 generate-prototype-grid 技能自动生成