ROBOT LOBBY UI · FOUNDATIONS v4.1
VYIN AI · ROBOT LOBBY UI · FOUNDATIONS & COMPONENTS

Vyin AI 機器人互動介面 · 設計系統

Campaign《歡迎光臨魔法秘境》· Center 1280×800 · Side 1080×1920（面板 1920×1080 直立）· Kebbi 1024×600 · 深色模式 · 閱讀距離 1.5–3 m。這一頁是 token 與元件的規格來源；完整畫面在 screens.html，互動原型在 prototype.html。所有 kiosk 元件都以實際像素書寫、縮小展示。

圖例：DERIVED README 沒寫、從參考稿取比例對齊尺標而來 · PROPOSAL 提案，定案前可調 · RAW 不在色階內的原始值 · TBD 待硬體或工程確認。

tokens.css components.css README（嵌入說明）
00Chrome levels · 介面層級

畫面上「不是內容」的東西（logo、收音狀態、日期時間、對話框）叫 chrome。每個狀態只會落在三個層級之一， 由狀態決定、不由畫面決定。層級切換用 200ms 淡入淡出，一個任務裡只切一次進、一次出。

層級留什麼拿掉什麼用在版型
FULL · 完整logo、收音狀態、日期時間、AI 區、safe area、對話框—所有可以自由對話的狀態：對話畫面、Stop Idle、Review、Touch Panel、全部例外狀態--dialog · --cover
AMBIENT · 氛圍logo、收音狀態、AI 字幕（若有）日期時間、對話框內容主導、介面退到最少：Moving、Welcome / Exit Standby、Trailer 播放--standby · --cover-strong · --media
FOCUS · 專注AI 的一句指示、任務內容、campaign 外框、指令膠囊（辨識到指令時）、重要指令的提示一行logo、收音狀態、日期時間、電影 logo、對話框拍照 Position / Countdown / Capture / Success--media --camera
進入 FOCUS 的判準 · 四條都要成立

1. 使用者正在做一件有明確結束事件的單一任務（不綁時間長短）。
2. 使用者的注意力必須在畫面以外的實體上：鏡頭、自己的站位。
3. 收音是 COMMAND 或 OFF，不是開放對話，「可以跟我說話」此時沒有意義。
4. 任務結束後一定回到 FULL。拍照 Success 結束進 Review 就把頂列拿回來。
Trailer（A06）不符合第 1、3 條，所以是 AMBIENT 不是 FOCUS。

觸控規則 · 位置就是身份

AI 在上、使用者在下（README）。推到觸控：可以按的東西一律住在底部對話框那一格（x 212 · 856×96 · bottom 44）。 語音時它是 .kv-pill，觸控時它是 .kv-actions。safe area 只放資訊，卡片永遠不可按，所以使用者不用猜哪張能按， 工程端也只有一個觸控槽位要管。主要選項在最右、Grow 外框、一屏一個。按下回饋：填色升一階 + 縮 97%、120ms。

FOCUS 的配套規則

收音狀態由 Kebbi 臉下的光條承接。光條不可用時的 fallback：右上角只放 18px 收音光點、不帶文字（.kv-mic--dot，見 T2c）。
可說的指令只標「重要且常用」的那一句，用 .kv-hint 放在底部；不重要的不標。辨識到指令時由指令膠囊取代提示。
例外狀態（網路、太吵、逾時）一律打斷任務、回到 FULL，因為 FOCUS 沒有 AI 區可以放狀態說明。
品牌：FOCUS 畫面不放任何品牌，Vyin 與電影 logo 都不放，避免只剩其中一方。

01Color · 深色模式

錨定 Tailwind neutral，只有深色模式。同一時間只有一方是「亮」的：誰在說話，誰的文字就是 Neutral 50；另一方退為灰階。錯誤狀態不用紅色，公開螢幕上用 Warning。

SURFACE · BORDER
surface / base螢幕背景 · 對話開始後整屏此色
#0A0A0A · --kiosk-surface-base
surface / raised卡片、對話框、海報欄
#171717 · --kiosk-surface-raised
border / default2px 內框、進度軌、CTA 底、被打斷的未說字
#262626 · --kiosk-border
whiteQR 白底板
#FFFFFF · --kiosk-white
TEXT
text / primary主文字、AI 已說出的字
#FAFAFA · --kiosk-text-primary
text / muted-light媒體上的次要字、QR 卡標題
#D4D4D4 · --kiosk-text-muted-light
text / secondary卡片標籤、使用者上一句、meta
#A3A3A3 · --kiosk-text-secondary
text / tertiary對話框 placeholder、提示
#737373 · --kiosk-text-tertiary
text / disabled · AI unspokenAI 未說出的字、OFF 光點、灰階波形
#525252 · --kiosk-text-disabled
SYSTEM · ACCENT
success✓ 指令確認、成功燈
#10B981 · --kiosk-success
warningCOMMAND 收音狀態、網路狀態
#F59E0B · --kiosk-warning
danger保留，公開螢幕不使用
#EF4444 · --kiosk-danger
accent violet / amber / cyan保留給 campaign 以外的產品場景，此 Mode 不使用
#8B5CF6 / #FB923C / #22D3EE
CAMPAIGN LAYER · 每部片可換
--kiosk-camp小字 eyebrow，例如「現正熱映」
oklch(0.84 0.12 68)
--kiosk-camp-bg素材後方底色
oklch(0.37 0.07 292)

