Prototype Wrapper v1.1
設計原型互動導覽工具
一行 script，讓原型自己說故事
Agent Product Team · 2026
1. 問題定義
設計師的痛點
- 做完原型後，沒有好方法錄製互動流程給利益相關人
- 螢幕錄影 (Loom) 只是影片，無法讓人自由探索
- 留言只能在影片時間軸上，無法錨定到具體互動步驟
- 每次 demo 都要設計師重複操作、口頭解說
2. 解決方案
一行 <script> 搞定一切
- 在任何原型頁面加入一行 script 標籤，即刻啟用導覽功能
- Shadow DOM 隔離 — 不影響原型樣式
- Designer 模式：正常操作即錄製，自動生成步驟描述
- Reviewer 模式：旁白驅動播放 — TTS 先說，動作後執行
- 所有步驟皆可加旁白（narration）
- 純前端、零依賴、零後端、單一檔案 (~20KB)
<script src="prototype-wrapper.js"></script>
← 就這樣，沒了
3. 功能展示
- ✅ 注入任意原型頁面（無需 iframe、無需包裝）
- ✅ 完整錄製：click / input / scroll / navigation
- ✅ 自動步驟描述（🖱 Click: "Top Stories" on HN）
- ✅ 每個步驟可加旁白文字
- ✅ Narration-driven 播放（先說再做）
- ✅ 模式切換 — Panel 內一鍵切換 Designer / Reviewer
- ✅ 情境管理：新增、選擇、匯出 JSON、匯入
- ✅ TTS 語音旁白（Web Speech API）
- ✅ localStorage 持久化 + JSON 匯出入
4. 競品差異化
| Loom | Maze | Arcade | Wrapper v1.1 |
|---|
| 互動性 | ❌ 影片 | ⚠️ 限 Figma | ⚠️ 截圖 | ✅ 即時 |
| 自由探索 | ❌ | ❌ | ❌ | ✅ |
| 步驟旁白 | ❌ | ⚠️ | ❌ | ✅ TTS |
| 任意原型 | ✅ | ❌ | ⚠️ | ✅ |
| 免後端 | ❌ | ❌ | ❌ | ✅ |
| 整合成本 | 需錄影 | 需匯出 | 需截圖 | 1 行 script |
| 檔案大小 | — | — | — | ~20KB |
5. 技術架構
┌─────────────── Prototype Page ───────────────┐
│ │
│ 原型 HTML/CSS/JS（完全不受影響） │
│ │
│ ┌─── prototype-wrapper.js (inject) ───┐ │
│ │ │ │
│ │ Shadow DOM Host │ │
│ │ ├── FAB (浮動按鈕) │ │
│ │ ├── Panel (錄製/播放控制) │ │
│ │ └── Overlay (旁白顯示) │ │
│ │ │ │
│ │ Modules: │ │
│ │ ├── Recorder (click/input/scroll) │ │
│ │ ├── Player (narration-driven) │ │
│ │ ├── TTS (Web Speech API) │ │
│ │ └── Storage (localStorage + JSON) │ │
│ └─────────────────────────────────────┘ │
│ │
│ 零依賴 · 純 Vanilla JS · 單一檔案 │
└───────────────────────────────────────────────┘
6. UX 流程
🔴 Designer 流程
- 打開原型頁面
- 點擊 FAB → Panel 展開
- 點「開始錄製」
- 正常操作頁面 → 動作自動捕捉
- 點「停止」→ 命名情境
- 為每個步驟加旁白文字
- 切換至 Reviewer 模式預覽
▶️ Reviewer 流程
- 打開原型頁面
- 點擊 FAB → 看到情境列表
- 選擇情境 → 播放開始
- 旁白先朗讀（TTS）
- 朗讀完成 → 高亮元素 → 執行動作
- 底部控制條：暫停 / 繼續 / 停止
- 隨時可暫停並自由探索
7. v1.0 → v1.1 演進
| v1.0 | v1.1 |
|---|
| 架構 | iframe + Vue 3 包裝殼 | 單一 script 注入 |
| 依賴 | Vue 3 + 多個 composable | 零依賴、純 Vanilla JS |
| 樣式隔離 | iframe 天然隔離 | Shadow DOM |
| 整合方式 | 開啟 Wrapper 貼上原型 URL | 原型頁加一行 script |
| 模式切換 | URL 參數切換 | Panel 內即時 toggle |
| 旁白 | 部分步驟 | 所有步驟皆可加旁白 |
| 播放節奏 | 固定時間間隔 | Narration-driven |
| 檔案大小 | 整個 Vue App | ~20KB 單檔 |
8. 下一階段
- 短期：使用者測試 (5-10 位設計師) → 收集回饋
- 中期：語音錄製取代 TTS、多語言旁白支援
- 長期：雲端同步、多人協作留言、Analytics
商業模式
- 目標客群：設計團隊 (3-20 人)
- 定價模型：Free tier (3 scenarios) + Pro ($12/user/mo)
- GTM：開源 → ProductHunt → 設計社群口碑
謝謝
Prototype Wrapper v1.1
一行 script，讓每個原型都能自己說故事
<script src="prototype-wrapper.js"></script>