openyida 2026.8.13 → 2026.8.14

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (53) hide show
  1. package/docs/capabilities.md +21 -5
  2. package/package.json +1 -1
  3. package/yida-skills/SKILL.md +90 -184
  4. package/yida-skills/references/execution-rules.md +8 -0
  5. package/yida-skills/references/resource-context.md +81 -0
  6. package/yida-skills/references/routing-supplement.md +27 -0
  7. package/yida-skills/references/setup-and-env.md +31 -36
  8. package/yida-skills/skills/yida-app/SKILL.md +48 -294
  9. package/yida-skills/skills/yida-app/references/common-issues.md +49 -0
  10. package/yida-skills/skills/yida-app/workflow/step-1-resource-context.md +63 -0
  11. package/yida-skills/skills/yida-app/workflow/step-2-design.md +40 -0
  12. package/yida-skills/skills/yida-app/workflow/step-3-create-or-reuse-app.md +34 -0
  13. package/yida-skills/skills/yida-app/workflow/step-4-forms-processes.md +74 -0
  14. package/yida-skills/skills/yida-app/workflow/step-5-seed-records.md +44 -0
  15. package/yida-skills/skills/yida-app/workflow/step-6-main-page.md +35 -0
  16. package/yida-skills/skills/yida-app/workflow/step-7-page-code.md +50 -0
  17. package/yida-skills/skills/yida-app/workflow/step-8-publish-navigation.md +42 -0
  18. package/yida-skills/skills/yida-app/workflow/step-9-output-finish.md +82 -0
  19. package/yida-skills/skills/yida-create-form-page/SKILL.md +4 -3
  20. package/yida-skills/skills/yida-design/SKILL.md +9 -9
  21. package/yida-skills/skills/yida-design/references/page-quality-gates.md +1 -1
  22. package/yida-skills/skills/yida-design/references/style-design-selection.md +29 -29
  23. package/yida-skills/skills/yida-design/references/style-designs/aqua-service-progress-dashboard.md +3 -3
  24. package/yida-skills/skills/yida-design/references/style-designs/blue-insight-operations-dashboard.md +3 -3
  25. package/yida-skills/skills/yida-design/references/style-designs/blue-productivity-insight-workbench.md +3 -3
  26. package/yida-skills/skills/yida-design/references/style-designs/command-filter-card-console.md +4 -4
  27. package/yida-skills/skills/yida-design/references/style-designs/contrast-command-analytics-workbench.md +4 -4
  28. package/yida-skills/skills/yida-design/references/style-designs/dark-stage-analytic-dashboard.md +8 -8
  29. package/yida-skills/skills/yida-design/references/style-designs/filterable-card-catalog.md +5 -5
  30. package/yida-skills/skills/yida-design/references/style-designs/green-timeline-progress-workbench.md +3 -3
  31. package/yida-skills/skills/yida-design/references/style-designs/registry.md +30 -30
  32. package/yida-skills/skills/yida-design/references/style-designs/soft-analytic-workbench.md +4 -4
  33. package/yida-skills/skills/yida-design/references/style-designs/soft-blue-grid-analytic-dashboard.md +1 -1
  34. package/yida-skills/skills/yida-design/references/style-designs/soft-bordered-analytic-workbench.md +4 -4
  35. package/yida-skills/skills/yida-design/references/style-designs/soft-curated-filter-gallery.md +4 -4
  36. package/yida-skills/skills/yida-design/references/style-designs/soft-modular-analytic-workbench.md +5 -5
  37. package/yida-skills/skills/yida-design/references/style-designs/soft-progress-analytics-workbench.md +4 -4
  38. package/yida-skills/skills/yida-design/references/style-designs/soft-timeline-analytics-workbench.md +8 -8
  39. package/yida-skills/skills/yida-design/references/style-designs/teal-rail-analytics-workbench.md +8 -8
  40. package/yida-skills/skills/yida-design/workflow/output-design.md +25 -19
  41. package/yida-skills/skills/yida-design/workflow/output-prd.md +11 -6
  42. package/yida-skills/skills/yida-design/workflow/step-1-positioning.md +1 -1
  43. package/yida-skills/skills/yida-design/workflow/step-2-theme-system.md +1 -1
  44. package/yida-skills/skills/yida-design/workflow/step-3-information-architecture.md +1 -1
  45. package/yida-skills/skills/yida-design/workflow/step-5-visual-states.md +10 -10
  46. package/yida-skills/skills/yida-design/workflow/step-6-handoff.md +2 -2
  47. package/yida-skills/skills/yida-flash-note-to-prd/SKILL.md +31 -33
  48. package/yida-skills/skills/yida-flash-note-to-prd/references/flash-note-prd-template.md +1 -1
  49. package/yida-skills/skills/yida-form-detail/SKILL.md +7 -7
  50. package/yida-skills/skills/yida-login/SKILL.md +32 -31
  51. package/yida-skills/skills/yida-publish-page/SKILL.md +9 -6
  52. package/yida-skills/references/development-rules.md +0 -85
  53. package/yida-skills/skills/yida-app/references/app-build-contract.md +0 -141
@@ -192,7 +192,7 @@ modules:
192
192
 
193
193
  # Soft Curated Filter Gallery DESIGN.md
194
194
 
195
- > front matter 是给流程和生成器读取的结构化配置;人工评审优先阅读下方正文。若两者冲突,模板选择、换色策略和 token 数值以前面的 YAML 为准,使用边界和业务取舍以正文为准。
195
+ > front matter 是给流程和生成器读取的结构化配置;人工评审优先阅读下方正文。若两者冲突,风格选择、换色策略和 token 数值以前面的 YAML 为准,使用边界和业务取舍以正文为准。
196
196
 
197
197
  ## 1. 快速理解
198
198
 
@@ -200,13 +200,13 @@ modules:
200
200
 
201
201
  ## 2. 使用边界
202
202
 
203
- 该模板适合对象有可视预览、图标或可抽象媒体区域的页面。若 PRD 的主要任务是录入、审批、复杂表格分析或长文阅读,应选择其他视觉母体。
203
+ 该风格适合对象有可视预览、图标或可抽象媒体区域的页面。若 PRD 的主要任务是录入、审批、复杂表格分析或长文阅读,应选择其他视觉母体。
204
204
 
205
205
  PRD 决定内容结构,DESIGN.md 决定 UI 风格。不要为了套用分类、角标、收藏、评分或范围筛选而创造 PRD 没有的功能。所有字段、标题、数值、分类名称和动作名称都必须来自 PRD。
206
206
 
207
- ## 3. 模板选择与换色逻辑
207
+ ## 3. 设计风格选择与换色逻辑
208
208
 
209
- 当用户目标是“浏览一批候选对象并按偏好筛选”,且对象之间需要视觉比较时选择该模板。它强调轻商业感、柔和留白、图片/预览优先和清楚的筛选路径。
209
+ 当用户目标是“浏览一批候选对象并按偏好筛选”,且对象之间需要视觉比较时选择该风格。它强调轻商业感、柔和留白、图片/预览优先和清楚的筛选路径。
210
210
 
211
211
  主题色只改写选中分类、勾选框、选中选项、范围控件活动段、角标、focus ring 和少量关键动作。背景、卡片、筛选面板、媒体区、中性文字和浅边框必须保持中性。不要让主题色污染整页,否则会破坏清爽的画廊气质。
