npm - agent-devkit - Versions diffs - 0.0.1 - Mend

agent-devkit 0.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (4610) hide show

package/runtime/vendor/plugins/open-design/_official/examples/html-ppt-hermes-cyber-terminal/example.html ADDED Viewed

@@ -0,0 +1,414 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>Hermes Cyber Terminal</title>
+<style>/* html-ppt :: webfonts (only families actually used by this deck) */
+@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;700&family=Geist:wght@300;400;500&display=swap');
+</style>
+<style>/* html-ppt :: base.css — reset + shared tokens + layout primitives */
+/* Default tokens. Themes in assets/themes/*.css override the :root block. */
+:root {
+  /* tokens repointed to the hermes-cyber-terminal family (dark terminal, mint accent) */
+  --bg: #0a0c10;
+  --bg-soft: #12141a;
+  --surface: #12141a;
+  --surface-2: #15151b;
+  --border: rgba(126,211,164,.18);
+  --border-strong: rgba(126,211,164,.32);
+  --text-1: #e4e2d8;
+  --text-2: #a8a6ae;
+  --text-3: #8a8892;
+  --accent: #7ed3a4;
+  --accent-2: #64dfdf;
+  --accent-3: #e9c58a;
+  --good: #7ed3a4;
+  --warn: #e9c58a;
+  --bad:  #ff6b6b;
+  --radius: 4px;
+  --radius-sm: 3px;
+  --radius-lg: 6px;
+  --shadow: none;
+  --shadow-lg: none;
+  --font-sans: 'Geist',-apple-system,BlinkMacSystemFont,Helvetica,Arial,sans-serif;
+  --font-serif: Georgia,serif;
+  --font-mono: 'JetBrains Mono',SFMono-Regular,Menlo,monospace;
+  --font-display: var(--font-mono);
+  --letter-tight: -.03em;
+  --letter-normal: -.01em;
+  --ease: cubic-bezier(.16,1,.3,1);
+}
+*,*::before,*::after{box-sizing:border-box}
+html,body{margin:0;padding:0;background:var(--bg);color:var(--text-1);
+  font-family:var(--font-sans);font-weight:400;line-height:1.6;
+  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
+  letter-spacing:var(--letter-normal)}
+img,svg,video{max-width:100%;display:block}
+a{color:var(--accent);text-decoration:none}
+a:hover{text-decoration:underline}
+code,kbd,pre,samp{font-family:var(--font-mono)}
+/* ================= SLIDE SYSTEM ================= */
+.deck{position:relative;width:100vw;height:100vh;overflow:hidden;background:var(--bg)}
+.slide{
+  position:absolute;inset:0;
+  display:flex;flex-direction:column;justify-content:center;
+  padding:72px 96px;
+  box-sizing:border-box;
+  opacity:0;pointer-events:none;
+  transition:opacity .5s var(--ease), transform .5s var(--ease);
+  transform:translateX(30px);
+  overflow:hidden;
+}
+.slide.is-active{opacity:1;pointer-events:auto;transform:translateX(0);z-index:2}
+.slide.is-prev{transform:translateX(-30px)}
+/* single-page standalone (used when a layout file is opened directly) */
+body.single .slide{position:relative;width:100vw;height:100vh;opacity:1;transform:none;pointer-events:auto}
+/* ================= TYPOGRAPHY ================= */
+.eyebrow{font-size:13px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--text-3)}
+.kicker{font-size:14px;font-weight:600;color:var(--accent);letter-spacing:.08em;text-transform:uppercase}
+h1.title,.h1{font-family:var(--font-display);font-size:72px;line-height:1.05;font-weight:700;letter-spacing:var(--letter-tight);margin:0 0 18px;color:var(--text-1)}
+h2.title,.h2{font-family:var(--font-display);font-size:54px;line-height:1.1;font-weight:700;letter-spacing:var(--letter-tight);margin:0 0 14px}
+h3,.h3{font-size:32px;line-height:1.2;font-weight:600;letter-spacing:var(--letter-normal);margin:0 0 10px}
+h4,.h4{font-size:22px;line-height:1.3;font-weight:600;margin:0 0 8px}
+.lede{font-size:22px;line-height:1.55;color:var(--text-2);font-weight:300;max-width:62ch}
+.dim{color:var(--text-2)}
+.dim2{color:var(--text-3)}
+.mono{font-family:var(--font-mono)}
+.serif{font-family:var(--font-serif)}
+.gradient-text{color:var(--accent)} /* legacy hook: gradient text retired, accent only */
+/* ================= LAYOUT PRIMITIVES ================= */
+.stack>*+*{margin-top:14px}
+.row{display:flex;gap:24px;align-items:center}
+.row.wrap{flex-wrap:wrap}
+.grid{display:grid;gap:24px}
+.g2{grid-template-columns:repeat(2,1fr)}
+.g3{grid-template-columns:repeat(3,1fr)}
+.g4{grid-template-columns:repeat(4,1fr)}
+.center{display:flex;align-items:center;justify-content:center;text-align:center}
+.fill{flex:1}
+.sp-t{padding-top:24px}.sp-b{padding-bottom:24px}
+.mt-s{margin-top:8px}.mt-m{margin-top:18px}.mt-l{margin-top:32px}
+.mb-s{margin-bottom:8px}.mb-m{margin-bottom:18px}.mb-l{margin-bottom:32px}
+/* ================= CARDS ================= */
+.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
+  padding:26px 28px;box-shadow:var(--shadow);position:relative;overflow:hidden}
+.card-soft{background:var(--surface-2);border:1px solid var(--border)}
+.card-outline{background:transparent;border:1.5px solid var(--border-strong);box-shadow:none}
+.card-accent{background:var(--surface);border-top:3px solid var(--accent)}
+.card-hover{transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
+.card-hover:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
+.pill{display:inline-block;padding:4px 12px;border-radius:999px;font-size:12px;font-weight:500;
+  background:var(--surface-2);color:var(--text-2);border:1px solid var(--border)}
+.pill-accent{background:color-mix(in srgb,var(--accent) 12%,transparent);color:var(--accent);border-color:color-mix(in srgb,var(--accent) 28%,transparent)}
+/* ================= BARS / DIVIDERS ================= */
+.divider{height:1px;background:var(--border);width:100%}
+.divider-accent{height:3px;width:72px;background:var(--accent);border-radius:2px}
+/* ================= CHROME (header/footer/progress) ================= */
+.deck-header{position:absolute;top:24px;left:40px;right:40px;display:flex;align-items:center;justify-content:space-between;
+  font-size:12px;color:var(--text-3);letter-spacing:.12em;text-transform:uppercase;z-index:10;pointer-events:none}
+.deck-footer{position:absolute;bottom:24px;left:40px;right:40px;display:flex;align-items:center;justify-content:space-between;
+  font-size:12px;color:var(--text-3);z-index:10;pointer-events:none}
+.slide-number::before{content:attr(data-current)}
+.slide-number::after{content:" / " attr(data-total)}
+.progress-bar{position:fixed;left:0;right:0;bottom:0;height:3px;background:transparent;z-index:20}
+.progress-bar > span{display:block;height:100%;width:0;background:var(--accent);transition:width .3s var(--ease)}
+/* ================= PRESENTER / OVERVIEW ================= */
+.notes{display:none!important}
+.notes-overlay{position:fixed;inset:auto 0 0 0;max-height:42vh;background:rgba(20,22,30,.95);color:#e8ebf4;
+  padding:20px 32px;font-size:16px;line-height:1.6;border-top:1px solid rgba(255,255,255,.1);transform:translateY(100%);
+  transition:transform .3s var(--ease);z-index:40;overflow:auto;font-family:var(--font-sans)}
+.notes-overlay.open{transform:translateY(0)}
+.overview{position:fixed;inset:0;background:rgba(10,12,18,.92);backdrop-filter:blur(12px);z-index:50;
+  display:none;padding:40px;overflow:auto}
+.overview.open{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;align-content:start}
+.overview .thumb{background:var(--surface);border:1px solid var(--border);border-radius:12px;
+  aspect-ratio:16/9;overflow:hidden;cursor:pointer;position:relative;color:var(--text-1);padding:16px;
+  font-size:11px;transition:transform .2s var(--ease)}
+.overview .thumb:hover{transform:scale(1.04)}
+.overview .thumb .n{position:absolute;top:8px;left:10px;font-weight:700;font-size:14px;color:var(--text-3)}
+.overview .thumb .t{position:absolute;bottom:10px;left:14px;right:14px;font-weight:600;color:var(--text-1)}
+/* ================= PRESENTER VIEW ================= */
+/* Presenter view opens in a separate popup window (S key).
+ * All presenter styles are self-contained in the popup HTML generated by runtime.js.
+ * The audience window (this file) is NOT affected — it stays as normal deck view.
+ * Only the .notes class below is needed to hide speaker notes from audience. */
+/* ================= UTILITY ================= */
+.hidden{display:none!important}
+.nowrap{white-space:nowrap}
+.tr{text-align:right}.tc{text-align:center}.tl{text-align:left}
+.uppercase{text-transform:uppercase;letter-spacing:.12em}
+/* ================= PRINT ================= */
+@media print{
+  .slide{position:relative;opacity:1!important;transform:none!important;page-break-after:always;height:100vh}
+  .deck-header,.deck-footer,.progress-bar,.notes-overlay,.overview{display:none!important}
+}
+</style>
+<style>/* hermes-cyber-terminal — dark terminal + neon mint-cyan + scanlines */
+.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:#96949d;
+  --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',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:#b9b7ad;max-width:62ch;font-family:'Geist',sans-serif;font-weight:300}
+.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:2px;padding:20px 24px;position:relative}
+/* HUD corner brackets instead of the old gradient shimmer line */
+.tpl-hermes-cyber-terminal .hc-card::before{content:'';position:absolute;top:-1px;left:-1px;width:14px;height:14px;border-top:2px solid var(--hc-green);border-left:2px solid var(--hc-green)}
+.tpl-hermes-cyber-terminal .hc-card::after{content:'';position:absolute;bottom:-1px;right:-1px;width:14px;height:14px;border-bottom:2px solid rgba(126,211,164,.45);border-right:2px solid rgba(126,211,164,.45)}
+.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:#9d9ba3;margin-top:10px;line-height:1.6;font-family:'Geist',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:2px;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:2px;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}
+/* entrance: staggered rise on the active slide (transform+opacity only, ease-out) */
+@keyframes hcRise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
+.tpl-hermes-cyber-terminal .slide.is-active > :not(.hc-grid):not(.hc-vignette):not(.hc-scanlines){animation:hcRise .6s cubic-bezier(.16,1,.3,1) both}
+.tpl-hermes-cyber-terminal .slide.is-active > :nth-child(5){animation-delay:.06s}
+.tpl-hermes-cyber-terminal .slide.is-active > :nth-child(6){animation-delay:.12s}
+.tpl-hermes-cyber-terminal .slide.is-active > :nth-child(7){animation-delay:.18s}
+@media (prefers-reduced-motion: reduce){
+  .tpl-hermes-cyber-terminal .slide.is-active > *{animation:none!important}
+  .tpl-hermes-cyber-terminal .hc-cursor{animation:none!important}
+}
+</style>
+<style>
+/* Static-preview fallback (runtime.js is absent — keep every slide visible) */
+.deck{height:auto;min-height:100vh;overflow:visible}
+.slide{position:relative;inset:auto;opacity:1;pointer-events:auto;transform:none;height:100vh;page-break-after:always}
+.deck-header,.deck-footer,.slide-number,.progress-bar,.notes-overlay,.overview{pointer-events:none}
+.notes{display:none!important}
+</style></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>~/open-design · zsh · 118x42 · 01:37:04</div></div>
+    <div style="margin:auto 0">
+      <p class="hc-prompt">od --version</p>
+      <h1 class="hc-h1" style="font-size:104px">OPEN<br>DESIGN<span class="hc-cursor"></span></h1>
+      <p class="hc-lede">An open-source, local, agent-driven design platform.<br>From idea to prototypes, websites, slides, and HTML video — the entire product design workflow, on your own machine.</p>
+      <div style="margin-top:26px">
+        <span class="hc-tag">local-first</span>
+        <span class="hc-tag">byok</span>
+        <span class="hc-tag amber">apache-2.0</span>
+        <span class="hc-tag red">no-signup</span>
+      </div>
+    </div>
+    <div class="hc-footer"><span>github.com/nexu-io/open-design · 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 why_open_design.md</p>
+      <h1 class="hc-h1" style="font-size:110px">// Why</h1>
+      <p class="hc-lede">In April 2026, Claude Design proved for the first time that LLMs can truly design. But it is <code style="color:var(--hc-amber)">closed-source · cloud-only</code> — no agent swapping, no self-hosting, no BYOK. Open Design sets that capability free.</p>
+    </div>
+    <div class="hc-footer"><span>section · why</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>stats · ecosystem</div></div>
+    <h2 class="hc-h2">The ecosystem in numbers</h2>
+    <p class="hc-lede">Public GitHub figures · Apache-2.0 open source</p>
+    <div class="hc-grid-3">
+      <div class="hc-card"><div class="lbl">github stars</div><div class="val">60K+</div><div class="desc">An open-source project maintained by 300+ contributors.</div></div>
+      <div class="hc-card"><div class="lbl">plugins</div><div class="val">217+</div><div class="desc">Prototypes, slides, posters, dashboards, weekly reports, OKRs.</div></div>
+      <div class="hc-card"><div class="lbl">coding agents</div><div class="val">21</div><div class="desc">Auto-detects CLIs already on your PATH — zero config.</div></div>
+    </div>
+    <div class="hc-grid-2">
+      <div class="hc-card"><div class="lbl">// open design</div><div class="val" style="color:var(--hc-green);font-size:18px">desktop-native · runs locally</div><div class="desc">Reads local files, Figma exports, and code repos directly; the agent gets full terminal execution power.</div></div>
+      <div class="hc-card"><div class="lbl">// closed alternatives</div><div class="val" style="color:var(--hc-red);font-size:18px">model lock-in · cloud-only</div><div class="desc">No agent swapping, self-hosting, or BYOK — and every generation leaves your machine.</div></div>
+    </div>
+    <div class="hc-footer"><span>data · github public</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 · od run</div></div>
+    <p class="hc-prompt">od run "build a landing page for the new product launch"</p>
+    <h3 class="hc-h3" style="margin-top:12px">↓ From idea to delivery in 5 steps</h3>
+    <pre class="hc-codebox" style="margin-top:10px"><span class="cm"># open design · session 42a1</span>
+[<span class="fn">start</span>]   <span class="st">"pick a start: a one-sentence goal, or straight from a template / plugin"</span>
+[<span class="fn">style</span>]   design-systems/DESIGN.md   <span class="cm">// palette · type · spacing auto-applied</span>
+[<span class="kw">think</span>]   <span class="st">"agent reads local files + figma exports + the full repo context"</span>
+[<span class="fn">gen</span>]     artifacts/landing.html     <span class="hl">real runnable file</span>
+[<span class="fn">preview</span>] sandbox                    <span class="st">instant preview · live edits</span>
+[<span class="fn">ship</span>]    <span class="var">"hand off to engineering, or convert to a marketing video via HyperFrames"</span>
+[<span class="fn">memory</span>]  preferences saved          <span class="st">ok</span>
+<span class="cm"># every choice becomes context for the next run — sharper with every use</span></pre>
+    <div class="hc-footer"><span>trace · workflow</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 · monthly cost</div></div>
+    <h2 class="hc-h2">Monthly cost: -80%</h2>
+    <p class="hc-lede">vs Claude Design: $500 → ~$73 (measured BYOK usage, demo data)</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="#96949d">
+        <!-- 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">$500</text>
+        <text x="70" y="116" text-anchor="end">$375</text>
+        <text x="70" y="186" text-anchor="end">$250</text>
+        <text x="70" y="256" text-anchor="end">$125</text>
+        <text x="70" y="324" text-anchor="end">0</text>
+        <!-- bar: claude design -->
+        <g>
+          <rect x="240" y="40" width="140" height="280" fill="rgba(233,197,138,.12)" stroke="#e9c58a" stroke-width="1.5"/>
+          <text x="310" y="34" text-anchor="middle" fill="#e9c58a" font-weight="700">$500 / mo</text>
+          <text x="310" y="345" text-anchor="middle">claude design</text>
+        </g>
+        <!-- bar: open design -->
+        <g>
+          <rect x="560" y="279" width="140" height="41" fill="rgba(126,211,164,.15)" stroke="#7ed3a4" stroke-width="1.5"/>
+          <text x="630" y="273" text-anchor="middle" fill="#7ed3a4" font-weight="700">~$73 / mo</text>
+          <text x="630" y="345" text-anchor="middle">open design (byok)</text>
+        </g>
+        <!-- delta annotation -->
+        <g>
+          <text x="470" y="150" text-anchor="middle" fill="#7ed3a4" font-size="34" font-weight="700">-80%</text>
+          <text x="470" y="176" text-anchor="middle" fill="#96949d">same usage, lower monthly bill</text>
+        </g>
+        <!-- legend -->
+        <g transform="translate(800,50)">
+          <rect x="0" y="0" width="14" height="14" fill="rgba(233,197,138,.12)" stroke="#e9c58a"/>
+          <text x="22" y="12" fill="#e9c58a">subscription · cloud</text>
+          <rect x="0" y="22" width="14" height="14" fill="rgba(126,211,164,.15)" stroke="#7ed3a4"/>
+          <text x="22" y="34" fill="#7ed3a4">byok · local</text>
+        </g>
+      </g>
+    </svg>
+    <div class="hc-footer"><span>benchmark · $500 → ~$73</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 $STARS</p>
+    <div class="hc-big">60K+<span style="font-size:60px;color:var(--hc-ink2)"> stars</span></div>
+    <p class="hc-lede" style="margin-top:14px">Apache-2.0 open source · built with 300+ contributors.</p>
+    <div class="hc-grid-2" style="margin-top:24px">
+      <div class="hc-card"><div class="lbl">+ core capabilities</div><div class="desc">• 129 design systems: import from GitHub / Figma / local files<br>• HyperFrames: full HTML→MP4 video pipeline<br>• Self-evolving design memory — it understands you better with use</div></div>
+      <div class="hc-card"><div class="lbl">+ open by default</div><div class="desc">• BYOK end to end: Anthropic / OpenAI / Azure / Google<br>• All data stays local, no sign-up<br>• Forking, self-hosting, and commercial use all allowed</div></div>
+    </div>
+    <div class="hc-footer"><span>numbers · canonical</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">Want to run it yourself?</h2>
+    <p class="hc-lede">Download Open Design (macOS / Windows), or boot it from source with three commands.</p>
+    <pre class="hc-codebox" style="margin-top:22px"><span class="cm"># 1. clone (apache-2.0)</span>
+<span class="kw">$</span> git clone https://github.com/nexu-io/open-design
+<span class="cm"># 2. install (node 24 + pnpm)</span>
+<span class="kw">$</span> cd open-design && pnpm install
+<span class="cm"># 3. start (byok: your own api key)</span>
+<span class="kw">$</span> pnpm tools-dev</pre>
+    <div style="margin-top:26px">
+      <span class="hc-tag">local-first</span>
+      <span class="hc-tag">21-coding-agents</span>
+      <span class="hc-tag amber">byok</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">Putting frontier AI design capability back on every creator's desk.<br><span style="color:var(--hc-amber)">github.com/nexu-io/open-design</span> · discord.gg/9ptkbbqRu · x.com/nexudotio</p>
+    </div>
+    <div class="hc-footer"><span>open · local · agent-native</span><span>08 / 08</span></div>
+  </section>
+</div>
+</body>
+</html>

