CC招车系统 · 乘客端原型 Skill

本 Skill 只做一件事：在不破坏既有设计语言的前提下，扩展 CC招车乘客端 HTML/CSS 原型。每一次产出都必须像出自同一只手——和 pages/01-home.html 到 pages/08-profile.html 那 25 张原图风格一致。

这不是通用的移动端设计 Skill。项目已经在以下选择上落锚，不可替换：

OKLCH 色彩空间（不用 HSL，也不用 hex，除非现有代码已有）
BEM 命名（Block / Block__Element / Block--Modifier；不用 Tailwind / CSS-in-JS / 工具类杂烩，除了 base.css 里那一小撮 .flex / .gap-N / .text-2 工具）
iPhone 15 Pro 393×852 外框（.phone 类），12px 暗色外圈，48px 圆角，大投影
WebView 容器架构 —— H5 原型运行在微信小程序的 WebView 内，小程序壳会在顶部注入它自己的 cc-navbar（home + 标题 + capsule），所以原型 HTML 自身不渲染 .navbar；页面从 .phone__statusbar 直接进 .biz-tabs / 业务内容。.navbar 块仍保留在 base.css 里，为将来的 UniApp 落地预留（届时会包在 #ifndef H5 内），但当前所有 pages/*.html 都不渲染它。这条契约必须遵守。
按页面层级选 topbar：
顶层 / Tab 目的地（主页 / 订单 / 我的 / 兑换）：不渲染任何页面级 topbar——小程序壳的 cc-navbar 已经占了那个位置。页面顺序是 .phone__statusbar → .biz-tabs（仅主页有）→ 业务内容。
push / 子页 / 模态页：48px 高的 topbar（‹ 返回 + 标题 + ✕ 关闭）。两种实现：
通用 .subnav（来自 base.css）—— 02 城市搜索 / 03c / 03d 弹框在用
页面私有 topbar 家族 —— .order__topbar（04 / 04b / 04d）、.picker__topbar（04c）、.add__topbar（04e）。这 5 个家族共享 48px / fs-16 / 32×32 图标的契约；它们存在是因为各自需要 .subnav 没有的额外元素（副标题 / 帮助按钮 / 半透 dim 遮罩）。新加子页优先用 .subnav，只在需要 .subnav 没有的额外结构时才 fork 私有 topbar。把它们提升成 .subnav --order/--picker/--add 修饰符是 references/components-bem.md 里登记的 TODO。
OKLCH token 集中定义在 tokens.css，全局通过 var(--color-*) 消费。允许的硬编码颜色只有两处：业态 tab 选中下划线渐变 #19a0f0→#196afa（老乘客端的品牌签名），以及 .tabbar__item--active 的 oklch(40% 0.18 260)（已经是 OKLCH 形式，但故意比 --color-brand-500（oklch(56% 0.230 263)）更暗、更冷、彩度更低）。复刻时一字不改。
中文 UI（简体中文），面向乘客的网约车 / 班线 / 包车场景

如果你开始想引 Tailwind、Inter 字体、Material 高度、iOS HIG 模式、hex 色——立刻停。它们都不属于这里。

适用任务类型

用户的请求会落到下面 4 类之一。开工前先判定属于哪类：

任务类型	长什么样	主要参考
---	---	---
A. 新业态页	"补齐带货业态"、"加一个快车叫车主流程"、"出租车下单页"、`index.html` 中任意 `frame--todo` 占位（业态 09 带货 / 10 出租车 / 11 快车 / 12 拼车 / 13 代办）	`references/pages-architecture.md` + `references/page-blueprints.md`
B. 现有页面变体	"01h 春节版主页"、"03e 余票全部售罄态"、"05e 退款中"、任何与既有屏匹配只换状态/皮肤	`references/page-blueprints.md`
C. 新 BEM 块 / 子页	"下单页加一个保险弹框"、"个人中心加邀请抽屉"、任何要新增可复用组件或模态	`references/components-bem.md`
D. token / 库维护	"把 brand 色调深一点"、"加一个语义色"、"shadow-2 太浅"、"抽象一个 list-card 块"	`references/tokens-and-maintenance.md`

写一行 HTML/CSS 之前，先把对应的 reference 文件读完。不要扫读——里面装着字面 token 值、BEM 块契约、以及你需要照抄的过往决策。

每个任务的强制前置工作

落键前：

读用户项目里相关的 pages/（如果用户没附上，先索取）。在添加同辈页面前必须先看现有页是怎么搭的。任务 A 至少读 01-home.html、03-line-results.html、05-payment.html，吸收节奏。任务 B 读被改的那一页。任务 C 读宿主页 + base.css 里最接近的现有组件。
确认 tokens.css 与 base.css 在视野里。Skill 默认它们是项目的几何中心。绝不在新页面里写 :root { --color-... } 覆盖——真缺 token 就去 tokens.css 加。
先复用，再发明。扫一遍 base.css 里已有的块（.btn、.chip、.tag、.card、.od-dot、.navbar、.subnav、.tabbar、.biz-tabs、.phone、.header-image、.cc-skeleton）。页面私有块在各自页面（.home__、.tripcard__、.timetable__* 等）—— 找最接近的复用，不要从头造。完整块清单在 references/components-bem.md。

如果第 3 步走完仍然真的需要新块，再考虑提升——见 components-bem.md 里的 "什么时候进 base.css"。

输出契约

本 Skill 的每次回复，按下列顺序产出：

一段简短开场，说明：任务类型（A/B/C/D）、用了哪一页/哪个块作为种子、有哪些不显然的判断（新加了什么 token、与截图的偏差等）。1–3 句散文，不写 checklist。

交付物，按任务类型分：

任务 A 或 B → 一份完整的、可直接落到 pages/ 的独立 HTML 页面。页面必须和，然后在 head 里写一个

CC招车系统 · 乘客端原型

概述

CC招车系统 · 乘客端原型 Skill

适用任务类型

每个任务的强制前置工作

输出契约