メニュー
生成和修订小七 College 培训课件的 HTML 前端。用于 43 College、小七 College、College 课件、白描稿转视觉定稿、slide manifest 转 HTML、旧 College 课件翻新，以及修复课件布局、类名、step 动画、投影可读性、截图与 validator 问题。
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
SOC 職業分類に基づく
| name | college-kejian |
| description | 生成和修订小七 College 培训课件的 HTML 前端。用于 43 College、小七 College、College 课件、白描稿转视觉定稿、slide manifest 转 HTML、旧 College 课件翻新，以及修复课件布局、类名、step 动画、投影可读性、截图与 validator 问题。 |
把 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。
动手前先分类：
| Input | Action |
|---|---|
| 白描 HTML | 保留页面顺序，用 College 视觉布局重建每页。 |
| slide-manifest.yaml 或页面表 | 把 screen、speaker、visual、media、wording_mode 当成生成契约。 |
| 大纲或零散笔记 | 先做 P 编号页面规划；结构还不稳时，先让小七确认。 |
| 旧 College HTML | 先检查类名、布局节奏和截图，再改现有 deck shell。 |
| 旧课件作为参考 | 提取模式；旧页上的临时 hack 不进入新课件。 |
写 HTML 前先做页面规划表：
| P | Beat | Screen text | Layout | Step plan | Media | Risk |
|---|
规则：
wording_mode: preserve 时，屏幕文字原样保留。object-fit: contain。默认路径：
~/.claude/skills/小七PPT-skill/assets/template.html 复制到目标 index.html。[必填] 占位符。index.html 同级创建或保留 images/。<section class="slide"> 必须有 data-layout。.page-number；有讲师备注时写 .speaker-notes。生成约束：
<style>。<body> 后面。opacity:0 隐藏 .step；显隐交给运行时。先运行 validator：
node ~/.claude/skills/小七PPT-skill/scripts/validate-xiaoqi-deck.mjs "目标路径/index.html"
再用浏览器按 1920x1080 检查。逐页看：溢出、孤字、截图裁切、step 顺序、页码、布局节奏。可以用 Playwright 或浏览器自动化时，至少截封面、最高密度页、图片页和收束页。
交付时说明文件路径、页数、validator 结果和剩余视觉风险。迭代修改时，按 P 编号列出改过的页面。