openyida 2026.9.21 → 2026.9.22-beta.1

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

@@ -0,0 +1,344 @@
+---
+name: "{{PROJECT_NAME}}"
+description: 以冷灰画布、大圆角白色面板、强信息层级、条件式精细构图和单一主题色焦点构成轻盈清楚的结构化体验。
+themeId: airy-structured-clarity
+tokens:
+  application-global: # 全应用 Token，原生页面和自定义页面共同使用
+    colors:
+      "--pod-page-bg-color": "var(--color-white, #fff)"
+      "--color-white": "#FFFFFF" # 全应用基础表面色
+      "--color-brand1-1": "<基于 --color-brand1-6 生成的实际色值>" # 悬停色
+      "--color-brand1-2": "<基于 --color-brand1-6 生成的实际色值>" # 品牌浅色，保留平台既有消费关系
+      "--color-brand1-3": "<基于 --color-brand1-6 生成的实际色值>" # 浅色导航框架背景色
+      "--color-brand1-5": "<基于 --color-brand1-6 生成的实际色值>" # 深色导航框架背景色
+      "--color-brand1-6": "{{PRIMARY_COLOR}}" # 前置确定的全应用主题主色，是其他 Brand Token 的生成基准
+      "--color-brand1-9": "<基于 --color-brand1-6 生成的实际色值>" # 激活、按下状态色
+      "--color-brand1-10": "<基于 --color-brand1-6 生成的实际色值>" # 禁用状态色
+      "--color-line1-1": "#ECEFF3" # 弱边界、图表辅助线和表格行分隔线
+      "--color-line1-2": "#DDE2E8" # 控件和容器常规边界
+      "--color-fill1-1": "#F4F6F9" # 默认灰色填充，用于菜单悬停和弱状态
+      "--color-fill1-2": "#EDF2FA" # 点击或选中填充
+      "--color-fill1-3": "#E7EBF0" # 更重的灰色填充
+      "--color-fill1-10": "rgba(46, 48, 51, 0.90)" # 气泡浮层背景色
+      "--color-text1-4": "#111318" # 默认一级文字色
+      "--color-text1-10": "#3D424A" # 特殊文字色，仅用于表头和 placeholder
+      "--color-text1-3": "#7A818C" # 二级文字色
+    typography:
+      base:
+        "--font-family-base": "system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif"
+      subhead:
+        "--font-size-subhead": 18px
+        "--font-weight-subhead": 700
+        "--font-lineheight-subhead": 1.2
+      body-2:
+        "--font-size-body-2": 16px
+        "--font-weight-body-2": 700
+        "--font-lineheight-body-2": 1.4
+      body-1:
+        "--font-size-body-1": 14px
+        "--font-weight-body-1": 400
+        "--font-lineheight-body-1": 1.5
+      table:
+        "--font-size-table": 13px
+        "--font-weight-table": 400
+        "--font-lineheight-table": 1.45
+      caption:
+        "--font-size-caption": 12px
+        "--font-weight-caption": 400
+        "--font-lineheight-caption": 1.4
+    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: # 页面专属 Token，仅在指定自定义页生效
+    colors:
+      "--oyd-chart-neutral": "#E9EDF3"
+      "--oyd-chart-tooltip-background": "#FFFFFF"
+      "--oyd-series-green": "#35C98A"
+      "--oyd-series-orange": "#FF8A2B"
+    typography: # 仅补充全局字体体系没有的指标数字语义
+      metric-secondary:
+        "--font-size-metric-secondary": 24px
+        "--font-weight-metric-secondary": 700
+        "--font-lineheight-metric-secondary": 1.15
+      metric-primary:
+        "--font-size-metric-primary": 32px
+        "--font-weight-metric-primary": 700
+        "--font-lineheight-metric-primary": 1.1
+      metric-emphasis:
+        "--font-size-metric-emphasis": 40px
+        "--font-weight-metric-emphasis": 700
+        "--font-lineheight-metric-emphasis": 1.05
+---
+
+# {{PROJECT_NAME}} design.md
+
+## 设计总览
+
+- 业务领域：{{BUSINESS_DOMAIN}}
+- 产品形态：{{EXPERIENCE_TOPOLOGY}}
+- 主题来源：{{THEME_SOURCE}}
+- 项目约束：{{PROJECT_CONSTRAINTS}}
+
+本主题以轻盈结构语言构建全应用视觉：以轻冷灰画布托起大圆角白色面板，用高对比重点信息建立第一阅读层级，再以单一主题色连接主操作、关键图表和选中状态。指标摘要卡、L 形彩色分解条和分段式半环仪表构成主要组件记忆点；整体留白充足但不空洞，信息密度由稳定网格和固定面板高度维持。
+
+### 风格定位与应用说明
+
+- 数据看板、经营分析、运营工作台和指标总览最能体现本主题的组件记忆点。
+- 列表、详情、表单、流程、内容和门户页面继承同一套画布、Token、字体、圆角、控件与状态语言。
+- 分析组件只作用于满足内容契约的真实内容；其他页面保持主题基础设计语言，不复制仪表盘结构。
+- 所有页面共享本主题的全应用 Token 和基础组件语言；逐页视觉应用根据项目实际页面、页面模式和真实内容生成，视觉记忆点仅在满足内容契约时使用。
+
+### 视觉 DNA
+
+| 设计母体                     | 可见证据与置信度                                                                                                           | 复用规则与实现钩子                                                                                                                    | 缺失后的失败表现                                         |
+| ---------------------------- | -------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------- |
+| 冷灰画布上的白色浮岛         | 近白冷灰页面底承托白色大圆角面板；边框极细、阴影极弱。`observed`                                                           | `--pod-page-bg-color`、`--color-white`、`--corner-5`、1px 弱边界和低透明柔影共同作用；页面不能直接白底铺满。                                       | 页面会退化成普通白底后台，失去轻盈的浮岛层次。           |
+| 三行式指标摘要卡             | 指标卡固定为标题与右上主题色图标、粗体大数字与贴身趋势胶囊、灰色对比基线三层。`observed`                                    | `metric_card` 使用三行固定构图；核心数字消费 `metric-primary`，单个重点汇总消费 `metric-emphasis`，趋势和说明消费全局 `caption`；图标消费 `--color-brand1-6`。 | 只剩“数字 + 标题”的通用 KPI 卡，丢失这套风格的扫描节奏。 |
+| L 形三段彩色分解条           | 嵌套模块分成三列，每列用左侧竖色线和底部粗色条组成 L 形边界，并承载图标、数字和标签。`observed`                             | `breakdown_strip` 使用三等分列、主题色/绿/橙三色、3px 左竖线和 6-8px 圆角底条；列内为图标与数字同排、标签次级。                                    | 变成普通三列统计卡或彩色宫格，失去横向分解的独特记忆。   |
+| 分段式半环目标仪表           | 进度组件由大量离散短条组成半环，已完成段由绿到浅绿变化，未完成段为浅灰；中心依次是百分比、说明和胶囊按钮。`observed`        | `segmented_gauge` 使用 36-48 个径向短条、约 220-240° 半环、中心垂直栈和小型描边按钮；禁止连续圆环。                                                | 退化为常见实心环形图或进度条，组件辨识度消失。           |
+| 单一主题色焦点与柔和数据纹理 | 主按钮、关键图标、折线和选中柱统一消费主题色，其余柱体、网格和填充保持浅灰。`observed`                                      | 以 `--color-brand1-6` 统一主操作、语义图标和图表焦点；换肤时只重算主题色及其同色演变，独立语义色和其他图表元素保持各自角色。                         | 多色同时抢占注意力，页面会变成彩色报表或通用组件示例。   |
+
+### 视觉记忆点应用策略
+
+| 视觉记忆组件       | 内容契约                                                                  | 落地策略                                                                            | 可迁移机制与适配目标                                                                                                                  | 无匹配内容时                                                                        |
+| ------------------ | ------------------------------------------------------------------------- | ----------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------- |
+| 三行式指标摘要卡   | `content_contract`：PRD 存在可量化指标、当前值、比较基线或趋势说明。      | `render_policy: adapt_existing_slot`；存在 `primary_metrics` 或同义指标槽位时启用。 | `transferable_mechanism`：标题与主题色图标、粗体数字与贴身趋势胶囊、灰色比较基线；`adaptation_targets`：已有 KPI、状态或数量摘要。    | `fallback: recipe_only`；无真实指标时不渲染。禁止编造数字、百分比、趋势或比较周期。 |
+| L 形三段彩色分解条 | `content_contract`：PRD 存在 2-4 个具有同一归属关系的分类、角色或组成项。 | `render_policy: adapt_existing_slot`；存在分解、组成或相关对象槽位时启用。          | `transferable_mechanism`：同一容器内等分列、左竖线与底部粗色条组成 L 形边界；`adaptation_targets`：已有分类分解、渠道构成或对象摘要。 | `fallback: recipe_only`；无真实分类关系时不渲染。禁止编造分类、对象或数量。         |
+| 分段式半环目标仪表 | `content_contract`：PRD 存在完成率、目标进度或有界比例。                  | `render_policy: prd_match_only`；存在合法比例值与目标语义时启用。                   | `transferable_mechanism`：离散短条半环、中心百分比、说明与胶囊动作；`adaptation_targets`：已有目标完成率或进度指标。                  | `fallback: recipe_only`；无比例数据时完全不渲染。禁止伪造目标、百分比或状态。       |
+| 单一主题色关键图表 | `content_contract`：PRD 存在可视化所需的真实定量序列。                    | `render_policy: prd_match_only`；已有图表或趋势槽位时启用。                         | `transferable_mechanism`：主题色关键序列、浅灰非重点序列和低调网格；`adaptation_targets`：已有折线、柱图或比较图。                    | `fallback: recipe_only`；无定量数据时不生成图表。禁止以装饰图形冒充数据。           |
+
+- 每个页面优先选择 1-3 个满足内容契约的主记忆点，不要求全部组件同时出现。
+- 只能把视觉机制迁移到 PRD 已有内容；若落地会新增业务能力，改为 `suggest_only` 并从默认实现中移除。
+
+### 设计变量范围
+
+`tokens.application-global` 是原生表单、流程页面和自定义页面共同遵守的全应用设计契约；宜搭平台变量由原生页面自动消费，字体、间距和圆角由页面实现按下文语义统一绑定。`tokens.custom-page` 只补充分析页面独有的画布、图表中性色、图表提示层、少量分类序列色以及全局体系没有的指标数字语义，不覆盖全应用 Token 的固定语义。
+
+## 色彩
+
+- 色彩来源：{{COLOR_SOURCE}}
+- 颜色 Token 的名称和值以文档顶部 YAML 的 `tokens` 为唯一事实源；AI 可以根据主题调整色值，不改变宜搭应用全局变量名。
+- `--color-white` 始终作为白色面板表面；这是本主题“冷灰画布 + 白色浮岛”视觉母体的必要组成。
+
+### 设计变量消费规则
+
+| 固定消费语义                                                                     | 消费 Token                       | 作用域   |
+| -------------------------------------------------------------------------------- | -------------------------------- | -------- |
+| 主题色交互元素悬停；主按钮、主题色链接等使用，中性菜单悬停使用 `--color-fill1-1` | `--color-brand1-1`               | 应用全局 |
+| 平台预留品牌浅色；沿用宜搭既有消费关系，自定义页不主动绑定                       | `--color-brand1-2`               | 应用全局 |
+| 浅色导航框架背景                                                                 | `--color-brand1-3`               | 应用全局 |
+| 深色导航框架背景                                                                 | `--color-brand1-5`               | 应用全局 |
+| 全应用主题主色；用于主按钮、关键图表、链接和选中强调                             | `--color-brand1-6`               | 应用全局 |
+| 主题色交互元素激活或按下；中性选中背景使用 `--color-fill1-2`                     | `--color-brand1-9`               | 应用全局 |
+| 主题色交互元素禁用状态                                                           | `--color-brand1-10`              | 应用全局 |
+| 弱分隔线、表格行分隔线和图表辅助线                                               | `--color-line1-1`                | 应用全局 |
+| 输入框、按钮和面板边界                                                           | `--color-line1-2`                | 应用全局 |
+| 页面底层冷灰画布                                                                 | `--pod-page-bg-color`          | 自定义页 |
+| 面板、卡片、弹窗和表单容器                                                       | `--color-white`                  | 应用全局 |
+| 未选中柱体、图表轨道和弱数据纹理                                                 | `--oyd-chart-neutral`            | 自定义页 |
+| 图表悬浮提示层                                                                   | `--oyd-chart-tooltip-background` | 自定义页 |
+| 分解条和半环仪表的绿色序列                                                       | `--oyd-series-green`             | 自定义页 |
+| 分解条的暖色序列                                                                 | `--oyd-series-orange`            | 自定义页 |
+| 菜单悬停、弱标签和默认浅灰底                                                     | `--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 的实际色值，不得保留生成期标记。没有品牌色时由上游主题流程提供默认主色；换为其他品牌色时，仍要保持“单一明亮焦点色 + 大面积中性色”的消费比例。绿、橙等独立分类色保持各自色彩角色，不从 `--color-brand1-6` 推演。
+
+### 本主题的配色约束
+
+- 画布是轻冷灰，面板是纯白；两者必须同时存在，不能合并为同一白色。
+- 主题色只用于主操作、关键图表、选中数据和少量线性图标，同屏不能出现多个竞争主色；模板实现统一消费 `--color-brand1-6`，不得在组件规则中写死主题色。
+- 正向、负向、警告和信息状态沿用宜搭或组件库语义色；浅色胶囊必须配图标或方向符号，不能只依赖颜色。
+- 图表大部分面积保持中性，彩色序列只在确有分类比较时使用，并控制为主题色、绿、橙、粉等少量清楚色组。
+
+## 字体与排版
+
+- 全局只使用 `tokens.application-global.typography.base` 定义的一套系统无衬线字体。
+
+```text
+page-title → tokens.application-global.typography.subhead
+page-subtitle → tokens.application-global.typography.body-2
+panel-title / card-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-secondary → tokens.custom-page.typography.metric-secondary
+metric-primary → tokens.custom-page.typography.metric-primary
+metric-emphasis → tokens.custom-page.typography.metric-emphasis
+```
+
+- 页面标题、卡片标题和内容标题字重为 700；正文、表格和辅助描述字重为 400。
+- 普通页面标题始终消费全局 `subhead`；不得在组件内临时增加没有 Token 承接的展示标题。
+- 核心指标消费页面级 `metric-primary`：32px/700/1.1；单个重点汇总或仪表中心值消费 `metric-emphasis`：40px/700/1.05。金额、百分比、时间和表格数值启用等宽数字特性。
+- 趋势值和说明文字消费全局 `caption`：12px/400/1.4，通过胶囊表面、图标和颜色建立层级，不另写字号或字重覆盖。
+- 图标采用简洁线性或小面积面性风格，默认 16-20px；同类指标图标保持统一尺寸并消费主题色。
+
+## 布局与间距
+
+- 所有间距统一消费文档顶部 YAML 的 `--s-1` 至 `--s-8`；页面外边距和主网格间距使用 `--s-4`，卡片内部使用 `--s-6`。
+- 桌面端使用 12 列网格：首行指标区通常为四张等宽卡；主分析区使用约 `1.65fr / 1fr` 的宽窄双列，避免平均分栏削弱主次。
+- 标题与全局操作位于同一顶部带：标题靠左，时间、筛选和主操作靠右；控件数量增加时整组换行，不挤压标题。
+- 页面结构以 `page_title + global_actions → primary_metrics → trend_panel / judgment_panel → detail_table / supporting_panel` 为主，不复制任何非 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` 为 148-176px，`chart_panel` 为 320-420px，`detail_panel` 为 440-560px，推断的 `quick_action_item` 为 72-88px。
+- 图表、表格、列表和长文案必须在面板内部滚动、截断或折叠，不得撑破外层网格；图表容器必须有确定高度。
+- 区块间距由父级网格或弹性布局的 `gap` 管理，不用零散 `margin-top`、`margin-bottom` 拼接页面节奏。
+- 1024-1439px 时指标区改为两列；小于 1024px 时主分析区改单列；小于 768px 时指标区改单列，并解除桌面等高要求。
+
+## 表面与层级
+
+- 常规面板使用纯白表面、1px `--color-line1-1` 边界和极弱冷灰阴影，建议阴影不超过 `0 8px 24px rgba(17, 24, 39, 0.05)`。
+- 画布与面板主要通过色调差和边界区分，不能给每张卡片添加明显投影或毛玻璃效果。
+- 图表提示层使用白色表面、`--corner-3` 和比普通面板略强的阴影，确保覆盖关系清楚。
+- 只有唯一主操作可以使用主题色轻渐变和同色柔影；渐变两端必须由 `--color-brand1-6` 推演同色相的明暗阶，不得绑定固定蓝色或引入第二种色相。普通卡片、次按钮和图表背景禁止渐变。
+- 嵌套数据模块以细边框和局部彩色底边形成层级，不再叠加第二档明显阴影。
+
+## 圆角与形状
+
+- 主要指标卡和分析面板统一使用 `--corner-5`；嵌套模块使用 `--corner-4`，图表提示层和小型输入使用 `--corner-3`。
+- 顶部筛选器、主次按钮、趋势标签和输入发送区使用 `--corner-semicircle`，但大面板不能做成胶囊。
+- 图标按钮、头像或单点操作使用 `--corner-circle`；方形缩略图使用 `--corner-2` 或 `--corner-3`。
+- 同一网格层级必须使用一致圆角，禁止随机混用小圆角、直角和超大圆角。
+
+## 组件
+
+### 按钮与操作
+
+按钮只使用四档高度：迷你/行内 28px、紧凑工具栏 32px、常规 36px、强调或宽松场景 40px，所有按钮不得超过 40px。主按钮使用主题色实底，或使用由 `--color-brand1-6` 推演出的同色相轻渐变，并带克制的主题色柔影；同一操作区只保留一个主按钮。次按钮使用白色表面、`--color-line1-2` 边框和一级文字色，不使用渐变。纯图标按钮从同一四档中选择正方形尺寸，默认中性，激活后才消费主题色。
+
+### 输入与筛选控件
+
+表单输入默认 36px，宽松搜索与选择器使用 40px，紧凑工具栏控件使用 32px；使用白色或 `--color-fill1-1` 表面、`--color-line1-2` 边框和一级文字色。placeholder 使用 `--color-text1-10`。工具栏内的筛选控件使用胶囊形，多段筛选可合并为一个连续容器并用细分隔线区分；表单内普通输入使用 `--corner-2`。聚焦时边框和焦点环消费主题色，错误状态沿用独立语义色。
+
+### 卡片与面板
+
+一级卡片使用白色表面、`--corner-5`、1px 弱边界和极弱阴影；标题与更多操作位于固定头部，内容区自适应填充。嵌套卡片使用 `--corner-4` 和细边框，不再叠加明显阴影。卡片只有在承载独立指标、图表、列表或任务分组时使用，不能把每段文字都包成白卡。
+
+### 指标摘要卡（可见记忆点）
+
+`metric_card` 在内容契约匹配时采用固定三行构图：第一行左侧是短标题，右上是 16-20px 的主题色语义图标；第二行核心数字消费 `metric-primary`，趋势胶囊贴在数字右侧并垂直居中；第三行灰色对比基线消费全局 `caption`。正向胶囊使用浅绿底、绿色方向符号和文字，负向使用浅粉底、粉红方向符号和文字；胶囊不能移到卡片角落，也不能放大成独立状态块。卡片高 148-176px、内边距 24-28px，不增加迷你折线、渐变背景或大面积彩色图标容器。
+
+### L 形三段彩色分解条（可见记忆点）
+
+`breakdown_strip` 位于主分析面板内部，先使用一层带细边框的白色嵌套容器；容器标题在左、更多操作在右。主体固定为三列等分，每列由 3px 左竖色线和 6-8px 底部粗色条组成 L 形视觉框架，三组颜色依次使用主题色、`--oyd-series-green` 和 `--oyd-series-orange`。列内第一行是同色小图标与消费 `metric-secondary` 的粗体数字，第二行是消费全局 `caption` 的灰色标签；列间只用留白，不加完整竖向分隔线。底条必须贴近容器底部并使用轻微圆角，不能改成顶部标签、彩色背景卡或普通进度条。
+
+### 分段式半环目标仪表（可见记忆点）
+
+`segmented_gauge` 使用 36-48 个等宽径向短条构成约 220-240° 半环；已完成段使用从浅绿到 `--oyd-series-green` 的渐变，未完成段使用 `--oyd-chart-neutral`。中心区域从上到下依次为消费 `metric-emphasis` 的百分比、消费全局 `caption` 的目标说明和小型白底描边胶囊按钮，三者必须沿中轴居中。推荐使用 ECharts gauge 的离散刻度或 `repeating-conic-gradient` 配合遮罩实现；禁止连续实心圆环、饼图、全圆甜甜圈和把按钮移到面板外。
+
+### 图表
+
+折线图使用 2px 左右的主题色线、低透明同色面积填充和极淡辅助网格，悬浮点与提示层只在交互时出现；柱图以浅灰圆角柱为基础，仅用主题色高亮当前或关键柱。坐标轴、图例和单位使用二级文字色，图表容器必须有固定高度。通用图表只能补充三类记忆组件，不能替代它们。
+
+### 表格与列表
+
+表格使用 13px 字号，不显示竖向边框；表头弱化，行间使用 `--color-line1-1` 分隔，数值列右对齐。缩略图统一为 32-36px 小圆角方形，状态图标与数值保持同一行。列表项高 56-72px，主要文字、辅助说明和尾部操作形成稳定三段结构；长文本单行截断并提供完整内容查看方式，不能撑高整张面板。
+
+### 快捷入口（条件式配方）
+
+`quick_actions` 的 `confidence: inferred`，`render_policy: recipe_only`。只有 PRD 已明确快捷入口内容时，才将配方应用到现有入口：放在指标摘要之后或右侧辅助区，桌面端使用 4-6 个等高条目；每项包含主题色线性 `action_icon`、短 `action_label` 和可选弱化 `action_meta`。条目使用白色或极浅灰表面、`--corner-4`、细边框和无明显阴影；禁止彩色宫格、营销插画和大图标墙。平板改为 2-3 列，移动端为两列或横向滚动，触控目标不小于 44px。PRD 未提供入口时不生成组件本体。
+
+### 状态与交互
+
+- 悬停：面板边界略增强或轻微上移 1-2px；不得突然增加大阴影。
+- 按下：主操作使用 `--color-brand1-9`，卡片型入口轻微缩放至 0.99。
+- 聚焦：控件显示清楚焦点环，不能只靠阴影；纯图标按钮必须有可访问名称。
+- 加载：保持面板固定高度，以浅灰骨架屏替代内容，不能造成网格跳动。
+- 空态与错误：保留面板结构，使用简短说明和下一步操作；错误不能把整张卡片染红。
+- 禁用：降低强调但保持文字可读，不允许仅通过透明度降到不可辨认。
+
+## 项目应用
+
+### 产品形态与主题应用
+
+- 当前产品形态：{{EXPERIENCE_TOPOLOGY}}
+- 主题应用：{{PRODUCT_TOPOLOGY_APPLICATION}}
+
+### 页面模式
+
+{{PAGE_PATTERN_SUMMARY}}
+
+页面模式决定任务、指标和明细结构；本主题为所有页面提供冷灰画布、白色浮岛、文字层级和基础组件语言，分析网格与指标构图只作用于匹配内容。
+
+### 逐页视觉应用
+
+{{PAGE_APPLICATIONS}}
+
+逐页应用先继承颜色、字体、圆角、表面和控件语言，再根据真实内容匹配记忆组件。只有页面已有对应信息类型时，才说明 `primary_metrics`、`breakdown_strip`、`segmented_gauge`、`trend_panel`、`detail_table` 或 `quick_actions` 的位置、跨度、高度与移动端顺序；未匹配的组件不进入该页实现。
+
+### 素材要求
+
+- 页面图片需求：{{PAGE_IMAGE_NEEDS}}
+- 素材缺口：{{ASSET_GAPS}}
+- 数据图表、产品缩略图和辅助图形必须有真实来源；没有素材时使用结构化数据或中性占位，不编造客户、商品、指标或图片地址。
+
+## 设计规范与禁忌
+
+### 必须做到
+
+- 保留冷灰画布与白色大圆角浮岛的双层表面关系。
+- PRD 存在指标摘要时，指标卡必须保留“标题与右上主题色图标、数字与贴身趋势胶囊、灰色对比基线”的三行构图。
+- PRD 存在同一归属下的分类分解时，分解模块必须保留三列等分和每列“左竖线 + 底部粗色条”的 L 形彩色框架。
+- PRD 存在目标进度或有界比例时，目标组件必须使用离散短条半环、中心百分比、说明和胶囊按钮，不能用普通连续圆环替代。
+- 保持单一主题色贯穿主操作、关键图表和选中状态，大部分数据纹理保持中性。
+- 保持同类卡片等高、边缘对齐、固定图表高度和面板内部溢出处理。
+- PRD 明确存在快捷入口时，使用白色轻面板和主题色简洁图标配方；未提供入口时不生成。
+- 文字、控件和非文本图形满足适用对比要求；状态同时使用文字、图标或方向符号。
+
+### 禁止项
+
+- 禁止纯白页面直接铺白卡、重阴影、毛玻璃、霓虹光效或大面积渐变背景。
+- 禁止彩色卡片墙、每条数据一个高饱和色、同屏多个主色或把语义色当品牌装饰色。
+- 禁止把三行式指标卡简化成只有标题和数字的通用 KPI 卡，或为其增加无依据的迷你折线和大图标底座。
+- 禁止把 L 形三段分解条改成三个独立彩色卡片、普通进度条或完整表格。
+- 禁止把分段式半环仪表改成连续圆环、饼图、全圆甜甜圈或纯文本百分比。
+- 禁止瀑布流、自由高度卡片、无固定高度图表、`align-items: start` 和长内容撑破父级。
+- 禁止用大插画、三维球体或欢迎语替代关键指标、趋势判断和业务操作。
+- 禁止把快捷入口做成默认彩色宫格、超大图标墙或营销卡片。
+
+### 错误与正确
+
+- 错误：白色画布叠白色卡片；正确：轻冷灰画布明确托起纯白面板。
+- 错误：指标卡只有标题和数字；正确：右上主题色图标、粗体数字、贴身趋势胶囊和灰色对比基线形成三行固定构图。
+- 错误：分解数据做成三个彩色小卡；正确：在同一嵌套容器中使用三列 L 形彩色边界、图标数字和次级标签。
+- 错误：完成率使用连续圆环；正确：用离散短条组成半环，并在中心垂直放置百分比、说明和胶囊按钮。
+- 错误：所有柱线都用鲜艳颜色；正确：大部分图表元素保持浅灰，只让关键序列使用主题色。
+- 错误：卡片随内容自由增高形成瀑布流；正确：同类卡片固定高度、网格拉伸，长内容内部滚动或截断。
+- 错误：快捷入口使用彩色宫格；正确：使用白色轻面板、主题色简洁图标和短标签继承整体风格。
+
+### AI 使用提示
+
+所有页面先继承冷灰画布、白色浮岛、单一主题色焦点和基础组件语言，再逐项检查视觉记忆点的 `content_contract`。只有 PRD 内容匹配时，才分别落地 `metric_card` 的三行固定构图、`breakdown_strip` 的三列 L 形彩色边界或 `segmented_gauge` 的离散短条半环与中心内容栈；无匹配内容时保留配方，不生成组件本体，也不以普通 KPI 卡、常规图表或虚构数据代替。
+
+### 交付自检
+
+- [ ] 冷灰画布、白色面板、细边框和极弱阴影是否同时存在？
+- [ ] PRD 存在指标摘要时，指标卡是否完整保留右上主题色图标、粗体数字、贴身趋势胶囊和灰色对比基线？
+- [ ] PRD 存在分类分解时，三段模块是否使用同一容器、三列等分以及主题色/绿/橙 L 形彩色边界？
+- [ ] PRD 存在目标进度时，目标仪表是否由离散短条构成半环，并在中心保留百分比、说明和胶囊按钮？
+- [ ] 主操作、关键图表、语义图标和选中状态是否共享同一主题色？
+- [ ] 同类面板是否等高对齐，图表是否有固定高度，长内容是否在内部处理？
+- [ ] 快捷入口是否只在 PRD 明确提供入口时生成，并继承白色轻面板与主题色图标语言？
+- [ ] 加载、空态、错误、禁用、无权限、选中和移动端是否保持稳定布局？
+- [ ] 最终项目 `design.md` 是否已替换全部占位符并写入实际 Brand Token 色值？