# spinJoy · 流程規格（review 頁用）

> v0.3 · 2026-11-09。設計師裁定：**初版盡可能符合簡報內容**（decisions D16）；長句拆兩段講（D19）；W02 不放「Or just tell me」（D20）；加購做成 Pair & save 大卡（D21）；雙語切換、最終英文（D22）。
> 來源：`docs/ref/walmart-salesbot-ux-2026-11-05.pdf`（Wendy Yang，優化版體驗設計）。簡報沒寫的（待機、Side、Spinjoy 支線）標「簡報外」，初版只佔位。
> 只支援英文、美金；貨架位置與促銷用知識庫固定資料（簡報 p1）。

---

## 0. 一句話

顧客說品類 → 螢幕立刻出 3 款熱銷 + 問一題 → 第二輪給 4 款推薦 + 促銷 → 有搭配才推一句加購 → 邀請帶位 → 帶到貨架 → 「還需要什麼嗎？」（簡報 p3 流程圖）。

## 1. 畫面編號

`W` = 主線（簡報 ①–⑦）、`D` = Deals 入口、`C` = 比較、`E` = 例外、`S` = Spinjoy 支線（簡報外，第二階段）。每個編號對應 screens.html 一張畫面、Kebbi 腳本一條。

### 1.1 主線（簡報 p3–4，洗髮精例，對白原文）

| ID | 階段 | 說話者 | 對白 | Center（簡報「Collibot 螢幕」欄） |
|---|---|---|---|---|
| W00 | 待機（簡報外） | — | — | 提案 A（D25）：「Need a hand?」+ 副標 + 「Tap anywhere or just say hi」；底圖店內照片慢速輪播（佔位）；品牌待定 |
| W01 | ① 開場 | Kebbi | "Hi! Looking for something, or want to see this week's deals? Just tell me." | 兩個入口：**Find a product** ／ **This week's deals** |
| | | 顧客 | "I'm looking for shampoo." | |
| W02 | ② 熱銷 + 追問 | Kebbi | "Here are our top 3 shampoos this week. Is your scalp more oily, flaky, or is your hair damaged?" | 3 款洗髮精熱銷（Best Seller No.1–3）+ 3 顆按鈕 **Oily scalp ／ Dandruff ／ Damaged hair**（簡報的「Or just tell me」提示不放：底下的對話框就是提示，D20） |
| | | 顧客 | "Kind of oily."（或點 Oily scalp） | 按鈕亮起 |
| W03 | ③ 重篩推薦 + 相關促銷 | Kebbi | 兩段（D19）：① "Here are the best matches for an oily scalp. My top pick is [Product A] — it's made for oily scalps and it's our No.1 seller." ② "Also, [Product A] is [$X] off today, and [Product B] is buy one, get one 50% off." | 依條件重篩的 4 款控油洗髮精，Top1 排第一並標 **Top pick**；有促銷的顯示優惠標籤；第二段只換 AI 句、畫面不動 |
| W04 | ④ 關聯加購（條件） | Kebbi | "Since you're getting [Product A], the matching [conditioner] is 40% off as your second item." | **Pair & save** 大卡（D21）：Top1 + 潤髮乳併一組佔三格、amber 環、右欄 40% off / 合計價 / 省多少；其餘商品壓暗。⚠️ 這句英文三行，AI 區只放兩行，待定 |
| W05 | ⑤ 邀請帶位 | Kebbi | "Want me to take you to the shelf?" | **Take me there** 提示 |
| | | 顧客 | "Sure." | |
| W06 | ⑥ 帶位（CTA） | Kebbi | "Follow me!" | **Moving… Heading to Aisle [B3]** |
| W06a | 抵達 | Kebbi | "Here's [Product A]. The [conditioner] is right next to it." | Top1 + 搭配商品卡 |
| W07 | ⑦ 回環 | Kebbi | "Anything else I can help you find?" | 兩個入口 |
| | | 顧客 | "No, that's all. Thanks!" | |
| W08 | 結束 | Kebbi | "Enjoy your shopping!" | 提案 B（D25）：置中大字 + 「Here's what you picked:」+ 回顧條（你選的那款 · Aisle B3，依流程換）；2s 後回 W00 |

