用TRAE Skill打造极简专业PPT：HTML幻灯片制作规范实战测评
一、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 结束页 — 叙事收尾 + 金句 + 行动号召
十五、完整页面模板
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>项目名称</title>
<style>
* { margin:0; padding:0; box-sizing:border-box; }
: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;
}
body {
font-family:-apple-system,'PingFang SC','Microsoft YaHei',sans-serif;
background:#111111; display:flex; flex-direction:column;
align-items:center; padding:32px 0 80px; gap:32px; min-height:100vh;
}
.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;
}
.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;
}
.slide * { font-size:var(--fs-body); }
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); }
.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;
}
.sh-left { display:flex; align-items:center; height:100%; }
.sh-bar { width:3px; height:100%; background:var(--accent); flex-shrink:0; margin-left:-1px; }
.sh-text { padding:0 0 0 16px; }
.sh-section { color:var(--accent); font-weight:700; letter-spacing:.12em; text-transform:uppercase; display:block; margin-bottom:4px; }
.sh-title { color:var(--text); font-weight:600; display:block; }
.sh-right { display:flex; align-items:center; gap:14px; }
.sh-logo {
width:36px; height:36px; background:#1A1A1A;
border:2px solid var(--accent); border-radius:6px;
display:flex; align-items:center; justify-content:center;
font-weight:900; color:var(--accent);
}
.sh-page { color:var(--muted); }
.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; }
.card { background:var(--card); border:1px solid var(--border); border-radius:10px; padding:16px 18px; position:relative; overflow:hidden; }
.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:var(--card2); border:1px solid var(--border); color:var(--muted); }
.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); }
.nav {
position:fixed; bottom:20px; left:50%; transform:translateX(-50%);
display:flex; align-items:center; gap:14px; z-index:200;
background:rgba(17,17,17,.94); border:1px solid var(--border);
border-radius:8px; padding:7px 16px;
}
.nb { background:#1A1A1A; border:1px solid var(--border); color:var(--text); padding:5px 18px; border-radius:5px; cursor:pointer; transition:all .2s; }
.nb:hover { border-color:var(--accent); color:var(--accent); }
.nb:disabled { opacity:.22; cursor:default; }
.dots { display:flex; gap:8px; align-items:center; }
.dot { width:5px; height:5px; border-radius:3px; background:var(--muted); cursor:pointer; transition:all .3s; }
.dot.active { width:18px; background:var(--accent); }
@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; }
}
</style>
</head>
<body>
<!-- S1 封面 -->
<div class="slide" id="s1">
<!-- 封面内容 -->
</div>
<!-- S2 -->
<div class="slide" id="s2">
<div class="slide-header">
<div class="sh-left">
<div class="sh-bar"></div>
<div class="sh-text">
<span class="sh-section">SECTION</span>
<span class="sh-title">幻灯片标题</span>
</div>
</div>
<div class="sh-right">
<div class="sh-logo">iD</div>
<span class="sh-page">02 / N</span>
</div>
</div>
<div class="slide-body">
<!-- 内容 -->
</div>
</div>
<!-- NAV -->
<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>
<script>
const N=2; let cur=0;
const slides=document.querySelectorAll('.slide');
const dotsEl=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); dotsEl.appendChild(d);
});
function go(n){
if(n<0||n>=N)return; 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);
});
</script>
</body>
</html>
十六、验证检查清单
制作完成后逐项核查：
- 无
#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制作的优质选择。
## 八、效果图
