cardbuddy 0.16.0 → 0.18.0

package/dist/vendored/skills/mbank-design-gen/SKILL.md

@@ -0,0 +1,76 @@
+---
+name: mbank-design-gen
+description: MBank 手机银行 AI 助手风格的高保真效果图生成技能。以手绘草图/线框图为输入，按从两套银行 AI 助手设计稿（45 个画板）提炼的设计规范（卡片/尺寸/节奏/配色/层级/布局/风格化七类 token）产出风格统一的高保真 UI 效果图（HTML 精确渲染 + @2x PNG 截图，插画元素可选 ImageGen 补齐）。触发词：银行风格效果图, 高保真稿, 草图转效果图, 线框图上色, mbank 风格, 按设计规范出图, 设计稿风格生成, 效果图生成.
+---
+
+# MBank Design Gen — 草图 → 高保真效果图
+
+以**手绘草图 / 线框图**为输入，套用本技能提炼的设计规范，产出与源设计稿风格一致的高保真手机 UI 效果图。
+
+## 0. 铁律
+
+1. **token 只认 `references/design-spec.md`**：所有色值/字号/圆角/间距/阴影必须来自该文件，禁止凭感觉造值；模板 `templates/mockup-template.html` 的 `:root` 是 CSS 侧唯一取值处。
+2. **先读草图结构，再套组件**：用 Read 工具读草图图片 → 逐区块标注「这是什么组件」（对照 `references/component-library.md` A–J）→ 缺失形态才允许新建组件（新建时必须全部复用既有 token）。
+3. **签名特征不可丢**：左冷蓝右暖奶油的氛围光背景、气泡非对称圆角（AI 左上直角 / 用户右上直角）、利率红 `#F3464A`、奶油促销卡、3D 金融插画溢出卡缘——这五项是风格一致性的底线，校验清单逐项查。
+4. **布局精确优先于美感发挥**：草图画的区块顺序、层级、数量照搬，不做「顺手优化」；草图没画的固定框架（状态栏/导航/输入条/Home Indicator）按组件库 A 补齐。
+5. **不硬编码业务文案**：效果图文案来自草图/用户输入；生成脚本类产物报错文案禁止写死业务实体名。
+
+## 1. 文件地图
+
+```
+mbank-design-gen/
+├── SKILL.md                        ← 本文件（工作流入口）
+├── references/
+│   ├── design-spec.md              ← 权威 token 源（7 大规范 + 背景 CSS + 来源可信度）
+│   └── component-library.md        ← 组件拼装规范（A 全局框架 ~ J 徽标）
+├── templates/
+│   └── mockup-template.html        ← 375×812 画布骨架，token 已内嵌 :root
+├── tools/
+│   └── screenshot.mjs              ← HTML → @2x PNG（playwright，750×1624）
+└── assets/
+    ├── robot.png                   ← 吉祥物（直接引用，勿重绘）
+    ├── icons/*.png                 ← 声音/设置/语音/箭头/对勾/九宫格/VS/标签底/进度 thumb
+    └── ref/*.png                   ← 4 张风格参考图（首页/对话/表格/长详情）
+```
+
+## 2. 工作流
+
+### Step 1 读草图，产出区块清单
+Read 草图图片；对每个区块输出一行：`序号 | 区块类型（组件库编号，如 C 选项列表）| 内容摘要`。拿不准的区块对照 `assets/ref/` 四张参考图定形。
+
+### Step 2 生成 HTML
+复制 `templates/mockup-template.html` 到产物目录（如 `<工作目录>/mockup.html`），在 `.content` 的 SLOT 区按区块清单拼装组件；assets 引用改为相对/绝对路径指向本技能 `assets/`。规则：
+- 只用模板 `:root` 的 token，不写裸 hex（模板外的例外仅限 design-spec 里给出的渐变组合）。
+- 每个组件照 `component-library.md` 的结构/间距/字阶拼装。
+- 文案用草图里的文字；草图字迹不清时按语境补全并在交付说明里列出。
+
+### Step 3 截图导出
+```bash
+node <skill 路径>/tools/screenshot.mjs mockup.html mockup.png          # 标准 375×812
+node <skill 路径>/tools/screenshot.mjs mockup.html mockup.png --full   # 长页整页
+```
+输出即 @2x 750 宽 PNG，与源设计稿同规格。
+
+### Step 4 校验清单（交付前逐项打勾）
+- [ ] 背景有左冷蓝 `#DBE3F5` / 右暖奶油 `#EEE6D9` 氛围光，向下渐隐至 `#F7F8FA+`
+- [ ] AI 气泡 `#FEFBF7` 左上直角；用户气泡品牌渐变右上直角
+- [ ] 圆角只用 4/8/12/20/22/pill 档位；卡片 radius 20
+- [ ] 字阶不超出 24/20/18/17/16/15/14/13/12/10；金额数字用 DIN
+- [ ] 利率/关键涨跌数字为红 `#F3464A`；链接/可点为 `#3B73FF`
+- [ ] 间距全部落在 4 的倍数上
+- [ ] 底部输入条 + Home Indicator 齐全，导航双 tab + 声音/设置齐全
+- [ ] 3D 插画（如有）为暖金色系且溢出卡缘；吉祥物用 `assets/robot.png` 原图
+- [ ] 截图 PNG 宽 750（@2x 生效）
+
+### Step 5（可选）插画元素
+草图含 3D 金融插画而手头无素材时，用 ImageGen 以 design-spec §7 关键词生成：`3D render, soft studio light, glossy financial objects, gold coins, warm orange palette, soft shadows, transparent background, C4D style`，落盘后 `<img>` 引入。**UI 面板永远不用 ImageGen 生成**（文字不可控），只用于装饰插画/人物照片。
+
+## 3. 产物清单
+
+| 文件 | 说明 |
+|---|---|
+| `mockup.html` | 高保真稿源（token 化，可继续手改） |
+| `mockup.png` | @2x 效果图（750×1624 或长页等比） |
+| （可选）`assets-*.png` | ImageGen 补生成的插画元素 |
+
+交付时在回复中列出：区块清单 → 产物路径 → 校验清单结果；若草图有歧义取舍，逐条说明。

