cardbuddy 0.16.0 → 0.17.0

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>

package/dist/vendored/skills/mbank-design-gen/tools/screenshot.mjs

@@ -0,0 +1,34 @@
+#!/usr/bin/env node
+// MBank mockup 截图工具：把 375×812 的 mockup HTML 导出为 750×1624 @2x PNG。
+// 用法：node <skill>/tools/screenshot.mjs <input.html> [output.png] [--full]
+//   --full  整页截图（长页 mockup 用；默认 812pt 视口截断）
+// 依赖 playwright（仓库根 node_modules 已装；本脚本从自身位置向上解析）。
+import { createRequire } from 'node:module';
+import { dirname, resolve } from 'node:path';
+import { fileURLToPath } from 'node:url';
+import { pathToFileURL } from 'node:url';
+
+const here = dirname(fileURLToPath(import.meta.url));
+const require = createRequire(import.meta.url);
+const { chromium } = require('playwright');
+
+const args = process.argv.slice(2);
+const full = args.includes('--full');
+const positional = args.filter((a) => !a.startsWith('--'));
+const input = positional[0];
+if (!input) {
+  console.error('usage: node screenshot.mjs <input.html> [output.png] [--full]');
+  process.exit(1);
+}
+const output = positional[1] || input.replace(/\.html$/i, '') + '.png';
+
+const browser = await chromium.launch();
+const page = await browser.newPage({
+  viewport: { width: 375, height: 812 },
+  deviceScaleFactor: 2, // @2x → 750 宽输出，与设计稿一致
+});
+await page.goto(pathToFileURL(resolve(input)).href, { waitUntil: 'networkidle' });
+await page.waitForTimeout(300); // 字体/图片稳定
+await page.screenshot({ path: output, fullPage: full });
+await browser.close();
+console.log(output);

package/dist/vendored/skills/shared/spec-contract.md

@@ -45,12 +45,14 @@
 | text_only | 纯文本画板（对话 / 问答 / 提示），整板无卡 | `[]` | 不产 | **不建卡**（上游按类型收口，勿人工绕过） | `classify_artboard`；`test_text_only_artboard.py` 用例 1 |
 | overlay_dialog | 系统弹框 | `[]` | 视觉 scrim 判定类不产；名称兜底判定类产 fallback `card-1.png` | **不建卡** —— 由父卡 alertDialog 调用承载 | 用例 5 |
 | subcard | 视觉 bottom-sheet 子卡（底部抽屉） | **1 张**（面板几何直取，**不走候选检测**） | 产 `card-1.png`（面板 rect + 顶圆角遮罩） | **建独立 Dialog 卡** —— 与普通卡同构：`rect` / `mask.radius` / 卡内 `elements` / `segments` 齐备 | `detect_artboard_cards` sheet 分支；`vision._bottom_sheet_rect`；用例 4 |
-| card | 0 卡 · 结构丰富：卡片被整体导成一张切片（`vision._candidate_visuals` 跳过 `is_slice`，故检不出） | `[]` | 产 fallback `card-1.png`（去系统 chrome） | 建卡：以该兜底图 + `elements[]` 为准（**有图无坐标**） | `parse_meaxure.py:645`；`board_tag`（`:1768`）；用例 2/3/6 |
+| card | 0 卡 · 结构丰富：候选被读成控件条 / 无候选（整卡单切图已由兜底提升为 1 张卡，见下注） | `[]` | 产 fallback `card-1.png`（去系统 chrome） | 建卡：以该兜底图 + `elements[]` 为准（**有图无坐标**） | `parse_meaxure.py:645`；`board_tag`（`:1768`）；用例 2/6 |
 
 > 注：本表首列**刻意不加反引号** —— `spec-contract.test.mjs` 以「首列反引号 + 整行 6 列」识别字段契约表，加反引号会让本表被误当成字段登记。
 
 > **`subcard` 产卡（2026-09-24 修）**：此前 `bottom_sheet` 只写 `focusSkipReason` 不产 `cards`，导致 `cluster_states` 承认它是独立逻辑卡（`pageId=card-N`、`isDialog=true`）而 spec 层给不出任何卡级数据。现由 `detect_artboard_cards` 的 sheet 分支把面板几何（`vision._bottom_sheet_rect` 早已算出 rect + 顶圆角）落成 1 张卡；`focusSkipReason` **保持不变**（`classify_artboard` 靠它判 `subcard`，改动会连带打翻 `is_text_only_artboard` / `board_verdict` / trainer 的 `is_popup_case`）。**旧版存量 spec 仍可能是 `subcard` + `cards=[]` → 重跑上游，不要在下游补卡。**
 
