Zakaria/open-design
1
0
Fork 0
Code Issues Pull Requests Actions 4 Packages Projects Releases Wiki Activity

first-commit
ci / Validate workspace (push) Has been cancelled
Details
landing-page-ci / Validate landing page (push) Has been cancelled
Details
landing-page-deploy / Deploy landing page (push) Has been cancelled
Details
github-metrics / Generate repository metrics SVG (push) Has been cancelled
Details
refresh-contributors-wall / Refresh contributors wall cache bust (push) Waiting to run
Details

Browse Source
This commit is contained in:
Zakaria
2026-05-04 14:58:14 -04:00
commit a46764fb1b
1210 changed files with 233231 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
skills/html-ppt/templates/single-page/arch-diagram.html
+46
View File
@@ -0,0 +1,46 @@
<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="utf-8"><title>Architecture</title>
<link rel="stylesheet" href="../../assets/fonts.css">
<link rel="stylesheet" href="../../assets/base.css">
<link rel="stylesheet" id="theme-link" href="../../assets/themes/minimal-white.css">
<link rel="stylesheet" href="../../assets/animations/animations.css">
<style>
.arch{margin-top:20px;display:grid;grid-template-rows:auto auto auto;gap:22px}
.arch .tier{display:grid;grid-template-columns:120px 1fr;align-items:stretch;gap:22px}
.arch .tname{display:flex;align-items:center;justify-content:center;background:var(--surface-2);border-radius:var(--radius);padding:18px;font-weight:600;font-size:13px;color:var(--text-2);text-transform:uppercase;letter-spacing:.1em;text-align:center}
.arch .cells{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.arch .cells.three{grid-template-columns:repeat(3,1fr)}
.arch .cell{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:16px;text-align:center;box-shadow:var(--shadow)}
.arch .cell .ic{font-size:24px}
.arch .cell h4{font-size:14px;margin:6px 0 2px}
.arch .cell p{font-size:11px;color:var(--text-3);margin:0}
.arch .tier.hl .cell{border-top:3px solid var(--accent)}
</style>
</head><body class="single">
<div class="deck"><section class="slide is-active" data-title="Architecture">
<p class="kicker">Architecture · 系统总览</p>
<h2 class="h2">一套三层栈</h2>
<div class="arch anim-stagger-list" data-anim-target>
<div class="tier"><div class="tname">UI Layer</div>
<div class="cells"><div class="cell"><div class="ic">🧱</div><h4>Layouts</h4><p>30 个单页</p></div>
<div class="cell"><div class="ic">🎨</div><h4>Themes</h4><p>24 tokens 主题</p></div>
<div class="cell"><div class="ic">✨</div><h4>Animations</h4><p>25 个命名动效</p></div>
<div class="cell"><div class="ic">⌨️</div><h4>Runtime</h4><p>键盘导航</p></div>
</div>
</div>
<div class="tier hl"><div class="tname">Core · tokens</div>
<div class="cells three"><div class="cell"><div class="ic">🎯</div><h4>base.css</h4><p>排版 + 网格</p></div>
<div class="cell"><div class="ic">🔤</div><h4>fonts.css</h4><p>中英字体</p></div>
<div class="cell"><div class="ic">🪞</div><h4>:root vars</h4><p>语义颜色</p></div>
</div>
</div>
<div class="tier"><div class="tname">Tooling</div>
<div class="cells three"><div class="cell"><div class="ic">🧪</div><h4>render.sh</h4><p>headless Chrome</p></div>
<div class="cell"><div class="ic">🆕</div><h4>new-deck.sh</h4><p>脚手架</p></div>
<div class="cell"><div class="ic">📦</div><h4>AgentSkill</h4><p>Claude 接入点</p></div>
</div>
</div>
</div>
</section></div>
<script src="../../assets/runtime.js"></script>
</body></html>
skills/html-ppt/templates/single-page/big-quote.html
+18
View File
@@ -0,0 +1,18 @@
<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="utf-8"><title>Big Quote</title>
<link rel="stylesheet" href="../../assets/fonts.css">
<link rel="stylesheet" href="../../assets/base.css">
<link rel="stylesheet" id="theme-link" href="../../assets/themes/editorial-serif.css">
<link rel="stylesheet" href="../../assets/animations/animations.css">
</head><body class="single">
<div class="deck"><section class="slide is-active center tc" data-title="Quote">
<div style="max-width:1040px">
<div class="serif" style="font-size:140px;line-height:.9;color:var(--accent);opacity:.6">"</div>
<blockquote class="serif anim-fade-up" data-anim="fade-up" style="font-size:56px;line-height:1.25;margin:-40px 0 24px;font-style:italic;font-weight:600">
好的设计不是把东西加得更多，<br>而是把一切不需要的东西拿掉。
</blockquote>
<p class="dim" style="font-size:20px;letter-spacing:.08em">— Dieter Rams</p>
</div>
</section></div>
<script src="../../assets/runtime.js"></script>
</body></html>
skills/html-ppt/templates/single-page/bullets.html
+19
View File
@@ -0,0 +1,19 @@
<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="utf-8"><title>Bullets</title>
<link rel="stylesheet" href="../../assets/fonts.css">
<link rel="stylesheet" href="../../assets/base.css">
<link rel="stylesheet" id="theme-link" href="../../assets/themes/minimal-white.css">
<link rel="stylesheet" href="../../assets/animations/animations.css">
</head><body class="single">
<div class="deck"><section class="slide is-active" data-title="Why">
<p class="kicker">Why · 为什么</p>
<h2 class="h2">好的演讲系统，帮你做三件事</h2>
<p class="lede mb-l">不是做不出漂亮的 slide，是每次都要重新做。</p>
<ul class="grid g1 anim-stagger-list" style="list-style:none;padding:0;margin:0;gap:14px" data-anim-target>
<li class="card card-accent"><h4>① 统一设计语言</h4><p class="dim">所有页共用同一套 tokens，字号、颜色、阴影不会跑偏。</p></li>
<li class="card card-accent"><h4>② 降低复用成本</h4><p class="dim">下一次讲同类话题，复制 deck、换数据、换主题即可。</p></li>
<li class="card card-accent"><h4>③ 可切换，可演示</h4><p class="dim">按 T 即可循环切主题、按 A 可切动效，汇报现场加分。</p></li>
</ul>
</section></div>
<script src="../../assets/runtime.js"></script>
</body></html>
skills/html-ppt/templates/single-page/chart-bar.html
+30
View File
@@ -0,0 +1,30 @@
<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="utf-8"><title>Chart · Bar</title>
<link rel="stylesheet" href="../../assets/fonts.css">
<link rel="stylesheet" href="../../assets/base.css">
<link rel="stylesheet" id="theme-link" href="../../assets/themes/minimal-white.css">
<link rel="stylesheet" href="../../assets/animations/animations.css">
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.3/dist/chart.umd.min.js"></script>
</head><body class="single">
<div class="deck"><section class="slide is-active" data-title="Bar chart">
<p class="kicker">Chart · 柱状图</p>
<h2 class="h2">季度 MRR 趋势</h2>
<div class="card mt-l" style="height:520px;padding:28px"><canvas id="c"></canvas></div>
<script>
addEventListener('DOMContentLoaded',()=>{
const css=getComputedStyle(document.documentElement);
const accent=css.getPropertyValue('--accent').trim();
const text2=css.getPropertyValue('--text-2').trim();
const border=css.getPropertyValue('--border').trim();
new Chart(document.getElementById('c'),{type:'bar',
data:{labels:['Q1','Q2','Q3','Q4','Q1 +1','Q2 +1','Q3 +1','Q4 +1'],
datasets:[{label:'MRR (K)',data:[42,58,73,96,124,158,204,261],
backgroundColor:accent,borderRadius:8,barThickness:36}]},
options:{plugins:{legend:{labels:{color:text2}}},
scales:{x:{ticks:{color:text2},grid:{color:border}},
y:{ticks:{color:text2},grid:{color:border}}}}});
});
</script>
</section></div>
<script src="../../assets/runtime.js"></script>
</body></html>
skills/html-ppt/templates/single-page/chart-line.html
+35
View File
@@ -0,0 +1,35 @@
<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="utf-8"><title>Chart · Line</title>
<link rel="stylesheet" href="../../assets/fonts.css">
<link rel="stylesheet" href="../../assets/base.css">
<link rel="stylesheet" id="theme-link" href="../../assets/themes/minimal-white.css">
<link rel="stylesheet" href="../../assets/animations/animations.css">
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.3/dist/chart.umd.min.js"></script>
</head><body class="single">
<div class="deck"><section class="slide is-active" data-title="Line chart">
<p class="kicker">Chart · 折线图</p>
<h2 class="h2">日活与留存并排看</h2>
<div class="card mt-l" style="height:520px;padding:28px"><canvas id="c"></canvas></div>
<script>
addEventListener('DOMContentLoaded',()=>{
const css=getComputedStyle(document.documentElement);
const accent=css.getPropertyValue('--accent').trim();
const acc2=css.getPropertyValue('--accent-2').trim();
const text2=css.getPropertyValue('--text-2').trim();
const border=css.getPropertyValue('--border').trim();
new Chart(document.getElementById('c'),{type:'line',
data:{labels:['W1','W2','W3','W4','W5','W6','W7','W8','W9','W10','W11','W12'],
datasets:[
{label:'DAU (K)',data:[12,14,15,19,24,28,33,38,45,51,58,66],
borderColor:accent,backgroundColor:accent+'22',fill:true,tension:.4,borderWidth:3,pointRadius:4},
{label:'Retention %',data:[38,40,42,45,48,50,53,55,58,60,62,64],
borderColor:acc2,backgroundColor:acc2+'22',fill:true,tension:.4,borderWidth:3,pointRadius:4}
]},
options:{plugins:{legend:{labels:{color:text2}}},
scales:{x:{ticks:{color:text2},grid:{color:border}},
y:{ticks:{color:text2},grid:{color:border}}}}});
});
</script>
</section></div>
<script src="../../assets/runtime.js"></script>
</body></html>
skills/html-ppt/templates/single-page/chart-pie.html
+36
View File
@@ -0,0 +1,36 @@
<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="utf-8"><title>Chart · Pie</title>
<link rel="stylesheet" href="../../assets/fonts.css">
<link rel="stylesheet" href="../../assets/base.css">
<link rel="stylesheet" id="theme-link" href="../../assets/themes/minimal-white.css">
<link rel="stylesheet" href="../../assets/animations/animations.css">
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.3/dist/chart.umd.min.js"></script>
</head><body class="single">
<div class="deck"><section class="slide is-active" data-title="Pie chart">
<p class="kicker">Chart · 环形图</p>
<h2 class="h2">时间都花在了哪里</h2>
<div class="grid g2 mt-l" style="align-items:center">
<div class="card" style="height:460px;padding:28px"><canvas id="c"></canvas></div>
<div class="card">
<h4>Takeaways</h4>
<p class="dim">超过一半的时间都在写内容，动效只占 5%。说明值得把动效做成可复用模板。</p>
<ul class="mt-m dim">
<li>✍️ 写内容 &nbsp; 55%</li><li>🧩 挑版式 &nbsp; 18%</li><li>🎨 调样式 &nbsp; 14%</li>
<li>📸 出图 &nbsp; 8%</li><li>✨ 动效 &nbsp; 5%</li>
</ul>
</div>
</div>
<script>
addEventListener('DOMContentLoaded',()=>{
const css=getComputedStyle(document.documentElement);
const colors=['--accent','--accent-2','--accent-3','--good','--warn'].map(k=>css.getPropertyValue(k).trim());
const text2=css.getPropertyValue('--text-2').trim();
new Chart(document.getElementById('c'),{type:'doughnut',
data:{labels:['写内容','挑版式','调样式','出图','动效'],
datasets:[{data:[55,18,14,8,5],backgroundColor:colors,borderWidth:0}]},
options:{cutout:'62%',plugins:{legend:{position:'right',labels:{color:text2}}}}});
});
</script>
</section></div>
<script src="../../assets/runtime.js"></script>
</body></html>
skills/html-ppt/templates/single-page/chart-radar.html
+31
View File
@@ -0,0 +1,31 @@
<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="utf-8"><title>Chart · Radar</title>
<link rel="stylesheet" href="../../assets/fonts.css">
<link rel="stylesheet" href="../../assets/base.css">
<link rel="stylesheet" id="theme-link" href="../../assets/themes/minimal-white.css">
<link rel="stylesheet" href="../../assets/animations/animations.css">
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.3/dist/chart.umd.min.js"></script>
</head><body class="single">
<div class="deck"><section class="slide is-active" data-title="Radar chart">
<p class="kicker">Chart · 雷达图</p>
<h2 class="h2">把 html-ppt 和竞品放一张图</h2>
<div class="card mt-l" style="height:520px;padding:28px"><canvas id="c"></canvas></div>
<script>
addEventListener('DOMContentLoaded',()=>{
const css=getComputedStyle(document.documentElement);
const a1=css.getPropertyValue('--accent').trim();
const a2=css.getPropertyValue('--accent-2').trim();
const text2=css.getPropertyValue('--text-2').trim();
new Chart(document.getElementById('c'),{type:'radar',
data:{labels:['上手','美观','自定义','性能','导出','生态'],
datasets:[
{label:'html-ppt',data:[9,9,10,10,9,6],borderColor:a1,backgroundColor:a1+'33',borderWidth:3,pointRadius:5},
{label:'reveal.js',data:[8,7,9,8,8,10],borderColor:a2,backgroundColor:a2+'22',borderWidth:3,pointRadius:5}]},
options:{plugins:{legend:{labels:{color:text2}}},
scales:{r:{suggestedMin:0,suggestedMax:10,ticks:{color:text2,backdropColor:'transparent'},
pointLabels:{color:text2,font:{size:14}},grid:{color:'rgba(0,0,0,.08)'},angleLines:{color:'rgba(0,0,0,.08)'}}}}});
});
</script>
</section></div>
<script src="../../assets/runtime.js"></script>
</body></html>
skills/html-ppt/templates/single-page/code.html
+33
View File
@@ -0,0 +1,33 @@
<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="utf-8"><title>Code</title>
<link rel="stylesheet" href="../../assets/fonts.css">
<link rel="stylesheet" href="../../assets/base.css">
<link rel="stylesheet" id="theme-link" href="../../assets/themes/tokyo-night.css">
<link rel="stylesheet" href="../../assets/animations/animations.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/highlight.js@11.10.0/styles/tokyo-night-dark.min.css">
<script src="https://cdn.jsdelivr.net/npm/highlight.js@11.10.0/lib/core.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/highlight.js@11.10.0/lib/languages/javascript.min.js"></script>
<script>addEventListener('DOMContentLoaded',()=>{hljs.registerLanguage('javascript',window.hljsLangJavascript||window.hljs.getLanguage('javascript'));document.querySelectorAll('pre code').forEach(el=>hljs.highlightElement(el))})</script>
</head><body class="single">
<div class="deck"><section class="slide is-active" data-title="Code">
<p class="kicker">Snippet · 运行时核心</p>
<h2 class="h2">按一下键盘，幻灯片就跑起来了</h2>
<pre class="card mt-m" style="padding:24px"><code class="language-javascript">// runtime.js — keyboard-driven deck
function go(n) {
n = Math.max(0, Math.min(total - 1, n));
slides.forEach((s, i) => {
s.classList.toggle('is-active', i === n);
});
idx = n;
barFill.style.width = ((n + 1) / total * 100) + '%';
history.replaceState(null, '', '#/' + (n + 1));
}
document.addEventListener('keydown', (e) =&gt; {
if (e.key === 'ArrowRight' || e.key === ' ') go(idx + 1);
if (e.key === 'ArrowLeft') go(idx - 1);
if (e.key === 't') cycleTheme();
});</code></pre>
</section></div>
<script src="../../assets/runtime.js"></script>
</body></html>
skills/html-ppt/templates/single-page/comparison.html
+47
View File
@@ -0,0 +1,47 @@
<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="utf-8"><title>Comparison</title>
<link rel="stylesheet" href="../../assets/fonts.css">
<link rel="stylesheet" href="../../assets/base.css">
<link rel="stylesheet" id="theme-link" href="../../assets/themes/minimal-white.css">
<link rel="stylesheet" href="../../assets/animations/animations.css">
<style>
.vs{display:grid;grid-template-columns:1fr 90px 1fr;gap:28px;align-items:stretch;margin-top:30px}
.vs .side{padding:30px}
.vs .mid{font-size:56px;font-weight:800;color:var(--text-3);display:flex;align-items:center;justify-content:center}
.vs .bad-side{border-top:3px solid var(--bad)}
.vs .good-side{border-top:3px solid var(--good)}
.vs h3{font-size:24px}
.vs ul{padding-left:20px;font-size:15px;line-height:1.8;color:var(--text-2)}
.vs li::marker{color:var(--bad)}
.vs .good-side li::marker{color:var(--good)}
</style>
</head><body class="single">
<div class="deck"><section class="slide is-active" data-title="Comparison">
<p class="kicker">Before vs After · 对比</p>
<h2 class="h2">从「每次重做」到「一键起稿」</h2>
<div class="vs">
<div class="card bad-side side anim-fade-left" data-anim="fade-left">
<h3>📉 过去</h3>
<ul>
<li>每次都要重新做封面、目录、结语</li>
<li>颜色、字号跨 slide 不一致</li>
<li>想换主题？手动改每一页</li>
<li>动效全靠 transition 硬写</li>
<li>截图导出还要一张一张截</li>
</ul>
</div>
<div class="mid">→</div>
<div class="card good-side side anim-fade-right" data-anim="fade-right">
<h3>📈 现在</h3>
<ul>
<li>复制模板、换数据、完事</li>
<li>所有页共享 tokens</li>
<li>按 <b>T</b> 循环切主题</li>
<li>25 个命名动效直接挑</li>
<li>一条 render.sh 全部出图</li>
</ul>
</div>
</div>
</section></div>
<script src="../../assets/runtime.js"></script>
</body></html>
skills/html-ppt/templates/single-page/cover.html
+32
View File
@@ -0,0 +1,32 @@
<!DOCTYPE html>
<html lang="zh-CN" data-theme="minimal-white">
<head>
<meta charset="utf-8"><title>Cover — html-ppt</title>
<link rel="stylesheet" href="../../assets/fonts.css">
<link rel="stylesheet" href="../../assets/base.css">
<link rel="stylesheet" id="theme-link" href="../../assets/themes/minimal-white.css">
<link rel="stylesheet" href="../../assets/animations/animations.css">
</head>
<body class="single">
<div class="deck" data-themes="minimal-white,aurora,catppuccin-mocha,tokyo-night,xiaohongshu-white,neo-brutalism" data-theme-base="../../assets/themes/">
<section class="slide is-active" data-title="Cover">
<div class="deck-header"><span class="eyebrow">Keynote · 2026</span><span class="eyebrow">html-ppt</span></div>
<div class="anim-stagger-list">
<p class="kicker">Tech Sharing · 纯干货</p>
<h1 class="h1 anim-fade-up" data-anim="fade-up">
设计一套<span class="gradient-text">属于你</span>的<br>HTML 演讲系统
</h1>
<p class="lede">从主题、版式到动效，全部由模板驱动。一行命令即可开场。</p>
<div class="row wrap mt-l">
<span class="pill pill-accent">24 themes</span>
<span class="pill">30 layouts</span>
<span class="pill">25 animations</span>
<span class="pill">零构建</span>
</div>
</div>
<div class="deck-footer"><span class="dim2">lewis · 2026-04-15</span><span class="slide-number" data-current="1" data-total="1"></span></div>
<div class="notes">封面页口播：大家好，今天给大家带来一套开箱即用的 HTML 演讲系统。</div>
</section>
</div>
<script src="../../assets/runtime.js"></script>
</body></html>
skills/html-ppt/templates/single-page/cta.html
+27
View File
@@ -0,0 +1,27 @@
<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="utf-8"><title>CTA</title>
<link rel="stylesheet" href="../../assets/fonts.css">
<link rel="stylesheet" href="../../assets/base.css">
<link rel="stylesheet" id="theme-link" href="../../assets/themes/aurora.css">
<link rel="stylesheet" href="../../assets/animations/animations.css">
<style>
.cta .btn{display:inline-flex;align-items:center;gap:10px;padding:20px 32px;border-radius:999px;background:var(--accent);color:#0b1024;font-weight:700;font-size:20px;box-shadow:var(--shadow-lg);text-decoration:none;border:none;cursor:pointer}
.cta .btn.outline{background:transparent;color:var(--text-1);border:1.5px solid var(--border-strong)}
</style>
</head><body class="single">
<div class="deck"><section class="slide is-active center tc cta" data-title="CTA">
<div style="max-width:900px">
<p class="kicker">Call to action</p>
<h1 class="h1 anim-rise-in" data-anim="rise-in" style="font-size:96px">
<span class="gradient-text">动手做你的</span><br>第一份 html-ppt
</h1>
<p class="lede" style="margin:16px auto 30px">复制模板、换上你的内容、按 <b>T</b> 挑一个最对味的主题，讲完还能一键导出 PNG。</p>
<div class="row" style="justify-content:center">
<a class="btn" href="#">🚀 ./new-deck.sh my-talk</a>
<a class="btn outline" href="#">查看 SKILL.md</a>
</div>
<p class="dim mt-l" style="font-size:14px">键盘： ← → 翻页 · T 主题 · A 动效 · F 全屏 · O 概览 · S 备注</p>
</div>
</section></div>
<script src="../../assets/runtime.js"></script>
</body></html>
skills/html-ppt/templates/single-page/diff.html
+35
View File
@@ -0,0 +1,35 @@
<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="utf-8"><title>Diff</title>
<link rel="stylesheet" href="../../assets/fonts.css">
<link rel="stylesheet" href="../../assets/base.css">
<link rel="stylesheet" id="theme-link" href="../../assets/themes/minimal-white.css">
<link rel="stylesheet" href="../../assets/animations/animations.css">
<style>
.diff{font-family:var(--font-mono);font-size:14px;line-height:1.6;border-radius:var(--radius);overflow:hidden;border:1px solid var(--border)}
.diff .ln{display:block;padding:2px 16px;white-space:pre}
.diff .add{background:rgba(26,175,108,.12);color:var(--good)}
.diff .del{background:rgba(224,68,90,.12);color:var(--bad)}
.diff .ctx{color:var(--text-2)}
.diff .hd{background:var(--surface-2);color:var(--text-3);padding:8px 16px;font-size:12px;letter-spacing:.08em;text-transform:uppercase;border-bottom:1px solid var(--border)}
</style>
</head><body class="single">
<div class="deck"><section class="slide is-active" data-title="Diff">
<p class="kicker">Before / After</p>
<h2 class="h2">一次迁移到 tokens 后</h2>
<div class="card diff mt-l" style="padding:0">
<div class="hd">assets/components/card.css</div>
<span class="ln ctx">.card {</span>
<span class="ln del">- background: #ffffff;</span>
<span class="ln del">- color: #0c0d10;</span>
<span class="ln del">- border-radius: 18px;</span>
<span class="ln del">- box-shadow: 0 10px 30px rgba(18,24,40,.08);</span>
<span class="ln add">+ background: var(--surface);</span>
<span class="ln add">+ color: var(--text-1);</span>
<span class="ln add">+ border-radius: var(--radius);</span>
<span class="ln add">+ box-shadow: var(--shadow);</span>
<span class="ln ctx">}</span>
</div>
<p class="dim mt-m">24 个主题从此只需改 variables——其他 0 改动。</p>
</section></div>
<script src="../../assets/runtime.js"></script>
</body></html>
skills/html-ppt/templates/single-page/flow-diagram.html
+33
View File
@@ -0,0 +1,33 @@
<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="utf-8"><title>Flow Diagram</title>
<link rel="stylesheet" href="../../assets/fonts.css">
<link rel="stylesheet" href="../../assets/base.css">
<link rel="stylesheet" id="theme-link" href="../../assets/themes/minimal-white.css">
<link rel="stylesheet" href="../../assets/animations/animations.css">
<style>
.flow{display:flex;align-items:center;gap:16px;margin-top:40px;max-width:1200px}
.flow .node{flex:1;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:22px;text-align:center;box-shadow:var(--shadow);position:relative}
.flow .node .ic{font-size:32px;margin-bottom:6px}
.flow .node h4{font-size:16px}
.flow .node p{font-size:12px;color:var(--text-3);margin:0}
.flow .arr{color:var(--text-3);font-size:28px;flex-shrink:0}
.flow .node.hl{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 18%,transparent),var(--shadow)}
</style>
</head><body class="single">
<div class="deck"><section class="slide is-active" data-title="Flow">
<p class="kicker">Pipeline · 渲染管线</p>
<h2 class="h2">从 Markdown 到 PNG，共 5 步</h2>
<div class="flow anim-stagger-list" data-anim-target>
<div class="node"><div class="ic">📝</div><h4>Markdown</h4><p>你的内容源</p></div>
<div class="arr">→</div>
<div class="node"><div class="ic">🧩</div><h4>Layouts</h4><p>选择页型</p></div>
<div class="arr">→</div>
<div class="node hl"><div class="ic">🎨</div><h4>Theme</h4><p>换装</p></div>
<div class="arr">→</div>
<div class="node"><div class="ic">🌐</div><h4>HTML</h4><p>运行时接管</p></div>
<div class="arr">→</div>
<div class="node"><div class="ic">📸</div><h4>PNG</h4><p>headless Chrome</p></div>
</div>
</section></div>
<script src="../../assets/runtime.js"></script>
</body></html>
skills/html-ppt/templates/single-page/gantt.html
+29
View File
@@ -0,0 +1,29 @@
<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="utf-8"><title>Gantt</title>
<link rel="stylesheet" href="../../assets/fonts.css">
<link rel="stylesheet" href="../../assets/base.css">
<link rel="stylesheet" id="theme-link" href="../../assets/themes/minimal-white.css">
<link rel="stylesheet" href="../../assets/animations/animations.css">
<style>
.gantt{margin-top:24px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:24px}
.gantt .hd{display:grid;grid-template-columns:200px repeat(12,1fr);gap:4px;font-size:12px;color:var(--text-3);text-transform:uppercase;letter-spacing:.08em;margin-bottom:10px;padding-bottom:10px;border-bottom:1px solid var(--border)}
.gantt .row{display:grid;grid-template-columns:200px repeat(12,1fr);gap:4px;align-items:center;height:40px}
.gantt .lbl{font-size:14px;font-weight:500}
.gantt .cells{grid-column:2/-1;position:relative;height:28px;background:linear-gradient(90deg,var(--surface-2) 1px,transparent 1px) 0 0/calc(100%/12) 100%}
.gantt .bar{position:absolute;top:4px;height:20px;border-radius:6px;background:var(--grad);display:flex;align-items:center;padding:0 10px;font-size:11px;color:#fff;font-weight:600;box-shadow:var(--shadow)}
</style>
</head><body class="single">
<div class="deck"><section class="slide is-active" data-title="Gantt">
<p class="kicker">Plan · Q2 甘特图</p>
<h2 class="h2">四个月，五条线并行</h2>
<div class="gantt">
<div class="hd"><div>任务</div><div>W1</div><div>W2</div><div>W3</div><div>W4</div><div>W5</div><div>W6</div><div>W7</div><div>W8</div><div>W9</div><div>W10</div><div>W11</div><div>W12</div></div>
<div class="row"><div class="lbl">主题系统 (tokens)</div><div class="cells"><div class="bar" style="left:0;width:25%">tokens + 24 themes</div></div></div>
<div class="row"><div class="lbl">layouts 目录</div><div class="cells"><div class="bar" style="left:17%;width:33%">30 个单页模板</div></div></div>
<div class="row"><div class="lbl">动画系统</div><div class="cells"><div class="bar" style="left:42%;width:25%">25 个命名动效</div></div></div>
<div class="row"><div class="lbl">渲染 / CI</div><div class="cells"><div class="bar" style="left:58%;width:25%">render.sh</div></div></div>
<div class="row"><div class="lbl">发布 & 文档</div><div class="cells"><div class="bar" style="left:75%;width:25%">v1.0</div></div></div>
</div>
</section></div>
<script src="../../assets/runtime.js"></script>
</body></html>
skills/html-ppt/templates/single-page/image-grid.html
+34
View File
@@ -0,0 +1,34 @@
<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="utf-8"><title>Image Grid</title>
<link rel="stylesheet" href="../../assets/fonts.css">
<link rel="stylesheet" href="../../assets/base.css">
<link rel="stylesheet" id="theme-link" href="../../assets/themes/minimal-white.css">
<link rel="stylesheet" href="../../assets/animations/animations.css">
<style>
.gg{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:180px;gap:14px;margin-top:24px}
.gg .cell{border-radius:var(--radius);overflow:hidden;position:relative;box-shadow:var(--shadow)}
.gg .cell span{position:absolute;inset:auto 0 0 0;padding:12px 14px;color:#fff;font-size:13px;font-weight:500;background:linear-gradient(transparent,rgba(0,0,0,.55))}
.gg .c1{background:linear-gradient(135deg,#3b6cff,#7a5cff);grid-column:span 2;grid-row:span 2}
.gg .c2{background:linear-gradient(135deg,#ff7a90,#ff2742)}
.gg .c3{background:linear-gradient(135deg,#5ef2c6,#7aa2ff)}
.gg .c4{background:linear-gradient(135deg,#ffd27a,#f2a341)}
.gg .c5{background:linear-gradient(135deg,#c984ff,#ff5c8a)}
.gg .c6{background:linear-gradient(135deg,#0e1530,#24283b)}
.gg .c7{background:linear-gradient(135deg,#88c0d0,#5ef2c6);grid-column:span 2}
</style>
</head><body class="single">
<div class="deck"><section class="slide is-active" data-title="Image Grid">
<p class="kicker">Gallery · 作品集</p>
<h2 class="h2">一次 bento grid，六张要点图</h2>
<div class="gg anim-stagger-list" data-anim-target>
<div class="cell c1"><span>主视觉 · Keynote 封面</span></div>
<div class="cell c2"><span>暖色 · Stat</span></div>
<div class="cell c3"><span>冷色 · Flow</span></div>
<div class="cell c4"><span>日落 · Code</span></div>
<div class="cell c5"><span>渐变 · Quote</span></div>
<div class="cell c6"><span>暗色 · Terminal</span></div>
<div class="cell c7"><span>极光 · CTA</span></div>
</div>
</section></div>
<script src="../../assets/runtime.js"></script>
</body></html>
skills/html-ppt/templates/single-page/image-hero.html
+33
View File
@@ -0,0 +1,33 @@
<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="utf-8"><title>Image Hero</title>
<link rel="stylesheet" href="../../assets/fonts.css">
<link rel="stylesheet" href="../../assets/base.css">
<link rel="stylesheet" id="theme-link" href="../../assets/themes/minimal-white.css">
<link rel="stylesheet" href="../../assets/animations/animations.css">
<style>
.hero{position:relative;height:calc(100vh - 144px);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-lg)}
.hero .bg{position:absolute;inset:0;background:
radial-gradient(80% 60% at 30% 40%,#ffb38a,transparent 70%),
radial-gradient(70% 50% at 75% 60%,#c084fc,transparent 70%),
linear-gradient(135deg,#0b1024,#1a2238)}
.hero .bg.kb{animation:kf-kenburns 12s ease-in-out infinite alternate}
.hero .overlay{position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(10,12,20,.65));}
.hero .caption{position:absolute;bottom:48px;left:56px;right:56px;color:#fff;z-index:2}
.hero h1{font-size:72px;line-height:1;font-weight:800;letter-spacing:-.03em;margin:0}
.hero p{font-size:20px;opacity:.85;margin:14px 0 0;max-width:60ch}
.hero .pill{background:rgba(255,255,255,.12);color:#fff;border:1px solid rgba(255,255,255,.2)}
</style>
</head><body class="single">
<div class="deck"><section class="slide is-active" data-title="Image Hero" style="padding:56px">
<div class="hero">
<div class="bg kb"></div>
<div class="overlay"></div>
<div class="caption">
<span class="pill">Cover · 04</span>
<h1 class="mt-s anim-rise-in" data-anim="rise-in">像杂志一样的<br>封面画面感</h1>
<p>Ken Burns 缓慢推拉 + 径向渐变 + 中灰叠加。无须真实图片，也能做出高级感。</p>
</div>
</div>
</section></div>
<script src="../../assets/runtime.js"></script>
</body></html>
skills/html-ppt/templates/single-page/kpi-grid.html
+19
View File
@@ -0,0 +1,19 @@
<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="utf-8"><title>KPI Grid</title>
<link rel="stylesheet" href="../../assets/fonts.css">
<link rel="stylesheet" href="../../assets/base.css">
<link rel="stylesheet" id="theme-link" href="../../assets/themes/minimal-white.css">
<link rel="stylesheet" href="../../assets/animations/animations.css">
</head><body class="single">
<div class="deck"><section class="slide is-active" data-title="KPIs">
<p class="kicker">Metrics · 关键数字</p>
<h2 class="h2">这一季度，我们做到了什么</h2>
<div class="grid g4 mt-l anim-stagger-list" data-anim-target>
<div class="card"><p class="eyebrow">Revenue</p><div style="font-size:56px;font-weight:800"><span class="counter" data-to="1248">0</span>K</div><p class="dim" style="color:var(--good)">↑ 38% YoY</p></div>
<div class="card"><p class="eyebrow">Active users</p><div style="font-size:56px;font-weight:800"><span class="counter" data-to="82">0</span>K</div><p class="dim" style="color:var(--good)">↑ 12% QoQ</p></div>
<div class="card"><p class="eyebrow">Retention</p><div style="font-size:56px;font-weight:800"><span class="counter" data-to="74">0</span>%</div><p class="dim" style="color:var(--good)">↑ 3 pts</p></div>
<div class="card"><p class="eyebrow">NPS</p><div style="font-size:56px;font-weight:800"><span class="counter" data-to="61">0</span></div><p class="dim" style="color:var(--warn)">→ 持平</p></div>
</div>
</section></div>
<script src="../../assets/runtime.js"></script>
</body></html>
skills/html-ppt/templates/single-page/mindmap.html
+38
View File
@@ -0,0 +1,38 @@
<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="utf-8"><title>Mindmap</title>
<link rel="stylesheet" href="../../assets/fonts.css">
<link rel="stylesheet" href="../../assets/base.css">
<link rel="stylesheet" id="theme-link" href="../../assets/themes/minimal-white.css">
<link rel="stylesheet" href="../../assets/animations/animations.css">
<style>
.mm{position:relative;margin:30px auto 0;max-width:1200px;height:520px}
.mm .n{position:absolute;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:12px 18px;box-shadow:var(--shadow);font-weight:600}
.mm .root{top:calc(50% - 34px);left:calc(50% - 100px);width:200px;padding:22px;background:var(--accent);color:#fff;border:none;text-align:center;font-size:20px;border-radius:24px}
.mm .n.sm{font-size:13px}
.mm svg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.mm svg path{stroke:var(--border-strong);stroke-width:1.5;fill:none}
</style>
</head><body class="single">
<div class="deck"><section class="slide is-active" data-title="Mindmap">
<p class="kicker">Concept map · 心智图</p>
<h2 class="h2">html-ppt 的知识地图</h2>
<div class="mm">
<svg class="anim-path-draw" viewBox="0 0 1200 520" preserveAspectRatio="none">
<path d="M600,260 C400,140 280,100 160,90"/>
<path d="M600,260 C400,380 280,420 160,430"/>
<path d="M600,260 C800,140 920,100 1040,90"/>
<path d="M600,260 C800,380 920,420 1040,430"/>
<path d="M600,260 C600,140 600,100 600,60"/>
<path d="M600,260 C600,380 600,420 600,460"/>
</svg>
<div class="n root">html-ppt</div>
<div class="n" style="top:60px;left:40px">Themes</div>
<div class="n sm" style="top:410px;left:40px">Layouts</div>
<div class="n sm" style="top:60px;right:40px">Animations</div>
<div class="n sm" style="top:410px;right:40px">Runtime</div>
<div class="n sm" style="top:30px;left:calc(50% - 50px)">Tokens</div>
<div class="n sm" style="top:450px;left:calc(50% - 60px)">Render.sh</div>
</div>
</section></div>
<script src="../../assets/runtime.js"></script>
</body></html>
skills/html-ppt/templates/single-page/process-steps.html
+27
View File
@@ -0,0 +1,27 @@
<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="utf-8"><title>Process Steps</title>
<link rel="stylesheet" href="../../assets/fonts.css">
<link rel="stylesheet" href="../../assets/base.css">
<link rel="stylesheet" id="theme-link" href="../../assets/themes/minimal-white.css">
<link rel="stylesheet" href="../../assets/animations/animations.css">
<style>
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin-top:24px}
.step{position:relative;padding:24px 26px;border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);box-shadow:var(--shadow)}
.step .num{position:absolute;top:-24px;left:22px;width:48px;height:48px;border-radius:50%;background:var(--accent);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:20px;box-shadow:var(--shadow)}
.step h4{margin:18px 0 8px;font-size:17px}
.step p{font-size:13px;color:var(--text-2);line-height:1.6}
.step .tag{display:inline-block;margin-top:10px;font-size:11px;padding:3px 10px;border-radius:999px;background:var(--surface-2);color:var(--text-3)}
</style>
</head><body class="single">
<div class="deck"><section class="slide is-active" data-title="Process">
<p class="kicker">How-to · 四步做一个 deck</p>
<h2 class="h2">从零到一，只需要十分钟</h2>
<div class="steps anim-stagger-list" data-anim-target>
<div class="step"><div class="num">1</div><h4>起稿</h4><p>运行 <code>new-deck.sh</code> 创建脚手架，默认 6 页。</p><span class="tag">~30s</span></div>
<div class="step"><div class="num">2</div><h4>选版式</h4><p>从 <code>templates/single-page/</code> 里复制你需要的页型。</p><span class="tag">~2min</span></div>
<div class="step"><div class="num">3</div><h4>写内容</h4><p>替换 demo 数据，保留结构。</p><span class="tag">~6min</span></div>
<div class="step"><div class="num">4</div><h4>换主题</h4><p>按 <b>T</b> 循环看 24 个主题，挑一个定稿。</p><span class="tag">~1min</span></div>
</div>
</section></div>
<script src="../../assets/runtime.js"></script>
</body></html>
skills/html-ppt/templates/single-page/pros-cons.html
+31
View File
@@ -0,0 +1,31 @@
<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="utf-8"><title>Pros / Cons</title>
<link rel="stylesheet" href="../../assets/fonts.css">
<link rel="stylesheet" href="../../assets/base.css">
<link rel="stylesheet" id="theme-link" href="../../assets/themes/minimal-white.css">
<link rel="stylesheet" href="../../assets/animations/animations.css">
<style>
.pc{display:grid;grid-template-columns:1fr 1fr;gap:28px;margin-top:30px}
.pc .card h3{display:flex;align-items:center;gap:10px}
.pc .card h3 .b{display:inline-flex;width:36px;height:36px;border-radius:10px;align-items:center;justify-content:center;font-size:20px}
.pc .pro h3 .b{background:color-mix(in srgb,var(--good) 18%,transparent);color:var(--good)}
.pc .con h3 .b{background:color-mix(in srgb,var(--bad) 18%,transparent);color:var(--bad)}
.pc ul{padding-left:22px;line-height:1.8;color:var(--text-2)}
.pc .pro{border-top:3px solid var(--good)}
.pc .con{border-top:3px solid var(--bad)}
</style>
</head><body class="single">
<div class="deck"><section class="slide is-active" data-title="Pros Cons">
<p class="kicker">Trade-offs · 诚实的取舍</p>
<h2 class="h2">纯 HTML 演讲：好在哪里，痛在哪里</h2>
<div class="pc">
<div class="card pro anim-fade-up" data-anim="fade-up"><h3><span class="b">✓</span> 好处</h3>
<ul><li>零构建：一个文件就能跑</li><li>可 diff：Git 友好，好 review</li><li>可编程：动效自由定制</li><li>可分发：URL / PDF / PNG 都行</li></ul>
</div>
<div class="card con anim-fade-up" data-anim="fade-up"><h3><span class="b">✗</span> 痛点</h3>
<ul><li>协作不像 Keynote 那样实时</li><li>非程序员上手稍陡</li><li>复杂动效仍需写 JS</li><li>部分字体在离线环境缺失</li></ul>
</div>
</div>
</section></div>
<script src="../../assets/runtime.js"></script>
</body></html>
skills/html-ppt/templates/single-page/roadmap.html
+46
View File
@@ -0,0 +1,46 @@
<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="utf-8"><title>Roadmap</title>
<link rel="stylesheet" href="../../assets/fonts.css">
<link rel="stylesheet" href="../../assets/base.css">
<link rel="stylesheet" id="theme-link" href="../../assets/themes/minimal-white.css">
<link rel="stylesheet" href="../../assets/animations/animations.css">
<style>
.rm{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:28px;border:1px solid var(--border);border-radius:var(--radius);overflow:hidden}
.rm .col{padding:20px 22px;border-right:1px solid var(--border);background:var(--surface);position:relative}
.rm .col:last-child{border-right:none}
.rm .col .tag{display:inline-block;padding:3px 12px;border-radius:999px;font-size:11px;background:var(--surface-2);color:var(--text-2);margin-bottom:10px}
.rm .col.now{background:color-mix(in srgb,var(--accent) 6%,var(--surface))}
.rm .col.now .tag{background:var(--accent);color:#fff}
.rm h4{font-size:15px;margin:8px 0 4px}
.rm ul{padding-left:18px;margin:8px 0 0;font-size:13px;color:var(--text-2)}
.rm li{margin-bottom:6px;line-height:1.5}
</style>
</head><body class="single">
<div class="deck"><section class="slide is-active" data-title="Roadmap">
<p class="kicker">Roadmap · 2026</p>
<h2 class="h2">接下来四个季度，我们会做什么</h2>
<div class="rm">
<div class="col now">
<span class="tag">NOW · Q2</span>
<h4>主题系统</h4>
<ul><li>24 个官方主题</li><li>tokens 语义文档</li><li>T 键循环切换</li></ul>
</div>
<div class="col">
<span class="tag">NEXT · Q3</span>
<h4>导出</h4>
<ul><li>PNG 批量</li><li>PDF 打包</li><li>小红书 3:4 切片</li></ul>
</div>
<div class="col">
<span class="tag">LATER · Q4</span>
<h4>交互</h4>
<ul><li>Presenter 模式</li><li>Notes 同屏</li><li>遥控器配对</li></ul>
</div>
<div class="col">
<span class="tag">VISION</span>
<h4>AI 写稿</h4>
<ul><li>从 md 自动分页</li><li>智能选版式</li><li>智能选主题</li></ul>
</div>
</div>
</section></div>
<script src="../../assets/runtime.js"></script>
</body></html>
skills/html-ppt/templates/single-page/section-divider.html
+17
View File
@@ -0,0 +1,17 @@
<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="utf-8"><title>Section Divider</title>
<link rel="stylesheet" href="../../assets/fonts.css">
<link rel="stylesheet" href="../../assets/base.css">
<link rel="stylesheet" id="theme-link" href="../../assets/themes/minimal-white.css">
<link rel="stylesheet" href="../../assets/animations/animations.css">
</head><body class="single">
<div class="deck"><section class="slide is-active tc center" data-title="Section 02">
<div style="max-width:780px;margin:0 auto">
<p class="kicker anim-fade-down" data-anim="fade-down">Section · 02</p>
<h1 class="h1 anim-rise-in" data-anim="rise-in" style="font-size:112px">主题与 <span class="gradient-text">Tokens</span></h1>
<div class="divider-accent" style="margin:24px auto"></div>
<p class="lede" style="margin:0 auto">换主题 = 换一份 CSS 变量。其他一切保持不变。</p>
</div>
</section></div>
<script src="../../assets/runtime.js"></script>
</body></html>
skills/html-ppt/templates/single-page/stat-highlight.html
+17
View File
@@ -0,0 +1,17 @@
<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="utf-8"><title>Stat Highlight</title>
<link rel="stylesheet" href="../../assets/fonts.css">
<link rel="stylesheet" href="../../assets/base.css">
<link rel="stylesheet" id="theme-link" href="../../assets/themes/minimal-white.css">
<link rel="stylesheet" href="../../assets/animations/animations.css">
</head><body class="single">
<div class="deck"><section class="slide is-active center tc" data-title="Stat">
<p class="kicker">Impact · 一个数字</p>
<div style="font-size:260px;line-height:1;font-weight:900;letter-spacing:-.05em">
<span class="counter gradient-text" data-to="92">0</span><span class="gradient-text">%</span>
</div>
<h3 class="mt-s">的准备时间被你省下</h3>
<p class="lede" style="margin:16px auto 0">在 10 个真实项目中，使用 html-ppt 的平均 deck 制作时间从 4 小时降到了 20 分钟。</p>
</section></div>
<script src="../../assets/runtime.js"></script>
</body></html>
skills/html-ppt/templates/single-page/table.html
+33
View File
@@ -0,0 +1,33 @@
<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="utf-8"><title>Table</title>
<link rel="stylesheet" href="../../assets/fonts.css">
<link rel="stylesheet" href="../../assets/base.css">
<link rel="stylesheet" id="theme-link" href="../../assets/themes/minimal-white.css">
<link rel="stylesheet" href="../../assets/animations/animations.css">
<style>
.t{width:100%;border-collapse:collapse;font-size:16px}
.t th,.t td{padding:14px 16px;text-align:left;border-bottom:1px solid var(--border)}
.t th{font-size:12px;text-transform:uppercase;letter-spacing:.1em;color:var(--text-3);font-weight:600}
.t tr:hover td{background:var(--surface-2)}
.t td.num{font-variant-numeric:tabular-nums;text-align:right}
.up{color:var(--good)}.dn{color:var(--bad)}
</style>
</head><body class="single">
<div class="deck"><section class="slide is-active" data-title="Table">
<p class="kicker">Comparison · 数据表</p>
<h2 class="h2">主流 HTML 演讲框架对比</h2>
<div class="card mt-l" style="padding:4px 12px">
<table class="t">
<thead><tr><th>框架</th><th>学习曲线</th><th>自定义</th><th class="num">体积</th><th class="num">GitHub ⭐</th><th>适合</th></tr></thead>
<tbody>
<tr><td><b>html-ppt</b></td><td>极低</td><td>★★★★★</td><td class="num">~80 KB</td><td class="num">—</td><td>快速出稿、换主题</td></tr>
<tr><td>reveal.js</td><td>低</td><td>★★★★</td><td class="num">~450 KB</td><td class="num">67k</td><td>长讲座、互动</td></tr>
<tr><td>Slidev</td><td>中</td><td>★★★★★</td><td class="num">需构建</td><td class="num">31k</td><td>开发者、技术分享</td></tr>
<tr><td>Marp</td><td>极低</td><td>★★</td><td class="num">~10 MB</td><td class="num">13k</td><td>Markdown 出稿</td></tr>
<tr><td>Impress.js</td><td>中</td><td>★★★</td><td class="num">~60 KB</td><td class="num">38k</td><td>3D 展示</td></tr>
</tbody>
</table>
</div>
</section></div>
<script src="../../assets/runtime.js"></script>
</body></html>
skills/html-ppt/templates/single-page/terminal.html
+35
View File
@@ -0,0 +1,35 @@
<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="utf-8"><title>Terminal</title>
<link rel="stylesheet" href="../../assets/fonts.css">
<link rel="stylesheet" href="../../assets/base.css">
<link rel="stylesheet" id="theme-link" href="../../assets/themes/terminal-green.css">
<link rel="stylesheet" href="../../assets/animations/animations.css">
<style>
.term{font-family:var(--font-mono);font-size:16px;background:#020803;border:1px solid rgba(0,255,120,.3);border-radius:10px;padding:24px 28px;box-shadow:0 0 60px rgba(0,255,136,.08) inset}
.term .bar{display:flex;gap:6px;margin-bottom:16px}
.term .bar span{width:12px;height:12px;border-radius:50%;background:#222;border:1px solid rgba(0,255,136,.3)}
.term .p{color:var(--accent)}
.term .c{color:var(--text-1)}
.term .o{color:var(--text-2)}
.term .caret{display:inline-block;width:9px;height:18px;background:var(--accent);vertical-align:middle;animation:blink 1s step-end infinite}
@keyframes blink{50%{opacity:0}}
</style>
</head><body class="single">
<div class="deck"><section class="slide is-active" data-title="Terminal">
<p class="kicker">CLI · 一行命令起一个 deck</p>
<h2 class="h2" style="color:var(--text-1)">你需要的就是一个终端</h2>
<div class="term mt-l">
<div class="bar"><span></span><span></span><span></span></div>
<div><span class="p">$ </span><span class="c">./scripts/new-deck.sh graphify-talk</span></div>
<div class="o"> ✔ created decks/graphify-talk/index.html</div>
<div class="o"> ✔ linked theme → aurora</div>
<div class="o"> ✔ 12 slides scaffolded from templates/single-page/*</div>
<div style="margin-top:12px"><span class="p">$ </span><span class="c">open decks/graphify-talk/index.html</span></div>
<div class="o"> ↗ launched in Chrome</div>
<div style="margin-top:12px"><span class="p">$ </span><span class="c">./scripts/render.sh decks/graphify-talk/index.html</span></div>
<div class="o"> ✔ wrote graphify-talk.png (1920×1080)</div>
<div style="margin-top:12px"><span class="p">$ </span><span class="caret"></span></div>
</div>
</section></div>
<script src="../../assets/runtime.js"></script>
</body></html>
skills/html-ppt/templates/single-page/thanks.html
+21
View File
@@ -0,0 +1,21 @@
<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="utf-8"><title>Thanks</title>
<link rel="stylesheet" href="../../assets/fonts.css">
<link rel="stylesheet" href="../../assets/base.css">
<link rel="stylesheet" id="theme-link" href="../../assets/themes/minimal-white.css">
<link rel="stylesheet" href="../../assets/animations/animations.css">
</head><body class="single">
<div class="deck"><section class="slide is-active center tc" data-title="Thanks">
<div>
<div class="anim-confetti-burst" style="display:inline-block;padding:40px"></div>
<h1 class="h1 anim-fade-up" data-anim="fade-up" style="font-size:180px;line-height:1"><span class="gradient-text">Thanks</span></h1>
<p class="lede" style="margin:18px auto 0">愿你每一次上台，都少一点紧张，多一点从容。</p>
<div class="row mt-l" style="justify-content:center;gap:32px">
<div class="dim"><b>lewis</b> · sudolewis@gmail.com</div>
<div class="dim">github.com/lewis/html-ppt</div>
<div class="dim">2026 · MIT</div>
</div>
</div>
</section></div>
<script src="../../assets/runtime.js"></script>
</body></html>
skills/html-ppt/templates/single-page/three-column.html
+18
View File
@@ -0,0 +1,18 @@
<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="utf-8"><title>Three Column</title>
<link rel="stylesheet" href="../../assets/fonts.css">
<link rel="stylesheet" href="../../assets/base.css">
<link rel="stylesheet" id="theme-link" href="../../assets/themes/minimal-white.css">
<link rel="stylesheet" href="../../assets/animations/animations.css">
</head><body class="single">
<div class="deck"><section class="slide is-active" data-title="Three column">
<p class="kicker">Pillars · 三根支柱</p>
<h2 class="h2">一个 html-ppt，三件装备</h2>
<div class="grid g3 mt-l anim-stagger-list" data-anim-target>
<div class="card"><div style="font-size:40px">🎨</div><h4 class="mt-s">Themes</h4><p class="dim">克制 · 编辑 · 霓虹 · 终端 …… 随场景换装。</p></div>
<div class="card"><div style="font-size:40px">🧱</div><h4 class="mt-s">Layouts</h4><p class="dim">30 种页型，从封面到结语一次给齐。</p></div>
<div class="card"><div style="font-size:40px">✨</div><h4 class="mt-s">Animations</h4><p class="dim">25 个命名动效，每一个都克制、每一个都上台。</p></div>
</div>
</section></div>
<script src="../../assets/runtime.js"></script>
</body></html>
skills/html-ppt/templates/single-page/timeline.html
+32
View File
@@ -0,0 +1,32 @@
<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="utf-8"><title>Timeline</title>
<link rel="stylesheet" href="../../assets/fonts.css">
<link rel="stylesheet" href="../../assets/base.css">
<link rel="stylesheet" id="theme-link" href="../../assets/themes/minimal-white.css">
<link rel="stylesheet" href="../../assets/animations/animations.css">
<style>
.tl{position:relative;margin-top:40px}
.tl::before{content:"";position:absolute;left:0;right:0;top:48px;height:2px;background:var(--border)}
.tl .row{display:grid;grid-template-columns:repeat(5,1fr);gap:22px;align-items:start}
.tl .item{position:relative;padding-top:80px;text-align:center}
.tl .dot{position:absolute;top:36px;left:50%;transform:translateX(-50%);width:24px;height:24px;border-radius:50%;background:var(--accent);border:4px solid var(--bg);box-shadow:0 0 0 2px var(--accent)}
.tl .year{font-size:14px;color:var(--text-3);letter-spacing:.12em;text-transform:uppercase;position:absolute;top:0;left:0;right:0;font-weight:600}
.tl h4{font-size:18px}
.tl p{font-size:13px;color:var(--text-2)}
</style>
</head><body class="single">
<div class="deck"><section class="slide is-active" data-title="Timeline">
<p class="kicker">Roadmap · 时间线</p>
<h2 class="h2">html-ppt 是怎么长大的</h2>
<div class="tl">
<div class="row anim-stagger-list" data-anim-target>
<div class="item"><div class="year">2025 Q3</div><div class="dot"></div><h4>起源</h4><p>一套个人 reveal.js 模板</p></div>
<div class="item"><div class="year">2025 Q4</div><div class="dot"></div><h4>tokens 化</h4><p>把颜色全部收进 :root</p></div>
<div class="item"><div class="year">2026 Q1</div><div class="dot"></div><h4>Agent 接入</h4><p>开放为 AgentSkill</p></div>
<div class="item"><div class="year">2026 Q2</div><div class="dot"></div><h4>24 themes</h4><p>从克制到霓虹一应俱全</p></div>
<div class="item"><div class="year">2026 Q3</div><div class="dot"></div><h4>渲染管线</h4><p>headless Chrome PNG 出稿</p></div>
</div>
</div>
</section></div>
<script src="../../assets/runtime.js"></script>
</body></html>
skills/html-ppt/templates/single-page/toc.html
+26
View File
@@ -0,0 +1,26 @@
<!DOCTYPE html>
<html lang="zh-CN" data-theme="minimal-white">
<head>
<meta charset="utf-8"><title>Table of Contents</title>
<link rel="stylesheet" href="../../assets/fonts.css">
<link rel="stylesheet" href="../../assets/base.css">
<link rel="stylesheet" id="theme-link" href="../../assets/themes/minimal-white.css">
<link rel="stylesheet" href="../../assets/animations/animations.css">
</head>
<body class="single">
<div class="deck">
<section class="slide is-active" data-title="Contents">
<p class="eyebrow">Contents · 目录</p>
<h2 class="h2">今天的五件事</h2>
<div class="grid g2 mt-l anim-stagger-list" data-anim-target>
<div class="card"><div class="row"><div class="h3 dim2" style="width:56px">01</div><div><h4>为什么需要设计系统</h4><p class="dim">从模板到 token，减少重复。</p></div></div></div>
<div class="card"><div class="row"><div class="h3 dim2" style="width:56px">02</div><div><h4>主题与 tokens</h4><p class="dim">24 个可切换的主题，一键换装。</p></div></div></div>
<div class="card"><div class="row"><div class="h3 dim2" style="width:56px">03</div><div><h4>版式目录</h4><p class="dim">30 种单页类型，覆盖 95% 场景。</p></div></div></div>
<div class="card"><div class="row"><div class="h3 dim2" style="width:56px">04</div><div><h4>入场动效</h4><p class="dim">25 种命名动画，可挑可组合。</p></div></div></div>
<div class="card" style="grid-column:span 2"><div class="row"><div class="h3 dim2" style="width:56px">05</div><div><h4>现场演示 &amp; 问答</h4><p class="dim">打开模板就能讲。</p></div></div></div>
</div>
<div class="deck-footer"><span class="dim2">html-ppt</span><span>目录</span></div>
</section>
</div>
<script src="../../assets/runtime.js"></script>
</body></html>
skills/html-ppt/templates/single-page/todo-checklist.html
+33
View File
@@ -0,0 +1,33 @@
<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="utf-8"><title>Checklist</title>
<link rel="stylesheet" href="../../assets/fonts.css">
<link rel="stylesheet" href="../../assets/base.css">
<link rel="stylesheet" id="theme-link" href="../../assets/themes/minimal-white.css">
<link rel="stylesheet" href="../../assets/animations/animations.css">
<style>
.todo{max-width:820px;margin-top:26px}
.todo li{list-style:none;display:flex;align-items:flex-start;gap:14px;padding:14px 18px;border-bottom:1px solid var(--border)}
.todo li .b{flex-shrink:0;width:22px;height:22px;border:2px solid var(--border-strong);border-radius:6px;display:flex;align-items:center;justify-content:center;margin-top:2px}
.todo li.done .b{background:var(--good);border-color:var(--good);color:#fff}
.todo li.done .b::after{content:"✓";font-weight:900}
.todo li.done .t{text-decoration:line-through;color:var(--text-3)}
.todo li .t{font-size:18px}
.todo li .tag{margin-left:auto;font-size:12px;color:var(--text-3)}
</style>
</head><body class="single">
<div class="deck"><section class="slide is-active" data-title="Checklist">
<p class="kicker">Launch · 上线前检查清单</p>
<h2 class="h2">发版前必过的 8 件事</h2>
<ul class="todo anim-stagger-list" data-anim-target>
<li class="done"><span class="b"></span><span class="t">所有 slide 在 Chrome 打开无控制台报错</span><span class="tag">#sanity</span></li>
<li class="done"><span class="b"></span><span class="t">字体回退链路正确（Noto Sans SC）</span><span class="tag">#fonts</span></li>
<li class="done"><span class="b"></span><span class="t">24 个主题各选一页截图比对</span><span class="tag">#themes</span></li>
<li class="done"><span class="b"></span><span class="t">键盘导航全键通</span><span class="tag">#runtime</span></li>
<li><span class="b"></span><span class="t">PDF 打印不跨页裁切</span><span class="tag">#print</span></li>
<li><span class="b"></span><span class="t">render.sh 对每个 showcase 跑通</span><span class="tag">#ci</span></li>
<li><span class="b"></span><span class="t">references/*.md 通读一遍</span><span class="tag">#docs</span></li>
<li><span class="b"></span><span class="t">LICENSE / README 作者信息核对</span><span class="tag">#legal</span></li>
</ul>
</section></div>
<script src="../../assets/runtime.js"></script>
</body></html>
skills/html-ppt/templates/single-page/two-column.html
+39
View File
@@ -0,0 +1,39 @@
<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="utf-8"><title>Two Column</title>
<link rel="stylesheet" href="../../assets/fonts.css">
<link rel="stylesheet" href="../../assets/base.css">
<link rel="stylesheet" id="theme-link" href="../../assets/themes/minimal-white.css">
<link rel="stylesheet" href="../../assets/animations/animations.css">
</head><body class="single">
<div class="deck"><section class="slide is-active" data-title="Two column">
<p class="kicker">Pattern · 双栏</p>
<h2 class="h2">概念 <span class="dim2">⟷</span> 示例</h2>
<div class="grid g2 mt-l" style="align-items:start">
<div class="card anim-fade-left" data-anim="fade-left">
<h3>左栏 · 概念</h3>
<p class="dim">一个主题 = 一组 CSS 变量。把颜色、字体、圆角、阴影全部收到 <code>:root</code> 里。</p>
<ul class="mt-m">
<li>— tokens 定义语义，不写具体色值</li>
<li>— base.css 用 tokens 排版</li>
<li>— 每个主题只改变量</li>
</ul>
</div>
<div class="card anim-fade-right" data-anim="fade-right">
<h3>右栏 · 示例</h3>
<pre class="mono" style="font-size:13px;background:var(--surface-2);padding:14px;border-radius:var(--radius-sm);overflow:auto">
:root {
--bg: #fff;
--text-1: #0c0d10;
--accent: #3b6cff;
--radius: 18px;
}
.card {
background: var(--bg);
color: var(--text-1);
border-radius: var(--radius);
}</pre>
</div>
</div>
</section></div>
<script src="../../assets/runtime.js"></script>
</body></html>