openyida 2026.9.21 → 2026.9.22-beta.1

package/yida-skills/skills/yida-design/references/style-design-selection.md

@@ -0,0 +1,137 @@
+# 生成 design.md 规则
+
+本文件用于为完整应用提供一份应用级 `prd/<项目名>/design.md` 生成规则。生成 `design.md` 时必须先从业务上下文判断内容兼容性，再推演视觉策略，选择唯一设计风格，最后按主题色适配所选风格并输出自包含的视觉设计契约。
+
+业务对象、字段、表单、流程、导航、权限和页面结构都从当前 PRD 读取；内置风格只提供视觉 DNA、布局机制、组件机制、质量锚点和主题换肤规则，不提供业务内容。指标卡、图表、表格、待办、筛选器、右侧栏、状态标签、快捷入口、时间线等常见内容组件只能判断风格是否可承载，不得作为设计风格的强匹配理由。
+`style-designs/_design-md-template.md` 是最终结构参考，只约束章节结构、字段完整度和描述粒度；内置 style-design 风格只提供可复用视觉母体。真实项目的配色、业务内容、资源关系、页面结构和实现交接必须从当前 PRD、应用主题和用户要求生成。
+
+## 何时使用
+
+| 页面类型 | 动作 |
+| --- | --- |
+| 工作台 / 门户首页 / 首页 | 选择工作台类设计风格，生成 workbench 场景配方，把当前业务的视觉 DNA 落到首屏、指标、入口和侧栏 |
+| 列表 / 管理页 / 处理台 | 选择能承载筛选、列表、详情抽屉和状态标签的设计风格，生成 list 场景配方 |
+| 看板 / 驾驶舱 / 经营分析 | 选择能承载指标、图表、排行、异常和管理层摘要的设计风格，生成 dashboard 场景配方 |
+| 官网 / 品牌页 / 落地页 | 当前 analytic workbench 风格通常不适合；按当前业务价值路径、素材清单、CTA 和 `assetStrategy` 生成 landing 场景配方 |
+| 普通表单 / 流程表单 | 沿用应用级 `design.md` 的主题和平台原生表单，不单独选择设计文件 |
+
+## 输入
+
+从整理后的用户需求、主题系统和页面结构中提取：
+
+| 信号 | 示例 |
+| --- | --- |
+| 用户任务 | 判断状态、处理待办、追踪阶段、分析趋势、管理明细、展示成果、汇报经营 |
+| 业务对象 | 订单、客户、库存、项目、任务、审批、线索、合同、员工、门店 |
+| 内容兼容性 | 当前页面是否需要指标、图表、表格、待办、筛选、右侧栏、时间线、卡片目录、媒体卡片 |
+| 布局兼容性 | 均衡工作台、重点舞台、右栏工作区、指挥台、趋势看板、进度叙事、目录网格 |
+| 视觉策略 | 柔和办公、深色重点舞台、蓝色洞察、规整边框、清爽右栏、高能指挥、进度叙事、目录浏览 |
+| 视觉强调 | 所有模块均衡、核心指标强强调、行动队列强强调、趋势图强强调、右侧洞察强强调、目录筛选强强调 |
+| 交互重心 | 搜索筛选、待办处理、下钻详情、多入口跳转、趋势比较、异常处置 |
+| 数据形态 | KPI、队列、趋势、排行、明细表、日程、快捷入口、预警、阶段节点 |
+| 页面区块 | 顶部概览、搜索筛选、表格、图表、右侧详情、表单入口、空态 |
+| 主题证据 | 用户指定品牌、当前应用主题、工作区主题、业务气质、是否页面级沉浸或应用导航隐藏 |
+| 圆角、密度与呼吸感 | 默认圆润高密且有呼吸感；卡片 padding >20px，卡片间 gap <20px，卡片圆角 0-32px，控件 10-14px，状态摘要 64-88px，列表行 44-56px；区块间距用于分组和扫读，不用于撑空白 |
+
+## 选择流程
+
+1. 读取 [style-designs/registry.md](style-designs/registry.md)，了解可选设计风格和选择规则。
+2. 读取 [style-designs/_design-md-template.md](style-designs/_design-md-template.md)，用它作为最终 `design.md` 的结构基准。
+3. 从业务上下文推演 `inferredUserTask`、`contentCompatibility`、`layoutCompatibility`、`visualStyleIntent`、`visualEmphasis` 和 `interactionFocus`。用户通常不会主动描述视觉风格，agent 必须自行推演。
+4. 先用内容组件做兼容性筛选：设计风格必须能承载当前页面已有内容，但不得因为“有指标卡 / 有图表 / 有表格 / 有右侧栏 / 有时间线”等公共组件直接胜出。
+5. 再用视觉策略选择风格：判断页面需要柔和均衡、重点舞台、趋势洞察、行动指挥、常驻右栏、规整边框、进度叙事、目录浏览还是视觉陈列。
+6. 对 registry 中的风格做硬过滤：纯表单、长文、品牌营销、移动端单任务等页面不选择明显不合适的分析工作台风格。不要因用户未明确说“深色”而过滤 `dark-stage-analytic-dashboard`；它是浅色画布上的局部深色重点舞台，不等于全页面深色沉浸。
+7. 按 `视觉策略 45% + 视觉强调与密度 15% + 布局兼容性 15% + 内容兼容性 15% + 多样性或用户偏好 10%` 选择唯一风格。内容和布局合计不得超过 30%，避免常见工作台内容把结果塌缩到通用风格。
+8. 做内部近邻比较：生成 `design.md` 前必须在工作记忆中比较最相近的 2-4 个风格；选择 `soft-analytic-workbench` 时必须确认其他更强视觉策略证据不足。近邻比较是选择校验，不默认写入最终 `design.md`。
+9. 读取被选中的 `style-designs/*.md`，抽取 `visual_dna`、`theme_adaptation`、`layout_stability`、`quality_anchors`、`components` 和 `modules`。
+10. 根据主题系统中的主题色来源和主题色输入，按所选风格的 `theme_adaptation` 执行换肤：替换 `replace_tokens`，派生 `derive_tokens`，保留不与用户整体配色冲突的 `preserve_tokens` 和结构性 `visual_dna.invariant`。
+11. 读取 [visual-scaffold-recipes.md](visual-scaffold-recipes.md)，把当前页面组合映射到统一 `visualScaffold` 规则。
+12. 读取 [page-quality-gates.md](page-quality-gates.md)，把质量门禁补进 `acceptanceChecks`。
+13. 需要判断详略时参考 `_design-md-template.md` 的字段粒度、registry 的输出记录和所选风格的质量锚点；只学习“写到多细”，不复制示例业务、色盘、字段、页面顺序或组件组合。
+14. 根据行业、品牌、业务情绪、应用主题和用户偏好生成配色。不要固定使用蓝色、绿色、紫色或任何预置色，也不要复用历史样例色盘。
+15. 写入 `densityRule`、`breathingRule`、`spacing` 和 `rounded` 的具体数值。默认业务工具页使用 high density + 圆润形状 + 有呼吸感的分组节奏：页面边距 20-28px，卡片与卡片 gap 12-18px 且必须小于 20px，卡片 padding 默认 22-28px 且必须大于 20px，卡片圆角范围 0-32px；只有品牌展示、官网或用户明确要求舒展时才降低密度。
+16. 写入 `surfaceContrast`：页面背景与卡片背景必须形成明显层次对比，不可相近或相同；默认浅色背景保持清爽，但必须按“白色/浅色背景 + 有边框卡片、浅灰背景（如 `#F3F4F6`）+ 白色无边框卡片、浅彩色背景 + 白色无边框卡片、渐变背景 + 玻璃感卡片”四类方案选择。
+17. 写入 `emptyStateRecipe` 和 `acceptanceChecks`：空态必须是薄行、面板内提示或右侧上下文，不使用 160px 以上大白卡；状态摘要不能是横跨整页且内容稀疏的空矩形。
+18. 页面主按钮、链接、选中态、重点标签和图表主序列跟随 `yida-design` 确定的应用主题。
+
+## 内容兼容与视觉策略
+
+公共内容组件只判断风格是否可承载，不决定最终风格。最终设计风格必须由视觉策略、视觉强调和近邻比较决定。
+
+| 常见内容信号 | 只能用于判断 | 不得直接推出 |
+| --- | --- | --- |
+| 指标卡 / KPI | 是否需要状态摘要、核心舞台、趋势入口、行动队列入口 | `soft-analytic-workbench` |
+| 图表 | 是否需要轻量分布、大趋势图、进度图、纹理化洞察 | dashboard 风格 |
+| 表格 / 明细 | 是否需要主工作区、详情沉淀、搜索结果、记录日志 | analytic 风格 |
+| 右侧栏 | 是辅助上下文、常驻洞察栏还是行动队列 | rail 风格 |
+| 时间线 / 阶段 | 是核心叙事骨架还是普通进度提示 | timeline 风格 |
+| 筛选器 / 标签 | 是主导航还是表格辅助条件 | catalog 风格 |
+
+| 视觉策略 | 适用判断 |
+| --- | --- |
+| `soft_neutral` | 低噪声、均衡、朴素办公感；没有强主舞台、强趋势、强指挥或强目录诉求 |
+| `dark_accent_stage` | 浅色页面中需要一个局部深色重点舞台，突出核心判断、风险、目标或经营结果 |
+| `blue_insight` | 需要更强分析感、趋势感、数据洞察感，主图表或趋势面板应成为记忆点 |
+| `bordered_enterprise` | 需要规整、边界清晰、系统化的管理后台气质 |
+| `teal_fresh_rail` | 需要清爽、服务感或常驻右侧洞察栏，右栏是页面稳定结构而非临时补充 |
+| `action_command` | 需要今日行动、命令入口、推荐处理、任务队列或高能量指挥感 |
+| `progress_narrative` | 需要阶段推进、周期节奏、服务进度或里程碑叙事 |
+| `catalog_browse` | 需要以筛选、比较、挑选、卡片目录或视觉浏览作为主体验 |
+
+选择 `soft_neutral` / `soft-analytic-workbench` 时必须满足：其他视觉策略都没有更强证据。它是均衡办公风格，不是所有工作台的默认答案。
+
+## 主题色应用规则
+
+主题色是所选设计风格的换肤输入，不是重新选择视觉风格的理由。生成 `design.md` 时必须先读取所选风格的 `theme_adaptation`，将主题色应用到 `replace_tokens` 和 `derive_tokens`，保留结构、材质与组件机制；`preserve_tokens` 中的固定灰阶不能覆盖用户确认的整体配色要求。
+
+硬规则：
+
+1. 换 hue，不换 DNA。
+2. 换 token，不换结构。
+3. 换强调色，不改画布、面板、中性色、布局机制。
+4. 平台导航可见时，页面主按钮、链接、选中态、重点标签和图表主序列默认跟随应用主题 `--color-brand1-*`。
+5. 风格默认色只在没有任何主题证据时作为 `template-default` 兜底，并必须写入 `themeProfile.themeColorSource`。
+
+## 主题关系判定
+
+| 场景 | 主题关系写法 | 落地规则 |
+| --- | --- | --- |
+| 平台导航 / 应用菜单可见 | `跟随应用主题` | 主按钮、链接、选中态、重点标签、图表主序列使用应用主题；风格色相仅作为辅助色、浅背景、图表第二序列或装饰色 |
+| 生成色盘与应用主题不同 | `应用主题主导，生成色彩作为辅助色` | 保留所选风格的视觉 DNA、布局、密度和组件语言，不把页面主色改成与应用主题冲突的色相 |
+| 用户要求换肤 / 导航也一起变色 / 指定新品牌色 | `应用级换肤` | 由 `yida-design` 生成应用主题文件并记录导航主题与布局 |
+| 沉浸页、应用导航隐藏后的自绘壳、独立品牌页、活动页、公开落地页 | `跟随应用主题的差异化页面` | 主色仍消费应用主题，差异通过布局、材质、素材、构图和辅助视觉表达 |
+
+## 输出字段
+
+`design.md` 是应用级视觉设计契约，PRD 的每个自定义展示页只引用它：
+
+| 字段 | 写入位置 | 写法 |
+| --- | --- | --- |
+| baseDesignSource | design.md | `references/style-designs/<selected-style>.md`；所有内置风格不适用时才写 `generated-from-business-context` |
+| styleDesignSelection | design.md | 只记录风格来源、视觉策略、视觉强调、选中风格、实现约束和置信度；候选比较和排除理由默认不写入 |
+| themeAdaptationResult | design.md | 记录输入主题色、换肤策略、替换 token、保留 DNA 和保留机制 |
+| designFile | PRD pageSpecHandoff | `prd/<项目名>/design.md` |
+| designRefs | PRD pageSpecHandoff | 当前页面引用 design.md 的章节 ID |
+| 风格理由 | PRD 页面章节 | 一句话说明为什么适合当前页面任务；不复制完整视觉规则 |
+| 视觉 DNA | design.md | 所有页面都必须保留的 2-5 个视觉 DNA |
+| 页面区块 | PRD 页面章节 | 当前业务页面实际需要的区块 |
+| 主题关系 | design.md + PRD 摘要 | 写“跟随应用主题”；若需要新主色，写明应用主题文件、`themeColor` 和 `navTheme` 的交付方案 |
+| visualScaffold | design.md | layoutRecipe、surfaceMap、sectionRhythm、densityRule、breathingRule、componentRecipe、emptyStateRecipe、acceptanceChecks |
+| rounded / spacing / breathing | design.md | 大圆角、紧凑间距和呼吸节奏的具体数值，不能只写“圆润”“留白舒适”“有呼吸感” |
+
+## 实现交接
+
+实现阶段读取 PRD 中的 `designFile/designRefs`，再读取当前项目 `design.md`，并按以下方式落地：
+
+| design.md 内容 | 实现落点 |
+| --- | --- |
+| styleDesignSelection | 理解视觉母体来源和禁止偏移点；实现阶段不再回读风格目录 |
+| themeAdaptationResult | CSS token、按钮、链接、选中态、图表辅助色和应用主题文件交付 |
+| 视觉 DNA | 首屏、指标、列表、图表、侧栏、状态标签 |
+| 布局配方 | 页面栅格、区域顺序、区块比例 |
+| 组件规则 | 卡片、表格、按钮、筛选、抽屉、标签 |
+| 状态规则 | 空态、加载、错误、无权限、禁用、选中 |
+| visualScaffold | 实现阶段先按槽位填业务内容，再写样式；任何页面实现不得跳过 |
+| rounded / spacing / densityRule / breathingRule | 使用 `YidaCodeCanvas` 组件实现页面时的 CSS、antd token、列表行高、面板内距、卡片 gap、空态高度和首屏分组节奏；实现阶段必须保持卡片 padding >20px、卡片 gap <20px、卡片圆角 0-32px |
+
+业务文案、字段、表单入口、流程处理、详情链接和导航顺序都从 PRD 读取；当前项目 `design.md` 提供所有页面必须遵守的视觉 DNA、布局、组件样式、主题 token 和状态规则。