+> **整卡单切图兜底（2026-09-28）**：设计稿把卡片整体导成一张大切图时（图层树只剩「编组 N」大图），`detect_artboard_cards` 在**常规候选 0 卡**时把该切图提升为 1 张真卡。纯几何判据：宽 ≥ 55%W、高 ≥ 12%H、纵向落在 10%..95%H、区域归属元素只有切图本身（混入任何文本/其他切图标注不兜底）。此前这类画板 `cards=[]` → manifest `trainingEligible=false` → 数据集构建整板跳过，「对话 + 内嵌卡」形态永远进不了训练。兜底后 `cards[0].rect` = 切图几何、卡内 elements 只有该 slice，下游按普通 Image 卡建卡。仅 0 卡时触发，已有卡的画板行为不变。
+>
 > `readiness.mjs` 门 **F**：`cards=[]` 的三类（text_only / overlay_dialog / card）只在 `checks.spec.notes` 记说明，**均不进 `blockers`**；`cards` 非空时只校验 `rect` / `mask` 是否缺失（产卡与否由 Workflow A.5 决定，不是契约缺失）。
 > 门 F 真正拦的只有：`cards` 非空时 `cards[i].rect` / `cards[i].mask` 缺失（旧版产物）、`--card` 序号越界、spec 解析失败。
 
@@ -116,3 +118,10 @@
 - 判定口径：字段出现次数 < `cards[]` 总数即存在旧产物。
 - 处置：**重跑上游**（`parse_meaxure.py --src <导出> --draft <稿名> --build`）而非手工补字段。
 - 不要为了兼容旧产物在下游写 `if (!card.mask)` 分支 —— 契约规定 `mask` 必需，兼容分支会让"上游漏产"永远不被发现。
+
+---
+### upstream-structural-focus-image-card（r264 训练回灌）
+> lesson: `r264-l01`  status: `promoted`
+
+整卡单切图形态（设计稿把卡片整体导出成一张大切图，图层树只剩该图、卡内无任何文本/按钮标注）此前在解析器永远 0 卡：_candidate_visuals 跳过 is_slice → 候选全被低结构门拒绝 → spec.cards=[] → manifest trainingEligible=false → 数据集构建整板跳过，而 is_text_only_artboard 又承认这种板「有卡」（has_card_like_visual），两处口径互相矛盾。修复三件套：① detect_artboard_cards 在常规候选 0 卡时把合格大切图兜底提升为 1 张真卡（判据纯几何：宽≥55%W、高≥12%H、纵向 10%..95%H、区域归属元素仅切图本身，混入任何其他标注不兜底）；② card_focus_metrics 把切片当内容而非壳——面积≥55%卡区的壳层排除规则只适用 shape/symbol，切片无条件计数并新增 sliceAreaRatio 字段；③ 训练器上游结构聚焦门新增图像卡通道 sliceAreaRatio≥0.6。生成器对该形态的忠实还原 = 把切片绑为卡背景图（R31 消毒空格→连字符），像素/结构/色彩门按同图对比正常评分。
+

package/dist/vendored/skills/sketch-spec-to-card/SKILL.md

@@ -159,7 +159,7 @@ python skills/sketch-spec-to-card/scripts/cluster_states.py --out <UI目录> --a
 
 1. 每个候选必须是一个**完整业务卡边界**：有独立容器、标题/内容主体和业务语义，不是对话气泡、单个按钮、图标、状态条或背景装饰。
 2. 一张画板的多个卡片必须分别落成 `card-1.png`、`card-2.png`；不允许把多张业务卡合成一张截图。
-3. 识别不到完整卡片，或画板只是弹窗、toast、底部抽屉等交互态，输出 `trainingEligible=false` 并记录跳过原因，不进入普通卡训练。
+3. 识别不到完整卡片，或画板只是弹窗、toast、底部抽屉等交互态，输出 `trainingEligible=false` 并记录跳过原因，不进入普通卡训练。**例外（整卡单切图，2026-09-28）**：设计稿把卡片整体导成一张大切图（图层树只剩该图、卡内无文本/按钮标注）时，`detect_artboard_cards` 在常规候选 0 卡后把合格大切图兜底提升为 1 张真卡（纯几何判据：宽≥55%W、高≥12%H、纵向 10%..95%H、区域归属元素仅切图本身；混入任何其他标注不兜底）——`trainingEligible=true`，下游按图像卡（切片绑背景图）建卡。
 4. 低置信度候选宁可拒绝并进入 `rejectedCards`，不得为了提高召回把按钮或气泡当卡片。
 5. `focus-audit` 必须保留 `acceptedCards/rejectedCards/skippedNoCards` 证据，后续训练只消费通过该门的普通卡。
 

package/dist/vendored/skills/sketch-spec-to-card/scripts/parse_meaxure.py

@@ -555,6 +555,36 @@ def detect_artboard_cards(ab_raw):
                     "reason": reason,
                     "metrics": focus_metrics,
                 })