212
212
 
@@ -232,7 +232,7 @@ modules:
232
232
 
233
233
  # Soft Modular Analytic Workbench DESIGN.md
234
234
 
235
- > front matter 是给流程和生成器读取的结构化配置;人工评审优先阅读下方正文。若两者冲突,模板选择、换色策略和 token 数值以前面的 YAML 为准,使用边界和内容取舍以正文为准。
235
+ > front matter 是给流程和生成器读取的结构化配置;人工评审优先阅读下方正文。若两者冲突,风格选择、换色策略和 token 数值以前面的 YAML 为准,使用边界和内容取舍以正文为准。
236
236
 
237
237
  ## 1. 快速理解
238
238
 
@@ -248,11 +248,11 @@ PRD 负责内容、功能、信息架构、业务优先级、模块存在性和
248
248
 
249
249
  不要为了套用槽位而凭空创造 PRD 未要求的摘要、指标、图表、快捷入口或表格。PRD 没有量化数据时,不强造数字;PRD 没有趋势数据时,可以用同等完成度的主内容面板、摘要列表或空状态替代。
250
250
 
251
- 最终界面不得复用模板来源中的具体业务字段、示例数据、人名、机构名、分类名称或页面专属文案。所有文案、字段、数据和操作必须来自 PRD 或真实产品上下文。
251
+ 最终界面不得复用风格来源中的具体业务字段、示例数据、人名、机构名、分类名称或页面专属文案。所有文案、字段、数据和操作必须来自 PRD 或真实产品上下文。
252
252
 
253
- ## 3. 模板选择与换色逻辑
253
+ ## 3. 设计风格选择与换色逻辑
254
254
 
255
- 当页面需要在一个首屏中同时呈现多块摘要、少量高频操作、趋势洞察和可检索明细时,优先选择该模板。它特别适合信息密度中高、需要反复查看和操作的工作台,而不是低密度展示页。
255
+ 当页面需要在一个首屏中同时呈现多块摘要、少量高频操作、趋势洞察和可检索明细时,优先选择该风格。它特别适合信息密度中高、需要反复查看和操作的工作台,而不是低密度展示页。
256
256
 
257
257
  默认强调色不是视觉 DNA。主题色流程只能替换 `brand`、`brand-soft`、`brand-deep`、`focus-ring`、图表强调色和状态辅助色的色相。背景、表面、浅边框、中性文字、大圆角、等高网格、内嵌图表舱和表格行结构必须保持不变。
258
258
 
@@ -384,7 +384,7 @@ PRD 负责内容、功能、信息架构、业务优先级、模块存在性和
384
384
 
385
385
  先读取 PRD,确认内容、模块和数据是否存在;再读取主题色输入,按 `theme_adaptation` 替换强调色;最后应用本视觉 DNA。不要硬套槽位,不要为了还原某种构图而凭空创造 PRD 未要求的内容。
386
386
 
387
- 实现时优先搭建稳定网格、等高面板和固定尺寸图表容器,再填充组件。指标卡、图表舱、进度细节和明细表是该模板的品质锚点,凡是 PRD 条件满足就必须做完整状态和微细节。
387
+ 实现时优先搭建稳定网格、等高面板和固定尺寸图表容器,再填充组件。指标卡、图表舱、进度细节和明细表是该风格的品质锚点,凡是 PRD 条件满足就必须做完整状态和微细节。
388
388
 
389
389
  主题色只改变强调色相和派生辅助色,不改变浅灰画布、白色面板、中性文字、浅边框、大圆角、等高布局和小面积强调机制。交付前必须按自检清单确认视觉品质没有退化为普通后台。
390
390
 
@@ -216,13 +216,13 @@ modules:
216
216
 
217
217
  # Soft Progress Analytics Workbench DESIGN.md
218
218
 
219
- > front matter 是给流程和生成器读取的结构化配置;人工评审优先阅读下方正文。若两者冲突,模板选择、换色策略和 token 数值以前面的 YAML 为准,使用边界和业务取舍以正文为准。
219
+ > front matter 是给流程和生成器读取的结构化配置;人工评审优先阅读下方正文。若两者冲突,风格选择、换色策略和 token 数值以前面的 YAML 为准,使用边界和业务取舍以正文为准。
220
220
 
221
221
  ## 1. 快速理解
222
222
 
223
223
  这是一个柔和浅色、信息密度中高、强调进度与周期判断的分析工作台视觉 DNA。它用左侧优先级指标栈建立首屏判断,用右侧时序节点和趋势面板承接分析,再用底部工具化明细表完成检索与下钻。
224
224
 
225
- PRD 决定内容、模块和业务优先级;DESIGN.md 只决定这些内容如何被视觉化。默认强调色可以被主题色替换,但只能替换小面积强调色、图表主序列、focus ring 和状态辅助色,不能改变浅底、白色面板、柔和边框、稳定网格和精致微细节。最终界面必须像手工打磨的数据产品,而不是默认后台模板。
225
+ PRD 决定内容、模块和业务优先级;DESIGN.md 只决定这些内容如何被视觉化。默认强调色可以被主题色替换,但只能替换小面积强调色、图表主序列、focus ring 和状态辅助色,不能改变浅底、白色面板、柔和边框、稳定网格和精致微细节。最终界面必须像手工打磨的数据产品,而不是默认后台套路。
226
226
 
227
227
  ## 2. 使用边界
228
228
 
@@ -232,9 +232,9 @@ PRD 决定内容、模块和业务优先级;DESIGN.md 只决定这些内容如
232
232
 
233
233
  禁止复用任何视觉材料中的具体业务字段、示例数据、对象名、机构名、分类名或页面专属文案。槽位名称只表示视觉承载方式,不表示必须创造对应业务内容。
234
234
 
235
- ## 3. 模板选择与换色逻辑
235
+ ## 3. 设计风格选择与换色逻辑
236
236
 
237
- 选择该模板时,先判断 PRD 是否有以下信息拓扑:一个高优先级总览、多个辅助指标、可按时间或阶段理解的节点、可视化趋势,以及需要检索或排序的明细记录。若这些结构中的三项以上成立,该模板通常优先级较高。
237
+ 选择该风格时,先判断 PRD 是否有以下信息拓扑:一个高优先级总览、多个辅助指标、可按时间或阶段理解的节点、可视化趋势,以及需要检索或排序的明细记录。若这些结构中的三项以上成立,该风格通常优先级较高。
238
238
 
239
239
  主题色只改写 `brand`、`brand-strong`、`brand-soft`、`focus-ring`、图表主序列、选中节点和状态辅助色。页面背景、白色面板、中性文字、浅边框、阴影、圆角尺度、面板等高、图表轻网格、底部明细表壳都必须保持。
240
240
 
@@ -218,7 +218,7 @@ modules:
218
218
 
219
219
  # Soft Timeline Analytics Workbench DESIGN.md
220
220
 
221
- > front matter 是给流程和生成器读取的结构化配置;人工评审优先阅读下方正文。若两者冲突,模板选择、换色策略和 token 数值以前面的 YAML 为准,使用边界和业务取舍以正文为准。
221
+ > front matter 是给流程和生成器读取的结构化配置;人工评审优先阅读下方正文。若两者冲突,风格选择、换色策略和 token 数值以前面的 YAML 为准,使用边界和业务取舍以正文为准。
222
222
 