Campaign 色只碰 eyebrow 與素材底，永遠不碰 CTA 與 AI 狀態。換片時只換這兩個變數。目前值量自《歡迎光臨魔法秘境》正式海報：底色 = 漂浮系列海報平均色（深紫），eyebrow = 片名發光的色相、亮度拉到可讀。

RAW · 不在色階內 RAW
--kiosk-raw-touch-border觸控卡、指令提示、Toast 的 inset 內框
#333333
--kiosk-raw-camera-bg相機預覽佔位底色
#2A2A2A

參考稿用到但不在 neutral 色階裡。原樣保留，待決定是否收斂到 #262626 / #171717。

OVERLAYS
--kiosk-overlay-mediargba(23,23,23,.8) · 媒體上的狀態 chip 底
--kiosk-overlay-pillrgba(23,23,23,.92) · 指令提示、Toast 底
--kiosk-dimrgba(10,10,10,.62) · 聆聽時壓在底圖上
--kiosk-scrim-top / -bottom180deg / 0deg，.9 → 0，高 300（tall 360）
--kiosk-scrim-cover90deg，#0A0A0A 34% → .7 52% → 0 78% · P01、A02、A03 海報滿版時用
02Gradient · Grow（唯一的漸層）

Grow 只做外框、光點、細線、波形、Kebbi 眼睛。不整面填色、不放在正文後面、不做按鈕填色， 一屏最多 2 處，不放在海報區內。