package/dist/vendored/skills/mbank-design-gen/references/component-library.md

@@ -0,0 +1,127 @@
+# MBank 组件库规范（component-library）
+
+> 从设计稿提炼的可复用部件。所有 token 定义见 `references/design-spec.md`；此处只写组件级拼装规则。
+> 数值单位 pt（@1x）。每个组件给出：结构 → 样式 → 变体。
+
+---
+
+## A. 全局框架（每屏必有）
+
+### A1. 状态栏
+- 左：时间 `9:41`，15pt Semibold `text-1`；右：信号/WiFi/电池（系统样式）。
+
+### A2. 顶部导航
+- 左：双 tab「此刻 / 对话」，17pt；激活 = Medium `text-1`，非激活 = Regular `text-2`，无下划线。
+- 右：声音图标 + 设置图标（`assets/icons/`，24pt），间距 16pt。
+- 背景：透明，融入页面氛围渐变，**不加底色不加分割线**。
+
+### A3. 底部输入条（固定）
+- 结构：`[麦克风图标 + 占位文字] 胶囊输入条` + 右侧 `[九宫格] 圆钮`。
+- 输入条：高 36pt，radius-pill，白底，占位 15pt `text-3`（「欢迎向小易提问~」），麦克风 20pt 深灰，左 padding 16pt，**宽度撑满剩余空间**。
+- 圆钮：44×44pt，白底 `shadow-float`，九宫格图标 20pt `text-1`。
+- 下方 Home Indicator：34pt 高，黑色圆角横条 ~134pt 居中。
+
+---
+
+## B. 对话气泡
+
+### B1. 用户气泡（右）
+- 背景渐变 `linear-gradient(90deg,#2F86F6,#005DFD)`，白字 15pt/24 Regular。
+- radius：`12 0 12 12`（右上直角）。padding 12×16。max-width 75%。
+- 与右边缘间距 12pt；多条相邻用户气泡间距 12pt。
+
+### B2. AI 气泡（左）
+- 背景 `#FEFBF7`（暖白），文字 15pt/24 `text-1`，radius `0 12 12 12`（左上直角）。
+- padding 12×16；**无头像贴边**（头像仅首页问候区出现）。
+- 变体 `ai-note`：气泡内底部追加「*温馨提示」13pt `text-2` + 说明文字 13pt/20 `text-2`，与正文间 8pt。
+
+### B3. AI 气泡内富文本
+- 关键词高亮：`color-primary-bright` 加粗。
+- 序号列表：`1. 2. 3.` 起头行，悬挂对齐；书名号/【】内容加粗 `text-1`。
+
+---
+
+## C. 选项列表卡（AI 给出可点选项）
+
+- 容器：`rgba(255,255,255,0.7)`，radius 20pt，padding 12 16 16。
+- 容器题：15pt `text-2`（「请选择你的借钱用途:」），下距 12pt。
+- 条目：白底 radius 12pt，padding 14 16；题 16pt Medium `text-1` + 右侧 chevron（`icon-arrow-right-blue` 或灰 chevron 16pt）；副文 14pt `text-2` 上距 4pt。条目间距 12pt。
+- 变体 `selected`：条目题文字 `color-primary`，边框 1pt `color-primary`（用户刚点过的项）。
+
+---
+
+## D. 建议气泡（「小易猜你想问」）
+
+- 区块题：15pt `text-2`（「小易猜你想问」），下距 12pt，左对齐 16pt 边距。
+- pill：白底、1pt `color-primary` 边框、蓝字 14pt，radius-pill，高 32pt，padding 0 16pt；纵向间距 12pt，左对齐流式换行。
+
+---
+
+## E. 数据表格卡（利率表范式）
+
+- 白底 radius 20pt padding 16；宽度 343pt。
+- 标题：16pt Medium `text-1`，文字带 `#EDF5FF` 高亮衬底（padding 2 4）。
+- 行 1（参数选择）：左 15pt `text-1`，右「当前值 ˅」15pt `text-1` + chevron，行高 44pt，下加分隔线。
+- 行 2（tabs）：横排 tab，激活 = 16pt Medium `text-1` + 底部 2pt `text-1` 短下划线（宽≈字宽）；非激活 15pt Regular `text-2`；间距 16pt。
+- 数据行：高 44pt，分隔线 `#E9E9E9`；左标签 15pt `text-1`，右值 15pt Semibold `color-red`（利率类）或 `text-1`（普通数值）。
+- 脚注：12pt/18 `text-3`（「*以上利率为我行标准利率…」），上距 8pt。
+
+---
+
+## F. 产品资产卡（我的贷款/持仓范式）
+
+- 白底 radius 20pt，padding 16。
+- 头部：产品名 18pt Semibold `text-1`；下行编号 14pt `text-2`（「贷款编号：xxx」）；头部区可带 `#F5F6F8` 灰底（padding 16，radius 12）。
+- 汇总面板：奶油渐变 `linear-gradient(90deg,#FEF3E9,#FEFBF7)` radius 12pt padding 16；内部两列——标签 14pt `text-2` 上、金额 20pt DIN Bold `text-1-warm` 下（金额可 24pt）。
+- 提醒气泡标签：`linear-gradient(90deg,#2F86F6,#005DFD)` 白字 13pt，radius 8 8 8 0，padding 6 10，悬浮于进度条起点上方。
+- 进度条：轨道 4pt `#E9ECF2` radius-pill；已还段 `color-primary`；thumb = 白圆 16pt 带 `shadow-float`（素材 `progress-thumb.png`）。
+- 刻度行：两端对齐——左「1期」/右「36期」13pt `text-1`。
+- 日期行：两端「起始时间：…」/「结束时间：…」13pt `text-2`。
+
+---
+
+## G. 对比卡（VS 范式）
+
+- 白底 radius 20pt padding 16。
+- 标题 18pt Semibold `text-1` 居左，带 `#EDF5FF` 衬底。
+- 对比头部：左右两个圆角色块（左红 `#F3464A`、右蓝 `linear-gradient(90deg,#2F86F6,#3B73FF)`），radius 16pt，内白字居中：产品名 18pt Semibold + 副文 12pt 白 70% 透明度；中缝叠圆形 VS 徽章（白底 40pt 圆 + `vs-badge.png` 或描边字）。
+- 对比行：三列——左值（红 `color-red` 15pt Semibold 居右）｜中标签（`#F5F5F5` 底 radius 4pt padding 4 10，13pt `text-2`）｜右值（蓝 `color-primary-bright` 15pt Semibold 居左）；行距 16pt。
+- 总结气泡：AI 气泡样式（`#FEFBF7` radius 12pt padding 12 16，15pt/24 `text-1`），置于卡外下方。
+
+---
+
+## H. 要点列表（产品亮点范式）
+
+- 区块题 18pt Semibold `text-1`。
+- 条目：`color-primary` 实心圆 18pt 内白字序号（①②③，11pt）+ 条目题 16pt Medium `text-1` 同行；正文 15pt/24 `text-2` 悬挂对齐（缩进 = 圆点宽 + 8pt）。
+- 免责脚注：12pt/18 `text-3`，前缀「*」。
+
+---
+
+## I. 首页「此刻场景」卡片组
+
+### I1. 问候区
+- 左：吉祥物 `robot.png` 64pt 圆形（素材自带圆底可直接用）；右：问候语 24pt Semibold `text-1-warm`（「早安，追梦人！」）+ 副文 15pt/24 `text-2` 两行，左间距 12pt。
+
+### I2. 双列促销卡（2 列网格，gap 12pt，等宽 ~166pt）
+- 基底：radius 20pt + `shadow-float`；两种底：
+  - `cream`：`linear-gradient(160deg,#FFF7E8,#FEF6ED)`
+  - `plain`：白底
+- 结构：3D 插画（顶部，允许溢出卡缘 8–16pt）→ 标题 18pt Semibold `text-1-warm` → 副文 14pt/22 `text-2` → 胶囊按钮 32pt。
+- 按钮：营销卡 = 橙红渐变 `linear-gradient(90deg,#F09404,#EE6723)` 白字 14pt Medium；功能卡 = `color-primary` 白字。
+- 变体 `consultant`（顾问卡）：顶部真人照片（radius 12pt，宽满卡）+ 直播徽标（红底白字 10pt pill）+ 题目 16pt Medium（关键词 `color-primary-bright`）+ 副文 14pt `text-2` + 底部「主讲人」描边 pill 12pt `text-2` + 右下黑色圆钮 28pt（白 chevron）。
+
+### I3. 筛选条件列表（绿勾）
+- 区块题 16pt Medium `text-1` 带下划线装饰 + 右侧「进一步筛选 >」14pt `color-primary-bright`。
+- 条目：`icon-check.png` 18pt + 15pt `text-1`，行距 12pt。
+
+---
+
+## J. 徽标与角标
+
+| 徽标 | 样式 |
+|---|---|
+| 直播 live | `#F3464A` 底白字 10pt Medium pill，padding 2 8，左白点 6pt |
+| 利率高亮 | `#EDF5FF` 底 `text-1` 16pt，padding 2 4 |
+| 气泡提醒 | 品牌渐变底白字 13pt，radius `8 8 8 0` |
+| 标签底 | `tag-bg.png` 奶油异形底 + 14pt `text-1-warm` |

