一屏一事
学生端每屏只有一个主操作。路线图段标签只讲进度不讲达成——点亮只能由教师复核触发。
设计说明
Pad 优先，PC 其次，手机可用但不为首选
这个原型假设主要学习行为发生在较大的屏幕上。 断点用 min-width 逐级增强，默认样式即手机；不做 max-width 降级—— 这样 Pad 与 PC 拿到的是完整信息密度，手机拿到的是经过取舍的版本。
响应式断点
默认写手机，逐级加料| 断点 | 设备 | 布局 | 优先级 |
|---|---|---|---|
| < 768px | 手机 | 单列；次要信息折叠；表格横滑（带提示）；顶栏品牌后缀隐藏 | 可用 |
| ≥ 768px | Pad 竖屏 | 两列；卡片内边距加大；触控目标 ≥ 44px；字号提到 15.5px | ★ 首选 |
| ≥ 1024px | Pad 横屏 / 小笔电 | 内容 + 侧栏两栏；侧栏 sticky；三列网格 | ★ 首选 |
| ≥ 1280px | PC | 四列网格；更宽留白；九维格三列；正文字号 16px | 次选 |
布局规则
每屏至多一个主色
靛青承载交互与层级，朱砂只用于待确认与警示，不作装饰。三载体各有独立的弱色底。
角色靠加载什么隔离
学生端与教师端是不同页面。这是文件层隔离，不是权限——换 origin 就读不到，也没有跨设备同步。
设计 Token
无外部字体 CDN，全部系统栈色板
字体
- 显示体
- 宋体系（Songti SC / Noto Serif CJK）——标题与引文，东方骨相
- 正文体
- 苹方 / 鸿蒙 / 雅黑——界面文案
- 数据体
- 等宽 + tabular-nums——档位、编号、日期
正文 16px / 行高 1.7；数字一律 tabular-nums，避免档位跳动。
无障碍与教学可用性
| 项 | 做法 |
|---|---|
| 触控目标 | 所有按钮、导航项、chips 最小高度 44px（手机 38px chips 仍高于 34px 下限） |
| 焦点可见 | 统一 :focus-visible 描边，偏移 2px |
| 图形替代文本 | 雷达图与曲线都带 role="img" 与完整文字描述 |
| 对比度 | 正文与背景 ≥ 7:1；次要文字 ≥ 4.5:1；徽章文字用深化变体而非霓虹原值 |
| 动效 | 响应 prefers-reduced-motion，全部过渡关闭 |
| 打印 | 顶栏、按钮、筛选器在打印时隐藏 |
| 不靠颜色单独传达 | 状态一律「颜色 + 文字」双编码（如「需教师判断」既有底色也有文案） |
来源等级：本项目的核心纪律
这个项目历来的问题是把「材料里提到过的」当成「已确认的」。 原型的每个数据块都标了等级，任何一条都能被追问到出处。
已拍板 / 可执行
例如物理 U01 的评分口径、case02 已定的「不换算四岛雷达」约束。
材料主张
花骨朵的九大素质、五年螺旋、四类资源——未经实现验证。沈星原话：材料是汇报用框架性东西，没想过如何实现。
未核验线索
会议中口述、未落到材料的设想，例如活动供应商与佣金模式。
原型自拟
为了把结构演示清楚而编的占位内容，不是真实数据。
这个原型自己是什么
交付层级
- 本版做了
- 结构与信息架构、Pad 优先的响应式布局、可点的载体筛选与阶段展开、九维与曲线的可视化
- 本版没做
- 判定逻辑、服务端、登录、数据库、跨设备同步、真实内容核审
- 打开方式
- 直接双击 index.html；无需构建、无依赖、无网络请求
为什么只给已有证据的维度赋值
一次对话不足以诊断人格，一次活动不足以证明韧性提升。 因此底账在维度没有证据时显示「未观察」而不是「0 分」—— 这两者在教育上完全不同：前者是「还没看过」，后者是「不行」。
判据：Wiki/C08_能力画像与心力评价边界；Wiki/25:22。
阻塞这个原型的四件事
来自产品设计文档输入规格 §二文件结构
原型/ （ASCII 别名：prototype → 原型）
├── index.html 总览：三段接力、九大素质、六方面×三分类、端到端主线
├── courses.html 学程库：九项元数据规格、15 个学程（四组分面筛选 + 搜索）
├── course-gobi.html 学程实例：八阶段、取证三层、学生/教师双视角、写回底账
├── author.html 设计者工作台：发布八步、支持模式、第 4 步填写界面示意
├── admission.html 准入测评：四维条件、三档结论、补齐路径、替代学程
├── ledger.html 能力底账：九维状态、L0–L5 档位、成长曲线、写入明细
├── teacher.html 教师端：待复核队列、按评分点写结论
├── design.html 本页：断点、token、无障碍、来源等级、边界
├── README.md 怎么看、怎么验、做了什么没做什么
├── assets/
│ ├── site.css 设计系统 + 断点（Pad 优先，只用 min-width）
│ ├── proto.js 共享层：顶栏、渲染器、SVG 雷达与曲线、多组筛选 + 搜索
│ └── data.js 数据层：九大素质、学程库、支持模式、准入四维、发布八步
└── scripts/
├── check.py 静态检查 97 项（链接、断点方向、来源标注、数据隔离）
└── probe.py 渲染回归 48 组合（8 页 × 6 宽度，查横向溢出）