package/runtime/vendor/plugins/open-design/_official/examples/html-ppt-hermes-cyber-terminal/open-design.json ADDED Viewed

@@ -0,0 +1,122 @@
+{
+  "$schema": "https://open-design.ai/schemas/plugin.v1.json",
+  "specVersion": "1.0.0",
+  "name": "example-html-ppt-hermes-cyber-terminal",
+  "title": "Html Ppt Hermes Cyber Terminal",
+  "title_i18n": {
+    "zh-CN": "Html Ppt Hermes 赛博终端",
+    "zh-TW": "Html Ppt Hermes 賽博終端",
+    "ja": "Html Ppt Hermes サイバーターミナル",
+    "ko": "Html Ppt Hermes 사이버 터미널",
+    "de": "Html Ppt Hermes Cyber-Terminal",
+    "fr": "Html Ppt Hermes Terminal Cyber",
+    "ru": "Html Ppt Hermes Киберт-терминал",
+    "es": "Html Ppt Hermes Terminal Cibernético",
+    "pt-BR": "Html Ppt Hermes Terminal Cibernético",
+    "it": "Html Ppt Hermes Terminale Cyber",
+    "vi": "Html Ppt Hermes Terminal Cyber",
+    "pl": "Html Ppt Hermes Terminal Cybernetyczny",
+    "id": "Html Ppt Hermes Terminal Cyber",
+    "nl": "Html Ppt Hermes Cyberterminal",
+    "ar": "Html Ppt Hermes طرفية سايبر",
+    "tr": "Html Ppt Hermes Siber Terminal",
+    "uk": "Html Ppt Hermes Кібер-термінал",
+    "en": "Html Ppt Hermes Cyber Terminal"
+  },
+  "version": "0.1.0",
+  "description": "暗终端 honest-review deck — #0a0c10 黑底 + 56px 赛博网格 + CRT 暗角 + 扫描线、窗口红绿灯 chrome、`$ prompt` 命令行标题、薄荷绿 #7ed3a4 大字、JetBrains Mono、stroke-only 柱状图、blinking 光标、琥珀/绿/红三档 tag、暗色代码块。适合 CLI / agent / dev tool 测评（含 trace、diff、benchmark）。",
+  "description_i18n": {
+    "zh-CN": "暗色终端风格演示模板，#0a0c10 黑底配 56px 赛博网格、CRT 暗角、扫描线、窗口红绿灯 chrome、`$ prompt` 命令行标题、薄荷绿 #7ed3a4 大字、JetBrains Mono、描边柱状图、闪烁光标、琥珀/绿/红三档标签、暗色代码块。适合 CLI/agent/开发工具测评（含 trace、diff、benchmark）。",
+    "zh-TW": "暗色終端風格簡報範本，#0a0c10 黑底搭配 56px 賽博網格、CRT 暗角、掃描線、視窗紅綠燈 chrome、`$ prompt` 指令列標題、薄荷綠 #7ed3a4 大字、JetBrains Mono、描邊長條圖、閃爍游標、琥珀/綠/紅三檔標籤、暗色程式碼區塊。適合 CLI/agent/開發工具評測（含 trace、diff、benchmark）。",
+    "ja": "ダークターミナル風プレゼンテーションテンプレート。#0a0c10 黒背景、56px サイバーグリッド、CRT ビネット、スキャンライン、ウィンドウ信号灯 chrome、`$ prompt` コマンドラインタイトル、ミントグリーン #7ed3a4 大文字、JetBrains Mono、アウトラインのみの棒グラフ、点滅カーソル、琥珀/緑/赤の3段階タグ、ダークコードブロック。CLI/agent/開発ツールレビューに最適（trace、diff、benchmark を含む）。",
+    "ko": "다크 터미널 스타일 프레젠테이션 템플릿. #0a0c10 검은 배경, 56px 사이버 그리드, CRT 비네팅, 스캔라인, 창 신호등 chrome, `$ prompt` 커맨드라인 제목, 민트그린 #7ed3a4 대형 텍스트, JetBrains Mono, 아웃라인 막대 차트, 깜빡이는 커서, 호박색/녹색/빨간색 3단계 태그, 다크 코드 블록. CLI/agent/개발 도구 리뷰에 적합(trace, diff, benchmark 포함).",
+    "de": "Dunkles Terminal-Stil-Präsentationstemplate mit #0a0c10 schwarzem Hintergrund, 56px Cyber-Raster, CRT-Vignette, Scanlines, Fenster-Ampel-Chrome, `$ prompt`-Befehlszeilen-Titel, Mintgrün #7ed3a4 Großschrift, JetBrains Mono, Outline-Balkendiagrammen, blinkendem Cursor, Bernstein/Grün/Rot-Tags und dunklen Codeblöcken. Ideal für CLI/Agent/Dev-Tool-Reviews (inkl. Trace, Diff, Benchmark).",
+    "fr": "Modèle de présentation style terminal sombre avec fond noir #0a0c10, grille cyber 56px, vignette CRT, lignes de balayage, chrome feux tricolores, titres `$ prompt` en ligne de commande, texte vert menthe #7ed3a4, JetBrains Mono, graphiques en barres outline, curseur clignotant, tags ambre/vert/rouge et blocs de code sombres. Idéal pour les revues CLI/agent/outils dev (trace, diff, benchmark).",
+    "ru": "Шаблон презентации в стиле тёмного терминала с чёрным фоном #0a0c10, кибер-сеткой 56px, виньетированием CRT, сканлайнами, светофором окон chrome, заголовками `$ prompt` в командной строке, мятно-зелёным #7ed3a4 текстом, JetBrains Mono, контурными столбчатыми диаграммами, мигающим курсором, тегами янтарь/зелёный/красный и тёмными блоками кода. Подходит для обзоров CLI/агентов/инструментов разработки (trace, diff, benchmark).",
+    "es": "Plantilla de presentación estilo terminal oscuro con fondo negro #0a0c10, cuadrícula cibernética 56px, viñeta CRT, líneas de escaneo, semáforo de ventana chrome, títulos `$ prompt` de línea de comandos, texto verde menta #7ed3a4, JetBrains Mono, gráficos de barras outline, cursor parpadeante, etiquetas ámbar/verde/rojo y bloques de código oscuros. Ideal para reseñas de CLI/agentes/herramientas dev (trace, diff, benchmark).",
+    "pt-BR": "Template de apresentação estilo terminal escuro com fundo preto #0a0c10, grid cibernético 56px, vinheta CRT, linhas de varredura, chrome de semáforo de janela, títulos `$ prompt` de linha de comando, texto verde-menta #7ed3a4, JetBrains Mono, gráficos de barras outline, cursor piscante, tags âmbar/verde/vermelho e blocos de código escuros. Ideal para reviews de CLI/agentes/ferramentas dev (trace, diff, benchmark).",
+    "it": "Template di presentazione stile terminale scuro con sfondo nero #0a0c10, griglia cyber 56px, vignettatura CRT, linee di scansione, chrome semaforo finestra, titoli `$ prompt` da riga di comando, testo verde menta #7ed3a4, JetBrains Mono, grafici a barre outline, cursore lampeggiante, tag ambra/verde/rosso e blocchi di codice scuri. Ideale per recensioni CLI/agenti/strumenti dev (trace, diff, benchmark).",
+    "vi": "Template trình chiếu phong cách terminal tối với nền đen #0a0c10, lưới cyber 56px, vignette CRT, đường quét, chrome đèn tín hiệu cửa sổ, tiêu đề `$ prompt` dòng lệnh, chữ xanh bạc hà #7ed3a4, JetBrains Mono, biểu đồ cột outline, con trỏ nhấp nháy, thẻ hổ phách/xanh/đỏ và khối code tối. Phù hợp cho đánh giá CLI/agent/công cụ dev (trace, diff, benchmark).",
+    "pl": "Szablon prezentacji w stylu ciemnego terminala z czarnym tłem #0a0c10, siatką cyber 56px, winietowaniem CRT, liniami skanowania, chrome świateł okna, tytułami `$ prompt` wiersza poleceń, tekstem miętowozielonym #7ed3a4, JetBrains Mono, wykresami słupkowymi outline, mrugającym kursorem, tagami bursztyn/zielony/czerwony i ciemnymi blokami kodu. Idealny do recenzji CLI/agentów/narzędzi dev (trace, diff, benchmark).",
+    "id": "Template presentasi bergaya terminal gelap dengan latar hitam #0a0c10, grid cyber 56px, vignette CRT, garis pindai, chrome lampu lalu lintas jendela, judul `$ prompt` baris perintah, teks hijau mint #7ed3a4, JetBrains Mono, grafik batang outline, kursor berkedip, tag amber/hijau/merah, dan blok kode gelap. Cocok untuk ulasan CLI/agen/alat dev (trace, diff, benchmark).",
+    "nl": "Donkere terminal-stijl presentatiesjabloon met #0a0c10 zwarte achtergrond, 56px cybergrid, CRT-vignet, scanlijnen, venster-stoplicht chrome, `$ prompt` commandoregel-titels, mintgroen #7ed3a4 tekst, JetBrains Mono, outline-staafdiagrammen, knipperende cursor, amber/groen/rood tags en donkere codeblokken. Ideaal voor CLI/agent/dev-tool reviews (trace, diff, benchmark).",
+    "ar": "قالب عرض تقديمي بنمط الطرفية الداكنة مع خلفية سوداء #0a0c10، شبكة سايبر 56px، إطار CRT، خطوط مسح، chrome إشارة مرور النافذة، عناوين `$ prompt` سطر الأوامر، نص أخضر نعناعي #7ed3a4، JetBrains Mono، رسوم بيانية شريطية بحدود فقط، مؤشر وامض، علامات كهرمان/أخضر/أحمر وكتل كود داكنة. مثالي لمراجعات CLI/الوكلاء/أدوات التطوير (trace، diff، benchmark).",
+    "tr": "Koyu terminal tarzı sunum şablonu; #0a0c10 siyah arka plan, 56px siber ızgara, CRT vinyet, tarama çizgileri, pencere trafik ışığı chrome, `$ prompt` komut satırı başlıkları, nane yeşili #7ed3a4 metin, JetBrains Mono, çizgi çubuk grafikler, yanıp sönen imleç, amber/yeşil/kırmızı etiketler ve koyu kod blokları. CLI/ajan/geliştirme aracı incelemeleri için ideal (trace, diff, benchmark).",
+    "uk": "Шаблон презентації в стилі темного терміналу з чорним фоном #0a0c10, кібер-сіткою 56px, віньєтуванням CRT, скан-лініями, світлофором вікна chrome, заголовками `$ prompt` командного рядка, м'ятно-зеленим #7ed3a4 текстом, JetBrains Mono, контурними стовпчастими діаграмами, миготливим курсором, тегами бурштин/зелений/червоний та темними блоками коду. Підходить для оглядів CLI/агентів/інструментів розробки (trace, diff, benchmark).",
+    "en": "暗终端 honest-review deck — #0a0c10 黑底 + 56px 赛博网格 + CRT 暗角 + 扫描线、窗口红绿灯 chrome、`$ prompt` 命令行标题、薄荷绿 #7ed3a4 大字、JetBrains Mono、stroke-only 柱状图、blinking 光标、琥珀/绿/红三档 tag、暗色代码块。适合 CLI / agent / dev tool 测评（含 trace、diff、benchmark）。"
+  },
+  "license": "MIT",
+  "author": {
+    "name": "Open Design",
+    "url": "https://github.com/nexu-io"
+  },
+  "homepage": "https://github.com/nexu-io/open-design/tree/main/plugins/_official/examples/html-ppt-hermes-cyber-terminal",
+  "tags": [
+    "example",
+    "first-party",
+    "deck",
+    "engineering",
+    "web",
+    "terminal-review",
+    "cli-review",
+    "agent-review",
+    "honest-review",
+    "dev-tool-review",
+    "untitled"
+  ],
+  "compat": {
+    "agentSkills": [
+      {
+        "path": "./SKILL.md"
+      }
+    ]
+  },
+  "od": {
+    "kind": "scenario",
+    "taskKind": "new-generation",
+    "mode": "deck",
+    "scenario": "engineering",
+    "surface": "web",
+    "preview": {
+      "type": "html",
+      "entry": "./example.html"
+    },
+    "useCase": {
+      "query": {
+        "en": "Use the html-ppt-hermes-cyber-terminal template to create a CLI / agent evaluation deck. Use a dark terminal style with scanlines, command-line titles, and benchmark bar charts. First confirm the evaluated objects, 3-5 comparison dimensions, and benchmark data.",
+        "zh-CN": "用 html-ppt-hermes-cyber-terminal 模板做一份 CLI / agent 测评 PPT。深色终端风 + scanlines + 命令行标题 + benchmark 柱状图。先确认：被测评对象、3-5 个对比维度、benchmark 数据。"
+      },
+      "exampleOutputs": [
+        {
+          "path": "./example.html",
+          "title": "Html Ppt Hermes Cyber Terminal"
+        }
+      ]
+    },
+    "context": {
+      "skills": [
+        {
+          "path": "./SKILL.md"
+        }
+      ],
+      "assets": [
+        "./example.html"
+      ]
+    },
+    "pipeline": {
+      "stages": [
+        {
+          "id": "generate",
+          "atoms": [
+            "file-write",
+            "live-artifact"
+          ]
+        }
+      ]
+    },
+    "capabilities": [
+      "prompt:inject",
+      "fs:write"
+    ]
+  }
+}

