頁面概念圖¶
參考件（非 spec）：本檔為圖像生成提示詞；產出精選收
參考雛形/。頁面內容元素以撰寫當時 wireframe 為基準——版面 ／ 機制以 canon 為準（頁面線框.md；編輯器版面權威 ＝ 編輯器操作.md §0.5）。 概念圖豁免圖檔禁字鐵則（ui-frontend.md §16）——圖內文字僅為設計示意、非出貨資產；實作時所有文字 ＝i18n 執行期渲染。
本文件提供 Open4WD 各遊戲畫面的 codex 圖像生成提示詞，產出遊戲感概念示意圖而非可實作的 HTML mockup。
這些圖的角色：視覺風格定錨 + 跨頁一致性參考 + 跟工程實作的對話介面。實作時的 RWD 過渡尺寸 / 互動動態 / 真實字串 / 真實狀態，不在這份產出責任內。
工程對版以 頁面線框.md、參考雛形/定版/ 與代表 viewport 驗收為準；本檔只產生「遊戲感概念藝術」，不可反向覆寫 route、互動或 RWD canon。
設計依據¶
主視覺方向：主 C（3D 動畫電影卡通）70% + 輔 A（四驅車動畫熱血）30%
選這組合的理由：
- 模型成本一致性：Tripo 出 cartoon 風品質穩定，與 場地參考圖.md 已選的「3D 動畫電影 stylized」場地風格同調
- 跨年齡推廣：Mini 4WD 動畫本身受眾橫跨小孩 / 大人懷舊，C 不卡任一邊
- 零件 photoreal 是有意為之的差異化：UI / 場地 = stylized / 卡通；零件 = photoreal product render（管理後台展示零件規格用）
參考類型（只取品類語言，不指涉任何具體作品——美術方向.md「參考原則」）：
- 主軸 C：卡通風卡丁車／玩具車競速遊戲的主選單、HUD 與角色化 UI 品類
- 輔助 A：1990 年代四驅車動畫與街機賽車遊戲的熱血速度感品類
視覺風格細節¶
主 C 元素（套全頁面，大致 70% 視覺份量）¶
| 元素 | 規則 |
|---|---|
| Panel 形狀 | 圓潤 chunky，邊角 fillet 8-16px，禁止細線、極簡 1px 邊框 |
| Panel 陰影 | 軟陰影 + ambient occlusion，不用死硬投影 |
| 3D 車輛 | 略 toon-shaded（cel-shading 邊緣 + 軟內部漸層），輪廓誇張、彈性誇張感 |
| 圖示 | 大、厚、實心（不用 1px 線稿圖示） |
| 排版 | 大字、寬鬆呼吸、避免密集表格 |
| 動勢 | spring-bouncy 構圖，小角度 3D depth 暗示（panel 微傾斜、層次堆疊） |
| 配色 | 飽和 + 明亮，避免大面積純黑 / 純灰 |
輔 A 元素（情境出現，per-page 強度見下表）¶
| 元素 | 用法 |
|---|---|
| 速度線 | race / result / hero shot 背景，從焦點放射 |
| 漫畫分鏡框 | result 領獎台，可拆 2-3 格漫畫式並排 |
| 戲劇燈光 | rim light + lens flare，套用在 hero 車輛 |
| 大字標題 | 「READY」「GO!」「FINISH!!」「BOOST」等動畫風大書法 / 印刷字 |
| Motion blur | race 頁面背景元素，車輛主體保持清晰 |
| 高對比角度 | hero shot 採低角度仰拍 / 高角度俯衝，不要平視 |
A 強度 per-page 表（敘事節奏：離比賽越近 A 越濃）¶
| 頁面 | A 強度 | 表現重點 |
|---|---|---|
/login |
5% | 純 C 為主，背景偶爾速度線裝飾 |
/garage |
15% | 3D 車 hero 略 rim light，整體仍 friendly 3D 動畫電影卡通 |
/garage/edit/:id |
15% | 同上，工具感稍多 |
/ugc、/ugc/:cid |
20% | 場地／零件預覽帶 cinematic |
/race-config |
35% | CTA 按鈕速度線、戲劇燈光開始顯現 |
/room/:roomId |
45% | 倒數時 A 升溫、玩家排隊位視角戲劇化 |
/race/:sessionId |
60% | 速度線 + motion blur + 漫畫框 + 大字 BOOST |
/result/:resultId |
65% | 領獎台 + lens flare + 大書法字「優勝」/「FINISH」 |
/creator/:peerId |
15% | 純 C 為主 |
/settings |
5% | 工具感、純 C |
/help |
5% | 同上 |
色票 v2（warmify + 飽和加大）¶
| Token | v1（既有） | v2（新） | 變化理由 |
|---|---|---|---|
bg.canvas |
#0B0C0E（current default） |
#1a1410（概念稿暖深棕黑） |
cinematic 暖底、不冰冷 |
bg.surface |
#171a1f |
#221d22（warm slate） |
暖化 panel |
bg.surfaceRaised |
#20242b |
#2d262b |
暖化浮層 |
border.subtle |
#323842 |
#3d3438 |
暖化分隔線 |
text.primary |
#f3f4f6 |
不變 | 文字保持中性 |
text.secondary |
#aeb7c2 |
#b8b0a8 |
略暖灰 |
primary |
#38bdf8 sky blue |
不變 | 角色不變 |
accent.speed |
#f97316 orange |
不變色但佔比放大 | 從邊框點綴 → 大塊主導情緒 |
accent.energy |
#facc15 yellow |
同上 | 同上 |
success / warning / danger |
不變 | 不變 | 狀態色保持辨識 |
新增 glow.warm |
— | #fb923c 半透明 |
hero shot rim light / lens flare |
新增 glow.cool |
— | #7dd3fc 半透明 |
科技感點綴 |
核心原則：v1 的 sky blue / speed orange / energy yellow 角色不變，但 使用面積放大，且整體底色從冷黑挪到暖棕黑。3D 動畫電影配色精神 = 飽和明亮但不刺眼。
共通 prompt prefix¶
所有 UI 圖像提示詞都應該以這段開頭：
Concept art for "Open4WD" — a stylized 3D Mini 4WD-style decentralized racing
game UI mockup, depicted as if rendered for a high-quality animated game
trailer or marketing key art. NOT a photograph, NOT a SaaS dashboard, NOT a
generic admin panel.
VISUAL STYLE — primary 70% chunky candy-bright 3D-animated-film kart aesthetic:
chunky rounded panels with soft fillets (8-16px), bouncy spring-physics
layouts, slightly toon-shaded 3D vehicles with exaggerated proportions,
bright saturated colors, soft ambient-occlusion shadows. Secondary 30% anime
hot-blooded racing accents (1990s racing anime / arcade racer feel): selective speed
lines, dramatic rim lighting, manga-style framing, bold large title
typography, motion blur on background elements only.
COLOR PALETTE — warm dark base (#1a1410 canvas, #221d22 panel surfaces,
#2d262b raised), with sky blue (#38bdf8) for interactive focus, BOLD ORANGE
(#f97316) as the dominant accent that takes large color real estate (NOT
just borders or chips), energy yellow (#facc15) for energy / rewards, warm
glow halos (#fb923c) on hero elements. The overall feeling is warm /
cinematic / inviting, NOT cold / industrial / dashboard-like.
LAYOUT PHILOSOPHY — UI panels are layered with subtle 3D depth (slight
parallax / overlap / soft drop shadows), NOT flat coplanar grids. The 3D
vehicle (when present) is the HERO — placed at a dynamic angle (low-angle
hero shot or 3/4 dramatic view, NOT centered front-elevation product shot),
occupying significant screen real estate, with rim lighting and a glow
halo. UI panels frame the hero, not compete with it.
TYPOGRAPHY — title text is large, bold, slightly stylized (game-poster
energy), NOT thin Linear / Material design weights. CJK text minimal and
large; English labels short and game-y ("BOOST", "GO!", "READY").
ABSOLUTELY AVOID:
- SaaS dashboard aesthetics (Linear / Notion / Material admin look)
- Flat coplanar panel grid layouts with equal margins
- 3D vehicle as a centered product photo with no drama
- Cold-only palette (over-reliance on dark navy + sky blue without warm
oranges)
- 1px thin borders, hairline dividers, dense data tables
- Pure dark background with only small color accents (orange should
participate in the mood, not just garnish)
- Photorealistic rendering (we want stylized cartoon, not photo)
NO ZERO-ANNOTATION RULE here (unlike asset/track prompts) — UI screens
naturally contain text and labels. But keep generated text minimal and
short; codex generated CJK / long English text often comes out garbled, so
prefer short bold labels. Visual layout consistency matters more than text
correctness for these mockups.
使用流程¶
Phase 0 — 風格校準（1 個 prompt） 跑 hero moodboard，目的是驗證 C+A 70/30 比例對不對。失敗模式（codex 出來太冷 / 太 SaaS / 太 cinematic / 太卡通沒熱血）由你描述後，我調 prefix 再跑。
Phase 1 — /garage 試做（2 個 prompt：桌面 + 手機）
Phase 0 OK 後跑這兩張。失敗則先回 Phase 0 重校。
Phase 2 — 全頁面補完（22 個 prompt：11 頁 × 桌面 / 手機） Phase 1 OK 後我再補上去。本檔案此區段先空，待 Phase 1 通過再寫。
Phase 0 → Phase 1 → Phase 2
moodboard garage 2 張 餘 11 頁 × 2 = 22 張
Phase 0: Hero Moodboard¶
目的：不畫具體 UI 頁面，產一張「Open4WD key art / 動畫片頭定格」概念圖，驗證 C+A 70/30 比例。
輸出：1 張 16:9 寬螢幕（建議 2560×1440 或 1920×1080）
驗收標準：
- 主視覺是 3D 動畫電影風 chunky 卡通 3D 車（不能是 photoreal）
- 有清楚的動畫熱血元素（速度線 / 戲劇燈光 / 大字標題其中至少 2 項）
- 整體溫度感是「暖棕黑底 + 大塊飽和橘 / 黃」（不是冷藍黑 + 點綴橘）
- 看起來像「遊戲片頭」，不像「app 產品照」
[共通 prompt prefix]
Hero key art / opening trailer freeze-frame for Open4WD. A stylized 3D
Mini 4WD racing car (chunky cartoon proportions, slightly toon-shaded, body
shell in vibrant candy red with chrome accents) drifts diagonally across
the frame in a low-angle hero shot, kicking up sparks and dust. The car
has visible exposed wheels, twin guide rollers, and a small front-mounted
weapon attachment — clearly a Mini 4WD style vehicle, not a regular sports
car.
Background: stylized urban neon street at twilight, warm orange sunset
glow on horizon, blurred neon city skyline, anime-style RADIAL SPEED LINES
emanating from behind the car. The street has freshly-painted asphalt with
glowing white lane markings.
Lighting: dramatic rim lighting on the car (warm orange halo behind, cool
sky-blue rim on the front), strong cinematic key light from camera-front-
right, soft fill from below, lens flare on top-right glinting off the
chrome. Motion blur ONLY on the background buildings and the road, the
car itself is sharp and centered focus.
Foreground UI accents (small, peripheral — these establish the UI style
language for downstream pages):
- Top-left: a chunky rounded badge showing "POS 3/8" with a small
icon, in warm orange on dark warm-brown panel
- Top-right: a small wallet / coin chip "1,234" in energy yellow
- Bottom-center: a large rounded primary CTA button "GO!" or "RACE" in
bold poster typography, glowing orange with a slight cartoon bounce
shadow
- Bottom-left: a small radial energy gauge (chunky, not Linear-style),
glowing yellow
Big bold stylized title text in upper-third of the frame: "Open4WD" in
poster-style chunky game-logo typography, with a tagline below in smaller
type "Decentralized 4WD Racing".
Color palette: warm dark base (#1a1410 sky / shadows), candy red car body,
bold orange (#f97316) as the dominant accent across speed lines / sunset
/ CTA button, sky blue (#38bdf8) on rim lights and small UI accents,
energy yellow (#facc15) on the gauge / coin chip. The overall feel is
warm, cinematic, inviting — like the opening shot of a 3D-animated racing
movie crossed with the title card of an anime racing series.
Aspect ratio: 16:9 widescreen, full-bleed cinematic framing, no white
borders.
Phase 1: /garage 車庫頁¶
目的：驗證最常見的「3D 車 hero + 多 panel 環繞」layout 在 C+A 風格下長什麼樣。
頁面結構（依 ../頁面線框.md）：
- 頂部 Navbar：車庫 / 場地 / 賽制 / 展示廳 / 設定
- 中央大型 3D 車輛展示：旋轉 / 拍照 / 試跑
- 右側選中車輛摘要：Mass / Accel / Grip / Stability / chip / 相容武器
- 底部車位列：正式車位 / 鎖定車位 / 新車 / 本機測試
- 操作按鈕：車間（編輯）/ 本機測試
驗收標準：
- 3D 車是視覺中心、非置中正面、有 hero shot 戲劇感（rim light + 略仰角）
- panel 圓潤 chunky，不是細線管理後台風
- 整體配色暖、橘色佔比大（不是只有 CTA 一點橘）
- A 強度約 15%（不應該太熱血、garage 是日常頁面）
- 桌面 / 手機 layout 適配自然（mobile 直版時 panel 重排，不是把桌面圖縮小）
Phase 1.1 /garage 桌面（16:9）¶
[共通 prompt prefix]
A "Garage" screen mockup for Open4WD — desktop / wide screen aspect ratio
16:9. Layout structure (occupying the full canvas):
TOP NAVBAR (slim, ~6% of height): a chunky rounded warm-dark panel
spanning the full width. On the left, a chunky cartoon "O4WD" logo
mark (rounded square with two small spots resembling tail-light dots,
in sky blue with orange accents). Tabs in the center: "GARAGE"
(currently active, bold orange chunky pill highlight), "TRACKS",
"RACE", "SHOWCASE", "SETTINGS" (others in muted text). Right side:
a small "ONLINE" status dot (green glow) and a coin balance chip
"1,234" with an energy-yellow coin icon.
CENTER STAGE (~60% of width, ~75% of height): a large 3D Mini 4WD
racing car displayed at a dynamic 3/4 hero angle (camera slightly
below and rotated, NOT a centered front-on product shot). The car
has a chunky cartoon proportion (3D-animated-film toy-car style —
exaggerated wheel arches, friendly fender shapes,
slightly squashed-tall body), painted candy red with metallic blue
racing stripes. Visible exposed Mini 4WD components: 4 large round
wheels with chunky black tires, two front guide rollers, a front
weapon mount with small blade attachment, a visible motor unit and
battery slot on the chassis top. Strong rim lighting (warm orange
halo from upper-back, cool sky-blue rim from front), soft volumetric
glow underneath the car. The car sits on a slightly elevated round
turntable platform with a glowing edge ring (sky blue thin glow line).
Subtle radial speed lines fade in from the background corners (very
subtle, suggesting motion-ready, not full anime intensity).
RIGHT SIDE PANEL (~28% of width, takes most of right column): a
single chunky rounded warm-dark-brown panel showing the selected
car summary. Header: "RAZOR SPRINT" in bold large game-poster
typography, with a small tag "SPEED BUILD" below in muted type.
Below the title, a series of chunky stat bars (NOT thin Linear-
style lines — these are thick rounded bars with bouncy cartoon
fills): "ACCEL ▰▰▰▰▰▱▱ 5/7", "GRIP ▰▰▰▱▱▱▱ 3/7",
"STABILITY ▰▰▰▰▱▱▱ 4/7", "MASS ▰▰▰▰▰▰▱ 6/7". Each bar
fill in a different palette color (orange / yellow / sky blue / red).
Below stats, two chunky rounded buttons stacked: a primary big
orange "EDIT" button (chunky, slight cartoon bounce shadow) and a
secondary sky-blue outlined "TEST DRIVE" button. Below the buttons,
a small chip row: "GP: 3 SLOTS / WEAPON: AXE-T2 / CHASSIS: SPEED-A",
each chip is a chunky pill in muted warm tone.
BOTTOM CAR SLOT ROW (~16% of height, full width minus a small
margin): a horizontal row of 4-5 chunky rounded car slot cards.
Each card shows a small 3D thumbnail of a car (rendered in same
chunky cartoon style), a name underneath, and a small status badge.
The currently-selected card ("RAZOR SPRINT") has a thick glowing
orange border + slight upward translation suggesting it's "lifted".
Other cards: "MUD CAT" (active, no glow), "(LOCKED)" (greyed with
a chunky padlock icon overlay + text "Coins to unlock"), "+ NEW
BUILD" (a dashed-border slot with a chunky plus icon and "NEW"
badge), "[LOCAL TEST]" (a subdued slot with a "LOCAL" tag, indicating
local-only build not on chain).
Overall mood: warm, friendly, inviting — feels like the player is
about to walk into their garage and pick a car for the day. The
color palette is warm-dark base with bold orange accents that
participate in the mood (sunset glow on the back wall, orange rim
lights, orange CTA button), sky blue interactive focus ring on the
selected car, and energy yellow only on small reward / coin
elements. Subtle ambient particles / dust motes float in the
warm light.
NO photoreal photo elements. NO thin Linear-style hairline
borders. NO flat coplanar panel grid — panels have soft drop
shadows and slight depth layering. The result should feel like a
single keyframe of a 3D-animated racing-game intro, NOT a SaaS admin
dashboard with a 3D car preview embedded.
Phase 1.2 /garage 手機（9:16）¶
[共通 prompt prefix]
A "Garage" screen mockup for Open4WD — mobile portrait aspect ratio
9:16. Same content as the desktop garage screen but reorganized
vertically; this is NOT a downscaled desktop, it's a thumb-friendly
mobile native layout.
TOP NAVBAR (slim, ~5% of height): chunky rounded warm-dark panel,
on the left a small "O4WD" chunky mark, on the right a hamburger
menu chunky icon and a coin chip "1,234" with energy-yellow coin
icon. The page title "GARAGE" is centered, bold poster typography.
3D HERO SECTION (~40% of height, full width): a large 3D Mini 4WD
racing car at a dynamic 3/4 hero angle (slightly low-angle), painted
candy red with metallic blue racing stripes, chunky cartoon
proportions, strong warm rim lighting, sitting on a glowing round
turntable. Subtle radial speed lines fade from the corners. The
hero shot fills the upper portion of the screen.
CAR NAME + QUICK STATS PANEL (~25% of height): a chunky rounded
warm-dark panel below the hero. Header "RAZOR SPRINT" in bold
large poster type, small tag "SPEED BUILD" underneath. Below: a
horizontal row of 4 chunky stat dials (round / radial style, NOT
linear bars on mobile): "ACC", "GRIP", "STAB", "MASS", each with
a partial fill in different palette color (orange / yellow / sky
blue / red). Below the stats: a small chip row "3 SLOTS · AXE-T2
· SPEED-A".
ACTION BUTTONS ROW (~10% of height): two large thumb-sized chunky
rounded buttons side by side spanning the full width: "EDIT"
(big orange primary, glowing) and "TEST" (sky-blue outline
secondary). Buttons are tall enough to be thumb-friendly (~56px
real-world equivalent).
CAR SLOTS HORIZONTAL SCROLL (~15% of height): a horizontal-scrolling
row of chunky car slot cards (4-5 visible, indicating more by partial
visibility on the right edge). Selected card has a glowing orange
border and is slightly larger. Each card has a small 3D thumbnail,
a name, and a status chip ("(LOCKED)" with a padlock for one,
"LOCAL" tag for another, "+ NEW" for the rightmost dashed-border
slot). A small horizontal scroll indicator dot row at the bottom.
BOTTOM TAB BAR (~5% of height): a fixed mobile tab bar at the very
bottom, with chunky icons (filled, not line-art): GARAGE (active
with orange glow underneath), TRACKS, RACE, SHOWCASE, MORE.
Overall mood: same warm friendly garage feel as desktop, but
optimized for one-handed thumb navigation. The 3D car still
dominates the upper half. Color palette identical to desktop. The
result should feel like a screenshot from a polished mobile racing
game (mobile arcade-racer main menu energy)
crossed with 3D-animated-film UI sensibilities, NOT a responsive web SaaS
mobile view.
Aspect ratio: 9:16 portrait, full-bleed mobile.
Phase 2: 其他頁面補完¶
待 Phase 1 確認後補入。涵蓋頁面（每頁桌面 + 手機 = 22 個 prompt）：
/login登入/garage/edit/:id車間/ugcUGC 展示廳/ugc/:cid場地／零件詳情/race-config賽制/room/:roomId房間/race/:sessionId比賽（A 強度最高）/result/:resultId結算（A 強度次高）/creator/:peerId創作者個人頁/settings設定/help說明
後續流程¶
- 跑 Phase 0 hero moodboard（1 張 16:9）
- 評估：
- OK → 進 Phase 1
- 太 SaaS / 太冷 / 太 cinematic / 太卡通失去熱血 → 描述哪裡不對，本檔調整 prefix 重跑
- Phase 0 OK 後跑 Phase 1（2 張：garage 桌面 + 手機）
- Phase 1 OK → 我寫 Phase 2 全 22 張 prompt
- Phase 2 跑完 → 跟既有
png/*.png並存（前者 SaaS 風工程 mockup、後者遊戲感概念藝術）
約束自我校驗（每張 codex 出貨對照）¶
- ❌ 看起來像 Linear / Notion / Stripe Dashboard 風 → 重跑
- ❌ 3D 車正面置中、沒有 hero 戲劇感 → 重跑
- ❌ 背景大面積純黑、橘色只在按鈕邊框 → 重跑
- ❌ panel 用 1px 細線分隔、扁平等距網格 → 重跑
- ❌ 車輛 photoreal / 不是 chunky cartoon → 重跑
- ❌ 整體冷色（藍紫灰）佔比 > 60% → 重跑
- ✅ 暖棕黑底 + 大塊飽和橘 / 黃 + 圓潤 chunky panel + 3D 車 hero shot
附錄：與其他文件的關聯¶
- 設計 token 來源：../設計系統.md（v1 色票 → 本檔 v2 warmify 版 ＝ 概念稿刻意暖化、app 實際色票以 v1 為準）
- 頁面結構來源：../頁面線框.md
- HUD 細則：賽內機制.md §2.4（race 頁面引用）
- UGC 卡片規範：UGC卡片.md（
/garage／/ugc／/creator/:peerId引用） - 場地 prompt：場地參考圖.md（風格基準對齊）
- 零件 prompt：零件參考圖.md（有意差異化：UI / 場地 = stylized；零件 = photoreal）
產出存放：只有選定且完成授權檢查的概念圖收進 參考雛形/草稿/（WebP q92，命名 ui-<page>-<platform>.webp）；未選原始輸出是可丟棄的本機中間產物，不形成公開依賴。