一、Skill核心定位
这个Skill聚焦无依赖HTML幻灯片标准化制作，专为追求简洁大气视觉风格、需快速生成高辨识度演示文稿的场景设计，适配学术答辩、项目汇报、产品演示等非开发类PPT制作需求，无需依赖外部框架，一键生成独立可部署文件，兼顾跨设备展示与打印规范。
二、Skill介绍
1. 核心定位
解决传统PPT制作效率低、跨设备格式错乱、视觉风格不统一问题，通过标准化HTML模板与规范，实现零依赖、高兼容、极简风幻灯片快速生成，适配学生论文答辩、项目架构展示、技术文档演示等场景。
2. 适用场景
学术场景：毕业论文答辩、学术会议汇报（需清晰展示技术架构、研究逻辑）
职场场景：项目进度汇报、产品方案演示、技术栈讲解（适配极简风格需求）
个人场景：个人作品集展示、小型培训课件（无需复杂排版，突出核心内容）
三、具体使用方法
1. 触发时机
当用户提出制作PPT、幻灯片、演示文稿需求，或要求修改现有HTML幻灯片时，启用本规范。
2. 操作步骤
需求确认：明确用户核心需求（主题、页数、核心内容板块、配色偏好），优先确认是否需要极简大气风格，排除复杂图标、花哨动画需求。
模板调用：直接调用本Skill提供的HTML模板，按以下规范调整：
文件名设置：统一命名为`项目名.html`（如`毕业论文答辩.html`），确保单个独立文件，无外部CDN、JS框架依赖。
画布适配：默认宽度1123px、高度795px，接近A4横向比例，打印时自动适配A4横向，无内容溢出。
配色调整：保留黑金双色基础配色，可根据用户需求微调金色（–accent）深浅，确保文字与背景对比度≥8:1，满足可读性要求。
内容填充：按模板结构（封面、目录、核心内容、总结）填充内容，遵循**极简原则**，每页仅保留1-2个核心观点，避免文字堆砌，标题加粗突出，正文用浅白色（–text），边框用半透明白色（–border）。
验证检查：对照文末验证清单逐项核查，确保无格式错误、无内容溢出、代码规范，完成后保存文件，支持本地预览与打印。
3. 调用示例
用户需求：“帮我做一个5页的毕业论文答辩PPT，要求简洁大气，重点展示研究方法和实验结果”
操作：调用模板后，设置文件名`毕业论文答辩.html`，填充封面（标题+姓名+专业）、目录（研究背景、方法、结果、总结）、核心内容页，按清单检查后交付，用户可直接打开HTML文件预览或打印。
四、效果测评
1. 测评维度对比
| 测评维度 | 使用本Skill前 | 使用本Skill后 |
|---|---|---|
| 制作效率 | 需手动调整格式、适配不同设备，平均耗时2-3小时/10页PPT | 模板直接复用，填充内容+简单调整即可完成，平均耗时30分钟/10页PPT，效率提升60%+ |
| 视觉效果 | 格式错乱、配色杂乱、图标花哨，缺乏专业感 | 黑金极简风格，视觉统一，无多余元素，重点突出，适配学术、职场等正式场景 |
| 兼容性 | 不同设备打开格式变形，打印时出现分页错误 | 跨设备展示无错乱，打印时自动适配A4横向，分页清晰，无内容截断 |
| 复用性 | 每次制作需重新设计，无统一标准 | 模板标准化，可重复调用，仅需调整内容，快速生成高质量PPT，降低重复工作成本 |
2. 实际成果案例
以学术论文答辩PPT为例，使用本Skill制作5页演示文稿：
封面：黑金背景+金色标题，简洁大气，快速抓住注意力；
目录页：清晰列出4个核心板块，无多余装饰，一目了然；
内容页：每页聚焦1个核心知识点，文字精简，搭配极简架构图（无复杂图标），重点突出；
总结页：核心结论加粗展示，逻辑清晰，便于观众记忆。
最终交付后，用户反馈“PPT风格专业、格式整洁，打印和线上展示都没问题，节省了大量排版时间”。
五、多Skill对比（同场景）
| Skill类型 | 核心优势 | 适用人群 | 局限性 |
|---|---|---|---|
| 本HTML幻灯片Skill | 零依赖、极简风格、跨设备兼容、打印规范，适配正式场景 | 学生、职场人、技术从业者，追求简洁专业视觉 | 不支持复杂动画、3D效果，适合轻量级演示 |
| 传统PPT软件（如PowerPoint） | 功能丰富，支持复杂动画、多媒体，操作门槛低 | 普通办公用户，需制作花哨演示文稿 | 跨设备格式易错乱，文件体积大，打印需手动调整 |
| 在线PPT工具（如石墨文档） | 云端存储、多人协作，无需本地安装 | 团队协作场景，需实时编辑PPT | 依赖网络，离线无法使用，极简风格定制性弱 |
六、Skill复用完整提示词
# PPT Skill — HTML 幻灯片制作规范
## 触发时机
当用户要求制作 PPT、幻灯片、演示文稿，或对已有 HTML 幻灯片进行修改时，启用本规范。
---
## 一、输出格式
- 输出单个独立 HTML 文件，无需任何外部依赖（无 CDN、无 JS 框架）
- 文件名建议：`项目名.html`
---
## 二、画布规格
| 参数 | 值 |
|------|-----|
| 宽度 | `1123px` |
| 高度 | `795px` |
| 比例 | 接近 A4 横向 |
| overflow | `hidden`（严禁内容溢出） |
---
## 三、配色系统（黑金双色）
```css
:root {
--primary: #0D0D0D;
--accent: #E8C547; /* 金色，主强调色 */
--bg: #0D0D0D;
--white: #FFFFFF;
--border: rgba(255,255,255,0.10);
--text: rgba(255,255,255,0.88);
--muted: rgba(255,255,255,0.45);
--card: #1A1A1A;
--card2: #222222;
--fs-body: 12px;
--fs-title: 16px;
/* 间距变量 */
--gap-inner: 4px; /* 同模块内行间距 */
--gap-item: 8px; /* 同模块内条目间距 */
--gap-block: 14px; /* 模块之间间距 */
--lh: 1.65; /* 统一行高 */
}
禁止使用的颜色：
#000（必须用 #0D0D0D）
任何纯白背景
任何3位16进制简写色值（如 #fff、#000）
```
## 四、字号规范
/* 全局默认：所有元素继承 */
.slide * { font-size: var(--fs-body); } /* 12px */
/* 以下类名自动升级为 title 尺寸 */
h2, h3, .sh-section, .sh-title, .big-label,
.slide-title, .cover-title, .feat-title, .card-title,
.num-big, .step-title, .layer-name, .pain-title {
font-size: var(--fs-title); /* 16px */
}
禁止使用： 任何硬编码的 font-size 数值（如 font-size:28px）。
封面大标题例外，可用 font-size:72px 等绝对值，但仅限封面。
## 五、边界线系统（双层）
每张幻灯片有两层边界：
/* 外层：打印边框（白色细线） */
.slide {
border: 1px solid rgba(255,255,255,0.15);
}
/* 内层：金色内容线（伪元素，inset:36px） */
.slide::before {
content: '';
position: absolute;
inset: 36px;
border: 1px solid rgba(232,197,71,0.30);
border-radius: 2px;
pointer-events: none;
z-index: 999;
}
内容不得越出金色线： 所有内容区域（header、body）的 margin 必须 ≥ 36px。
## 六、幻灯片基础结构
.slide {
width: 1123px;
height: 795px;
background: var(--bg);
position: relative;
overflow: hidden;
border-radius: 4px;
box-shadow: 0 4px 32px rgba(0,0,0,0.6);
border: 1px solid rgba(255,255,255,0.15);
flex-shrink: 0;
display: flex;
flex-direction: column;
}
## 七、Header 规范
.slide-header {
height: 68px;
background: #111111;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 52px 0 0; /* 右侧对齐金色线内侧 */
margin: 36px 36px 0; /* 与金色线对齐 */
border-bottom: 1px solid rgba(255,255,255,0.06);
flex-shrink: 0;
}
Header 结构：
<div class="slide-header">
<div class="sh-left">
<div class="sh-bar"></div> <!-- 金色竖条 -->
<div class="sh-text">
<span class="sh-section">SECTION LABEL</span> <!-- 金色大写 -->
<span class="sh-title">幻灯片标题</span>
</div>
</div>
<div class="sh-right">
<div class="sh-logo">iD</div> <!-- 品牌标识 -->
<span class="sh-page">01 / N</span>
</div>
</div>
## 八、Body 规范
/* 竖向布局（推荐） */
.slide-body {
padding: 14px 52px 14px;
margin: 0 36px 36px;
display: flex;
flex-direction: column;
justify-content: space-between; /* 自动撑满，避免大片空白 */
gap: var(--gap-block);
flex: 1;
min-height: 0;
}
/* 横向多列布局 */
.slide-cols {
padding: 14px 52px 14px;
margin: 0 36px 36px;
display: flex;
gap: var(--gap-block);
align-items: stretch;
flex: 1;
min-height: 0;
}
.col {
display: flex;
flex-direction: column;
justify-content: space-between;
gap: var(--gap-block);
flex: 1;
min-height: 0;
}
要点：
用 justify-content: space-between 保证内容均匀分布，不留大片空白
弹性子元素加 flex:1; min-height:0 确保高度自适应
flex-shrink:0 用于固定高度的顶部/底部块
## 九、常用组件
/* 卡片 */
.card { background:#1A1A1A; border:1px solid rgba(255,255,255,.10); border-radius:10px; padding:16px 18px; }
.card-hl { background:#111111; border:2px solid var(--accent); border-radius:10px; padding:16px 18px; }
/* 标签 */
.tag { display:inline-block; padding:2px 9px; border-radius:20px; font-weight:700;
background:rgba(232,197,71,.12); border:1px solid rgba(232,197,71,.35); color:var(--accent); }
.tag-m { display:inline-block; padding:2px 9px; border-radius:20px; font-weight:700;
background:#222222; border:1px solid rgba(255,255,255,.10); color:rgba(255,255,255,.45); }
/* 代码/技术标签 */
.chip { background:#1A1A1A; border:1px solid rgba(232,197,71,0.3);
border-radius:5px; padding:3px 10px; color:var(--accent); font-family:monospace; }
/* 分割线 */
.divider { width:48px; height:2px; background:var(--accent); border-radius:1px; margin:10px 0; }
/* 辅助文字 */
.sub { color:var(--muted); margin-bottom:var(--gap-block); line-height:var(--lh); }
## 十、导航栏（固定底部）
<div class="nav" id="nav">
<button class="nb" id="prevBtn" onclick="go(cur-1)" disabled>← 上一页</button>
<div class="dots" id="dots"></div>
<button class="nb" id="nextBtn" onclick="go(cur+1)">下一页 →</button>
</div>
const N = /* 总页数 */;
let cur = 0;
const slides = document.querySelectorAll('.slide');
const dots = document.getElementById('dots');
const prev = document.getElementById('prevBtn');
const next = document.getElementById('nextBtn');
// 生成圆点
slides.forEach((_,i) => {
const d = document.createElement('div');
d.className = 'dot' + (i===0?' active':'');
d.onclick = () => go(i);
dots.appendChild(d);
});
function go(n) {
if (n < 0 || n >= N) return;
slides[cur].scrollIntoView && null;
cur = n;
slides[cur].scrollIntoView({ behavior:'smooth', block:'center' });
document.querySelectorAll('.dot').forEach((d,i) => d.classList.toggle('active', i===cur));
prev.disabled = cur === 0;
next.disabled = cur === N-1;
}
document.addEventListener('keydown', e => {
if (e.key==='ArrowRight'||e.key==='ArrowDown') go(cur+1);
if (e.key==='ArrowLeft' ||e.key==='ArrowUp') go(cur-1);
});
## 十一、打印样式
@media print {
@page { size: A4 landscape; margin: 0; }
body { background: #0D0D0D; padding: 0; gap: 0; }
.nav { display: none; }
.slide {
page-break-after: always;
break-after: page;
border-radius: 0;
box-shadow: none;
border: none;
margin: 0;
width: 100vw;
height: 100vh;
}
.slide:last-child { page-break-after: avoid; break-after: avoid; }
}
## 十二、幻灯片 ID 与页码规范
每张幻灯片：id="sN"（从 s1 开始）
页码格式：NN / TT（两位数字，如 01 / 09）
封面（s1）和结束页（最后一张）通常不显示页码
新增/删除页面后必须同步更新：
所有 id="sN" 属性
所有 sh-page 中的总数 /TT
JS 中的 const N = TT
## 十三、内容布局原则
层次感表达（优先级排序）
缩进量：元素越核心，越居中/越宽；越边缘，越缩进
颜色亮度：核心模块用金色实线边框 border:2px solid var(--accent)；次级用半透明金色；边缘用白色
信息密度：核心层有标题+描述，边缘层仅标题
结构选择指南
场景 推荐结构
并列对比（2-4项） grid-template-columns: repeat(N, 1fr)
流程/递进 竖向堆叠 + 连接箭头 ↓ 或渐变线
有主次的对比 左右两栏，右侧高亮 card-hl
叙事性内容 引子 → 矛盾框 → 编号要点 → 结论
技术架构 竖向层叠，核心层最宽，边缘层缩进
严禁的设计
大片空白（必须用 justify-content:space-between 撑满）
纯并列结构表达逻辑关系（要体现主次/流向）
内容越出金色内容线
使用子层标签文字（如"接入层/能力层"）代替视觉层次
## 十四、叙事结构参考（来自实际项目）
成功的幻灯片叙事顺序：
S1 封面 — 品牌标识 + 核心定位
S2 问题层（管理视角）— 组织痛点，三列对比结构
S3 问题层（用户视角）— 第一人称叙事，流动性痛点
S4 解法框架 — 范式转换，飞轮模型
S5 产品架构 — 竖向三层（组织→项目→个人）
S6 技术架构 — 竖向堆叠，核心层居中最宽
S7 竞品对比 — 表格 + 底部三列差异说明
S8 客户画像 — 三类场景，中间列高亮
S9 结束页 — 叙事收尾 + 金句 + 行动号召
## 十五、完整页面模板
```html
<!DOCTYPE html>
项目名称<!-- S1 封面 -->
<!-- 封面内容 -->
<!-- S2 -->
SECTION幻灯片标题iD02 / N<!-- 内容 --><!-- NAV -->
```
## 十六、验证检查清单
制作完成后逐项核查：
无 #000 / #fff 等3位简写颜色
无硬编码 font-size（封面大标题除外）
所有页面 overflow:hidden，无内容溢出
Header 和 Body 的 margin 均为 36px，内容不越出金色线
justify-content:space-between，无大片空白
页码 sh-page 总数与实际页数一致
JS 中 const N 等于实际页数
每张幻灯片 id="sN" 连续无缺漏
每张 .slide 的 </div> 正确关闭（不嵌套到下一张）
七、总结与推荐
本HTML幻灯片制作规范Skill，精准匹配极简大气PPT制作需求，兼顾效率与质量，解决传统PPT格式错乱、制作低效问题，适配学术、职场等多类正式场景。相比其他PPT制作方式，在标准化、兼容性、复用性上优势明显，适合追求高效、注重视觉专业感的用户使用，是非开发场景PPT制作的优质选择