package/runtime/vendor/plugins/open-design/_official/examples/html-ppt-knowledge-arch-blueprint/SKILL.md ADDED Viewed

@@ -0,0 +1,78 @@
+---
+name: html-ppt-knowledge-arch-blueprint
+description: 奶油蓝图架构 deck — 奶油纸 #F0EAE0 底色 + 单一锈红 #B5392A 高亮、48px 蓝图网格 mask、2px 黑边硬卡片、pipeline 步骤盒（其中一个抬高）、右侧锈红 insight callout、Playfair 衬线大字、SVG 虚线反馈环。零渐变零软阴影，认真且印刷友好。
+triggers:
+  - "architecture"
+  - "blueprint"
+  - "system design"
+  - "架构图"
+  - "data flow"
+  - "engineering whitepaper"
+od:
+  mode: deck
+  scenario: engineering
+  featured: 29
+  upstream: "https://github.com/lewislulu/html-ppt-skill"
+  preview:
+    type: html
+    entry: index.html
+  design_system:
+    requires: false
+  speaker_notes: true
+  animations: true
+  example_prompt: "用 html-ppt-knowledge-arch-blueprint 模板做一份系统架构介绍 PPT。奶油纸底 + 锈红高亮 + 蓝图网格 + pipeline 抬高一格 + 衬线大字。先告诉我系统名 + 5-7 个核心模块 + 数据流方向，再写 8-10 页。"
+---
+# HTML PPT · 奶油蓝图架构
+A focused entry point into the [`html-ppt`](../html-ppt/SKILL.md) master skill that lands the user directly on the **`knowledge-arch-blueprint`** full-deck template.
+## When this card is picked
+The Examples gallery wires "Use this prompt" to the example_prompt above. When you accept that prompt, this card is the right pick if the user wants exactly the visual identity of `knowledge-arch-blueprint` (see the upstream [full-decks catalog](../html-ppt/references/full-decks.md) for screenshots and rationale).
+## How to author the deck
+1. **Read the master skill first.** All authoring rules live in
+   [`skills/html-ppt/SKILL.md`](../html-ppt/SKILL.md) — content/audience checklist,
+   token rules, layout reuse, presenter mode, the keyboard runtime, and the
+   "never put presenter-only text on the slide" rule.
+2. **Start from the matching template folder:**
+   `skills/html-ppt/templates/full-decks/knowledge-arch-blueprint/` — copy `index.html` and
+   `style.css` into the project, keep the `.tpl-knowledge-arch-blueprint` body class.
+3. **Bring the shared runtime with the template.** The upstream
+   `index.html` links the shared CSS/JS via `../../../assets/...` because it
+   sits three folders deep inside `skills/html-ppt/templates/full-decks/`.
+   Once you copy `index.html` into the project, those parent-relative URLs
+   no longer resolve and `base.css`, `animations.css`, and `runtime.js`
+   will 404 — meaning the deck never activates and slide navigation is
+   dead. Pick one of these two recipes per project:
+   - **Recipe A — copy + rewrite (preferred):** copy
+     `skills/html-ppt/assets/fonts.css`, `skills/html-ppt/assets/base.css`,
+     `skills/html-ppt/assets/animations/animations.css`, and
+     `skills/html-ppt/assets/runtime.js` into a project-local
+     `assets/` (with `assets/animations/animations.css`), then rewrite the
+     four `<link>`/`<script>` tags in `index.html` from
+     `../../../assets/...` to the matching project-local paths
+     (`assets/fonts.css`, `assets/base.css`,
+     `assets/animations/animations.css`, `assets/runtime.js`).
+   - **Recipe B — inline:** read the same four files and replace each
+     `<link rel="stylesheet" href="../../../assets/...">` with a
+     `<style>...</style>` containing the file's contents, and the
+     `<script src="../../../assets/runtime.js">` with a
+     `<script>...</script>` containing `runtime.js`. Yields a single
+     self-contained `index.html`.
+   Either way, do not ship the upstream `../../../assets/...` URLs
+   verbatim into a project artifact — they only work in-tree.
+4. **Pick a theme.** Default tokens look fine; if the user wants a different
+   feel, swap in any of the 36 themes from `skills/html-ppt/assets/themes/*.css`
+   via `<link id="theme-link">` and let `T` cycle.
+5. **Replace demo content, not classes.** The `.tpl-knowledge-arch-blueprint` scoped CSS only
+   recognises the structural classes shipped in the template — keep them.
+6. **Speaker notes go inside `<aside class="notes">` or `<div class="notes">`** — never as visible text on the slide.
+## Attribution
+Visual system, layouts, themes and the runtime keyboard model come from
+the upstream MIT-licensed [`lewislulu/html-ppt-skill`](https://github.com/lewislulu/html-ppt-skill). The
+LICENSE file ships at `skills/html-ppt/LICENSE`; please keep it in place when
+redistributing.