npm - @hiai-gg/hiai-opencode - Versions diffs - 0.2.0 → 0.2.2 - Mend

@hiai-gg/hiai-opencode 0.2.0 → 0.2.2

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 (490) hide show

package/skills/design-templates/html-ppt/references/presenter-mode.md ADDED Viewed

@@ -0,0 +1,240 @@
+# Presenter Mode Guide · 演讲者模式指南
+这份文档说明如何在 html-ppt skill 里做出**带逐字稿的演讲者模式 PPT**。
+## 何时使用演讲者模式
+当用户的需求涉及以下任何一项时，**优先使用演讲者模式**：
+- 提到"**演讲**"、"**分享**"、"**讲稿**"、"**逐字稿**"、"**speaker notes**"
+- 提到"**presenter view**"、"**演讲者视图**"、"**演讲者模式**"
+- 需要"**30 分钟 / 45 分钟 / 1 小时**的分享"
+- 说"我要去给团队讲 xxx"、"要做一场技术分享"、"要做路演"
+- 强调"**不想忘词**"、"**怕讲不流畅**"、"**需要提词器**"
+如果用户只要做一份"静态好看的 PPT"（例如小红书图文、产品图册、汇报 slides 自己不讲），**不需要**演讲者模式。
+## 两种做法
+### ✅ 推荐做法：直接用 `presenter-mode-reveal` 模板
+```bash
+cp -r templates/full-decks/presenter-mode-reveal examples/my-talk
+```
+这个模板已经预设好所有必需元素：
+- 支持 S 键切换演讲者视图
+- 5 个主题可用 T 键循环（tokyo-night / dracula / catppuccin-mocha / nord / corporate-clean）
+- 左右键翻页
+- 每一页都有 150–300 字的示例逐字稿
+- 底部有键位提示
+直接改内容即可。
+### 🔧 进阶做法：给任意已有模板加演讲者模式
+html-ppt 的 **S 键演讲者视图是 `runtime.js` 内置的，所有 full-deck 模板都自动支持**。你只需要做两件事：
+1. **每张 slide 末尾加 `<aside class="notes">`**（或 `<div class="notes">`），里面写逐字稿
+2. **确认 HTML 引入了 `assets/runtime.js`**
+```html
+<section class="slide">
+  <h2>你的标题</h2>
+  <p>内容...</p>
+  <aside class="notes">
+    <p>这里是演讲时要说的话，150-300 字...</p>
+  </aside>
+</section>
+```
+## 逐字稿写作三铁律
+这是整个方法论的核心。AI 在帮用户写逐字稿时必须遵守：
+### 铁律 1：不是讲稿，是"提示信号"
+❌ **错误写法**（像在念稿）：
+```
+大家好，欢迎来到今天的分享。今天我将要给大家介绍一下我们团队在过去三个月做的工作。
+首先，我们来看一下背景情况。在过去的三个月中，我们遇到了以下几个问题……
+```
+✅ **正确写法**（提示信号 + 加粗核心）：
+```
+<p>欢迎！今天分享我们团队<strong>过去 3 个月</strong>的工作。</p>
+<p>先说<em>背景</em>——三个月前我们遇到了<strong>三个核心问题</strong>：
+延迟高、成本炸、稳定性差。</p>
+<p>接下来逐个讲解怎么解的。</p>
+```
+**差别**：正确版本把关键词加粗，过渡句独立成段，看一眼就能接上。
+### 铁律 2：每页 150–300 字
+- **少于 150 字**：提示不够，讲到一半会卡
+- **多于 300 字**：你根本来不及扫完
+- **2–3 分钟/页** 是最舒服的节奏
+### 铁律 3：用口语，不用书面语
+| ❌ 书面语 | ✅ 口语 |
+|---|---|
+| 因此 | 所以 |
+| 该方案 | 这个方案 |
+| 然而 | 但是 / 不过 |
+| 进行优化 | 优化一下 |
+| 我们将会 | 我们会 / 接下来 |
+| 综上所述 | 所以简单来说 |
+**检查方法**：写完读一遍，听起来像说话才对。
+## 必备 HTML 结构
+```html
+<!DOCTYPE html>
+<html lang="zh-CN" data-themes="tokyo-night,dracula,corporate-clean">
+<head>
+  <meta charset="utf-8">
+  <title>...</title>
+  <link rel="stylesheet" href="../../../assets/fonts.css">
+  <link rel="stylesheet" href="../../../assets/base.css">
+  <link rel="stylesheet" id="theme-link" href="../../../assets/themes/tokyo-night.css">
+  <link rel="stylesheet" href="../../../assets/animations/animations.css">
+  <link rel="stylesheet" href="style.css">
+</head>
+<body>
+<div class="deck">
+  <section class="slide" data-title="Cover">
+    <h1>你的标题</h1>
+    <p>副标题</p>
+    <aside class="notes">
+      <p>讲稿段落 1（加<strong>加粗关键词</strong>）。</p>
+      <p>讲稿段落 2（过渡句独立成段）。</p>
+      <p>讲稿段落 3（自然收尾，引出下一页）。</p>
+    </aside>
+  </section>
+  <!-- 更多 slide ... -->
+</div>
+<script src="../../../assets/runtime.js"></script>
+</body>
+</html>
+```
+## 演讲者视图显示的内容
+按 `S` 键后，**弹出一个独立的演讲者窗口**（原页面保持观众视图不变）。演讲者窗口是 **4 个独立的磁吸卡片**：
+```
+ 观众窗口（原页面）           演讲者窗口（磁吸卡片）
+┌─────────────────┐   ┌─────────────────────┬──────────────────┐
+│                 │   │ 🔵 CURRENT         │ 🟣 NEXT            │
+│  正常 slide     │   │ ━━━━━━━━━━━━━━━━ │ ━━━━━━━━━━━━━ │
+│  全屏展示       │◄►│                   │  iframe preview   │
+│                 │   │  iframe preview   │  （下一页）         │
+│                 │   │  （当前页）        ├──────────────────┤
+│                 │   │                   │ 🟠 SPEAKER SCRIPT  │
+│                 │   │                   │ ━━━━━━━━━━━━━ │
+│                 │   ├─────────────────────┤  [大字号逐字稿]   │
+│                 │   │ 🟢 TIMER           │  [可滚动]         │
+│                 │   │ ⏱ 12:34   3 / 8 │                   │
+│                 │   │ [← Prev][Next →]  │                   │
+└─────────────────┘   └─────────────────────┴──────────────────┘
+       ↑ BroadcastChannel 双向同步翻页 ↑
+```
+卡片交互规则：
+- **拖动卡片 header**（带彩色圆点和标题的顶部条）→ 移动卡片位置
+- **拖动卡片右下角的三角手柄** → 调整卡片大小
+- **位置/尺寸自动保存到 localStorage**，下次打开恢复
+- 底部 "重置布局" 按钮恢复默认排列
+卡片内容：
+- 🔵 **CURRENT** — 当前页 **像素级完美预览**（iframe 加载原 HTML 文件的 `?preview=N` 模式，错色不可能）
+- 🟣 **NEXT** — 下一页预览，同样像素级完美
+- 🟠 **SPEAKER SCRIPT** — 逐字稿，字号 18px，支持 `<strong>` (橘色加粗)、`<em>` (蓝色强调)、`<code>` 等 inline 样式
+- 🟢 **TIMER** — 计时器不会丢失焦点，带切页按钮
+两窗口同步：在任一窗口按 ← → 翻页，另一个窗口自动同步（BroadcastChannel）。
+丝滑翻页：iframe 只加载一次，后续翻页用 `postMessage` 切换可见的 slide，**不重新加载、不闪烁**。
+## 键盘快捷键（演讲者模式）
+| 键 | 动作 |
+|---|---|
+| `S` | 打开演讲者窗口（弹出新窗口，原页面保持观众视图） |
+| `←` `→` / Space / PgDn | 翻页（即使在演讲者视图里） |
+| `T` | 切换主题 |
+| `R` | 重置计时器（仅演讲者视图下） |
+| `F` | 全屏 |
+| `O` | 总览 |
+| `Esc` | 关闭所有浮层 |
+## 双屏演讲的标准流程
+1. 打开 `index.html`，按 `S` → 弹出演讲者窗口
+2. 把**观众窗口**（原页面）拖到投影 / 外接屏，按 `F` 全屏
+3. 把**演讲者窗口**（弹窗）留在你面前的屏幕
+4. 在任一窗口按 ← → 翻页，两边自动同步
+5. 演讲者窗口里看逐字稿 + 下一页 + 计时器
+> 💡 **为什么预览像素级完美**：每个预览是一个 `<iframe>`，它加载的就是同一个 deck HTML 文件，只是 URL 多了 `?preview=N` 参数。`runtime.js` 检测到这个参数时只渲染第 N 页、隐藏所有 chrome。**iframe 使用与观众视图完全相同的 CSS、主题、字体和 viewport**——颜色和排版保证一致。外层用 CSS `transform: scale()` 把 1920×1080 缩到卡片宽高，等比缩放不变形。
+> 💡 **为什么不闪烁**：iframe 初次加载后就常驻，翻页时 presenter 窗口通过 `postMessage({type:'preview-goto', idx:N})` 告诉 iframe 切换到第 N 页。iframe 内的 runtime.js 只切换 `.is-active` class，**不重新加载、不渲染白屏**。
+## 常见错误
+### ❌ 把逐字稿写在 slide 可见位置
+```html
+<!-- 错误：这段文字观众会看到 -->
+<p style="font-size:12px;color:gray">
+  这里讲 xxx，然后讲 yyy...
+</p>
+```
+✅ 正确：
+```html
+<aside class="notes">
+  <p>这里讲 xxx，然后讲 yyy...</p>
+</aside>
+```
+`.notes` 类默认 `display:none`，只在演讲者视图可见。
+### ❌ 忘记引入 runtime.js
+没有 `<script src="../../../assets/runtime.js"></script>` = 没有 S 键、没有演讲者视图、没有翻页。
+### ❌ 逐字稿用书面语
+念出来像 AI 机器人。**写完一定读一遍**。
+### ❌ 每页 50 字
+提示不够，照样忘词。
+### ❌ 每页 500 字
+眼睛根本扫不过来，等于没写。
+## 用 AI 生成逐字稿的标准 prompt
+> "请为每一张 slide 写一段 **150-300 字**的逐字稿，放在 `<aside class="notes">` 里。
+> 要求：
+> 1. 用**口语**，不要书面语（所以/但是/接下来，不是因此/然而/综上所述）
+> 2. 把**核心关键词**用 `<strong>` 加粗
+> 3. 过渡句独立成段（每段 1-3 句）
+> 4. 读起来像说话，不像念稿
+> 5. 结尾要有自然的过渡，引出下一页"
+## 推荐搭配
+- **主题**：`tokyo-night`（深色，技术分享首选）、`corporate-clean`（浅色，商务汇报）、`dracula`（深色备选）
+- **字体**：默认 Noto Sans SC + JetBrains Mono，无需更改
+- **动效**：克制使用，`fade-up` / `rise-in` 最自然，不要用 `glitch-in` / `confetti-burst` 之类花哨的
+- **页数**：30 分钟分享 = 8–12 页；45 分钟 = 12–16 页；1 小时 = 16–22 页

