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 类之一。开工前先判定属于哪类：

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

每个任务的强制前置工作

落键前：

1. 读用户项目里相关的 pages/（如果用户没附上，先索取）。在添加同辈页面前必须先看现有页是怎么搭的。任务 A 至少读 01-home.html、03-line-results.html、05-payment.html，吸收节奏。任务 B 读被改的那一页。任务 C 读宿主页 + base.css 里最接近的现有组件。
2. 确认 tokens.css 与 base.css 在视野里。Skill 默认它们是项目的几何中心。绝不在新页面里写 :root { --color-... } 覆盖——真缺 token 就去 tokens.css 加。
3. 先复用，再发明。扫一遍 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 的每次回复，按下列顺序产出：

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

2. 交付物，按任务类型分：

   • 任务 A 或 B → 一份完整的、可直接落到 pages/ 的独立 HTML 页面。页面必须 <link rel="stylesheet" href="../styles/tokens.css"> 和 <link rel="stylesheet" href="../styles/base.css">，然后在 head 里写一个 <style> 块放页面私有样式，body 里是 .phone 标记。骨架模板见 references/page-blueprints.md。
   • 任务 C → 给 base.css 的 CSS 增量（或保留为页面私有的指引）+ 演示用法的 HTML 片段 + 宿主页面的接入 patch。
   • 任务 D → tokens.css 或 base.css 的 diff，外加一段简短影响分析：哪些现有页面/块用到了被改的 token/块，改动后会变成什么样。

3. index.html 入口卡片 —— 如果新建了页面（任务 A 或部分 B），同时给出可粘贴到 index.html 对应 biz-section 下的 <article class="frame">…</article> 块。沿用既有编号约定：业态根页 2 位数字，变体追加字母（01g、03c、04d）。

4. 渲染预览给用户看，分两种宿主：

   • 如果当前 host 有 show_widget / mockup 类预览工具（Anthropic Skills 沙盒），先 read_me 模块 mockup，再 show_widget 完整 HTML。widget 必须自包含：把 assets/tokens.css + assets/base.css 内联进同一个 <style> 标签——可视化器解析不了 ../styles/ 这种相对路径。
   • 如果当前 host 没有预览工具（Claude Code / Cursor / Codex / 通用 CLI），直接把文件保存到 pages/<编号>-<slug>.html，告诉用户路径让他双击在浏览器打开。不要把样式表内联进保存文件——保留标准的 <link rel="stylesheet" href="../styles/tokens.css"> 形式。

5. 简短收尾，标注：

   • 新增或改动的 token
   • 进入 base.css 的新块 vs 保持页面私有的（以及为什么）
   • 跳过的、需要用户回头处理的事项（TODO 清单，最多 3 条）

硬规则 —— 绝不违反

下列规则来自既有代码，不是惯例。违反它们就意味着新页面会跟现有 25 张视觉冲突。

1. 外框：每张屏都活在 <div class="phone"><div class="phone__notch"></div><div class="phone__statusbar">…</div><div class="phone__viewport">…</div></div> 里。viewport 高度 calc(852px - 44px) = 808px，display: flex; flex-direction: column;，overflow: hidden。子元素垂直堆叠，固定栏 flex-shrink: 0，可滚动区用 flex: 1 + .scroll-y 填剩余空间。因为 viewport 是 overflow: hidden，静态原型里的弹框/抽屉在 .phone__viewport 内用 position: absolute，不能用 position: fixed（fixed 会逃出手机框）。

2. 状态栏：左侧写真实的 24 小时时间（如 17:09 / 18:05——和用户准备对照的截图时段一致；现有 25 张每张都是不同的真实时间，不要用 iOS 营销时间 9:41）；右侧三图标组（信号 / WiFi / 电池）通过 .phone__statusbar-icons + .ios-icon SVG。SVG 标记从任意现有页拷过来，不要重画。

