用于扩展 CC招车系统乘客端 HTML/CSS 原型(OKLCH 色彩空间 + BEM 命名 + iPhone 15 Pro 393×852 frame,运行在微信小程序 WebView 中)。任何要在该原型项目上新增或修改的请求都应触发:补齐业态主流程(带货 / 出租车 / 快车 / 拼车 / 代办)、给现有页...
---
name: cc-passenger-prototype
display_name: CC招车系统 · 乘客端原型
version: 0.2.0
description: 用于扩展 CC招车系统乘客端 HTML/CSS 原型(OKLCH 色彩空间 + BEM 命名 + iPhone 15 Pro 393×852 frame,运行在微信小程序 WebView 中)。任何要在该原型项目上新增或修改的请求都应触发:补齐业态主流程(带货 / 出租车 / 快车 / 拼车 / 代办)、给现有页面加变体(01a / 01b 状态屏、空态 / 报错 / 节日皮)、新增 BEM 块(抽屉 / 弹框 / 底部 sheet)、维护 token 与组件库。触发短语示例:"加一个带货下单页"、"01 主页加变体"、"新增抽屉组件"、"调整 brand 色"、"补齐快车业态"、"对齐截图新增"、"按现有原型扩展"、"基于 base.css 加块",以及任何提到 pages/、base.css、tokens.css、BEM 块名(.home / .od-form / .tripcard 等)或截图编号(01g / 03c / 04d 等)的请求。不要把它当通用移动端 UI Skill 用,也不要用来出 iOS HIG 风稿——本 Skill 仅服务于该项目。
author: huiyonghkw <huiyonghkw@gmail.com>
license: MIT-0
homepage: https://github.com/cczhaoche/cczhaoche
repository: https://github.com/cczhaoche/cczhaoche/tree/main/prototype/design-system
language: zh-CN
category: design-system
tags:
- prototype
- html-css
- oklch
- bem
- mobile
- wechat-miniprogram
- ride-hailing
- cczhaoche
target_agents:
- claude-code
- claude.ai
- cursor
- codex
runtime:
tools_required: []
tools_optional:
- read_me
- show_widget
inputs:
project_root: prototype/cc-passenger
required_files:
- styles/tokens.css
- styles/base.css
- pages/01-home.html
outputs:
- 新 HTML 页面 (pages/<编号>-<slug>.html)
- tokens.css / base.css 增量 diff
- index.html 入口卡片片段
last_updated: 2026-05-09
---
# 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 块契约、以及你需要照抄的过往决策。
## 每个任务的强制前置工作
落键前:
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 端口是下游任务。
don't have the plugin yet? install it then click "run inline in claude" again.