package/skills/design-templates/html-ppt/references/themes.md ADDED Viewed

@@ -0,0 +1,107 @@
+# Themes catalog
+Every theme is a short CSS file in `assets/themes/` that overrides tokens
+defined in `assets/base.css`. Switch themes by changing the `href` of
+`<link id="theme-link">` or by pressing **T** if the deck has a
+`data-themes="a,b,c"` attribute on `<body>` or `<html>`.
+All themes define the same variables: `--bg`, `--bg-soft`, `--surface`,
+`--surface-2`, `--border`, `--text-1/2/3`, `--accent`, `--accent-2/3`,
+`--good`, `--warn`, `--bad`, `--grad`, `--grad-soft`, `--radius*`, `--shadow*`,
+`--font-sans`, `--font-display`.
+## Light & calm
+| name | description | when to use |
+|---|---|---|
+| `minimal-white` | 极简白，克制高级。Inter，强文字层级，极低阴影。 | 内部汇报、一对一技术评审、不抢内容的严肃话题 |
+| `editorial-serif` | 杂志风 Playfair 衬线 + 奶油底。 | 品牌故事、文字密度大的长文演讲 |
+| `soft-pastel` | 柔和马卡龙三色渐变。 | 产品发布、面向消费者、轻松话题 |
+| `xiaohongshu-white` | 小红书白底 + 暖红 accent + 衬线标题。 | 小红书图文、生活/美学类内容 |
+| `solarized-light` | 经典低眩光配色。 | 长时间观看的工作坊、教学 |
+| `catppuccin-latte` | catppuccin 浅色。 | 开发者、极客友好的技术分享 |
+## Bold & statement
+| name | description | when to use |
+|---|---|---|
+| `sharp-mono` | 纯黑白 + Archivo Black + 硬阴影。 | 宣言类、极具冲击力的视觉 |
+| `neo-brutalism` | 厚描边、硬阴影、明黄 accent。 | 创业路演、敢说敢做的调性 |
+| `bauhaus` | 几何 + 红黄蓝原色。 | 设计 talk、艺术史/产品美学主题 |
+| `swiss-grid` | 瑞士网格 + Helvetica 感 + 12 栏底纹。 | 严肃排版、设计行业 |
+| `memphis-pop` | 孟菲斯波普背景点 + 大字标题。 | 年轻、潮流、品牌合作 |
+## Cool & dark
+| name | description | when to use |
+|---|---|---|
+| `catppuccin-mocha` | catppuccin 深。 | 开发者内部分享、长时间观看 |
+| `dracula` | 经典 Dracula 紫红主色。 | 代码密集的技术分享 |
+| `tokyo-night` | Tokyo Night 蓝夜。 | 偏冷技术分享、基础设施 |
+| `nord` | 北欧清冷蓝白。 | 基础设施、云产品 |
+| `gruvbox-dark` | 温暖复古深色。 | Terminal / vim / *nix 社群 |
+| `rose-pine` | 玫瑰松，柔和暗色。 | 设计+开发交界、审美向技术 |
+| `arctic-cool` | 蓝/青/石板灰 浅色版。 | 商业分析、金融、冷静理性 |
+## Warm & vibrant
+| name | description | when to use |
+|---|---|---|
+| `sunset-warm` | 橘 / 珊瑚 / 琥珀三色渐变。 | 生活方式、奖项颁发、情绪正向 |
+## Effect-heavy
+| name | description | when to use |
+|---|---|---|
+| `glassmorphism` | 毛玻璃 + 多色光斑背景。 | Apple 式发布会、产品特性展示 |
+| `aurora` | 极光渐变 + blur + saturate。 | 封面 / CTA / 结语页 |
+| `rainbow-gradient` | 白底 + 彩虹流动渐变 accent。 | 欢乐向、节日、庆祝页 |
+| `blueprint` | 蓝图工程 + 网格底纹 + 蒙太奇字体。 | 系统架构、工程蓝图 |
+| `terminal-green` | 绿屏终端 + 等宽 + 发光文字。 | CLI/black-hat/复古朋克 |
+## v2 additions
+### Light & professional
+| name | description | when to use |
+|---|---|---|
+| `corporate-clean` | 纯白 + 海军蓝 accent + Inter + 保守边框。 | 董事会汇报、B2B 销售、金融保险 |
+| `pitch-deck-vc` | YC 风白底 + 蓝紫渐变 accent + 大留白。 | 融资路演、种子轮、VC meeting |
+| `academic-paper` | 论文白 + 衬线正文 + 黑墨 + 蓝链接。 | 学术报告、研究分享、会议论文 |
+| `japanese-minimal` | 象牙白 + 朱红 accent + 极大留白 + Noto Serif。 | 品牌升级、匠人故事、禅意叙事 |
+| `engineering-whiteprint` | 白底 + 坐标纸网格 + 海军墨线 + 等宽字。 | 系统设计、API 文档、架构白皮书 |
+### Bold & editorial
+| name | description | when to use |
+|---|---|---|
+| `magazine-bold` | 奶油底 + 超大 Playfair 衬线 + 橙色 spot。 | 专栏文章、封面故事、品牌月刊 |
+| `news-broadcast` | 白底 + 红色竖条 + Oswald 大写 + 硬阴影。 | 突发新闻、发布通稿、数据播报 |
+| `midcentury` | 奶油底 + 芥末/青/焦橙 + 锐利几何。 | 设计史、家居美学、复古品牌 |
+| `retro-tv` | 暖奶油 + CRT 扫描线 + 琥珀橙 accent。 | 怀旧叙事、八零九零年代主题 |
+### Effect-heavy / dramatic
+| name | description | when to use |
+|---|---|---|
+| `cyberpunk-neon` | 纯黑 + 霓虹粉青黄 + 发光 + JetBrains Mono。 | 黑客、地下文化、赛博 talk |
+| `vaporwave` | 深紫 + 粉红青蓝渐变 + 晕染光斑。 | 音乐、潮流艺术、A E S T H E T I C |
+| `y2k-chrome` | 银铬渐变 + 彩虹 accent + 大圆角 + Space Grotesk。 | 千禧怀旧、时尚品牌、Gen-Z |
+## How to apply
+```html
+<link rel="stylesheet" id="theme-link" href="../assets/themes/aurora.css">
+```
+Or enable `T`-cycling by listing themes on the body:
+```html
+<body data-themes="minimal-white,aurora,catppuccin-mocha" data-theme-base="../assets/themes/">
+```
+## How to extend
+Copy an existing theme, rename it, and override only the variables you want to
+change. Keep each theme under ~200 lines. Prefer adjusting tokens to adding
+new selectors.

