npm - @w3kits-com/plugin-opendesign - Versions diffs - 0.1.8 → 0.1.10 - Mend

@w3kits-com/plugin-opendesign 0.1.8 → 0.1.10

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

package/dist/__w3kits/assets/design-templates/html-ppt/templates/full-decks/pitch-deck/index.html ADDED Viewed

@@ -0,0 +1,148 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1">
+<title>Lumen · Pitch Deck</title>
+<link rel="stylesheet" href="../../../assets/fonts.css">
+<link rel="stylesheet" href="../../../assets/base.css">
+<link rel="stylesheet" href="../../../assets/animations/animations.css">
+<link rel="stylesheet" href="style.css">
+</head>
+<body class="tpl-pitch-deck">
+<div class="deck">
+  <!-- 1. Cover -->
+  <section class="slide" data-title="Cover">
+    <div class="cover-bg"></div>
+    <div class="cover-blob"></div>
+    <div style="position:absolute;top:56px;left:112px"><span class="brand-dot"></span><span class="brand">Lumen</span></div>
+    <p class="kicker">Seed round · 2026</p>
+    <h1 class="h1 anim-fade-up" data-anim="fade-up">The operating system<br>for <span class="gradient-text">solo founders</span>.</h1>
+    <p class="lede mt-m">One workspace for billing, CRM, contracts and taxes — built for the 70M people running a business of one.</p>
+    <div class="deck-footer"><span>Maya Chen · CEO</span><span class="slide-number" data-current="1" data-total="10"></span></div>
+  </section>
+  <!-- 2. Problem -->
+  <section class="slide" data-title="Problem">
+    <span class="section-num">01</span>
+    <p class="num-tag">PROBLEM</p>
+    <h2 class="h2 mt-s">Solo founders duct-tape<br>7+ tools to stay alive.</h2>
+    <div class="grid g3 mt-l">
+      <div class="card"><h4>Fragmentation</h4><p class="dim">Stripe, QuickBooks, HubSpot, DocuSign, Notion, Gusto, a spreadsheet. Nothing talks.</p></div>
+      <div class="card"><h4>$480/mo wasted</h4><p class="dim">Average solo founder pays for 9 SaaS seats they only half-use.</p></div>
+      <div class="card"><h4>14 hrs / week lost</h4><p class="dim">Copy-pasting between tools instead of selling.</p></div>
+    </div>
+  </section>
+  <!-- 3. Solution -->
+  <section class="slide" data-title="Solution">
+    <span class="section-num">02</span>
+    <p class="num-tag">SOLUTION</p>
+    <h2 class="h2 mt-s">Lumen is <span class="gradient-text">one spine</span><br>for the business of one.</h2>
+    <p class="lede mt-m">Invoice a client → the payment lands → the tax is reserved → the contract is filed → your dashboard updates. In one app. Without plumbing.</p>
+    <div class="row mt-l">
+      <span class="pill pill-accent">Billing</span>
+      <span class="pill pill-accent">CRM</span>
+      <span class="pill pill-accent">Contracts</span>
+      <span class="pill pill-accent">Taxes</span>
+      <span class="pill pill-accent">Banking</span>
+    </div>
+  </section>
+  <!-- 4. Product -->
+  <section class="slide" data-title="Product">
+    <span class="section-num">03</span>
+    <p class="num-tag">PRODUCT</p>
+    <h2 class="h2 mt-s">Built around "jobs to be done".</h2>
+    <div class="grid g2 mt-l">
+      <div class="card card-hover"><h4>Get paid</h4><p class="dim">Invoices, subscriptions and Stripe/Wise payouts with a single click. ACH, card, wire, crypto.</p></div>
+      <div class="card card-hover"><h4>Stay legal</h4><p class="dim">E-sign contracts from templates. Auto-file 1099s and quarterly estimates.</p></div>
+      <div class="card card-hover"><h4>Sell smarter</h4><p class="dim">Lead inbox, pipeline, email sequences. No separate CRM.</p></div>
+      <div class="card card-hover"><h4>See the business</h4><p class="dim">Live P&amp;L, runway, top customers, churn. One dashboard, zero spreadsheets.</p></div>
+    </div>
+  </section>
+  <!-- 5. Market -->
+  <section class="slide" data-title="Market">
+    <span class="section-num">04</span>
+    <p class="num-tag">MARKET</p>
+    <h2 class="h2 mt-s">A very big small business.</h2>
+    <div class="grid g3 mt-l">
+      <div class="metric"><div class="n">73M</div><div class="l">solo businesses in the US + EU</div></div>
+      <div class="metric"><div class="n">$186B</div><div class="l">TAM · horizontal SaaS spend</div></div>
+      <div class="metric"><div class="n">9.4%</div><div class="l">CAGR through 2030</div></div>
+    </div>
+    <p class="lede mt-l">Creators, consultants, indie devs, coaches, freelancers — the fastest-growing segment of the workforce, and the most under-served by tooling.</p>
+  </section>
+  <!-- 6. Business model -->
+  <section class="slide" data-title="Business Model">
+    <span class="section-num">05</span>
+    <p class="num-tag">BUSINESS MODEL</p>
+    <h2 class="h2 mt-s">Flat SaaS + payment rake.</h2>
+    <div class="grid g3 mt-l">
+      <div class="card"><h4>Starter</h4><div class="metric mt-s"><div class="n" style="font-size:56px">$29</div><div class="l">/ month · core billing + CRM</div></div></div>
+      <div class="card card-accent"><h4>Pro</h4><div class="metric mt-s"><div class="n" style="font-size:56px">$79</div><div class="l">/ month · contracts, taxes, banking</div></div></div>
+      <div class="card"><h4>+ Payments</h4><div class="metric mt-s"><div class="n" style="font-size:56px">0.4%</div><div class="l">interchange rake on processed volume</div></div></div>
+    </div>
+    <p class="dim mt-l">Blended LTV $1,920 · CAC payback 5 months at current funnel.</p>
+  </section>
+  <!-- 7. Traction -->
+  <section class="slide" data-title="Traction">
+    <span class="section-num">06</span>
+    <p class="num-tag">TRACTION</p>
+    <h2 class="h2 mt-s">6 months, growing 38% MoM.</h2>
+    <div class="traction-bar mt-l">
+      <div class="bar" style="height:18%"><em>$6k</em><span>Oct</span></div>
+      <div class="bar" style="height:30%"><em>$11k</em><span>Nov</span></div>
+      <div class="bar" style="height:44%"><em>$17k</em><span>Dec</span></div>
+      <div class="bar" style="height:62%"><em>$26k</em><span>Jan</span></div>
+      <div class="bar" style="height:82%"><em>$38k</em><span>Feb</span></div>
+      <div class="bar" style="height:100%"><em>$54k</em><span>Mar</span></div>
+    </div>
+    <p class="dim mt-l" style="margin-top:48px">2,140 paying customers · NPS 72 · Net retention 118%</p>
+  </section>
+  <!-- 8. Team -->
+  <section class="slide" data-title="Team">
+    <span class="section-num">07</span>
+    <p class="num-tag">TEAM</p>
+    <h2 class="h2 mt-s">Shipped at scale before.</h2>
+    <div class="grid g3 mt-l">
+      <div class="card team-card"><div class="avatar">MC</div><h4>Maya Chen</h4><p class="dim">CEO · ex-Stripe billing lead. 8 yrs in payments.</p></div>
+      <div class="card team-card"><div class="avatar">RP</div><h4>Raj Patel</h4><p class="dim">CTO · ex-Linear. Built multiplayer sync at 10M users.</p></div>
+      <div class="card team-card"><div class="avatar">EK</div><h4>Elena Kim</h4><p class="dim">Head of Design · ex-Notion. Shipped the mobile relaunch.</p></div>
+    </div>
+  </section>
+  <!-- 9. Ask -->
+  <section class="slide" data-title="The Ask">
+    <p class="num-tag">THE ASK</p>
+    <div class="ask-box mt-m">
+      <h2 class="h2">Raising $4.5M seed.</h2>
+      <p class="lede" style="color:rgba(255,255,255,.9);max-width:60ch">18 months of runway to reach $3M ARR. 40% engineering, 35% growth, 15% compliance/banking licenses, 10% runway buffer.</p>
+      <div class="row mt-l" style="gap:40px">
+        <div><div style="font-size:44px;font-weight:900">$4.5M</div><div class="dim">SAFE · post-money cap $28M</div></div>
+        <div><div style="font-size:44px;font-weight:900">18 mo</div><div class="dim">runway to Series A</div></div>
+        <div><div style="font-size:44px;font-weight:900">$3M</div><div class="dim">ARR target by close</div></div>
+      </div>
+    </div>
+  </section>
+  <!-- 10. Thanks -->
+  <section class="slide center tc" data-title="Thanks">
+    <div class="cover-bg"></div>
+    <div>
+      <div class="mega">Thanks.</div>
+      <p class="mega-sub">maya@lumen.app · lumen.app/investors</p>
+      <div class="row mt-l" style="justify-content:center;gap:24px">
+        <span class="pill pill-accent">Let's talk</span>
+        <span class="pill">Deck v4.2 · Apr 2026</span>
+      </div>
+    </div>
+  </section>
+</div>
+<script src="../../../assets/runtime.js"></script>
+</body></html>

