| 1 | # Full-Deck Templates |
| 2 | |
| 3 | Self-contained multi-slide HTML decks under `templates/full-decks/<name>/`. Each folder contains: |
| 4 | |
| 5 | - `index.html` — complete multi-slide deck (cover / section / content / code / chart or diagram / CTA / thanks, 7+ slides) |
| 6 | - `style.css` — scoped with `.tpl-<name>` class prefix so multiple templates can coexist |
| 7 | - `README.md` — short rationale, inspiration, and use guidance |
| 8 | |
| 9 | All templates pull the shared `assets/fonts.css`, `assets/base.css`, and `assets/runtime.js` from the skill root. Navigate with `← →` / `space`, use `F` for fullscreen, `O` for overview. |
| 10 | |
| 11 | Use these when you want a coherent, opinionated look for an entire deck — not a mix-and-match of layouts. Each template is visually distinctive enough to be identified at a glance. |
| 12 | |
| 13 | --- |
| 14 | |
| 15 | ## 1. xhs-white-editorial — 白底杂志风 |
| 16 | |
| 17 | - **Source inspiration:** `20260409 升级版知识库/小红书图文/v2-白底版/slide_01_cover.html` + `20260412-AI测试与安全/html/xhs-ai-testing-safety-v2.html` |
| 18 | - **Key visual traits:** pure-white background, top 10-color rainbow bar, 80-110px display headlines, purple→blue→green→orange→pink gradient text, macaron soft-card set (soft-purple/pink/blue/green/orange), black-on-white `.focus` pills, hero quote box. |
| 19 | - **When to use:** dual-purpose XHS image + horizontal deck; dense text with strong emphasis; Chinese-first audience. |
| 20 | - **Path:** `templates/full-decks/xhs-white-editorial/index.html` |
| 21 | |
| 22 | ## 2. graphify-dark-graph — 暗底知识图谱 |
| 23 | |
| 24 | - **Source inspiration:** `20260413-graphify/ppt/graphify.html` |
| 25 | - **Key visual traits:** `#06060c→#0e1020` deep-night gradient, drifting blur orbs, SVG force-directed graph overlay on cover, rainbow-shift gradient headlines, JetBrains Mono command-line glow, glass-morphism cards (warm/blue/green/purple/danger). Accent palette: amber `#e8a87c`, mint `#7ed3a4`, mist-blue `#7eb8da`, lilac `#b8a4d6`. |
| 26 | - **When to use:** dev-tool / CLI / knowledge-graph / data-viz launches; live-demo decks that want an "AI-native + sci-fi + warm" vibe. |
| 27 | - **Path:** `templates/full-decks/graphify-dark-graph/index.html` |
| 28 | |
| 29 | ## 3. knowledge-arch-blueprint — 奶油蓝图架构 |
| 30 | |
| 31 | - **Source inspiration:** `20260405-Karpathy-知识库/20260405 架构图v2.html` |
| 32 | - **Key visual traits:** cream paper `#F0EAE0` base, single rust accent `#B5392A`, 48px blueprint grid mask, hard 2px black border cards, pipeline step-boxes with one hero raised, right-side rust insight callout, Playfair serif big numbers, SVG dashed feedback-loop arrows. Zero gradients, zero soft shadows. |
| 33 | - **When to use:** system architecture diagrams, data-flow maps, engineering white-papers; you want a serious, printable, README-friendly feel. |
| 34 | - **Path:** `templates/full-decks/knowledge-arch-blueprint/index.html` |
| 35 | |
| 36 | ## 4. hermes-cyber-terminal — 暗终端 honest-review |
| 37 | |
| 38 | - **Source inspiration:** `20260414-hermes-agent/ppt/hermes-record.html` + `hermes-vs-openclaw.html` |
| 39 | - **Key visual traits:** `#0a0c10` black, 56px cyber grid + CRT vignette + scanlines, window traffic-light chrome, `$ prompt` command-line headlines, mint-green `#7ed3a4` glow big text, JetBrains Mono throughout, stroke-only bar charts, blinking cursor, amber/green/red tag hierarchy, dark code box. |
| 40 | - **When to use:** reviews of CLI / agent / dev tools with trace, diff, and benchmarks; when you want the "honest technical reviewer" voice. |
| 41 | - **Path:** `templates/full-decks/hermes-cyber-terminal/index.html` |
| 42 | |
| 43 | ## 5. obsidian-claude-gradient — GitHub 暗紫渐变 |
| 44 | |
| 45 | - **Source inspiration:** `20260406-obsidian-claude/slides.html` |
| 46 | - **Key visual traits:** GitHub-dark `#0d1117`, purple+blue radial ambient plus 60px masked grid, center-aligned layout, purple pill tags, three-stop gradient text `#a855f7→#60a5fa→#34d399`, GitHub-ish code palette (`#010409` bg + purple/blue/orange/green tokens), purple-left-border highlight block. |
| 47 | - **When to use:** developer workflow / MCP / Agent / dev-tool tutorials; feels like GitHub Blog / Linear Changelog; config + steps heavy content. |
| 48 | - **Path:** `templates/full-decks/obsidian-claude-gradient/index.html` |
| 49 | |
| 50 | ## 6. testing-safety-alert — 红琥珀警示 |
| 51 | |
| 52 | - **Source inspiration:** `20260412-AI测试与安全/html/xhs-ai-testing-safety-v2.html` |
| 53 | - **Key visual traits:** top and bottom 45° red-black hazard stripes, red strike-through negation headlines, L1/L2/L3 green/amber/red tier cards, alert-box with circular status dot, policy-yaml code block with red left border and `bad` keyword highlighting, red/green checklist, Q1 incident stacked bar chart. |
| 54 | - **When to use:** safety / risk / incident post-mortem / red-team / pre-launch AI review / policy-as-code; when the audience needs to feel "this is serious, don't skim". |
| 55 | - **Path:** `templates/full-decks/testing-safety-alert/index.html` |
| 56 | |
| 57 | ## 7. xhs-pastel-card — 柔和马卡龙慢生活 |
| 58 | |
| 59 | - **Source inspiration:** `20260412-obsidian-skills/html/xhs-obsidian-skills.html` + pastel patterns shared with `20260409` v2-白底版 |
| 60 | - **Key visual traits:** cream `#fef8f1` base, three soft blurred blobs, Playfair italic serif display headlines mixed with sans body, full-color 28px rounded macaron cards (peach / mint / sky / lilac / lemon / rose), italic Playfair `01-04` numerals, SVG donut chart, chip+page topbar. |
| 61 | - **When to use:** lifestyle / personal-growth / slow-living / emotional content; when you want a "magazine, handmade, not-so-techy" feel; themes like rest, pause, softness. |
| 62 | - **Path:** `templates/full-decks/xhs-pastel-card/index.html` |
| 63 | |
| 64 | ## 8. dir-key-nav-minimal — 方向键 8 色极简 |
| 65 | |
| 66 | - **Source inspiration:** `20260405-Karpathy-知识库/20260405 演示幻灯片【方向键版】.html` |
| 67 | - **Key visual traits:** 8 slides each on its own mono background (indigo / cream / crimson / emerald / slate / violet / white / charcoal), each with its own accent color, 160px display headline + 4px stubby accent line divider, arrow `→` prefixed Mono list, bottom-left `← →` kbd hint plus bottom-right page label, huge breathing negative space. |
| 68 | - **When to use:** keynote-style minimalist talk where you have something to say and not much to show; one idea per slide; talks / launches / public presentations. |
| 69 | - **Path:** `templates/full-decks/dir-key-nav-minimal/index.html` |
| 70 | |
| 71 | --- |
| 72 | |
| 73 | ## Scenario decks (generic, reusable) |
| 74 | |
| 75 | These are not extracted from a single source — they are generic scaffolds for the most common presentation jobs. Each is visually distinctive and content-rich out of the box. |
| 76 | |
| 77 | | # | Name | Slides | Feel | When to use | |
| 78 | |---|---|---|---|---| |
| 79 | | 9 | `pitch-deck` | 10 | White + blue→purple gradient, YC/VC vibe, big numbers, traction chart | Fundraising, startup pitch, investor meeting | |
| 80 | | 10 | `product-launch` | 8 | Dark hero + light content, warm orange→peach, feature cards, pricing tiers, CTA | Announcing a product, launch keynote | |
| 81 | | 11 | `tech-sharing` | 8 | GitHub-dark, JetBrains Mono, terminal code blocks, agenda + Q&A | 技术分享, internal tech talk, conference talk | |
| 82 | | 12 | `weekly-report` | 7 | Corporate clarity, 8-cell KPI grid, shipped list, 8-week bar chart, next-week table | 周报, team status update, business review | |
| 83 | | 13 | `xhs-post` | 9 | **3:4 @ 810×1080**, warm pastel, dashed sticker cards, page dots | 小红书 图文 post, Instagram carousel | |
| 84 | | 14 | `course-module` | 7 | Warm paper + Playfair serif, persistent left sidebar of learning objectives, MCQ self-check | 教学模块, online course, workshop module | |
| 85 | | 15 | `presenter-mode-reveal` 🎤 | 6 | **演讲者模式专用** · tokyo-night 默认 · 5 主题 T 键切换 · 每页带 150–300 字逐字稿示例 | **技术分享/演讲/课程**—需要按 S 键看逐字稿的场景 ✨ | |
| 86 | |
| 87 | Each folder: `index.html`, scoped `style.css` (prefixed `.tpl-<name>`), `README.md`. The `xhs-post` template overrides the default `.slide` box to fixed `810×1080` for 3:4 portrait. |
| 88 | |
| 89 | > 🎤 **任何演讲场景（技术分享 / 课程 / 路演）都推荐用 `presenter-mode-reveal`**，或者参考 [presenter-mode.md](./presenter-mode.md) 指南给其他模板加 `<aside class="notes">` 逐字稿。 |
| 90 | |
| 91 | --- |
| 92 | |
| 93 | ## Authoring notes |
| 94 | |
| 95 | - Every template scopes its CSS under `.tpl-<name>` so two or more templates can load on the same page without collisions. |
| 96 | - Swap demo content, but keep the structural classes — they are what gives each template its identity. |
| 97 | - The shared runtime (`assets/runtime.js`) provides keyboard nav, fullscreen, overview grid, theme cycling — you don't need to add any JS. |
| 98 | - Charts are hand-rolled SVG (no CDN dependency). Feel free to replace with chart.js / echarts if you need interactive data. |
| 99 |