package/skills/design-templates/html-ppt/scripts/new-deck.sh ADDED Viewed

@@ -0,0 +1,46 @@
+#!/usr/bin/env bash
+# html-ppt :: new-deck.sh — scaffold a new deck from templates/deck.html
+#
+# Usage:
+#   new-deck.sh <name> [output-parent-dir]
+#
+# Creates <parent>/<name>/index.html with paths rewritten to point at the
+# skill's shared assets/themes/animations. Defaults to ./examples/.
+set -euo pipefail
+NAME="${1:-}"
+if [[ -z "$NAME" ]]; then
+  echo "usage: new-deck.sh <name> [parent-dir]" >&2
+  exit 1
+fi
+PARENT="${2:-examples}"
+HERE="$(cd "$(dirname "$0")/.." && pwd)"
+TEMPLATE="$HERE/templates/deck.html"
+if [[ ! -f "$TEMPLATE" ]]; then
+  echo "error: template not found at $TEMPLATE" >&2
+  exit 1
+fi
+OUT_DIR="$HERE/$PARENT/$NAME"
+if [[ -e "$OUT_DIR" ]]; then
+  echo "error: $OUT_DIR already exists" >&2
+  exit 1
+fi
+mkdir -p "$OUT_DIR"
+# templates/deck.html references ../assets/...; for examples/<name>/index.html
+# that same relative path (../../assets/...) needs one more ../.
+sed 's|href="../assets/|href="../../assets/|g; s|src="../assets/|src="../../assets/|g; s|data-theme-base="../assets/|data-theme-base="../../assets/|g' \
+  "$TEMPLATE" > "$OUT_DIR/index.html"
+echo "✔ created $OUT_DIR/index.html"
+echo ""
+echo "next steps:"
+echo "  open  $OUT_DIR/index.html"
+echo "  # press T to cycle themes, ← → to navigate, O for overview"
+echo ""
+echo "  # render to PNG:"
+echo "  $HERE/scripts/render.sh $OUT_DIR/index.html all"

