design: 新增播放页与课程列表 UI 效果稿（HTML/CSS）

- design_mockups/play.html：播放页，含逐句字幕高亮 + 点句跳转 + 播放器，
  用 ep1 真实台词；CSS 变量化，可迁移进 go-app
- design_mockups/list.html：26 集课程列表，含进度环、Act 音频状态、
  ep18+ 无音频降级态；用真实集标题
- design_mockups/README.md：设计语言与文档对应说明
- 06-tasks：新增 Phase D / T-200 设计任务

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

design_mockups/README.md

@@ -0,0 +1,22 @@
+# design_mockups — UI 效果稿（HTML/CSS）
+
+可在浏览器直接打开的中保真效果稿，**CSS 可直接迁移进 go-app**（技术栈选的就是纯 CSS）。
+
+| 文件 | 页面 | 看点 |
+| --- | --- | --- |
+| `play.html` | 播放页 | **逐句字幕同步**：当前句放大+琥珀高亮+左侧光条，已读句变暗；**点任意句跳转**；底部播放器（播/停、上/下一句、进度）。点 ▶ 可看自动逐句推进的效果 |
+| `list.html` | 课程列表 | 26 集卡片：英文/中文标题、Act 幕状态（有音频=琥珀点 / 无音频=虚线）、进度环；顶部"继续学习"卡；ep18+ 显示"暂无音频"降级态 |
+
+## 设计语言（深夜电影感精听）
+
+- **配色**：暖墨黑底 `#15120d` + 纸感米色 `#ece1cd` + **琥珀金单点强调** `#e6ad5c`；细微胶片颗粒 + 顶部暖光。
+- **字体**：英文句子用文学衬线 **Newsreader**（精听的主角）；UI 用 **Hanken Grotesk**；中文用 **Noto Serif SC**。
+- **原则**：单一强调色、移动优先、内容（英文句子）为视觉主体；克制、不镀金。
+
+> 颜色 / 字体 / 间距都用 CSS 变量（`:root`）集中定义，迁移进 go-app 时整段 `:root` + 组件样式可直接复用。
+
+## 与文档的对应
+
+- 形态对应 `docs/04-architecture.md`（列表 + 播放页 + 字幕同步）与 `docs/02-requirements.md` 第五节验收（逐句高亮、点句跳转、进度、无音频降级）。
+- 用的是 `family-album-usa/episodes.json` 的**真实数据**（ep1《46 Linden Street》真实台词、各集真实标题与音频覆盖）。
+- 落地任务见 `docs/06-tasks.md` 的 T-200（设计）→ T-201/T-203（实现）。