package/dist/vendored/skills/mbank-design-gen/references/design-spec.md

@@ -0,0 +1,261 @@
+# MBank 设计规范（design-spec）
+
+> 唯一权威 token 源。由两套银行 AI 助手设计稿（贷款助手 + 存款助手，MeaXure 导出，45 个画板）程序化采样提炼。
+> 单位约定：正文数值一律 **pt（@1x 设计值）**，导出/截图按 @2x ×2 换算为 px。画布 375pt 宽。
+> 组件级细节见 `references/component-library.md`；生成工作流见 `SKILL.md`。
+
+---
+
+## 1. 卡片设计规范（圆角 / 阴影 / 边框 / 内边距）
+
+### 圆角梯度（radius scale）
+
+| Token | 值 | 使用场景 |
+|---|---|---|
+| `radius-xs` | 4pt | 标签底、小色块 |
+| `radius-sm` | 8pt | 进度条、小按钮、行内元素 |
+| `radius-md` | 12pt | **聊天气泡**、列表条目卡、内嵌面板 |
+| `radius-lg` | 20pt | **标准卡片**（白卡/奶油卡/表格卡/选项容器）、首页大卡 |
+| `radius-xl` | 22pt | 特大底部面板/弹层 |
+| `radius-pill` | 100pt | 胶囊按钮、建议气泡、底部输入条 |
+| `radius-circle` | 50% | 圆形图标钮、序号圆点、头像 |
+
+### 气泡非对称圆角（对话强特征，必须遵守）
+
+- **AI 气泡**（左侧）：`12pt 12pt 12pt 0`（左上直角，其余 12）
+- **用户气泡**（右侧）：`12pt 0 12pt 12pt`（右上直角，其余 12）
+
+### 阴影（轻投影，整体偏「浮」不偏「重」）
+
+| Token | 值 | 使用场景 |
+|---|---|---|
+| `shadow-float` | `0 2px 6px rgba(134,155,168,0.5)` | 悬浮卡片、首页大卡 |
+| `shadow-soft` | `0 2px 10px rgba(0,0,0,0.2)` | 弹层、模态 |
+| `shadow-none` | 无 | 常规列表卡、表格卡（默认无阴影） |
+
+### 边框
+
+- 常规卡片**无边框**，靠背景色差分区。
+- 描边仅两处：建议气泡 `1pt solid #2F86F6`；分隔线 `1pt solid #E9ECF2`（列表内可用 #E9E9E9）。
+
+### 内边距
+
+| 容器 | padding |
+|---|---|
+| 标准卡片 | 16pt |
+| 聊天气泡 | 12pt 16pt |
+| 列表条目卡 | 14pt 16pt |
+| 选项容器（包裹层） | 12pt 16pt 16pt |
+| 底部输入条 | 12pt 16pt（左右） |
+
+---
+
+## 2. 尺寸规范（画布 / 卡片 / 组件标准尺寸与断点）
+
+### 画布
+
+- 基准：**375 × 812pt**（iPhone X），导出 @2x = **750 × 1624px**。
+- 纵向自适应：内容撑高，最小 812pt；底部固定区（输入条 + Home Indicator）不随内容滚动。
+- 单一移动端断点；本规范不定义平板/桌面断点。内容最大宽度 = 画布宽（无居中限宽）。
+
+### 页面骨架尺寸
+
+| 区域 | 尺寸 |
+|---|---|
+| 状态栏 | 高 44pt |
+| 顶部导航（此刻/对话 tabs + 声音/设置） | 高 44pt |
+| 页面左右安全边距 | 16pt（聊天气泡区 12pt） |
+| 底部输入条 | 输入胶囊高 36pt，圆钮 44×44pt |
+| Home Indicator | 高 34pt，黑色横条宽 ~134pt 居中 |
+
+### 组件标准尺寸
+
+| 组件 | 尺寸 |
+|---|---|
+| 全宽卡片 | 宽 343pt（375 − 2×16），高按内容 |
+| 首页双列促销卡 | 宽 ~166pt，两列 gap 12pt |
+| 全宽主按钮 | 343 × 48pt，radius 24pt |
+| 胶囊小按钮 | 高 32pt，左右 padding 16pt |
+| 建议气泡 pill | 高 32pt，padding 0 16pt |
+| 选项列表条目 | 高 ≥56pt（单行） |
+| 表格行 | 高 44pt |
+| 进度条 | 高 4pt，圆形 thumb 直径 16pt |
+| 直播徽标 | 高 16pt，radius-pill |
+| 吉祥物头像 | 直径 48–64pt |
+
+---
+
+## 3. 设计节奏（间距梯度 / 栅格）
+
+### 间距梯度（4pt 基数）
+
+`4 / 8 / 12 / 16 / 20 / 24 / 32`
+
+| 关系 | 值 |
+|---|---|
+| 图标↔文字（行内） | 8pt |
+| 气泡↔气泡（纵向） | 12pt |
+| 卡片↔卡片（纵向） | 12–16pt |
+| 卡内标题↔正文 | 8pt |
+| 卡内正文↔按钮 | 12pt |
+| 区块↔区块（大分组） | 24pt |
+| 页面顶部首个内容 | 16–24pt |
+
+### 栅格
+
+- **双列网格**：首页促销卡 2 列，列宽相等，gap 12pt，边距 16pt。
+- **单列流**：对话内容与数据卡全为单列流式，宽 343pt（气泡区 351pt）。
+- 对齐基线统一 4pt 网格；所有测量值必须是 4 的倍数（例外：图标 15/17 等特殊尺寸允许）。
+
+---
+
+## 4. 配色规范
+
+### 主色（品牌蓝系）
+
+| Token | 值 | 使用场景 |
+|---|---|---|
+| `color-primary` | `#2F86F6` | 主按钮、选中态、进度条、用户气泡基色 |
+| `color-primary-deep` | `#005DFD` | 用户气泡渐变深端、强调 |
+| `color-primary-bright` | `#3B73FF` | 链接、可点击文本、蓝色图标 |
+| `primary-gradient` | `linear-gradient(90deg,#2F86F6,#005DFD)` | 用户气泡、主 CTA |
+
+### 辅助色（营销/情绪）
+
+| Token | 值 | 使用场景 |
+|---|---|---|
+| `color-red` | `#F3464A` | 利率数字、警示、直播徽标、对比卡左方 |
+| `color-orange` | `#F09404` | 活动强调、利息/收益提示 |
+| `color-orange-deep` | `#EE6723` | 橙色 CTA 渐变深端（如 `linear-gradient(90deg,#F09404,#EE6723)`） |
+| `color-green` | `#68C800` | 达成/对勾、筛选条件绿勾 |
+
+### 中性色（文字 + 背景 + 线）
+
+| Token | 值 | 使用场景 |
+|---|---|---|
+| `text-1` | `#1F2635` | 主文字（冷调深灰蓝） |
+| `text-1-warm` | `#221715` | 暖调标题（首页问候/营销卡，与暖背景同源） |
+| `text-2` | `#727885` | 次要文字、说明、未激活 tab |
+| `text-3` | `#AAAAAA` | 占位符、脚注、极弱信息 |
+| `bg-page` | `#F2F3F5`（≈`#EFF1F4`） | 页面基底 |
+| `bg-warm-panel` | `#FEFBF7` | AI 气泡（暖白） |
+| `bg-cream` | `#FFF7E8 → #FEF6ED` | 奶油促销卡渐变 |
+| `bg-blue-tint` | `#EDF5FF` | 标题高亮、淡蓝衬底 |
+| `bg-gray-block` | `#F5F6F8` / `#F5F5F5` | 浅灰信息块、对比表中列 |
+| `divider` | `#E9ECF2`（列表内 `#E9E9E9`） | 分隔线 |
+
+### 页面氛围渐变（全 App 签名特征，必须还原）
+
+顶部氛围光 + 下方渐隐：
+
+```css
+background:
+  radial-gradient(ellipse 60% 30% at 0% 0%,   #DBE3F5 0%, transparent 70%),  /* 左上冷蓝 */
+  radial-gradient(ellipse 60% 30% at 100% 0%, #EEE6D9 0%, transparent 70%),  /* 右上暖奶油 */
+  linear-gradient(180deg, #E4E2E4 0%, #EFF1F4 30%, #F7F8FA 70%, #FBFCFC 100%);
+```
+
+要点：**左冷右暖**的双色晕染只出现在首屏顶部 ~30%，向下收敛为浅灰；对话长页与首页共用。
+
+### 语义色使用规则
+
+- 金额/利率涨跌与关键数字：**红 = 值得关注/收益**（`#F3464A`），蓝 = 中性数据（品牌蓝）。
+- 成功/达成 = 绿 `#68C800`；警告/提醒 = 橙 `#F09404`；错误/禁止 = 红 `#F3464A`。
+- 禁止把品牌蓝用于语义警示；禁止在暖色营销卡上用蓝色文字（对比冲突）。
+
+---
+
+## 5. 层级规范（字号 / 字重 / 行高 / 信息层级）
+
+### 字体族
+
+- 中文/正文：`PingFang SC`（Regular 400 / Medium 500 / Semibold 600）
+- 数字/金额：`DIN Alternate Bold`；数据表数值可用 `SF Pro Text Semibold`
+- 回退栈：`-apple-system, "PingFang SC", "Helvetica Neue", sans-serif`
+
+### 字阶（7 级）
+
+| Token | 字号/行高 | 字重 | 使用场景 |
+|---|---|---|---|
+| `font-hero` | 24 / 34 | Semibold | 首页问候语、大额金额（¥298.69） |
+| `font-display` | 20 / 28 | Semibold + DIN | 金额、核心数值（¥6,000.00） |
+| `font-title` | 18 / 26 | Semibold | 卡片标题、区块题 |
+| `font-nav` | 17 / 24 | Medium | 导航 tab（激活）、大按钮 |
+| `font-body-em` | 16 / 24 | Medium | 卡片条目标题、表格卡标题 |
+| `font-body` | 15 / 24 | Regular | **正文基准**：气泡正文、表格行、列表 |
+| `font-caption` | 14 / 22 | Regular | 辅文、副标题、按钮小字 |
+| `font-footnote` | 13 / 20 | Regular | 脚注、日期行 |
+| `font-note` | 12 / 18 | Regular | 免责/备注（`text-3`） |
+| `font-badge` | 10 / 14 | Medium | 徽标（直播）、角标 |
+
+### 信息层级规则
+
+1. **数字大于文字**：金额/利率永远比同区块标题大（20–24pt vs 16–18pt）。
+2. 一屏最多一个 `font-hero`；区块内强调只用字重 + 语义色，不新增字号。
+3. 辅助说明统一降两级（正文 15 → 备注 12–13）并换中性灰，不缩字号凑层级。
+4. 行高：标题 1.3–1.45，正文 1.5–1.6；数字用 DIN 时行高取 1.2 并与基线对齐。
+
+---
+
+## 6. 布局规范（对齐 / 栅格 / 响应式规则）
+
+- **整体轴向**：单列纵向流；无侧栏、无横滑布局（首页双列卡除外）。
+- **对齐**：标题/正文左对齐（默认）；数据值（金额/利率）与其标签左对齐成组，或表格行内「标签左、值右」两端对齐；气泡按角色左右贴边分流。
+- **底部固定**：输入条 + Home Indicator 固定底部，内容区从其上方滚动；输入条上方留 12pt 间距。
+- **响应式规则**（内容自适应而非多断点）：
+  1. 文本气泡宽度 `max-width: 75%`，超出换行，高度自适应。
+  2. 卡片高度由内容撑开，不写死高度；同类卡片等宽对齐。
+  3. 长页（如产品详情 812→1421pt）只向下增长，骨架区域（导航/输入条）尺寸不变。
+  4. 双列网格内容超长时截断省略（`…`），不挤压列宽。
+
+---
+
+## 7. 风格化（视觉语言 / 质感 / 图标与插画）
+
+### 视觉语言一句话
+
+**「暖调 AI 管家」**：冷蓝品牌色承载功能与信任，暖奶油/橙承载营销与温度；扁平 UI 面板 + 3D 轻拟物插画混搭，氛围光背景消除生硬感。
+
+### 质感
+
+- UI 面板全扁平：纯色/线性渐变填充 + 大圆角，**无内阴影、无描边、无噪点**。
+- 插画区轻拟物 3D：柔光、软投影、轻微光泽（glossy），禁止硬边扁平插画与线框风。
+- 氛围：柔和、透气、留白充足；背景氛围光让白卡「浮」在页面上。
+
+### 插画风格（3D 金融物件）
+
+- 题材：金币、存钱罐、沙漏、银行卡、计算器、进度台座等金融符号。
+- 色域：暖金 `#F6CAA3` / 橙 `#F09404` / 深橙 `#EE6723` 为主，点缀品牌蓝卡片元素。
+- 构图：物件置于卡片右上角或顶部，**允许溢出卡片边缘**（打破边界是设计特征）。
+- 生成关键词（ImageGen 用）：`3D render, soft studio light, glossy financial objects, gold coins, warm orange palette, soft shadows, isolated on transparent background, C4D style, octane render`
+
+### 吉祥物
+
+- 白色圆脸机器人（`assets/robot.png`，168×168 RGBA）：极简面部，橙红色圆腮红/耳点，无复杂五官。
+- 用途：首页问候头像、AI 消息头像。保持原始素材，不重绘。
+
+### 图标
+
+- 导航图标：黑色细线性描边（声音、设置，24pt 网格，2pt 描边）。
+- 功能图标：品牌蓝填充或蓝描边（右箭头、对勾）。
+- 素材直接取 `assets/icons/`（icon-sound / icon-settings / icon-voice-switch / icon-arrow-right-blue / icon-check / icon-apps / vs-badge / tag-bg / progress-thumb），等比缩放使用，不重绘。
+
+### 人物照片
+
+- 人类顾问/主播用真实照片（圆角 12pt 裁切），与 3D 插画分区使用：真人 = 服务人格化，3D = 内容视觉化。无照片素材时用 ImageGen 生成职业形象照。
+
+### 徽标与标签
+
+- 直播徽标：红底 `#F3464A` 白字 10pt，radius-pill，左侧圆点。
+- 标签底图：`assets/icons/tag-bg.png`（奶油色异形标签）。
+
+---
+
+## 附：提炼来源与可信度
+
+| 数据 | 来源 | 可信度 |
+|---|---|---|
+| 色值/字号/圆角/阴影频次 | 两套 index.html 内联样式正则统计（top 频次取众数） | 高（设计源数据） |
+| 背景渐变/奶油卡色 | 预览 PNG 逐像素采样（#DBE3F5/#EEE6D9/#EFF1F4/#FFF7E8/#FEF6ED） | 高（实测） |
+| 组件尺寸/间距 | 45 画板目测 + MeaXure 数值交叉 | 中高（±2pt） |
+| 字体族 | MeaXure font-family 统计 | 高 |

