openyida 2026.9.21 → 2026.9.22-beta.1

package/yida-skills/skills/yida-design/sub_skill/yida-design-plan/templates/design-themes/status-framed-media-grid.md

@@ -0,0 +1,361 @@
+---
+name: "{{PROJECT_NAME}}"
+description: 以独立指标带、线性分类轨、媒体封面卡和叠加状态标记构成中等密度、弱边界、轻阴影且对象状态清晰的视觉主题。
+themeId: status-framed-media-grid
+tokens:
+  application-global:
+    colors:
+      "--pod-page-bg-color": "var(--color-white, #fff)"
+      "--color-white": "#FFFFFF"
+      "--color-brand1-1": "<基于 --color-brand1-6 生成的实际色值：悬停时提高明度约 8%>"
+      "--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 生成的实际色值：降低明度约 10%>"
+      "--color-brand1-10": "<基于 --color-brand1-6 生成的实际色值：与白色混合 72%>"
+      "--color-line1-1": "#EEEEEE"
+      "--color-line1-2": "#DDDDDD"
+      "--color-fill1-1": "#F7F7F7"
+      "--color-fill1-2": "#F2F2F2"
+      "--color-fill1-3": "#E8E8E8"
+      "--color-fill1-10": "rgba(255, 255, 255, 0.96)"
+      "--color-text1-4": "#141414"
+      "--color-text1-10": "#5C5C5C"
+      "--color-text1-3": "#8A8A8A"
+    typography:
+      base:
+        "--font-family-base": "Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif"
+      subhead:
+        "--font-size-subhead": 24px
+        "--font-weight-subhead": 700
+        "--font-lineheight-subhead": 1.3
+      body-2:
+        "--font-size-body-2": 16px
+        "--font-weight-body-2": 600
+        "--font-lineheight-body-2": 1.45
+      body-1:
+        "--font-size-body-1": 14px
+        "--font-weight-body-1": 400
+        "--font-lineheight-body-1": 1.5
+      table:
+        "--font-size-table": 14px
+        "--font-weight-table": 500
+        "--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:
+    colors:
+      "--oyd-media-scrim": "rgba(0, 0, 0, 0.16)"
+      "--oyd-disabled-media-cover": "rgba(255, 255, 255, 0.58)"
+      "--oyd-brand-focus-soft": "<theme-gray：--color-brand1-6 8% + #FFFFFF 92%；项目实例化时计算并写入实际色值>"
+    typography:
+      metric-primary:
+        "--font-size-metric-primary": 28px
+        "--font-weight-metric-primary": 700
+        "--font-lineheight-metric-primary": 1.15
+---
+
+# {{PROJECT_NAME}} design.md
+
+## 设计总览
+
+- 业务领域：{{BUSINESS_DOMAIN}}
+- 产品形态：{{EXPERIENCE_TOPOLOGY}}
+- 主题来源：{{THEME_SOURCE}}
+- 项目约束：{{PROJECT_CONSTRAINTS}}
+
+本主题在近白画布上组织清晰的三级节奏：页面身份与全局操作形成轻量首行，独立指标卡形成等高摘要带，线性分类轨连接到媒体主导的对象卡网格。卡片使用弱边界、极轻阴影和 16px 圆角；真实媒体占据卡片上半部，状态胶囊叠加在媒体安全区内，下半部以强数值、对象标题、辅助信息和尾部操作构成稳定阅读路径。主题色只占据主操作、选中下划线、焦点环和少量图标底，不改变大面积中性表面。
+
+### 风格定位与应用说明
+
+- 核心气质是“媒体先行、状态可扫读、结构轻而明确”；拥有对象集合、阶段状态、摘要指标或缩略媒体的内容最能发挥其视觉记忆点，但这不是页面类型限制。
+- 所有页面共享本主题的全应用 Token 和基础组件语言；逐页视觉应用根据项目实际页面、页面模式和真实内容生成，视觉记忆点仅在满足内容契约时使用。
+- 代表性构图迁移到其他页面时保留独立摘要带、线性导航、上媒体下信息的分区、弱边界和小面积焦点，不复制具体业务字段或固定列数。
+- 内容不匹配时，将卡片的封面—信息分区迁移至已有对象槽位；没有媒体或状态数据时降级为结构化列表或 `recipe_only`，涉及新增指标、分类或操作时只能 `suggest_only`。
+
+### 视觉 DNA
+
+| 设计母体 | 可见证据与置信度 | 复用规则与实现钩子 | 缺失后的失败表现 |
+| --- | --- | --- | --- |
+| 独立指标卡带 | 首屏以多张等宽、等高、轻边界摘要卡横向排列，图标、主数值与变化说明形成稳定三段。`observed` | 不可变：同类卡等高、低阴影、数值强于标签、变化信息紧贴主值；可变：卡片数量、指标语义与图标。使用 `grid-template-columns: repeat(auto-fit, minmax(208px, 1fr))` 与 `metric-primary`。 | 退化为散落文本或大色块 KPI，失去首屏扫描节奏。 |
+| 线性分类轨 | 分类项直接落在画布上，仅激活项通过更强文字和短下划线确认，无胶囊底。`observed` | 不可变：单行、低装饰、选中线与内容起点对齐；可变：分类数量与计数。横向溢出使用内部滚动，不换成彩色标签云。 | 退化为按钮堆叠或厚重分段器，页面显得拥挤。 |
+| 封面叠加状态卡 | 对象卡上半部为固定比例媒体，状态胶囊悬浮在左上安全区，下半部按强弱层级承载信息。`observed` | 不可变：媒体比例、状态安全边距、信息区分隔和底部操作；可变：媒体、状态语义与字段。实现 `aspect-ratio`、`object-fit: cover`、绝对定位状态层。 | 退化为普通白卡或图文列表，媒体与状态无法形成记忆点。 |
+| 失活对象整体退场 | 不可用对象的媒体和文字整体降权，但结构、边界和操作位置仍保持。`observed` | 不可变：保留布局与可读标签，使用覆盖层、灰度和非颜色提示；可变：是否允许操作。不得只把透明度降到不可读。 | 状态差异只能靠颜色识别，或禁用项消失导致网格跳动。 |
+| 卡尾双端锚定 | 卡片尾部以左侧分类/状态文字和右侧小型行内操作形成稳定收束。`observed` | 不可变：`margin-top: auto`、两端对齐、28px 行内按钮；可变：左侧文本和右侧合法操作。 | 不同内容长度导致按钮漂移，卡片底线参差。 |
+
+### 视觉记忆点应用策略
+
+| 视觉记忆组件或构图 | 内容契约 | 落地策略 | 可迁移机制与适配目标 | 无匹配内容时 |
+| --- | --- | --- | --- | --- |
+| 独立指标卡带 | `content_contract`: PRD 提供 2-6 个同层级摘要值及可选趋势/说明 | `render_policy: prd_match_only`；`direct_trigger`: 存在可并列比较的摘要指标 | `transferable_mechanism`: 等高卡、图标底、数值优先和紧凑变化标签；`adaptation_targets`: `primary_metrics` | `fallback`: 无指标则不渲染；`forbidden`: 不得编造数值、趋势或时间周期 |
+| 线性分类轨 | `content_contract`: PRD 存在互斥视图、分类或状态过滤 | `render_policy: adapt_existing_slot`；`direct_trigger`: 已有筛选维度需要切换 | `transferable_mechanism`: 无底色标签、短下划线、计数弱化；`adaptation_targets`: `primary_content_panel` 顶部现有筛选槽 | `fallback`: 无分类则省略；`forbidden`: 不得新增分类体系或计数 |
+| 封面叠加状态卡 | `content_contract`: 对象集合含真实媒体、主标题、关键值及状态 | `render_policy: prd_match_only`；`direct_trigger`: 同一对象同时存在媒体与状态 | `transferable_mechanism`: 上媒体下信息、角标安全区、底部操作锚定；`adaptation_targets`: 现有对象卡、资源卡、成员卡 | `fallback`: 缺媒体时改结构化对象卡；`forbidden`: 不得伪造图片、状态、价格或属性 |
+| 失活对象整体退场 | `content_contract`: PRD 定义禁用、过期、不可用或已归档状态 | `render_policy: adapt_existing_slot`；`direct_trigger`: 已有状态需要降低视觉优先级 | `transferable_mechanism`: 覆盖层、灰度、状态文字与操作限制；`adaptation_targets`: 对象卡、列表行、缩略媒体 | `fallback`: 无失活语义则不使用；`forbidden`: 不得自行判定对象失活 |
+| 固定列媒体网格 | `content_contract`: PRD 提供可重复对象集合，且桌面宽度允许至少两列 | `render_policy: adapt_existing_slot`；`direct_trigger`: 对象适合卡片比较 | `transferable_mechanism`: 等宽列、等高卡、固定媒体比例和父级 gap；`adaptation_targets`: `primary_content_panel` | `fallback`: 内容不适合比较时回退列表；`forbidden`: 不得为凑列数新增对象或裁掉关键字段 |
+
+- 先匹配 `content_contract`，再决定是否渲染组件本体；不能为了保留视觉记忆点而新增 PRD 未要求的字段、数据、入口、对象或流程。
+- 每页优先清楚落地 1-3 个与 PRD 匹配的主记忆点，不要求全部组件同时出现。
+- 无合法业务承载时保留为 `recipe_only`；若需要新增业务能力则使用 `suggest_only`，不进入默认实现。
+
+### 设计变量范围
+
+`tokens.application-global` 是原生表单、流程页面和自定义页面共同遵守的全应用设计契约；变量名与消费语义保持稳定，本主题用近白表面、清晰文字对比、16px 主卡圆角和 4-32px 间距阶梯建立统一语言。`tokens.custom-page` 只补充近白画布、媒体压暗层、失活媒体覆盖层、主题派生柔焦底和独立指标数字层级；这些语义分别属于页面画布、媒体处理和展示数字，无法由全局填充或正文字体准确替代，不覆盖全应用 Token 的固定语义。
+
+## 色彩
+
+- 色彩来源：{{COLOR_SOURCE}}
+- 颜色 Token 的名称和值以文档顶部 YAML 的 `tokens` 为唯一事实源；AI 可以根据主题调整色值，不改变宜搭应用全局变量名。
+- 页面以 `--pod-page-bg-color` 承载底层画布，`--color-white` 承载所有主要卡片；两者通过边界而非强阴影分层。
+
+### 设计变量消费规则
+
+| 固定消费语义 | 消费 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-media-scrim` | 自定义页 |
+| 失活对象媒体的明度覆盖层 | `--oyd-disabled-media-cover` | 自定义页 |
+| 主题图标容器与轻焦点底 | `--oyd-brand-focus-soft` | 自定义页 |
+| 菜单悬停、弱标签和默认浅填充 | `--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 的实际色值，不得保留生成期标记。无品牌色时使用产品定义的主交互色作为锚点；换色后仍保持约 88% 中性表面、8% 文字与边界、4% 主题焦点的面积关系。
+
+### 本主题的配色约束
+
+- `--color-line1-1 / --color-line1-2`、`--color-fill1-1 / --color-fill1-2 / --color-fill1-3`、`--color-text1-4 / --color-text1-10 / --color-text1-3` 均为固定 `neutral-gray`，Hex 三通道相等；`--color-fill1-10`、`--oyd-media-scrim` 与 `--oyd-disabled-media-cover` 也是无彩透明层。
+- `--oyd-brand-focus-soft` 是 `theme-gray`，由 `--color-brand1-6` 8% 与 `#FFFFFF` 92% 混合；实例化时必须写入计算后的实际色值。
+- 主题色只用于主操作、关键焦点、选中下划线和少量语义图标；模板实现消费 `--color-brand1-6`，不得写死默认色。
+- 成功、警告、错误和信息状态直接消费平台语义色，并同时配合文字、图标或状态词；`custom-page` 不重复声明同义状态 Token。
+- 真实媒体保持自然色；单张卡片不额外叠加装饰渐变，媒体压暗层只在文字或图标叠加需要对比时出现。
+- 主题同色演变仅用于焦点软底和交互状态，均由 `--color-brand1-6` 派生；业务分类色若由 PRD 明确定义则保持独立角色，不反向成为主题身份。
+
+## 字体与排版
+
+- 全局只使用 `tokens.application-global.typography.base` 定义的字体栈。
+- 字号按语义和平台范围推断：原始视觉材料为 2128×1882，viewport、DPR 和导出倍率未知，不直接把物理像素换算为 CSS 字号。
+- `page-title` 消费 `tokens.application-global.typography.subhead`：24px / 700 / 1.3；`panel-title` 消费 `body-2`：16px / 600 / 1.45。
+- 内容标题、正文和对象名称消费 `body-1`：14px / 400 / 1.5；需要强调时只将字重提高到 600，不另建字号。
+- 表格与结构化元数据消费 `table`：14px / 500 / 1.45；时间、变化说明和次要标注消费 `caption`：12px / 400 / 1.4。
+- 主要指标消费 `tokens.custom-page.typography.metric-primary`：28px / 700 / 1.15；这是全局字体层级中不存在的独立展示数字语义，不覆盖页面标题。
+- 数值内容启用 `font-variant-numeric: tabular-nums`；单行标题超出时省略，地址式辅助信息最多两行，长说明在卡内折叠或转详情承载。
+- 图标使用 1.5-1.75px 线宽的圆润线性风格，常规尺寸 16-20px，与文字按视觉中心对齐；状态不可只依赖图标或色点。
+
+## 布局与间距
+
+- 页面安全边距使用 `--s-8`，模块间距使用 `--s-6`，卡片网格 gap 使用 `--s-4`，卡片内部 padding 使用 `--s-4`；图标与文本、元信息组内部使用 `--s-2` 或 `--s-1`。
+- 内容容器建议 `max-width: 1680px; margin-inline: auto; min-width: 0`；所有横向组由父级 `gap` 统一管理。
+- 顶部身份区采用 `display: flex; justify-content: space-between; align-items: flex-start`；小屏时操作换至下一行，但不改变信息优先级。
+- 当 PRD 同时存在摘要指标与对象集合时，先放等高指标带，再放分类轨和对象集合；缺少任一内容时直接省略相应区块，不制造占位。
+- 媒体网格仅在对象适合并列比较时使用：≥1440px 建议 4 列，1024-1439px 为 3 列，720-1023px 为 2 列，<720px 为 1 列。每档最小卡宽 260px，列数不足时自然回落。
+- 页面结构使用 `page_identity`、`global_actions`、`primary_metrics`、`primary_content_panel`、`detail_list` 等中性槽位，不复制视觉材料中的具体业务字段。
+
+### 布局稳定性硬规则
+
+- 桌面端主网格必须使用 `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` 建议高度 136-152px；媒体对象卡建议总高 430-480px，媒体区使用 `aspect-ratio: 16 / 9`；主要内容面板最小高度 420px；可选快捷项高度 72-88px。
+- 图表、表格、列表和长文案必须在面板内部滚动、截断或折叠，不得撑破外层网格；任何图表容器使用 280-360px 确定高度。
+- 区块间距由父级 grid/flex 的 `gap` 管理，不用零散 `margin-top`、`margin-bottom` 拼接页面节奏。
+- ≥1440px 执行宽桌面列数；1024-1439px 收为三列；720-1023px 收为两列并允许指标带横向换行；<720px 单列堆叠、分类轨内部横向滚动，卡片解除桌面等高但保留媒体比例、控件高度和文本截断。
+
+## 表面与层级
+
+- 页面画布为 `#FAFAFA`，一级卡片为 `#FFFFFF`，1px 边界使用 `--color-line1-1`；常规阴影为 `0 2px 10px rgba(0,0,0,0.035)`，只用于从画布上轻微抬升。
+- 弹窗和浮层消费 `--color-fill1-10`，边界使用 `--color-line1-2`，阴影可提升为 `0 12px 30px rgba(0,0,0,0.10)`；tooltip 不新建表面 Token。
+- 媒体直接贴合卡片上缘并裁入同一圆角，不增加内层白框；状态胶囊可使用半透明白表面和轻微背景模糊。
+- 禁止毛玻璃铺满普通卡片、强彩渐变背景、厚重投影或多层卡中卡。嵌套内容优先用分隔线与留白区分，仅浮层拥有更强阴影。
+
+## 圆角与形状
+
+- `--corner-1` 用于小标签内部图标底和微型提示；`--corner-2` 用于 28-32px 控件、小按钮和输入框；`--corner-3` 用于筛选控件、指标图标底与紧凑面板；`--corner-4` 用于主要卡片；`--corner-5` 仅用于宽松大容器。
+- `--corner-semicircle` 仅用于状态、计数和短文本胶囊；`--corner-circle` 用于头像、圆点和纯图标圆形按钮。
+- 媒体对象卡与媒体裁切共享同一上缘圆角；状态胶囊保持完整圆角但不得扩大成大面积彩色块。
+- 同一网格层级使用一致圆角，禁止随机混用直角、小圆角和超大圆角。
+
+## 组件
+
+### 按钮与操作
+
+- 迷你/行内按钮高 28px，紧凑工具栏按钮高 32px，常规按钮高 36px，强调操作高 40px；图标按钮使用对应档位的正方形尺寸，禁止其他高度。
+- 同一操作区只保留一个实心主操作：背景消费 `--color-brand1-6`，文字为白色；次操作使用白底和 `--color-line1-2` 边界。
+- 按钮圆角使用 `--corner-2` 或 `--corner-3`；图标与文本间距为 `--s-2`。hover 消费 `--color-brand1-1`，active 消费 `--color-brand1-9`，disabled 消费 `--color-brand1-10` 并保留可辨认边界。
+- focus 使用 2px `--color-brand1-6` 外环与 2px 白色间隔；纯图标按钮必须提供可访问名称与 tooltip。
+
+### 输入与筛选控件
+
+- 紧凑工具栏控件高 32px、常规表单 36px、宽松搜索与日期选择 40px；白底、1px `--color-line1-2` 边界、`--corner-3` 圆角。
+- placeholder 消费 `--color-text1-10`，输入值消费 `--color-text1-4`；focus 使用主题色边界和轻焦点环，error 使用平台错误色并附文字说明。
+- 分类切换优先使用线性分类轨，不用胶囊底；搜索、日期、排序等功能型控件组成独立工具组，并在窄屏换行。
+
+### 卡片与面板
+
+- 一级卡片使用白色表面、1px 弱边界、`--corner-4` 与极轻阴影；指标卡 padding 为 `--s-6`，媒体卡信息区 padding 为 `--s-4`。
+- 标题区与内容区保持明确分区；信息内容可用一条 `--color-line1-1` 分隔线组织元数据，不为每段文字增加嵌套卡。
+- 同类卡片等高，底部操作使用 `margin-top: auto` 锚定；内容缺失时保留合理留白，不改变同排基线。
+
+### 独立指标卡带
+
+- 公式：等宽自适应网格 → 每卡顶部标签与尾部小图标 → 底部主数字、变化值和周期说明。
+- 图标置于 40px `--corner-3` 柔焦底中；每卡只允许一个主值。趋势必须同时包含方向符号与文字，不能只依赖颜色。
+- 卡片间保持 `--s-4` gap，不以竖线替代独立卡片，不铺满主题色，不使用巨大 KPI 字号。
+
+### 封面叠加状态卡
+
+- 公式：固定比例媒体 → 左上 12px 安全区内的状态胶囊 → 信息区主值/标题/辅助信息 → 分隔元数据 → 双端卡尾。
+- 图片使用 `object-fit: cover`，裁切焦点可由素材元数据决定；状态胶囊高 28px，带 6px 状态点、短文字和半透明白底。
+- 失活卡添加 `--oyd-disabled-media-cover` 并降低次要文字对比，同时保留状态词、边界和必要操作；禁止单纯 `opacity: .3` 作用于整卡。
+- 缺少真实媒体时使用中性结构占位或改为无媒体对象卡，禁止伪造图片 URL。
+
+### 线性分类轨
+
+- 标签高度 40px，标签之间使用 `--s-6` gap；激活项文字为 `--color-text1-4` 且字重 600，底部 2px 主题色短线与标签同宽。
+- 非激活项消费 `--color-text1-10`，计数与标签保持 8px 间距；hover 只提升文字对比，不增加背景块。
+- 容器小于内容宽度时横向滚动并隐藏视觉滚动条，但保留键盘导航和可见焦点。
+
+### 图表或主内容面板
+
+- 若 PRD 有图表，使用白色主面板、弱网格 `--color-line1-1`、单一主题主序列和必要的独立比较序列；图表高度固定 320px，tooltip 复用 `--color-fill1-10`。
+- 若主内容是对象集合，优先使用媒体网格；若比较字段多于 5 个或媒体不重要，改用结构化列表/表格，不强行卡片化。
+
+### 表格与列表
+
+- 表头高 44px，背景 `--color-fill1-1`，正文行高 56px，分隔线 `--color-line1-1`；数值右对齐，状态与操作列宽固定。
+- 对象缩略图为 40px 方形、`--corner-2` 圆角；长标题单行省略，辅助文本最多两行；行尾操作使用 28px 图标按钮。
+- 表格在面板内部横向滚动，首要识别列可按项目需要黏附；不把每一行做成独立浮卡。
+
+### 快捷入口（推断）
+
+- `confidence: inferred`，`render_policy: recipe_only`。仅当 PRD 明确存在高频入口时使用独立 72-88px 白色条目，图标放入 `--oyd-brand-focus-soft`，标题和说明纵向排列。
+- 不将快捷入口塞入线性分类轨或对象卡尾；移动端保持单列，禁止默认彩色宫格。
+
+### 状态与交互
+
+- 悬停：卡片边界提升到 `--color-line1-2`，阴影变为 `0 6px 16px rgba(0,0,0,0.06)`，媒体轻微放大至 1.015，持续 180ms，不改变布局。
+- 按下：按钮和卡片操作提供 100-140ms 明度反馈；禁止整体缩放导致网格抖动。
+- 聚焦：控件显示清楚 focus ring；纯图标按钮必须有可访问名称。
+- 加载：保持指标卡、媒体区和信息区固定高度，以骨架屏替代内容，避免网格跳动。
+- 空态与错误：保留原面板结构，提供简短说明和下一步操作，不把整张卡片染成状态色。
+- 禁用与选中：状态文字、图标和形状共同表达；不可只依赖透明度或颜色。
+- 动效：统一 160-200ms `cubic-bezier(.2,.8,.2,1)`；`prefers-reduced-motion` 下移除媒体缩放和位移动画，仅保留即时颜色反馈。
+
+## 项目应用
+
+### 项目上下文与主题应用
+
+- 当前产品形态：{{EXPERIENCE_TOPOLOGY}}
+- 主题在当前项目中的应用说明：{{PRODUCT_TOPOLOGY_APPLICATION}}
+
+产品形态只提供任务与内容上下文，不决定主题是否可用。原生页面与自定义页面共同继承全应用 Token、按钮、输入、卡片、表格和状态语言；媒体卡、指标带与分类轨仅在真实内容满足契约时落地。
+
+### 页面模式
+
+{{PAGE_PATTERN_SUMMARY}}
+
+页面模式决定任务、内容和模块；本主题只规定视觉表达，不能强行把所有页面改造成同一种结构。页面没有媒体对象时，仍通过弱边界白表面、线性切换、稳定间距和克制主题焦点保持一致。
+
+### 逐页视觉应用
+
+{{PAGE_APPLICATIONS}}
+
+实例化最终项目 `design.md` 时，只展开项目真实存在的页面；每页说明主要中性槽位的位置、跨度、高度、移动端顺序和采用的视觉 DNA。页面不必使用全部组件母体，但采用对应信息类型时必须遵守构图公式。
+
+### 素材要求
+
+- 页面图片需求：{{PAGE_IMAGE_NEEDS}}
+- 素材缺口：{{ASSET_GAPS}}
+- 图片、图表、缩略图和辅助图形必须有真实来源；没有素材时使用结构化数据或中性占位，不编造客户、对象、指标或图片地址。
+
+## 设计规范与禁忌
+
+### 必须做到
+
+- 全应用始终保持近白画布、白色表面、弱边界、清晰文字对比、稳定圆角和小面积主题焦点。
+- 内容契约满足时，指标带必须等高且数值优先；媒体卡必须保持固定媒体比例、状态安全区、信息分区和卡尾锚定。
+- 分类轨必须线性、低装饰、可横向滚动；失活对象必须保留结构和非颜色状态提示。
+- 同类卡片等高、父级 gap 统一、图表高度固定、长内容内部处理；移动端保持控件尺寸、阅读顺序和触控目标。
+- 所有交互提供 hover、active、focus、loading、empty、error、disabled、selected 状态，并满足键盘操作、可访问名称与对比度要求。
+
+### 禁止项
+
+- 禁止复制视觉材料中的业务内容，或让 DESIGN.md 覆盖 PRD 的内容决策。
+- 禁止把输入主题色铺满背景、普通卡片或大面积面板；禁止把默认色相误当成视觉 DNA。
+- 禁止把固定列数、摘要带、分类轨或模块顺序写成所有页面无条件执行的结构。
+- 禁止把封面状态卡替换成无分区通用白卡，禁止让状态胶囊离开媒体安全区，禁止让卡尾操作随正文长度漂移。
+- 禁止使用大面积彩色状态底、整卡低透明度、无文字色点或只能靠颜色判断的状态。
+- 禁止瀑布流、自由高度卡片、`align-items: start`、无固定高度图表、长内容撑破父级和零散 margin 拼接。
+- 禁止默认后台质感、无依据装饰、强玻璃效果、厚重投影和与主题不一致的组件库默认样式。
+
+### 错误与正确
+
+- 错误：将摘要值写成一行散落文本；正确：内容存在时使用独立等高指标卡带，以标签—数值—说明建立节奏。
+- 错误：把状态放在卡片正文任意位置；正确：媒体卡状态固定在左上安全区，正文只承载可比较信息。
+- 错误：禁用对象整卡透明到不可读；正确：使用媒体覆盖层、灰度、状态文字和操作限制共同表达。
+- 错误：所有页面强制使用四列卡片；正确：内容契约成立且宽度足够时使用媒体网格，否则按 PRD 回退到合适结构。
+- 错误：主题色铺满页面；正确：主题色只连接主操作、关键焦点与选中状态，大部分表面保持中性。
+- 错误：卡片随内容自由增高形成瀑布流；正确：同类卡片固定高度、网格拉伸，长内容内部滚动或截断。
+- 错误：快捷入口使用默认彩色宫格；正确：仅由 PRD 触发并继承白色表面、弱边界与柔焦图标底。
+
+### AI 使用提示
+
+先读取 PRD，再解析 `{{PRIMARY_COLOR}}` 并生成全部实际 Brand Token。所有真实页面先继承全应用 Token 和基础组件语言，再按各自内容契约选择可落地的视觉记忆点。媒体卡构图只作为视觉配方，不用于枚举项目不存在的对象、状态或指标；主题色只替换色相，不改变画布、层级、构图、密度、形状和组件机制。内容契约满足时重点保护独立指标带、线性分类轨、封面叠加状态卡、失活退场和卡尾锚定；不满足时迁移表面、排版和间距语言，不创造业务内容。
+
+### 交付自检
+
+- [ ] 全部页面内容和模块是否来自 PRD，而非模板来源？
+- [ ] 独立指标卡是否等高，且标签、主值、变化说明层级清楚？
+- [ ] 线性分类轨是否无大面积底色，并保留可滚动、键盘焦点和短下划线？
+- [ ] 媒体卡是否保持固定比例、状态安全区、上下分区和双端卡尾？
+- [ ] 失活对象是否保留可读结构，并通过文字、图标和覆盖层共同表达？
+- [ ] 卡尾操作是否通过 `margin-top: auto` 保持同排对齐？
+- [ ] 每个视觉记忆组件是否都有 `content_contract`、`render_policy`、迁移目标和无匹配回退策略？
+- [ ] 固定列数、摘要带和模块顺序是否有内容契约，且未被写成全页面硬规则？
+- [ ] 未被 PRD 触发的组件是否没有强行渲染，视觉迁移是否没有新增业务内容？
+- [ ] 主操作、关键焦点和选中状态是否共享 `--color-brand1-6`，其余表面保持中性？
+- [ ] `application-global` 的变量名和消费语义是否稳定，具体值是否依据当前主题生成？
+- [ ] `custom-page` 是否逐项通过全局语义复用检查，没有同值同义或角色重叠的重复 Token？
+- [ ] 文字对比是否保持 `text1-4` 高于 `text1-10`、`text1-10` 高于 `text1-3`？
+- [ ] `themeId`、描述、视觉 DNA、组件标题和正文总结是否没有绑定默认色相？
+- [ ] `themeId` 和描述是否只表达视觉机制，没有把某种页面任务或业务领域写成主题身份？
+- [ ] 描述中的中等密度、弱边界、轻阴影和小面积主题色是否与 Token 和正文一致？
+- [ ] 是否没有建立适用/不适用产品形态清单，页面类型只用于视觉解读？
+- [ ] 所有真实页面是否共享全应用 Token 和基础组件语言，视觉记忆点是否只按内容契约条件式落地？
+- [ ] `{{PAGE_APPLICATIONS}}` 是否只展开项目真实存在的页面？
+- [ ] 主题同色演变是否由 `--color-brand1-6` 派生；独立分类色是否角色明确；平台状态色是否未在 `custom-page` 重复声明？
+- [ ] 所有灰色 Token 是否已分类；固定中性灰是否满足三通道相等，主题灰是否声明种子、基底与比例？
+- [ ] 同类面板是否等高对齐，图表是否有固定高度，长内容是否在内部处理？
+- [ ] 快捷入口如有生成，是否由 PRD 触发并继承本主题的组件语言？
+- [ ] hover、active、focus、loading、empty、error、disabled、selected 是否完整且不引发布局跳动？
+- [ ] 移动端折叠、触控目标、键盘访问、对比度、非纯颜色状态与 reduced motion 是否达标？
+- [ ] 最终项目 `design.md` 是否替换全部占位符并写入七个 Brand Token 的实际色值？