223
223
  ## 1. 快速理解
224
224
 
@@ -226,21 +226,21 @@ modules:
226
226
 
227
227
  PRD 决定页面内容、字段、模块和业务优先级;本文件只决定 UI 风格、布局机制和组件质感。默认强调色可以被主题色替换,但只能改变小面积强调色相,不能改变白底面板、轻边框、大圆角、稳定网格和数据组件的组织方式。
228
228
 
229
- 适合需要扫读状态、追踪时序、查看趋势和检索明细的工具型页面。不适合强叙事、强媒体、暗色大屏或单一表单页面。编码结果必须保留可见微细节,不能退化成普通后台模板。
229
+ 适合需要扫读状态、追踪时序、查看趋势和检索明细的工具型页面。不适合强叙事、强媒体、暗色大屏或单一表单页面。编码结果必须保留可见微细节,不能退化成普通后台套路。
230
230
 
231
231
  ## 2. 使用边界
232
232
 
233
233
  PRD 负责内容、功能、信息架构、模块是否存在、字段是否展示、数据优先级和交互流程。本文件负责视觉 DNA、布局气质、组件形态、密度、状态、响应式和可访问性。
234
234
 
235
- 不要为了套用本模板而凭空创造 PRD 未要求的业务内容。没有核心摘要时,不渲染 `primary_summary`;没有时序节点时,不渲染 `timeline_panel`;没有趋势数据时,用同等品质的主内容面板替代 `trend_panel`;没有明细记录时,不强行生成表格。
235
+ 不要为了套用本风格而凭空创造 PRD 未要求的业务内容。没有核心摘要时,不渲染 `primary_summary`;没有时序节点时,不渲染 `timeline_panel`;没有趋势数据时,用同等品质的主内容面板替代 `trend_panel`;没有明细记录时,不强行生成表格。
236
236
 
237
- 禁止复用模板来源中的具体业务字段、示例数据、机构名、分类名称、页面专属文案或特殊图标语义。所有文本、数据、图标和状态都必须来自 PRD 或真实数据契约。
237
+ 禁止复用风格来源中的具体业务字段、示例数据、机构名、分类名称、页面专属文案或特殊图标语义。所有文本、数据、图标和状态都必须来自 PRD 或真实数据契约。
238
238
 
239
- ## 3. 模板选择与换色逻辑
239
+ ## 3. 设计风格选择与换色逻辑
240
240
 
241
- 当用户意图包含“概览、追踪、趋势、明细、状态管理、运营工作台”时,可以选择该模板。页面需要同时容纳摘要信息和结构化数据时最适合;如果只是单纯展示文章、相册、营销转化或全屏可视化,应选择其他视觉 DNA。
241
+ 当用户意图包含“概览、追踪、趋势、明细、状态管理、运营工作台”时,可以选择该风格。页面需要同时容纳摘要信息和结构化数据时最适合;如果只是单纯展示文章、相册、营销转化或全屏可视化,应选择其他视觉 DNA。
242
242
 
243
- 不要把默认强调色理解成 DNA。该模板的 DNA 是白底面板、左窄右宽的不对称网格、摘要卡强层级、时间轴节点、轻网格折线图和工具化表格。主题色只改写 `brand`、`brand-soft`、`chart-primary`、`timeline-active`、状态辅助色和 `focus-ring`。
243
+ 不要把默认强调色理解成 DNA。该风格的 DNA 是白底面板、左窄右宽的不对称网格、摘要卡强层级、时间轴节点、轻网格折线图和工具化表格。主题色只改写 `brand`、`brand-soft`、`chart-primary`、`timeline-active`、状态辅助色和 `focus-ring`。
244
244
 
245
245
  背景、表面、中性文字、浅边框、阴影、大圆角、面板层级、图表空心节点、深色 tooltip 和表格结构不能被主题色改变。主题色不得铺满页面背景,也不得把普通白色卡片变成大面积彩色卡片。
246
246
 
@@ -346,7 +346,7 @@ PRD 负责内容、功能、信息架构、模块是否存在、字段是否展
346
346
 
347
347
  ## 11. Agent 使用提示
348
348
 
349
- 先读取 PRD,确认真实模块、字段、数据和交互;再读取主题色输入,改写强调色 token;最后应用本视觉 DNA。不要硬套槽位,不要凭空创造内容,不要复用任何模板来源中的具体文本或数据。
349
+ 先读取 PRD,确认真实模块、字段、数据和交互;再读取主题色输入,改写强调色 token;最后应用本视觉 DNA。不要硬套槽位,不要凭空创造内容,不要复用任何风格来源中的具体文本或数据。
350
350
 
351
351
  实现时优先保留左侧指标栈、时间轴面板、趋势图面板和明细表外壳这些视觉机制。若 PRD 缺少对应内容,用同等品质的中性组件替代,而不是生成假内容。主题色只替换小面积强调色、图表主序列、选中态、状态辅助色和 focus ring,不能改变浅底、白色面板、轻边框、大圆角和稳定网格。
352
352
 
@@ -4,7 +4,7 @@ template_type: visual_dna_preset
4
4
  name: teal-rail-analytics-workbench
5
5
  design_id: teal-rail-analytics-workbench
6
6
  design_status: draft
7
- description: 可被流程选择和换色的双栏数据工作台视觉 DNA 模板,适合高密度摘要、分析图表、右侧洞察栏和明细列表组合界面。
7
+ description: 可被流程选择和换色的双栏数据工作台视觉 DNA 风格,适合高密度摘要、分析图表、右侧洞察栏和明细列表组合界面。
8
8
  scenes: [工作台, 首页, 仪表盘, 管理后台, 列表管理页]
9
9
  density: medium-high
10
10
  layout: split_main_with_right_insight_rail
@@ -178,7 +178,7 @@ modules:
178
178
 
179
179
  # Teal Rail Analytics Workbench DESIGN.md
180
180
 
181
- > front matter 是给流程和生成器读取的结构化配置;人工评审优先阅读下方正文。若两者冲突,模板选择、换色策略和 token 数值以前面的 YAML 为准,使用边界和业务取舍以正文为准。
181
+ > front matter 是给流程和生成器读取的结构化配置;人工评审优先阅读下方正文。若两者冲突,风格选择、换色策略和 token 数值以前面的 YAML 为准,使用边界和业务取舍以正文为准。
182
182
 
183
183
  ## 1. 快速理解
184
184
 
@@ -198,13 +198,13 @@ PRD 是内容、功能、信息架构、业务优先级和模块是否存在的
198
198
 
199
199
  当 PRD 与本文的槽位示例不一致时,以 PRD 为准。不要为了套用 `primary_metrics`、`right_insight_rail`、`ranked_items`、`detail_table` 或 `quick_actions` 而凭空创造业务内容;只需把 PRD 中真实存在的模块映射到最接近的视觉槽位。
200
200
 
201
- 禁止复用模板来源中的业务名词、人名、指标名、示例数据和页面专属文案。所有业务内容必须来自 PRD。
201
+ 禁止复用风格来源中的业务名词、人名、指标名、示例数据和页面专属文案。所有业务内容必须来自 PRD。
202
202
 
