@hiai-gg/hiai-opencode 0.2.0 → 0.2.2

package/skills/design-templates/html-ppt/templates/full-decks/dir-key-nav-minimal/style.css

@@ -0,0 +1,60 @@
+/* dir-key-nav-minimal — 方向键极简 · 8 种 mono-background 切换 */
+.tpl-dir-key-nav-minimal{
+  --dk-font:'Inter','Noto Sans SC','PingFang SC',-apple-system,sans-serif;
+  --dk-mono:'JetBrains Mono',monospace;
+  background:#000;
+  color:#fff;
+  font-family:var(--dk-font);
+}
+.tpl-dir-key-nav-minimal .slide{padding:80px 104px;overflow:hidden;position:absolute;inset:0}
+/* 8 background themes */
+.tpl-dir-key-nav-minimal .t-indigo{background:linear-gradient(135deg,#0f172a 0%,#1e1b4b 100%);color:#fff}
+.tpl-dir-key-nav-minimal .t-cream{background:#F5F0E8;color:#1a1a1a}
+.tpl-dir-key-nav-minimal .t-crimson{background:linear-gradient(135deg,#7f1d1d 0%,#991b1b 100%);color:#fff}
+.tpl-dir-key-nav-minimal .t-emerald{background:linear-gradient(135deg,#052e16 0%,#064e3b 100%);color:#ecfdf5}
+.tpl-dir-key-nav-minimal .t-slate{background:linear-gradient(135deg,#0f1923 0%,#1a2942 100%);color:#e6edf3}
+.tpl-dir-key-nav-minimal .t-violet{background:linear-gradient(135deg,#1e0a2e 0%,#2e1065 100%);color:#f5f3ff}
+.tpl-dir-key-nav-minimal .t-white{background:#ffffff;color:#111216}
+.tpl-dir-key-nav-minimal .t-charcoal{background:linear-gradient(135deg,#111827 0%,#1f2937 100%);color:#f3f4f6}
+
+.tpl-dir-key-nav-minimal .dk-snum{position:absolute;top:30px;right:48px;font-size:11px;font-weight:700;letter-spacing:3px;text-transform:uppercase;font-family:var(--dk-mono)}
+.tpl-dir-key-nav-minimal .t-cream .dk-snum,
+.tpl-dir-key-nav-minimal .t-white .dk-snum{color:#999}
+.tpl-dir-key-nav-minimal .t-indigo .dk-snum,
+.tpl-dir-key-nav-minimal .t-crimson .dk-snum,
+.tpl-dir-key-nav-minimal .t-emerald .dk-snum,
+.tpl-dir-key-nav-minimal .t-slate .dk-snum,
+.tpl-dir-key-nav-minimal .t-violet .dk-snum,
+.tpl-dir-key-nav-minimal .t-charcoal .dk-snum{color:rgba(255,255,255,.38)}
+
+.tpl-dir-key-nav-minimal .dk-eyebrow{font-size:12px;font-weight:700;letter-spacing:3.5px;text-transform:uppercase;opacity:.55;margin-bottom:22px;display:flex;align-items:center;gap:14px}
+.tpl-dir-key-nav-minimal .dk-eyebrow::after{content:'';flex:1;max-width:120px;height:1px;background:currentColor;opacity:.3}
+.tpl-dir-key-nav-minimal .dk-h0{font-size:160px;font-weight:900;line-height:.9;letter-spacing:-5px;margin:0 0 20px}
+.tpl-dir-key-nav-minimal .dk-h1{font-size:100px;font-weight:900;line-height:.98;letter-spacing:-3px;margin:0 0 18px}
+.tpl-dir-key-nav-minimal .dk-h2{font-size:72px;font-weight:800;line-height:1.05;letter-spacing:-2px;margin:0 0 16px}
+.tpl-dir-key-nav-minimal .dk-lede{font-size:26px;line-height:1.45;opacity:.72;max-width:900px;font-weight:300}
+.tpl-dir-key-nav-minimal .dk-lede strong{font-weight:700;opacity:1}
+.tpl-dir-key-nav-minimal .dk-big{font-family:var(--dk-mono);font-size:240px;font-weight:800;line-height:.9;letter-spacing:-10px}
+
+.tpl-dir-key-nav-minimal .dk-line{display:block;width:90px;height:4px;background:currentColor;margin:30px 0;opacity:.85}
+.tpl-dir-key-nav-minimal .t-indigo .dk-accent{color:#a5b4fc}
+.tpl-dir-key-nav-minimal .t-cream .dk-accent{color:#B5392A}
+.tpl-dir-key-nav-minimal .t-crimson .dk-accent{color:#fecaca}
+.tpl-dir-key-nav-minimal .t-emerald .dk-accent{color:#6ee7b7}
+.tpl-dir-key-nav-minimal .t-slate .dk-accent{color:#7dd3fc}
+.tpl-dir-key-nav-minimal .t-violet .dk-accent{color:#c4b5fd}
+.tpl-dir-key-nav-minimal .t-white .dk-accent{color:#6366f1}
+.tpl-dir-key-nav-minimal .t-charcoal .dk-accent{color:#fbbf24}
+
+.tpl-dir-key-nav-minimal .dk-list{list-style:none;padding:0;margin:28px 0 0;font-family:var(--dk-mono);font-size:22px;line-height:2}
+.tpl-dir-key-nav-minimal .dk-list li{padding-left:30px;position:relative;font-weight:400;opacity:.85}
+.tpl-dir-key-nav-minimal .dk-list li::before{content:'→';position:absolute;left:0;opacity:.5}
+.tpl-dir-key-nav-minimal .dk-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:56px;margin-top:36px}
+.tpl-dir-key-nav-minimal .dk-col h3{font-size:28px;font-weight:700;margin-bottom:10px}
+.tpl-dir-key-nav-minimal .dk-col p{font-size:19px;line-height:1.55;opacity:.72;font-weight:300}
+.tpl-dir-key-nav-minimal .dk-code{font-family:var(--dk-mono);font-size:16px;line-height:1.9;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:10px;padding:24px 28px;margin-top:24px;white-space:pre}
+.tpl-dir-key-nav-minimal .t-cream .dk-code,
+.tpl-dir-key-nav-minimal .t-white .dk-code{background:rgba(0,0,0,.05);border-color:rgba(0,0,0,.1)}
+.tpl-dir-key-nav-minimal .dk-keyhint{position:absolute;bottom:34px;left:104px;font-family:var(--dk-mono);font-size:12px;letter-spacing:2px;text-transform:uppercase;opacity:.45}
+.tpl-dir-key-nav-minimal .dk-keyhint kbd{display:inline-block;padding:2px 10px;margin:0 3px;border:1px solid currentColor;border-radius:4px;font-size:12px}
+.tpl-dir-key-nav-minimal .dk-page{position:absolute;bottom:34px;right:48px;font-family:var(--dk-mono);font-size:12px;letter-spacing:2px;opacity:.45}

package/skills/design-templates/html-ppt/templates/full-decks/graphify-dark-graph/README.md

@@ -0,0 +1,11 @@
+# graphify-dark-graph
+
+Deep-night 暗底 + 力导向知识图谱覆盖层 + 温暖玻璃拟态卡片。灵感来自 `20260413-graphify/ppt/graphify.html` 的 `#06060c` 渐变底、飘移 orb 光晕、glass 卡片（warm/blue/green/purple 五变体）和 rainbow-text 标题。
+
+**Visual traits:** `#06060c → #0e1020` 斜向渐变、三颗 400-520px blur orb 慢飘动、cover SVG 力导向图谱作为背景、rainbow shift 渐变标题、JetBrains Mono 的 `.cmd-glow` 命令行、玻璃拟态卡片带顶部高光和微妙内阴影、温暖色系 accent (#e8a87c 琥珀 / #7ed3a4 薄荷 / #7eb8da 雾蓝 / #b8a4d6 丁香).
+
+**Use when:** 介绍一个开发者工具、命令行产品、知识图谱 / 数据可视化相关项目；你希望现场演示时视觉有「AI native + 科技感 + 温度」。
+
+**Source inspiration:** `20260413-graphify/ppt/graphify.html`.
+
+**Path:** `templates/full-decks/graphify-dark-graph/index.html`

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

@@ -0,0 +1,180 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>Graphify Dark Graph</title>
+<link rel="stylesheet" href="../../../assets/fonts.css">
+<link rel="stylesheet" href="../../../assets/base.css">
+<link rel="stylesheet" href="style.css">
+</head>
+<body class="tpl-graphify-dark-graph">
+<div class="deck">
+
+  <!-- 1. COVER -->
+  <section class="slide is-active">
+    <div class="gd-ambient"><div class="gd-orb gd-orb-1"></div><div class="gd-orb gd-orb-2"></div><div class="gd-orb gd-orb-3"></div></div>
+    <!-- live force-directed graph bg -->
+    <svg viewBox="0 0 1600 900" style="position:absolute;inset:0;width:100%;height:100%;opacity:.38;z-index:1" xmlns="http://www.w3.org/2000/svg">
+      <g stroke="#7eb8da" stroke-width="1" stroke-opacity=".5" fill="none">
+        <line x1="300" y1="200" x2="520" y2="340"/>
+        <line x1="520" y1="340" x2="780" y2="260"/>
+        <line x1="780" y1="260" x2="1040" y2="420"/>
+        <line x1="520" y1="340" x2="640" y2="560"/>
+        <line x1="640" y1="560" x2="900" y2="620"/>
+        <line x1="900" y1="620" x2="1040" y2="420"/>
+        <line x1="1040" y1="420" x2="1260" y2="300"/>
+        <line x1="1260" y1="300" x2="1380" y2="500"/>
+        <line x1="900" y1="620" x2="1120" y2="720"/>
+        <line x1="300" y1="200" x2="200" y2="420"/>
+        <line x1="200" y1="420" x2="360" y2="640"/>
+        <line x1="360" y1="640" x2="640" y2="560"/>
+      </g>
+      <g>
+        <circle cx="300" cy="200" r="10" fill="#e8a87c"/>
+        <circle cx="520" cy="340" r="14" fill="#7eb8da"/>
+        <circle cx="780" cy="260" r="9" fill="#7ed3a4"/>
+        <circle cx="1040" cy="420" r="18" fill="#b8a4d6"/>
+        <circle cx="640" cy="560" r="11" fill="#d4a0b9"/>
+        <circle cx="900" cy="620" r="12" fill="#e8a87c"/>
+        <circle cx="1260" cy="300" r="8" fill="#7ed3a4"/>
+        <circle cx="1380" cy="500" r="10" fill="#7eb8da"/>
+        <circle cx="1120" cy="720" r="9" fill="#d4a0b9"/>
+        <circle cx="200" cy="420" r="8" fill="#b8a4d6"/>
+        <circle cx="360" cy="640" r="11" fill="#7eb8da"/>
+      </g>
+    </svg>
+    <div class="gd-snum">01 / 08</div>
+    <div style="margin-top:auto">
+      <p class="gd-eyebrow">Tech Sharing · 纯干货</p>
+      <h1 class="gd-h1" style="font-size:88px"><span class="gd-rainbow">手把手用 Graphify<br>搭建个人知识图谱</span></h1>
+      <p class="gd-lede" style="margin-top:20px">一行命令 · 全多模态 · 诚实审计 —— <span class="gd-accent">把任何文件夹变成可导航的知识网络。</span></p>
+      <p class="gd-eyebrow" style="margin-top:26px">↑ 背景就是 Graphify 真实跑出来的知识图谱</p>
+    </div>
+  </section>
+
+  <!-- 2. SECTION DIVIDER -->
+  <section class="slide">
+    <div class="gd-ambient"><div class="gd-orb gd-orb-1"></div><div class="gd-orb gd-orb-2"></div></div>
+    <div class="gd-snum">02 / 08</div>
+    <div style="margin:auto 0">
+      <div class="gd-eyebrow">Part 01</div>
+      <h1 class="gd-h1" style="font-size:120px">Why <span class="gd-grad">Graph</span>?</h1>
+      <p class="gd-lede">folder → tree → graph，人类认知的下一步</p>
+    </div>
+  </section>
+
+  <!-- 3. CONTENT — plugin grid -->
+  <section class="slide">
+    <div class="gd-ambient"><div class="gd-orb gd-orb-2"></div><div class="gd-orb gd-orb-3"></div></div>
+    <div class="gd-snum">03 / 08</div>
+    <p class="gd-eyebrow">Feature Map</p>
+    <h2 class="gd-h2">一个工具，<span class="gd-grad">四件事</span></h2>
+    <div class="gd-grid-4">
+      <div class="gd-glass gd-glass-warm"><div style="font-size:30px">📂</div><h4 style="margin:10px 0 6px">Folder Ingest</h4><p class="gd-dim" style="font-size:13px;line-height:1.55">递归扫描任意路径，支持 md / pdf / 代码 / 图片</p></div>
+      <div class="gd-glass gd-glass-blue"><div style="font-size:30px">🧠</div><h4 style="margin:10px 0 6px">Entity Extract</h4><p class="gd-dim" style="font-size:13px;line-height:1.55">用 LLM 抽概念、人物、事件、关系</p></div>
+      <div class="gd-glass gd-glass-green"><div style="font-size:30px">🕸️</div><h4 style="margin:10px 0 6px">Force Graph</h4><p class="gd-dim" style="font-size:13px;line-height:1.55">D3 力导向，点击即跳转原文</p></div>
+      <div class="gd-glass"><div style="font-size:30px">🔍</div><h4 style="margin:10px 0 6px">Audit Trail</h4><p class="gd-dim" style="font-size:13px;line-height:1.55">每条边都能追溯到 source span</p></div>
+    </div>
+    <div class="gd-glass gd-glass-warm" style="margin-top:24px"><p style="font-size:18px;line-height:1.6">它不是「又一个 RAG」—— 它是 <span class="gd-accent">把检索结果画出来，让你一眼就知道信息长什么样</span>。</p></div>
+  </section>
+
+  <!-- 4. CODE -->
+  <section class="slide">
+    <div class="gd-ambient"><div class="gd-orb gd-orb-1"></div></div>
+    <div class="gd-snum">04 / 08</div>
+    <p class="gd-eyebrow">One command</p>
+    <h2 class="gd-h2">从 0 到图谱，<span class="gd-grad">大概 90 秒</span></h2>
+    <p class="gd-cmd" style="margin:16px 0 22px">$ graphify ~/notes --out ./graph</p>
+    <pre class="gd-codebox"><span class="cm"># graphify.config.yaml</span>
+<span class="kw">ingest</span>:
+  paths: [<span class="st">~/notes</span>, <span class="st">~/code/docs</span>]
+  include: [<span class="st">"*.md"</span>, <span class="st">"*.pdf"</span>, <span class="st">"*.py"</span>]
+
+<span class="kw">extract</span>:
+  model: <span class="st">claude-opus-4-6</span>
+  schema: [<span class="st">concept</span>, <span class="st">person</span>, <span class="st">event</span>, <span class="st">relation</span>]
+
+<span class="kw">render</span>:
+  engine: <span class="st">d3-force</span>
+  audit: <span class="fn">true</span>     <span class="cm"># 每条边带 source span</span></pre>
+  </section>
+
+  <!-- 5. CHART — race diagram -->
+  <section class="slide">
+    <div class="gd-ambient"><div class="gd-orb gd-orb-3"></div></div>
+    <div class="gd-snum">05 / 08</div>
+    <p class="gd-eyebrow">Efficiency Race</p>
+    <h2 class="gd-h2">没有知识库 vs 有知识库</h2>
+    <div style="max-width:900px;margin-top:30px">
+      <div style="display:flex;align-items:center;gap:16px;margin-bottom:20px">
+        <div style="width:110px;text-align:right;font-weight:700;color:var(--gd-danger)">没有<br>知识库</div>
+        <div style="flex:1;position:relative;height:70px;background:rgba(224,112,112,.06);border:1px solid rgba(224,112,112,.2);border-radius:16px">
+          <div style="position:absolute;left:16px;top:50%;transform:translateY(-50%);font-size:32px">🛵</div>
+          <div style="position:absolute;left:72px;top:50%;transform:translateY(-50%);color:var(--gd-danger);font-size:14px">反复喂信息…整理…又忘了…</div>
+        </div>
+      </div>
+      <div style="display:flex;align-items:center;gap:16px">
+        <div style="width:110px;text-align:right;font-weight:700;color:var(--gd-green)">有<br>知识库</div>
+        <div style="flex:1;position:relative;height:70px;background:rgba(126,211,164,.06);border:1px solid rgba(126,211,164,.25);border-radius:16px">
+          <div style="position:absolute;right:16px;top:50%;transform:translateY(-50%);font-size:32px">🏎️</div>
+          <div style="position:absolute;right:72px;top:50%;transform:translateY(-50%);color:var(--gd-green);font-size:14px">AI 自己找 → 确认 → 干活!</div>
+        </div>
+      </div>
+    </div>
+    <div class="gd-grid-3" style="margin-top:36px">
+      <div class="gd-glass gd-glass-warm"><div class="gd-big gd-grad">5×</div><p class="gd-dim" style="margin-top:6px">速度提升</p></div>
+      <div class="gd-glass gd-glass-green"><div class="gd-big gd-grad">-80%</div><p class="gd-dim" style="margin-top:6px">重复喂信息</p></div>
+      <div class="gd-glass gd-glass-blue"><div class="gd-big gd-grad">∞</div><p class="gd-dim" style="margin-top:6px">记忆持久化</p></div>
+    </div>
+  </section>
+
+  <!-- 6. PIPELINE -->
+  <section class="slide">
+    <div class="gd-ambient"><div class="gd-orb gd-orb-2"></div></div>
+    <div class="gd-snum">06 / 08</div>
+    <p class="gd-eyebrow">Pipeline</p>
+    <h2 class="gd-h2">端到端 <span class="gd-grad">4 步走</span></h2>
+    <div style="display:flex;align-items:center;justify-content:center;gap:8px;margin-top:36px">
+      <div class="gd-glass" style="flex:1;text-align:center"><div style="font-size:34px">📂</div><div style="font-weight:600;margin-top:8px">Scan</div><div class="gd-dim" style="font-size:13px">递归读文件</div></div>
+      <div style="color:var(--gd-text3);font-size:24px">→</div>
+      <div class="gd-glass gd-glass-blue" style="flex:1;text-align:center"><div style="font-size:34px">🔬</div><div style="font-weight:600;margin-top:8px">Extract</div><div class="gd-dim" style="font-size:13px">LLM 抽实体</div></div>
+      <div style="color:var(--gd-text3);font-size:24px">→</div>
+      <div class="gd-glass gd-glass-green" style="flex:1;text-align:center"><div style="font-size:34px">🕸️</div><div style="font-weight:600;margin-top:8px">Build</div><div class="gd-dim" style="font-size:13px">构图 + 去重</div></div>
+      <div style="color:var(--gd-text3);font-size:24px">→</div>
+      <div class="gd-glass gd-glass-warm" style="flex:1;text-align:center"><div style="font-size:34px">🎨</div><div style="font-weight:600;margin-top:8px">Render</div><div class="gd-dim" style="font-size:13px">D3 交互图</div></div>
+    </div>
+    <div class="gd-glass" style="margin-top:32px"><p style="font-size:16px;line-height:1.6;color:var(--gd-text2)">每一步都有 audit log：你永远知道某个节点为什么存在、它来自哪个文件的哪一行。</p></div>
+  </section>
+
+  <!-- 7. CTA -->
+  <section class="slide">
+    <div class="gd-ambient"><div class="gd-orb gd-orb-1"></div><div class="gd-orb gd-orb-3"></div></div>
+    <div class="gd-snum">07 / 08</div>
+    <p class="gd-eyebrow">Try it tonight</p>
+    <h2 class="gd-h1" style="font-size:80px">Graphify <span class="gd-grad">your folders</span></h2>
+    <p class="gd-cmd" style="margin-top:22px">$ npm i -g @lewis/graphify</p>
+    <p class="gd-cmd" style="margin-top:10px;color:var(--gd-warm);text-shadow:0 0 30px rgba(232,168,124,.45)">$ graphify ~/obsidian-vault</p>
+    <div style="margin-top:32px">
+      <span class="gd-tag">#knowledge-graph</span>
+      <span class="gd-tag">#open-source</span>
+      <span class="gd-tag">#claude-agent</span>
+      <span class="gd-tag">#obsidian</span>
+      <span class="gd-tag">#d3-force</span>
+    </div>
+  </section>
+
+  <!-- 8. THANKS -->
+  <section class="slide">
+    <div class="gd-ambient"><div class="gd-orb gd-orb-2"></div></div>
+    <div class="gd-snum">08 / 08</div>
+    <div style="margin:auto 0;text-align:center">
+      <div class="gd-big gd-rainbow" style="font-size:180px">Thanks.</div>
+      <p class="gd-lede" style="margin:28px auto 0">github.com/lewis/graphify · 欢迎 star / issue / PR</p>
+    </div>
+  </section>
+
+</div>
+<script src="../../../assets/runtime.js"></script>
+</body>
+</html>

package/skills/design-templates/html-ppt/templates/full-decks/graphify-dark-graph/style.css

@@ -0,0 +1,54 @@
+/* graphify-dark-graph — 暗底玻璃 + 力导向知识图谱 */
+.tpl-graphify-dark-graph{
+  --gd-bg:#06060c;
+  --gd-bg2:#0e1020;
+  --gd-text:#f0ece4;
+  --gd-text2:#b0a99e;
+  --gd-text3:#7a746c;
+  --gd-warm:#e8a87c;
+  --gd-blue:#7eb8da;
+  --gd-green:#7ed3a4;
+  --gd-rose:#d4a0b9;
+  --gd-purple:#b8a4d6;
+  --gd-danger:#e07070;
+  background:var(--gd-bg);
+  color:var(--gd-text);
+  font-family:'Inter','Noto Sans SC',-apple-system,sans-serif;
+  letter-spacing:-.01em;
+}
+.tpl-graphify-dark-graph .slide{background:linear-gradient(160deg,#08080f,#0e1020 50%,#08080f);color:var(--gd-text);padding:64px 88px;overflow:hidden}
+.tpl-graphify-dark-graph .gd-ambient{position:absolute;inset:0;pointer-events:none;z-index:0;overflow:hidden}
+.tpl-graphify-dark-graph .gd-orb{position:absolute;border-radius:50%;filter:blur(110px);opacity:.35;animation:gdDrift 22s ease-in-out infinite alternate}
+.tpl-graphify-dark-graph .gd-orb-1{width:520px;height:520px;background:radial-gradient(circle,rgba(126,184,218,.55),transparent 70%);top:-12%;left:-6%}
+.tpl-graphify-dark-graph .gd-orb-2{width:460px;height:460px;background:radial-gradient(circle,rgba(232,168,124,.45),transparent 70%);top:55%;right:-8%;animation-delay:-6s}
+.tpl-graphify-dark-graph .gd-orb-3{width:420px;height:420px;background:radial-gradient(circle,rgba(184,164,214,.4),transparent 70%);bottom:-8%;left:30%;animation-delay:-11s}
+@keyframes gdDrift{0%{transform:translate(0,0) scale(1)}100%{transform:translate(25px,-20px) scale(1.08)}}
+.tpl-graphify-dark-graph .slide > *{position:relative;z-index:2}
+.tpl-graphify-dark-graph .gd-snum{position:absolute;top:28px;right:40px;font-size:12px;letter-spacing:.25em;color:var(--gd-text3);z-index:3}
+.tpl-graphify-dark-graph .gd-eyebrow{font-size:13px;letter-spacing:.2em;text-transform:uppercase;color:var(--gd-text3);font-weight:500}
+.tpl-graphify-dark-graph .gd-h1{font-size:74px;font-weight:800;line-height:1.08;letter-spacing:-.02em;margin:16px 0 10px;color:var(--gd-text)}
+.tpl-graphify-dark-graph .gd-h2{font-size:52px;font-weight:700;line-height:1.12;margin:0 0 14px}
+.tpl-graphify-dark-graph .gd-lede{font-size:22px;line-height:1.65;font-weight:300;color:var(--gd-text2);max-width:850px}
+.tpl-graphify-dark-graph .gd-rainbow{background:linear-gradient(90deg,#ff0080,#ff4d00,#ff9900,#ffe600,#00c853,#0091ea,#6200ea,#ff0080);background-size:200% auto;-webkit-background-clip:text;-webkit-text-fill-color:transparent;animation:gdRainbow 4s linear infinite}
+@keyframes gdRainbow{0%{background-position:0% center}100%{background-position:200% center}}
+.tpl-graphify-dark-graph .gd-grad{background:linear-gradient(135deg,var(--gd-warm),var(--gd-rose),var(--gd-purple));-webkit-background-clip:text;-webkit-text-fill-color:transparent}
+.tpl-graphify-dark-graph .gd-accent{color:var(--gd-warm);font-weight:500}
+.tpl-graphify-dark-graph .gd-green{color:var(--gd-green)}
+.tpl-graphify-dark-graph .gd-blue{color:var(--gd-blue)}
+.tpl-graphify-dark-graph .gd-dim{color:var(--gd-text2)}
+.tpl-graphify-dark-graph .gd-mono{font-family:'JetBrains Mono',monospace}
+.tpl-graphify-dark-graph .gd-glass{position:relative;overflow:hidden;border-radius:20px;padding:22px 26px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.1);backdrop-filter:blur(20px) saturate(160%);box-shadow:0 8px 32px rgba(0,0,0,.3),inset 0 1px 0 rgba(255,255,255,.08)}
+.tpl-graphify-dark-graph .gd-glass::before{content:'';position:absolute;top:0;left:0;right:0;height:50%;background:linear-gradient(180deg,rgba(255,255,255,.05),transparent);pointer-events:none}
+.tpl-graphify-dark-graph .gd-glass-warm{background:rgba(232,168,124,.06);border-color:rgba(232,168,124,.2)}
+.tpl-graphify-dark-graph .gd-glass-green{background:rgba(126,211,164,.06);border-color:rgba(126,211,164,.2)}
+.tpl-graphify-dark-graph .gd-glass-blue{background:rgba(126,184,218,.06);border-color:rgba(126,184,218,.2)}
+.tpl-graphify-dark-graph .gd-grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:24px}
+.tpl-graphify-dark-graph .gd-grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:24px}
+.tpl-graphify-dark-graph .gd-tag{display:inline-block;border-radius:999px;padding:5px 14px;font-size:12px;font-weight:500;margin:2px 4px 2px 0;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);color:var(--gd-text2)}
+.tpl-graphify-dark-graph .gd-cmd{font-family:'JetBrains Mono',monospace;font-size:32px;font-weight:700;color:var(--gd-green);text-shadow:0 0 30px rgba(126,211,164,.45),0 0 60px rgba(126,211,164,.15);letter-spacing:-.01em}
+.tpl-graphify-dark-graph .gd-big{font-size:120px;font-weight:900;letter-spacing:-.04em;line-height:1}
+.tpl-graphify-dark-graph .gd-codebox{background:rgba(0,0,0,.55);border:1px solid rgba(255,255,255,.08);border-radius:14px;padding:22px 26px;font-family:'JetBrains Mono',monospace;font-size:14px;line-height:1.8;color:#d8d4c8}
+.tpl-graphify-dark-graph .gd-codebox .cm{color:#6b6a62}
+.tpl-graphify-dark-graph .gd-codebox .kw{color:var(--gd-warm)}
+.tpl-graphify-dark-graph .gd-codebox .st{color:var(--gd-green)}
+.tpl-graphify-dark-graph .gd-codebox .fn{color:var(--gd-blue)}

package/skills/design-templates/html-ppt/templates/full-decks/hermes-cyber-terminal/README.md

@@ -0,0 +1,11 @@
+# hermes-cyber-terminal
+
+黑底 (`#0a0c10`) + 终端 chrome + 扫描线 + 薄荷绿 glow 大字 + JetBrains Mono 全文打字机感。灵感来自 `20260414-hermes-agent/ppt/hermes-record.html` 的 `codebox #15151b` 深色代码盒和 `hermes-vs-openclaw.html` 的实测对比气质 —— 把两者合成一份「honest cyber review」。
+
+**Visual traits:** 56px cyber 网格 + CRT vignette + 半透明 scanlines 叠层、窗口 traffic-light chrome、`$ prompt` 开头的 command-line 标题、薄荷绿 text-shadow glow `#7ed3a4`、monospace 全局、虚拟 bar chart 用 stroke-only 呈现、blinking cursor、amber/green/red 分级标签。
+
+**Use when:** 评测一个开发者工具 / CLI / agent，展示跑分数据、trace、diff；想要即刻给出「技术人 honest review」的视觉语气；适合长 trace / long code 的场景。
+
+**Source inspiration:** `20260414-hermes-agent/ppt/hermes-record.html` + `hermes-vs-openclaw.html`.
+
+**Path:** `templates/full-decks/hermes-cyber-terminal/index.html`

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

@@ -0,0 +1,199 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>Hermes Cyber Terminal</title>
+<link rel="stylesheet" href="../../../assets/fonts.css">
+<link rel="stylesheet" href="../../../assets/base.css">
+<link rel="stylesheet" href="style.css">
+</head>
+<body class="tpl-hermes-cyber-terminal">
+<div class="deck">
+
+  <!-- 1. COVER -->
+  <section class="slide is-active">
+    <div class="hc-grid"></div>
+    <div class="hc-vignette"></div>
+    <div class="hc-scanlines"></div>
+    <div class="hc-chrome"><div class="dots"><span></span><span></span><span></span></div><div>~/hermes · zsh · 118x42 · 01:37:04</div></div>
+    <div style="margin:auto 0">
+      <p class="hc-prompt">whoami --hermes</p>
+      <h1 class="hc-h1">HERMES<br>AGENT / v0.9.2<span class="hc-cursor"></span></h1>
+      <p class="hc-lede">一个号称能「自主跑完整软件工程任务」的命令行 agent。<br>真的好用？还是又一轮营销？—— 我连续跑了 72 小时，告诉你答案。</p>
+      <div style="margin-top:26px">
+        <span class="hc-tag">rust-core</span>
+        <span class="hc-tag">mcp-native</span>
+        <span class="hc-tag amber">72h-benchmark</span>
+        <span class="hc-tag red">honest-review</span>
+      </div>
+    </div>
+    <div class="hc-footer"><span>hermes-review · lewis · 2026</span><span>01 / 08</span></div>
+  </section>
+
+  <!-- 2. SECTION DIVIDER -->
+  <section class="slide">
+    <div class="hc-grid"></div>
+    <div class="hc-scanlines"></div>
+    <div class="hc-chrome"><div class="dots"><span></span><span></span><span></span></div><div>section · 01/04</div></div>
+    <div style="margin:auto 0">
+      <p class="hc-prompt">cat chapter_01.md</p>
+      <h1 class="hc-h1" style="font-size:110px">// Setup</h1>
+      <p class="hc-lede">从 <code style="color:var(--hc-amber)">brew install hermes</code> 到第一次 prompt —— 一共 4 分 22 秒。</p>
+    </div>
+    <div class="hc-footer"><span>section · setup</span><span>02 / 08</span></div>
+  </section>
+
+  <!-- 3. CONTENT — spec cards -->
+  <section class="slide">
+    <div class="hc-grid"></div>
+    <div class="hc-scanlines"></div>
+    <div class="hc-chrome"><div class="dots"><span></span><span></span><span></span></div><div>benchmark · cold-start</div></div>
+    <h2 class="hc-h2">开箱数据</h2>
+    <p class="hc-lede">cold start → first-successful-task 三次平均</p>
+    <div class="hc-grid-3">
+      <div class="hc-card"><div class="lbl">install time</div><div class="val">42s</div><div class="desc">单 binary，无 docker，无 python env。</div></div>
+      <div class="hc-card"><div class="lbl">first token</div><div class="val">1.8s</div><div class="desc">接入 claude-opus-4-6，无预热。</div></div>
+      <div class="hc-card"><div class="lbl">first PR merged</div><div class="val">4m22s</div><div class="desc">跑的是 fix-a-typo 级别的低难度任务。</div></div>
+    </div>
+    <div class="hc-grid-2">
+      <div class="hc-card"><div class="lbl">// verdict +</div><div class="val" style="color:var(--hc-green);font-size:18px">冷启动是真的快</div><div class="desc">和 OpenClaw 的 docker + pip 流程比，快不止一个数量级。</div></div>
+      <div class="hc-card"><div class="lbl">// verdict -</div><div class="val" style="color:var(--hc-red);font-size:18px">MCP 服务器配置不够友好</div><div class="desc">env 变量需要手动塞进 ~/.hermes/env，文档几乎没写。</div></div>
+    </div>
+    <div class="hc-footer"><span>data · verified 3 runs</span><span>03 / 08</span></div>
+  </section>
+
+  <!-- 4. CODE -->
+  <section class="slide">
+    <div class="hc-grid"></div>
+    <div class="hc-scanlines"></div>
+    <div class="hc-chrome"><div class="dots"><span></span><span></span><span></span></div><div>trace · hermes run</div></div>
+    <p class="hc-prompt">hermes run "refactor auth module to use pkce"</p>
+    <h3 class="hc-h3" style="margin-top:12px">↓ 真实 trace (节选)</h3>
+    <pre class="hc-codebox" style="margin-top:10px"><span class="cm"># hermes v0.9.2 · session 42a1</span>
+[<span class="fn">plan</span>]    <span class="st">"分析 src/auth/*.ts → 找 oauth flow → 抽成 pkce"</span>
+[<span class="fn">read</span>]    src/auth/oauth.ts       <span class="cm">// 214 lines</span>
+[<span class="fn">read</span>]    src/auth/token.ts       <span class="cm">// 88 lines</span>
+[<span class="kw">think</span>]   <span class="st">"发现 implicit flow，改为 code+pkce，需新 state param"</span>
+[<span class="fn">edit</span>]    src/auth/oauth.ts       <span class="hl">+43 -17</span>
+[<span class="fn">edit</span>]    src/auth/token.ts       <span class="hl">+12 -4</span>
+[<span class="fn">test</span>]    pnpm vitest auth        <span class="st">PASS 18/18</span>
+[<span class="fn">commit</span>]  <span class="var">"feat(auth): migrate to oauth2 code+pkce"</span>
+[<span class="fn">push</span>]    origin feat/pkce-auth   <span class="st">ok</span>
+
+<span class="cm"># 总耗时 3m 14s · 14k tokens · $0.21</span></pre>
+    <div class="hc-footer"><span>trace · live</span><span>04 / 08</span></div>
+  </section>
+
+  <!-- 5. CHART -->
+  <section class="slide">
+    <div class="hc-grid"></div>
+    <div class="hc-scanlines"></div>
+    <div class="hc-chrome"><div class="dots"><span></span><span></span><span></span></div><div>benchmark · hermes vs openclaw</div></div>
+    <h2 class="hc-h2">72 小时对比</h2>
+    <p class="hc-lede">同一组 48 个 GitHub issue，两个 agent 各跑一遍</p>
+    <svg viewBox="0 0 1000 380" style="width:100%;max-width:1040px;margin-top:24px" xmlns="http://www.w3.org/2000/svg">
+      <g font-family="JetBrains Mono, monospace" font-size="13" fill="#8a8892">
+        <!-- axis -->
+        <line x1="80" y1="40" x2="80" y2="320" stroke="rgba(126,211,164,.2)"/>
+        <line x1="80" y1="320" x2="960" y2="320" stroke="rgba(126,211,164,.2)"/>
+        <!-- y labels -->
+        <text x="70" y="46" text-anchor="end">100%</text>
+        <text x="70" y="116" text-anchor="end">75%</text>
+        <text x="70" y="186" text-anchor="end">50%</text>
+        <text x="70" y="256" text-anchor="end">25%</text>
+        <text x="70" y="324" text-anchor="end">0</text>
+        <!-- bars: hermes -->
+        <g>
+          <rect x="130" y="80"  width="80" height="240" fill="rgba(126,211,164,.15)" stroke="#7ed3a4" stroke-width="1.5"/>
+          <text x="170" y="76" text-anchor="middle" fill="#7ed3a4" font-weight="700">82%</text>
+          <text x="170" y="345" text-anchor="middle">resolved</text>
+          <rect x="240" y="146" width="80" height="174" fill="rgba(126,211,164,.15)" stroke="#7ed3a4" stroke-width="1.5"/>
+          <text x="280" y="142" text-anchor="middle" fill="#7ed3a4" font-weight="700">58%</text>
+          <text x="280" y="345" text-anchor="middle">one-shot</text>
+          <rect x="350" y="60"  width="80" height="260" fill="rgba(126,211,164,.15)" stroke="#7ed3a4" stroke-width="1.5"/>
+          <text x="390" y="56" text-anchor="middle" fill="#7ed3a4" font-weight="700">89%</text>
+          <text x="390" y="345" text-anchor="middle">test-pass</text>
+          <rect x="460" y="110" width="80" height="210" fill="rgba(126,211,164,.15)" stroke="#7ed3a4" stroke-width="1.5"/>
+          <text x="500" y="106" text-anchor="middle" fill="#7ed3a4" font-weight="700">71%</text>
+          <text x="500" y="345" text-anchor="middle">pr-merged</text>
+        </g>
+        <!-- bars: openclaw -->
+        <g>
+          <rect x="570" y="150" width="80" height="170" fill="rgba(233,197,138,.12)" stroke="#e9c58a" stroke-width="1.5"/>
+          <text x="610" y="146" text-anchor="middle" fill="#e9c58a" font-weight="700">60%</text>
+          <text x="610" y="345" text-anchor="middle">resolved</text>
+          <rect x="680" y="212" width="80" height="108" fill="rgba(233,197,138,.12)" stroke="#e9c58a" stroke-width="1.5"/>
+          <text x="720" y="208" text-anchor="middle" fill="#e9c58a" font-weight="700">38%</text>
+          <text x="720" y="345" text-anchor="middle">one-shot</text>
+          <rect x="790" y="130" width="80" height="190" fill="rgba(233,197,138,.12)" stroke="#e9c58a" stroke-width="1.5"/>
+          <text x="830" y="126" text-anchor="middle" fill="#e9c58a" font-weight="700">67%</text>
+          <text x="830" y="345" text-anchor="middle">test-pass</text>
+        </g>
+        <!-- legend -->
+        <g transform="translate(820,50)">
+          <rect x="0" y="0" width="14" height="14" fill="rgba(126,211,164,.15)" stroke="#7ed3a4"/>
+          <text x="22" y="12" fill="#7ed3a4">hermes 0.9.2</text>
+          <rect x="0" y="22" width="14" height="14" fill="rgba(233,197,138,.12)" stroke="#e9c58a"/>
+          <text x="22" y="34" fill="#e9c58a">openclaw 2.1</text>
+        </g>
+      </g>
+    </svg>
+    <div class="hc-footer"><span>benchmark · n=48</span><span>05 / 08</span></div>
+  </section>
+
+  <!-- 6. STATS -->
+  <section class="slide">
+    <div class="hc-grid"></div>
+    <div class="hc-scanlines"></div>
+    <div class="hc-chrome"><div class="dots"><span></span><span></span><span></span></div><div>tldr</div></div>
+    <p class="hc-prompt">echo $VERDICT</p>
+    <div class="hc-big">7.8<span style="font-size:60px;color:var(--hc-ink2)">/ 10</span></div>
+    <p class="hc-lede" style="margin-top:14px">值得装，还不值得完全依赖。</p>
+    <div class="hc-grid-2" style="margin-top:24px">
+      <div class="hc-card"><div class="lbl">+ strong points</div><div class="desc">• rust 本体冷启快<br>• trace 可读性极强<br>• diff 审核友好，commit message 也写得合格</div></div>
+      <div class="hc-card"><div class="lbl">- weak points</div><div class="desc">• plan 阶段偶尔跳步<br>• 超 50k LoC 仓库会 OOM<br>• MCP 配置需要手动塞 env</div></div>
+    </div>
+    <div class="hc-footer"><span>verdict · honest</span><span>06 / 08</span></div>
+  </section>
+
+  <!-- 7. CTA -->
+  <section class="slide">
+    <div class="hc-grid"></div>
+    <div class="hc-scanlines"></div>
+    <div class="hc-chrome"><div class="dots"><span></span><span></span><span></span></div><div>install</div></div>
+    <h2 class="hc-h2">想自己跑一遍？</h2>
+    <p class="hc-lede">三条命令，不到 5 分钟就能看见它干第一件事。</p>
+    <pre class="hc-codebox" style="margin-top:22px"><span class="cm"># 1. install</span>
+<span class="kw">$</span> brew install hermes-agent/tap/hermes
+
+<span class="cm"># 2. auth (先准备好 anthropic api key)</span>
+<span class="kw">$</span> hermes auth login
+
+<span class="cm"># 3. first task</span>
+<span class="kw">$</span> cd ~/your-repo && hermes run <span class="st">"add a CHANGELOG.md from git log"</span></pre>
+    <div style="margin-top:26px">
+      <span class="hc-tag">brew-ready</span>
+      <span class="hc-tag">opus-4.6</span>
+      <span class="hc-tag amber">needs-api-key</span>
+    </div>
+    <div class="hc-footer"><span>try-it-now</span><span>07 / 08</span></div>
+  </section>
+
+  <!-- 8. THANKS -->
+  <section class="slide">
+    <div class="hc-grid"></div>
+    <div class="hc-scanlines"></div>
+    <div class="hc-chrome"><div class="dots"><span></span><span></span><span></span></div><div>EOF</div></div>
+    <div style="margin:auto 0">
+      <p class="hc-prompt">exit 0</p>
+      <h1 class="hc-h1" style="font-size:120px">// thanks<span class="hc-cursor"></span></h1>
+      <p class="hc-lede">完整 trace、48 个任务的 PR 列表、benchmark 脚本都在 <span style="color:var(--hc-amber)">github.com/lewis/hermes-review</span></p>
+    </div>
+    <div class="hc-footer"><span>session closed</span><span>08 / 08</span></div>
+  </section>
+
+</div>
+<script src="../../../assets/runtime.js"></script>
+</body>
+</html>

package/skills/design-templates/html-ppt/templates/full-decks/hermes-cyber-terminal/style.css

@@ -0,0 +1,55 @@
+/* hermes-cyber-terminal — 暗终端 + 霓虹绿青 + 扫描线 */
+.tpl-hermes-cyber-terminal{
+  --hc-bg:#0a0c10;
+  --hc-bg2:#15151b;
+  --hc-surface:#12141a;
+  --hc-border:rgba(126,211,164,.18);
+  --hc-ink:#e4e2d8;
+  --hc-ink2:#8a8892;
+  --hc-green:#7ed3a4;
+  --hc-cyan:#64dfdf;
+  --hc-amber:#e9c58a;
+  --hc-rose:#d4a0b9;
+  --hc-red:#ff6b6b;
+  background:var(--hc-bg);
+  color:var(--hc-ink);
+  font-family:'JetBrains Mono','SF Mono','Inter','Noto Sans SC',monospace;
+}
+.tpl-hermes-cyber-terminal .slide{background:var(--hc-bg);color:var(--hc-ink);padding:60px 84px;overflow:hidden}
+.tpl-hermes-cyber-terminal .hc-scanlines{position:absolute;inset:0;pointer-events:none;z-index:3;background:repeating-linear-gradient(180deg,transparent 0,transparent 3px,rgba(126,211,164,.025) 3px,rgba(126,211,164,.025) 4px);mix-blend-mode:screen}
+.tpl-hermes-cyber-terminal .hc-grid{position:absolute;inset:0;pointer-events:none;opacity:.35;background-image:linear-gradient(rgba(126,211,164,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(126,211,164,.08) 1px,transparent 1px);background-size:56px 56px;mask-image:radial-gradient(ellipse at 50% 50%,black 30%,transparent 80%)}
+.tpl-hermes-cyber-terminal .hc-vignette{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at 50% 50%,transparent 50%,rgba(0,0,0,.6) 100%)}
+.tpl-hermes-cyber-terminal .slide > *{position:relative;z-index:2}
+.tpl-hermes-cyber-terminal .hc-chrome{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px;font-size:11px;color:var(--hc-ink2);letter-spacing:.18em;text-transform:uppercase}
+.tpl-hermes-cyber-terminal .hc-chrome .dots{display:flex;gap:8px}
+.tpl-hermes-cyber-terminal .hc-chrome .dots span{width:11px;height:11px;border-radius:50%;background:#2a2d33}
+.tpl-hermes-cyber-terminal .hc-chrome .dots span:nth-child(1){background:#ff5f57}
+.tpl-hermes-cyber-terminal .hc-chrome .dots span:nth-child(2){background:#febc2e}
+.tpl-hermes-cyber-terminal .hc-chrome .dots span:nth-child(3){background:var(--hc-green)}
+.tpl-hermes-cyber-terminal .hc-prompt{color:var(--hc-green);font-weight:500}
+.tpl-hermes-cyber-terminal .hc-prompt::before{content:'$ ';color:var(--hc-cyan)}
+.tpl-hermes-cyber-terminal .hc-h1{font-family:'JetBrains Mono',monospace;font-size:72px;font-weight:700;line-height:1.05;letter-spacing:-.02em;color:var(--hc-green);text-shadow:0 0 30px rgba(126,211,164,.35),0 0 60px rgba(126,211,164,.1);margin:14px 0 12px}
+.tpl-hermes-cyber-terminal .hc-h2{font-size:46px;font-weight:600;color:var(--hc-ink);margin:0 0 10px;letter-spacing:-.015em}
+.tpl-hermes-cyber-terminal .hc-h3{font-size:22px;font-weight:600;color:var(--hc-amber);margin:0 0 10px}
+.tpl-hermes-cyber-terminal .hc-lede{font-size:18px;line-height:1.7;color:var(--hc-ink2);max-width:780px;font-family:'Inter','Noto Sans SC',sans-serif}
+.tpl-hermes-cyber-terminal .hc-cursor{display:inline-block;width:12px;height:1em;background:var(--hc-green);vertical-align:middle;margin-left:6px;animation:hcBlink 1s steps(2) infinite}
+@keyframes hcBlink{50%{opacity:0}}
+.tpl-hermes-cyber-terminal .hc-card{background:var(--hc-surface);border:1px solid var(--hc-border);border-radius:10px;padding:20px 24px;position:relative}
+.tpl-hermes-cyber-terminal .hc-card::before{content:'';position:absolute;top:-1px;left:12px;right:12px;height:2px;background:linear-gradient(90deg,transparent,var(--hc-green),transparent)}
+.tpl-hermes-cyber-terminal .hc-card .lbl{font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--hc-ink2);margin-bottom:8px}
+.tpl-hermes-cyber-terminal .hc-card .val{font-size:22px;font-weight:700;color:var(--hc-green);font-family:'JetBrains Mono',monospace}
+.tpl-hermes-cyber-terminal .hc-card .desc{font-size:13px;color:var(--hc-ink2);margin-top:10px;line-height:1.55;font-family:'Inter',sans-serif}
+.tpl-hermes-cyber-terminal .hc-grid-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px;margin-top:24px}
+.tpl-hermes-cyber-terminal .hc-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:24px}
+.tpl-hermes-cyber-terminal .hc-codebox{background:#0c0d12;border:1px solid var(--hc-border);border-radius:10px;padding:22px 26px;font-family:'JetBrains Mono',monospace;font-size:14px;line-height:1.85;color:#d8d4c8;box-shadow:inset 0 0 60px rgba(126,211,164,.04)}
+.tpl-hermes-cyber-terminal .hc-codebox .cm{color:#5a6068}
+.tpl-hermes-cyber-terminal .hc-codebox .kw{color:var(--hc-amber)}
+.tpl-hermes-cyber-terminal .hc-codebox .st{color:var(--hc-green)}
+.tpl-hermes-cyber-terminal .hc-codebox .fn{color:var(--hc-cyan)}
+.tpl-hermes-cyber-terminal .hc-codebox .var{color:var(--hc-rose)}
+.tpl-hermes-cyber-terminal .hc-codebox .hl{color:#fff;background:rgba(126,211,164,.15);padding:0 4px;border-radius:3px}
+.tpl-hermes-cyber-terminal .hc-tag{display:inline-block;font-family:'JetBrains Mono',monospace;font-size:11px;padding:3px 10px;border:1px solid var(--hc-border);border-radius:4px;color:var(--hc-green);background:rgba(126,211,164,.04);margin:2px 6px 2px 0;text-transform:uppercase;letter-spacing:.1em}
+.tpl-hermes-cyber-terminal .hc-tag.amber{color:var(--hc-amber);border-color:rgba(233,197,138,.2);background:rgba(233,197,138,.04)}
+.tpl-hermes-cyber-terminal .hc-tag.red{color:var(--hc-red);border-color:rgba(255,107,107,.25);background:rgba(255,107,107,.05)}
+.tpl-hermes-cyber-terminal .hc-big{font-family:'JetBrains Mono',monospace;font-size:140px;font-weight:700;line-height:1;color:var(--hc-green);text-shadow:0 0 40px rgba(126,211,164,.4),0 0 80px rgba(126,211,164,.15);letter-spacing:-.04em}
+.tpl-hermes-cyber-terminal .hc-footer{position:absolute;left:84px;right:84px;bottom:32px;display:flex;justify-content:space-between;font-size:10px;color:var(--hc-ink2);letter-spacing:.2em;text-transform:uppercase;border-top:1px solid rgba(126,211,164,.1);padding-top:14px}

package/skills/design-templates/html-ppt/templates/full-decks/knowledge-arch-blueprint/README.md

@@ -0,0 +1,11 @@
+# knowledge-arch-blueprint
+
+奶油纸 (`#F0EAE0`) 底 + 锈红 (`#B5392A`) 单一 accent + 硬黑描边卡片 + 虚线反馈回路箭头。灵感来自 `20260405 架构图v2.html` —— 那是一张真正的「技术白皮书架构图」，像建筑蓝图。
+
+**Visual traits:** 暖米色纸底、微弱 48px 网格做 blueprint 感、硬朗 2px 黑边卡片、pipeline step-box 一字排开配 hero box 凸起、右上 insight 红色 callout、大小写 kicker 2.5-4px 字距、SVG 反馈回路虚线 + 箭头、Playfair 大字号衬线数据、无渐变无阴影极度克制。
+
+**Use when:** 讲系统架构、数据流向、流程拆解；你想让内容看起来像一份正经技术白皮书而不是营销贴；需要严肃感、印刷感、可直接截图塞进 README。
+
+**Source inspiration:** `20260405-Karpathy-知识库/20260405 架构图v2.html`.
+
+**Path:** `templates/full-decks/knowledge-arch-blueprint/index.html`