# 长图

先取得主标题和 `light` / `dark` 选择。设计宽度 1080px；预览缩放整个画布，导出视口与成品宽度一致，不能截取右侧页面背景。正文高度随内容增长。

## 头图

使用 `hero-light` 或 `hero-dark`。插图只选 `hero-art-01`、`hero-art-02`；亮色选 3 套渐变之一、暗色选 4 套之一，完整参数在 `figma-paints.json`。一次选一套，不叠加备选填充、不从预览吸色、不生成其他图案。对应实际节点、裁切与透明素材见 `assets.json`。

`hero-art-01` 以 Frame 2147238985（205:6624）为准，点阵的渐变透明蒙版与渐进模糊已合成在随包素材中。使用完整 SVG 及其依赖，保留透明背景和叠放顺序；不要改用未处理的原始点阵，也不要叠加额外模糊或色块。

Agent 自动识别标题核心利益、能力或痛点，将原文中连续的一段填入 `hero.highlight`；用户指定重点优先。通常一处，不高亮整句、不改原文。例：“生活旺卡，帮你把【犹豫的客户】聊回来。”亮色强调 `#396FFA`，暗色强调 `#FBFFD0`。高亮与其他文字是同一行内流，自然换行，禁止分成绝对定位文本框。辅助脚本只能做保守的短语初选；Agent 应按语义复核，不能把词典当语义理解。

副标题较多时提炼核心信息为标签，保留必要的详细条件在正文。标题、标签、插图按顺序流动；长文字增加高度，不覆盖插图。简介参考 Figma 的两级信息排版，不直接复制“风车、花朵与星光……”作为业务内容。

## 基础 Card

普通叙述正文使用库内基础 Card。表单、关系、问答、案例成果、二维码分别使用自己的独立结构；明确的页尾注释等可在 Card 外。三种组合均支持明暗：

1. `card-basic-01`：信息模块 → 标题 → 正文。
2. `card-basic-02`：标题 → 信息模块 → 正文。
3. `card-basic-03`：标题 → 信息模块 → 多组分层说明。

| 约束 | 1080px 设计画布中的值 |
| --- | --- |
| Card 宽度 / 圆角 | 1002px / 47px |
| Card 内容整体上下内边距 | 各 133px，固定；不重复施加给每个子模块 |
| 图表置入宽度 | 831px；灰色只是设计占位，成品不渲染 |
| 主标题 / 正文最大宽度 | 664px / 682px |
| 信息模块与标题或正文间距 | 57px |
| 标题紧接正文 | 33px |
| 相邻基础 Card 间距 | 52px |

高度 = 266px + 实际内容块高度 + 仍存在的间距。缺模块就移除该模块及间距；不要保留 650px 占位高度。Card 3 的次级标题最大 538px、说明最大 559px。Card 灰色区只是图表宽度限制区，成品不画灰底。完整组件宽度固定为 831px，保留源画板两侧留白。图形部分保持原比例，曲线、柱形和线条不裁切、不拉伸；文字按父容器可用宽度换行。标题少一行时，后续区域整体上移；文字增多时，文字区域和外层底板随之增高。可选文字为空时，连同其底板与间距一起收起，不留下空标签或气泡。关系、问答、案例成果和二维码属于独立基础组合，直接放在长图背景上，不套 Card、不进入 831px 信息区。只有能力或步骤名称时仍放 Card 正文，收起信息区。不得自制圆角标签、指标小卡或附加图标；头图使用专属批准标签。图标按原始尺寸上限显示；不作为撑大卡片的主视觉。

## 自适应与检查

父级 Flex/Grid 管理 gap，子项 `min-width:0`；文本自然换行，行高和字号按角色固定，长内容增高。并列项每行按内容选 1–4 组，不拉伸到整页高度。表格使用语义 table、自动行高、固定列宽分配；合并单元格保留，超过 4 列按字段组拆表并重复行键，不用横向滚动或缩字处理。

选择对应明暗的完整组件，保留原组件内部配色，不自行混搭或重绘。暗色独立组合沿用新版基础组合结构、适配已有暗色配色；关系组和案例的整块浅色面板保留；这不授权在其他暗色 Card 内自行添加浅色指标卡。

完成后等待 `window.brandkitReady`，检查 `window.brandkitReport` 并逐段看实际画面。短文、长文、无头像、只有能力名称、增行增列都应保持边界，不删除内容来通过检查。

导出时打开 `index.html?export=1`，用宿主浏览器渲染工具截取 `#canvas` 元素本身；若只能整页截图，先将视口固定为 1080px，并以该元素高度裁切。成品必须核对实际像素宽度为 1080。不得直接截取任意宽度的浏览器 body。

独立组合以 `234:8105` 为结构来源：关系组宽1002px，问答宽1002.308px，案例外框1080px且面板宽1002px，二维码组宽1002px。关系组内部保留两侧留白；案例无需保留原1242px导出框的溢出透明边距。暗色沿用同结构，问答气泡用已有蓝色，文字按明暗适配。

