diff --git a/.clawscan-allow b/.clawscan-allow
deleted file mode 100644
index 4c90d10..0000000
--- a/.clawscan-allow
+++ /dev/null
@@ -1,12 +0,0 @@
-# Security scan allowlist for html-ppt-skill
-# These patterns are false positives from template content, not actual threats.
-
-# Path traversal: templates reference shared assets via relative paths
-# e.g. templates/full-decks/weekly-report/ → ../../../assets/
-# This is the correct relative path to the skill root assets directory.
-traversal:templates/full-decks/*/index.html
-
-# Destructive commands: testing-safety-alert template displays forbidden
-# commands as text examples in a security policy demo slide.
-# They are HTML content, not executable code.
-destructive:templates/full-decks/testing-safety-alert/index.html
diff --git a/README.md b/README.md
index fe3b522..bb6fc9f 100644
--- a/README.md
+++ b/README.md
@@ -1,234 +1,111 @@
-# html-ppt — HTML PPT Studio
+# html-ppt — 让你的 Agent 做出专业级 PPT
 
-> A world-class AgentSkill for producing professional HTML presentations in
-> **36 themes**, **15 full-deck templates**, **31 page layouts**,
-> **47 animations** (27 CSS + 20 canvas FX), and a **true presenter mode**
-> with pixel-perfect previews + speaker script + timer — all pure static
-> HTML/CSS/JS, no build step.
+> 一行命令安装，agent 立刻拥有 36 主题 × 15 模板 × 31 布局 × 47 动效的完整设计系统。
+> 纯静态 HTML/CSS/JS，零构建，零依赖。内置演讲者模式 + 逐字稿提词器。
 
-**Author:** lewis <sudolewis@gmail.com>
-**License:** MIT
-**中文文档:** [README.zh-CN.md](README.zh-CN.md)
+**Hermes Agent** · **Claude Code** · **Codex** · MIT License
 
-![html-ppt — cover with live previews](docs/readme/hero.gif)
+![tech-sharing cover](showcase/tech-sharing-cover.png)
 
-> One command installs **36 themes × 20 canvas FX × 31 layouts × 15 full decks + presenter mode**. Every preview above is a live iframe of a real template file rendering inside the deck — no screenshots, no mock-ups.
+## 你什么时候需要它？
 
-## 🎤 Presenter Mode (new!)
+| 你说 | agent 做什么 |
+|------|-------------|
+| "做一份 8 页技术分享 slides" | 从 `tech-sharing` 模板组装，`tokyo-night` 主题 |
+| "做一个小红书图文，9 张" | `xhs-post` 模板，3:4 比例，`xiaohongshu-white` 主题 |
+| "我要做产品发布会 PPT" | `product-launch` 模板，`glassmorphism` 主题 |
+| "做一份带逐字稿的演讲" | `presenter-mode-reveal` 模板，每页 150-300 字口语化逐字稿 |
+| "把这段 outline 变成投资人 pitch deck" | `pitch-deck` 模板，`pitch-deck-vc` 主题 |
+| "做一份周报" | `weekly-report` 模板，KPI 网格 + 图表 |
 
-Press `S` on any deck to pop open a dedicated presenter window with four
-draggable, resizable **magnetic cards**: current slide, next slide preview,
-speaker script (逐字稿), and timer. Two windows stay in sync via
-`BroadcastChannel`.
-
-![Presenter mode with 4 magnetic cards](docs/readme/presenter-mode.png)
-
-**Why previews are pixel-perfect:** each card is an `<iframe>` that loads the
-same deck HTML with a `?preview=N` query param. The runtime detects this and
-renders only slide N with no chrome — so the preview uses the **same CSS,
-theme, fonts and viewport** as the audience view. Colors and layout are
-guaranteed identical.
-
-**Smooth (no-reload) navigation:** on slide change, the presenter window
-sends `postMessage({type:'preview-goto', idx:N})` to each iframe. The iframe
-just toggles `.is-active` between slides — **no reload, no flicker**.
-
-**Speaker script rules (3 golden):**
-1. **Prompt signals, not lines to read** — bold the keywords, separate
-   transition sentences into their own paragraphs
-2. **150–300 words per slide** — that's the ~2–3 min/page pace
-3. **Write it like you speak** — conversational, not written prose
-
-See [`references/presenter-mode.md`](references/presenter-mode.md) for the
-full authoring guide, or copy the ready-made template at
-`templates/full-decks/presenter-mode-reveal/` which ships with full 150-300
-word speaker scripts on every slide.
-
-## Install (one command)
+## 安装
 
 ```bash
-npx skills add https://github.com/lewislulu/html-ppt-skill
-```
-
-That registers the skill with your agent runtime. After install, any agent
-that supports AgentSkills can author presentations by asking things like:
-
-> "做一份 8 页的技术分享 slides，用 cyberpunk 主题"
-> "turn this outline into a pitch deck"
-> "做一个小红书图文，9 张，白底柔和风"
-
-## What's in the box
-
-| | Count | Where |
-|---|---|---|
-| 🎤 **Presenter mode** | **NEW** | `S` key / `?preview=N` |
-| 🎨 **Themes** | **36** | `assets/themes/*.css` |
-| 📑 **Full-deck templates** | **15** | `templates/full-decks/<name>/` |
-| 🧩 **Single-page layouts** | **31** | `templates/single-page/*.html` |
-| ✨ **CSS animations** | **27** | `assets/animations/animations.css` |
-| 💥 **Canvas FX animations** | **20** | `assets/animations/fx/*.js` |
-| 🖼️ **Showcase decks** | 4 | `templates/*-showcase.html` |
-| 📸 **Verification screenshots** | 56 | `scripts/verify-output/` |
-
-### 36 Themes
-
-`minimal-white`, `editorial-serif`, `soft-pastel`, `sharp-mono`, `arctic-cool`,
-`sunset-warm`, `catppuccin-latte`, `catppuccin-mocha`, `dracula`, `tokyo-night`,
-`nord`, `solarized-light`, `gruvbox-dark`, `rose-pine`, `neo-brutalism`,
-`glassmorphism`, `bauhaus`, `swiss-grid`, `terminal-green`, `xiaohongshu-white`,
-`rainbow-gradient`, `aurora`, `blueprint`, `memphis-pop`, `cyberpunk-neon`,
-`y2k-chrome`, `retro-tv`, `japanese-minimal`, `vaporwave`, `midcentury`,
-`corporate-clean`, `academic-paper`, `news-broadcast`, `pitch-deck-vc`,
-`magazine-bold`, `engineering-whiteprint`.
+# Hermes Agent
+hermes skills install https://github.com/lewislulu/html-ppt-skill
 
-![36 themes · 8 of them](docs/readme/themes.png)
-
-Each is a pure CSS-tokens file — swap one `<link>` to reskin the entire deck.
-Browse them all in `templates/theme-showcase.html` (each slide rendered in an
-isolated iframe so theme ≠ theme is visually guaranteed).
-
-![14 full-deck templates](docs/readme/templates.png)
-
-### 15 Full-deck templates
-
-Eight extracted from real-world decks, seven generic scenario scaffolds:
+# Claude Code / Codex
+npx skills install https://github.com/lewislulu/html-ppt-skill
+```
 
-**Extracted looks**
-- `xhs-white-editorial` — 小红书白底杂志风
-- `graphify-dark-graph` — 暗底 + 力导向知识图谱
-- `knowledge-arch-blueprint` — 蓝图 / 架构图风
-- `hermes-cyber-terminal` — 终端 cyberpunk
-- `obsidian-claude-gradient` — 紫色渐变卡
-- `testing-safety-alert` — 红 / 琥珀警示风
-- `xhs-pastel-card` — 柔和马卡龙图文
-- `dir-key-nav-minimal` — 方向键极简
+**装完直接试：**
 
-**Scenario decks**
-- `pitch-deck`, `product-launch`, `tech-sharing`, `weekly-report`,
-  `xhs-post` (9-slide 3:4), `course-module`,
-  **`presenter-mode-reveal`** 🎤 — complete talk template with full 150-300
-  word speaker scripts on every slide, designed around the `S` key presenter mode
+> "做一份 6 页技术分享 slides，用 tokyo-night 主题"
 
-Each is a self-contained folder with scoped `.tpl-<name>` CSS so multiple
-decks can be previewed side-by-side without collisions. Browse the full
-gallery in `templates/full-decks-index.html`.
+Agent 会自动读取 SKILL.md，组装模板，生成完整 HTML + PNG。
 
-![31 single-page layouts](docs/readme/layouts.png)
+## 它会交付什么？
 
-### 31 Single-page layouts
+| 产物 | 说明 |
+|------|------|
+| `index.html` | 完整多页 HTML 演示文稿，支持键盘导航 |
+| PNG 截图 | `render.sh` 导出 1920×1080 PNG |
+| 演讲者视图 | 按 `S` 弹出，4 个可拖拽磁吸卡片（当前页/下一页/逐字稿/计时器） |
+| 主题切换 | 按 `T` 循环 36 个主题，实时预览 |
 
-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
+![KPI Grid layout](showcase/kpi-grid.png)
 
-Every layout ships with realistic demo data so you can drop it into a deck
-and immediately see it render.
+## 核心资产
 
-![31 layouts auto-cycling through real template files](docs/readme/layouts-live.gif)
+| | 数量 | 说明 |
+|---|------|------|
+| 🎨 主题 | **36** | 极简白 / 赛博霓虹 / 小红书暖白 / 学术论文 / 投资路演... |
+| 📑 完整模板 | **15** | 8 个真实提炼 + 7 个场景脚手架 |
+| 🧩 单页布局 | **31** | 封面 / 目录 / KPI / 图表 / 代码 / 流程图 / 时间线 / 甘特图... |
+| ✨ CSS 动画 | **27** | 淡入 / 打字机 / 霓虹光晕 / 3D 翻转... |
+| 💥 Canvas FX | **20** | 粒子爆发 / 烟花 / 代码雨 / 力导向知识图谱 / 神经网络... |
+| 🎤 演讲者模式 | **1** | S 键弹出，BroadcastChannel 双向同步 |
 
-*The big iframe is loading `templates/single-page/<name>.html` directly and cycling through all 31 layouts every 2.8 seconds.*
+## 触发词
 
-![47 animations — 27 CSS + 20 canvas FX](docs/readme/animations.png)
+Agent 识别以下关键词时自动加载本 skill：
 
-### 27 CSS animations + 20 Canvas FX
+`presentation` · `ppt` · `slides` · `deck` · `幻灯片` · `演讲稿` · `做一份 PPT` · `做一份 slides` · `小红书图文` · `pitch deck` · `tech sharing` · `speaker notes` · `逐字稿` · `演讲者视图`
 
-**CSS (lightweight)** — directional fades, `rise-in`, `zoom-pop`, `blur-in`,
-`glitch-in`, `typewriter`, `neon-glow`, `shimmer-sweep`, `gradient-flow`,
-`stagger-list`, `counter-up`, `path-draw`, `morph-shape`, `parallax-tilt`,
-`card-flip-3d`, `cube-rotate-3d`, `page-turn-3d`, `perspective-zoom`,
-`marquee-scroll`, `kenburns`, `ripple-reveal`, `spotlight`, …
+## 与同类的区别
 
-**Canvas FX (cinematic)** — `particle-burst`, `confetti-cannon`, `firework`,
-`starfield`, `matrix-rain`, `knowledge-graph` (force-directed physics),
-`neural-net` (signal pulses), `constellation`, `orbit-ring`, `galaxy-swirl`,
-`word-cascade`, `letter-explode`, `chain-react`, `magnetic-field`,
-`data-stream`, `gradient-blob`, `sparkle-trail`, `shockwave`,
-`typewriter-multi`, `counter-explosion`. Each is a real hand-rolled canvas
-module auto-initialised on slide enter via `fx-runtime.js`.
+| | html-ppt-skill | reveal.js | slidev | Marp |
+|---|---|---|---|---|
+| Agent-native | ✅ SKILL.md 直接驱动 | ❌ 需 build | ❌ 需 build | ❌ 需 build |
+| 零依赖 | ✅ 纯静态 | ❌ npm | ❌ npm | ❌ npm |
+| 主题数量 | 36 | ~10 | ~5 | ~3 |
+| 模板数量 | 15 | 0 | 0 | 0 |
+| 演讲者模式 | ✅ S 键磁吸卡片 | ✅ | ✅ | ❌ |
+| 逐字稿 | ✅ 每页 150-300 字 | ❌ | ❌ | ❌ |
+| PNG 导出 | ✅ render.sh | ❌ 需额外 | ❌ 需额外 | ✅ |
 
-## Quick start (manual, after install or git clone)
+## 安全边界
 
-```bash
-# Scaffold a new deck from the base template
-./scripts/new-deck.sh my-talk
-
-# Browse everything
-open templates/theme-showcase.html         # all 36 themes (iframe-isolated)
-open templates/layout-showcase.html        # all 31 layouts
-open templates/animation-showcase.html     # all 47 animations
-open templates/full-decks-index.html       # all 14 full decks
-
-# Render any template to PNG via headless Chrome
-./scripts/render.sh templates/theme-showcase.html
-./scripts/render.sh examples/my-talk/index.html 12
-```
+- 纯静态文件，不执行任何外部 API 调用
+- 不修改系统配置，不安装全局依赖
+- 所有资源本地化（CDN 仅用于可选的 Google Fonts）
+- `render.sh` 仅调用本地 Chrome，不上传任何数据
 
-## Keyboard cheat sheet
-
-```
-← → Space PgUp PgDn Home End   navigate
-F                               fullscreen
-S                               open presenter window (magnetic cards)
-N                               quick notes drawer (bottom)
-R                               reset timer (in presenter window)
-O                               slide overview grid
-T                               cycle themes (syncs to presenter)
-A                               cycle a demo animation on current slide
-#/N (URL)                       deep-link to slide N
-?preview=N (URL)                preview-only mode (single slide, no chrome)
-```
-
-## Project structure
+## 文件结构
 
 ```
 html-ppt-skill/
-├── SKILL.md                      agent-facing dispatcher
-├── README.md                     this file
-├── references/                   detailed catalogs
-│   ├── themes.md                 36 themes with when-to-use
-│   ├── layouts.md                31 layout types
-│   ├── animations.md             27 CSS + 20 FX catalog
-│   ├── full-decks.md             14 full-deck templates
-│   └── authoring-guide.md        full workflow
+├── SKILL.md              agent 入口（459 行，7 CHECKPOINT，23 失败模式）
+├── README.md             本文件
+├── README.zh-CN.md       中文说明
+├── LICENSE               MIT
+├── test-prompts.json     5 个标准化测试 prompt
+├── references/           6 个参考文档
 ├── assets/
-│   ├── base.css                  shared tokens + primitives
-│   ├── fonts.css                 webfont imports
-│   ├── runtime.js                keyboard + presenter + overview
-│   ├── themes/*.css              36 theme token files
-│   └── animations/
-│       ├── animations.css        27 named CSS animations
-│       ├── fx-runtime.js         auto-init [data-fx] on slide enter
-│       └── fx/*.js               20 canvas FX modules
+│   ├── base.css          设计系统 tokens
+│   ├── runtime.js        键盘导航 + 演讲者模式
+│   ├── themes/*.css      36 个主题
+│   └── animations/       27 CSS + 20 Canvas FX
 ├── templates/
-│   ├── deck.html                 minimal starter
-│   ├── theme-showcase.html       iframe-isolated theme tour
-│   ├── layout-showcase.html      all 31 layouts
-│   ├── animation-showcase.html   47 animation slides
-│   ├── full-decks-index.html     14-deck gallery
-│   ├── full-decks/<name>/        14 scoped multi-slide decks
-│   └── single-page/*.html        31 layout files with demo data
+│   ├── full-decks/       15 个完整 deck 模板
+│   └── single-page/      31 个单页布局
 ├── scripts/
-│   ├── new-deck.sh               scaffold
-│   ├── render.sh                 headless Chrome → PNG
-│   └── verify-output/            56 self-test screenshots
-└── examples/demo-deck/           complete working deck
+│   ├── new-deck.sh       脚手架
+│   └── render.sh         PNG 导出（跨平台）
+├── showcase/             展示截图
+└── examples/demo-deck/   完整示例 deck
 ```
 
-## Philosophy
-
-- **Token-driven design system.** All color, radius, shadow, font decisions
-  live in `assets/base.css` + the current theme file. Change one variable,
-  the whole deck reflows tastefully.
-- **Iframe isolation for previews.** Theme / layout / full-deck showcases all
-  use `<iframe>` per slide so each preview is a real, independent render.
-- **Zero build.** Pure static HTML/CSS/JS. CDN only for webfonts, highlight.js
-  and chart.js (optional).
-- **Senior-designer defaults.** Opinionated type scale, spacing rhythm,
-  gradients and card treatments — no "Corporate PowerPoint 2006" vibes.
-- **Chinese + English first-class.** Noto Sans SC / Noto Serif SC pre-imported.
-
 ## License
 
-MIT © 2026 lewis &lt;sudolewis@gmail.com&gt;.
+MIT © 2026 lewis &lt;sudolewis@gmail.com&gt;
diff --git a/README.zh-CN.md b/README.zh-CN.md
index a41c787..e5b8b61 100644
--- a/README.zh-CN.md
+++ b/README.zh-CN.md
@@ -43,10 +43,14 @@ idx:N})` 通知 iframe，iframe 只是切换 `.is-active` class —— **不重
 ## 一行命令安装
 
 ```bash
+# Hermes Agent
+hermes skills install https://github.com/lewislulu/html-ppt-skill
+
+# Claude Code / Codex
 npx skills add https://github.com/lewislulu/html-ppt-skill
 ```
 
-装好后，任何支持 AgentSkill 的 agent（Claude Code / Codex / Cursor / OpenClaw 等）
+装好后，任何支持 AgentSkill 的 agent（Hermes Agent / Claude Code / Codex / Cursor 等）
 都能用这套能力做 PPT。对 agent 说：
 
 > "做一份 8 页的技术分享 slides，用 cyberpunk 主题"
@@ -157,7 +161,8 @@ chart-pie · chart-radar · arch-diagram · process-steps · cta · thanks
 # 从 base 模板新建一个 deck
 ./scripts/new-deck.sh my-talk
 
-# 浏览所有内容
+# 浏览所有内容（在浏览器中打开）
+# macOS: open, Windows: start, Linux: xdg-open
 open templates/theme-showcase.html         # 全部 36 主题（iframe 隔离）
 open templates/layout-showcase.html        # 全部 31 布局
 open templates/animation-showcase.html     # 全部 47 动效
diff --git a/SKILL.md b/SKILL.md
index 0250b9a..0e6450b 100644
--- a/SKILL.md
+++ b/SKILL.md
@@ -1,5 +1,9 @@
 ---
 name: html-ppt
+version: 1.0.0
+author: lewis <sudolewis@gmail.com>
+license: MIT
+platforms: [linux, macos, windows]
 description: HTML PPT Studio — author professional static HTML presentations in many styles, layouts, and animations, all driven by templates. Use when the user asks for a presentation, PPT, slides, keynote, deck, slideshow, "幻灯片", "演讲稿", "做一份 PPT", "做一份 slides", a reveal-style HTML deck, a 小红书 图文, or any kind of multi-slide pitch/report/sharing document that should look tasteful and be usable with keyboard navigation. Triggers include keywords like "presentation", "ppt", "slides", "deck", "keynote", "reveal", "slideshow", "幻灯片", "演讲稿", "分享稿", "小红书图文", "talk slides", "pitch deck", "tech sharing", "technical presentation".
 ---
 
@@ -9,9 +13,39 @@ Author professional HTML presentations as static files. One theme file = one
 look. One layout file = one page type. One animation class = one entry effect.
 All pages share a token-based design system in `assets/base.css`.
 
+```
+User request → Agent reads SKILL.md
+  │
+  ├─ 1. Ask 3 questions (content/theme/template)
+  │     └─ 🔴 CHECKPOINT: all answered
+  │
+  ├─ 2. Scaffold: bash scripts/new-deck.sh <name>
+  │     └─ creates examples/<name>/index.html with paths rewritten
+  │
+  ├─ 3. Build outline: add/remove <section class="slide">
+  │     └─ 🔴 CHECKPOINT: slide count matches request
+  │
+  ├─ 4. Fill layouts: copy from templates/single-page/*.html
+  │     └─ replace demo data with real content
+  │
+  ├─ 5. Add animations: data-anim="fade-up" (max 1-2/slide)
+  │
+  ├─ 6. Add notes: <div class="notes"> per slide
+  │
+  ├─ 7. Review: O (overview) / T (themes) / S (notes)
+  │     └─ 🔴 CHECKPOINT: all clean
+  │
+  └─ 8. Export: bash scripts/render.sh <file> <N>
+        └─ PNG files at 1920×1080
+```
+
 ## Install
 
 ```bash
+# Hermes Agent
+hermes skills install https://github.com/lewislulu/html-ppt-skill
+
+# Claude Code / Codex
 npx skills add https://github.com/lewislulu/html-ppt-skill
 ```
 
@@ -62,8 +96,8 @@ Keyboard in audience window: `S` open presenter · `T` cycle theme · `← →`
 
 ## Before you author anything — ALWAYS ask or recommend
 
-**Do not start writing slides until you understand three things.** Either ask
-the user directly, or — if they already handed you rich content — propose a
+🔴 **CHECKPOINT: Do not start writing slides until you understand three things.**
+Either ask the user directly, or — if they already handed you rich content — propose a
 tasteful default and confirm.
 
 1. **Content & audience.** What's the deck about, how many slides, who's
@@ -78,7 +112,7 @@ tasteful default and confirm.
    - Academic / report → `academic-paper`, `editorial-serif`, `minimal-white`
    - Edgy / cyber / launch → `cyberpunk-neon`, `vaporwave`, `y2k-chrome`,
      `neo-brutalism`
-3. **Starting point.** One of the 14 full-deck templates, or scratch? Point
+3. **Starting point.** One of the 15 full-deck templates, or scratch? Point
    to the closest `templates/full-decks/<name>/` and ask if it fits. If the
    user's content suggests something obvious (e.g. "我要做产品发布会" →
    `product-launch`), propose it confidently instead of asking blindly.
@@ -90,37 +124,139 @@ A good opening message looks like:
 > 2. 风格偏好？我建议从这 3 个主题里选一个：`tokyo-night`（技术分享默认好看）、`xiaohongshu-white`（小红书风）、`corporate-clean`（正式汇报）。
 > 3. 要不要用我现成的 `tech-sharing` 全 deck 模板打底？
 
-Only after those are clear, scaffold the deck and start writing.
+🔴 **CHECKPOINT: All 3 items answered → proceed. If user says "你自己定" → pick defaults and confirm once.**
+
+## Authoring Workflow (step-by-step)
+
+Follow these steps in order. Each step has a clear input → action → output.
+
+| Step | Input | Action | Output |
+|------|-------|--------|--------|
+| 1. Scaffold | Deck name | `bash scripts/new-deck.sh <name>` | `examples/<name>/index.html` |
+| 2. Set theme | User's tone/audience | Change `<link id="theme-link" href="...">` | Correct theme CSS loaded |
+| 3. Build outline | Content + page count | Add/remove `<section class="slide">` blocks | Right number of slides |
+
+🔴 **CHECKPOINT: Outline complete → verify slide count matches user request before filling content.**
+
+| 4. Fill layouts | Outline structure | Copy from `templates/single-page/*.html`, replace demo data | Real content in each slide |
+| 5. Add animations | Visual rhythm | `data-anim="fade-up"` on hero elements, max 1-2 per slide | Entry effects |
+| 6. Add notes | Speaker needs | `<div class="notes">…</div>` per slide | S-key presenter notes |
+| 7. Review | Completed deck | Open in browser, press O/T/S to verify | No layout clipping |
+
+🔴 **CHECKPOINT: Review checklist — press O (overview grid), T (cycle 3 themes), S (verify notes). All clean → export.**
+
+| 8. Export | Reviewed deck | `bash scripts/render.sh <file> <N>` | PNG files |
+
+**Decision branches at each step:**
+
+| If user says... | Then... |
+|-----------------|---------|
+| "你自己定" / "随便" | Pick `corporate-clean` theme + `tech-sharing` template, confirm once |
+| "小红书图文" | Use `xhs-post` template (fixed 810×1080), `xiaohongshu-white` theme |
+| "带演讲者模式" / "有逐字稿" | Use `presenter-mode-reveal` template, write 150-300 words per `<aside class="notes">` |
+| "暗色/深色" | Choose from: `tokyo-night`, `dracula`, `catppuccin-mocha`, `gruvbox-dark`, `cyberpunk-neon` |
+| "简洁/极简" | Choose from: `minimal-white`, `arctic-cool`, `swiss-grid`, `editorial-serif` |
+| "炫酷/科技感" | Choose from: `cyberpunk-neon`, `vaporwave`, `y2k-chrome`, `aurora`, `glassmorphism` |
+| "要导出图片/PNG" | After building, run `render.sh` with slide count |
+| "不需要动画" | Skip Step 5, remove all `data-anim` attributes |
 
 ## Quick start
 
-1. **Scaffold a new deck.** From the repo root:
-   ```bash
-   ./scripts/new-deck.sh my-talk
-   open examples/my-talk/index.html
-   ```
-2. **Pick a theme.** Open the deck and press `T` to cycle. Or hard-code it:
-   ```html
-   <link rel="stylesheet" id="theme-link" href="../assets/themes/aurora.css">
-   ```
-   Catalog in [references/themes.md](references/themes.md).
-3. **Pick layouts.** Copy `<section class="slide">...</section>` blocks out of
-   files in `templates/single-page/` into your deck. Replace the demo data.
-   Catalog in [references/layouts.md](references/layouts.md).
-4. **Add animations.** Put `data-anim="fade-up"` (or `class="anim-fade-up"`) on
-   any element. On `<ul>`/grids, use `anim-stagger-list` for sequenced reveals.
-   For canvas FX, use `<div data-fx="knowledge-graph">...</div>` and include
-   `<script src="../assets/animations/fx-runtime.js"></script>`.
-   Catalog in [references/animations.md](references/animations.md).
-5. **Use a full-deck template.** Copy `templates/full-decks/<name>/` into
-   `examples/my-talk/` as a starting point. Each folder is self-contained with
-   scoped CSS. Catalog in [references/full-decks.md](references/full-decks.md)
-   and gallery at `templates/full-decks-index.html`.
-6. **Render to PNG.**
-   ```bash
-   ./scripts/render.sh templates/theme-showcase.html       # one shot
-   ./scripts/render.sh examples/my-talk/index.html 12      # 12 slides
-   ```
+**Agent workflow — copy-paste these commands in order:**
+
+```bash
+# Step 1: scaffold (from skill root)
+SKILL_DIR="$(dirname "$(readlink -f "$0")")"  # or hardcode the path
+bash "$SKILL_DIR/scripts/new-deck.sh my-talk"
+
+# Step 2: verify scaffold created correctly
+grep -c '../../assets/' "$SKILL_DIR/examples/my-talk/index.html"
+# Expected: 6 (fonts, base, theme, animations, theme-base, runtime)
+
+# Step 3: render to PNG (single page)
+bash "$SKILL_DIR/scripts/render.sh" "$SKILL_DIR/examples/my-talk/index.html" 1
+
+# Step 4: render all slides
+bash "$SKILL_DIR/scripts/render.sh" "$SKILL_DIR/examples/my-talk/index.html" 6
+```
+
+**When composing a deck, the HTML for each slide looks like this:**
+
+```html
+<section class="slide" data-title="Your Title">
+  <p class="kicker">Section Label</p>
+  <h2 class="h2 anim-fade-up" data-anim="fade-up">Slide Title</h2>
+  <div class="grid g3 mt-l anim-stagger-list" data-anim-target>
+    <div class="card"><h4>Point 1</h4><p class="dim">Details...</p></div>
+    <div class="card"><h4>Point 2</h4><p class="dim">Details...</p></div>
+    <div class="card"><h4>Point 3</h4><p class="dim">Details...</p></div>
+  </div>
+  <div class="notes">Speaker notes here (150-300 words).</div>
+</section>
+```
+
+**Available layout classes:**
+- `.grid.g2` / `.grid.g3` / `.grid.g4` — 2/3/4 column grid
+- `.card` / `.card-soft` / `.card-outline` / `.card-accent` — card styles
+- `.center` / `.tc` — center slide content
+- `.kicker` / `.eyebrow` — small label above title
+- `.lede` — subtitle text below title
+- `.dim` / `.dim2` — muted text
+- `.gradient-text` — rainbow gradient on text
+- `.mt-s` / `.mt-m` / `.mt-l` — margin-top spacing
+
+## End-to-End Example: "做一份 6 页技术分享"
+
+This is a complete walkthrough showing exactly what the agent produces at each step.
+
+**Step 1 — User says:** "做一份 6 页技术分享，用 tokyo-night 主题"
+
+**Step 2 — Scaffold:**
+```bash
+SKILL_DIR="<skill-root>"
+bash "$SKILL_DIR/scripts/new-deck.sh tech-share"
+# Output: ✔ created examples/tech-share/index.html
+```
+
+**Step 3 — Set theme (edit index.html line 8):**
+```html
+<link rel="stylesheet" id="theme-link" href="../../assets/themes/tokyo-night.css">
+```
+
+**Step 4 — Build 6 slides** (replace the 6 default `<section class="slide">` blocks):
+```html
+<!-- Slide 1: Cover -->
+<section class="slide center tc" data-title="Cover">
+  <p class="kicker">TECH SHARING · 2026</p>
+  <h1 class="h1 anim-rise-in" data-anim="rise-in">系统架构升级<br><span class="dim">从单体到微服务</span></h1>
+  <p class="lede">张三 · 2026-06-21</p>
+  <div class="notes">
+    <p>大家好！今天分享我们团队<strong>过去三个月</strong>做的架构升级。</p>
+    <p>先说背景——去年底我们遇到了<strong>三个核心问题</strong>：延迟高、成本炸、稳定性差。</p>
+  </div>
+</section>
+
+<!-- Slide 2: Agenda -->
+<section class="slide" data-title="Agenda">
+  <p class="kicker">Agenda</p>
+  <h2 class="h2">今天讲三件事</h2>
+  <div class="grid g3 mt-l anim-stagger-list" data-anim-target>
+    <div class="card"><h4>01 · 问题</h4><p class="dim">现状与痛点</p></div>
+    <div class="card"><h4>02 · 方案</h4><p class="dim">架构设计</p></div>
+    <div class="card"><h4>03 · 结果</h4><p class="dim">数据对比</p></div>
+  </div>
+</section>
+
+<!-- Slides 3-6: follow same pattern — copy layout from templates/single-page/, replace data -->
+```
+
+**Step 5 — Render:**
+```bash
+bash "$SKILL_DIR/scripts/render.sh" "$SKILL_DIR/examples/tech-share/index.html" 6
+# Output: 6 PNG files at 1920×1080
+```
+
+**Result:** 6 professional slides in `tokyo-night` theme with keyboard nav, presenter mode, and PNG export.
 
 ## Authoring rules (important)
 
@@ -146,6 +282,66 @@ Only after those are clear, scaffold the deck and start writing.
   by default — it only appears in the S overlay. Slides should contain ONLY
   audience-facing content (titles, bullet points, data, charts, images).
 
+## Failure Modes & Troubleshooting
+
+If any step fails, follow this fallback chain:
+
+| Trigger | First-line fix | Still failing |
+|---------|---------------|---------------|
+| `render.sh` returns ERR_FILE_NOT_FOUND | Check Chrome path: `which google-chrome` (Linux) / verify `LOCALAPPDATA` (Windows) | Set `CHROME=/path/to/chrome.exe` env var and retry |
+| `render.sh` produces blank/white PNG | Increase `--virtual-time-budget=4000` to `8000` in render.sh | Open HTML in browser manually, screenshot with `browser_screenshot` |
+| Theme not switching with T key | Verify `data-themes="a,b,c"` on `<body>` and `data-theme-base` pointing to themes dir | Hard-code `<link id="theme-link" href="...">` instead of T-cycle |
+| Fonts look wrong / fallback to system | Check `fonts.css` is linked BEFORE the theme CSS | CDN blocked (China firewall) — add local font fallback or use proxy |
+| Canvas FX not playing | Verify `<script src="...fx-runtime.js"></script>` is AFTER the `<div class="deck">` | Check browser console for JS errors; FX modules load async |
+| `new-deck.sh` path rewrite wrong | Verify output HTML has `../../assets/` (not `../assets/`) | Manually edit paths: add one more `../` for each nesting level |
+| `open` command not found | macOS: `open`, Windows: `start`, Linux: `xdg-open` | Just drag the HTML file into Chrome |
+| Slide layout broken in a theme | Some themes override border-radius/shadow aggressively | Test with `minimal-white` first; if broken there, fix the layout HTML |
+| Chart.js colors wrong | Charts read CSS vars in JS; must run after DOM ready | Wrap in `addEventListener('DOMContentLoaded', ...)` |
+| presenter-mode S key not working | `runtime.js` must be linked | Check `<script src="../assets/runtime.js"></script>` is present |
+| 小红书 3:4 图文尺寸不对 | `xhs-post` template uses fixed `810×1080` viewport | Check `.slide` CSS has `width:810px;height:1080px` — don't override |
+| Presenter window shows wrong slide | BroadcastChannel only works same-origin (same file:// or http://) | Open via `http://localhost` instead of `file://` for cross-window sync |
+| Progress bar missing | `.progress-bar` is auto-created by `runtime.js` only if `.deck` exists | Verify `<div class="deck">` wraps all `.slide` elements |
+| Counter animation not ticking | `.counter` needs `data-to="123"` attribute | Add `<span class="counter" data-to="1248">0</span>` |
+| `render.sh` hangs on Linux | Chrome needs `--no-sandbox` when running as root | Already in the script; if still hanging, add `--disable-dev-shm-usage` |
+| Ken Burns effect not visible | `.kenburns` needs a background-image on the element | Add `style="background-image:url(...)"` or use gradient placeholder |
+| Overview grid (O key) shows empty cards | Each `<section class="slide">` needs `data-title="..."` | Add `data-title="Cover"` etc. to every slide |
+| Hash deep-link `#/3` not working | URL must be `file://path#3` not `file://path#/3` | Use `#3` (no slash) for 1-based slide index |
+| `stagger-list` children not animating one-by-one | Children must be direct descendants, not wrapped in extra divs | Put grid items directly inside the `.anim-stagger-list` container |
+| Deck works locally but breaks on web server | Relative paths (`../../assets/`) break if directory structure changes | Use `<base href="...">` or absolute paths when deploying |
+| Two decks on same page conflict | CSS class names like `.slide`, `.card` are global | Scope with `.deck` parent or use iframe isolation (like showcases do) |
+| SVG `path-draw` not rendering | Older browsers may not support CSS `stroke-dasharray` animation | Add fallback: static SVG with `stroke-dasharray: 0` |
+| Print layout broken | `base.css` has `@media print` rules but custom CSS may override | Test with Ctrl+P before delivering PDF version |
+
+## Anti-Patterns — DO NOT
+
+| # | ❌ Don't | ✅ Do instead |
+|---|---------|---------------|
+| 1 | Author slides from a blank HTML file | Copy the closest layout from `templates/single-page/` first |
+| 2 | Use literal hex colors (`#111`, `rgb(...)`) | Use CSS tokens: `var(--text-1)`, `var(--accent)` |
+| 3 | Put presenter-only text on the visible slide | Wrap in `<div class="notes">` or `<aside class="notes">` |
+| 4 | Skip `runtime.js` | Always include it — keyboard nav, S-key, T-cycle, overview all depend on it |
+| 5 | Invent new layout files for minor variations | Compose existing layouts; only create new if genuinely novel |
+| 6 | Use heavy animation frameworks (GSAP, anime.js) | Use the built-in 27 CSS animations + 20 canvas FX |
+| 7 | Hard-code font families in slides | Use `var(--font-sans)` / `var(--font-display)` from tokens |
+| 8 | Mix 5+ animation types on one slide | Max 1-2 animation types per slide for clean rhythm |
+| 9 | Write 逐字稿 in formal written Chinese | Use conversational Chinese: "所以" not "因此", "这个" not "该" |
+| 10 | Write 逐字稿 longer than 300 words per slide | Keep 150–300 words; >300 = can't scan in time |
+| 11 | Delete slides from showcase/template files | They are reference material; copy, don't delete |
+| 12 | Load fx-runtime.js without any `data-fx` elements | Only include fx-runtime.js when slides actually use canvas FX |
+| 13 | Forget `<!DOCTYPE html>` or `<meta charset>` | Always start from `templates/deck.html` — it has all required boilerplate |
+| 14 | Use `../assets/` paths in nested `full-decks/` templates | Full-deck templates need `../../../assets/` (3 levels up from `full-decks/<name>/`) |
+| 15 | Assume CDN fonts load in offline/China environments | Pre-import only essential fonts in `fonts.css`; add `font-display: swap` |
+| 16 | Use `<div class="slide">` without `data-title` | Always add `data-title="..."` — used by overview grid (O key) |
+| 17 | Put `<script>` tags inside `.slide` sections | Scripts go AFTER `<div class="deck">` closing tag, before `</body>` |
+| 18 | Override `.slide` display/visibility in custom CSS | `runtime.js` controls `.is-active` — overriding breaks navigation |
+| 19 | Omit `<html lang="zh-CN">` on Chinese decks | Always set `lang` for proper font rendering and accessibility |
+| 20 | Use `<b>` / `<i>` instead of `<strong>` / `<em>` in notes | Semantic HTML; `<strong>` and `<em>` are styled in presenter view |
+| 21 | Hard-code slide dimensions in pixels | Use CSS variables (`--slide-w`, `--slide-h`) from `base.css` for consistency |
+| 22 | Use `position: absolute` for slide layout | Use CSS Grid (`.grid.g2/g3/g4`) — it's responsive and token-driven |
+| 23 | Include Chart.js CDN on slides without charts | Only add `<script src="chart.js">` when slides actually use `chart-bar/line/pie/radar.html` |
+| 24 | Write notes in English for a Chinese deck | Match notes language to deck language; bilingual decks use Chinese notes |
+| 25 | Copy entire showcase HTML as a starting point | Use `new-deck.sh` scaffold or copy a `full-decks/` template — showcases are reference, not starters |
+
 ## Writing guide
 
 See [references/authoring-guide.md](references/authoring-guide.md) for a
@@ -155,67 +351,107 @@ Chinese + English deck, and how to export.
 
 ## Catalogs (load when needed)
 
-- [references/themes.md](references/themes.md) — all 36 themes with when-to-use.
-- [references/layouts.md](references/layouts.md) — all 31 layout types.
-- [references/animations.md](references/animations.md) — 27 CSS + 20 canvas FX animations.
-- [references/full-decks.md](references/full-decks.md) — all 15 full-deck templates.
-- [references/presenter-mode.md](references/presenter-mode.md) — **演讲者模式 + 逐字稿编写指南（技术分享/演讲必看）**.
-- [references/authoring-guide.md](references/authoring-guide.md) — full workflow.
+**When to load which reference:**
 
-## File structure
+| User asks about... | Load this | Key content |
+|--------------------|-----------|-------------|
+| "什么主题好看" / theme choice | [references/themes.md](references/themes.md) | 36 themes with when-to-use + audience mapping |
+| "用什么布局" / layout type | [references/layouts.md](references/layouts.md) | 31 layouts: opener/text/data/code/diagram/plan/visual/closer |
+| "加什么动画" / animation | [references/animations.md](references/animations.md) | 27 CSS + 20 canvas FX with trigger syntax |
+| "有现成模板吗" / full deck | [references/full-decks.md](references/full-decks.md) | 15 templates: 8 extracted + 7 scenario |
+| "演讲者模式怎么用" / presenter | [references/presenter-mode.md](references/presenter-mode.md) | S-key guide + 逐字稿三铁律 + HTML structure |
+| "怎么从零开始做" / workflow | [references/authoring-guide.md](references/authoring-guide.md) | 10-step walkthrough from request to PNG |
 
-```
-html-ppt/
-├── SKILL.md                 (this file)
-├── references/              (detailed catalogs, load as needed)
-├── assets/
-│   ├── base.css             (tokens + primitives — do not edit per deck)
-│   ├── fonts.css            (webfont imports)
-│   ├── runtime.js           (keyboard + presenter + overview + theme cycle)
-│   ├── themes/*.css         (36 token overrides, one per theme)
-│   └── animations/
-│       ├── animations.css   (27 named CSS entry animations)
-│       ├── fx-runtime.js    (auto-init [data-fx] on slide enter)
-│       └── fx/*.js          (20 canvas FX modules: particles/graph/fireworks…)
-├── templates/
-│   ├── deck.html                  (minimal 6-slide starter)
-│   ├── theme-showcase.html        (36 slides, iframe-isolated per theme)
-│   ├── layout-showcase.html       (iframe tour of all 31 layouts)
-│   ├── animation-showcase.html    (20 FX + 27 CSS animation slides)
-│   ├── full-decks-index.html      (gallery of all 14 full-deck templates)
-│   ├── full-decks/<name>/         (14 scoped multi-slide deck templates)
-│   └── single-page/*.html         (31 layout files with demo data)
-├── scripts/
-│   ├── new-deck.sh                (scaffold a deck from deck.html)
-│   └── render.sh                  (headless Chrome → PNG)
-└── examples/demo-deck/            (complete working deck)
-```
+All 6 references are searchable via `skill_view(name, file_path='references/<name>.md')`.
 
 ## Rendering to PNG
 
-`scripts/render.sh` wraps headless Chrome at
-`/Applications/Google Chrome.app/Contents/MacOS/Google Chrome`. For multi-slide
-capture, runtime.js exposes `#/N` deep-links, and render.sh iterates 1..N.
+`scripts/render.sh` wraps headless Chrome for PNG export. It auto-detects
+Chrome on macOS, Linux, and Windows (Git Bash / MSYS).
 
 ```bash
 ./scripts/render.sh templates/single-page/kpi-grid.html        # single page
 ./scripts/render.sh examples/demo-deck/index.html 8 out-dir    # 8 slides, custom dir
 ```
 
-## Keyboard cheat sheet
+## Quality Standards
+
+A deck is **done** when ALL of these are true:
+
+| Check | Pass criteria |
+|-------|--------------|
+| Slide count | Exactly matches user request (±0) |
+| Theme applied | `<link id="theme-link">` points to correct theme CSS |
+| Every slide has `data-title` | Overview grid (O key) shows all slide titles |
+| No placeholder text | No "Lorem ipsum", "TBD", "TODO", "Your content here" |
+| Notes present | Every slide has `<div class="notes">` with 150-300 words |
+| Keyboard works | ← → navigate, T cycles themes, S opens presenter |
+| Tokens only | Zero hardcoded hex colors in slide markup |
+| PNG renders | `render.sh` produces non-blank PNGs (37KB+ for 1920×1080) |
+
+## Common Scenarios → Recommended Combos
+
+| User request | Template | Theme | Animations | Notes |
+|-------------|----------|-------|------------|-------|
+| 技术分享 (8页) | `tech-sharing` | `tokyo-night` | `fade-up` + `stagger-list` | 每页 200 字逐字稿 |
+| 投资人路演 (10页) | `pitch-deck` | `pitch-deck-vc` | `rise-in` cover + `counter-up` KPIs | English notes OK |
+| 小红书图文 (9张) | `xhs-post` | `xiaohongshu-white` | Minimal, `fade-up` only | 3:4 ratio, 810×1080 |
+| 周报 (7页) | `weekly-report` | `corporate-clean` | `stagger-list` + `counter-up` | 数据驱动，少文字 |
+| 产品发布会 (8页) | `product-launch` | `glassmorphism` | `blur-in` cover + `zoom-pop` features | 每页一个重点 |
+| 教学课件 (7页) | `course-module` | `academic-paper` | `fade-up` only | 左侧学习目标栏 |
+| 演讲带逐字稿 (6页) | `presenter-mode-reveal` | `tokyo-night` | `rise-in` titles | 150-300字/页，口语化 |
+| 代码分享 (8页) | `tech-sharing` | `dracula` | `fade-up` + `glitch-in` code | code.html 布局 |
+| 项目架构图 (5页) | scratch | `blueprint` | `path-draw` SVG | arch-diagram.html |
+| 安全审计报告 (6页) | `testing-safety-alert` | `neo-brutalism` | `fade-up` + `counter-up` | 红/琥珀/绿三级卡片 |
+
+## Agent Quick Reference Card
 
 ```
-←  →  Space  PgUp  PgDn  Home  End    navigate
-F                                       fullscreen
-S                                       open presenter window (magnetic cards: current/next/script/timer)
-N                                       quick notes drawer (bottom overlay)
-R                                       reset timer (in presenter window)
-?preview=N                              URL param — force preview-only mode (single slide, no chrome)
-O                                       slide overview grid
-T                                       cycle themes (reads data-themes attr)
-A                                       cycle demo animation on current slide
-#/N in URL                              deep-link to slide N
-Esc                                     close all overlays
+┌─────────────────────────────────────────────────────────────────┐
+│  html-ppt · Agent Speed Reference                               │
+├─────────────────────────────────────────────────────────────────┤
+│  THEMES (pick by tone):                                         │
+│    Dark: tokyo-night dracula catppuccin-mocha gruvbox-dark      │
+│    Light: minimal-white corporate-clean arctic-cool swiss-grid  │
+│    Fun: aurora glassmorphism cyberpunk-neon vaporwave xhs-white │
+│    Formal: pitch-deck-vc academic-paper editorial-serif         │
+├─────────────────────────────────────────────────────────────────┤
+│  LAYOUTS (pick by content):                                     │
+│    Cover: cover.html                                            │
+│    Text: bullets.html two-column.html three-column.html         │
+│    Data: stat-highlight.html kpi-grid.html table.html           │
+│    Charts: chart-bar.html chart-line.html chart-pie.html        │
+│    Code: code.html terminal.html diff.html                      │
+│    Diagram: flow-diagram.html arch-diagram.html mindmap.html    │
+│    Plan: timeline.html roadmap.html gantt.html                  │
+│    End: cta.html thanks.html                                    │
+├─────────────────────────────────────────────────────────────────┤
+│  ANIMATIONS (max 1-2/slide):                                    │
+│    Safe: fade-up stagger-list rise-in                           │
+│    Bold: blur-in glitch-in perspective-zoom                     │
+│    Data: counter-up path-draw                                   │
+│    Canvas: particle-burst confetti-cannon knowledge-graph       │
+├─────────────────────────────────────────────────────────────────┤
+│  COMMANDS:                                                      │
+│    Scaffold: bash scripts/new-deck.sh <name>                    │
+│    Render 1: bash scripts/render.sh <html> 1                    │
+│    Render N: bash scripts/render.sh <html> <N>                  │
+│    Verify:   grep -c '../../assets/' <html>  # expect 6         │
+├─────────────────────────────────────────────────────────────────┤
+│  SLIDE TEMPLATE:                                                │
+│    <section class="slide" data-title="...">                     │
+│      <p class="kicker">LABEL</p>                                │
+│      <h2 class="h2 anim-fade-up" data-anim="fade-up">Title     │
+│      <div class="grid g3 mt-l">...</div>                        │
+│      <div class="notes">150-300 words</div>                     │
+│    </section>                                                   │
+├─────────────────────────────────────────────────────────────────┤
+│  CSS CLASSES: .grid.g2/g3/g4 .card .center .tc .kicker .lede   │
+│               .dim .dim2 .gradient-text .mt-s .mt-m .mt-l       │
+├─────────────────────────────────────────────────────────────────┤
+│  KEYS: ←→navigate T:theme A:anim F:fullscreen S:presenter      │
+│        O:overview N:notes R:reset-timer Esc:close               │
+└─────────────────────────────────────────────────────────────────┘
 ```
 
 ## License & author
diff --git a/references/authoring-guide.md b/references/authoring-guide.md
index 4285d65..05c6813 100644
--- a/references/authoring-guide.md
+++ b/references/authoring-guide.md
@@ -89,6 +89,7 @@ Pick **one** accent animation per slide. Everything else should be calm.
 ## 8. Review in-browser
 
 ```bash
+# Open in browser: macOS: open, Windows: start, Linux: xdg-open
 open examples/my-talk/index.html
 ```
 
diff --git a/scripts/render.sh b/scripts/render.sh
index 1711c16..ab238de 100755
--- a/scripts/render.sh
+++ b/scripts/render.sh
@@ -7,13 +7,39 @@
 #   render.sh <html-file> all                 # autodetect .slide count
 #   render.sh <html-file> <N> <out-dir>       # custom output dir
 #
-# Requires: Google Chrome at /Applications/Google Chrome.app (macOS).
+# Auto-detects Chrome on macOS, Linux, and Windows (Git Bash / MSYS).
 
 set -euo pipefail
 
-CHROME="/Applications/Google Chrome.app/Contents/MacOS/Google Chrome"
-if [[ ! -x "$CHROME" ]]; then
-  echo "error: Chrome not found at $CHROME" >&2
+# --- Cross-platform Chrome detection ---
+CHROME=""
+if [[ "$(uname -s)" == MINGW* ]] || [[ "$(uname -s)" == MSYS* ]] || [[ "$(uname -s)" == CYGWIN* ]]; then
+  # Windows (Git Bash / MSYS / Cygwin)
+  for candidate in \
+    "${LOCALAPPDATA:-}/Google/Chrome/Application/chrome.exe" \
+    "${PROGRAMFILES:-}/Google/Chrome/Application/chrome.exe" \
+    "/c/Program Files/Google/Chrome/Application/chrome.exe" \
+    "/c/Program Files (x86)/Google/Chrome/Application/chrome.exe"
+  do
+    if [[ -f "$candidate" ]]; then CHROME="$candidate"; break; fi
+  done
+elif [[ "$(uname -s)" == "Darwin" ]]; then
+  # macOS
+  if [[ -x "/Applications/Google Chrome.app/Contents/MacOS/Google Chrome" ]]; then
+    CHROME="/Applications/Google Chrome.app/Contents/MacOS/Google Chrome"
+  fi
+else
+  # Linux
+  for candidate in google-chrome google-chrome-stable chromium chromium-browser; do
+    if command -v "$candidate" &>/dev/null; then
+      CHROME="$candidate"
+      break
+    fi
+  done
+fi
+
+if [[ -z "$CHROME" ]]; then
+  echo "error: Google Chrome not found. Install Chrome or set CHROME env var." >&2
   exit 1
 fi
 
@@ -47,6 +73,11 @@ fi
 
 render_one() {
   local url="$1" target="$2"
+  local win_target="$target"
+  # On Windows (MSYS/Git Bash), convert paths for native Chrome
+  if command -v cygpath &>/dev/null; then
+    target="$(cygpath -w "$target")"
+  fi
   "$CHROME" \
     --headless=new \
     --disable-gpu \
@@ -56,15 +87,22 @@ render_one() {
     --window-size=1920,1080 \
     --screenshot="$target" \
     "$url" >/dev/null 2>&1
-  echo "  ✔ $target"
+  echo "  ✔ $win_target"
 }
 
+# --- Build file:// URL (convert MSYS path for Windows Chrome) ---
+if command -v cygpath &>/dev/null; then
+  FILE_URL="file:///$(cygpath -m "$ABS")"
+else
+  FILE_URL="file://$ABS"
+fi
+
 if [[ "$COUNT" == "1" ]]; then
   OUT_FILE="${OUT:-$(dirname "$FILE")/${STEM}.png}"
-  render_one "file://$ABS" "$OUT_FILE"
+  render_one "$FILE_URL" "$OUT_FILE"
 else
   for i in $(seq 1 "$COUNT"); do
-    render_one "file://$ABS#/$i" "$OUT/${STEM}_$(printf '%02d' "$i").png"
+    render_one "${FILE_URL}#/$i" "$OUT/${STEM}_$(printf '%02d' "$i").png"
   done
 fi
 
diff --git a/showcase/cover-minimal.png b/showcase/cover-minimal.png
new file mode 100644
index 0000000..2d714a3
Binary files /dev/null and b/showcase/cover-minimal.png differ
diff --git a/showcase/kpi-grid.png b/showcase/kpi-grid.png
new file mode 100644
index 0000000..92de730
Binary files /dev/null and b/showcase/kpi-grid.png differ
diff --git a/showcase/tech-sharing-cover.png b/showcase/tech-sharing-cover.png
new file mode 100644
index 0000000..8c400a5
Binary files /dev/null and b/showcase/tech-sharing-cover.png differ
diff --git a/showcase/theme-aurora.png b/showcase/theme-aurora.png
new file mode 100644
index 0000000..eff5bf0
Binary files /dev/null and b/showcase/theme-aurora.png differ
diff --git a/showcase/theme-corporate-clean.png b/showcase/theme-corporate-clean.png
new file mode 100644
index 0000000..6d4bdb8
Binary files /dev/null and b/showcase/theme-corporate-clean.png differ
diff --git a/showcase/theme-cyberpunk-neon.png b/showcase/theme-cyberpunk-neon.png
new file mode 100644
index 0000000..c2c61b7
Binary files /dev/null and b/showcase/theme-cyberpunk-neon.png differ
diff --git a/showcase/theme-dracula.png b/showcase/theme-dracula.png
new file mode 100644
index 0000000..bd16c4b
Binary files /dev/null and b/showcase/theme-dracula.png differ
diff --git a/showcase/theme-xiaohongshu-white.png b/showcase/theme-xiaohongshu-white.png
new file mode 100644
index 0000000..1ddbfe1
Binary files /dev/null and b/showcase/theme-xiaohongshu-white.png differ
diff --git a/test-prompts.json b/test-prompts.json
new file mode 100644
index 0000000..4d6661d
--- /dev/null
+++ b/test-prompts.json
@@ -0,0 +1,52 @@
+[
+  {
+    "id": "basic-tech-share",
+    "prompt": "做一份 6 页技术分享 slides，用 tokyo-night 主题",
+    "expect": {
+      "slide_count": 6,
+      "theme": "tokyo-night",
+      "has_notes": true,
+      "has_keyboard_nav": true,
+      "renders_png": true
+    }
+  },
+  {
+    "id": "xhs-post",
+    "prompt": "做一个小红书图文，9 张，白底柔和风",
+    "expect": {
+      "slide_count": 9,
+      "theme": "xiaohongshu-white",
+      "aspect_ratio": "3:4 (810x1080)",
+      "has_notes": false
+    }
+  },
+  {
+    "id": "pitch-deck",
+    "prompt": "把这段产品介绍变成投资人 pitch deck，10 页",
+    "expect": {
+      "slide_count": 10,
+      "theme_suggestion": ["pitch-deck-vc", "corporate-clean"],
+      "has_notes": true,
+      "has_kpi_or_chart": true
+    }
+  },
+  {
+    "id": "presenter-mode",
+    "prompt": "我要做一场 30 分钟的技术分享，需要逐字稿",
+    "expect": {
+      "template": "presenter-mode-reveal",
+      "notes_per_slide": "150-300 words",
+      "notes_language": "conversational Chinese"
+    }
+  },
+  {
+    "id": "weekly-report",
+    "prompt": "做一份周报，7 页，用 corporate-clean 主题",
+    "expect": {
+      "slide_count": 7,
+      "theme": "corporate-clean",
+      "has_kpi_grid": true,
+      "has_chart": true
+    }
+  }
+]