203
- ## 3. 模板选择与换色逻辑
203
+ ## 3. 设计风格选择与换色逻辑
204
204
 
205
- 这个文件是视觉 DNA preset,不是一次性最终稿。上游流程应先根据用户场景、需求、信息密度、页面类型和主题色分析结果,判断是否选择本模板。
205
+ 这个文件是视觉 DNA preset,不是一次性最终稿。上游流程应先根据用户场景、需求、信息密度、页面类型和主题色分析结果,判断是否选择本风格。
206
206
 
207
- 适合选择本模板的信号:用户需要管理首页、数据总览、状态追踪、排行洞察、分析图表和明细列表共存。真正的 DNA 是左宽右栏、白底细边框卡片、深墨与主题强调色的数据纹理、分层图表和图标化明细,而不是默认青绿色本身。
207
+ 适合选择本风格的信号:用户需要管理首页、数据总览、状态追踪、排行洞察、分析图表和明细列表共存。真正的 DNA 是左宽右栏、白底细边框卡片、深墨与主题强调色的数据纹理、分层图表和图标化明细,而不是默认青绿色本身。
208
208
 
209
209
  主题色改写时,只允许改写强调色相关 token,例如 `brand`、`brand-soft`、`focus-ring`、图表序列色、徽标色和进度条填充色。`deep-accent` 应从主题色派生为足够深、可读的对比色;如果主题色过浅,必须生成更深的同色系或近似墨色作为深色数据层。
210
210
 
@@ -234,7 +234,7 @@ PRD 是内容、功能、信息架构、业务优先级和模块是否存在的
234
234
 
235
235
  ## 5. 视觉品质基线
236
236
 
237
- 这个模板要求编码结果达到精致数据工作台的品质下限。只使用白底、卡片、表格还不够,必须保留足够的微观设计信号。
237
+ 这个风格要求编码结果达到精致数据工作台的品质下限。只使用白底、卡片、表格还不够,必须保留足够的微观设计信号。
238
238
 
239
239
  - 若 PRD 包含多个核心状态、摘要或分类,使用顶部四卡摘要状态条:一行等高白底卡片,标签弱、数值强,卡片之间间距稳定。
240
240
  - 若 PRD 包含排行、重点对象、辅助摘要或小趋势,使用持续可见的右侧洞察栏:竖线分隔、独立宽度、纵向 section、轻操作链接和细分割线。
@@ -312,7 +312,7 @@ page_shell
312
312
 
313
313
  ## 10. 禁止项
314
314
 
315
- - 禁止从模板来源或 DESIGN.md 示例中复制具体业务字段、示例数据、人名、机构名、分类名称或页面专属文案。
315
+ - 禁止从风格来源或 DESIGN.md 示例中复制具体业务字段、示例数据、人名、机构名、分类名称或页面专属文案。
316
316
  - 禁止让 DESIGN.md 覆盖 PRD 的内容决策;PRD 没有的业务模块不要强行生成。
317
317
  - 禁止把当前主题色铺满页面背景、摘要卡底色或大面积面板。
318
318
  - 禁止把当前主题色误当成视觉 DNA;主题色只改色相,不改左宽右栏、白底细边框、分层图表和图标化列表机制。
@@ -1,8 +1,8 @@
1
1
  # 输出:design.md
2
2
 
3
- > Step 6 自检通过后,写入 `prd/<项目名>/design.md`。`design.md` 是应用级 UI 视觉设计系统,结构以本文件为准,并参考 `references/style-designs/_design-md-template.md` 的字段完整度:先记录 style-design 模板选择依据和主题换肤结果,再写可复用视觉 DNA、token、布局、组件、状态和自检,最后在“实现适配”里写清宜搭运行时主题契约。PRD 只写主题色和风格摘要,完整 UI 设计以本文件为准。
3
+ > 本文件定义完整应用的 `prd/<项目名>/design.md` 输出格式。`design.md` 是应用级 UI 视觉设计系统,结构以本文件为准,并参考 `references/style-designs/_design-md-template.md` 的字段完整度:先记录设计风格选择依据和主题换肤结果,再写可复用视觉 DNA、token、布局、组件、状态和自检,最后在“实现适配”里写清宜搭运行时主题契约。PRD 只写主题色和风格摘要,完整 UI 设计以本文件为准。
4
4
 
5
- 最终 `design.md` 的依据分四层:结构依据本文件和 `_design-md-template.md`;视觉 DNA、布局机制、组件机制和换肤规则依据选中的 `style-designs/*.md`;业务内容、页面区块、数据来源和操作路径依据当前 PRD;主题 token 依据 Step 2 的主题色来源和所选模板的 `theme_adaptation`。
5
+ 最终 `design.md` 的依据分四层:结构依据本文件和 `_design-md-template.md`;视觉 DNA、布局机制、组件机制和换肤规则依据选中的设计风格文件;业务内容、页面区块、数据来源和操作路径依据当前 PRD;主题 token 依据 Step 2 的主题色来源和所选风格的 `theme_adaptation`。
6
6
 
7
7
  ## design.md 输出格式
8
8
 
@@ -13,7 +13,7 @@ name: <应用或风格系统英文 slug>
13
13
  description: <内容中立的中文用途说明>
14
14
  design_id: <design-id>
15
15
  design_status: ready
16
- baseDesignSource: references/style-designs/<selected-template>.md
16
+ baseDesignSource: references/style-designs/<selected-style>.md
17
17
  styleDesignSelection:
18
18
  inferredUserTask: <判断 / 处理 / 追踪 / 分析 / 展示 / 汇报>
19
19
  inferredInformationTopology: <摘要优先 + 趋势承接 + 明细落地>
@@ -21,11 +21,11 @@ styleDesignSelection:
21
21
  requiredVisualDNA:
22
22
  - <dna-id>
23
23
  selectedStyleDesign:
24
- name: <template-name>
25
- source: references/style-designs/<selected-template>.md
26
- reason: <为什么该模板最适合当前业务>
24
+ name: <style-name>
25
+ source: references/style-designs/<selected-style>.md
26
+ reason: <为什么该风格最适合当前业务>
27
27
  rejectedStyleDesigns:
28
- - <template-name>: <为什么不选>
28
+ - <style-name>: <为什么不选>
29
29
  selectionConfidence: <high / medium / low>
30
30
  scenes: [工作台, 列表, 详情, 看板]
31
31
  density: <high / medium / comfortable;业务工具页默认 high>
@@ -56,6 +56,9 @@ themeAdaptationResult:
56
56
  - <画布 / 面板 / 布局 / 深色舞台 / 右侧栏等>
57
57
  yidaThemeRuntime:
58
58
  globalThemeInjection: <style#yida-global-theme / customThemeStyle.tokens / none>
59
+ formRuntimeInjection: style#yida-global-theme
60
+ formDetailStyleInjection: style#yida-form-detail-style
61
+ themeConsistency: app, custom pages, normal forms, process forms, submission pages, and formDetail pages share the same themeProfile tokens
59
62
  styleElementId: yida-global-theme
60
63
  helperRef: yida-canvas-custom-page/references/theme-runtime-helpers.md
61
64
  injectTargets: [currentDocument, sameOriginParentDocuments]
@@ -169,13 +172,13 @@ inferred_modules:
169
172
 
170
173
  用 2-4 个短段落说明可复用设计意图。保持内容中立,只说明气质、信息密度、主要用途和页面组织方式。