package/dist/__w3kits/assets/design-templates/html-ppt/templates/full-decks/pitch-deck/style.css ADDED Viewed

@@ -0,0 +1,40 @@
+/* pitch-deck — classic YC/VC pitch */
+.tpl-pitch-deck{
+  --bg:#ffffff;--bg-soft:#f6f7fb;--surface:#ffffff;--surface-2:#f2f4fa;
+  --border:rgba(20,25,60,.08);--border-strong:rgba(20,25,60,.18);
+  --text-1:#0d1130;--text-2:#4a5070;--text-3:#8a90ad;
+  --accent:#3b5bff;--accent-2:#7a46ff;--accent-3:#d94cff;
+  --grad:linear-gradient(135deg,#3b5bff 0%,#7a46ff 55%,#d94cff 100%);
+  --grad-soft:linear-gradient(135deg,#eef1ff,#f4edff 55%,#fbedff);
+  --radius:20px;--radius-lg:28px;
+  --shadow:0 14px 40px rgba(20,25,60,.08),0 2px 8px rgba(20,25,60,.04);
+  font-family:'Inter','Noto Sans SC',sans-serif;
+}
+.tpl-pitch-deck .slide{padding:88px 112px}
+.tpl-pitch-deck .kicker{color:var(--accent);font-weight:700}
+.tpl-pitch-deck .h1{font-size:86px;line-height:1.02;font-weight:900;letter-spacing:-.035em}
+.tpl-pitch-deck .h2{font-size:62px;font-weight:800;letter-spacing:-.03em}
+.tpl-pitch-deck .mega{font-size:180px;font-weight:900;line-height:.95;letter-spacing:-.05em;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
+.tpl-pitch-deck .mega-sub{font-size:28px;color:var(--text-2);margin-top:18px}
+.tpl-pitch-deck .cover-bg{position:absolute;inset:0;background:var(--grad-soft);z-index:-1}
+.tpl-pitch-deck .cover-blob{position:absolute;right:-140px;top:-140px;width:560px;height:560px;border-radius:50%;background:var(--grad);filter:blur(8px);opacity:.35;z-index:-1}
+.tpl-pitch-deck .brand-dot{display:inline-block;width:14px;height:14px;border-radius:50%;background:var(--grad);margin-right:10px;vertical-align:middle}
+.tpl-pitch-deck .brand{font-weight:800;font-size:22px;letter-spacing:-.02em}
+.tpl-pitch-deck .card{border-radius:var(--radius)}
+.tpl-pitch-deck .num-tag{font-family:'Inter',sans-serif;font-size:14px;font-weight:700;color:var(--accent);letter-spacing:.12em}
+.tpl-pitch-deck .big-q{font-family:'Playfair Display',serif;font-size:56px;line-height:1.15;font-weight:700;letter-spacing:-.02em;max-width:22ch}
+.tpl-pitch-deck .metric{display:flex;flex-direction:column;gap:6px}
+.tpl-pitch-deck .metric .n{font-size:72px;font-weight:900;letter-spacing:-.035em;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;line-height:1}
+.tpl-pitch-deck .metric .l{color:var(--text-2);font-size:16px}
+.tpl-pitch-deck .team-card{text-align:center;padding:32px 20px}
+.tpl-pitch-deck .avatar{width:96px;height:96px;border-radius:50%;margin:0 auto 14px;background:var(--grad);display:flex;align-items:center;justify-content:center;color:#fff;font-weight:800;font-size:32px}
+.tpl-pitch-deck .ask-box{background:var(--grad);color:#fff;padding:56px 64px;border-radius:var(--radius-lg);box-shadow:0 30px 70px rgba(59,91,255,.35)}
+.tpl-pitch-deck .ask-box .h2{color:#fff}
+.tpl-pitch-deck .ask-box .dim{color:rgba(255,255,255,.85)}
+.tpl-pitch-deck .traction-bar{display:flex;align-items:flex-end;gap:14px;height:240px;margin-top:24px}
+.tpl-pitch-deck .traction-bar .bar{flex:1;background:var(--grad);border-radius:8px 8px 0 0;position:relative;min-height:20px}
+.tpl-pitch-deck .traction-bar .bar span{position:absolute;bottom:-28px;left:0;right:0;text-align:center;font-size:13px;color:var(--text-3)}
+.tpl-pitch-deck .traction-bar .bar em{position:absolute;top:-28px;left:0;right:0;text-align:center;font-size:14px;font-weight:700;font-style:normal;color:var(--text-1)}
+.tpl-pitch-deck .section-num{font-size:220px;font-weight:900;line-height:.9;color:var(--surface-2);position:absolute;right:72px;bottom:40px;z-index:0;letter-spacing:-.05em}
+.tpl-pitch-deck .slide > *{position:relative;z-index:1}
+.tpl-pitch-deck .deck-footer{color:var(--text-3)}

package/dist/__w3kits/assets/design-templates/html-ppt/templates/full-decks/presenter-mode-reveal/README.md ADDED Viewed

@@ -0,0 +1,102 @@
+# presenter-mode-reveal · 演讲者模式模板
+一份专为**带逐字稿的技术分享**设计的 full-deck 模板。核心卖点是真正可用的**磁吸卡片式演讲者视图**：当前页 iframe 预览 + 下页 iframe 预览 + 大字号逐字稿 + 计时器，4 个卡片可任意拖拽/缩放，全部集成在 `runtime.js` 里，零依赖。
+## 使用场景
+- 技术分享 / tech talk（30-60 min）
+- 产品发布会主讲
+- 课程讲授
+- 任何**需要照着讲、但不能念稿**的正式演讲
+## 快速开始
+```bash
+cp -r templates/full-decks/presenter-mode-reveal examples/my-talk
+open examples/my-talk/index.html
+```
+## 键盘操作
+| 键 | 动作 |
+|---|---|
+| `S` | 打开演讲者窗口（弹出新窗口，原页面不动） |
+| `T` | 切换主题（5 种预设） |
+| `←` `→` | 翻页 |
+| `Space` / `PgDn` | 下一页 |
+| `F` | 全屏 |
+| `O` | 总览缩略图 |
+| `R` | 重置计时器（仅演讲者视图下） |
+| `Esc` | 关闭所有浮层 |
+## 主题切换
+模板预设了 5 个适配演讲场景的主题，在 `<html data-themes="...">` 属性里：
+```html
+<html lang="zh-CN" data-themes="tokyo-night,dracula,catppuccin-mocha,nord,corporate-clean">
+```
+按 `T` 循环切换。可以改成任何 `assets/themes/*.css` 里的主题。
+## 写逐字稿的规范
+**每一页的 `<aside class="notes">` 里写 150–300 字**。三条铁律：
+1. **不是讲稿，是提示信号** — 核心点加粗、过渡句成段、数据列清楚
+2. **150–300 字/页** — 按 2–3 分钟/页的节奏
+3. **用口语写** — "因此" → "所以"；"该方案" → "这个方案"；读一遍不拗口才对
+示例：
+```html
+<aside class="notes">
+  <p>大家好，今天跟大家聊一个 <strong>很多人忽略的问题</strong>——...</p>
+  <p>我先抛一个观点：<em>做 PPT 和讲 PPT 是两件事</em>。</p>
+  <p>接下来我会用 3 个例子证明这个观点...</p>
+</aside>
+```
+支持的 inline 标签：
+- `<strong>` — 高亮（橘色）
+- `<em>` — 斜体强调（蓝色）
+- `<code>` — 等宽字体
+- `<p>` — 分段（推荐每段讲 30-60 秒的内容）
+## 文件结构
+```
+presenter-mode-reveal/
+├── index.html       # 6 张示例 slide，每页都有完整逐字稿
+├── style.css        # scoped .tpl-presenter-mode-reveal 样式
+└── README.md        # 本文件
+```
+## 修改 / 扩展
+- **加页**：复制任意 `<section class="slide">` 块，改内容和 `<aside class="notes">`
+- **换主题**：改 `data-themes` 列表，或直接改 `<link id="theme-link" href="...">`
+- **改样式**：只动 `style.css`，不要碰根目录的 `assets/base.css`
+- **加动效**：在元素上加 `data-anim="fade-up"` 等（参考 `references/animations.md`）
+## 演讲者窗口的 4 个卡片
+按 `S` 后弹出的窗口里有：
+- 🔵 **CURRENT** — 当前页 iframe 预览（加载 `?preview=N` 模式，像素级完美，与观众端同 CSS/主题/字体）
+- 🟣 **NEXT** — 下一页预览，帮助准备过渡
+- 🟠 **SPEAKER SCRIPT** — 大字号逐字稿，可滚动
+- 🟢 **TIMER** — 经过时间 + 页码 + Prev/Next/Reset 按钮
+卡片操作：
+- **拖卡片头**（彩色圆点 + 标题的顶部条）→ 移动卡片
+- **拖卡片右下角** → 调整大小
+- 位置 + 尺寸自动存 localStorage，下次打开恢复
+- 底部 "重置布局" 按钮可恢复默认卡片排列
+翻页丝滑：iframe 只加载一次，后续翻页通过 `postMessage` 切换内部 slide，**不重新加载不闪烁**。两窗口通过 `BroadcastChannel` 双向同步。
+## 注意事项
+- **观众永远看不到 `.notes` 内容** — CSS 默认 `display:none`，只在演讲者视图里可见
+- **别把只给自己看的话写在 slide 本体上** — 所有提词必须在 `<aside class="notes">` 里
+- **双屏演讲**：打开 `index.html` 按 S 弹出演讲者窗口，把观众窗口拖到投影/外接屏 F 全屏，演讲者窗口留在自己屏幕

package/dist/__w3kits/assets/design-templates/html-ppt/templates/full-decks/presenter-mode-reveal/index.html ADDED Viewed

@@ -0,0 +1,187 @@
+<!DOCTYPE html>
+<html lang="zh-CN" data-themes="tokyo-night,dracula,catppuccin-mocha,nord,corporate-clean">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width,initial-scale=1">
+<title>演讲者模式示例 · Presenter Mode Deck</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 class="tpl-presenter-mode-reveal">
+<div class="deck">
+  <!-- ============ 1. COVER ============ -->
+  <section class="slide" data-title="Cover">
+    <p class="kicker">presenter-mode / demo</p>
+    <h1 class="h1 anim-fade-up" data-anim="fade-up">如何做一场<br><span style="background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent">有逐字稿</span>的技术分享</h1>
+    <p class="lede mt-m">按 <span class="mono">S</span> 进入演讲者视图 · <span class="mono">T</span> 切换主题 · <span class="mono">← →</span> 翻页</p>
+    <div class="speaker">
+      <div class="av"></div>
+      <div><b>@lewis</b><span>sharing talk · 30 min</span></div>
+    </div>
+    <div class="deck-footer">
+      <span class="mono">#presenter #逐字稿 #tech-talk</span>
+      <span class="slide-number" data-current="1" data-total="6"></span>
+    </div>
+    <aside class="notes">
+      <p>大家好，欢迎来到今天的技术分享。我是 lewis，今天想跟大家聊一个很多人忽略但其实非常影响演讲效果的话题——<strong>如何让一场技术分享既有深度，又讲得不卡壳</strong>。</p>
+      <p>在正式开始之前，先跟大家介绍一下这份 deck 本身：这是一个支持<em>演讲者模式</em>的 HTML 幻灯片模板。现在你们看到的是观众视图，但我自己的屏幕上看到的是完全不一样的东西——当前页、下一页、完整逐字稿、计时器，全在一块屏幕上。</p>
+      <p>为什么我要专门做这个？因为我发现自己做技术分享时最大的痛点不是 PPT 不够好看，而是<strong>讲到某一页突然不知道该说什么，或者忘了过渡怎么接</strong>。今天这份分享既是内容本身，也是个演示——我会一直开着演讲者模式讲，你们可以观察我讲得有多流畅。</p>
+      <p>今天分享大概 30 分钟，分 5 个部分。有问题随时打断。Let's go.</p>
+    </aside>
+  </section>
+  <!-- ============ 2. AGENDA ============ -->
+  <section class="slide" data-title="Agenda">
+    <p class="kicker">agenda</p>
+    <h2 class="h2">今天要讲的 5 件事</h2>
+    <div class="stack mt-l">
+      <div class="agenda-row"><span class="num">01</span><span class="t">为什么 PPT 本身做得好还不够</span><span class="d">~5min</span></div>
+      <div class="agenda-row"><span class="num">02</span><span class="t">演讲者模式到底该有哪些信息</span><span class="d">~6min</span></div>
+      <div class="agenda-row"><span class="num">03</span><span class="t">逐字稿怎么写才不像念稿</span><span class="d">~8min</span></div>
+      <div class="agenda-row"><span class="num">04</span><span class="t">Live demo · html-ppt skill 怎么用</span><span class="d">~8min</span></div>
+      <div class="agenda-row"><span class="num">05</span><span class="t">Takeaways + Q&amp;A</span><span class="d">~3min</span></div>
+    </div>
+    <aside class="notes">
+      <p>先过一下今天的议程。</p>
+      <p>第一部分我想先说服你们<strong>"PPT 做得漂亮≠讲得好"</strong>。我见过太多很精致的 deck，但讲的人一上去就开始 "嗯…这个…就是…"。</p>
+      <p>第二部分聊演讲者视图。业界的产品其实差别蛮大的，Keynote、PowerPoint、reveal.js 都有各自的方案，但真正好用的设计逻辑是什么，我会给出我的答案。</p>
+      <p>第三部分是今天的<em>核心</em>——逐字稿。很多人以为逐字稿就是把要说的话一字不差写下来，错。逐字稿的目的是让你<strong>"看一眼就接得上"</strong>，写法完全不一样。</p>
+      <p>第四部分会现场 demo 我自己用的 html-ppt skill，展示如何 30 分钟出一份带逐字稿的 deck。</p>
+      <p>最后收尾 + 答疑。</p>
+      <p>OK，进入第一部分。</p>
+    </aside>
+  </section>
+  <!-- ============ 3. PROBLEM ============ -->
+  <section class="slide" data-title="Problem">
+    <p class="kicker">// part 01 · problem</p>
+    <h2 class="h2">做 PPT 和讲 PPT，<br>是<span class="accent">两件事</span>。</h2>
+    <div class="grid g3 mt-l">
+      <div class="card card-accent">
+        <h4>✅ PPT 做得好</h4>
+        <p class="dim">主题统一、排版干净、图表清晰、动效克制。这些是"静态作品"的质量。</p>
+      </div>
+      <div class="card card-accent">
+        <h4>❌ 讲得好</h4>
+        <p class="dim">逻辑连贯、语速稳定、不 "嗯啊"、能接住问题、能当场调整节奏。</p>
+      </div>
+      <div class="card card-accent">
+        <h4>💡 差别在哪</h4>
+        <p class="dim">前者是<strong>纸上功夫</strong>，后者需要你<strong>"看一眼幻灯片就知道下句话说什么"</strong>。</p>
+      </div>
+    </div>
+    <aside class="notes">
+      <p>我先抛一个可能有争议的观点——<strong>做 PPT 和讲 PPT 是两件完全不同的事</strong>。</p>
+      <p>大家看左边这张卡片，"PPT 做得好" 意味着什么？主题统一、排版干净、图表清晰、动效克制——这些都是<em>静态作品</em>的质量标准，可以离线评判。</p>
+      <p>但中间这张卡片就不一样了："讲得好" 意味着逻辑连贯、语速稳定、不卡壳、能接住提问、能根据现场反应调整节奏——这些是<strong>临场能力</strong>，跟 PPT 好不好看基本没关系。</p>
+      <p>最关键的是右边这句话——讲得好的人，本质上是"<strong>看一眼幻灯片就知道下句话说什么</strong>"。这个能力靠什么？不是背稿，也不是即兴发挥，而是靠<em>合理设计的提词器系统</em>。</p>
+      <p>今天接下来 25 分钟，我就是围绕这个核心问题展开的。</p>
+    </aside>
+  </section>
+  <!-- ============ 4. SOLUTION ============ -->
+  <section class="slide" data-title="Presenter View">
+    <p class="kicker">// part 02 · presenter view</p>
+    <h2 class="h2">演讲者视图应该有<span class="accent">四块信息</span></h2>
+    <div class="grid g2 mt-l">
+      <div>
+        <div class="feature-row"><span class="num blue">①</span><div><b>当前页大图</b><p class="dim">占视图一半以上，保证你能扫一眼就知道观众现在看到什么。</p></div></div>
+        <div class="feature-row"><span class="num green">②</span><div><b>下一页预览</b><p class="dim">帮你提前准备过渡句，避免"下一页我忘了讲什么了"。</p></div></div>
+      </div>
+      <div>
+        <div class="feature-row"><span class="num orange">③</span><div><b>逐字稿区域</b><p class="dim">大字号、高对比度、支持滚动，这才是演讲者真正在看的东西。</p></div></div>
+        <div class="feature-row"><span class="num purple">④</span><div><b>计时器 + 页码</b><p class="dim">知道自己讲了多久、还剩几页，节奏全凭这个。</p></div></div>
+      </div>
+    </div>
+    <aside class="notes">
+      <p>演讲者模式应该给你四块信息。我按重要性排序。</p>
+      <p>第一块，<strong>当前页大图</strong>。这个必须占据视图一半以上空间，因为它是你跟观众的"同步锚"——观众看到什么，你脑子里也得是什么。</p>
+      <p>第二块，<strong>下一页预览</strong>。这个很多人不理解为什么要放，我解释一下：演讲最卡的瞬间不是讲某一页，而是<em>翻到下一页的那 2 秒</em>。如果你提前看到下一页长什么样，过渡句自然就有了。</p>
+      <p>第三块，<strong>逐字稿区域</strong>——这是今天的重点，下一部分我会专门讲。这里先说一个硬性要求：字号必须大、对比度必须高、必须能滚动。因为你讲的时候<em>只有余光瞄一下</em>，字小了根本来不及读。</p>
+      <p>第四块，<strong>计时器和页码</strong>。知道自己讲了多久、还剩几页——节奏感全靠它。Keynote 做得最好，reveal.js 默认不够清楚。</p>
+      <p>这四块缺一不可。今天这个 deck 我把这四块都做出来了，按 S 大家可以试试。</p>
+    </aside>
+  </section>
+  <!-- ============ 5. SCRIPT ============ -->
+  <section class="slide" data-title="Script">
+    <p class="kicker">// part 03 · script</p>
+    <h2 class="h2">逐字稿的<span class="accent">3 条铁律</span></h2>
+    <div class="stack mt-l">
+      <div class="rule-row">
+        <span class="num red">01</span>
+        <div>
+          <b>不是一字不差的讲稿，是<span class="accent">"提示信号"</span></b>
+          <p class="dim">把要讲的核心点加粗，把过渡句单独成段，把数据和名字列清楚——<em>让你看一眼就接得上</em>。</p>
+        </div>
+      </div>
+      <div class="rule-row">
+        <span class="num red">02</span>
+        <div>
+          <b>每页 <span class="accent">150–300 字</span>，不多不少</b>
+          <p class="dim">少于 150 字提示不够，多于 300 字你没时间读。按 2–3 分钟/页的节奏控制。</p>
+        </div>
+      </div>
+      <div class="rule-row">
+        <span class="num red">03</span>
+        <div>
+          <b>用<span class="accent">口语</span>写，不用书面语</b>
+          <p class="dim">"因此" → "所以"；"该方案" → "这个方案"。写的时候读一遍，听起来像说话才对。</p>
+        </div>
+      </div>
+    </div>
+    <aside class="notes">
+      <p>进入最核心的一部分——逐字稿怎么写。我总结了 3 条铁律。</p>
+      <p><strong>第一条，逐字稿不是讲稿</strong>。很多人一听"逐字稿"就以为要把每句话一字不差写下来。错。如果你照着稿念，观众会立刻看出来，信任感瞬间崩塌。</p>
+      <p>逐字稿的真实作用是<em>"提示信号"</em>——把核心要点加粗，把过渡句单独成段，把数据和专有名词列清楚。这样你讲的时候<strong>瞄一眼就能接得上</strong>，但说出来的还是你自己的话。</p>
+      <p><strong>第二条，每页控制在 150 到 300 字</strong>。这个是我做了十几场分享摸出来的经验值。少于 150 字提示不够，讲到一半卡住；多于 300 字你根本来不及扫完。按一页讲 2 到 3 分钟算，这个字数刚好。</p>
+      <p><strong>第三条，用口语写</strong>。这条最多人栽跟头。你写"因此"，讲出来会变成"所以"；你写"该方案"，讲出来会变成"这个方案"。<em>写的时候读一遍</em>，不拗口才对。</p>
+      <p>这三条配合起来，你会发现讲 PPT 突然变成了一件很舒服的事。</p>
+    </aside>
+  </section>
+  <!-- ============ 6. DEMO + CLOSING ============ -->
+  <section class="slide" data-title="Demo & Close">
+    <p class="kicker">// part 04-05 · demo + close</p>
+    <h2 class="h2">现在<span class="accent">你也能做到</span></h2>
+    <div class="code-block mt-m">
+<span class="comment"># 安装 html-ppt skill</span>
+<span class="cmd">npx</span> skills add <span class="flag">https://github.com/lewislulu/html-ppt-skill</span>
+<span class="comment"># 复制演讲者模式模板</span>
+<span class="cmd">cp -r</span> templates/full-decks/presenter-mode-reveal examples/my-talk
+<span class="cmd">open</span> examples/my-talk/index.html
+<span class="comment"># 键盘操作</span>
+<span class="flag">S</span>  <span class="comment">→ 进入演讲者视图</span>
+<span class="flag">T</span>  <span class="comment">→ 切换主题（5 种预设）</span>
+<span class="flag">← →</span> <span class="comment">→ 翻页</span>
+<span class="flag">R</span>  <span class="comment">→ 重置计时器</span>
+    </div>
+    <p class="lede mt-m tc">关键是：<strong>每一页 &lt;aside class="notes"&gt; 里写 150–300 字逐字稿</strong>。</p>
+    <div class="deck-footer">
+      <span class="mono">#thanks · Q&amp;A</span>
+      <span class="slide-number" data-current="6" data-total="6"></span>
+    </div>
+    <aside class="notes">
+      <p>最后我演示一下这个 skill 怎么用，给大家省点时间自己摸索。</p>
+      <p>第一步，装 html-ppt skill，一行命令。第二步，把我这个 <code>presenter-mode-reveal</code> 模板复制到你自己的 examples 目录。第三步，打开 html，按 S。</p>
+      <p>键盘操作我列在这里了。<strong>S 进入演讲者视图、T 切换主题、左右键翻页、R 重置计时器</strong>。主题默认带 5 个——tokyo-night、dracula、catppuccin-mocha、nord、corporate-clean——基本覆盖了深色技术分享、浅色商务汇报两种常见场景。</p>
+      <p>最关键的一步——<em>每一页底部的 <code>&lt;aside class="notes"&gt;</code> 里，老老实实写 150 到 300 字的逐字稿</em>。这是整个方法论的交付物。AI 可以帮你写初稿，但你一定要自己过一遍，读出来听听是不是你会说的话。</p>
+      <p>好，我今天就讲到这里。如果你做下一场分享的时候想起了这个"演讲者视图 + 逐字稿"的组合，并且觉得讲得比以前顺——那就是我最大的收获。谢谢大家，有问题现在开始。</p>
+    </aside>
+  </section>
+</div>
+<div style="position:fixed;bottom:12px;left:12px;font-size:11px;color:#484f5866;z-index:100;pointer-events:none">
+  S 演讲者视图 · T 切换主题 · ← → 翻页 · F 全屏 · O 总览 · R 重置计时
+</div>
+<script src="../../../assets/runtime.js"></script>
+</body>
+</html>