openyida 2026.9.21 → 2026.9.22-beta.1

package/yida-skills/skills/yida-design/sub_skill/yida-design-plan/templates/design-themes/airy-modular-clarity.md

@@ -0,0 +1,348 @@
+---
+name: "{{PROJECT_NAME}}"
+description: 以充足局部留白、浅色模块拼接、克制边界和条件式主辅层级建立清晰秩序的中等密度轻量主题。
+themeId: airy-modular-clarity
+tokens:
+  application-global:
+    colors:
+      "--pod-page-bg-color": "var(--color-white, #fff)"
+      "--color-white": "#FFFFFF"
+      "--color-brand1-1": "<基于 --color-brand1-6 生成的实际色值：与白色混合 12%，用于悬停>"
+      "--color-brand1-2": "<基于 --color-brand1-6 生成的实际色值：与白色混合 88%，用于平台品牌浅色>"
+      "--color-brand1-3": "<基于 --color-brand1-6 生成的实际色值：与白色混合 94%，用于浅色导航框架>"
+      "--color-brand1-5": "<基于 --color-brand1-6 生成的实际色值：与黑色混合 18%，用于深色导航框架>"
+      "--color-brand1-6": "{{PRIMARY_COLOR}}"
+      "--color-brand1-9": "<基于 --color-brand1-6 生成的实际色值：与黑色混合 12%，用于按下与激活>"
+      "--color-brand1-10": "<基于 --color-brand1-6 生成的实际色值：与白色混合 62%，用于禁用>"
+      "--color-line1-1": "#ECEDEF"
+      "--color-line1-2": "#DFE1E5"
+      "--color-fill1-1": "#F7F7F8"
+      "--color-fill1-2": "#F1F2F4"
+      "--color-fill1-3": "#E8E9EC"
+      "--color-fill1-10": "rgba(255, 255, 255, 0.96)"
+      "--color-text1-4": "#17181A"
+      "--color-text1-10": "#55585F"
+      "--color-text1-3": "#8A8D94"
+    typography:
+      base:
+        "--font-family-base": "Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', sans-serif"
+      subhead:
+        "--font-size-subhead": 24px
+        "--font-weight-subhead": 650
+        "--font-lineheight-subhead": 1.3
+      body-2:
+        "--font-size-body-2": 16px
+        "--font-weight-body-2": 600
+        "--font-lineheight-body-2": 1.4
+      body-1:
+        "--font-size-body-1": 14px
+        "--font-weight-body-1": 400
+        "--font-lineheight-body-1": 1.55
+      table:
+        "--font-size-table": 14px
+        "--font-weight-table": 400
+        "--font-lineheight-table": 1.45
+      caption:
+        "--font-size-caption": 12px
+        "--font-weight-caption": 400
+        "--font-lineheight-caption": 1.45
+    spacing:
+      "--s-1": 4px
+      "--s-2": 8px
+      "--s-3": 12px
+      "--s-4": 16px
+      "--s-6": 24px
+      "--s-8": 32px
+    rounded:
+      "--corner-zero": 0px
+      "--corner-1": 4px
+      "--corner-2": 8px
+      "--corner-3": 12px
+      "--corner-4": 16px
+      "--corner-5": 20px
+      "--corner-circle": 50%
+      "--corner-semicircle": 500px
+  custom-page:
+    colors:
+      "--oyd-chart-line": "color-mix(in srgb, var(--color-brand1-6) 92%, #FFFFFF)"
+      "--oyd-chart-point-ring": "color-mix(in srgb, var(--color-brand1-6) 20%, #FFFFFF)"
+      "--oyd-category-1": "#22BE76"
+      "--oyd-category-2": "#F4B824"
+      "--oyd-category-3": "#AFC7F2"
+      "--oyd-category-4": "#B9AFF2"
+      "--oyd-progress-track": "#EFF0F2"
+    typography:
+      metric-primary:
+        "--font-size-metric-primary": 28px
+        "--font-weight-metric-primary": 600
+        "--font-lineheight-metric-primary": 1.2
+---
+
+# {{PROJECT_NAME}} design.md
+
+## 设计总览
+
+- 业务领域：{{BUSINESS_DOMAIN}}
+- 产品形态：{{EXPERIENCE_TOPOLOGY}}
+- 主题来源：{{THEME_SOURCE}}
+- 项目约束：{{PROJECT_CONSTRAINTS}}
+
+本主题以接近白色的画布和纯白表面为底，借助浅灰填充、细边界与稳定的主辅分栏建立层级。核心信息通过模块拼接、单个大幅主内容面板、纵向辅助面板和结构化明细区形成由概览到细节的阅读路径；主题色只出现在关键焦点、图表主序列、选中状态与少量进度纹理中。整体密度中等偏紧凑，卡片内部留白充足，同类组件严格等高，避免依赖重阴影制造层级。
+
+### 风格定位与应用说明
+
+- 核心气质是“轻表面、稳网格、强数字层级、克制焦点”；具有概览、趋势、分布或明细关系的内容最能发挥其视觉记忆点，但这不是页面类型限制。
+- 所有页面共享本主题的全应用 Token 和基础组件语言；逐页视觉应用根据项目实际页面、页面模式和真实内容生成，视觉记忆点仅在满足内容契约时使用。
+- 代表性构图迁移到其他页面时，保留相邻模块共边、浅灰表头、细线网格、圆形图标容器和内部溢出机制；仅在页面同时存在主要内容与独立辅助内容时保留主辅比例，不照搬固定业务模块或固定分栏。
+- 内容不满足组件契约时，优先把表面、边界、排版或构图机制迁移到已有槽位；无合法承载目标时降级为 `recipe_only`，涉及新增能力时仅作为 `suggest_only`。
+
+### 视觉 DNA
+
+| 设计母体           | 可见证据与置信度                                                                 | 复用规则与实现钩子                                                                                                                                                     | 缺失后的失败表现                                           |
+| ------------------ | -------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------- |
+| 相邻模块拼接区     | 同类摘要单元以 2×2 方式紧密拼接，外轮廓完整、内部由细缝分区。`observed`          | 不可变机制是同类项等高、连续外轮廓和 1px 内部分隔；内容数量与字段由 PRD 替换，强调色消费 `--color-brand1-6`。用 CSS Grid、统一 `minmax(0, 1fr)` 和父级圆角裁切实现。   | 退化为四张互不关联的默认卡片，概览关系松散且首屏节奏破碎。 |
+| 主辅不对称分栏     | 主内容占约三分之二宽度，辅助内容固定在右侧窄列并纵向堆叠。`observed`             | 不可变机制是 2:1 左右比例、跨行对齐和辅助列同宽；具体模块与上下顺序可按任务替换。桌面使用 `grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr)`。                 | 主次不分，所有模块等宽堆叠，页面失去清晰的视觉入口。       |
+| 轻网格单序列主面板 | 大面积主面板以细灰网格、单条强调序列、克制坐标轴和悬浮提示层承载变化。`observed` | 保留单主序列、低对比网格、固定绘图区和白色 tooltip；数据、时间范围和图表类型可由 PRD 决定。主序列使用 `--oyd-chart-line`，网格使用全局弱分隔 Token `--color-line1-1`。 | 图表被多色、多阴影和粗网格淹没，或因无固定高度而撑破版面。 |
+| 图标化结构明细     | 明细区采用浅灰圆角表头、细行分隔、圆形图标容器和最右侧弱化操作。`observed`       | 保留表头浅填充、行内图标、数字对齐和尾部操作列；字段数量、名称和行内容由 PRD 决定。                                                                                    | 退化为组件库默认表格，缺少主题辨识度与扫描效率。           |
+
+### 视觉记忆点应用策略
+
+| 视觉记忆组件                 | 内容契约                                                                                     | 落地策略                                                                                                                    | 可迁移机制与适配目标                                                                                                                          | 无匹配内容时                                                                                                                                  |
+| ---------------------------- | -------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------- |
+| 摘要拼接组                   | `content_contract`: 至少 2 个同层级摘要字段，最好为 4 个；字段需支持主值与可选辅助说明。     | `render_policy: prd_match_only`；`direct_trigger`: PRD 明确存在同层级概览摘要。                                             | `transferable_mechanism`: 连续外轮廓、同类等高、内部细分隔；`adaptation_targets`: `primary_summary`、`primary_metrics`、状态概览。            | `fallback`: 少于 2 项则使用单个普通摘要面板；`forbidden`: 不得编造指标、涨跌幅或对比周期。                                                    |
+| 轻网格主内容面板             | `content_contract`: 存在连续序列、区间趋势或可映射为主视觉的真实数据。                       | `render_policy: prd_match_only`；`direct_trigger`: PRD 提供真实维度、数值与时间或顺序关系。                                 | `transferable_mechanism`: 大面积留白、低对比辅助线、单一主焦点与悬浮信息层；`adaptation_targets`: `primary_content_panel`、时间线、进度轨迹。 | `fallback`: 无连续数据时只迁移大面板层级与标题结构；`forbidden`: 不得伪造趋势、坐标、峰值或比较结果。                                         |
+| 条件式主辅分栏与纵向洞察面板 | `content_contract`: 页面同时存在明确的主要内容与可独立阅读的辅助状态、分布、构成或次级说明。 | `render_policy: adapt_existing_slot`；`direct_trigger`: PRD 已有 `primary_content_panel` 与 `supporting_panel` 或同义内容。 | `transferable_mechanism`: 约 2:1 主辅比例、窄列堆叠及标题—摘要—纹理的纵向路径；`adaptation_targets`: 已有主内容与辅助内容槽位。               | `fallback`: 没有独立辅助内容时使用页面模式要求的单列、列表、表单或详情布局；`forbidden`: 不得为形成分栏新增评分、渠道、分类、说明或详情入口。 |
+| 图标化明细区                 | `content_contract`: 存在同构记录、对象列表或明细数据，并具有可比较字段。                     | `render_policy: prd_match_only`；`direct_trigger`: PRD 要求表格或结构化列表。                                               | `transferable_mechanism`: 圆角浅表头、图标化首列、行分隔、弱尾部操作；`adaptation_targets`: `detail_table`、`detail_list`。                   | `fallback`: 无明细内容时不渲染；`forbidden`: 不得虚构记录、人物、金额、时间或操作能力。                                                       |
+
+- 先匹配 `content_contract`，再决定是否渲染组件本体；不能为了保留视觉记忆点而新增 PRD 未要求的字段、数据、入口、对象或流程。
+- 每页优先清楚落地 1-3 个与 PRD 匹配的主记忆点，不要求全部组件同时出现。
+- 无合法业务承载时保留为 `recipe_only`；若需要新增业务能力则使用 `suggest_only`，不进入默认实现。
+
+### 设计变量范围
+
+`tokens.application-global` 是原生表单、流程页面和自定义页面共同遵守的全应用设计契约；本主题以低对比中性色、24px 以内标题、4px 基础间距和 8-20px 圆角阶梯建立统一语言。`tokens.custom-page` 只补充页面画布、主题派生图表焦点、独立分类序列、进度轨道及全局体系缺失的主指标数字语义；图表网格与 tooltip 分别复用全局 `--color-line1-1` 和 `--color-fill1-10`，不重复声明已有语义。
+
+## 色彩
+
+- 色彩来源：{{COLOR_SOURCE}}
+- 颜色 Token 的名称和值以文档顶部 YAML 的 `tokens` 为唯一事实源；AI 可以根据主题调整色值，不改变宜搭应用全局变量名。
+- 页面底层使用近白冷灰 `--pod-page-bg-color`，一级容器使用 `--color-white`，模块边界由 `--color-line1-1 / --color-line1-2` 建立，禁止靠大面积灰底或重阴影切割区域。
+
+### 设计变量消费规则
+
+| 固定消费语义                                         | 消费 Token                               | 作用域   |
+| ---------------------------------------------------- | ---------------------------------------- | -------- |
+| 主题色交互元素悬停                                   | `--color-brand1-1`                       | 应用全局 |
+| 平台预留品牌浅色；自定义页不主动绑定                 | `--color-brand1-2`                       | 应用全局 |
+| 浅色导航框架背景                                     | `--color-brand1-3`                       | 应用全局 |
+| 深色导航框架背景                                     | `--color-brand1-5`                       | 应用全局 |
+| 全应用主题主色；用于主按钮、关键焦点、链接和选中强调 | `--color-brand1-6`                       | 应用全局 |
+| 主题色交互元素激活或按下                             | `--color-brand1-9`                       | 应用全局 |
+| 主题色交互元素禁用状态                               | `--color-brand1-10`                      | 应用全局 |
+| 弱分隔线、表格行分隔线和辅助线                       | `--color-line1-1`                        | 应用全局 |
+| 输入框、按钮和面板常规边界                           | `--color-line1-2`                        | 应用全局 |
+| 页面底层画布                                         | `--pod-page-bg-color`                  | 自定义页 |
+| 面板、卡片、弹窗和表单容器                           | `--color-white`                          | 应用全局 |
+| 图表单一主序列                                       | `--oyd-chart-line`                       | 自定义页 |
+| 图表焦点外环                                         | `--oyd-chart-point-ring`                 | 自定义页 |
+| 离散分类序列                                         | `--oyd-category-1` 至 `--oyd-category-4` | 自定义页 |
+| 分段进度的未完成轨道                                 | `--oyd-progress-track`                   | 自定义页 |
+| 菜单悬停、弱标签和默认浅填充                         | `--color-fill1-1`                        | 应用全局 |
+| 菜单点击和中性选中底                                 | `--color-fill1-2`                        | 应用全局 |
+| 标题、核心数字、正文和主要图标                       | `--color-text1-4`                        | 应用全局 |
+| 表格表头和输入框 placeholder                         | `--color-text1-10`                       | 应用全局 |
+| 辅助说明、坐标轴、时间和元信息                       | `--color-text1-3`                        | 应用全局 |
+
+`--color-brand1-6` 来自前置确定的全应用主题色，先解析为实际色值；AI 再以它为唯一品牌色种子生成其余 Brand Token。最终项目 `design.md` 必须写入七个 Brand Token 的实际色值，不得保留生成期标记。无品牌色时可使用高可见度的中明度冷色作为默认锚点，但中性画布与白色表面合计应保持页面面积的 85% 以上。四个分类色仅用于彼此独立、无状态含义的分类比较，不参与主题同色推演。
+
+### 本主题的配色约束
+
+- 画布接近白色、一级表面纯白、拼接摘要区可使用 `--color-fill1-1`；相邻层级至少通过 1px 边界或 2%-4% 明度差区分。
+- 主题色只用于主操作、关键焦点、选中状态和少量语义图标；模板实现消费 `--color-brand1-6`，不得写死默认色。
+- 成功、警告、错误和信息状态直接消费平台语义色，并同时配合文字、图标或方向符号；`custom-page` 不重复声明同义状态 Token。
+- 同一图表默认只保留一个主题主序列；分类图最多使用四个独立分类色，每一分类色的页面占比不超过 8%。
+- 主序列、焦点外环、同色分段进度和选中纹理均从 `--color-brand1-6` 推演；独立分类色只表达并列类别，不承担品牌或状态含义。
+
+## 字体与排版
+
+- 全局只使用 `tokens.application-global.typography.base` 定义的字体栈。
+- 先把页面文字语义映射到全局 Token；视觉尺寸不符合时直接调整全局 Token 值。只有全局体系缺少的独立语义，才新增 `custom-page.typography` Token。
+- 字号先按语义和平台范围判断，不从图片可见像素直接换算；普通产品页面 `page-title` 必须消费不超过 24px 的全局 `subhead`。
+
+```text
+page-title → tokens.application-global.typography.subhead
+panel-title → tokens.application-global.typography.body-2
+content-title → tokens.application-global.typography.body-1
+body → tokens.application-global.typography.body-1
+table → tokens.application-global.typography.table
+caption → tokens.application-global.typography.caption
+metric-primary → tokens.custom-page.typography.metric-primary
+```
+
+- `subhead` 为 24px / 650 / 1.3，用于页面身份；`body-2` 为 16px / 600 / 1.4，用于面板标题和重要标签。
+- `body-1` 为 14px / 400 / 1.55，用于正文与内容标题；`table` 为 14px / 400 / 1.45，用于表格单元格；`caption` 为 12px / 400 / 1.45，用于坐标、时间和辅助说明。
+- `metric-primary` 为 28px / 600 / 1.2，仅用于摘要主值，因为全局字体体系没有独立的大数字语义；不得用它替代页面标题。
+- 数值内容启用 `font-variant-numeric: tabular-nums`；摘要主值保持单行，长标题最多两行，表格主文本单行省略并提供悬浮完整信息。
+- 图标使用 1.5-1.75px 线性描边、圆端点，正文图标为 16-18px，标题图标为 20px；图标与文字按视觉中心对齐，不用 emoji 代替功能图标。
+
+## 布局与间距
+
+- 所有间距统一消费文档顶部 YAML 的 `--s-1` 至 `--s-8`：行内微间距使用 `--s-1 / --s-2`，控件组合使用 `--s-3`，卡片内边距使用 `--s-4 / --s-6`，大区块间距使用 `--s-6 / --s-8`。
+- 桌面内容区最大宽度 1600px，左右安全边距 32px；当页面同时存在主要内容与独立辅助内容时，使用 12 列或等价 CSS Grid，并采用约 8/4 的主辅比例。单列、列表、表单和详情布局遵循页面模式，不为套用主题强制分栏。
+- 页面顶部可由 `page_identity` 与 `global_actions` 两端对齐；`primary_summary`、`primary_content_panel`、`supporting_panel` 与 `detail_table/detail_list` 是否存在及其顺序均由 PRD 和页面模式决定。
+- 页面结构只使用中性槽位，不在主题中固化字段、数量或业务顺序。
+
+### 布局稳定性硬规则
+
+- 桌面端主网格必须使用 `align-items: stretch`，同一行同类面板顶部和底部对齐；禁止瀑布流和 `align-items: start`。
+- 面板使用 `height: 100%`、`min-width: 0`、`min-height: 0`、`display: flex`、`flex-direction: column`；标题区固定，内容区使用 `flex: 1; min-height: 0`。
+- `metric_card` 建议高度 116-132px；摘要拼接组整体 232-264px；`chart_panel` 建议 360-440px；`supporting_panel` 建议 168-220px；`detail_panel` 首屏可见高度 320-520px；可选 `quick_action_item` 高度 72-88px。
+- 图表、表格、列表和长文案必须在面板内部滚动、截断或折叠，不得撑破外层网格；图表绘图区固定为 260-320px。
+- 区块间距由父级 grid/flex 的 `gap` 管理，不用零散 `margin-top`、`margin-bottom` 拼接页面节奏。
+- 当主辅内容契约成立时，≥1280px 使用约 8/4 分栏，768-1279px 可改为 7/5 或上下排列；不成立时直接使用页面模式要求的单列、列表、表单或详情布局。摘要组在 ≥768px 时可使用 2 列，<768px 时全部单列并可折叠为 1×N；移动端解除桌面等高但保留固定控件高度、文本截断和内部溢出。<480px 时表格转为字段分组列表或横向滚动，不隐藏关键字段含义。
+
+## 表面与层级
+
+- 常规面板使用 `--color-white`、1px `--color-line1-1` 边界和 `0 1px 2px rgba(23,24,26,0.03)` 微阴影；摘要拼接组使用 `--color-fill1-1` 并由 1px 白色内缝分区。
+- tooltip、popover 和弹窗使用 `--color-fill1-10`，边界为 `--color-line1-2`，阴影不超过 `0 8px 24px rgba(23,24,26,0.10)`，以浮层深度区别普通面板。
+- 不使用大面积渐变、毛玻璃或强辉光。主题色轻混合仅可用于焦点外环、选中底与进度纹理，不能成为普通卡片背景。
+- 一级容器内如需嵌套，仅使用浅填充或分隔线二选一；禁止内层继续叠加同强度边框和阴影。
+
+## 圆角与形状
+
+- `--corner-1` 4px 用于小标签与紧凑状态块；`--corner-2` 8px 用于输入框、按钮和 tooltip；`--corner-3` 12px 用于表头与小面板；`--corner-4` 16px 用于常规卡片；`--corner-5` 20px 用于大幅主面板与拼接组外轮廓。
+- `--corner-semicircle` 仅用于短状态胶囊、进度纹理端点；`--corner-circle` 用于头像、图标按钮和行首图标容器。
+- 同一网格层级使用一致圆角，禁止随机混用直角、小圆角和超大圆角。
+
+## 组件
+
+### 按钮与操作
+
+宜搭按钮只使用四档高度：迷你/行内 28px、紧凑工具栏 32px、常规 36px、强调或宽松场景 40px；图标按钮使用对应高度的正方形。默认圆角为 `--corner-2`，纯图标按钮可用 `--corner-circle`。主按钮使用 `--color-brand1-6` 与白字，次按钮使用白色表面和 `--color-line1-2`；hover、active 分别消费 `--color-brand1-1`、`--color-brand1-9`。focus 使用 2px 主题色外环并保留 2px offset；disabled 同时降低对比、移除阴影并显示禁用光标。同一操作区只保留一个视觉主操作。
+
+### 输入与筛选控件
+
+紧凑工具栏 32px、常规表单 36px、宽松搜索与选择器 40px。控件使用白色表面、`--color-line1-2` 边界和 `--corner-2`；placeholder 使用 `--color-text1-10`。focus 边界切换为 `--color-brand1-6` 并显示外环；error 消费平台错误色并配合文本或图标。搜索、筛选、时间范围与辅助按钮在同一工具栏内保持一致高度，窄屏时按组换行，不压缩到低于最小触控尺寸。
+
+### 卡片与面板
+
+一级卡片使用 `--corner-4 / --corner-5`、1px 弱边界和 `--s-6` 内边距；标题区高度稳定，标题与操作两端对齐，内容区 `flex: 1`。嵌套内容使用 `--color-fill1-1` 或分隔线，不重复制作浮起卡片。只有可独立理解、可独立操作或需要稳定边界的内容才进入卡片，禁止把每段文本都包成卡。
+
+### 摘要拼接组
+
+固定构图公式：一个 `--corner-5` 外容器 + 2 列等宽 Grid + 2-4 个 `metric_card` + 1px 白色内缝。每个单元使用 `--s-6` 内边距，按“标签—主值与辅助说明”排列；标签消费 `body-1`，主值消费 `metric-primary`，辅助说明消费 `caption/body-1`。正负变化必须配合符号或方向图标，不能只靠颜色。禁止替换为带独立阴影、不同圆角或不同高度的散卡集合。
+
+### 纵向洞察面板
+
+固定构图公式：右侧窄列面板 + 单行标题与可选次操作 + 一段核心摘要 + 一段辅助说明 + 可选分段纹理或分类构成。内边距使用 `--s-6`，段间距使用 `--s-4`，面板高度由同排主内容决定。分段纹理由等宽短条构成，已完成部分使用主题派生色，未完成部分使用 `--oyd-progress-track`。禁止为填满面板新增评分、分类或详情操作。
+
+### 轻网格主内容面板
+
+固定构图公式：标题工具栏 + 主值摘要 + 固定高度绘图区。默认只绘制一个 2-3px 主序列，坐标轴与网格使用低对比中性色，网格直接消费 `--color-line1-1`，节点仅在 hover/focus 时出现。tooltip 使用 `--color-fill1-10`、细边界、`--corner-3` 和微阴影；其内容遵循“维度标签—主值—可选差异”层级。必须支持键盘聚焦与文本摘要；禁止多色面积渐变、3D 图表、粗网格和无来源装饰点。
+
+### 图表或主内容面板
+
+有连续数据时使用固定 260-320px 绘图区、4-6 条水平辅助线、稀疏垂直分隔和单主题主序列；多分类内容最多使用四个独立分类色并配合图例。无图表时，主内容区仍保留稳定标题栏、明确主焦点和内部滚动区，不为保持外观而生成虚假坐标或数据。图例可隐藏低优先级项，但不得只凭颜色区分类别。
+
+### 表格与列表
+
+表头使用 `--color-fill1-1`、`--corner-3` 和 44px 高度；数据行高 64-72px，使用 `--color-line1-1` 底分隔。首列可使用 36-40px 圆形图标容器，文字左对齐，数值右对齐且启用等宽数字，日期与状态列保持稳定宽度，尾部操作使用 28/32px 图标按钮。长文本单行省略并可访问完整值；表体在固定面板内滚动，表头 sticky。移动端优先保留主字段与关键状态，其余字段进入展开区或横向滚动。
+
+### 快捷入口（推断）
+
+未将快捷入口作为默认组件本体。若 PRD 明确存在高频入口，可使用 `inferred / render_policy: recipe_only` 配方：独立区块、2-4 个等宽项、72-88px 高度、白色或浅填充表面、单色线性图标与短标签；移动端横向滚动或 2 列折叠。禁止默认彩色宫格，禁止塞入表格工具栏或辅助面板尾部。
+
+### 状态与交互
+
+- 悬停：边界或浅填充在 120-160ms 内变化，禁止改变尺寸、字重或内边距导致布局抖动。
+- 按下：使用 `--color-brand1-9` 或 1px 内收反馈，持续 80-120ms。
+- 聚焦：控件显示清楚 focus ring；纯图标按钮必须有可访问名称。
+- 加载：保持面板固定高度，以骨架屏或稳定占位替代内容，避免网格跳动。
+- 空态与错误：保留原面板结构，提供简短说明和下一步操作，不把整张卡片染成状态色。
+- 禁用与选中：禁用同时使用图标/文案和低对比边界；选中同时使用主题色边界、浅色底或选中标记，不只依赖颜色。
+- 动效：常规状态 120-180ms `ease-out`，浮层 160-220ms；在 `prefers-reduced-motion` 下关闭位移与逐项动画，仅保留即时透明度切换。
+
+## 项目应用
+
+### 项目上下文与主题应用
+
+- 当前产品形态：{{EXPERIENCE_TOPOLOGY}}
+- 主题在当前项目中的应用说明：{{PRODUCT_TOPOLOGY_APPLICATION}}
+
+产品形态只提供任务与内容上下文，不决定主题是否可用。原生页面和自定义页面共同继承 `tokens.application-global` 的颜色、字体、间距与圆角；自定义页面仅在需要图表、分类序列、进度纹理或主指标数字时消费 `tokens.custom-page`。
+
+### 页面模式
+
+{{PAGE_PATTERN_SUMMARY}}
+
+页面模式决定任务、内容和模块；本主题只规定视觉表达，不能强行把所有页面改造成相同结构。各页面根据真实信息层级选择主辅分栏、单列或详情布局，并保持浅表面、稳定网格和克制焦点。
+
+### 逐页视觉应用
+
+{{PAGE_APPLICATIONS}}
+
+实例化时只展开项目真实存在的页面；每页说明主要中性槽位的位置、跨度、高度、移动端顺序和采用的视觉 DNA。页面不必使用全部组件母体，但采用对应信息类型时必须遵守构图公式。
+
+### 素材要求
+
+- 页面图片需求：{{PAGE_IMAGE_NEEDS}}
+- 素材缺口：{{ASSET_GAPS}}
+- 图片、图表、缩略图和辅助图形必须有真实来源；没有素材时使用结构化数据或中性占位，不编造客户、对象、指标或图片地址。
+
+## 设计规范与禁忌
+
+### 必须做到
+
+- 所有页面无条件保持近白画布、白色一级表面、细边界、克制阴影和稳定信息层级；主辅分栏仅在对应内容契约成立时使用。
+- PRD 满足摘要内容契约时，摘要拼接组必须保持连续外轮廓、内部细缝与同类等高；满足连续数据契约时，轻网格主面板必须保持单主序列、固定绘图区和低对比网格。
+- PRD 包含辅助信息时，纵向洞察面板必须保持标题—摘要—纹理的纵向路径；包含明细内容时，必须保留浅灰圆角表头、图标化首列、行分隔和弱尾部操作。
+- 主题色只占小面积，用于主操作、关键焦点、图表主序列与选中状态；普通表面保持中性。
+- 同类卡片等高、图表高度固定、长内容内部滚动或截断、区块节奏由父级 `gap` 管理。
+- hover、active、focus、loading、empty、error、disabled、selected、响应式、键盘访问与 reduced motion 均须实现。
+
+### 禁止项
+
+- 禁止复制模板来源中的业务内容，或让本文件覆盖 PRD 的内容决策。
+- 禁止把输入主题色铺满背景、普通卡片或大面积面板；禁止把默认色相误当成视觉 DNA。
+- 禁止把摘要拼接组拆成不同高度、不同圆角、各自带阴影的散卡；当主辅内容契约成立时，禁止把主辅分栏改成无主次的等宽卡片流，也禁止在契约不成立时为套用主题强行分栏。
+- 禁止把轻网格主面板替换为多色、重阴影、3D 或无固定高度的通用图表；禁止把图标化明细退化为密集黑框表格。
+- 禁止瀑布流、自由高度卡片、`align-items: start`、无固定高度图表、长内容撑破父级和零散 margin 拼接。
+- 禁止默认后台质感、无依据装饰和与主题不一致的组件库默认样式。
+
+### 错误与正确
+
+- 错误：同层摘要各自浮起且尺寸不一；正确：统一外轮廓、等高 Grid 与 1px 内缝形成连续拼接区。
+- 错误：存在明确主辅关系时仍让两者等宽争抢注意力，或不存在辅助内容时强行分栏；正确：内容契约成立时桌面保持约 2:1 主辅比例并让同排面板上下对齐，否则遵循页面模式使用单列、列表、表单或详情布局。
+- 错误：图表堆叠多色序列、粗网格和永久节点；正确：以单主题主序列、轻网格和按需 tooltip 建立焦点。
+- 错误：明细区直接使用默认方形表头和密集竖线；正确：使用浅灰圆角表头、水平分隔与图标化首列。
+- 错误：主题色铺满页面；正确：主题色只连接主操作、关键焦点与选中状态，大部分表面保持中性。
+- 错误：卡片随内容自由增高形成瀑布流；正确：同类卡片固定高度、网格拉伸，长内容内部滚动或截断。
+- 错误：快捷入口使用默认彩色宫格；正确：继承本主题的表面、圆角、单色图标和密度语言。
+
+### AI 使用提示
+
+先读取 PRD，再解析 `{{PRIMARY_COLOR}}` 并生成全部实际 Brand Token。所有真实页面先继承全应用 Token 和基础组件语言，再按各自内容契约选择可落地的视觉记忆点。代表性构图只作为视觉配方，不用于枚举项目不存在的页面或创造内容；主题色只替换色相，不改变画布、层级、构图、密度、形状和组件机制。基础 DNA 始终保留，组件记忆点只在内容契约满足时保留对应构图公式，并达到本文定义的布局稳定性、微观细节、状态、响应式与可访问性基线。
+
+### 交付自检
+
+- [ ] 全部页面内容和模块是否来自 PRD，而非模板来源？
+- [ ] 摘要拼接组是否保持连续外轮廓、同类等高和内部细分隔？
+- [ ] 主辅区域是否保持清晰比例、同排拉伸和稳定对齐？
+- [ ] 主内容面板是否使用低对比辅助线、单主焦点和固定高度？
+- [ ] 明细区是否使用浅灰圆角表头、图标化首列、水平分隔和弱尾部操作？
+- [ ] 每个视觉记忆组件是否都有 `content_contract`、`render_policy`、迁移目标和无匹配回退策略？
+- [ ] 未被 PRD 触发的组件是否没有强行渲染，视觉迁移是否没有新增业务内容？
+- [ ] 主操作、关键焦点、图表强调和选中状态是否共享 `--color-brand1-6`，其余表面保持中性？
+- [ ] `application-global` 的变量名和消费语义是否稳定，具体值是否依据当前主题生成？
+- [ ] 文字对比是否保持 `text1-4` 高于 `text1-10`、`text1-10` 高于 `text1-3`？
+- [ ] `themeId`、描述、视觉 DNA、组件标题和正文总结是否没有绑定默认色相？
+- [ ] `themeId` 和描述是否只表达视觉机制，没有把页面类型或业务任务写成主题身份？
+- [ ] 是否没有建立适用/不适用产品形态清单，页面类型只用于视觉解读而非主题资格判断？
+- [ ] 所有真实页面是否共享全应用 Token 和基础组件语言，视觉记忆点是否只按 `content_contract` 条件式落地？
+- [ ] `{{PAGE_APPLICATIONS}}` 是否只展开项目真实存在的页面，没有枚举全部可能页面类型？
+- [ ] 主题同色演变是否由 `--color-brand1-6` 派生，独立分类色是否只表达并列类别，平台状态语义色是否未在 `custom-page` 重复声明？
+- [ ] 同类面板是否等高对齐，图表是否有固定高度，长内容是否在内部处理？
+- [ ] 快捷入口如有生成，是否由 PRD 触发并继承本主题的组件语言？
+- [ ] hover、active、focus、loading、empty、error、disabled、selected 是否完整且不引发布局跳动？
+- [ ] 移动端折叠、触控目标、键盘访问、对比度、非纯颜色状态与 reduced motion 是否达标？
+- [ ] 最终项目 `design.md` 是否替换全部占位符并写入七个 Brand Token 的实际色值？