--kiosk-grow
#1F6FE0 · 0%
#19E27C · 28%
#F4FBD0 · 52%
#FFB05A · 74%
#FF6A2B · 100% 
--kiosk-grow: linear-gradient(55deg, #1F6FE0 0%, #19E27C 28%, #F4FBD0 52%, #FFB05A 74%, #FF6A2B 100%);

/* 外框技法：雙背景 padding-box / border-box */
border: 4px solid transparent;
background: linear-gradient(#171717, #171717) padding-box, var(--kiosk-grow) border-box;
CTA 外框開始拍照
聆聽框 / 相框
AI 光點
Vyin 正在思考
進度 / 細線
波形
收音光點
可以跟我說話
G允許的 Grow 用途外框寬度：CTA / 對話框 / 卡片 4px · 照片 6px · 相機環 10px。
03Glow · 三級光暈

藍色外光的層級跟資訊層級一致：CTA 最亮（一屏只有一個）、聆聽框次之（暫時態）、卡片最弱（內容層）。 README 只列了前兩級，第三級 DERIVED 自參考稿 8 處相同數值。

--kiosk-glow-cta · 0 0 40px / .5掃描購票
--kiosk-glow-listen · 0 0 56px / .4
--kiosk-glow-card · 0 0 40px / .35（QR 卡）
--kiosk-halo-full / -command · 0 0 0 6px
--kiosk-orb-shadow · 8px 環 + 24px 暖光
GL光暈階全部只用 #1F6FE0 藍做外光；光點的環用 #19E27C 綠、#F59E0B 琥珀。
04Typography

Display / 數字：Unbounded 600 / 800（暫代，正式 wordmark 字體 TBD）。UI / 中文：Noto Sans TC 400 / 500 / 700 / 900。標註：IBM Plex Mono，只用在佔位圖與格線標籤，不是產品 UI。螢幕上最小字級 24px（1.5–3 m 閱讀距離）。下方以 1920 尺度實際渲染、縮小 50% 展示。

--kiosk-type-logoUnbounded 800 · 34px
Vyin AI
--kiosk-type-clockUnbounded 600 · 30px
20:16
--kiosk-type-dateNoto Sans TC 500 · 28px · secondary
9月29日 週二
--kiosk-type-mic500 · 24px · secondary · 最小字級
可以跟我說話
--kiosk-type-transcript700 · 72px / 1.5 · 108px 一行 · 最多 2 行
今天晚上還有兩場：19:10 IMAX 廳，和 21:30 在 7 廳。
--kiosk-type-caption700 · 56px / 1.5 · 媒體上加 text-shadow
站進框框裡。
--kiosk-type-user-live500 · 56px · 聆聽中的即時逐字稿
今天有什麼場次
--kiosk-type-user-pill500 · 44px · tertiary · 對話框 placeholder
直接說話就可以
--kiosk-type-card-label500 · 30px · secondary
IMAX 廳
--kiosk-type-card-value700 · 72px / 1.3
繼續聊
--kiosk-type-card-value-md700 · 56px / 1.3 · 建議卡 / 確認卡
是，就是這個
--kiosk-type-card-numUnbounded 800 · 128px / 1
19:10
--kiosk-type-touch-value700 · 80px / 1.2 · 觸控卡
洗手間
--kiosk-type-chip500 · 40px
可以看預告嗎？
--kiosk-type-cta / -cta-lg700 · 34px / 56px
開始拍照 開始拍照
--kiosk-type-status500 · 30px · secondary · 思考 / 重新連線
Vyin 正在思考
--kiosk-type-cmd / -tag700 · 44px ／ 500 · 24px
等一下 指令
--kiosk-type-toast / -cmd-hint500 · 36px
移動中，到下一站就能跟我聊
--kiosk-type-countdownUnbounded 800 · 400px / 1
3
--kiosk-type-hero-xl900 · 180px / 1.1 · Exit 道別PROPOSAL
謝謝觀賞
--kiosk-type-hero-lg900 · 150px / 1.1 · Welcome 片名PROPOSAL
歡迎光臨魔法秘境
--kiosk-type-hero-sub / -meta500 · 48px / 1.4 ／ 500 · 40pxPROPOSAL
魔法秘境的冒險，還沒結束。
7 廳 · 19:10 場次
--kiosk-type-side-title / -meta700 · 88 / 1.2 ／ 400 · 34PROPOSAL · 照片牆變體
魔法時刻 照片牆
只顯示同意公開的照片 · 新照片優先
TType roles橘色底線的是 README 字級表沒列、由參考稿收斂的提案。定案前可調，定案後移入正式表。
05Radius · Spacing
RADIUS
pill · 999
card · 48
plate · 24
plate-lg · 28
tag · 8
camera · 56
tile · 40 D
--kiosk-radius-pill999px對話框、CTA、chip、指令膠囊、Toast、倒數膠囊
--kiosk-radius-card48px卡片、QR 卡、照片、取景框
--kiosk-radius-plate / -lg24 / 28pxQR 白底板（400 卡 / 照片頁）
--kiosk-radius-tag8px小標籤
--kiosk-radius-camera56px相機 campaign 外環
--kiosk-radius-screen32px裝置外框，只用在參考圖
SPACING · 4 · 8 · 12 · 16 · 24 · 32 · 48 · 64 · 96
4
8
12
16
24
32
48
64
96
--kiosk-margin96px螢幕左右安全邊
--kiosk-card-gap24pxsafe area 內卡片間距
--kiosk-card-pad-y / -x48 / 52px卡片內距
--kiosk-pill-pad-x64px對話框左右內距
--kiosk-space-1 … -94 → 96其餘間距一律取尺標上的值
06Layout · Center 1280×800 格線

所有對話畫面都照這套格線排版，規則只有一條（2026-10-14）：內容區 = 800 − 頂列 − AI 區（行數 × 72 + 32）− 底部格（依內容：對話框 84 / chips 排 68 / 無 0，底距 44，間距 32）。 AI 1 / 2 / 3 行 × 有底部格 → 388 / 316 / 244，無 → 504 / 432 / 360；觸控模式（chips 排）2 行 360、3 行 288。三行 + 對話框放不下 268 的卡片，所以三行只用在觸控模式或純文字回答。頂列的「Show grid」可以在下方所有畫面疊上這些線。

TOP BAR · y 44–76
AI 逐字稿 · y 120 · 1152×144 · 2 行
SAFE AREA · y 296 · 1152×316
USER · x 212 · 856×84/96 · bottom 44
可以跟我說話
9月29日 週二20:16
今天晚上還有兩場：19:10 IMAX 廳，和 21:30 在 7 廳。
還想知道什麼，直接問我
L1標準對話畫面AI 2 行 · Safe Area 1152×316 · 對話框顯示。
COORDINATES · 1280×800
區塊xyw × h
頂列64441152 × 32
頂列（有倒數膠囊）D64361152 × 48
AI 逐字稿641201152 × 144
AI 逐字稿（封面）64120732 × 144
思考 / 重新連線列 D64288— × 48
Safe Area642961152 × 316
Safe Area · AI 1 行642241152 × 388
Safe Area · 對話框隱藏642961152 × 432
Safe Area · 1 行 + 隱藏642241152 × 504
AI 逐字稿 · 3 行 D641201152 × 216
Safe Area · 觸控模式（2 行 + chips 排）D642961152 × 360
Safe Area · 觸控模式 3 行 D643681152 × 288
Chips 排（觸控模式的底部格）D212bottom 44856 × 68
User 對話框212bottom 44856 × 84 / 96
User 對話框 · Photo idle（海報滿版）64bottom 44— × 84
底部動作列（觸控）212bottom 44856 × 96
指令膠囊400bottom 44480 × 76
Toast Dcenterbottom 48auto
媒體字幕641041152 × 56

全螢幕媒體（預告、相機）：媒體填滿 1280×800，上下各一層 300px 遮罩；AI 以 56px 字幕出現在上方遮罩，3 秒後淡出。

06bTemplates · 四種畫面骨架

34 張 Center 畫面只有四種骨架。.kv-screen--dialog / --media / --cover / --standby 會把直接子元件依 class 自動落到格線，不必再寫 kv-at-*；遮罩與光暈由版型的 ::before / ::after 產生。--dialog 的底（2026-10-14）：放一個 .kv-art，圖是首頁輪播進對話那一刻的那張（JS：進對話就凍住，回首頁才繼續），自動壓暗 + 模糊 + 遮罩。狀態修飾：--one-line（AI 1 行）、--countdown（頂列倒數、對話框隱藏）、 --no-pill（對話框隱藏）、--camera（FOCUS 層級：無頂列、字幕上移）、--cover-strong（Moving 的深遮罩）、--scrim-tall（預告上遮罩 360）、--bg-light（亮色底圖：日期時間切深色）。 2026-10-14 新增：--three-line（AI 3 行）、--touch（純觸控模式：對話框拿掉、chips 橫排住底部格、卡片與 QR 撐滿）、--notice（A09 倒數疊在任何畫面：只換頂列右側）。

AI
SAFE AREA
USER
可以跟我說話
9月29日 週二20:16
今天晚上還有兩場：19:10 IMAX 廳，和 21:30 在 7 廳。
IMAX 廳19:10
7 廳21:30
掃描購票
還想知道什麼，直接問我
T1--dialog頂列 + AI + safe area + 對話框。子元件：.kv-topbar .kv-transcript .kv-status .kv-safe / .kv-chips .kv-pill / .kv-actions .kv-cmd .kv-toast .kv-progress
ACTIONS · 同對話框那格
10 秒後結束對話
還在嗎？
沒有的話，我就先回到首頁囉。
結束對話
繼續聊
T1b--dialog --countdown頂列上移 y 52、對話框隱藏；有 .kv-actions 時動作列住進同一格，safe area 不延伸。決策型主要按鈕用 CTA 樣式。
TRAILER · FULL-BLEED
可以跟我說話
這是《歡迎光臨魔法秘境》的預告，想知道場次隨時問我。
T2--media滿版 .kv-art + 上下 300px 遮罩（::before / ::after）+ 56px 字幕（--fade：停 3s 後淡出，捲到會重播）+ 媒體版頂列（logo 陰影、mic 膠囊自動套用）。
暫停收音
9月29日 週二20:16
19:10 這場還有位子，21:30 也還有。
票和特餐組合我用 QR 給你。
還想問什麼，點下面的。
歡迎光臨魔法秘境最近場次
16:403 廳
19:10IMAX 廳
21:307 廳
購票 · 特餐組合
今天有什麼場次？有特餐嗎？幫我拍一張
T2b--dialog --touch --three-line純觸控模式：對話框拿掉、chips 橫排住進底部那格、AI 可到三行、卡片與 QR 撐滿 288 的內容區（2 行時 360）。A08 之後與觸控版待命都用這個。
可以跟我說話
9月29日 週二20:16
2:40 後去影廳迎賓
今天有本檔特餐組合，券在 QR 裡。
本檔特餐組合魔法秘境套餐爆米花 + 飲料 · 券在 QR 裡
購票 · 特餐組合
還想知道什麼，直接問我
T2c--dialog --noticeA09 預告收單：頂列右側日期時間換成倒數膠囊，其他都不動，可疊在任何畫面；歸零時對話還在 → E08。
LIVE CAMERA PREVIEW
看鏡頭！
3
✓等一下指令
T2b--media --camera · FOCUS頂列隱藏、字幕上移到 y 64 DERIVED；相機環、取景框、倒數數字、指令膠囊直接放進來。辨識到「等一下」時指令膠囊取代提示行。
LIVE CAMERA PREVIEW
看鏡頭！
3
說「等一下」可以暫停
只聽指令
T2cFOCUS · 提示行 + 光條 fallback.kv-hint 底部置中一句重要指令 DERIVED；Kebbi 光條不可用時右上角放 .kv-mic--dot（只有光點）。
CAMPAIGN KEY ART · FULL-BLEED
可以跟我說話
9月29日 週二20:16
想知道《歡迎光臨魔法秘境》嗎？
可以問我場次、預告或優惠。
今天有什麼場次？可以看預告嗎？有優惠嗎？
直接說話就可以
T3--coverStop Idle。滿版 key art + 左側 cover 遮罩（::before）+ AI 字自動收成 1100 寬 + chips。
暫停收音
歡迎進場 歡迎光臨魔法秘境 7 廳 · 19:10 場次
T4--standbyP09 / A07 謝謝卡（原 Welcome）。去字 key art 底（.kv-art：焦點、縮放、壓暗、暗角四個值在 --kiosk-keyart-*）+ 置中 .kv-hero。觸發時 eyebrow 換 --active 整句亮起、.kv-line--wide 960 加綠光。
07Components

每個元件用 kv- class 定義長相，用 kv-at- class 定義在格線上的位置。這裡只展示長相， 所以元件並排放在 1920 寬的深色舞台上；放進 .kv-screen 時加上對應的 kv-at-* 就會落到正確位置。 Kebbi 表情組本階段不做。

.kv-grow-ring · --kv-ring-w 4 / 6 / 10 · --kv-ring-fill
.kv-dot · --full / --command / --off / --orb / --side
.kv-eyebrow · campaign 色，唯一允許（目前無畫面使用，保留給無字 key art）現正熱映
.kv-line / --wide
.kv-route · Moving 站點
移動中 · 前往 B 點
.kv-hero · 置中 ｜ --left（縮小示意）
歡迎光臨！祝你有個魔法般的夜晚歡迎光臨魔法秘境7 廳 · 19:10 場次
C00Primitives被多個元件共用的最小單位。Grow 外框有 7 個元件共用同一段 CSS；光點 5 種都是同一個 .kv-dot。
.kv-topbar · 標準：logo + 收音狀態 ｜ 日期 + 時間
可以跟我說話
9月29日 週二20:16
.kv-topbar--countdown · 系統倒數取代日期時間，底部對話框隱藏
暫停收音
8 秒後回到首頁
壓在媒體上：logo 加陰影、收音狀態包膠囊，右側不放日期時間
只聽指令
C01Top bar.kv-topbar .kv-logo .kv-date .kv-clock · 位置 .kv-at-topbar（有倒數時 --countdown）
--full
可以跟我說話
--command
只聽指令
--off
暫停收音
--on-media
可以跟我說話
C02Mic status chip.kv-mic · Layer 1 常駐；三態互斥；Kebbi 光條同步。
思考 · 延遲 > 0.8s 才顯示
Vyin 正在思考
重新連線 · 同一樣式
重新連線中
.kv-progress · 拆句進度 3 段
C03Thinking · Progress.kv-status .kv-orb .kv-progress · 位置 .kv-at-status / .kv-at-progress
Karaoke · 已說 primary、未說 disabled · 隨 TTS 點亮
今天晚上還有兩場：19:10 IMAX 廳，和 21:30 在 7 廳。要幫你出訂票 QR 嗎？
使用者打斷 · 未說的字 300ms 內褪到 border 色
今天晚上還有兩場：19:10 IMAX 廳，和 21:30 在 7 廳。要幫你出訂票 QR 嗎？
第二行是提示 · secondary
想知道《歡迎光臨魔法秘境》嗎？
可以問我場次、預告或優惠。
C04AI transcript.kv-transcript · 沒有標籤、沒有頭像，位置就是身份 · 最多 2 行，超過由 AI 拆句 · 位置 .kv-at-ai（封面 --cover 1100 寬）
Idle · 1280×128 · placeholder
直接說話就可以
--listening · 1280×144 · Grow 外框 + 光暈 · 即時逐字稿 + 游標 + 波形
今天有什麼場次
--sent · 已送出（v4.1）· 同聆聽的環與光暈 · 顯示剛剛那句或點的那顆 · 沒有游標與波形 · 右側狀態字 · 用在 P01a 正在啟動 / A04 Vyin 正在思考 / E05 重新連線中
今天有什麼場次
Vyin 正在思考
說完後 · placeholder 換句（只有 Attraction 顯示）
還想知道什麼，直接問我
Photo idle：獨立 CTA 按鈕 + 語音提示（不再用 pill）
也可以直接說「幫我拍照」 開始拍照
太吵 · placeholder + 灰階波形（E06）
聽不太清楚…
C05User dialog pill.kv-pill .kv-wave .kv-caret · 沒有「你」標籤 · 300ms 內從底部升起 · 位置 .kv-at-pill（Photo idle 改為獨立 .kv-btn--lg + .kv-cta-hint）
.kv-btn · 34px開始拍照
.kv-btn--lg · 56px掃描購票
C06CTA button底 #262626 + 4px Grow 外框 + CTA 光暈 · 一屏只有一個；唯一例外是 Photo 延伸內容的 3 張 QR 卡。
.kv-chips · 最多 3 顆，直排（語音模式在內容區）· 最後一顆固定 .kv-chip--photo「幫我拍一張」
今天有什麼場次？有特餐嗎？幫我拍一張
C07Suggestion chip.kv-chip · 40/500 · padding 28 48 · 內框 2px。v4.1 出現規則：語音模式只在內容區沒有卡片時出（跟卡片同一格、二擇一）；觸控模式一直在底部格；最後一顆固定 .kv-chip--photo「幫我拍一張」（點了 = 說「可以幫我拍嗎」→ PICK；畫面已有拍照 CTA 或這組已拍過就不放）；觀眾一開口就收；E11 收尾模式不出。完整規則在 README 互動規則。
Info card · 文字值 / 數字值 · 只在資訊比 AI 說的多時出現 · QR 永遠最右
IMAX 廳19:10
7 廳21:30
掃描購票
--outlined 建議卡（E03）｜ 文字值
試著問今天有什麼場次？
試著問有什麼優惠？
位置洗手間在電梯旁邊
卡片永遠不可按 · 可按的在底部動作列（C16）
C08Cards.kv-card · flex:1 · 48 / 48 52 · 標籤上、值下 · 只在資訊比 AI 說的多時才出現，且永遠不可按 · 位置：放進 .kv-safe 再加 .kv-at-safe
.kv-qr 268×268 ｜ --active（唯一 CTA）｜ --lg 292（Exit）｜ --xl 照片 Review 頁
威秀官網
掃描購票
看幕後花絮
掃 QR 領取照片
C09QR card固定尺寸，永不拉伸 · 永遠是 safe-area 最右 · QR 碼 208 / 240 / 320 · 白板 padding 16 / 16 / 20 · 正式 QR 以 <img> 取代 .kv-qr__code
觸控規則：可以按的一律住在底部對話框那一格。語音 = .kv-pill，觸控 = .kv-actions。safe area 的卡片永遠不可按。 三顆 · 類別前綴
位置洗手間
這部電影片長
位置販賣部
兩顆 · 決策型：主要在右用 CTA 按鈕（Grow 外框 + 光暈）
結束對話
繼續聊
按下中 · 填色升一階 + 縮 97% · 120ms
位置洗手間
這部電影片長
位置販賣部
對照 · 資訊卡（矩形、不可按）vs 動作列（膠囊、可按）
IMAX 廳19:10
位置洗手間在電梯旁邊
結束對話
繼續聊
C16Action bar.kv-actions 1280×144 · 按鈕等寬 · 填 #262626 + 2px #525252 內框 · 44/700 · 位置：所有版型的直接子元件都自動落到對話框那格（不受 --countdown 隱藏）· 只有一顆時加 --single：置中、寬一半、Grow 外框（P01b）
--ok · 辨識到指令 · ✓ 立刻執行，不思考
✓等一下指令
非指令 · 一句提示 + 列出可說的指令 · 1.5s 自動收
拍完照再聊喔可以說「等一下」「重來」
C10Command pill.kv-cmd · 720×112 · COMMAND 模式 · 位置 .kv-at-cmd
.kv-toast · OFF 模式 · 3s
移動中，到 B 點就能跟我聊
.kv-countdown · 環用 --kv-progress 0–100
10 秒後結束對話
24 秒後回到首頁
C11Toast · Countdown pill.kv-toast 位置 .kv-at-toast · .kv-countdown 放在頂列右側取代日期時間
LIVE CAMERA · 1280×800
3
看鏡頭！
C12Camera · 取景框.kv-screen--camera：.kv-camera__frame 灰框 · .kv-camera__mask 框外壓暗（box-shadow）· .kv-camera__guide Grow 環，比例跟成品照片格一樣 4:3（--kiosk-hole-ratio、--kiosk-guide-w 750）· .kv-camera__digit 倒數 · .kv-camera__overlay（加 .is-overlay 才出現）疊照片框，裁到照片格：只疊明確的大佔位（連拍第一張的比莉；單張與連拍第二張不疊），動態框是透明影片 .kv-camera__overlay-video，影片真的在播（.kv-vid-on）才藏靜態圖；某款要裁掉擠進格子的小素材用 --kv-ov-clip（js/frames.js 的 viewfinderKeepX）。.is-strip-2 裁到下格、--single 裁到單張那格。
TOP BAR · 倒數版 y 36
AI · 1 行
SAFE AREA · y 224 · 1152×504
可以跟我說話
24 秒後回到首頁
拍好了！掃 QR 領取照片和影片。
PHOTO 16:9 · 812×456
掃 QR 領取照片
C13Photo frame（舊版，v4.0 起 P06 改用 C18 / C20）.kv-photo 600×340（AI 1 行）／ --lg 812×456（對話框隱藏）· 4px Grow 外框 · 圓角 32 · 照片以 <img> 放進框內
單張 · 靜態
單張 · 動態（月亮）
連拍 ① 蓄力 · 動態
連拍 ② 漂浮 · 動態
連拍 ③ 歡呼 · 動態
C18Story · 限動框成品.kv-story --single / --strip（寬度用 --story-w，9:16）· 三層由下往上：__bg 背景 → __slot 照片格（% 座標 --sx --sy --sw --sh，圓角 80/1080）→ __frame 照片框圖層。動態版再疊一層 video.kv-story__frame--video（透明影片 loop），.is-live 時換成它、照片格播「短影片」，影片真的在播（.kv-vid-on）才藏靜態框；.is-hold 停在快門那格（P06 時間軸）。單張一款「月亮」、連拍三款每組隨機一款，靜態 / 動態與停格姿勢 photoT 都登記在 js/frames.js（API：draw / apply / live / hold / playIn）。透明影片用 UA 判斷：Safari 給 .mov、其他給 .webm。用在 PICK、P05b、P06、E10、Side F 照片牆。照片是示意插畫。
可以跟我說話
10月19日 週一16:20
要拍一張大合照，還是兩張連拍？
一張大合照拍 1 次
照片 + 短影片
→
兩張連拍連拍 2 次
照片 + 短影片
→
選擇即同意：照片與短影片僅用於本次活動，24 小時後自動刪除
C19Pick card · 選版型.kv-pick 兩張 .kv-pick-card（標題 + 說明兩行「拍 N 次／照片 + 短影片」+ .kv-tap-arrow）· 卡片裡就是縮小的 .kv-story，照片格黑底、不放照片（看清楚版型本身），框播這組抽到的動態版 · 置底 .kv-hint--legal 同意拍照小字（只放這頁）· 按下 .is-pressed。
可以跟我說話
10月19日 週一16:20
拍好了！掃 QR
領照片和影片。
照片與短影片僅用於本次活動，24 小時後自動刪除
掃 QR 拿照片和影片
C20Review · 拍好了.kv-screen--review2 + .kv-review2（--strip 連拍擺法）：左欄 AI 兩行、右側 .kv-story 微傾 + .kv-review2__qr 疊在前面（.is-arrive 進場）· 置底 .kv-hint--legal 保留時間 · 限動框跑 P06 時間軸：短影片播到快門點停住（= 照片）、停 1.5s、接著播、loop · E10 用 .kv-review2--fail（縮小擺正、照片格 loading、沒 QR）。
可以跟我說話
9月29日 週二20:16
19:10 這場還有位子，21:30 也還有。
歡迎光臨魔法秘境最近場次
14:205 廳 · 剩 61 席
16:403 廳 · 剩 9 席
19:10IMAX 廳
21:307 廳
C17最近場次卡 · 4 場.kv-showtimes 問場次一律用這張（P01b、A05）。規則：最多 4 場；只列今天還沒開演的、近到遠；不足 4 場只放有的、不補空位；都開演完換成 __empty 一句「今日場次已結束 · 明天 10:30 起」。超過 4 場的用語音問「還有其他場次嗎」或掃 QR，不往下塞。每場：時間（display 64）、影廳、剩餘座位。不放海報（設計師 2026-10-06：留位置給場次），片名放標題列、太長用 … 截。
可以跟我說話
9月29日 週二20:16
今天還有兩場。
歡迎光臨魔法秘境最近場次
19:10IMAX 廳
21:307 廳
歡迎光臨魔法秘境最近場次
今日場次已結束 · 明天 10:30 起
C17b最近場次卡 · 2 場 / 已結束不足 4 場：場次欄只放有的、不補空位。全部開演完：場次欄換一句 __empty，片名不變。
KEY ART · FULL-BLEED
現在播的是預告，想知道場次隨時問我。
C14aScrim top + bottom全螢幕媒體 · 各 300px（tall 360）· 字幕在上方遮罩內
CAMPAIGN KEY ART
想知道《歡迎光臨魔法秘境》嗎？
可以問我場次、預告或優惠。
C14bScrim coverAttraction Stop Idle · 左側 34% 實色漸出 · AI 字寬 1100
今天有什麼場次
C14cDim聆聽時底圖壓 62% 遮罩，只有對話框亮

一起拍一張

拍好掃 QR 領取，照片 24 小時後自動刪除

S-FSide F · 前 · 照片牆1080×1920 .kv-side-photos（v4.1 取代素材牆）：四張限動框 .kv-story 疊著（頂張 720×1280，三張露邊各微傾），每 7 秒一張從下緣吐上來、顯影；標題 + 底部法務一行；待命全程使用，交付是 35s loop 影片
看鏡頭3
S-LSide F · 打光態.kv-side-light：拍照 P02 站位到 P04c 快門整段亮著當補光。暖白底 --kiosk-side-light（不是純白）+ __text「看鏡頭」／「換個姿勢」+ __digit 倒數（.is-count）· 快門 .is-flash 拉到純白 700ms。實機交付影片 side-f-count-5(b).mp4。
照片和影片
在上面的 QR 裡
S-DSide F · 拍完態.kv-side-done：P05b 起黑底 + 火光（.kv-embers，從底邊與中段升起、飛出上緣）→ 稀疏火光 + __msg「照片和影片在上面的 QR 裡」+ 往上箭頭，停到 P09；不放任何相紙形狀。.is-send 溶回照片牆。實機交付影片 side-f-done.mp4 → side-f-done-loop.mp4 → side-f-done-out.mp4。
CAMPAIGN POSTER
S-BSide B · 後 · 整張海報1080×1920 .kv-side > .kv-art，不疊任何我們的字；L / R 各放一張不同海報
魔法還沒結束
掃碼探索更多幕後花絮
S-X-FSide F · Exit 延伸邀請1080×1920 .kv-side-exit--top 去字 key art + 遮罩 + QR 卡靠上。Exit mode 用，其他 mode 回靜態 JPG。工程師備註：成本太高可退回 side-poster-a
魔法還沒結束
掃碼探索更多幕後花絮
S-X-BSide B · Exit 延伸邀請1080×1920 .kv-side-exit--bottom QR 卡靠下，搭配漂浮版 key art
TRAILER · 16:9
歡迎光臨魔法秘境
正式預告
S-TRSide · 預告同步播放1080×1920 .kv-side-trailer A06 時 Side F/B 同步播預告，16:9 影片置中 + 片名 + 進度條。不可觸控
KEBBI FACE · 1024×600 PROPOSAL · 示意

Kebbi 是女媧機器人，表情由它的 SDK 控制、能改多少待實機確認。.kv-face 只是示意「哪個畫面對應哪個表情」， 不是要廠商重畫 Kebbi 的臉。data-emotion 八種表情、data-mic 驅動臉下方的光條（FOCUS 時收音狀態只靠這條）。 畫面對照表在 Screens 頁尾，prototype.html 四螢幕模式逐步同步。

3
idle待機微笑，慢速眨眼
3
listen專注，眼睛放大加光
3
think眼睛上看、輕浮動
3
speak嘴形同步 TTS
3
countdown同步 3、2、1
3
happy迎賓 / 道別 / 拍好
3
sorry聽不清、查不到、逾時
3
sleep斷線 / 休眠
08Usage · 怎麼用這套
載入
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@400;500;700;900&family=Unbounded:wght@600;800&family=IBM+Plex+Mono:wght@400;500;600&display=swap" rel="stylesheet">
<link rel="stylesheet" href="css/tokens.css?v=4.1">
<link rel="stylesheet" href="css/components.css?v=4.1">
<!-- guide.css / guide.js 只給這份文件用，不要帶進產品 -->

相對路徑。整個資料夾放到任何子目錄底下都能開。IBM Plex Mono 只用在佔位圖與格線標籤，正式素材進來後可以不載。

組一個畫面
<div class="kv-screen">                         <!-- 1280×800 畫布 -->
  <div class="kv-at-topbar kv-topbar">…</div>    <!-- 位置 + 長相 -->
  <div class="kv-at-ai kv-transcript">…</div>
  <div class="kv-at-safe kv-safe">
    <div class="kv-card">…</div>
    <div class="kv-qr kv-qr--active">…</div>   <!-- QR 永遠最右 -->
  </div>
  <div class="kv-at-pill kv-pill">…</div>
</div>

用版型可以省掉 kv-at-*：

<div class="kv-screen kv-screen--dialog kv-screen--one-line">
  <div class="kv-topbar">…</div>              <!-- 自動落到 y 44 -->
  <div class="kv-transcript">…</div>          <!-- 自動落到 y 120、1 行 -->
  <div class="kv-safe kv-safe--one-line">…</div>  <!-- 自動落到 y 224 -->
  <div class="kv-pill">…</div>                <!-- 自動落到 bottom 44 -->
</div>

實機以 1280×800 全螢幕呈現，.kv-screen 直接放在 body 裡即可。其他解析度用 transform: scale() 等比縮放整個畫布，不要改 token。

命名規則
--kiosk-*所有 token。與 Vyin 官網的 token 完全獨立。
.kv-block元件本體，只管長相
.kv-block__element元件內部
.kv-block--modifier狀態或尺寸變體
.kv-at-slot格線位置，只在 .kv-screen 內用
.kv-actions唯一可按的元件，住在底部對話框那格；卡片不可按
.kv-screen--template四種畫面骨架：dialog / media / cover / standby，直接子元件自動定位
.kv-grow-ring .kv-dot .kv-eyebrow .kv-art .kv-hero原語，被多個元件共用
.kv-slideshow / __slide / __slide--active背景劇照輪播，3s 淡入淡出交替；放在 .kv-art 裡
.kv-side-photos / __title / __card / __footSide F 照片牆（v4.1）：四張 .kv-story 720 寬疊著，版位由 JS 設 transform；.is-dev 照片暗褐未顯影、.is-jump 關掉過渡
.kv-story / __bg / __slot / __frame / __frame--video限動框成品（C18）：背景 → 照片格 → 照片框；動態框是透明影片圖層。.is-live 動態、.kv-vid-on 影片在播、.is-hold 停在快門那格。款式與 API 在 js/frames.js
.kv-pick / .kv-pick-card / .kv-tap-arrow選版型（C19）：卡片裡是縮小的限動框，照片格黑底
.kv-review2 / --strip / --fail / __qr拍好了（C20）與照片還在傳（E10）的排版
.kv-camera__overlay / --single / -video取景框疊照片框（C12），只疊明確的大佔位；--kv-ov-clip 裁掉小素材
.kv-pill--sent / __status對話框「已送出」態（C05）：剛說的話或點的那顆 + 右側狀態字
.kv-chip--photo固定的「幫我拍一張」chip（C07），點了 = 進 PICK
.kv-side-light / .kv-side-doneSide F 拍照打光態（S-L）與拍完態（S-D）；實機用 assets/side/ 的影片
.kv-side-exit / --top / --bottomSide screen Exit 延伸邀請：去字 key art + 遮罩 + QR 卡。--top QR 靠上、--bottom 靠下
.kv-side-trailerSide screen 預告同步：A06 時 16:9 影片置中，下方片名與進度條
.kv-media-pause / .kv-media-btn預告觸控暫停（Grow 圓形播放鈕覆蓋）與「結束預告」按鈕
.kv-karaoke__done / __restVoice Layer：AI 說話時逐字亮（guide.js 自動套用於 __unspoken）
.kv-ph素材佔位，正式素材進來後移除
.kv-guide / .kv-guides開發用格線疊層，正式版不輸出
本階段不包含

· 四個 Mode 的 38 張完整畫面（P01–P09、A01–A09 + A02t、W01–W03、X01–X03、E01–E10 + E05b、M1–M4）
· 互動原型與狀態機
· Kebbi 表情組
· 正式素材、QR 產生、TTS 逐字同步的實作邏輯
這些會在後續階段以同一套 token 與元件疊上去。