package/dist/vendored/skills/mbank-design-gen/templates/mockup-template.html

@@ -0,0 +1,138 @@
+<!DOCTYPE html>
+<!-- MBank 高保真稿画布模板。用法：复制本文件，替换 <body> 内 slot 区域。
+     画布 375×812pt（@2x 导出 750×1624px）。token 与 references/design-spec.md 一一对应。
+     assets 路径按本文件位置相对引用（templates/../assets/）；复制到别处时同步调整。 -->
+<html lang="zh-CN">
+<head>
+<meta charset="UTF-8">
+<title>MBank Mockup</title>
+<style>
+  /* ===== Design Tokens（唯一取值处，改样式只改这里） ===== */
+  :root {
+    /* 主色 */
+    --c-primary: #2F86F6;
+    --c-primary-deep: #005DFD;
+    --c-primary-bright: #3B73FF;
+    --grad-primary: linear-gradient(90deg, #2F86F6, #005DFD);
+    /* 辅助色 */
+    --c-red: #F3464A;
+    --c-orange: #F09404;
+    --c-orange-deep: #EE6723;
+    --grad-cta: linear-gradient(90deg, #F09404, #EE6723);
+    --c-green: #68C800;
+    /* 中性 */
+    --text-1: #1F2635;
+    --text-1-warm: #221715;
+    --text-2: #727885;
+    --text-3: #AAAAAA;
+    --bg-page: #F2F3F5;
+    --bg-warm-panel: #FEFBF7;
+    --bg-blue-tint: #EDF5FF;
+    --bg-gray-block: #F5F6F8;
+    --divider: #E9ECF2;
+    /* 圆角 */
+    --r-xs: 4px; --r-sm: 8px; --r-md: 12px; --r-lg: 20px; --r-xl: 22px; --r-pill: 100px;
+    /* 阴影 */
+    --shadow-float: 0 2px 6px rgba(134,155,168,.5);
+    --shadow-soft: 0 2px 10px rgba(0,0,0,.2);
+    /* 字体 */
+    --font: -apple-system, "PingFang SC", "Helvetica Neue", sans-serif;
+    --font-num: "DIN Alternate Bold", "SF Pro Text Semibold", var(--font);
+    /* 间距 */
+    --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px;
+  }
+  * { margin: 0; padding: 0; box-sizing: border-box; }
+  html, body { width: 375px; }
+  body {
+    font-family: var(--font); color: var(--text-1); font-size: 15px; line-height: 1.6;
+    /* 全 App 签名背景：左冷蓝右暖奶油氛围光 + 向下渐隐 */
+    background:
+      radial-gradient(ellipse 60% 30% at 0% 0%,   #DBE3F5 0%, transparent 70%),
+      radial-gradient(ellipse 60% 30% at 100% 0%, #EEE6D9 0%, transparent 70%),
+      linear-gradient(180deg, #E4E2E4 0%, #EFF1F4 30%, #F7F8FA 70%, #FBFCFC 100%);
+    min-height: 812px; position: relative;
+  }
+  .canvas { min-height: 812px; display: flex; flex-direction: column; }
+
+  /* ===== 全局框架 ===== */
+  .statusbar { height: 44px; display: flex; align-items: center; justify-content: space-between; padding: 0 16px; font-size: 15px; font-weight: 600; }
+  .navbar { height: 44px; display: flex; align-items: center; padding: 0 16px; }
+  .navbar .tabs { display: flex; gap: 24px; }
+  .navbar .tab { font-size: 17px; color: var(--text-2); }
+  .navbar .tab.active { color: var(--text-1); font-weight: 500; }
+  .navbar .actions { margin-left: auto; display: flex; gap: 16px; align-items: center; }
+  .navbar .actions img { width: 24px; height: 24px; }
+  .content { flex: 1; padding: var(--sp-4) var(--sp-3); }
+  .bottombar { position: sticky; bottom: 0; padding: var(--sp-3) var(--sp-4) 0; display: flex; gap: var(--sp-3); align-items: center; }
+  .input-pill { flex: 1; height: 36px; background: #fff; border-radius: var(--r-pill); display: flex; align-items: center; padding: 0 16px; gap: var(--sp-2); color: var(--text-3); font-size: 15px; }
+  .grid-btn { width: 44px; height: 44px; border-radius: 50%; background: #fff; box-shadow: var(--shadow-float); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
+  .home-indicator { height: 34px; display: flex; align-items: center; justify-content: center; }
+  .home-indicator::after { content: ""; width: 134px; height: 5px; border-radius: 3px; background: #000; }
+
+  /* ===== 气泡 ===== */
+  .bubble { max-width: 75%; padding: 12px 16px; font-size: 15px; line-height: 1.6; margin-bottom: var(--sp-3); }
+  .bubble.user { margin-left: auto; background: var(--grad-primary); color: #fff; border-radius: 12px 0 12px 12px; }
+  .bubble.ai { background: var(--bg-warm-panel); border-radius: 0 12px 12px 12px; }
+  .bubble.ai .note { margin-top: var(--sp-2); font-size: 13px; line-height: 1.55; color: var(--text-2); }
+  .bubble.ai .hl { color: var(--c-primary-bright); font-weight: 600; }
+
+  /* ===== 选项列表卡 ===== */
+  .option-group { background: rgba(255,255,255,.7); border-radius: var(--r-lg); padding: var(--sp-3) var(--sp-4) var(--sp-4); margin-bottom: var(--sp-3); }
+  .option-group .group-title { font-size: 15px; color: var(--text-2); margin-bottom: var(--sp-3); }
+  .option-item { background: #fff; border-radius: var(--r-md); padding: 14px var(--sp-4); display: flex; align-items: center; justify-content: space-between; }
+  .option-item + .option-item { margin-top: var(--sp-3); }
+  .option-item .t { font-size: 16px; font-weight: 500; }
+  .option-item .d { font-size: 14px; color: var(--text-2); margin-top: var(--sp-1); }
+  .option-item.selected .t { color: var(--c-primary); }
+  .option-item.selected { border: 1px solid var(--c-primary); }
+
+  /* ===== 建议气泡 ===== */
+  .suggestion { padding: 0 var(--sp-1); }
+  .suggestion .s-title { font-size: 15px; color: var(--text-2); margin-bottom: var(--sp-3); }
+  .suggestion .pill { display: inline-block; height: 32px; line-height: 30px; padding: 0 var(--sp-4); background: #fff; border: 1px solid var(--c-primary); color: var(--c-primary); border-radius: var(--r-pill); font-size: 14px; margin: 0 var(--sp-2) var(--sp-3) 0; }
+
+  /* ===== 表格卡 ===== */
+  .sheet { background: #fff; border-radius: var(--r-lg); padding: var(--sp-4); margin-bottom: var(--sp-3); }
+  .sheet .sheet-title { font-size: 16px; font-weight: 500; }
+  .sheet .sheet-title mark { background: var(--bg-blue-tint); padding: 2px 4px; }
+  .sheet .row { height: 44px; display: flex; align-items: center; justify-content: space-between; font-size: 15px; border-bottom: 1px solid #E9E9E9; }
+  .sheet .row:last-of-type { border-bottom: none; }
+  .sheet .row .val { color: var(--c-red); font-weight: 600; }
+  .sheet .footnote { font-size: 12px; line-height: 1.5; color: var(--text-3); margin-top: var(--sp-2); }
+
+  /* ===== 主按钮 / 胶囊 ===== */
+  .btn-primary { width: 100%; height: 48px; border-radius: 24px; background: var(--c-primary); color: #fff; font-size: 17px; font-weight: 500; display: flex; align-items: center; justify-content: center; }
+  .btn-cta { height: 32px; padding: 0 var(--sp-4); border-radius: var(--r-pill); background: var(--grad-cta); color: #fff; font-size: 14px; font-weight: 500; display: inline-flex; align-items: center; }
+
+  /* ===== 通用卡 ===== */
+  .card { background: #fff; border-radius: var(--r-lg); padding: var(--sp-4); margin-bottom: var(--sp-3); }
+  .card.float { box-shadow: var(--shadow-float); }
+  .card.cream { background: linear-gradient(160deg, #FFF7E8, #FEF6ED); }
+  .card .card-title { font-size: 18px; font-weight: 600; color: var(--text-1-warm); }
+
+  /* ===== slot：在此填充页面内容 ===== */
+</style>
+</head>
+<body>
+<div class="canvas">
+  <div class="statusbar"><span>9:41</span><span>▮▮▮</span></div>
+  <div class="navbar">
+    <div class="tabs"><span class="tab active">此刻</span><span class="tab">对话</span></div>
+    <div class="actions">
+      <img src="../assets/icons/icon-sound.png" alt="">
+      <img src="../assets/icons/icon-settings.png" alt="">
+    </div>
+  </div>
+
+  <div class="content">
+    <!-- SLOT：页面主体。按 component-library.md 拼装气泡/卡片/表格。 -->
+  </div>
+
+  <div class="bottombar">
+    <div class="input-pill">欢迎向小易提问~</div>
+    <div class="grid-btn"><img src="../assets/icons/icon-apps.png" width="20" height="20" alt=""></div>
+  </div>
+  <div class="home-indicator"></div>
+</div>
+</body>
+</html>