171
174
 
172
- ## 2. 模板选择依据
175
+ ## 2. 设计风格选择依据
173
176
 
174
- 说明 `styleDesignSelection` 的推演过程:当前业务的用户任务、信息拓扑、交互重心、必需视觉 DNA、选中模板和拒绝模板。选择理由必须来自业务结构和视觉 DNA 命中,不得按行业、颜色或主观偏好直接套模板。
177
+ 说明 `styleDesignSelection` 的推演过程:当前业务的用户任务、信息拓扑、交互重心、必需视觉 DNA、选中风格和排除风格。选择理由必须来自业务结构和视觉 DNA 命中,不得按行业、颜色或主观偏好直接套风格。
175
178
 
176
179
  ## 3. 主题色与换肤结果
177
180
 
178
- 说明 `themeProfile` 和 `themeAdaptationResult`:主题色来源、是否命中平台主题 key、是否允许传给 `create-app/update-app --theme`、如何替换模板 `replace_tokens`、派生 `derive_tokens`、保留 `preserve_tokens` 和 `visual_dna.invariant`。必须明确“换 hue,不换 DNA;换 token,不换结构”。
181
+ 说明 `themeProfile` 和 `themeAdaptationResult`:主题色来源、是否命中平台主题 key、是否允许传给 `create-app/update-app --theme`、如何替换所选风格的 `replace_tokens`、派生 `derive_tokens`、保留 `preserve_tokens` 和 `visual_dna.invariant`。必须明确“换 hue,不换 DNA;换 token,不换结构”。
179
182
 
180
183
  ## 4. 适用场景
181
184
 
@@ -189,7 +192,7 @@ inferred_modules:
189
192
 
190
193
  ## 6. 视觉 DNA / 设计母体
191
194
 
192
- 从选中 style-design 模板和当前业务结构中提取 2-5 个内容替换后仍必须保留的设计记忆点。每个 DNA 必须包含名称、证据、规则、实现钩子、失败表现和置信度;证据必须同时说明业务触发条件和模板来源。
195
+ 从所选设计风格和当前业务结构中提取 2-5 个内容替换后仍必须保留的设计记忆点。每个 DNA 必须包含名称、证据、规则、实现钩子、失败表现和置信度;证据必须同时说明业务触发条件和风格来源。
193
196
 
194
197
  ## 7. 色彩角色
195
198
 
@@ -219,7 +222,7 @@ inferred_modules:
219
222
 
220
223
  ## 9. 布局原则
221
224
 
222
- 说明页面壳、最大宽度、网格比例、间距、内容顺序和中性槽位关系。布局机制应来自选中模板的 `layout_stability`、`modules` 和当前 PRD 页面结构,不得凭空增加 PRD 未要求的图表、右侧栏、时间轴或深色舞台。
225
+ 说明页面壳、最大宽度、网格比例、间距、内容顺序和中性槽位关系。布局机制应来自所选风格的 `layout_stability`、`modules` 和当前 PRD 页面结构,不得凭空增加 PRD 未要求的图表、右侧栏、时间轴或深色舞台。
223
226
 
224
227
  工作台、门户首页、管理后台和运营首页必须写清紧凑状态摘要、任务/记录列表、右侧上下文、高频动作条和薄空态行动。首屏不能出现超宽但内容稀疏的 KPI 横框、孤立大空态卡或右侧大面积留白;空白区域必须用最近记录、动态、风险、负责人、下一步动作、配置提示或薄空态行动承接。
225
228
 
@@ -308,6 +311,9 @@ inferred_modules:
308
311
  | 自定义色盘 | `shouldPassCreateAppTheme=false`,创建应用时不传 `theme/colour` |
309
312
  | 页面注入 | 自定义色盘、隐藏导航沉浸页、页面级独立主题使用 `style#yida-global-theme` |
310
313
  | 应用级换肤 | 需要全应用换肤时写 `customThemeStyle.tokens`,页面运行态统一注入 `style#yida-global-theme` |
314
+ | 表单运行态 | 普通表单、流程表单、提交页和 formDetail 详情页必须消费同一套应用主题 token;表单 JS 固定注入 `style#yida-global-theme` |
315
+ | 详情页样式 | formDetail 页面必须由同一个 `openyidaThemeDidMount` 条件注入 `style#yida-form-detail-style`,不得只完成页面主题而漏掉详情页样式 |
316
+ | 主题一致性 | 自定义页面、普通表单、流程表单、提交页、formDetail 详情页和应用主题色必须一致;抽屉 iframe 打开表单时同步父页面当前主题 tokens |
311
317
  | 注入目标 | 当前窗口 `document` 和所有同源可访问父级窗口 `document`;跨域父级静默跳过 |
312
318
  | Helper | Code Canvas 和普通 JSX 都复制 `yida-canvas-custom-page/references/theme-runtime-helpers.md`,使用其中的 `collectYidaThemeDocuments` 收集当前文档和同源父级文档,不要临场重写 |
313
319
  | 样式 ID | 固定为 `yida-global-theme`,重复执行只更新同一个 style |
@@ -338,7 +344,7 @@ inferred_modules:
338
344
 
339
345
  ## 20. 禁止项
340
346
 
341
- 列出硬性负向约束,覆盖会抹掉每个 DNA 的错误做法。必须包含:不得按行业或颜色直接套模板;不得为了还原模板凭空创造 PRD 未要求的模块;自定义主题名或任意色值不得传给 `create-app --theme`;不得只向当前页面 `document.head` 注入主题而漏掉同源父级 iframe。
347
+ 列出硬性负向约束,覆盖会抹掉每个 DNA 的错误做法。必须包含:不得按行业或颜色直接套风格;不得为了还原风格凭空创造 PRD 未要求的模块;自定义主题名或任意色值不得传给 `create-app --theme`;不得只向当前页面 `document.head` 注入主题而漏掉同源父级 iframe。
342
348
 
343
349
  ## 21. 错误 vs 正确
344
350
 
@@ -346,21 +352,21 @@ inferred_modules:
346
352
 
347
353
  | 错误 | 正确 |
348
354
  | ------------------------------------ | ---------------------------------------------------------------------- |
349
- | 看到绿色业务就选 `teal-rail` | 先推演用户任务、信息拓扑和 requiredVisualDNA,再选模板;绿色只用于换肤 |
350
- | 为了套时间轴模板新增不存在的阶段模块 | PRD 没有阶段/里程碑时拒绝时间轴模板 |
355
+ | 看到绿色业务就选 `teal-rail` | 先推演用户任务、信息拓扑和 requiredVisualDNA,再选风格;绿色只用于换肤 |
356
+ | 为了套时间轴风格新增不存在的阶段模块 | PRD 没有阶段/里程碑时排除时间轴风格 |
351
357
  | 自定义色盘仍传 `--theme myBrand` | 不传应用 theme,在页面复制 helper 注入 `style#yida-global-theme` |
352
358
  | 只在当前 iframe 写 style | 同步当前文档和同源父级窗口文档 |
353
359
  | PRD 里复制完整视觉规则 | PRD 只写摘要,完整 UI 规则写 design.md |
354
360
 
355
361
  ## 22. Agent 使用提示
356
362
 