package/skills/design-templates/html-ppt/scripts/render.sh ADDED Viewed

@@ -0,0 +1,71 @@
+#!/usr/bin/env bash
+# html-ppt :: render.sh — headless Chrome screenshot(s)
+#
+# Usage:
+#   render.sh <html-file>                     # one PNG, slide 1
+#   render.sh <html-file> <N>                 # N PNGs, slides 1..N, via #/k
+#   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).
+set -euo pipefail
+CHROME="/Applications/Google Chrome.app/Contents/MacOS/Google Chrome"
+if [[ ! -x "$CHROME" ]]; then
+  echo "error: Chrome not found at $CHROME" >&2
+  exit 1
+fi
+FILE="${1:-}"
+if [[ -z "$FILE" ]]; then
+  echo "usage: render.sh <html> [N|all] [out-dir]" >&2
+  exit 1
+fi
+if [[ ! -f "$FILE" ]]; then
+  echo "error: $FILE not found" >&2
+  exit 1
+fi
+COUNT="${2:-1}"
+OUT="${3:-}"
+ABS="$(cd "$(dirname "$FILE")" && pwd)/$(basename "$FILE")"
+STEM="$(basename "${FILE%.*}")"
+if [[ "$COUNT" == "all" ]]; then
+  COUNT="$(grep -c 'class="slide"' "$FILE" || true)"
+  [[ -z "$COUNT" || "$COUNT" -lt 1 ]] && COUNT=1
+fi
+if [[ -z "$OUT" ]]; then
+  if [[ "$COUNT" -gt 1 ]]; then
+    OUT="$(dirname "$FILE")/${STEM}-png"
+    mkdir -p "$OUT"
+  fi
+fi
+render_one() {
+  local url="$1" target="$2"
+  "$CHROME" \
+    --headless=new \
+    --disable-gpu \
+    --hide-scrollbars \
+    --no-sandbox \
+    --virtual-time-budget=4000 \
+    --window-size=1920,1080 \
+    --screenshot="$target" \
+    "$url" >/dev/null 2>&1
+  echo "  ✔ $target"
+}
+if [[ "$COUNT" == "1" ]]; then
+  OUT_FILE="${OUT:-$(dirname "$FILE")/${STEM}.png}"
+  render_one "file://$ABS" "$OUT_FILE"
+else
+  for i in $(seq 1 "$COUNT"); do
+    render_one "file://$ABS#/$i" "$OUT/${STEM}_$(printf '%02d' "$i").png"
+  done
+fi
+echo "done: rendered $COUNT slide(s) from $FILE"