package/yida-skills/skills/yida-design/references/style-designs/_design-md-template.md

@@ -0,0 +1,185 @@
+---
+version: alpha
+name: <风格或系统名称，可用英文 slug>
+description: <内容中立的中文用途说明>
+design_id: <design-id>
+design_status: draft
+scenes: [工作台, 首页]
+density: high
+layout: <preferred archetype or custom layout；工作台默认紧凑双栏/三栏，不用低密大卡墙>
+tone: <视觉气质关键词>
+tags: [<业务领域>, <角色>, <数据形态>]
+avoid: [<不适合场景>]
+visual_dna:
+  - name: <可识别的设计记忆点名称>
+    confidence: observed
+    evidence: <参考图中可见的中文证据>
+    rule: <生成新 UI 时必须如何保留它>
+    implementation_hooks: [<布局/组件/token/CSS/图表钩子>]
+    failure_mode: <缺失该 DNA 时会出现的风格漂移>
+colors:
+  bg-outer: "#..."
+  surface: "#..."
+  surface-muted: "#..."
+  text-primary: "#..."
+  text-secondary: "#..."
+  border-subtle: "#..."
+  brand: "#..."
+surfaceContrast:
+  rule: <页面背景与卡片背景必须有明显层次，不可相近或相同>
+  pairing: <white-bg-bordered-card / gray-bg-white-card / tinted-bg-white-card / gradient-bg-glass-card>
+  pageBackground: <浅色背景色或渐变>
+  cardBackground: <白色、浅色或玻璃 rgba>
+  cardBorder: <白色/浅色背景时必须写边框；浅灰/浅彩背景时可 none；玻璃卡片写半透明边框>
+  forbidden: <浅底白卡无边框、同色背景同色卡片、只靠弱阴影区分层级>
+typography:
+  page-title:
+    fontFamily: "..."
+    fontSize: ...
+    fontWeight: ...
+    lineHeight: ...
+    letterSpacing: 0
+spacing:
+  page-x: <默认 20-28；平台导航可见时避免过宽边距>
+  page-y: <默认 20-28；首屏内容要上移，避免标题下大空白>
+  grid-gap: <默认 12-18；卡片和卡片的 gap 必须小于 20>
+  section-gap: <默认 14-18；用于跨区块呼吸和分组，不用于撑空白>
+  card-x: <默认 22-28；卡片 padding 必须大于 20>
+  card-y: <默认 22-28；卡片 padding 必须大于 20；列表/摘要类不是卡片时可更紧>
+  row-y: <默认 10-12>
+breathingRule:
+  rhythm: <说明首屏主区、列表区、右侧上下文和操作条之间如何形成呼吸节奏>
+  sectionGap: <默认 14-18；卡片之间的 gap 必须小于 20>
+  innerPadding: <默认 22-28；卡片 padding 必须大于 20，控件和文字不能贴边>
+  compression: <内容不足时压缩高度/转薄行/补上下文动作，不用空白撑版面>
+rounded:
+  sm: <默认 0-8>
+  md: <默认 10-16>
+  card: <范围 0-32；业务卡片默认 20-24>
+  panel: <范围 0-32；主容器/抽屉/重点面板默认 22-32>
+  pill: 999
+components:
+  card:
+    backgroundColor: "{colors.surface}"
+    rounded: "{rounded.card}"
+    padding: "{spacing.card-y} {spacing.card-x}"
+  empty-state:
+    density: compact
+    maxHeight: <默认 88-120；列表内薄空态，不使用大空白白卡>
+  metric-strip:
+    height: <默认 64-88；内容对齐，不做横跨全屏的空矩形>
+inferred_modules:
+  quick_actions:
+    required_for: [工作台, 仪表盘, 管理后台, 运营首页]
+    confidence: inferred
+    rule: <基于整体视觉风格推断的快捷入口区域规则>
+---
+
+# <风格名称> DESIGN.md
+
+## 1. 总览
+
+用 2-4 个短段落说明可复用设计意图。保持内容中立，只说明气质、信息密度、主要用途和页面组织方式。
+
+## 2. 适用场景
+
+列出适合和不适合使用该风格的场景。
+
+## 3. 视觉氛围
+
+说明运营工具感/表达型、克制/戏剧化、密度、留白、专业度等取向。
+
+默认业务工具页应是“圆润、紧凑、有呼吸感、有内容承接”的现代 B 端界面：圆角默认偏大，信息密度默认 high，留白服务阅读、分组和扫读节奏，不用于撑页面面积。只有官网、品牌页、展示页或用户明确要求舒展时，才把 density 调到 medium / comfortable。
+
+## 4. 视觉 DNA / 设计母体
+
+提取 2-5 个内容替换后仍必须保留的设计记忆点。每个 DNA 必须包含名称、证据、规则、实现钩子、失败表现和置信度。
+
+## 5. 色彩角色
+
+用表格列出 token、取值和用途，覆盖背景、表面、文字、边框、品牌色、状态色和图表序列。
+
+## 6. 字体规则
+
+定义字体栈、字号体系、行高、字重和数字排版。不要使用 viewport width 缩放字体，默认 `letter-spacing: 0`。
+
+## 7. 布局原则
+
+说明页面壳、最大宽度、网格比例、间距、内容顺序和中性槽位关系。
+
+工作台、门户首页、管理后台和运营首页必须优先使用紧凑状态摘要、任务/记录列表、右侧上下文和高频动作条。页面布局要有呼吸感：主区、右栏、工具条和列表之间保留稳定间距，文字和按钮不贴边，区块之间有清晰分组；首屏不能出现超宽但内容很少的 KPI 横框、孤立大空态卡或右侧大面积留白；空白区域必须用最近记录、动态、风险、负责人、下一步动作、配置提示或薄空态行动承接。
+
+## 8. 层级与深度
+
+说明深度来自平面表面、边框、阴影、色调层、毛玻璃、覆盖层或空间效果，并说明哪些地方不该使用阴影。
+
+页面背景与卡片背景必须形成明显层次对比，不可相近或相同。背景色默认保持浅色调，确保整体视觉清爽，同时与卡片之间有清晰层次：白色/浅色背景使用有边框卡片；浅灰色背景（如 `#F3F4F6`）使用白色无边框卡片；浅彩色背景（如浅蓝、浅暖灰）使用白色无边框卡片；渐变色背景使用玻璃感卡片。不得输出浅底白卡无边框、同色背景同色卡片，或只靠弱阴影区分层级。
+
+## 9. 形状
+
+定义圆角尺度，以及每个尺度分别用于哪里。
+
+默认形状语言是圆润但不低密：卡片圆角范围 0-32px，业务卡片/面板默认 20-24px，主面板/抽屉/重点区域默认 22-32px，按钮和输入框 10-14px，标签/状态胶囊 999px。卡片 padding 必须大于 20px，卡片之间的 gap 必须小于 20px；圆角服务形状性格，不用空白卡撑版面。
+
+## 10. 组件样式
+
+覆盖顶部栏、按钮、图标按钮、卡片/面板、输入框/选择器、表格/列表、图表、标签/徽标、快捷入口、空状态、弹窗/浮层。相关组件要包含 default、hover、active、focus、disabled、loading、selected、error 等状态。
+
+组件默认密度和呼吸规则必须写到可实现数值：状态摘要 64-88px 高，动作条 40-56px 高，列表行 44-56px，高频按钮 36-40px，卡片 padding 默认 22-28px 且必须大于 20px，卡片之间的 gap 默认 12-18px 且必须小于 20px。空状态默认嵌在列表/面板内部，使用薄提示行、补录/刷新/新建动作和简短说明；不得用 160px 以上大白卡只显示“暂无数据”。
+
+## 11. 快捷入口区域
+
+工作台、仪表盘、管理后台或运营首页必须输出快捷入口区域规则。说明位置、容器、条目、数量、图标、文字、状态、响应式、与 DNA 的关系和禁止漂移。
+
+## 12. 页面结构配方
+
+提供 2-4 个使用中性槽位的布局配方，例如 `primary_metrics`、`quick_actions`、`trend_panel`、`detail_table`、`status_note`。
+
+## 13. 状态与交互
+
+列出 hover、active、focus、loading、empty、error、disabled、selected、mobile 和 reduced motion 规则。
+
+## 14. 响应式
+
+定义断点和布局折叠方式。说明文字适配、工具栏换行、表格横向滚动和触控目标尺寸。
+
+## 15. 可访问性
+
+要求对比度、focus 状态、纯图标控件标签、非纯颜色状态表达、键盘可访问和 reduced motion。
+
+## 16. 实现适配
+
+只包含相关适配，例如 CSS 变量、Ant Design ConfigProvider、Tailwind class 映射、Yida / YidaCodeCanvas 容器重置或 React 组件建议。
+
+## 17. 必须包含
+
+列出硬性正向要求。每个视觉 DNA 都必须作为明确必选规则出现。
+
+## 18. 禁止项
+
+列出硬性负向约束，覆盖会抹掉每个 DNA 的错误做法。
+
+## 19. 错误 vs 正确
+
+用短对照保护视觉 DNA 和快捷入口风格继承。
+
+## 20. Agent 使用提示
+
+提供一段简洁提示词，明确告诉 AI 如何使用该 DESIGN.md。必须说明视觉 DNA 在内容替换后也要保留。
+
+## 21. 交付自检清单
+
+- [ ] 源图业务内容已抽象为中性槽位。
+- [ ] 文档识别了 2-5 个视觉 DNA / 设计母体。
+- [ ] 每个 DNA 都包含证据、规则、实现钩子、失败表现和置信度。
+- [ ] DNA 已同步进入必须包含、禁止项、错误 vs 正确、Agent 使用提示和最终自检。
+- [ ] 若页面类型是工作台、仪表盘、管理后台或运营首页，文档已包含快捷入口区域。
+- [ ] 可推断的 token 已给出具体值。
+- [ ] 页面背景与卡片背景已形成明显层次对比，并写清 `surfaceContrast` 搭配方案。
+- [ ] 组件包含状态规则，而不只是静态外观。
+- [ ] 已明确卡片圆角范围：0-32px，并说明业务卡片、主面板、控件和状态胶囊各自取值。
+- [ ] 已明确紧凑密度默认值：状态摘要、动作条、列表行、空态高度、卡片 padding >20px、卡片 gap <20px 都有数值范围。
+- [ ] 已明确呼吸感规则：跨区块间距、组内内距、贴边修正和内容不足时的压缩/补充策略都有数值或规则。
+- [ ] 工作台/首页首屏没有超宽空 KPI 框、大空态白卡、无内容右栏或靠 margin/padding 撑出的空白。
+- [ ] 响应式和可访问性规则完整。
+- [ ] 不依赖原截图，也能指导生成一个新页面。

