SPINJOY · SCREENS v0.1
SPINJOY · WALMART 導購 · CENTER SCREENS 1280×800

spinJoy 的 Center 畫面

每張畫面都只用 index.html 定義的 token、元件與版型拼成。畫面編號照 docs/flow-spec.md，對白照 Walmart 簡報原文，商品圖、背景是佔位。 上一案（威秀 × 迪士尼）的畫面已全部移除（2026-11-09）；要對照看 kiosk-design-system-2026-11-09/screens.html。

提案 · 待機（W00）與結束（W08） 簡報沒定義這兩張。各出兩版給設計師挑：待機 A「找東西」/ B「本週優惠」；結束 A「一句話」/ B「加回顧條」。樣式在 components.css「待機與結束提案」段，底圖是佔位（實機放店內照片慢速輪播，同上一案待命）。
W00-A待機 · A 找東西AMBIENT提案
簡報沒定義待機。沿用 DS 待命畫面（.kv-screen--start.is-idle：慢速輪播底圖、大標、底部「點一下」提示、火星）。只留兩段字（設計師 2026-11-09）：「Need a hand?」+ 副標把「跟我說、或點螢幕」講進去；沒有 eyebrow、沒有底部提示。點任何地方或開口 → W01。
STORE PHOTO · SLOW SLIDESHOW
Say hi anytime
Mon, Nov 92:32 PM
Need a hand?
Shampoo, snacks, cleaning supplies… tell me, or tap the screen, and I'll take you right to it.
.kv-screen--start.is-idle > .kv-welcome（__title + 新 __sub）+ .kv-start-hint · 點 / 說 → W01
W00-B待機 · B 本週優惠AMBIENT提案
B 版把待機當吸引：本週三款優惠放中間（.kv-standby-deals，同商品卡），標題「What's on sale this week」。點一款 = 說了那一款（跳 D02 那條）；開口照 W01。缺點：待機就塞商品，遠看比較雜。
STORE PHOTO · SLOW SLIDESHOW
Say hi anytime
Mon, Nov 92:32 PM
THIS WEEK'S DEALS
On sale this week
Shampoo$1 off
Garnier Fructis Pure Clean
$4.4712 oz
ShampooBuy 1, get 1 50% off
TRESemmé Purify & Hydrate
$5.9725 oz
Shampoo50¢ off
Suave Essentials Daily Clarifying
$2.9730 oz
Tap a deal or just say hi
.kv-standby-deals > .kv-products ×3 · 點一款 → D02 · 說 → W01
W08-A結束 · A 一句話AMBIENT提案
簡報只有一句 "Enjoy your shopping!" + 回到待機。A 版置中大字（.kv-bye，字級同上一案 Exit「謝謝觀賞」）+ 一句副標，2s 後淡回 W00。
STORE PHOTO · SLOW SLIDESHOW
Bye
Mon, Nov 92:32 PM
Enjoy your shopping!
Come find me anytime you need a hand.
.kv-bye > __title + __sub · 2s → W00
W08-B結束 · B 加回顧條AMBIENT提案
B 版多一條玻璃膠囊回顧「你選的那款 · 走道」，顧客轉身走還記得去哪裡拿；沒選商品（例如中途離開）就不出。
STORE PHOTO · SLOW SLIDESHOW
Bye
Mon, Nov 92:32 PM
Enjoy your shopping!
Here's what you picked:
Garnier Fructis Pure Clean · AisleB3
.kv-bye + __recap（圖 + 名稱 + 走道）· 2s → W00
提案 · Side F / B 兩片 1080×1920 直式、不能觸控、不放要讀的小字。分工沿用上一案（flow-spec §3）：Side F 是 Center 的配角、只跟階段換；Side B 是廣告位、永遠本週優惠。樣式在 components.css「Side F / B 提案」段；review.html 的 rig 已接上，跟著步驟換。
SF0Side F · 待機 · 品牌牆提案
正面 Center 下方、排隊的人看的。待機時講機器人能幹嘛（三件事）+ 「Just say hi」；跟 Center 的待機 A 同一組語言。品牌字標待定。
Aisle helper

Need a hand?