**流程規則**（簡報 p4，原文）：
- 顧客一開始就說出條件（"I need an oil-control shampoo"）→ 跳過 W02，直接 W03。
- W03 W04 W05 連續講，每段只用一句話；加購細節交給螢幕的組合卡。
- 顧客在 W03–W05 中途打斷（"Where is it?"）→ 直接跳 W06，不硬講完。做在 `?flow=interrupt`：句子截斷（已說的留著、沒說的褪色，ID W03i）→ W06。
- 顧客從 This week's deals 入口進來 → W02 的 3 款改為促銷款，其他相同（見 1.2）。
- W04 是條件環節：沒有搭配、中度搭配但沒情境、顧客這次已拒絕過加購 → W03 之後直接 W05。
- 顧客回答「不知道 / 都可以」→ 用熱銷 No.1 進 W03，不再追問（簡報 p5）。做在 `?flow=unsure`（W02u → W03n，Pantene 當 Top pick，沒有條件、沒有搭配優惠 → 跳過 W04）。
- 帶位後說出新品類 → 回 W02（簡報 p3 流程圖）。做在 `?flow=again`（W07a 顧客要牙膏 → W02t 牙膏熱銷 3 款 + 追問「Sensitive teeth / Brighter smile / Everyday clean」→ 之後同主線；示範到顧客回答）。

### 1.2 Deals 入口（簡報 p4、p8）

| ID | 階段 | Kebbi | Center |
|---|---|---|---|
| D02 | ② 促銷款 + 追問 | "Here are this week's shampoo deals. Is your scalp more oily, flaky, or is your hair damaged?" | 同 W02 版型，3 款改成**該品類促銷款**、第一輪就說明優惠 |
| → | | 接 W03 | |

簡報沒定義「點 This week's deals 之後、說品類之前」的畫面；初版從 W01 點 deals 後顧客說 "What's on sale? I need shampoo." 進 D02。D02 的句子兩段：先講三款優惠、再問一題（D19）。做在 `film-main.html?flow=deals`。

### 1.3 比較（簡報 p6–8，對白原文）· 做在 `film-main.html?flow=compare`：C01 → C02 → C03 選 B → W04b（B 的組合）→ W06b

| ID | 階段 | 說話者 | 對白 | Center |
|---|---|---|---|---|
| C01 | 從 W03 發起 | 顧客 | "Can you compare A and B?"（或在螢幕勾選兩款） | 勾選兩款後出現 **Compare** 按鈕 |
| C02 | 比較 | Kebbi | 兩段（D19）：① "Both are made for oily scalps. A is [12 oz] and [$X] off today." ② "B is a bigger [25 oz] bottle, and it's buy one, get one 50% off. Which one works better for you?" | A、B 並排比較表（規格 / 價格 / 促銷 / 使用場景對齊，不標推薦款，有促銷的格子顯示優惠標籤），保留 **Back to list** |
| C03 | 選定 | 顧客 → Kebbi | "I'll take B." → "Great choice. The matching [conditioner] for B is 40% off as your second item." | B 標示為已選 → 加購搭配**顧客最後選的那款** → 接 W05 |
| C02x | 商場沒賣 | Kebbi | "We don't carry that one here, but [C] is also an oil-control shampoo. Let me compare it with [A] for you." | 換一款同類型來比 |
| C02y | 還沒決定 | Kebbi | （"Let me think"）"They're on the same shelf. Want me to take you there?" | 跳過 W04 → W05 |
| C02z | 回列表 | 顧客 | "Go back" 或點 Back to list | 回 W03 |

比較規則（簡報 p6）：只講 1–2 個關鍵差異 + 哪款有促銷，約 8–10 秒；講過條件就講跟條件相關的差異、沒講過就講主要功效和價格；促銷只說事實、不當推薦理由；不給結論、用問題收尾。

### 1.4 關聯加購的話術分支（簡報 p10–11，初版只做 W04 那句，其餘列著）

| 情境 | Kebbi |
|---|---|
| 強搭配，有加購優惠（W04） | "Since you're getting [Shampoo A], the matching [conditioner] is 40% off as your second item." |
| 強搭配，沒有優惠 | "Dentists recommend a new toothbrush every 3 months. Want to grab one with your toothpaste?" |
| 情境套組，顧客提過健行 | "For your hike, a sports drink helps you stay hydrated. Want to add one?" |
| 中度搭配，顧客提過大掃除 | "For the bathroom, [Bathroom Cleaner A] works great. Just don't mix it with bleach." |
| 顧客拒絕加購（E03） | "No problem! Want me to take you to the shelf?" |
| 沒有搭配（買水） | "Here's [Water A], our best seller. Want me to take you to the aisle?" |

### 1.5 例外（簡報沒定義，初版只列不做）

| ID | 情境 | 處理 |
|---|---|---|
| E01 | 沒回應 / 沒點擊 | 待定（簡報：帶位後無回應 → 回到第一輪） |
| E02 | 目錄沒有該品類 | 待定 |
| E03 | 拒絕加購 | "No problem! Want me to take you to the shelf?" → 組合卡收掉、顧客說 Sure → W06 → W06s 抵達只剩 Top1。做在 `?flow=decline` |
| E04 | 帶位被擋 / 走掉 | 待定 |

