Menu
生成适合视频演示的 HTML 幻灯片：大字号、低密度、左右留白、高对比、单文件输出。
Installer avec Codex ou Claude Copiez ce prompt, collez-le dans Codex, Claude ou un autre assistant, puis laissez-le vérifier la page du skill et l'installer pour vous.
Basé sur la classification professionnelle SOC
| name | html-presentation-video |
| description | 生成适合视频演示的 HTML 幻灯片：大字号、低密度、左右留白、高对比、单文件输出。 |
本规范基于 Zara Zhang 的 frontend-slides 与 beautiful-html-templates 改编，针对视频演示场景做了调整。详见项目根目录
NOTICE.md。
本规范用于指导生成适合 B 站讲解、知识分享、教程分镜的 HTML 幻灯片。
#08090d，封面页可单独使用 #070609。#c8a8ff。#ffc402。#f6f2e8、灰白 #c4c0b6、中性灰 #8a8580。14px（大）、10px（中）。每页 slide 只传达一个核心信息。标题就是结论，正文只留必要支撑。
❌ 错误：一页放 5 个要点 + 2 张图 + 1 个表格。
✅ 正确：一页 1 个标题 + 1 段说明 + 1 组视觉支撑。
| 元素 | 尺寸 | 说明 |
|---|---|---|
| 封面 h1 | clamp(42px, 5.5vw, 78px) | 占画面主导地位 |
| 内容 h2 | clamp(34px, 4vw, 56px) | 每页结论 |
| 卡片 h3 | clamp(20px, 2.2vw, 28px) | 次级标题 |
| 正文 | clamp(17px, 1.7vw, 23px) | 最小不小于 17px |
| 小字 | clamp(14px, 1.3vw, 17px) | 仅用于辅助说明 |
.slide {
padding: 6vh 10vw; /* 左右约 190px @1920px */
}
留出安全边距，避免被 B 站字幕、进度条、UP 主头像、点赞按钮遮挡。
.content-wrapper {
max-width: 1000px;
transform: scale(1.45);
transform-origin: center center;
}
核心内容在 1920×1080 画布上占据主要视觉区域，但不要超出安全边距。
h2 必须保持纯紫色，标题下方保留短紫色 divider。.accent 或 .accent-text 强调。.strikethrough 用于表示被否定的旧概念。通过伪元素 ::after 实现，颜色与文字一致，线条微微倾斜。
01、02、03 两位数字。.slide {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.cover-layout {
align-items: flex-start;
justify-content: center;
padding-left: 14vw;
text-align: left;
}
<div class="card-grid cols-2">
<div class="card">...</div>
<div class="card">...</div>
</div>
cols-2 或 cols-3，避免超过 3 列。<div class="vs-row">
<div class="vs-col left-col">...</div>
<div class="vs-col right-col">...</div>
</div>
左侧为旧方式/弱方案，右侧为新方式/强方案，使用紫色边框突出右侧。
<ul class="bullet-list">
<li>要点一</li>
<li>要点二</li>
</ul>
列表整体居中，文字左对齐。每行只写一句话，行高 1.85。
<section class="slide">
<div class="content-wrapper">
<div class="anim slide-label">标签</div>
<h2 class="anim">标题</h2>
<div class="anim divider"></div>
<p class="anim body-text">正文</p>
</div>
</section>
.anim class，激活时自动触发 fadeUp 动画。.active / .exit-up class，不使用 inline style。截图脚本会自动隐藏以下元素，保证导出画面干净：
.controls.dots.hint.progresstemplates/presentation.html。python screenshot_html_slides.py xxx.html -o slides_out。