Find any product
Show this week's deals
Walk you to the shelf
Just say hi.
Or tap the screen above.
W00 / W08 → .kv-sf--idle
SF1Side F · 互動中 · 本週優惠提案
W01–W05、W07 整段不變（上一案規則：Side 只跟階段換、不逐步變，拍照 / 推薦時不搶注意力）。三款優惠直排，排隊的人看得到。
This week

Shampoo deals

$1 off todayGarnier Fructis Pure Clean
$4.4712 oz
Buy 1, get 1 50% offTRESemmé Purify & Hydrate
$5.9725 oz
50¢ offSuave Essentials Daily Clarifying
$2.9730 oz
Ask me about any of these.
W01–W05 / W07 → .kv-sf--deals
SF2Side F · 帶位中 · 跟我走提案
機器人在走，Side F 對著跟在後面的顧客與路人：大箭頭 + Follow me + 目的地；底下一句「借過」。Spinjoy 支線目的地換 Front entrance。
›››

Follow me

Heading to Aisle B3
Excuse me — coming through.
W06 / S05 → .kv-sf--go
SF3Side F · 抵達 · 走道牌 + 商品提案
到位後 Side F 變成大走道牌（B3 三百像素）+ 品類 + 你選的那組；商品跟著流程換（a 主線 / b 選 TRESemmé / solo 拒絕加購 / nr 不知道→No.1 / sj Spinjoy 櫃台，rig 依 marker 切）。
You're here
B3

Shampoo

Your pickGarnier Fructis Pure Clean
$4.4712 oz
40% off · 2nd itemGarnier Pure Clean Conditioner
$4.4712 oz
Right in front of you.
W06a / W06b / W06s / W06n / S06 → .kv-sf--here[data-var]
SF3-sjSide F · 抵達 · Spinjoy 櫃台提案
Spinjoy 支線的抵達：Spinjoy / Front entrance + 店員照片卡 + 首週免費。
You're here

Spinjoy

Front entrance

First week freeWash, Dry & Fold · $1.99/day
Look for the red apron
Open daily 7 AM – 9 PM.
S06 → .kv-sf--here[data-var=sj]
SB0Side B · 永遠 · 本週優惠海報提案
背面給沒在互動的人、遠處的人。永遠本週優惠（跟 Side F 互動中同一套）；底部一條 Spinjoy 店內服務帶（要不要放待定：Spinjoy 是客戶，但簡報是 Walmart 導購）。
On my way to Aisle B3 · back soon
This week's deals

On sale now

$1 off todayGarnier Fructis Pure Clean
$4.4712 oz
Buy 1, get 1 50% offTRESemmé Purify & Hydrate
$5.9725 oz
50¢ offSuave Essentials Daily Clarifying
$2.9730 oz
Spinjoy
Laundry done for youInside this store · from $0.99/day · first week free
所有階段 → .kv-sb
SB1Side B · 帶位中 · 多一條提案
機器人移動時背面的人只看到它走掉：上方多一條「On my way to Aisle B3 · back soon」，其餘不變。
On my way to Aisle B3 · back soon
This week's deals

On sale now

$1 off todayGarnier Fructis Pure Clean
$4.4712 oz
Buy 1, get 1 50% offTRESemmé Purify & Hydrate
$5.9725 oz
50¢ offSuave Essentials Daily Clarifying
$2.9730 oz
Spinjoy
Laundry done for youInside this store · from $0.99/day · first week free
W06 / S05 → .kv-sb.is-go
spinJoy · Walmart 導購 Claude Design 定稿 v2（2026-11-09，設計師 review 過；交接包 design-briefs/product-cards-2026-11-09/handoff-v2/）。畫面照 docs/flow-spec.md；對白照簡報（W03 拆三段、W04 改短版）；商品圖、背景是佔位。樣式在 components.css「商品元件 v2」段；markup 由 tools/build-markup.py 產生，screens 與 film 同一份。
W01① 開場 · 兩個入口FULLv2 定稿
交接 W01：兩張入口大卡 .kv-entry（icon、eyebrow、標題、副標、右下 72 圓鈕）。W07 回環同這張。
Listening
Mon, Nov 92:32 PM
Hi! Looking for something, or want to see this week's deals? Just tell me.
Just say it — I'm listening
.kv-entry ×2 · 點左 → 聆聽品類 · 點右 → D02
W02② 熱銷＋追問FULLv2 定稿
交接 W02：3 格熱銷 .kv-prod（排名標籤在圖井左上）+ 右欄 .kv-ask ×3（膠囊、右端描邊圓箭頭）。
Listening
Mon, Nov 92:32 PM
Here are our top 3 shampoos this week. Is your scalp more oily, flaky, or is your hair damaged?
Best seller No.1