package/yida-skills/skills/yida-design/references/style-designs/aqua-service-progress-dashboard.md

@@ -0,0 +1,242 @@
+---
+version: alpha
+template_type: visual_dna_preset
+name: aqua-service-progress-dashboard
+design_id: aqua-service-progress-dashboard
+design_status: draft
+description: "适用于服务进度、资源状态、媒体支持、位置上下文和报告分析混合呈现的水青色柔和仪表盘视觉 DNA。"
+scenes: [dashboard, service_portal, operations_overview, progress_tracking, resource_center]
+density: medium
+layout: airy_multi_panel_service_dashboard
+tone: [soft, reassuring, spacious, data_rich, aqua]
+tags: [aqua_dashboard, gradient_status_card, media_panel, map_context, progress_chart]
+avoid: [dense_crm_table, finance_terminal, dark_big_screen, marketing_landing_page]
+selection:
+  best_for: [服务门户, 进度追踪页, 资源状态页, 支持中心, 综合概览页]
+  user_intent: [查看今日更新, 追踪进度, 进入服务资源, 查看位置或空间上下文, 阅读报告趋势]
+  visual_tone: [大留白, 水青强调, 柔和浅色卡片, 渐变状态卡, 可信服务感]
+  avoid_for: [纯表格后台, 高压交易页面, 暗色大屏, 密集筛选管理台]
+policies:
+  prd_first: true
+  content_neutral: true
+  no_source_locked_content: true
+  quick_actions_rendered_by_prd: true
+  theme_can_change_hue_not_dna: true
+visual_dna:
+  - id: airy_status_header
+    name: 宽松状态头部
+    confidence: observed
+    hooks: [large_title, subtitle, compact_metric_badges, circular_icon_badges]
+    invariant: [左侧用超大轻字重标题和副标题建立亲和感, 右侧使用横向小指标徽章, 指标图标在白色圆形浮层中, 顶部不使用厚导航条]
+    variable: [标题内容, 指标数量, 图标语义, 指标单位, 主题色]
+  - id: schedule_or_timeline_column
+    name: 左侧日程时间列
+    confidence: observed
+    hooks: [date_strip, vertical_time_axis, time_pill, schedule_card, participant_stack]
+    invariant: [左侧卡片内有淡化日期条, 纵向时间轴连接时间胶囊, 内容卡使用浅色底和圆角, 行内可放头像或操作图标]
+    variable: [时间粒度, 节点内容, 数量, 附加人员或对象, 跳转操作]
+  - id: progress_score_panel
+    name: 大号进度评分面板
+    confidence: observed
+    hooks: [large_percent, segmented_progress_bar, mini_metric_tiles, striped_remaining_area]
+    invariant: [中心主面板突出一个大号进度数字, 下方用分段条和斜线剩余区表示进程, 右侧或上方嵌入浅色小指标 tile]
+    variable: [数值格式, 分段数量, 指标 tile 数量, 进度语义, 主题色]
+  - id: gradient_status_chart_card
+    name: 渐变状态图表卡
+    confidence: observed
+    hooks: [gradient_card, translucent_bar_chart, white_text, rounded_chart_bars]
+    invariant: [右上强调卡使用水平方向渐变和大圆角, 白色文本叠加, 内部图表为半透明圆角竖条, 周期标签低对比]
+    variable: [状态标题, 周期粒度, 图表数值, 强调色相, 辅助信息]
+  - id: media_and_context_tiles
+    name: 媒体与上下文卡片
+    confidence: observed
+    hooks: [media_card, overlay_badge, map_panel, floating_label, area_chart]
+    invariant: [下方区域用媒体卡、面积图和地图/空间上下文面板混合, 叠加信息使用毛玻璃或半透明胶囊, 所有面板保持大圆角与轻阴影]
+    variable: [媒体类型, 图表类型, 空间背景, 浮层内容, 操作入口]
+theme_adaptation:
+  accepts_theme_color: true
+  strategy: replace_hue_preserve_visual_mechanism
+  input: theme_color
+  replace_tokens: [tokens.colors.brand, tokens.colors.brand-strong, tokens.colors.brand-soft, tokens.colors.focus-ring]
+  derive_tokens: [tokens.colors.gradient-start, tokens.colors.gradient-end, tokens.colors.chart-fill, tokens.colors.timeline-active, tokens.colors.overlay-tint]
+  preserve_tokens: [tokens.colors.bg-page, tokens.colors.surface, tokens.colors.surface-muted, tokens.colors.text-primary, tokens.colors.text-secondary, tokens.colors.border-subtle]
+  rules:
+    - theme_color_only_changes_accent_hue
+    - preserve_airiness_and_soft_surfaces
+    - keep_gradient_card_as_single_accent_area
+    - do_not_tint_all_panels
+tokens:
+  colors:
+    bg-page: "#F7F8F8"
+    surface: "#FFFFFF"
+    surface-muted: "#EFF8F8"
+    text-primary: "#2A2E32"
+    text-secondary: "#6B7178"
+    text-tertiary: "#A6ADB4"
+    border-subtle: "#E8EEEE"
+    brand: "#39B9B5"
+    brand-strong: "#087D8D"
+    brand-soft: "#E7F7F6"
+    gradient-start: "#7EDFD2"
+    gradient-end: "#08738A"
+    chart-fill: "#55BFC1"
+    timeline-active: "#3DBDB9"
+    overlay-tint: "rgba(255,255,255,0.68)"
+    focus-ring: "#9BE5DF"
+  typography:
+    fontFamily: "Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, sans-serif"
+    page-title: { fontSize: 52, fontWeight: 400, lineHeight: 1.1, letterSpacing: 0 }
+    panel-title: { fontSize: 30, fontWeight: 500, lineHeight: 1.25, letterSpacing: 0 }
+    hero-number: { fontSize: 72, fontWeight: 500, lineHeight: 1, letterSpacing: 0 }
+    body: { fontSize: 16, fontWeight: 400, lineHeight: 1.45, letterSpacing: 0 }
+    caption: { fontSize: 13, fontWeight: 400, lineHeight: 1.35, letterSpacing: 0 }
+  spacing:
+    page-x-desktop: 36
+    page-y-desktop: 40
+    grid-gap: 32
+    panel-x: 32
+    panel-y: 28
+  rounded:
+    panel: 28
+    card: 22
+    control: 999
+    media: 22
+  shadow:
+    panel: "0 12px 40px rgba(33,65,68,0.05)"
+    floating: "0 12px 28px rgba(33,65,68,0.12)"
+layout_stability:
+  grid_align_items: stretch
+  panel_display: flex-column
+  panel_height: "100%"
+  overflow_policy: internal_scroll_or_truncate
+  spacing_policy: parent_gap_only
+  equal_height_rule: same_row_panels_align
+  fixed_height_tokens:
+    left_schedule_panel: 500px
+    media_panel: 440px
+    progress_panel: 500px
+    gradient_card: 500px
+    report_panel: 430px
+    context_panel: 430px
+quality_anchors:
+  - id: soft_status_header_badges
+    name: 柔和状态头与圆形指标徽章
+    required_when: PRD 提供页面问候、状态摘要或顶部指标
+    rule: 顶部使用大标题和右侧圆形图标指标，不得变成密集导航栏。
+  - id: vertical_time_axis_card
+    name: 纵向时间轴卡
+    required_when: PRD 包含预约、阶段、节点或时段安排
+    rule: 时间胶囊、细轴线、浅色内容卡和头像/操作细节必须共同出现。
+  - id: segmented_progress_score
+    name: 分段进度评分
+    required_when: PRD 包含进度、评分、完成度或路径推进
+    rule: 大号数字、分段进度条、小指标 tile 和斜纹剩余区共同构成主视觉。
+  - id: aqua_gradient_status_card
+    name: 水青渐变状态卡
+    required_when: PRD 有一个需要突出展示的计划、状态或周期目标
+    rule: 渐变卡只能作为单个强调区域，内部图表半透明，文本白色。
+  - id: contextual_media_tiles
+    name: 媒体与上下文混合卡
+    required_when: PRD 包含媒体、地图、空间、资源位置或服务入口
+    rule: 媒体和上下文卡使用叠加胶囊、浮动标签和轻阴影，不做平铺图片。
+quality_floor:
+  target: polished_sample_level
+  avoid_default_admin_feel: true
+  requires_visible_micro_detail: true
+  minimum_craft_signals: [large_light_title, circular_metric_badges, vertical_time_axis, segmented_progress, gradient_status_card, translucent_overlays]
+components:
+  panel: { surface: tokens.colors.surface, rounded: tokens.rounded.panel, shadow: tokens.shadow.panel }
+  gradient_card: { rounded: tokens.rounded.panel, background: "linear-gradient(135deg, tokens.colors.gradient-start, tokens.colors.gradient-end)" }
+  time_pill: { height: 42, rounded: tokens.rounded.control, surface: tokens.colors.brand }
+  progress_bar: { height: 88, segmentRadius: 12, remainingPattern: diagonal_stripes }
+  media_card: { rounded: tokens.rounded.media, overlay: tokens.colors.overlay-tint }
+modules:
+  quick_actions:
+    confidence: inferred
+    render_policy: prd_only
+    placement: media_or_context_panel_overlay_or_independent_section
+    item_count: 2-6
+  timeline:
+    confidence: observed
+    render_policy: prd_only
+    placement: left_column
+  context_panel:
+    confidence: observed
+    render_policy: prd_only
+    placement: right_lower_or_supporting_panel
+---
+
+# Aqua Service Progress Dashboard DESIGN.md
+
+> front matter 是给流程和生成器读取的结构化配置；人工评审优先阅读下方正文。若两者冲突，风格选择、换色策略和 token 数值以前面的 YAML 为准，使用边界和业务取舍以正文为准。
+
+## 1. 快速理解
+
+这个视觉 DNA 是水青色、宽松、柔和的综合服务仪表盘。它把顶部状态徽章、左侧时间轴、中心进度评分、右侧渐变状态卡、下方媒体和上下文面板组合在一起。PRD 决定内容是否存在，DESIGN.md 只规定视觉承载方式。主题色可以改变水青色相，但不能破坏大留白、柔和面板、渐变强调卡和叠加浮层机制。
+
+## 2. 使用边界
+
+适用于服务门户、进度追踪、资源支持、位置上下文、报告概览等页面。不适合纯表格后台、高压交易台、密集筛选页面或暗色大屏。禁止复制视觉材料中的具体行业、人员、项目、指标名、数值、位置名和服务文案。
+
+## 3. 设计风格选择与换色逻辑
+
+当 PRD 有“状态摘要 + 时间节点 + 进度评分 + 资源入口 + 上下文地图或媒体”的结构时选择该风格。主题色只改写徽章、时间轴、渐变卡、进度条和图表填充；白色面板、浅背景、低饱和边界、大圆角和透明叠层保持。
+
+## 4. 视觉 DNA
+
+`airy_status_header` 用大标题和圆形指标徽章建立温和入口。`schedule_or_timeline_column` 用淡化日期条、时间胶囊和轴线承载节点。`progress_score_panel` 用超大数字、分段条和浅色 tile 形成主状态。`gradient_status_chart_card` 作为单个高饱和视觉锚点。`media_and_context_tiles` 用媒体、面积图、地图或空间上下文增强沉浸感。
+
+## 5. 视觉品质基线
+
+顶部指标必须轻，不要做成厚重 KPI 卡。时间轴要有线、胶囊、内容卡和操作细节。进度面板不能只放百分比，要有分段条和斜纹剩余区。渐变卡只能出现为单一强调区域。媒体和上下文卡要使用浮层，不要裸图。
+
+## 6. 布局规则
+
+```text
+page_shell
+  airy_status_header
+  dashboard_grid
+    left_column: timeline + media
+    center_column: progress + report
+    right_column: gradient_status + context
+```
+
+桌面端三列，中心列最宽。主 grid `align-items: stretch`。每个面板 `height: 100%`、`min-width: 0`、`min-height: 0`、`display: flex`。媒体和地图固定比例，内部浮层绝对定位但不能遮挡核心内容。
+
+## 7. PRD 槽位映射
+
+| PRD 内容类型 | 视觉槽位 | 规则 |
+| --- | --- | --- |
+| 页面状态和摘要指标 | `airy_status_header` | 大标题加圆形徽章，不做厚卡。 |
+| 时间、阶段、排程 | `timeline` | 纵向轴线和时间胶囊。 |
+| 进度、评分、完成度 | `progress_score_panel` | 大数字、分段条、小 tile。 |
+| 重点计划或目标 | `gradient_status_card` | 单个渐变强调卡。 |
+| 媒体、地图、资源上下文 | `media_and_context_tiles` | 使用叠加浮层和空间感。 |
+
+## 8. 组件规则
+
+面板圆角 28px，阴影柔和。图标用线性水青图标。时间胶囊高度 42px。进度条分段圆角，剩余区斜纹。渐变卡文本使用白色，图表半透明。媒体卡浮层用毛玻璃或半透明底。面积图使用淡网格和渐变填充。
+
+## 9. 响应式与可访问性
+
+桌面三列，中宽两列，移动单列。媒体卡保持固定宽高比。触控目标不小于 44px。渐变卡对比度必须达标。状态不能只靠颜色，需要文字、图标或形状。
+
+## 10. 禁止项
+
+- 禁止复制具体行业内容、人员、数值、地点、项目和服务文案。
+- 禁止把主题色铺满所有卡片。
+- 禁止多个高饱和渐变卡争抢层级。
+- 禁止裸媒体、裸地图、默认图表。
+- 禁止自由高度卡片和零散 margin。
+
+## 11. Agent 使用提示
+
+先读 PRD，确认是否有时间节点、进度、资源入口和上下文信息。再应用主题色，保留水青柔和机制。不要凭空创建媒体、地图或状态卡；只有 PRD 支持时才渲染。实现必须保留大留白、圆形徽章、分段进度、渐变锚点和叠加浮层。
+
+## 12. 交付自检清单
+
+- 内容是否来自 PRD。
+- 是否保留适用的时间轴、进度、渐变卡、媒体上下文 DNA。
+- 主题色是否只改写强调区域。
+- 是否避免默认后台感。
+- 布局、高度、响应式和可访问性是否达标。