357
- 提供一段简洁提示词,明确告诉 AI 如何使用该 design.md。必须说明选中 style-design 只是设计母体,最终事实源是当前项目 `design.md`;视觉 DNA 在内容替换后也要保留;实现自定义色盘时必须读取 `yida-canvas-custom-page/references/theme-runtime-helpers.md` 并复制对应 helper。
363
+ 提供一段简洁提示词,明确告诉 AI 如何使用该 design.md。必须说明选中 style-design 只是设计风格来源,最终事实源是当前项目 `design.md`;视觉 DNA 在内容替换后也要保留;实现自定义色盘时必须读取 `yida-canvas-custom-page/references/theme-runtime-helpers.md` 并复制对应 helper。
358
364
 
359
365
  ## 23. 交付自检清单
360
366
 
361
- - [ ] `baseDesignSource` 已写选中的 `references/style-designs/<template>.md`,或在所有模板不适用时说明 `generated-from-business-context` 原因。
362
- - [ ] `styleDesignSelection` 已说明用户任务、信息拓扑、requiredVisualDNA、选中模板、拒绝模板和置信度。
363
- - [ ] 模板选择依据来自业务结构和视觉 DNA 命中,不是行业、颜色或主观偏好。
367
+ - [ ] `baseDesignSource` 已写选中的 `references/style-designs/<style>.md`,或在所有内置风格不适用时说明 `generated-from-business-context` 原因。
368
+ - [ ] `styleDesignSelection` 已说明用户任务、信息拓扑、requiredVisualDNA、选中风格、排除风格和置信度。
369
+ - [ ] 设计风格选择依据来自业务结构和视觉 DNA 命中,不是行业、颜色或主观偏好。
364
370
  - [ ] `themeAdaptationResult` 已说明输入主题色、换肤策略、replaced token、preservedVisualDNA 和 preservedMechanisms。
365
371
  - [ ] 主题色遵守“换 hue,不换 DNA;换 token,不换结构”。
366
372
  - [ ] 源图或参考业务内容已抽象为中性槽位。
@@ -1,6 +1,6 @@
1
1
  # 输出:prd.md
2
2
 
3
- > Step 6 自检通过后,写入 `prd/<项目名>/prd.md`。`prd.md` 记录业务语义、产品设计、页面结构、资源创建顺序、页面实现交付顺序和导航顺序。PRD 不写 UI 视觉设计规范,只写应用主题色和风格摘要,并引用 `design.md` 章节。
3
+ > 本文件定义完整应用的 `prd/<项目名>/prd.md` 输出格式。`prd.md` 记录业务语义、产品设计、页面结构、资源创建顺序、页面实现交付顺序和导航顺序。PRD 不写 UI 视觉设计规范,只写应用主题色和风格摘要,并引用 `design.md` 章节。
4
4
 
5
5
  ## PRD 输出格式
6
6
 
@@ -60,7 +60,7 @@
60
60
  - 页面定位:<主入口页面 / 核心业务页 / 详情页 / 报表页 / 配置页;说明为什么需要这个页面>
61
61
  - 页面目标:<这个页面帮助用户完成什么判断或操作>
62
62
  - 页面关系:<从哪里进入、下一步去列表 / 看板 / 表单提交 / 详情 / 报表中的哪一个>
63
- - 设计文件:<display-page 填 `prd/<项目名>/design.md`;普通表单 / 流程表单写“跟随应用主题与表单视觉引导”>
63
+ - 设计文件:<display-page 填 `prd/<项目名>/design.md`;普通表单 / 流程表单写“跟随应用主题、表单视觉引导、表单全局主题注入和详情页样式注入”>
64
64
  - 设计引用:<引用 design.md 中的章节 ID,例如 themeProfile、sceneRecipes.workbench、components.table、states.empty>
65
65
  - 风格理由:<一句话说明该页面为什么采用 design.md 中的对应场景规则>
66
66
  - 主题关系:<跟随应用主题色 / 页面级独立色盘原因;只写摘要,具体 token 与 UI 规则见 design.md>
@@ -98,6 +98,7 @@
98
98
  | 明暗模式 | <light 默认;dark 只在明确暗色/夜间/高对比/黑金时使用;具体色阶见 design.md> |
99
99
  | 页面设计引用 | <逐页列出 designRefs,不复制 design.md 内容> |
100
100
  | 素材策略摘要 | <官网/品牌页是否需要真实图片或生成图片;具体视觉表达见 design.md> |
101
+ | 表单主题一致性 | <普通表单、流程表单、提交页、formDetail 详情页和自定义页面消费同一套应用主题 token;表单保存后必须注入 `style#yida-global-theme`,详情页必须注入 `style#yida-form-detail-style`> |
101
102
  | 一致性要求 | <PRD 中主题色和风格摘要必须与 design.md 保持一致;冲突时以 design.md 为准并修正 PRD 摘要> |
102
103
 
103
104
  ## 6. 业务逻辑与交互状态
@@ -107,6 +108,8 @@
107
108
  | 表单提交后 | <刷新列表 / 回到当前工作台 / 触发流程 / 更新状态> |
108
109
  | 新增/提交入口 | <PC 侧边抽屉 iframe 承载 `submission/{formUuid}?isRenderNav=false`,抽屉默认半屏 `50vw`;移动端整页或新页打开;必要时用 `update-form-config` 持久化表单设置 `isRenderNav=false`> |
109
110
  | 详情查看 | <PC 侧边抽屉 iframe 承载 `formDetail/{formUuid}?formInstId={formInstId}&navConfig.layout=1180&isRenderNav=false`,抽屉默认半屏 `50vw`;移动端整页或新页打开;formInstId 来自真实数据记录并优先取 row.formInstId,缺失时禁用详情入口> |
111
+ | 表单主题注入 | <每个普通表单和流程表单拿到真实 formUuid 后必须完成 `style#yida-global-theme` 注入,提交页和详情页与应用、自定义页面主题色一致> |
112
+ | 详情页样式注入 | <每个需要查看详情的表单必须完成 `style#yida-form-detail-style` 注入;缺失时不得把详情页样式视为完成> |
110
113
  | 数据变更 | <自动计算、状态流转、通知或提醒> |
111
114
  | 权限规则 | <角色能看、能改、能审批的边界> |
112
115
  | 空状态 | <无数据时的说明、主操作入口和下一步> |
@@ -130,10 +133,11 @@
130
133
  | --- | --- | --- | --- |
131
134
  | 1 | 应用 | 承载所有页面、表单、流程和导航 | `appType` |
132
135
  | 2 | 普通表单 / 流程表单 | 自定义页面需要表单 URL、字段语义和数据来源 | `formUuid`、字段映射 |