Pantene Pro-V Daily Moisture Renewal

$6.9725.4 oz
Best seller No.2

Head & Shoulders Classic Clean

$7.9723.7 oz
Best seller No.3

Dove Daily Moisture

$5.9720.4 oz
Just say it — I'm listening
.kv-shelf > .kv-products--3 + __aside > .kv-ask ×3 · 點 / 說 → W03
W02a② 顧客回答 · 按鈕亮起FULLv2 定稿
交接 W02a：選到的 .kv-ask.is-on（白底、✓），其餘 .is-off 壓暗；對話框顯示顧客的話。
Listening
Mon, Nov 92:32 PM
Here are our top 3 shampoos this week. Is your scalp more oily, flaky, or is your hair damaged?
Best seller No.1

Pantene Pro-V Daily Moisture Renewal

$6.9725.4 oz
Best seller No.2

Head & Shoulders Classic Clean

$7.9723.7 oz
Best seller No.3

Dove Daily Moisture

$5.9720.4 oz
Kind of oily.
.kv-ask.is-on / .is-off · .kv-pill--sent · 0.3s → W03
W03③ 重篩推薦＋相關促銷FULLv2 定稿
交接 W03：4 格，Top pick .kv-prod--top（Grow 3px 環 + 白底 Top pick 標籤 + Grow 小點）、優惠標籤在圖井左下。勾選比較的圓平常不出現（設計師 2026-11-09）：點整張卡 = 勾選，勾了才出白框 + ✓。AI 句拆三段，畫面放第一段。
Listening
Mon, Nov 92:32 PM
Here are the best matches for an oily scalp. My top pick is Garnier Fructis Pure Clean.
Top pick · No.1$1 off today

Garnier Fructis Pure Clean

$4.4712 oz
B1G1 50% off

TRESemmé Purify & Hydrate

$5.9725 oz

OGX Apple Cider Vinegar

$8.9713 oz

Suave Essentials Daily Clarifying

$2.9730 oz
Say a name, or tap two to compare
.kv-products--4 > .kv-prod--top · .kv-tag--pick / --deal · __check · 說完 → W04 / W05
C01勾選兩款 → CompareFULLv2 定稿
交接 C01：兩張 .is-checked（白 2px 框 + 實心 ✓），底部動作列「Clear / Compare 2」（.kv-btn__count）。
Listening
Mon, Nov 92:32 PM
Here are the best matches for an oily scalp. My top pick is Garnier Fructis Pure Clean.
Top pick · No.1$1 off today

Garnier Fructis Pure Clean

$4.4712 oz
B1G1 50% off

TRESemmé Purify & Hydrate

$5.9725 oz

OGX Apple Cider Vinegar

$8.9713 oz

Suave Essentials Daily Clarifying

$2.9730 oz
.kv-prod.is-checked ×2 · .kv-actions > .kv-btn + __count · 點 → C02
C02比較 · 兩款並排FULLv2 定稿
交接 C02：左標籤欄 148 + 兩欄（可點）；不標推薦款；優惠格用 .kv-tag--deal；右上描邊圓是「選這款」。左下「Back to list」玻璃底、不要框線（設計師 review）。
Listening
Mon, Nov 92:32 PM
Both are made for oily scalps. Garnier is 12 oz and $1 off today.
Back to list
Just say it — I'm listening
.kv-compare > __labels + __col ×2 · .kv-home · 點一欄 / 說 → C03
C03選定 BFULLv2 定稿
交接 C03：B 欄 .is-selected（Grow 環 + 實心 ✓）、A 欄 .is-dimmed。接 W04（B 的組合）。
Listening
Mon, Nov 92:32 PM
Great choice.
Back to list
I'll take TRESemmé.
.kv-compare__col.is-selected / .is-dimmed · → W04b
C02x商場沒賣 → 換一款來比FULLv2 定稿
交接 C02x（簡報 p7）：顧客要比的那款沒賣 → 換同類型的 OGX 來比；沒優惠的格子 __cell--none「No deal this week」。
Listening
Mon, Nov 92:32 PM
We don't carry that one here, but OGX Apple Cider Vinegar is also an oil-control shampoo.
Back to list
Just say it — I'm listening
.kv-compare__cell--none · 之後同 C02
W04④ 關聯加購 · Pair & save ★FULLv2 定稿
交接 W04（設計師 review：只顯示加購、其他候選拿掉、大卡撐滿 1152；貨架線拿掉；優惠欄 400 寬）。兩支瓶子站同一個圖井、中間「+」；名稱列折後價 amber + 原價劃掉；右欄 PAIR & SAVE / 40% OFF / Both for $7.15。AI 句改短版（2 行）。
Listening
Mon, Nov 92:32 PM
Since you're getting Garnier Pure Clean, its conditioner is 40% off as your 2nd item.
Your top pick40% off · 2nd item

