| name | college-kejian |
| description | 生成和修订小七 College 培训课件的 HTML 前端。用于 43 College、小七 College、College 课件、白描稿转视觉定稿、slide manifest 转 HTML、旧 College 课件翻新，以及修复课件布局、类名、step 动画、投影可读性、截图与 validator 问题。 |
College 课件
Overview
把 College 白描稿、slide manifest、大纲或旧 HTML 课件，生成稳定的小七 College 横向翻页 HTML 课件。
视觉语言沿用小七 College：light mode、暖色克制、中文大字号、磨砂卡片、本地图片、逐步揭示动画。底层可以复用 ~/.claude/skills/小七PPT-skill/ 的模板和 validator；本 skill 负责更严格的页面规划、类名预检、布局契约和验收流程。
加载顺序
生成前先按任务读取 reference：
references/source-map.md: source files and old College decks to inspect.references/design-system.md: distilled College visual rules.references/generation-contract.md: page planning, layout contracts, class discipline, and common failure repairs.references/validation.md: validator, browser checks, and handoff format.
生成或修改真实课件时，再读取：
~/.claude/skills/小七PPT-skill/SKILL.md~/.claude/skills/小七PPT-skill/assets/template.html~/.claude/skills/小七PPT-skill/references/layouts.md~/.claude/skills/小七PPT-skill/references/checklist.md
如果要改底层模板或 validator，先读 ~/.claude/skills/小七PPT-skill/scripts/validate-xiaoqi-deck.mjs。
工作流
1. 判断输入
动手前先分类：
| Input | Action |
|---|
| 白描 HTML | 保留页面顺序，用 College 视觉布局重建每页。 |
| slide-manifest.yaml 或页面表 | 把 screen、speaker、visual、media、wording_mode 当成生成契约。 |
| 大纲或零散笔记 | 先做 P 编号页面规划；结构还不稳时，先让小七确认。 |
| 旧 College HTML | 先检查类名、布局节奏和截图，再改现有 deck shell。 |
| 旧课件作为参考 | 提取模式；旧页上的临时 hack 不进入新课件。 |
2. 建页面规划
写 HTML 前先做页面规划表：
| P | Beat | Screen text | Layout | Step plan | Media | Risk |
|---|
规则：
- 一页只承载一个教学节拍。
- 出现
wording_mode: preserve 时，屏幕文字原样保留。
- 默认使用小七PPT A-M 布局 ID；已有局部布局系统时沿用局部系统。
- 需要完整阅读的截图提前标记
object-fit: contain。
- 溢出、孤字、step 动画风险在生成前标出来。
3. 生成课件
默认路径：
- 把
~/.claude/skills/小七PPT-skill/assets/template.html 复制到目标 index.html。
- 立刻替换
[必填] 占位符。
- 在
index.html 同级创建或保留 images/。
- 只替换 deck root 内的 slide sections。
- 每个
<section class="slide"> 必须有 data-layout。
- 每页必须有
.page-number；有讲师备注时写 .speaker-notes。
生成约束：
- 写 slide 时不临时发明 class。需要新 reusable class，先加到模板
<style>。
- 一次性 CSS 不放在
<body> 后面。
- 不用 emoji、base64 图片、外链图片、纯黑。
- 不用内联
opacity:0 隐藏 .step；显隐交给运行时。
- 拥挤页通过拆页或减字解决，不靠缩小字号。
- 图标使用 inline SVG，线宽 1.5px。
4. 校验和修复
先运行 validator：
node ~/.claude/skills/小七PPT-skill/scripts/validate-xiaoqi-deck.mjs "目标路径/index.html"
再用浏览器按 1920x1080 检查。逐页看：溢出、孤字、截图裁切、step 顺序、页码、布局节奏。可以用 Playwright 或浏览器自动化时，至少截封面、最高密度页、图片页和收束页。
5. 交付
交付时说明文件路径、页数、validator 结果和剩余视觉风险。迭代修改时，按 P 编号列出改过的页面。