133
- | 3 | 初始示例数据 | 页面需要读取真实表单记录,完整应用默认写入 1-3 条核心业务记录 | 写入数量、抽查结果 |
134
- | 4 | 主自定义页面 / 业务自定义页面 | 页面消费表单入口、表单数据和主题色配置 | `displayPageFormUuid` |
135
- | 5 | 报表 / 数据看板数据源 | 看板或大屏需要汇总指标时创建 | `reportId` 或数据源信息 |
136
- | 6 | 发布与导航排序 | 页面发布成功后再调整导航展示 | 发布 URL、导航状态 |
136
+ | 3 | 表单主题与详情页样式注入 | 提交页、详情页、自定义页面和应用主题色必须一致;详情页必须有 formDetail CSS | `globalThemeActionFound: true`、`formDetailStyleActionFound: true` |
137
+ | 4 | 初始示例数据 | 页面需要读取真实表单记录,完整应用默认写入 1-3 条核心业务记录 | 写入数量、抽查结果 |
138
+ | 5 | 主自定义页面 / 业务自定义页面 | 页面消费表单入口、表单数据和主题色配置 | `displayPageFormUuid` |
139
+ | 6 | 报表 / 数据看板数据源 | 看板或大屏需要汇总指标时创建 | `reportId` 或数据源信息 |
140
+ | 7 | 发布与导航排序 | 页面发布成功后再调整导航展示 | 发布 URL、导航状态 |
137
141
 
138
142
  ## 9. 页面实现交付顺序
139
143
 
@@ -164,6 +168,7 @@
164
168
  | --- | --- |
165
169
  | 主页面访问 | <页面发布成功,打开后首屏能完成核心判断> |
166
170
  | 数据录入 | <表单能提交,提交后页面能刷新或回到正确入口> |
171
+ | 表单主题和详情页样式 | <普通表单和流程表单已注入 `style#yida-global-theme`,formDetail 详情页已注入 `style#yida-form-detail-style`,与应用和自定义页面主题色一致> |
167
172
  | 初始示例数据 | <完整应用默认已为核心普通表单写入 1-3 条业务化示例记录并 query 抽查;跳过时说明原因> |
168
173
  | 数据查看 | <列表 / 看板 / 详情能看到真实表单数据或清晰空态> |
169
174
  | 权限 / 流程 | <权限规则或流程节点生效> |
@@ -1,6 +1,6 @@
1
1
  # Step 1:分析需求和资源
2
2
 
3
- > 先明确这是一个什么宜搭应用、服务谁、解决什么核心任务。设计从业务对象出发,不从模板截图出发。
3
+ > 先明确这是一个什么宜搭应用、服务谁、解决什么核心任务。设计从业务对象出发,不从固定截图出发。
4
4
 
5
5
  ## 判断应用类型
6
6
 
@@ -23,7 +23,7 @@
23
23
  3. 若设计色不是平台预置主题 key,写 `shouldPassCreateAppTheme=false`,创建应用时不要显式传 `theme/colour`。
24
24
  4. 自定义色的 token 和注入方式写入 `design.md`,通过 `style#yida-global-theme` 或 `customThemeStyle.tokens` 注入,至少包含 `--color-brand1-6`、`--color-brand1-9`、`--color-brand1-2`、`--color-brand-1` ~ `--color-brand-4` 和 `--color-group`。
25
25
  5. `podBlue`、`podGreen`、`podOrange` 只是常用浅底候选,不是固定默认。不要因为没有特别说明就自动回到 #1677ff,也不要套用“科技=蓝、宠物=橙、法律=蓝”这类行业刻板配色。
26
- 6. 主题色只作为 Step 5 所选 style-design 模板的换肤输入;除用户明确要求深色/夜间/高对比或强品牌独立页外,不用主题色反向决定模板。
26
+ 6. 主题色只作为 Step 5 所选设计风格的换肤输入;除用户明确要求深色/夜间/高对比或强品牌独立页外,不用主题色反向决定风格。
27
27
 
28
28
  ## 品牌 token 语义
29
29
 
@@ -33,7 +33,7 @@
33
33
 
34
34
  ## 给页面标场景
35
35
 
36
- 页面 `scene` 只作为分类标签和实现提示,不作为页面模板。页面结构必须来自当前业务目标、用户任务、资源关系和后续 `design.md`。
36
+ 页面 `scene` 只作为分类标签和实现提示,不作为固定页面样式。页面结构必须来自当前业务目标、用户任务、资源关系和后续 `design.md`。
37
37
 
38
38
  | 页面场景 | 适用判断 | 结构来源 |
39
39
  | --- | --- | --- |
@@ -7,11 +7,11 @@
7
7
  先为完整应用生成一套主设计契约,再为不同页面场景写局部变体。自定义展示页、工作台、列表管理页、处理台、看板和首页门户都遵守同一个 `prd/<项目名>/design.md`。
8
8
 
9
9
  1. 读取 [design.md 生成规则](../references/style-design-selection.md)。
10
- 2. 读取 [style-design 内置模板注册表](../references/style-designs/registry.md),再读取 `_design-md-template.md`。
10
+ 2. 读取 [style-design 风格注册表](../references/style-designs/registry.md),再读取 `_design-md-template.md`。
11
11
  3. 从 Step 1-4 产物推演 `inferredUserTask`、`inferredInformationTopology`、`interactionFocus` 和 `requiredVisualDNA`。用户通常不会主动描述视觉结构,agent 必须从业务对象、数据形态、页面区块和操作路径中推演。
12
- 4. 按 `业务任务匹配 30% + 信息拓扑匹配 25% + 视觉 DNA 命中 30% + 实现稳定性 10% - 风险扣分 5%` 选择唯一一个 `style-designs/*.md` 作为 `baseDesignSource`;纯表单、长文、品牌营销、移动端单任务、未要求暗色时要过滤明显不合适的模板。
13
- 5. 读取被选中的 style-design 模板,抽取 `visual_dna`、`theme_adaptation`、`layout_stability`、`quality_anchors`、`components` 和 `modules`。
14
- 6. 根据 Step 2 的主题色来源和主题色输入执行换肤:替换模板 `theme_adaptation.replace_tokens`,派生 `derive_tokens`,保留 `preserve_tokens` 和 `visual_dna.invariant`。主题色只换 hue,不换 DNA,不改结构。
12
+ 4. 按 `业务任务匹配 30% + 信息拓扑匹配 25% + 视觉 DNA 命中 30% + 实现稳定性 10% - 风险扣分 5%` 选择唯一设计风格,并把对应 `style-designs/*.md` 记录为 `baseDesignSource`;纯表单、长文、品牌营销、移动端单任务、未要求暗色时要过滤明显不合适的风格。
13
+ 5. 读取被选中的 style-design 风格文件,抽取 `visual_dna`、`theme_adaptation`、`layout_stability`、`quality_anchors`、`components` 和 `modules`。
14
+ 6. 根据 Step 2 的主题色来源和主题色输入执行换肤:替换风格文件中的 `theme_adaptation.replace_tokens`,派生 `derive_tokens`,保留 `preserve_tokens` 和 `visual_dna.invariant`。主题色只换 hue,不换 DNA,不改结构。
15
15
  7. 需要判断详略时读取唯一示例 `generated-business-design.example.md`;只学习结构和粒度,不复制示例业务、色盘、字段、页面顺序或组件组合。
16
16
  8. 读取 [视觉脚手架配方库](../references/visual-scaffold-recipes.md),把应用内各类页面映射到统一 `visualScaffold` 规则。
17
17
  9. 读取 [页面质量门禁](../references/page-quality-gates.md),把质量门禁补进 `acceptanceChecks`。
@@ -22,8 +22,8 @@
22
22
 
