视觉与交互设计基线 v0.1 · 2026 年 10 月 27 日。这里说明已经确认的设计方向，不代表相关交互功能已经正式部署。具体状态请看课程进度。
为什么不做普通课件下载页#
这不是在网上放一份 PPT 或把 PDF 拆成章节。我们希望读者进入的是一本可探索、可质疑、可实践的技术史：SVG 帮助看懂结构，Mira 把因果解释清楚，练习让人自己做判断。
外部原书是史料与解释起点；Mira 的页面必须有独立教学价值，不能仅仅复刻原作者版式。有关教材来源、版权和教学责任参见上课方案。
视觉气质已经达成共识#
- 深海蓝：来自蓝色教材的历史厚度，用于讲义舞台和封面；
- 暖白／纸色：适合长文阅读，避免整页深色导致眼睛疲劳；
- 克制的暖金：章节序号、时间线与考证标记；
- 少量青绿：可交互部件、当前状态和关键反馈；
- 书卷气 × 工程感：有编辑排版的节制，也能把架构、证据、异常状态画明白。
禁止堆砌装饰卡、浮夸渐变、超大无意义数字以及空按钮。精致不是动画多，而是信息经过认真组织。
SVG 是主要教学媒介#
优先重绘原创的、可缩放的 SVG 图解，而不是机械地将课堂版 153 页逐页转为截图或矢量复刻。
| 图解类别 | 课堂用途 | 有意义的互动 |
|---|---|---|
| 历史时间线 | Gen 0–6 的推进、重叠与分支 | 点击阶段查看事件、前提与局限 |
| Harness 架构图 | 模型与七部件如何支持行动 | 点部件查看职责、输入、输出和失败模式 |
| Agent 状态机 | 执行、等待、审批、重试、终止 | 切换正常/异常路径，解释停机条件 |
| 技术路线比较 | API、MCP、Computer Use、本地/云端 | 改变约束，显示取舍与理由 |
| 决策推演 | 选择工作流还是 Agent | 给出可验证的后果与成本 |
图必须可放大、可阅读，含文字说明与屏幕阅读器可理解的替代描述。交互图应有键盘支持和静态降级，不靠颜色区分唯一状态。精确历史时间及来源应在写本讲时核实。
一页课该长什么样#
建议有六块紧密衔接的内容，而不是六层复杂产品导航。
- 课堂书签：当前讲次、核心问题、知识点（防止追问后迷路）。
- SVG 讲义舞台：展示当前解释的结构；必要时逐层突出。
- Mira 讲述：真正的课堂正文，包括背景、原理、案例与反证。
- 双视角推演：工程端与产品端的不同选择及其代价。
- 背景追问出口：允许深入，但结束后能回到课堂书签。
- 实战习题与反馈：开放题具约束、参考思路具证据；回答错误能说明原因。
第 00 讲的建议主题是 「能回答，不等于能交付」。图可展示模型、工具、验证、权限和运行闭环，点选 Harness 七部件后解释每项如何保护任务完成，随后让学生判断一条带审批与超时风险的真实业务链路。
HTML 与 Intelligent UI 的边界#
网站采用 MiraDocs，支持文章内容与部分 HTML 表现能力；有教学价值时可以使用 SVG、HTML 和必要脚本制作互动。
但能写 HTML 不等于线上已具备安全、可运行、可持久化的交互课堂。 正式集成要验证当前 Markdown 渲染器、脚本策略、键盘操作、SEO 静态输出、手机浏览器、回退和安全边界。
已有第 00 讲的独立 HTML 概念样板，其用途是验证视觉与交互设想；它还没有作为正式课堂集成、部署和实机验收。不得把样板存在解读为课堂交付完成。
可以逐步引入章节切换、SVG 热点、分层解释、局部练习和有根据的反馈；但不能出现点击无事发生的摆设按钮，也不能把 toast 提示当作实际完成。AI 自动批改、跨会话追问记忆与个人进度同步目前都未实施，不对外承诺其可用。
手机优先，但不能牺牲内容密度#
小屏优先保证正文清晰、图片可缩放、操作区足够易点、无横向溢出。复杂示意图可以分段、按步骤阅读，并提供文字版。桌面可以利用更宽空间展示 SVG 与讲解并列，但两个设备应呈现相同的教学含义。
每一页的验收不能止于构建通过。至少验证图文一致、理解无需跳转教材、关键交互真的可用、手机可读、题目足够严谨，且原作者贡献与我们的补充有明确边界。
第一阶段做减法#
V0.1 只需书架入口、课程手册、进度书签，随后逐讲打磨 00、01 讲。不新建复杂学习平台，不扩写公共 npm 包的官网特化职责，不一次铺满十讲。
设计目标只有一个：图让人看懂，讲解让人理解，追问保持清晰，练习能证明学到了什么。