Pure Clean Shampoo

$3.47$4.4712 oz

Pure Clean Conditioner

$2.68$4.4712 oz
Pair & save
40% OFF

the matching conditioner, as your 2nd item

Both for $6.15$8.94
Just say it — I'm listening
.kv-bundle > __pair（__stage + __names）+ __save · 說完 → W05
W05⑤ 邀請帶位 · Take me thereFULLv2 定稿
交接沒畫這張（跟 W04 同畫面 + 底部動作列）：Not now / Take me there。
Listening
Mon, Nov 92:32 PM
Want me to take you to the shelf?
Your top pick40% off · 2nd item

Pure Clean Shampoo

$3.47$4.4712 oz

Pure Clean Conditioner

$2.68$4.4712 oz
Pair & save
40% OFF

the matching conditioner, as your 2nd item

Both for $6.15$8.94
.kv-actions · 點 / 說 Sure → W06
W06⑥ 帶位（CTA）· Moving…AMBIENTv2 定稿
交接 W06（AMBIENT）：左上大字 Follow me! + Grow 細線 + 「Moving… heading to Aisle B3」膠囊；左下「Picking up」清單（縮圖 + 名稱）。交接叫 .kv-move，跟 DS 既有的撞名，專案裡改叫 .kv-go。
Moving
Mon, Nov 92:32 PM

Follow me!

Moving… heading toAisle B3

Picking up

Garnier Pure Clean shampoo + conditioner

.kv-go > __title / __line / __route + __list · 抵達 → W06a
W06a抵達 · 走道牌 + 同一組FULLv2 定稿
交接 W06a：左走道牌 .kv-aisle（You're here / Aisle / B3 / 結帳提醒）+ 同一組 .kv-bundle--found（拿掉優惠欄、標籤換「Right next to it」）。
Listening
Mon, Nov 92:32 PM
Here's Garnier Pure Clean. The conditioner is right next to it.
You're hereAisleB3

Conditioner is 40% off as your 2nd item at checkout.

Your shampooRight next to it · 40% off

Pure Clean Shampoo

$3.47$4.4712 oz

Pure Clean Conditioner

$2.68$4.4712 oz
Just say it — I'm listening
.kv-aisle + .kv-bundle--found · → W07
W06s抵達 · 拒絕加購後只有一款FULLv2 定稿
交接沒畫這張（拒絕加購 E03 之後的抵達）：走道牌 + 一張寬卡 .kv-prod--wide（橫排：圖井 320 + 大字名稱 / 價格 / 一句位置提示），撐滿走道牌右邊（設計師 2026-11-09：單卡撐寬）。
Listening
Mon, Nov 92:32 PM
Here's Garnier Pure Clean. This is the one.
You're hereAisleB3

Your shampoo is on the middle shelf.

Your shampoo$1 off today

Garnier Fructis Pure Clean

$4.4712 oz

Middle shelf, right in front of you. $1 off today at checkout.

Just say it — I'm listening
.kv-aisle + .kv-prod--top.kv-prod--wide · → W07
D02Deals 入口 · 促銷 3 款FULLv2 定稿
交接 D02：同 W02 版型，3 款換促銷款、排名標籤換「This week」、優惠標籤在圖井左下。交接第 3 款是佔位，這裡用 products.js 的 Suave 50¢ off。
Listening
Mon, Nov 92:32 PM
Here are this week's shampoo deals. Is your scalp more oily, flaky, or is your hair damaged?
This week$1 off today

Garnier Fructis Pure Clean

$4.4712 oz
This weekB1G1 50% off