+
+        # 整卡单切图兜底（whole-card-as-one-slice）：常规候选全被拒（0 卡）时，若板上存在
+        # 卡片级大盘切图（卡片被设计稿整体导成一张图——图层树只剩「编组 N」大图），
+        # 把该切图提升为 1 张卡。此前这类板 cards 恒为空 → manifest trainingEligible=false
+        # → 数据集构建整板跳过，「对话 + 内嵌卡」形态永远进不了训练；而
+        # is_text_only_artboard 早已承认这种板「有卡」（has_card_like_visual），两处口径不一致。
+        # 判据（纯几何，与 has_card_like_visual 同口径，禁业务词）：
+        #   · 宽 ≥ 55%W、高 ≥ 12%H，纵向落在 10%..95%H（标题栏之下、输入坞/Home 之上）；
+        #   · 「纯单切图」：区域归属元素只有这张大图本身（无文本/其他切图被归属进来）——
+        #     标注里只要还有可建结构，就维持低结构门的保守性，不走图像卡路线；
+        #   · 仅在 0 卡时触发，已有卡的画板行为不变（冻结锚点安全）。
+        if not cards:
+            for ve in flattened:
+                if not ve.is_slice:
+                    continue
+                sx, sy, sw, sh = ve.rect
+                if sw < 0.55 * W or sh < 0.12 * H:
+                    continue
+                if sy < 0.10 * H or (sy + sh) > 0.95 * H:
+                    continue
+                region = (sx, sy, sw, sh)
+                owned = vision.elements_in_rect(flattened, region)
+                if len(owned) != 1 or owned[0] is not ve:
+                    continue  # 区域里混有任何其他标注 → 不兜底，交给既有裁决
+                cards.append((
+                    sx, sy, sw, sh, owned,
+                    [(region, list(ve.radius or []))],
+                    vision.card_focus_metrics(owned, region, W, H),
+                ))
+                break  # 兜底只提 1 张：多重叠大切图不做连环提升
     return {
         "W": W, "H": H, "layers": raw_layers,
         "overlay": bool(overlay), "sheet": bool(bottom_sheet),

package/dist/vendored/skills/sketch-spec-to-card/scripts/test_text_only_artboard.py

@@ -6,14 +6,16 @@
 
   1. 纯文本对话页（信用卡返现 01/03 型）：气泡里只有文字 → text_only，被过滤；
   2. 对话 + 内嵌矢量卡（理财 06 型）：卡壳里是 3 宫格选项，检测器会读成「控件条」→ 保留；
-  3. 对话 + 卡片切图（房贷 32 型）：卡片被整体导成一张切图 → 保留；
+  3. 对话 + 卡片切图（房贷 32 型）：卡片被整体导成一张切图 → 整卡单切图兜底产 1 张卡
+     （2026-09-28 前 cards 恒为 0，训练集永远盖不到该形态）；
   4. 底部抽屉（喜豆 04/05/06 型）：alertCard 子卡形态 → 保留（subcard），
      且**产 1 张卡**（矩形由 `vision._bottom_sheet_rect` 几何直取，非候选检测）；
   5. 全屏遮罩弹框 → 保留（overlay_dialog）；
   6. 0 候选的普通文字页：保守保留，交给下游裁决（维持既有行为）。
 
 断言分两层：`kind/skip`（画板类型判定，6 例）+ `cards` 数（产出，注意卡片型用例
-允许 0 —— kind 与 cards 数解耦是上游有意设计）+ 抽屉元素归属（边界气泡不得渗入）。
+允许 0 —— kind 与 cards 数解耦是上游有意设计；整卡单切图兜底后用例 3 产 1 张）
++ 抽屉元素归属（边界气泡不得渗入）。
 """
 import sys
 from pathlib import Path
@@ -131,7 +133,7 @@ PLAIN_NO_CANDIDATE = ab("03信用卡返现_有信用卡_无返现记录", chrome
 CASES = [
     (CHAT_TEXT_ONLY, "text_only", True, 0, "纯文本对话页（只有问答气泡）"),
     (CHAT_WITH_VECTOR_CARD, "card", False, 0, "对话 + 内嵌矢量卡（3 宫格选项）"),
-    (CHAT_WITH_SLICED_CARD, "card", False, 0, "对话 + 卡片切图"),
+    (CHAT_WITH_SLICED_CARD, "card", False, 1, "对话 + 卡片切图（整卡单切图兜底）"),
     (BOTTOM_SHEET, "subcard", False, 1, "底部抽屉（alertCard 子卡）→ 几何直取 1 张卡"),
     (OVERLAY_DIALOG, "overlay_dialog", False, 0, "全屏遮罩弹框（alertDialog）"),
     (PLAIN_NO_CANDIDATE, "card", False, 0, "0 候选的普通文字页（保守保留）"),
@@ -196,6 +198,26 @@ def main():
     assert vision.has_card_like_visual(flat_text_only, 375, 812) is False, "30x30 图标切图不该判为卡片"
     print("[PASS] has_card_like_visual：中段大盘切图算卡，小图标不算")
 
+    # 整卡单切图兜底（2026-09-28）：0 卡画板上的卡片级大盘切图提升为 1 张真卡，
+    # 让「对话 + 内嵌卡（整卡导出为一张图）」形态进入训练集；纯单切图才兜底。
+    found = pm.detect_artboard_cards(CHAT_WITH_SLICED_CARD)
+    assert len(found["cards"]) == 1, f"整卡单切图应兜底为 1 张卡，实际 {len(found['cards'])}"
+    fx, fy, fw, fh, f_els, f_shapes, _fm = found["cards"][0]
+    assert (fx, fy, fw, fh) == (16, 276, 343, 280), f"兜底卡矩形应取切图几何，实际 {(fx, fy, fw, fh)}"
+    assert len(f_els) == 1 and f_els[0].is_slice, "纯单切图兜底：归属元素应只有切图本身"
+    # 混入其他标注（气泡文字渗进切图区域）→ 不兜底，维持 0 卡
+    MIXED = ab("32房贷利率调整_混合标注", chrome() + bubble(
+        196, 100, 163, 42, text("调整下我的房贷利率", 208, 110, 140, 22)) + [
+        L("应答气泡", "shape", 16, 156, 343, 108, radius=[0, 12, 12, 12], hexv="#FFFFFFFF"),
+        text("您的贷款为深圳地区二套住房贷款……", 30, 166, 315, 88),
+        L("编组 4", "slice", 16, 276, 343, 280),
+        text("浮层标注", 30, 300, 200, 24),
+    ])
+    found_mixed = pm.detect_artboard_cards(MIXED)
+    assert len(found_mixed["cards"]) == 0, \
+        f"切图区域内混有文本标注时不得兜底，实际 {len(found_mixed['cards'])} 卡"
+    print("[PASS] 整卡单切图兜底：纯切图 → 1 卡（矩形=切图几何）；混入标注 → 不兜底")
+
     # 同名画板消歧（2026-09-24）：Sketch 允许两个画板**完全同名**——实测「地址管理」稿
     # 25 板里两个「11…_失败_再次修改」（375×1232/129 层 vs 375×1252/130 层，两个不同设计）。
     # 目录名直接用 name 时后跑的会整板覆盖先跑的（产物静默丢失），且 manifest 两条 entry

package/dist/vendored/skills/sketch-spec-to-card/scripts/vision.py

@@ -899,7 +899,13 @@ def _is_divider(ve):
 
 
 def card_focus_metrics(elements, rect, width, height):
-    """量化候选区域的结构复杂度，供聚焦提取统一过滤。"""
+    """量化候选区域的结构复杂度，供聚焦提取统一过滤。
+
+    切片（slice）是**内容**（设计稿导出的真实图像），不是卡壳——「面积 ≥ 55% 卡区
+    跳过」的壳层排除规则只适用于 shape/symbol 背景层，不得吞掉切片计数，否则
+    「整卡 = 一张大切图」的形态会被统计成零结构（真踩过：slice 兜底卡 rich=0）。
+    sliceAreaRatio：切片覆盖卡区的面积比，供下游识别「图像卡」形态。
+    """
     x, y, w, h = rect
     card_area = max(w * h, 1)
     text_count = 0
@@ -907,6 +913,7 @@ def card_focus_metrics(elements, rect, width, height):
     slice_count = 0
     symbol_count = 0
     shape_count = 0
+    slice_area = 0.0
     for ve in elements:
         if _intersect_ratio(ve.rect, rect) < 0.35:
             continue
@@ -914,12 +921,16 @@ def card_focus_metrics(elements, rect, width, height):
             if ve.area > 0:
                 text_count += 1
             continue
-        if _is_divider(ve) or ve.area >= 0.55 * card_area:
+        if _is_divider(ve):
             continue
         if ve.is_slice:
             slice_count += 1
             rich_count += 1
-        elif ve.type == "symbol":
+            slice_area += _intersect_ratio(ve.rect, rect) * ve.area
+            continue
+        if ve.area >= 0.55 * card_area:
+            continue
+        if ve.type == "symbol":
             symbol_count += 1
             rich_count += 1
         elif ve.type == "shape" and (ve.fills or ve.border or any(v > 0 for v in _radius_values(ve.radius))):
@@ -932,6 +943,7 @@ def card_focus_metrics(elements, rect, width, height):
         "textCount": text_count,
         "richComponentCount": rich_count,
         "sliceCount": slice_count,
+        "sliceAreaRatio": min(1.0, slice_area / card_area),
         "symbolCount": symbol_count,
         "shapeCount": shape_count,
     }