feat(skills): E2E 验证通过 + 首个交付包(mp-00-visitor) + .design/tokens.yml

全管线验证结果: - parse: 22 tokens, 5 screens, 7 components - screenshots: 5/5 PNG 截图（2x 高清，裁掉设备框） - token match: 20/22 matched (19 confirmed, 14 pending, 2 unmatched) - interactions: 5/8 rules matched 交付包: docs/design/mp-00-visitor/ - screenshots/ (5 PNG) - tokens.json (三层匹配结果) - META.yml (元数据) 配置: .design/tokens.yml (项目级 Token 配置)
2026-05-18 00:08:05 +08:00
parent 63a9dac9d3
commit c26ca9088b
8 changed files with 711 additions and 0 deletions
--- a/.design/tokens.yml
+++ b/.design/tokens.yml
@@ -0,0 +1,405 @@
+version: 1
+updated: "2026-05-17"
+
+# ============================================================================
+# Design Token 注册表
+# 数据源: apps/miniprogram/src/styles/tokens.scss + variables.scss
+# ============================================================================
+
+colors:
+  # --- 主色系（赤土橙） ---
+  - token: --tk-pri
+    value: "#C4623A"
+    scss_var: "$pri"
+    role: 主色/赤土橙 accent
+
+  - token: --tk-pri-l
+    value: "#F0DDD4"
+    scss_var: "$pri-l"
+    role: 主色浅/赤土浅
+
+  - token: --tk-pri-d
+    value: "#8B3E1F"
+    scss_var: "$pri-d"
+    role: 主色深/赤土深
+
+  # --- 阴影色（含透明度） ---
+  - token: --tk-shadow-btn
+    value: "0 4px 16px rgba(196, 98, 58, 0.3)"
+    scss_var: "$shadow-btn"
+    role: 主按钮阴影
+
+  - token: --tk-shadow-tab
+    value: "0 2px 8px rgba(196, 98, 58, 0.25)"
+    scss_var: "$shadow-tab"
+    role: 选中Tab阴影
+
+  # --- 文字色 ---
+  - token: --tk-text-secondary
+    value: "#78716C"
+    scss_var: "$tx3"
+    role: 淡文字/辅助文字
+
+  # --- 卡片背景 ---
+  - token: --tk-card-bg
+    value: "#FFFFFF"
+    scss_var: "$card"
+    role: 卡片白底
+
+  # --- 医生端覆盖色（.doctor-mode 下自动替换 --tk-pri*） ---
+  - token: --tk-pri.doctor
+    value: "#3A6B8C"
+    scss_var: "$doc-pri"
+    role: 医生端主色/靛蓝
+    note: 仅在 .doctor-mode 下覆盖 --tk-pri
+
+  - token: --tk-pri-l.doctor
+    value: "#D4E5F0"
+    scss_var: "$doc-pri-l"
+    role: 医生端浅色
+
+  - token: --tk-pri-d.doctor
+    value: "#2A4F6A"
+    scss_var: "$doc-pri-d"
+    role: 医生端深色
+
+# --- 未映射到 Token 的 SCSS 变量（原型中有但 tokens.scss 未声明为 CSS 变量） ---
+unmapped_scss_variables:
+  - scss_var: "$bg"
+    value: "#F5F0EB"
+    role: 页面主背景/温润米底
+    note: "原型 T.bg 映射目标，tokens.scss 未声明为 CSS 变量"
+
+  - scss_var: "$tx"
+    value: "#2D2A26"
+    role: 主文字色/暖黑
+    note: "原型 T.tx 映射目标，tokens.scss 未声明为 CSS 变量"
+
+  - scss_var: "$tx2"
+    value: "#5A554F"
+    role: 次文字色/暖灰
+    note: "原型 T.tx2 近似映射，elder-mode 下 --tk-text-secondary 覆盖为此值"
+
+  - scss_var: "$bd"
+    value: "#E8E2DC"
+    role: 边框色
+    note: "原型 T.bd 映射目标，tokens.scss 未声明为 CSS 变量"
+
+  - scss_var: "$bd-l"
+    value: "#F0EBE5"
+    role: 浅边框色
+
+  - scss_var: "$acc"
+    value: "#5B7A5E"
+    role: 鼠尾草绿/成功色
+    note: "原型中成功色，tokens.scss 未声明为 CSS 变量"
+
+  - scss_var: "$acc-l"
+    value: "#E8F0E8"
+    role: 成功浅色
+
+  - scss_var: "$dan"
+    value: "#B54A4A"
+    role: 危险色/柔红
+    note: "原型中危险色，tokens.scss 未声明为 CSS 变量"
+
+  - scss_var: "$dan-l"
+    value: "#FDEAEA"
+    role: 危险浅色
+
+  - scss_var: "$wrn"
+    value: "#C4873A"
+    role: 警告色/暖琥珀
+    note: "原型中警告色，tokens.scss 未声明为 CSS 变量"
+
+  - scss_var: "$wrn-l"
+    value: "#FFF3E0"
+    role: 警告浅色
+
+  - scss_var: "$surface-alt"
+    value: "#EDE8E2"
+    role: 辅助底色
+
+  - scss_var: "$wechat"
+    value: "#07C160"
+    role: 微信绿
+
+typography:
+  - token: --tk-font-display
+    value: "72px"
+    note: 大屏展示
+    elder: "80px"
+
+  - token: --tk-font-hero
+    value: "48px"
+    note: 启动页标题
+    elder: "56px"
+
+  - token: --tk-font-h1
+    value: "28px"
+    note: 页面标题 serif bold
+    elder: "32px"
+
+  - token: --tk-font-h2
+    value: "22px"
+    note: 副标题、用户名 serif bold
+    elder: "25px"
+
+  - token: --tk-font-body-lg
+    value: "18px"
+    note: 按钮文字、section 标题 fontWeight:600
+    elder: "22px"
+
+  - token: --tk-font-body
+    value: "16px"
+    note: 正文、输入框、icon 文字（最常用 UI 字号）
+    elder: "22px"
+
+  - token: --tk-font-body-sm
+    value: "14px"
+    note: 副文本、描述
+    elder: "19px"
+
+  - token: --tk-font-num
+    value: "30px"
+    note: 数值 serif bold
+    elder: "34px"
+
+  - token: --tk-font-num-lg
+    value: "34px"
+    note: 大数值
+    elder: "40px"
+
+  - token: --tk-font-cap
+    value: "13px"
+    note: 说明文字（第一高频字号）
+    elder: "18px"
+
+  - token: --tk-font-nav
+    value: "18px"
+    note: 导航栏标题 serif bold
+    elder: "22px"
+
+  - token: --tk-font-micro
+    value: "11px"
+    note: 角标、tag
+    elder: "17px"
+
+structure:
+  - token: --tk-line-height
+    value: "1.5"
+    elder: "1.7"
+
+spacing:
+  - token: --tk-gap-2xs
+    value: "4px"
+    scss_var: "$sp-2xs"
+    elder: "6px"
+
+  - token: --tk-gap-xs
+    value: "8px"
+    scss_var: "$sp-xs"
+    elder: "12px"
+
+  - token: --tk-gap-sm
+    value: "12px"
+    scss_var: "$sp-sm"
+    elder: "16px"
+
+  - token: --tk-gap-md
+    value: "16px"
+    scss_var: "$sp-md"
+    elder: "20px"
+
+  - token: --tk-section-gap
+    value: "20px"
+    scss_var: "$sp-section"
+    elder: "28px"
+
+  - token: --tk-gap-lg
+    value: "24px"
+    scss_var: "$sp-lg"
+    elder: "32px"
+
+  - token: --tk-gap-xl
+    value: "32px"
+    scss_var: "$sp-xl"
+    elder: "40px"
+
+  - token: --tk-gap-2xl
+    value: "48px"
+    scss_var: "$sp-2xl"
+    elder: "56px"
+
+  - token: --tk-page-padding
+    value: "20px"
+    elder: "28px"
+
+  - token: --tk-card-padding
+    value: "20px"
+    elder: "28px"
+
+  - token: --tk-card-padding-sm
+    value: "16px"
+    elder: "20px"
+
+  - token: --tk-card-padding-lg
+    value: "28px"
+    elder: "36px"
+
+radius:
+  - token: --tk-card-radius
+    value: "16px"
+    scss_var: "$r"
+    elder: "20px"
+
+radius_unmapped:
+  - scss_var: "$r-sm"
+    value: "12px"
+    note: "原型 T.rSm 映射目标"
+  - scss_var: "$r-xs"
+    value: "8px"
+    note: "原型 T.rXs 映射目标"
+  - scss_var: "$r-lg"
+    value: "20px"
+  - scss_var: "$r-pill"
+    value: "999px"
+
+sizing:
+  - token: --tk-touch-min
+    value: "48px"
+    role: 最小触控区
+    elder: "56px"
+
+  - token: --tk-btn-primary-h
+    value: "52px"
+    role: 主按钮高度
+    elder: "60px"
+
+  - token: --tk-input-height
+    value: "56px"
+    role: 输入框高度
+    elder: "64px"
+
+  - token: --tk-tabbar-space
+    value: "100px"
+    role: TabBar 底部安全区
+    elder: "120px"
+
+feedback:
+  - token: --tk-touch-feedback-opacity
+    value: "0.85"
+    role: 触控反馈透明度
+    elder: "0.8"
+
+tag:
+  - token: --tk-tag-font-size
+    value: "11px"
+    elder: "13px"
+
+  - token: --tk-tag-padding-v
+    value: "3px"
+    elder: "5px"
+
+  - token: --tk-tag-padding-h
+    value: "8px"
+    elder: "12px"
+
+shadow_unmapped:
+  # tokens.scss 中的 --tk-shadow-btn/tab 是复合值（含偏移+模糊+颜色）
+  # 以下为 variables.scss 中的其他阴影，未声明为 CSS Token
+  - scss_var: "$shadow-sm"
+    value: "0 1px 4px rgba(45, 42, 38, 0.06)"
+    role: 小阴影
+
+  - scss_var: "$shadow-md"
+    value: "0 2px 12px rgba(45, 42, 38, 0.10)"
+    role: 中阴影
+
+  - scss_var: "$shadow-lg"
+    value: "0 8px 32px rgba(45, 42, 38, 0.15)"
+    role: 大阴影
+
+# ============================================================================
+# 原型 Key → Token 映射（aliases）
+# 用于设计移交时自动匹配原型属性到实际 Token
+# ============================================================================
+aliases:
+  prototype_keys:
+    T.pri:
+      token: --tk-pri
+      status: exact_match
+
+    T.priL:
+      token: --tk-pri-l
+      status: exact_match
+
+    T.priD:
+      token: --tk-pri-d
+      status: exact_match
+
+    T.bg:
+      token: null
+      nearest: --tk-card-bg
+      scss_var: "$bg"
+      value: "#F5F0EB"
+      status: unmatched
+      note: "原型页面背景色，tokens.scss 未声明为 CSS 变量，直接用 $bg SCSS 变量"
+
+    T.card:
+      token: --tk-card-bg
+      status: exact_match
+
+    T.surface:
+      token: --tk-card-bg
+      status: approximate
+      note: "原型中 surface ≈ 卡片白底"
+
+    T.tx:
+      token: null
+      nearest: --tk-text-secondary
+      scss_var: "$tx"
+      value: "#2D2A26"
+      status: unmatched
+      note: "主文字色，tokens.scss 未声明为 CSS 变量，直接用 $tx SCSS 变量"
+
+    T.tx2:
+      token: null
+      nearest: --tk-text-secondary
+      scss_var: "$tx2"
+      value: "#5A554F"
+      status: unmatched
+      note: "次文字色，tokens.scss 未声明，elder-mode 下 --tk-text-secondary 覆盖为此值"
+
+    T.tx3:
+      token: --tk-text-secondary
+      scss_var: "$tx3"
+      value: "#78716C"
+      status: exact_match
+
+    T.bd:
+      token: null
+      scss_var: "$bd"
+      value: "#E8E2DC"
+      status: unmatched
+      note: "边框色（不是圆角），tokens.scss 未声明为 CSS 变量"
+
+    T.r:
+      token: --tk-card-radius
+      scss_var: "$r"
+      value: "16px"
+      status: exact_match
+
+    T.rSm:
+      token: null
+      scss_var: "$r-sm"
+      value: "12px"
+      status: unmatched
+      note: "tokens.scss 未声明，需添加 --tk-radius-sm 或直接用 $r-sm SCSS 变量"
+
+    T.rXs:
+      token: null
+      scss_var: "$r-xs"
+      value: "8px"
+      status: unmatched
+      note: "tokens.scss 未声明，需添加 --tk-radius-xs 或直接用 $r-xs SCSS 变量"
--- a/docs/design/mp-00-visitor/META.yml
+++ b/docs/design/mp-00-visitor/META.yml
@@ -0,0 +1,15 @@
+prototype: mp-00-visitor.html
+source: docs/design/mp-00-visitor.html
+generated_at: "2026-05-18T00:07:00+08:00"
+tokens:
+  matched: 20
+  unmatched: 2
+  confirmed: 19
+  pending: 14
+  approximate: 1
+components:
+  total: 7
+  mapped: 0
+  new: 0
+interactions: 5
+screens: 5
--- a/docs/design/mp-00-visitor/screenshots/guest-profile.png
+++ b/docs/design/mp-00-visitor/screenshots/guest-profile.png
--- a/docs/design/mp-00-visitor/screenshots/guesthome-slide-1.png
+++ b/docs/design/mp-00-visitor/screenshots/guesthome-slide-1.png
--- a/docs/design/mp-00-visitor/screenshots/guesthome-slide-2.png
+++ b/docs/design/mp-00-visitor/screenshots/guesthome-slide-2.png
--- a/docs/design/mp-00-visitor/screenshots/guesthome-slide-3.png
+++ b/docs/design/mp-00-visitor/screenshots/guesthome-slide-3.png
--- a/docs/design/mp-00-visitor/screenshots/guesthome.png
+++ b/docs/design/mp-00-visitor/screenshots/guesthome.png
--- a/docs/design/mp-00-visitor/tokens.json
+++ b/docs/design/mp-00-visitor/tokens.json
@@ -0,0 +1,291 @@
+{
+  "source": null,
+  "matched": {
+    "T.pri": {
+      "method": "alias",
+      "confidence": "confirmed",
+      "token": "--tk-pri",
+      "scssVar": null,
+      "prototypeValue": "#C4623A",
+      "tokenValue": "#C4623A"
+    },
+    "T.priL": {
+      "method": "alias",
+      "confidence": "confirmed",
+      "token": "--tk-pri-l",
+      "scssVar": null,
+      "prototypeValue": "#F0DDD4",
+      "tokenValue": "#F0DDD4"
+    },
+    "T.priD": {
+      "method": "alias",
+      "confidence": "confirmed",
+      "token": "--tk-pri-d",
+      "scssVar": null,
+      "prototypeValue": "#8B3E1F",
+      "tokenValue": "#8B3E1F"
+    },
+    "T.bg": {
+      "method": "alias",
+      "confidence": "pending",
+      "token": null,
+      "scssVar": "$bg",
+      "tokenValue": "#F5F0EB",
+      "note": "原型页面背景色，tokens.scss 未声明为 CSS 变量，直接用 $bg SCSS 变量",
+      "prototypeValue": "#F5F0EB"
+    },
+    "T.card": {
+      "method": "alias",
+      "confidence": "confirmed",
+      "token": "--tk-card-bg",
+      "scssVar": null,
+      "prototypeValue": "#FFFFFF",
+      "tokenValue": "#FFFFFF"
+    },
+    "T.surface": {
+      "method": "alias",
+      "confidence": "approximate",
+      "token": "--tk-card-bg",
+      "scssVar": null,
+      "note": "原型中 surface ≈ 卡片白底",
+      "prototypeValue": "#EDE8E2",
+      "tokenValue": "#FFFFFF"
+    },
+    "T.tx": {
+      "method": "alias",
+      "confidence": "pending",
+      "token": null,
+      "scssVar": "$tx",
+      "tokenValue": "#2D2A26",
+      "note": "主文字色，tokens.scss 未声明为 CSS 变量，直接用 $tx SCSS 变量",
+      "prototypeValue": "#2D2A26"
+    },
+    "T.tx2": {
+      "method": "alias",
+      "confidence": "pending",
+      "token": null,
+      "scssVar": "$tx2",
+      "tokenValue": "#5A554F",
+      "note": "次文字色，tokens.scss 未声明，elder-mode 下 --tk-text-secondary 覆盖为此值",
+      "prototypeValue": "#5A554F"
+    },
+    "T.tx3": {
+      "method": "alias",
+      "confidence": "confirmed",
+      "token": "--tk-text-secondary",
+      "scssVar": "$tx3",
+      "prototypeValue": "#78716C",
+      "tokenValue": "#78716C"
+    },
+    "T.bd": {
+      "method": "alias",
+      "confidence": "pending",
+      "token": null,
+      "scssVar": "$bd",
+      "tokenValue": "#E8E2DC",
+      "note": "边框色（不是圆角），tokens.scss 未声明为 CSS 变量",
+      "prototypeValue": "#E8E2DC"
+    },
+    "T.bdL": {
+      "token": null,
+      "scssVar": "$bd-l",
+      "prototypeValue": "#F0EBE5",
+      "tokenValue": "#F0EBE5",
+      "method": "value_exact",
+      "confidence": "pending",
+      "role": "浅边框色",
+      "note": "匹配到 SCSS 变量 $bd-l，但无对应 CSS Token"
+    },
+    "T.acc": {
+      "token": null,
+      "scssVar": "$acc",
+      "prototypeValue": "#5B7A5E",
+      "tokenValue": "#5B7A5E",
+      "method": "value_exact",
+      "confidence": "pending",
+      "role": "鼠尾草绿/成功色",
+      "note": "匹配到 SCSS 变量 $acc，但无对应 CSS Token"
+    },
+    "T.accL": {
+      "token": null,
+      "scssVar": "$acc-l",
+      "prototypeValue": "#E8F0E8",
+      "tokenValue": "#E8F0E8",
+      "method": "value_exact",
+      "confidence": "pending",
+      "role": "成功浅色",
+      "note": "匹配到 SCSS 变量 $acc-l，但无对应 CSS Token"
+    },
+    "T.wrn": {
+      "token": null,
+      "scssVar": "$wrn",
+      "prototypeValue": "#C4873A",
+      "tokenValue": "#C4873A",
+      "method": "value_exact",
+      "confidence": "pending",
+      "role": "警告色/暖琥珀",
+      "note": "匹配到 SCSS 变量 $wrn，但无对应 CSS Token"
+    },
+    "T.wrnL": {
+      "token": null,
+      "scssVar": "$wrn-l",
+      "prototypeValue": "#FFF3E0",
+      "tokenValue": "#FFF3E0",
+      "method": "value_exact",
+      "confidence": "pending",
+      "role": "警告浅色",
+      "note": "匹配到 SCSS 变量 $wrn-l，但无对应 CSS Token"
+    },
+    "T.dan": {
+      "token": null,
+      "scssVar": "$dan",
+      "prototypeValue": "#B54A4A",
+      "tokenValue": "#B54A4A",
+      "method": "value_exact",
+      "confidence": "pending",
+      "role": "危险色/柔红",
+      "note": "匹配到 SCSS 变量 $dan，但无对应 CSS Token"
+    },
+    "T.danL": {
+      "token": null,
+      "scssVar": "$dan-l",
+      "prototypeValue": "#FDEAEA",
+      "tokenValue": "#FDEAEA",
+      "method": "value_exact",
+      "confidence": "pending",
+      "role": "危险浅色",
+      "note": "匹配到 SCSS 变量 $dan-l，但无对应 CSS Token"
+    },
+    "T.r": {
+      "method": "alias",
+      "confidence": "confirmed",
+      "token": "--tk-card-radius",
+      "scssVar": "$r",
+      "prototypeValue": "16",
+      "tokenValue": "16px"
+    },
+    "T.rSm": {
+      "method": "alias",
+      "confidence": "pending",
+      "token": null,
+      "scssVar": "$r-sm",
+      "tokenValue": "12px",
+      "note": "tokens.scss 未声明，需添加 --tk-radius-sm 或直接用 $r-sm SCSS 变量",
+      "prototypeValue": "12"
+    },
+    "T.rXs": {
+      "method": "alias",
+      "confidence": "pending",
+      "token": null,
+      "scssVar": "$r-xs",
+      "tokenValue": "8px",
+      "note": "tokens.scss 未声明，需添加 --tk-radius-xs 或直接用 $r-xs SCSS 变量",
+      "prototypeValue": "8"
+    }
+  },
+  "unmatched": [
+    "T.serif",
+    "T.sans"
+  ],
+  "inlineTokenMap": {
+    "fontSize:28": {
+      "token": "--tk-font-h1",
+      "tokenValue": "28px",
+      "confidence": "confirmed",
+      "method": "value_exact"
+    },
+    "fontSize:22": {
+      "token": "--tk-font-h2",
+      "tokenValue": "22px",
+      "confidence": "confirmed",
+      "method": "value_exact"
+    },
+    "fontSize:18": {
+      "token": "--tk-font-body-lg",
+      "tokenValue": "18px",
+      "confidence": "confirmed",
+      "method": "value_exact"
+    },
+    "fontSize:16": {
+      "token": "--tk-font-body",
+      "tokenValue": "16px",
+      "confidence": "confirmed",
+      "method": "value_exact"
+    },
+    "fontSize:14": {
+      "token": "--tk-font-body-sm",
+      "tokenValue": "14px",
+      "confidence": "confirmed",
+      "method": "value_exact"
+    },
+    "fontSize:13": {
+      "token": "--tk-font-cap",
+      "tokenValue": "13px",
+      "confidence": "confirmed",
+      "method": "value_exact"
+    },
+    "fontSize:11": {
+      "token": "--tk-font-micro",
+      "tokenValue": "11px",
+      "confidence": "confirmed",
+      "method": "value_exact"
+    },
+    "padding:20": {
+      "token": "--tk-section-gap",
+      "scssVar": "$sp-section",
+      "tokenValue": "20px",
+      "confidence": "confirmed",
+      "method": "value_exact"
+    },
+    "padding:16": {
+      "token": "--tk-gap-md",
+      "scssVar": "$sp-md",
+      "tokenValue": "16px",
+      "confidence": "confirmed",
+      "method": "value_exact"
+    },
+    "padding:12": {
+      "token": "--tk-gap-sm",
+      "scssVar": "$sp-sm",
+      "tokenValue": "12px",
+      "confidence": "confirmed",
+      "method": "value_exact"
+    },
+    "borderRadius:20": {
+      "token": null,
+      "scssVar": "$r-lg",
+      "tokenValue": "20px",
+      "confidence": "pending",
+      "method": "value_exact",
+      "note": "匹配到 SCSS 变量 $r-lg，但无对应 CSS Token"
+    },
+    "gap:16": {
+      "token": "--tk-gap-md",
+      "scssVar": "$sp-md",
+      "tokenValue": "16px",
+      "confidence": "confirmed",
+      "method": "value_exact"
+    },
+    "lineHeight:1.5": {
+      "token": "--tk-line-height",
+      "tokenValue": "1.5",
+      "confidence": "confirmed",
+      "method": "value_exact"
+    },
+    "height:52": {
+      "token": "--tk-btn-primary-h",
+      "tokenValue": "52px",
+      "confidence": "confirmed",
+      "method": "value_exact"
+    }
+  },
+  "summary": {
+    "total": 102,
+    "aliasTokens": 22,
+    "inlineValues": 80,
+    "confirmed": 19,
+    "pending": 14,
+    "approximate": 1,
+    "unmatched": 2
+  }
+}