TRESemmé Purify & Hydrate

$5.9725 oz
This week50¢ off

Suave Essentials Daily Clarifying

$2.9730 oz
Just say it — I'm listening
同 W02 · 點 / 說 → W03
S01Spinjoy · 介紹 + 追問FULLv2 定稿
第二階段支線（decisions D13）。入口：W01 顧客說 "Can you do my laundry?"。三個方案卡 .kv-plan（spinjoy.com 真實價：$0.99 / $1.99 一天；Day Pass 網站沒標價）+ 右欄追問一題「要不要摺」。
Listening
Mon, Nov 92:32 PM
Spinjoy is right here inside this Walmart — drop off a bag, pick it up clean. Want it folded too, or just washed and dried?
Unlimited

Wash & Dry

$0.99/day
$29.99/mo · introductory price
  • Professionally washed and dried
  • Ready for pickup
Unlimited

Wash, Dry & Fold

$1.99/day
$59.99/mo · introductory price
  • Washed, dried and folded
  • Drawer-ready
One time

Day Pass

Ask at the counter
single visit
  • No subscription
  • Ask at the counter
Just say it — I'm listening
.kv-plan ×3 + .kv-ask ×2 · 點 / 說 → S02
S02Spinjoy · 推薦方案FULLv2 定稿
顧客選「要摺好」→ Wash, Dry & Fold 變 Top pick（Grow 環 + First week free 標籤），其他壓暗。
Listening
Mon, Nov 92:32 PM
Then Wash, Dry & Fold is your plan — everything comes back drawer-ready, and your first week is free.
Unlimited

Wash & Dry

$0.99/day
$29.99/mo · introductory price
  • Professionally washed and dried
  • Ready for pickup
First week freeUnlimited

Wash, Dry & Fold

$1.99/day
$59.99/mo · introductory price
  • Washed, dried and folded
  • Drawer-ready
One time

Day Pass

Ask at the counter
single visit
  • No subscription
  • Ask at the counter
Just say it — I'm listening
.kv-plan--top + .kv-tag--deal · → S03
S03Spinjoy · 選洗劑FULLv2 定稿
方案內含選洗劑（spinjoy.com：Tide / Arm & Hammer / 低敏無香）。三張商品卡、圖井文字佔位、勾選鈕；條件環節，顧客說不用就跳過。
Listening
Mon, Nov 92:32 PM
You can pick your detergent too — Tide, Arm & Hammer, or our hypoallergenic, fragrance-free one.
TIDE

Tide

included
ARM & HAMMER

Arm & Hammer

included
FRAGRANCE-FREE

Hypoallergenic

included
Just say it — I'm listening
.kv-prod ×3（__img > .kv-ph）· 點 / 說 → S04
S04Spinjoy · QR + 帶位邀請FULLv2 定稿
DS 的 QR 卡 .kv-qr--active + 方案摘要 .kv-signup；底部動作列「Not now / Take me there」。掃了 QR → PHONE 那一步（rig 讓位給手機）。
Listening
Mon, Nov 92:32 PM
Scan to get the app and start your free week — or want me to take you to the counter?
Get the app
.kv-signup + .kv-qr · 掃 → PHONE · 點 / 說 Sure → S05
S05Spinjoy · 帶位AMBIENTv2 定稿
同 W06 的 .kv-go，目的地換成 Spinjoy · Front entrance，清單換成要辦的方案。
Moving
Mon, Nov 92:32 PM

Follow me!

Moving… heading toSpinjoy · Front entrance

Signing up

Wash, Dry & Fold · first week free

.kv-go · 抵達 → S06
S06Spinjoy · 抵達櫃台FULLv2 定稿
左 .kv-aisle 改成櫃台（Spinjoy · Front entrance · 營業時間 · 找紅圍裙）+ 右邊寬卡放店員照片（spinjoy.com 的圖）。接 W07 回環。
Listening
Mon, Nov 92:32 PM
Here's Spinjoy. Look for the team member in the red apron — they'll get you set up.
You're hereSpinjoyFront entrance

Open daily 7 AM – 9 PM. Look for the red apron.

Spinjoy Certified Laundry Pros™

They'll set you up with your bag and your first free week. Drop off while you shop, pick up on your way out.

Just say it — I'm listening
.kv-aisle + .kv-prod--wide · → W07