Files

kang 7193eacfa5 init: OBDX web landing (Bento Garage design)

- Vite + React + TS + Tailwind v4 + framer-motion + lucide
- 5 sections: Hero, Showcase (steps + 3 cases), Pricing, Comparison, Footer
- Brand assets local (logo v2 SVG, 3 mascots, 6 scenes) under public/brand/
- Dockerfile multi-stage (node 20 build → nginx 1.27 alpine)
- nginx /api/* reverse-proxy to obdx-api:8080, SPA fallback
- /healthz endpoint for Coolify

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

2026-04-23 16:19:47 +08:00

6.5 KiB

Raw Blame History

OBDX Landing — Design Inputs

Phase A 设计探索阶段的输入文档。给 /ui-ux-pro-max --design-system 用。

1. 产品一句话

OBDX 是 AI 汽车诊断服务 —— OBD 蓝牙设备插车 → 扫码 → H5 网页看 AI 原创诊断报告（健康分、故障清单、修车预算）。

Tagline：Your car, decoded.
替代：Scan. Know. Go. / Every car tells a story. / The mechanic in your pocket.
市场：北美（US/CA），英文优先
域名：obdx.ai → 当前部署在 obd.kang-kang.com

2. 品牌性格（5 轴）

轴	是	不是
Approachable	像朋友解释问题	冷冰冰工具
Trustworthy	专业数据 + 人话	花哨噱头
Premium-Playful	Pixar 温暖 + Apple 质感	幼稚或套路
Smart	懂车又懂人	技术炫耀
Modern	干净极简有设计感	传统汽修油腻感

对标：

工具品牌：Milwaukee、Dyson
现代 SaaS：Linear、Vercel、Stripe
叙事：Pixar

设计哲学（官方 VI 已定）：Dark Garage × Digital Precision。可以继承也可以在 Phase A2 挑战 —— 用户已经对这版感觉"不过关"，欢迎出截然不同方向的候选。

3. 色板（VI 已定 — 可作为参考或被覆盖）

品牌主色

角色	名字	Hex
主	Electric Cobalt	`#2563EB`
副	Warm Amber	`#F59E0B`
深底	Charcoal Black	`#0F172A`
浅底	Cool White	`#F8FAFC`

语义

角色	Hex
Healthy	Emerald `#10B981`
Caution	Warm Amber `#F59E0B`
Danger	Signal Red `#EF4444`
Info	Slate Blue `#64748B`
Premium	Deep Indigo `#4338CA`

扩展

#0F172A Deep Night / #1E293B Dark Slate / #334155 Medium Slate / #94A3B8 Muted Silver / #E2E8F0 Light Border / #F1F5F9 Light Gray

4. 字体（VI 已定）

角色	字体	用途
标题	Outfit	Hero / Section headings
正文	DM Sans	段落、列表
数据	JetBrains Mono	数字、代码、技术标注

替代候选（如果 A2 另选）：Space Grotesk / Inter / IBM Plex Sans。

5. 物料清单（所有路径相对项目根）

Logo

文件	路径
Icon PNG（老版）	`brand-assets/obdx-brand/logo/obdx-logo-icon.png`
Primary Dark PNG	`brand-assets/obdx-brand/logo/obdx-logo-primary-dark.png`
Primary Light PNG	`brand-assets/obdx-brand/logo/obdx-logo-primary-light.png`
Tagline Dark PNG	`brand-assets/obdx-brand/logo/obdx-logo-tagline-dark.png`
Icon SVG v2（新版）	`brand-assets/obdx-brand/logo-redesign/obdx-logo-icon-v2.svg`
Primary Dark SVG v2	`brand-assets/obdx-brand/logo-redesign/obdx-logo-primary-dark-v2.svg`
Primary Light SVG v2	`brand-assets/obdx-brand/logo-redesign/obdx-logo-primary-light-v2.svg`
Tagline SVG v2	`brand-assets/obdx-brand/logo-redesign/obdx-logo-tagline-dark-v2.svg`

推荐用 SVG v2。

IP 角色（3 只）

角色	定位	资源
Wrench Uncle（扳手大叔）	老练修车师傅 IP，品牌门面	`brand-assets/obdx-brand/ip-characters/wrench-uncle/{default, expressions, poses, with-dash}.png`
Wrench	年轻助手 / 工具人	`brand-assets/obdx-brand/ip-characters/wrench/{default, expressions, poses}.png`
Dash（仪表盘）	车机化身，传递数据感	`brand-assets/obdx-brand/ip-characters/dash/{default, expressions}.png`

场景图（6 张 — 16:9 + 方形各 3 幕）

幕	含义	16:9	方形
Ride	开车中，设备亮起	`obdx-scene-ride-16x9.png`	`obdx-scene-ride-square.png`
Checkup	扫描诊断中	`obdx-scene-checkup-16x9.png`	`obdx-scene-checkup-square.png`
Done	报告完成，健康分	`obdx-scene-done-16x9.png`	`obdx-scene-done-square.png`

路径前缀：brand-assets/obdx-brand/scenes/

6. 内容素材（已有可复用）

从 brand-assets/constants.ts 搬：

PRICING_PLANS：Free $0 / Plus $4.99/月 / Shop $19.99/月（3 档）
STATS：706GB / 82 brands / 24,935 models / 10 sec
COMPETITORS：FIXD / BlueDriver / CarMD / Innova / Snap-on 对比表
NAV_LINKS：Features / How It Works / Pricing / Compare

7. Landing 必备 Section（建议）

参考 brand-assets/Home.tsx 结构（旧方案逻辑合理，视觉可全新）：

Navbar — logo + 导航 + CTA
Hero — slogan + 副文案 + CTA + 吉祥物/场景图
Stats — 4 个数字卡（706GB / 82 / 24,935 / 10s）
Problem — 用户 5 大痛点（故障灯、被宰、二手车、工具贵、竞品麻烦）
HowItWorks — 3 步流程（Plug / Scan / Read）
Features — AI 诊断 / 车型专属 / 修车预算 / 分享报告
Comparison — OBDX vs FIXD/BlueDriver/CarMD/Innova/Snap-on
Pricing — 3 档卡片
Testimonials — 推荐语（如有）
DownloadCTA — 下载引导
Footer

范围选 A（只重做 landing），功能页 scan/demo/report 不动。

8. 历史探索（`brand-assets/ideas.md` 3 方案）

暗夜车库 Dark Garage Aesthetic — VI 已选，用户反馈"不过关"
蓝图解构 Blueprint Deconstruction — 工程蓝图美学，网格 + 标注线
皮克斯叙事 Pixar Storytelling — 叙事驱动，角色中心

Phase A2 候选需要至少有 1 套是"非暗夜车库变体"，否则等于没探索。

9. 约束（强 vs 软）

强约束（不可违反）

保留 logo（推荐 SVG v2）
保留 3 只吉祥物 IP 形象（Wrench Uncle / Wrench / Dash）— 可以只选其一重点用
北美市场英文 copy
保留上述 5 个品牌性格轴（Pixar 温暖 + Apple 质感这句是品牌基因）

软约束（可调整）

色板（VI 那套可替换，但要给得出新色板的叙事理由）
字体（VI 那套可替换）
布局 / 网格 / 动效 / 叙事方式
深浅模式默认值（VI 默认 dark，可改）

零约束

现有 brand-assets/*.tsx 12 个组件（作废，不作为实现参考）

10. 部署约束

目标域名 obd.kang-kang.com（先用 obd-new.kang-kang.com 验证再切）
Coolify 反代 *.kang-kang.com → 76.13.31.179
前端容器 nginx，反代 /api/* 到 FastAPI 后端容器（1c 同域架构，前端不触发 CORS）
技术栈：Vite + React + TS + Tailwind v4 + framer-motion + lucide-react（不含 shadcn/ui / wouter / sonner）
资产本地化：所有图片从 web/public/brand/ 提供，不走 CloudFront

6.5 KiB Raw Blame History Unescape Escape