3. 顶栏按层级选：

   • 顶层 / Tab 目的地（主页 / 订单 / 我的 / 兑换）：不渲染任何页面级 topbar。小程序 WebView 壳会在 H5 上方注入 cc-navbar，再画 .navbar 会重叠。页面顺序是 .phone__statusbar → .biz-tabs（仅主页）→ 业务内容 → .tabbar。证据：01-home、07-orders、08-profile 各自都带显式注释 <!-- cc-navbar 在 H5 不渲染（uniapp 用 #ifndef H5 包住）-->。
   • push / 子页 / 模态页：默认用 .subnav（‹ 返回 + 标题 + 模态页右侧 ✕ 关闭）。需要 .subnav 没有的额外元素时再选页面私有家族（.order__topbar / .picker__topbar / .add__topbar）—— 先读对应宿主页，再决定 fork。任何页面都不要放 .navbar。

4. 底部 tabbar 在 .phone__viewport 末尾，仅顶层目的地（出行 / 兑换 / 订单 / 我的）有。变体页和子页不显示 tabbar，除非它的原始屏就有。多屏对照文件（如 06-charter.html 把 3 屏装在一份 HTML 里供截图对比）合理地会渲染多次 tabbar——但每屏在逻辑上仍各自是一页。

5. 点击区 ≥ 44×44：所有可交互元素。.btn 默认 36px，那是行内次级动作；主 CTA 用 .btn--block（44px）或 .btn--block-lg（52px、letter-spacing: 4px——这个间距是品牌签名，保留）。

6. 颜色一律走 token。base.css 里允许的两个硬编码值（业态 tabs 渐变、tabbar 选中色）之外的一切都必须 var(--color-*)。哪怕一次性的强调色也走 token。

7. OD 起讫点用 .od-dot + --start / --end 修饰符。它们带 3px 外环 box-shadow，不要自己重画。

8. 字体：

   • 数字密集（价格 / 时间 / 计数 / 日期）→ font-family: var(--font-num)（或 .num 工具类）。
   • 正文 → var(--font-sans)（PingFang SC 栈），从 body 继承。不要重复声明。
   • 字号一律用 --fs-11 到 --fs-28 token，不写裸值 font-size: 14px。

9. 间距走 4px 基线：var(--sp-1) 到 var(--sp-10)。不要写 padding: 11px 这种魔数。

10. 圆角走圆角刻度：xs 4 / sm 6 / md 8 / lg 12 / xl 16 / 2xl 20 / pill 999。按钮 & chip → md，卡片 → lg，底部 sheet → 仅顶部两角 2xl。

11. 暗色模式自动：tokens.css 里 @media (prefers-color-scheme: dark) 切 token 即可。绝不在页面或块内写 @media (prefers-color-scheme: dark)——让 token 级联。唯一例外是 .phone__notch，明暗都硬编码为深色（base.css 里已经定好）。

12. 中文文案：所有 UI 字符串、按钮文案、占位提示都是简体中文。数字 / 价格 / 编码用 font-num 字体。

拿不准的时候

如果用户的需求歧义很大（比如"做一个带货页面"——但带货有 5+ 子屏），不要反问 3 个澄清问题。挑最小合理解释直接做，结尾用一句话提示"接下来建议补齐 X / Y / Z"。用户的迭代速度比规格完整度更重要。

如果用户给了截图但没指定编号，按惯例提一个（在该家族最新变体之后取下一个未用字母）然后开干。

反模式 —— 拒绝这些请求

• 不要逐像素复刻第三方 App：滴滴、曹操、携程、高德、百度地图。视觉上的通用类比可以，像素级抄袭不行。
• 不要包含真实品牌 logo / 真实车牌 / 真实个人信息。用占位姓名（张三 / 李四）、掩码手机（138****1234）、通用车牌前缀（川A·xxxxx）。
• 不要切换设计系统（除非用户明确要求修系统本身——任务 D）。"用 Material 风做一下" → 礼貌指出本原型是 OKLCH + BEM + 微信导航三件套，并提议在系统内做。
• 不要直接产出可运行的 Vue / React / UniApp 代码，即便 README 提到 UniApp 落地。本 Skill 的交付物是 HTML+CSS 原型页面。UniApp 端口是下游任务。