23
23
  ```markdown
24
24
  - designFile:prd/<项目名>/design.md
25
- - baseDesignSource:references/style-designs/<selected-template>.md;所有模板都不适用时才写 generated-from-business-context
26
- - styleDesignSelection:<推演任务 / 信息拓扑 / requiredVisualDNA / 选中模板 / 拒绝模板 / 置信度>
25
+ - baseDesignSource:references/style-designs/<selected-style>.md;所有内置风格都不适用时才写 generated-from-business-context
26
+ - styleDesignSelection:<推演任务 / 信息拓扑 / requiredVisualDNA / 选中风格 / 排除风格 / 置信度>
27
27
  - themeAdaptationResult:<输入主题色 / 换肤策略 / replaced tokens / preservedVisualDNA / preservedMechanisms>
28
28
  - styleReason:<为什么适合当前应用和页面组合>
29
29
  - Visual DNA:<所有页面都必须保留的 2-5 个视觉 DNA>
@@ -37,7 +37,7 @@
37
37
 
38
38
  - 2-3 个气质关键词:稳重可信、轻盈现代、克制高端、温暖亲和、前沿科技等。
39
39
  - 3-5 条业务专属设计原则:结合业务对象和用户任务写具体规则。
40
- - 差异化 5 维:色彩、构图、密度、组件语言、动线;这些规则必须来自业务推演和所选模板视觉 DNA 的融合。
40
+ - 差异化 5 维:色彩、构图、密度、组件语言、动线;这些规则必须来自业务推演和所选风格视觉 DNA 的融合。
41
41
  - 基础版式:全应用视觉锚点、区块节奏、密度、操作位置和响应式规则。
42
42
  - `visualScaffold`:给所有页面实现使用的硬骨架,写清 `layoutRecipe`、`surfaceMap`、`sectionRhythm`、`densityRule`、`breathingRule`、`componentRecipe`、`emptyStateRecipe`、`responsiveSlots` 和 `acceptanceChecks`。这些字段属于 `design.md`,PRD 只引用。
43
43
  - 默认业务工具页采用圆润高密且有呼吸感的规则:卡片 padding 默认 22-28px 且必须大于 20px,卡片与卡片的 gap 默认 12-18px 且必须小于 20px,卡片圆角范围 0-32px,控件 10-14px;状态摘要 64-88px,动作条 40-56px,列表行 44-56px,空态 88-120px 内。官网、品牌页或用户明确要求舒展时才放宽。
@@ -89,14 +89,14 @@
89
89
  8. 新增/提交/编辑是否使用原生表单入口。
90
90
  9. 首屏是否有视觉锚点、主操作、关键状态和至少两个信息层。
91
91
  10. 自定义展示页是否在 PRD 中引用 `designFile` 和 `designRefs`,且 `design.md` 已写清视觉 DNA 和页面场景规则。
92
- 11. 工作台 / 业务首页是否避开“4 个等宽大 KPI 卡 + 图标快捷卡 + 大空态白卡”的低密模板;空数据是否用薄空态行和主操作入口承接。
92
+ 11. 工作台 / 业务首页是否避开“4 个等宽大 KPI 卡 + 图标快捷卡 + 大空态白卡”的低密套路;空数据是否用薄空态行和主操作入口承接。
93
93
  12. 工作台、首页、门户、看板、展示页和业务入口页是否推荐有 8-10 个有业务目的的区块以上,并且不是靠重复卡片或空白容器凑数;窄场景可以更少并说明取舍。KPI 子项、快捷入口子项和列表行不能分别计数。
94
94
  13. 页面是否已考虑 `backgroundLayer`:优先选择淡色背景、顶部不规则色块、柔和光洗、低速流光、微噪点、细线装饰、插图或局部渐变之一;近白画布可以保留,但不能呈现为未设计的空白底。
95
95
  14. 不规则背景是否只服务氛围和视觉焦点,内容区是否仍保持规则栅格、稳定对齐、可读对比度和 reduced motion 静态降级。
96
96
  15. 页面背景与卡片背景是否形成明显层次对比,并按白色/浅色背景配边框、浅灰/浅彩背景配白色无边框、渐变背景配玻璃卡片的方案落地。
97
97
  16. 圆角、padding、gap 是否同时满足现代感和信息密度:卡片 padding >20px,卡片 gap <20px,卡片圆角 0-32px,状态摘要、任务列表、右侧上下文和空态没有被撑成大空白容器。
98
- 17. `styleDesignSelection` 是否能从业务任务、信息拓扑和 requiredVisualDNA 解释模板选择,而不是按行业、颜色或主观喜好套模板。
99
- 18. `themeAdaptationResult` 是否遵守所选模板 `theme_adaptation`:换 hue,不换 DNA;换 token,不换结构;保留 `preserve_tokens` 和 `visual_dna.invariant`。
98
+ 17. `styleDesignSelection` 是否能从业务任务、信息拓扑和 requiredVisualDNA 解释风格选择,而不是按行业、颜色或主观喜好套风格。
99
+ 18. `themeAdaptationResult` 是否遵守所选风格的 `theme_adaptation`:换 hue,不换 DNA;换 token,不换结构;保留 `preserve_tokens` 和 `visual_dna.invariant`。
100
100
 
101
101
  ## 产出
102
102
 
@@ -1,6 +1,6 @@
1
1
  # Step 6:写入 prd.md 和 design.md
2
2
 
3
- > 这一步把 Step 1-5 的结果分别写入 `prd/<项目名>/prd.md` 和 `prd/<项目名>/design.md`。这里不写 JSX/TSX,也不直接输出 `page-spec.json`;页面实现阶段由 `yida-app` 同时读取 PRD 与 design.md,只有走页面生成器或需要稳定交接时才派生 `page-spec.json`。
3
+ > 本流程把业务设计结果分别写入 `prd/<项目名>/prd.md` 和 `prd/<项目名>/design.md`。这里不写 JSX/TSX,也不直接输出 `page-spec.json`;页面实现阶段由 `yida-app` 同时读取 PRD 与 design.md,只有走页面生成器或需要稳定交接时才派生 `page-spec.json`。
4
4
 
5
5
  ## 写 prd.md
6
6
 
@@ -31,7 +31,7 @@
31
31
  | 模块 | 必填内容 |
32
32
  | --- | --- |
33
33
  | frontmatter | version、design_id、baseDesignSource、styleDesignSelection、themeProfile、themeAdaptationResult、yidaThemeRuntime、tokens、visual_dna、scenes、density、layout、tone |
34
- | 总览 / 模板选择依据 / 主题色与换肤结果 / 适用场景 / 视觉氛围 | 可复用设计意图、选中模板和拒绝模板、主题色来源、换肤策略、适合与不适合场景、密度、气质和页面组织方式 |
34
+ | 总览 / 设计风格选择依据 / 主题色与换肤结果 / 适用场景 / 视觉氛围 | 可复用设计意图、选中风格和排除风格、主题色来源、换肤策略、适合与不适合场景、密度、气质和页面组织方式 |
35
35
  | 视觉 DNA / 设计母体 | 所有页面都必须保留的 2-5 个视觉 DNA,每个包含证据、规则、实现钩子、失败表现和置信度 |
36
36
  | 色彩角色 / 字体 / 布局 / 深度 / 形状 | token、字体栈、字号、网格、间距、层级、圆角和材质规则 |
37
37
  | 组件样式 / 快捷入口区域 | 按组件写 default、hover、active、focus、disabled、loading、selected、error;工作台等必须写快捷入口区域 |