图表文字保留品牌字号和原稿对齐方向，在父容器可用宽度内换行。文字增减时重新计算文字区、底板和间距，后续完整绘图区可以整体上移或下移；绘图区内部的曲线、柱形和符号比例不变，不裁切或非等比拉伸。可选文字为空时连同其底板与间距收起。过长说明可放 Card 正文，不靠缩字或删除真实内容通过检查。

# 内容到组件

先把需求拆为有意义的内容块，保留标题、正文、表头、行、分组、合计和来源。每块通过 `route` 获取具体组件；内容关系优先于泛化的“表格”标签。

| 内容关系 / 最少内容 | 组件 |
| --- | --- |
| 客户或行业 + 行动/目标 + 至少一项成果 | `case-results`，无头像隐藏头像；没有三段故事也可用 |
| 激励类型 + 权益 + 领取/使用规则 | `table-incentives`，按真实行列、分组和合计延展 |
| 对象、时间、流程等字段及值 | `table-key-value` |
| 功能/规则名称 + 机制/说明 | `feature-panels`；两块示例是上下排，不从“双列”名称推断左右排 |
| 同一场景 × 本产品/其他产品 | `comparison-products` |
| 前后状态、普通/会员权益功能 | `comparison-before-after` |
| 问题 + 回答 | `qa` |
| 并列能力、对象或阶段，有真实说明/条目 | 完整 `relation-cards`，保留蓝色标题及正文面板 |
| 仅能力名称或步骤名称 | 基础 Card 正文区；收起信息区，不生成标签 |
| 有顺序且有说明的操作 | 完整 `relation-cards`，标题带顺序；不新增图片区域 |
| 涨幅、下降、变化、指标 | `chart-display`；从批准的展示图选样式，值与图形比例脱钩 |
| 其他真实表格 | `table-information`，不退成正文 |
| 其余叙述 | 三种基础 Card 中合适的一种 |

`case-results` 使用原案例资料及原成果行（数字、名称、自带图形），不拆成通用指标卡。头像可缺，缺失后回收空间。关系组只有名称时进入正文；有说明时使用完整组件，不补造缺失说明。`chart-display` 不要求起止绝对值。不得为了调用组件补造案例、图片、数字或比较依据。

表单保持自己的最大宽度（979px / 901px / 899.706px 等，见组件定义），高度随内容。Card 灰色区只是图表宽度限制区，成品不画灰底。完整组件宽度固定为 831px，保留源画板两侧留白。图形部分保持原比例，曲线、柱形和线条不裁切、不拉伸；文字按父容器可用宽度换行。标题少一行时，后续区域整体上移；文字增多时，文字区域和外层底板随之增高。可选文字为空时，连同其底板与间距一起收起，不留下空标签或气泡。关系、问答、案例成果和二维码属于独立基础组合，直接放在长图背景上，不套 Card、不进入 831px 信息区。只有能力或步骤名称时仍放 Card 正文，收起信息区。不得自制圆角标签、指标小卡或附加图标；头图使用专属批准标签。 有真实二维码才在独立区域生成，不放入信息区。

没有强制图表数量和装饰配额。组件选择应解释内容关系，用几行 `componentDecisions` 即可。一次模型误用不升级成复杂的全局例外流程。

## 将其他需求接入同一套组件

先由使用者的 Agent 阅读原文，提取内容关系与真实字段，再提交 `blocks`。脚本不直接理解任意 PDF/Word，也不依据文档名称选模板。两列字段/值即使标题含“会员、开通、升级”，仍选双列信息介绍；只有表头明确包含两组状态才选前后对比。双列采用交替色行、约 28:72 列宽和自适应行高；三列以上保留真实维度走对应多列表。

读取 [图表与图标语义索引](asset-routing.json)。独立指标块进入 Card 内的 `chart-display`：`chartKind` 可指定 `increase`（增长）、`decrease`（下降）、`comparison`（多项对比展示）、`change`（变化配图）。未指定时根据内容方向保守匹配，返回同主题候选；可用 `chart` 选择其中其他批准样式。文字里的两个不同方向使用变化配图，不强行合成单向增长。19 项当前展示图均已关联用途；旧文件中已删除的 2 项不再推荐。

能力、步骤、功能说明中的名称和说明会匹配 32 项权益图标的名称及近义表达，例如“预约到店→在线预约”“经营看板→数据大盘”。不确定时由 Agent 根据原文填写 `iconMeaning`，或从索引指定 `icon`。无匹配或多义时保留候选、不自动硬配；`icon: null` 可明确不使用。匹配结果是素材候选；完整关系组、问答、案例和展示图内不得附加图标。只有原稿有图标槽位的独立功能说明面板才实际应用。图标缩小展示，不超过原始尺寸。

`componentDecisions.assets` 返回图表选择、图标候选和应用标记。只有实际应用的素材按需下载；完整组件没有的槽位不能自行补入。复核候选是否符合原意即可，无需凑图表或图标数量。