cardbuddy 0.16.0 → 0.17.0

package/dist/vendored/skills/dsl-card-generator/scripts/lib/v3_assemble.mjs

@@ -544,6 +544,18 @@ function buildSchemaFromSemantics(sem, id, name, opts = {}) {
   for (const cluster of sem.chartClusters || []) {
     addSemanticBound(cluster.y, cluster.y + cluster.height, true)
   }
+  // 富文本段落块（多行段落按视觉行重组、逐片保留字重）：占据真实纵向空间，必须登记边界——
+  // 否则下游行（辅助文案/徽章行/按钮）的顶距只能从更早的语义底沿起算，逐段累积下漂
+  // （r265 实测：首段之后所有内容整体 +88px，全卡溢出 ~400px）。
+  for (const rb of sem.richBlocks || []) {
+    const box = rect(rb.container)
+    const lineBottomOf = (rb.lines || []).reduce((maxBottom, line) => Math.max(
+      maxBottom,
+      (rect(line[0]).y || 0) + Math.max(...line.map((f) => rect(f).height || 0)),
+    ), 0)
+    const bottom = Math.max((rb.y || 0) + (box.height || 0), lineBottomOf)
+    addSemanticBound(rb.y, bottom, true)
+  }
   for (const aux of sem.auxTexts || []) {
     addSemanticBound(aux.y, textBoundBottom(aux.y, aux.height, aux.fontSize))
     // 主视觉领行（文本左侧大切片）：流式行高取主视觉高度；主视觉溢出卡顶时流式
@@ -2819,7 +2831,10 @@ function buildSchemaFromSemantics(sem, id, name, opts = {}) {
   // 拓扑驱动：先渲染「实时到账」类 mid 文本，表单行随后，footer 文本（温馨提示/最大金额）留到按钮之后。
   const formTopY = sem.formRows && sem.formRows.length
     ? Math.min(...sem.formRows.map((f) => f.label.y))
-    : (sem.buttons.length ? (rect(sem.buttons[0]).y || 0)
+    // buttons[] 是归一化对象（几何挂在 x/y/width/height，没有 .rect），rect() 读不到会恒取 0 →
+    // formTopY 塌成 0 时 midAux 全空、全部辅助文案并进 footAux（顶距退化成「同子列上一行估算底沿」）。
+    // 归一化字段优先、spec 元素 rect 兜底。
+    : (sem.buttons.length ? (Number.isFinite(sem.buttons[0].y) ? sem.buttons[0].y : (rect(sem.buttons[0]).y || 0))
       : (scatterBand ? scatterBand.pillTop : 9999))
   const midAux = (sem.postAmountTexts || []).filter((t) => (t.y || 0) < formTopY)
   const footAux = (sem.postAmountTexts || []).filter((t) => (t.y || 0) >= formTopY)
@@ -2837,7 +2852,7 @@ function buildSchemaFromSemantics(sem, id, name, opts = {}) {
     }
     return bottom
   }
-  const lineBottom = (pat) => (pat.y || 0) + ((pat.fontSize || 14) * 1.4)
+  const lineBottom = (pat) => (pat.y || 0) + estimatedTextBoxHeight(pat.height, pat.fontSize || 14)
   // 上方元素底沿：前一项行底；第一项用显式传入的 beforeBottom（主金额底/按钮底/表单底），否则 null（回退固定值）
   function auxRowPadding(pat, prevPat, isLast, beforeBottom) {
     const gaps = {}
@@ -3447,6 +3462,17 @@ function buildSchemaFromSemantics(sem, id, name, opts = {}) {
       })
       previousFormBottom = rowVisualBottom
     }
+    // 表单行认领的图标（左侧 icon / 值前导媒体 / 行尾媒体 / 右侧 affordance）已在本行渲染，
+    // 必须从孤立媒体兜底池回收——否则同一个切片渲染两遍（重影 + duplication 掉分），
+    // 且兜底行会另起一段流式内容把按钮整体下推（r282 实测：卡图标在账户行与按钮行各出现一次，
+    // 按钮行被顶出卡片底、y≈716 单带像素差异 88%）。
+    if (Array.isArray(sem.isolatedBlocks)) {
+      const _rowClaimed = new Set(sorted.flatMap((p2) => [p2.leftIconSlice, p2.valueLeadSlice,
+        p2.trailingIconSlice, p2.rightAffordanceSlice]).filter(Boolean))
+      if (_rowClaimed.size) {
+        sem.isolatedBlocks = sem.isolatedBlocks.filter((bl) => !_rowClaimed.has(bl.element))
+      }
+    }
     // Interleave dividers that fall between form rows into formHost
     const formTopY = sorted[0].label.y
     const formBottomY = Math.max(...sorted.map((fr) => Math.max(...[fr.value, ...(fr.subValues || []), fr.label]
@@ -3708,6 +3734,9 @@ if (subsActive.length && !sem._subAmountsConsumed) {
     })()
     // 单按钮行的水平内边距按 spec 按钮边缘推导（flex-end→右缘、flex-start→左缘），
     // 通用卡 padding 会把按钮钉在错误内缩上（如壳内右锚按钮偏出 16px）。
+    // 注意：只按断言侧给单边内缩。两侧同时写几何内缩会把 width:100% 的按钮挤窄
+    // （右锚 195+16 内缩 → 内容盒只剩 132px → 文案换行溢出 textOverflow 门，
+    // r276 于 33 例上实测回归）。按钮宽度由下面的「设计宽 vs 撑满行」分支决定。
     const btnLeftPad = singleBtn && singleJustify === 'flex-start'
       ? Math.max(0, Math.round((singleBtn.x || buildCardLeft) - buildCardLeft))
       : T.pad('card')
@@ -3733,7 +3762,12 @@ if (subsActive.length && !sem._subAmountsConsumed) {
       if (sem.buttons.length > 1) {
         setStyleChild(b, 'flex', 'flexShrink', '1')
         setStyleChild(b, 'rect', 'width', '100%')
-      } else if (btn.width && btn.width < (sem.cardRect?.width || 375) * 0.8) {
+      // 单按钮宽度：设计宽 < 卡宽 ⇒ 标注带显式设计宽（含「壳内按钮的内缩宽」），用设计宽 +
+      // flexShrink:0；水平位置交给行内边距与 justify（见上，只给断言侧单边内缩）。
+      // 旧判据用「卡宽 ×0.8」这条魔数比例，落在 80%~100% 区间的设计宽会被并进「撑满行」分支、
+      // 宽度被抹成行内容盒宽（r273 实测 279/343 的按钮渲染成 311 满宽）；
+      // 而右锚按钮（flex-end）本就该用设计宽——撑满行会把按钮左缘推到卡片左缘。
+      } else if (btn.width && btn.width < (sem.cardRect?.width || 375) - 2) {
         setStyleChild(b, 'flex', 'flexShrink', '0')
         setStyleChild(b, 'rect', 'width', String(Math.round(btn.width)))
       } else {
@@ -3786,7 +3820,10 @@ if (subsActive.length && !sem._subAmountsConsumed) {
   for (let i = 0; i < footAux.length; i++) {
     const pat = footAux[i]
     const isLast = i === footAux.length - 1
-    const beforeBottom = i > 0 ? lineBottom(footAux[i - 1]) : (previousSemanticBottom(pat.y) ?? btnBottom)
+    // 顶距锚点优先取「真实语义底沿」而非同子列上一行的估算底沿：两者之间可能夹着
+    // 其它通道渲染的块（序号徽章行 / 富文本段落 / 分割线），用上一行估算底沿会把夹层
+    // 高度重复计入顶距、逐段累积下漂（r265 实测每段 +34px）。取不到语义底沿才回退。
+    const beforeBottom = previousSemanticBottom(pat.y) ?? (i > 0 ? lineBottom(footAux[i - 1]) : btnBottom)
     const geom = auxRowPadding(pat, i > 0 ? footAux[i - 1] : null, isLast, beforeBottom)
     // 水平位置同 midAux 纪律：左 padding 由 spec x 坐标驱动（几何锚定与对齐意图无关），
     // 缺了会把左对齐页脚（金额说明/提示语）甩到卡片默认内缩处。

package/dist/vendored/skills/dsl-card-generator/scripts/lib/v3_extract.mjs

@@ -2511,6 +2511,10 @@ const floatDecos = []
     if (formConsumed.has(t) || panelTextConsumed.has(t)) return false
     if (subAmountEls.has(t)) return false
     if (_panelGroupMemberEls.has(t)) return false
+    // 序号徽章行成员（数字壳 + 右侧内容）已被 badgeRows 通道整体渲染：同一文本元素不得
+    // 再被 listTitle 认领。否则徽章行内容二次渲染（重影），且 postAmountTexts 的 y 上界被
+    // 这个假标题截断——假标题下方的段落/页脚文案整批静默丢失（r265 实测 5 段文案蒸发）。
+    if (_badgeRowTextEls.has(t)) return false
     // 复合行模式：行标题判定 = 候选下方 18-110px 有波段，且【另一文本】在相同相对距离(±4px)也有波段
     // （行结构周期性重复）。卡标题（如「我的账户」距首波段 88px，无周期同伴）不受影响。
     if (repeatRowMode) {
@@ -2918,6 +2922,9 @@ const floatDecos = []
       }))
       // 面板组成员：由面板列表模板整体接管
       && !_panelGroupMemberEls.has(t)
+      // 序号徽章行成员（数字 + 右侧内容）：行结构已由 badgeRows 通道还原，
+      // 再当列表项标题会把同一行渲染两次（徽章行 + ListLayout 项重影）。
+      && !_badgeRowTextEls.has(t)
   })
   // 同 y（±10）的 first-col 文本聚合为一项；按 y 排序
   // P0/P1 升级：列表项必须存在「标题下方 18-36px 的描述文本」（desc）——否则摘要区
@@ -3590,20 +3597,46 @@ const floatDecos = []
   } : null
 
   // —— 底部控制件：只用“按钮区下方 + 居中 + 小尺寸近似方形媒体”判定；低置信度的纯文本不建模。
+  // 「折叠/展开控件」是**卡底**控件，判据必须锚在卡底区域，不能只锚「按钮区之下」：
+  // 无按钮卡里 buttonShapes 为空会让 btnRegionBottom 塌成 0，于是卡中任何
+  // 「小尺寸近方形 + 横向居中」的切片都被误认（如账户行左侧的圆形卡标，
+  // r282 实测：同一图标在账户行与卡底各渲染一次，且卡底多出的那一行把
+  // 底部按钮整体顶出内容区，单带像素差异 88%）。
+  // 补一道真值门：切片必须落在卡内下缘带内（底沿不低于卡底 − 带高），
+  // 且不得高于卡片内容区（文本/媒体）底沿——控件在内容之下，不在内容之中。
   const collapseBtn = (() => {
+    const cardRectR = rect(card)
+    const cardBottom = (cardRectR.y || 0) + (cardRectR.height || 0)
     const btnRegionBottom = buttonShapes.length
       ? Math.max(...buttonShapes.map((s) => (rect(s).y || 0) + (rect(s).height || 0)))
       : 0
+    // 卡内下缘带高：不超过卡高 22%，至少容得下控件自身高度
+    const bottomBandHeight = Math.max(24, Math.round((cardRectR.height || 0) * 0.22))
+    // 内容底沿：所有文本/媒体元素的最低底沿（归一化对象用 rect() 读不到时按 0 略过）
+    let contentBottom = 0
+    for (const t of texts) {
+      const tr = rect(t)
+      contentBottom = Math.max(contentBottom, (tr.y || 0) + (tr.height || 0))
+    }
+    for (const s of slices) {
+      const sr = rect(s)
+      contentBottom = Math.max(contentBottom, (sr.y || 0) + (sr.height || 0))
+    }
     const mediaSlice = slices.find((s) => {
       const sr = rect(s)
       const width = sr.width || 0
       const height = sr.height || 0
       const center = (sr.x || 0) + width / 2
-      const cardCenter = (rect(card).x || 0) + ((rect(card).width || 0) / 2)
+      const cardCenter = (cardRectR.x || 0) + ((cardRectR.width || 0) / 2)
+      const bottom = (sr.y || 0) + height
       return width >= 12 && width <= 36 && height >= 12 && height <= 36
         && Math.abs(width - height) <= Math.max(10, width * 0.5)
         && (sr.y || 0) > btnRegionBottom
-        && Math.abs(center - cardCenter) <= Math.max(24, (rect(card).width || 0) * 0.12)
+        // 落在卡内下缘带内（真值门）
+        && bottom >= cardBottom - bottomBandHeight
+        // 在内容之下而非内容之中：控件顶沿不得低于内容底沿减去自身高度容差
+        && (sr.y || 0) >= contentBottom - height - 4
+        && Math.abs(center - cardCenter) <= Math.max(24, (cardRectR.width || 0) * 0.12)
     })
     const textEl = null
     if (!mediaSlice) return null
@@ -4018,8 +4051,9 @@ const orphanSlices = slices.filter((s) => {
   }
 
   // —— 壳内右列文本（两列拓扑）——
-  // 内容壳（面板壳/渐变壳）右半区独立成列的文本：>=2 个文本左边界落在壳宽 45% 之后且互相成列
-  // （x 差 <=8、分属不同行），壳内左侧另有 >=2 个文本 → 该壳是「左列 + 右列」拓扑而非竖排单列。
+  // 内容壳（面板壳/渐变壳）右半区独立成列的文本：>=2 个文本左边界落在列界之后且互相成列
+  // （x 差 <=8、分属不同行），壳内左侧另有 >=2 个文本、或存在前导媒体（整块图/大切片）→
+  // 该壳是「左列 + 右列」拓扑而非竖排单列。列界取前导媒体右缘，无媒体才回退「壳宽 45%」。
   // 此前右列文本或被压成竖排堆叠（panelRows 路径），或整段落进主视觉死区不渲染（渐变壳路径）。
   const shellButtonTextEls = new Set(buttons.map((button) => button.sourceEl).filter(Boolean))
   const shellRightColumns = []
@@ -4031,7 +4065,22 @@ const orphanSlices = slices.filter((s) => {
     // 标题行（与壳内首个文本同 band）整体保留为整行：名称 + 紧邻短标签不是右列成员
     const headerEls = inner.filter((t) => Math.abs((rect(t).y || 0) - topY) <= 8)
     const headerSet = new Set(headerEls)
-    const splitX = (sr.x || 0) + (sr.width || 0) * 0.45
+    // 前导媒体（壳内左侧的整块图 / 大切片）：高显著大于壳内行高、右缘落在壳左半区。
+    // 右列左界此前固定取「壳宽 45%」——该比例隐含「前导媒体宽 ≈ 壳宽一半」的假设；
+    // 媒体较窄时（80px 图 / 311px 壳）右列起点落在比例线左侧，右列文本整体被划到左列一侧
+    // → left.length 恒 < 2 → 两列拓扑被整条判死，右列文本退化成全宽竖排行。
+    // 有前导媒体时改用其右缘为列界（几何真值），无媒体才回退比例线。
+    const innerHeights = inner.map((t) => rect(t).height || 0).sort((a, b) => a - b)
+    const innerLineH = innerHeights[Math.floor(innerHeights.length / 2)] || 14
+    const leadMedia = [...isolatedBlocks, ...slices]
+      .filter((el) => thinInside(el, shape))
+      .map((el) => rect(el))
+      .filter((r) => (r.height || 0) >= Math.max(24, innerLineH * 1.8)
+        && (r.x || 0) + (r.width || 0) <= (sr.x || 0) + (sr.width || 0) * 0.5)
+      .sort((a, b) => ((a.x || 0) + (a.width || 0)) - ((b.x || 0) + (b.width || 0)))[0] || null
+    const splitX = leadMedia
+      ? Math.max((sr.x || 0) + 2, (leadMedia.x || 0) + (leadMedia.width || 0) + 2)
+      : (sr.x || 0) + (sr.width || 0) * 0.45
     const columns = []
     for (const t of inner.filter((item) => !headerSet.has(item) && (rect(item).x || 0) >= splitX)
       .slice().sort((a, b) => (rect(a).x || 0) - (rect(b).x || 0))) {
@@ -4047,7 +4096,9 @@ const orphanSlices = slices.filter((s) => {
     if (!best) continue
     const bestSet = new Set(best.items)
     const left = inner.filter((t) => !headerSet.has(t) && !bestSet.has(t) && (rect(t).x || 0) < splitX)
-    if (left.length < 2) continue
+    // 左列成员可以是一张整块图而非文本（「产品图 + 右列信息」是常见形态）：
+    // 有前导媒体时左列无文本也成立，否则该形态永远进不了两列通道。
+    if (left.length < 2 && !leadMedia) continue
     shellRightColumns.push({
       shapeEl: shape,
       x: sr.x || 0, y: sr.y || 0, width: sr.width || 0, height: sr.height || 0,

package/dist/vendored/skills/dsl-card-generator/scripts/lib/v3_shared.mjs

@@ -179,8 +179,17 @@ export function fixFlexShrinkOverflow(root) {
       const children = getChildren(node)
       if (!isAutoSize && children.length >= 2) {
         const allShrinkZero = children.every((child) => getStyleVal(child, 'flex', 'flexShrink') === '0')
-        if (allShrinkZero) {
-          // Set the last child to flexShrink:1 (typically the most flexible content area)
+        // 「子节点全为固定 px 宽」= 这些宽度是设计稿逐个标注出来的（并排药丸/标签/统计块），
+        // 它们的和就是设计真值。此时**不得**为末位放开可缩点：药丸被压窄后内部文案换行、
+        // 行高撑高，连带 textOverflow 与 structure 一起掉（r284 实测：149+12+150 恰等于
+        // 组宽 311，却被压成两行，textOverflow 0.889 < 门 0.90）。
+        // 真正的「溢出兜底」场景是子节点里混有 auto/百分比宽（内容长度不可知），
+        // 那种才需要放开一个可缩点让内容有地方收缩。
+        const allFixedPx = children.every((child) => {
+          const cw = getStyleVal(child, 'rect', 'width')
+          return cw != null && /^\d+(\.\d+)?$/.test(String(cw))
+        })
+        if (allShrinkZero && !allFixedPx) {
           setStyleVal(children[children.length - 1], 'flex', 'flexShrink', '1')
         }
       }
@@ -474,9 +483,14 @@ export function amountExpr(varName, srcText, opts = {}) {
     const unit = JSON.stringify(unitMatch[2])
     return `${sign} + ${abs} + ${unit}`
   }
+  // 货币符号必须进表达式：spec 把「¥」与「5,638.00」拆成两层时，裸符号层会被合并段
+  // （mergeCurrencyLayer）吞掉，表达式是符号唯一的载体——不输出前缀 ⇒ 渲染只剩数字
+  // （"¥5,638.00" → "5,638.00"）。前缀取自原文、运行时与负号拼接顺序固定（负号在前）。
+  // 纯数字原文（"2000" 配相邻"万元"）不写前缀，避免凭空加符号。
+  const cur = hasCurrency ? JSON.stringify(curPrefix) + ' + ' : ''
   // 列表行模板共用一套表达式：货币前缀必须逐行数据驱动（$amtCurN），否则首行符号套到全行
   if (opts.prefixVar) return `${sign} + $${opts.prefixVar} + ${abs}`
-  return `${sign} + ${abs}`
+  return `${sign} + ${cur}${abs}`
 }
 
 export function amountValueExpr(varName, srcText, { currencyPrefix = true } = {}) {

package/dist/vendored/skills/dsl-card-generator/scripts/v3_regression.mjs

@@ -63,6 +63,7 @@ if (argv.includes('--help') || argv.includes('-h')) {
 
 const workRoot = path.join(REPO, '.cache', 'v3-regression')
 const workCards = path.join(workRoot, 'src', 'cards')
+const workSlices = path.join(workRoot, '__slices')
 const baselineDir = path.join(REPO, 'training', 'pass1', 'baseline')
 const node = process.execPath
 // 同 gate.mjs：改为统一解析（此前 `process.env.PYTHON || 'python3'` 不认 DSL_CARD_PYTHON、不探测）
@@ -103,6 +104,10 @@ for (const c of cases) {
     continue
   }
   // 1) 首轮生成（无 decisions）
+  // 切图落点必须一并密闭化：卡片产物已隔离到 .cache/v3-regression，但切图默认仍写 src/slices
+  // —— 金标 spec 来自 training/fixtures（含仓库未跟踪的切图名），跑一次回归就把它们混进
+  // 受跟踪资产目录（实测污染 src/slices 2 个未跟踪文件），并让 ci-gate 的源码污染守卫报错。
+  // 口径与 tools/regress-fidelity.mjs 一致。
   const gen = run(node, [
     path.join(SCRIPTS, 'spec_to_schema_v3.mjs'),
     '--spec', specPath,
@@ -110,7 +115,9 @@ for (const c of cases) {
     '--cardIndex', String(c.card),
     '--out', workCards,
     '--force',
-  ])
+  ], {
+    DSL_CARD_SLICES_DIR: workSlices,
+  })
   if (!gen.ok) {
     results.push({ regId: c.regId, pass: false, reason: 'generate 失败', detail: gen.output.slice(-600) })
     continue

package/dist/vendored/skills/finmall-card-sync/scripts/api_batch_sync.mjs

@@ -740,8 +740,52 @@ async function syncBlankCard(page, card, { cardDir, appId, workspaceId }) {
   };
 }
 
-/** 最小合法空白 schema：满足 validate_schema.py 的顶层必填（version/pageId/name/dictionary/view）。 */
+/**
+ * 最小合法空白 schema：满足 validate_schema.py 的顶层必填（version/pageId/name/dictionary/view）。
+ * 根样式 margin / padding / gap 显式归零，压掉渲染器对无样式容器的默认注入
+ * （padding:2px / gap:4px / justify-content:center）——形状与存量卡根节点一致
+ * （style-meta.json：marginType / paddingType，'0' = 全边统一值）。
+ * 同一形状还有两份内联副本（禁跨包 import）：server/core/cardFiles.js 的 blankResetStyle、
+ * skills/dsl-card-generator lib/scaffold.mjs —— 改这里必须同步改那两处。
+ */
 function buildBlankSchema(card) {
+  const blankResetStyle = () => ({
+    properties: [
+      {
+        itemId: '100',
+        itemKey: 'flex',
+        itemValueFrom: '0',
+        itemValue: {},
+        itemChildren: {
+          properties: [{ itemId: '003', itemKey: 'gap', itemValueFrom: '0', itemValue: '0' }],
+        },
+      },
+      {
+        itemId: '400',
+        itemKey: 'padding',
+        itemValueFrom: '0',
+        itemValue: {},
+        itemChildren: {
+          properties: [
+            { itemId: '001', itemKey: 'paddingType', itemValueFrom: '0', itemValue: '0' },
+            { itemId: '002', itemKey: 'padding', itemValueFrom: '0', itemValue: '0' },
+          ],
+        },
+      },
+      {
+        itemId: '500',
+        itemKey: 'margin',
+        itemValueFrom: '0',
+        itemValue: {},
+        itemChildren: {
+          properties: [
+            { itemId: '001', itemKey: 'marginType', itemValueFrom: '0', itemValue: '0' },
+            { itemId: '002', itemKey: 'margin', itemValueFrom: '0', itemValue: '0' },
+          ],
+        },
+      },
+    ],
+  });
   return {
     version: '1.0.0',
     pageId: String(card.cardId),
@@ -752,7 +796,7 @@ function buildBlankSchema(card) {
     view: {
       width: '375',
       className: 'Root',
-      style: { properties: [] },
+      style: blankResetStyle(),
       properties: [],
       eventactions: [],
       components: [],

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` |