### 1.6 Spinjoy 支線（簡報外；2026-11-09 做進第一版，`?flow=spinjoy`，D28）

設計師 2026-11-09 選 C（主線 Walmart、支線 Spinjoy），但初版先符合簡報。支線草案保留在 git 歷史（v0.1，commit 09a1b63）：S01 介紹 + 追問要不要摺 → S02 推薦方案 + First Week Free → S03 選洗劑 → S04 QR / 帶到櫃台 → PHONE → S05 帶位 → S06 抵達。Spinjoy 素材已在 `assets/spinjoy/`。

## 2. 假資料（初版，洗髮精）

品類：**Shampoo**（走道 B3，照簡報）。品牌是 Walmart 真的有賣的，價格是大約值；**商品圖先佔位**（簡報只要求知識庫固定資料）。

| # | 商品 | 容量 | 價格 | 熱銷排名 | 標籤 | 促銷 |
|---|---|---|---|---|---|---|
| 1 | Pantene Pro-V Daily Moisture Renewal | 25.4 oz | $6.97 | No.1 | damaged | — |
| 2 | Head & Shoulders Classic Clean | 23.7 oz | $7.97 | No.2 | dandruff | — |
| 3 | Dove Daily Moisture | 20.4 oz | $5.97 | No.3 | damaged | — |
| A | Garnier Fructis Pure Clean | 12 oz | $4.47 | No.1（控油） | oily | **$1 off** |
| B | TRESemmé Purify & Hydrate | 25 oz | $5.97 | No.4 | oily | **BOGO 50% off** |
| C | OGX Apple Cider Vinegar | 13 oz | $8.97 | No.8 | oily | — |
| D | Suave Essentials Daily Clarifying | 30 oz | $2.97 | No.6 | oily, value | — |

- 第一輪（W02）：#1 #2 #3。Deals 入口（D02）：A、B + 一款別的促銷。
- 第二輪「Oily scalp」（W03）：A（Top pick）、B、C、D。「Dandruff」「Damaged hair」兩個答案初版不做。
- 關聯加購（W04）：Garnier Fructis Pure Clean **Conditioner** 12 oz $4.47，40% off as second item（洗髮精 ⇄ 潤髮乳，流程接續・強，簡報 p9）。
- 比較（C02）：A（12 oz，$1 off）vs B（25 oz，BOGO）— 數字照簡報的 [12 oz] / [25 oz]。商場沒賣的替代：C。
- 方括號代入：[Product A] = Garnier Fructis Pure Clean、[$X] = $1、[Product B] = TRESemmé Purify & Hydrate、[conditioner] = Garnier Fructis Pure Clean Conditioner、[B3] = B3。

## 3. Side F / B（簡報外；提案第一版 2026-11-09，D29，screens.html #sj-side，rig 已接）

提案：

| | 待命 | 互動中 | 帶位中 |
|---|---|---|---|
| Side F（前） | 品牌牆 | 跟階段換：追問時品類情境圖；推薦時 Top pick 大圖 + 價格；加購時組合圖 | Follow me → Aisle B3 大箭頭 |
| Side B（後） | This week's deals 輪播 | 不變 | 廣告位 |

## 4. Kebbi

表情用 115 支內建（`assets/kebbi/`）。講話 → talk、聽 → listen、想 → think、帶路 → 看前方、抵達 / 收尾 → happy、例外 → sorry、待機 → idle。確切編號在寫劇本時定。

## 5. review 頁的「其他」下拉分組（草案）

- **主線**：Find a product（W01 → W08）
- **入口**：This week's deals（D02 →）
- **分支**：一開始就說條件（跳過 W02）、中途打斷直接帶位、不知道選哪個（No.1 進 W03）、比較兩款（C01 →）、商場沒賣（C02x）、還沒決定（C02y）、拒絕加購（E03）
- **第二階段**：Spinjoy 支線

## 6. 語言（D22）

最終呈現英文。review.html header 的 EN / 中 切換（`js/lang.js`，localStorage `spinjoy-lang`）：Center 的 AI 句、按鈕、標籤與 Kebbi 台詞一起換；screens.html 右上「中文」勾選同一套。中文只是給設計師看的翻譯，不是交付內容。

## 7. 待確認（不擋路）

1. 待機畫面 W00 的品牌（簡報沒定；機器人是誰的？）。
2. 商品圖：先佔位；之後要不要從 walmart.com 抓（別人的素材，授權跟 Spinjoy 圖不同）。
3. W04 的簡報句英文三行（"Since you're getting Garnier Fructis Pure Clean, the matching conditioner is 40% off as your second item."），AI 區只放兩行，第三行被切。拆兩段不自然；選項：縮短商品名（"Garnier Pure Clean"）、或這一步允許三行、內容區下移。