@hiai-gg/hiai-opencode 0.2.1 → 0.2.2

package/skills/design-templates/html-ppt/templates/full-decks/xhs-white-editorial/style.css

@@ -0,0 +1,63 @@
+/* xhs-white-editorial — 白底杂志风 */
+.tpl-xhs-white-editorial{
+  --xw-bg:#ffffff;
+  --xw-ink:#111318;
+  --xw-ink2:#475467;
+  --xw-muted:#98a2b3;
+  --xw-line:#eaecf3;
+  --xw-purple:#7b61ff;
+  --xw-pink:#ff5fa2;
+  --xw-blue:#4e8cff;
+  --xw-green:#17b26a;
+  --xw-orange:#ff9d42;
+  --xw-soft-purple:#f4efff;
+  --xw-soft-pink:#fff0f6;
+  --xw-soft-blue:#eef4ff;
+  --xw-soft-green:#edfdf3;
+  --xw-soft-orange:#fff5ea;
+  background:var(--xw-bg);
+  color:var(--xw-ink);
+  font-family:'Inter','Noto Sans SC','PingFang SC',-apple-system,sans-serif;
+}
+.tpl-xhs-white-editorial .slide{background:#fff;padding:72px 88px}
+.tpl-xhs-white-editorial .xw-topbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px}
+.tpl-xhs-white-editorial .xw-tag{display:inline-flex;align-items:center;gap:10px;padding:10px 18px;border:1px solid var(--xw-line);border-radius:999px;font-size:15px;color:var(--xw-ink2);background:#fff}
+.tpl-xhs-white-editorial .xw-tag .dot{width:10px;height:10px;border-radius:50%;background:linear-gradient(90deg,#7b61ff,#4e8cff,#17b26a,#ff9d42,#ff5fa2)}
+.tpl-xhs-white-editorial .xw-page{font-size:14px;color:var(--xw-muted);letter-spacing:.1em}
+.tpl-xhs-white-editorial .xw-kicker{font-size:18px;color:var(--xw-ink2);margin-top:6px;font-weight:500}
+.tpl-xhs-white-editorial .xw-title{font-size:84px;line-height:1.02;letter-spacing:-2px;font-weight:850;margin:18px 0 0;color:var(--xw-ink)}
+.tpl-xhs-white-editorial .xw-title-md{font-size:60px;line-height:1.05;letter-spacing:-1.5px;font-weight:800;margin:14px 0 0}
+.tpl-xhs-white-editorial .xw-grad{background:linear-gradient(90deg,#7b61ff 0%,#4e8cff 25%,#17b26a 48%,#ff9d42 72%,#ff5fa2 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
+.tpl-xhs-white-editorial .xw-sub{font-size:24px;line-height:1.45;color:#1f2937;margin-top:22px;max-width:900px}
+.tpl-xhs-white-editorial .xw-focus{display:inline-block;padding:6px 14px;border-radius:14px;background:#111318;color:#fff;font-weight:700}
+.tpl-xhs-white-editorial .xw-focus-blue{display:inline-block;padding:6px 14px;border-radius:14px;background:var(--xw-soft-blue);color:#174ea6;font-weight:700}
+.tpl-xhs-white-editorial .xw-focus-pink{display:inline-block;padding:6px 14px;border-radius:14px;background:var(--xw-soft-pink);color:#c11574;font-weight:700}
+.tpl-xhs-white-editorial .xw-focus-orange{display:inline-block;padding:6px 14px;border-radius:14px;background:var(--xw-soft-orange);color:#b54708;font-weight:700}
+.tpl-xhs-white-editorial .xw-focus-green{display:inline-block;padding:6px 14px;border-radius:14px;background:var(--xw-soft-green);color:#067647;font-weight:700}
+.tpl-xhs-white-editorial .xw-hero{margin-top:28px;border:1px solid var(--xw-line);border-radius:28px;padding:30px 34px;background:linear-gradient(180deg,#fff 0%,#fcfcff 100%);box-shadow:0 18px 48px rgba(17,19,24,.08)}
+.tpl-xhs-white-editorial .xw-quote{font-size:38px;line-height:1.3;font-weight:800;letter-spacing:-.5px}
+.tpl-xhs-white-editorial .xw-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:22px}
+.tpl-xhs-white-editorial .xw-grid-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px;margin-top:22px}
+.tpl-xhs-white-editorial .xw-card{border:1px solid var(--xw-line);border-radius:24px;padding:24px 26px;box-shadow:0 10px 24px rgba(17,19,24,.04);background:#fff}
+.tpl-xhs-white-editorial .xw-card.soft-purple{background:var(--xw-soft-purple)}
+.tpl-xhs-white-editorial .xw-card.soft-pink{background:var(--xw-soft-pink)}
+.tpl-xhs-white-editorial .xw-card.soft-blue{background:var(--xw-soft-blue)}
+.tpl-xhs-white-editorial .xw-card.soft-green{background:var(--xw-soft-green)}
+.tpl-xhs-white-editorial .xw-card.soft-orange{background:var(--xw-soft-orange)}
+.tpl-xhs-white-editorial .xw-label{font-size:14px;font-weight:800;opacity:.7;margin-bottom:10px;letter-spacing:.08em;text-transform:uppercase}
+.tpl-xhs-white-editorial .xw-card .main{font-size:28px;line-height:1.22;font-weight:850;letter-spacing:-.5px}
+.tpl-xhs-white-editorial .xw-card .desc{font-size:16px;line-height:1.5;color:#475467;margin-top:12px}
+.tpl-xhs-white-editorial .xw-steps{margin-top:18px}
+.tpl-xhs-white-editorial .xw-step{display:flex;gap:18px;align-items:flex-start;margin:16px 0}
+.tpl-xhs-white-editorial .xw-num{flex:0 0 48px;height:48px;border-radius:50%;background:#111318;color:#fff;display:grid;place-items:center;font-size:20px;font-weight:900}
+.tpl-xhs-white-editorial .xw-txt{font-size:22px;line-height:1.45;font-weight:700}
+.tpl-xhs-white-editorial .xw-codebox{background:#0f1117;color:#e4e2d8;border-radius:18px;padding:22px 26px;font-family:'JetBrains Mono',monospace;font-size:15px;line-height:1.75;margin-top:20px;border:1px solid #1f222c}
+.tpl-xhs-white-editorial .xw-codebox .cm{color:#6b6a62}
+.tpl-xhs-white-editorial .xw-codebox .kw{color:#c88f64}
+.tpl-xhs-white-editorial .xw-codebox .st{color:#a8c292}
+.tpl-xhs-white-editorial .xw-codebox .hl{color:#e9c58a;font-weight:600}
+.tpl-xhs-white-editorial .xw-footer{position:absolute;left:88px;right:88px;bottom:44px;display:flex;justify-content:space-between;align-items:flex-end;font-size:13px;color:var(--xw-muted)}
+.tpl-xhs-white-editorial .xw-topline{position:absolute;top:0;left:0;right:0;height:5px;background:linear-gradient(90deg,#6366f1,#8b5cf6,#a855f7,#ec4899,#f43f5e,#f97316,#eab308,#22c55e,#06b6d4,#6366f1)}
+.tpl-xhs-white-editorial .xw-pill{display:inline-block;padding:8px 16px;border-radius:999px;font-size:14px;font-weight:700;margin:0 8px 8px 0;background:#fff;border:1px solid var(--xw-line);color:#394150}
+.tpl-xhs-white-editorial .xw-big-stat{font-size:96px;font-weight:900;letter-spacing:-4px;line-height:1}
+.tpl-xhs-white-editorial .xw-big-stat small{font-size:22px;color:var(--xw-muted);font-weight:700;letter-spacing:0;margin-left:6px}

package/skills/design-templates/html-ppt/templates/full-decks-index.html

@@ -0,0 +1,82 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+<meta charset="utf-8"><title>Full-Deck Gallery — html-ppt v2</title>
+<link rel="stylesheet" href="../assets/fonts.css">
+<link rel="stylesheet" href="../assets/base.css">
+<style>
+  html,body{background:#0b0c10;color:#e8ebf4;font-family:var(--font-sans)}
+  .deck{background:#0b0c10}
+  .slide{padding:60px 80px;color:#e8ebf4;background:transparent;display:flex;flex-direction:column}
+  .slide h1{color:#fff;font-size:48px;margin:0 0 6px;letter-spacing:-.02em}
+  .slide .sub{color:#aab0c0;font-size:18px;margin:0 0 22px}
+  .frame-wrap{flex:1;border-radius:14px;overflow:hidden;border:1px solid rgba(255,255,255,.12);
+    box-shadow:0 30px 80px rgba(0,0,0,.5);position:relative;background:#fff}
+  iframe.tpl{position:absolute;inset:0;width:200%;height:200%;border:0;
+    transform:scale(.5);transform-origin:top left}
+  .meta{position:absolute;top:24px;right:40px;font-family:'JetBrains Mono',monospace;
+    font-size:12px;color:#6a7086;letter-spacing:.14em;text-transform:uppercase;z-index:30}
+  .tag{display:inline-block;padding:4px 10px;border-radius:999px;background:rgba(255,255,255,.08);
+    color:#cfd3dc;font-size:11px;margin-right:6px}
+  .cover{align-items:center;justify-content:center;text-align:center}
+  .cover h1{font-size:84px;background:linear-gradient(135deg,#60a5fa,#a78bfa,#f472b6);
+    -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
+  .cover p{color:#aab0c0;max-width:60ch;font-size:20px}
+  .legend{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}
+</style>
+</head>
+<body>
+<div class="deck">
+
+<section class="slide cover">
+  <p class="kicker" style="color:#a78bfa">HTML-PPT v2 · Full-Deck Gallery</p>
+  <h1>14 full-deck templates</h1>
+  <p>Press → to browse. Each slide is a live iframe preview of a complete, multi-slide deck template. Open any <code>templates/full-decks/&lt;name&gt;/index.html</code> to see the full deck, or copy the folder to scaffold your own.</p>
+  <div class="legend">
+    <span class="tag">8 extracted from real decks</span>
+    <span class="tag">6 scenario scaffolds</span>
+    <span class="tag">scoped .tpl-&lt;name&gt; CSS</span>
+    <span class="tag">36 themes compatible</span>
+  </div>
+</section>
+
+<!-- Template preview slides generated via JS below -->
+
+</div>
+
+<script>
+const TPLS = [
+  ['xhs-white-editorial',      '白底杂志风',        'extracted', 'xhs posts, editorial lifestyle'],
+  ['graphify-dark-graph',      '暗底知识图谱',      'extracted', 'AI/graph/data products'],
+  ['knowledge-arch-blueprint', '奶油蓝图架构',      'extracted', 'architecture, systems thinking'],
+  ['hermes-cyber-terminal',    '暗终端 cyber',      'extracted', 'devtool, honest-review, agent demos'],
+  ['obsidian-claude-gradient', 'GitHub 暗紫渐变',   'extracted', 'tool walkthroughs, LLM product'],
+  ['testing-safety-alert',     '红琥珀警示',        'extracted', 'security, incident review, AI safety'],
+  ['xhs-pastel-card',          '柔和马卡龙',        'extracted', 'lifestyle, soft emotional'],
+  ['dir-key-nav-minimal',      '方向键 8 色极简',    'extracted', 'keynote, one-idea-per-slide'],
+  ['pitch-deck',               'Pitch Deck YC 风',  'scenario',  'fundraising, startup pitch'],
+  ['product-launch',           'Product Launch',    'scenario',  'product announcement, launch keynote'],
+  ['tech-sharing',             'Tech Sharing 技术分享','scenario','internal tech talk, conference talk'],
+  ['weekly-report',            'Weekly Report 周报','scenario',  'status update, business review'],
+  ['xhs-post',                 '小红书 图文 9 屏 3:4','scenario', 'xiaohongshu / ig carousel'],
+  ['course-module',            'Course Module 教学模块','scenario','online course, workshop module'],
+  ['presenter-mode-reveal',    '🎤 Presenter Mode 演讲者模式','scenario','tech sharing, talk with 逐字稿, speaker view']
+];
+
+const deck = document.querySelector('.deck');
+TPLS.forEach((t,i)=>{
+  const s = document.createElement('section');
+  s.className = 'slide';
+  s.setAttribute('data-title',t[0]);
+  s.innerHTML = `
+    <span class="meta">${i+1}/${TPLS.length+1}</span>
+    <h1>${t[0]}</h1>
+    <p class="sub">${t[1]} · <span class="tag">${t[2]}</span> ${t[3]}</p>
+    <div class="frame-wrap">
+      <iframe class="tpl" src="full-decks/${t[0]}/index.html" loading="eager" title="${t[0]}"></iframe>
+    </div>`;
+  deck.appendChild(s);
+});
+</script>
+<script src="../assets/runtime.js"></script>
+</body></html>

package/skills/design-templates/html-ppt/templates/layout-showcase.html

@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+<meta charset="utf-8"><title>Layout Showcase — 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">
+<style>
+.layout-nav{position:fixed;top:16px;left:50%;transform:translateX(-50%);z-index:50;background:var(--surface);border:1px solid var(--border);border-radius:999px;padding:8px 20px;font-family:var(--font-mono);font-size:12px;color:var(--text-2);box-shadow:var(--shadow);display:flex;gap:14px;align-items:center}
+.layout-nav a{color:var(--text-2);text-decoration:none;padding:4px 10px;border-radius:999px}
+.layout-nav a:hover{background:var(--surface-2)}
+iframe{width:100%;height:100vh;border:0;display:block;background:var(--bg)}
+body{margin:0;overflow:hidden}
+</style>
+</head>
+<body>
+<div class="layout-nav">
+  <b>layouts</b>
+  <a href="#" data-go="-1">←</a>
+  <span id="cur">cover</span>
+  <a href="#" data-go="+1">→</a>
+</div>
+<iframe id="frame" src="single-page/cover.html"></iframe>
+<script>
+const list=['cover','toc','section-divider','bullets','two-column','three-column','big-quote',
+  'stat-highlight','kpi-grid','table','code','diff','terminal','flow-diagram','timeline',
+  'roadmap','mindmap','comparison','pros-cons','todo-checklist','gantt','image-hero','image-grid',
+  'chart-bar','chart-line','chart-pie','chart-radar','arch-diagram','process-steps','cta','thanks'];
+let i=0;
+const frame=document.getElementById('frame');
+const cur=document.getElementById('cur');
+function go(n){
+  i=(n+list.length)%list.length;
+  frame.src='single-page/'+list[i]+'.html';
+  cur.textContent=list[i]+' · '+(i+1)+'/'+list.length;
+  history.replaceState(null,'','#/'+(i+1));
+}
+document.querySelectorAll('[data-go]').forEach(a=>a.addEventListener('click',e=>{e.preventDefault();go(i+parseInt(a.dataset.go,10))}));
+document.addEventListener('keydown',e=>{
+  if(e.key==='ArrowRight'||e.key===' '){go(i+1);e.preventDefault()}
+  if(e.key==='ArrowLeft'){go(i-1);e.preventDefault()}
+});
+const m=/^#\/(\d+)/.exec(location.hash||'');
+if(m)go(parseInt(m[1],10)-1);else go(0);
+</script>
+</body></html>

package/skills/design-templates/html-ppt/templates/single-page/arch-diagram.html

@@ -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>

package/skills/design-templates/html-ppt/templates/single-page/big-quote.html

@@ -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>

package/skills/design-templates/html-ppt/templates/single-page/bullets.html

@@ -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>

package/skills/design-templates/html-ppt/templates/single-page/chart-bar.html

@@ -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>

package/skills/design-templates/html-ppt/templates/single-page/chart-line.html

@@ -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>

package/skills/design-templates/html-ppt/templates/single-page/chart-pie.html

@@ -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>

package/skills/design-templates/html-ppt/templates/single-page/chart-radar.html

@@ -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>

package/skills/design-templates/html-ppt/templates/single-page/code.html

@@ -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>

package/skills/design-templates/html-ppt/templates/single-page/comparison.html

@@ -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>

package/skills/design-templates/html-ppt/templates/single-page/cover.html

@@ -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>

package/skills/design-templates/html-ppt/templates/single-page/cta.html

@@ -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>

package/skills/design-templates/html-ppt/templates/single-page/diff.html

@@ -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>