openyida 2026.7.7 → 2026.7.8

package/yida-skills/skills/yida-page-uiux/references/scenes/landing.md

@@ -0,0 +1,101 @@
+# 场景：官网 / 落地页 / 品牌展示页
+
+> 面向外部传播或内部宣导的「讲清楚价值 + 建立信任 + 引导下一步」。它不是 B 端工作台，也不是纯详情页；信息密度可以低一些，但每屏都要有明确叙事任务和视觉锚点。
+
+## 场景定位
+
+- **用户目标**：快速理解「这是什么 / 对我有什么价值 / 为什么可信 / 下一步做什么」。
+- **不是**：工作入口首页（那是 workbench）、数据驾驶舱（那是 dashboard）、单对象规格详情（那是 detail）。
+- **典型业务**：产品官网、活动页、招商页、方案介绍页、组织内推广页、公开分享页。
+
+## 布局骨架 / 信息架构
+
+先写清页面是单页还是多页。宜搭自定义页通常先做单页；如果内容天然分层很深，再用页面内导航壳或多个自定义页承载。
+
+```
+┌─────────────────────────────────────┐
+│ Hero：品牌/产品名 + 唯一主张 + 主动作  │  ← 只讲一个核心承诺
+├─────────────────────────────────────┤
+│ 价值证明：3 个以内的核心能力/收益       │  ← 不做平均卡片堆砌
+├─────────────────────────────────────┤
+│ 场景/流程：用图示或错位结构讲使用路径    │
+├─────────────────────────────────────┤
+│ 信任背书：数据、案例、资质、客户声音      │
+├─────────────────────────────────────┤
+│ CTA：下一步动作（咨询/试用/查看表单）     │
+└─────────────────────────────────────┘
+```
+
+移动端：Hero 不要做满屏过高，首屏底部要露出下一段内容；复杂视觉锚点改为单列或横向滚动，不压住主文案。
+
+## 信息密度
+
+**低-中**。landing 讲的是价值路径，不是把所有功能塞满。每个 section 只承担一个任务：吸引、解释、证明、转化。长文本要转成图示、对比、数据卡、流程或引文。
+
+## 焦点（hero）元素
+
+**品牌/产品主张 + 一个视觉锚点**。Hero 的 H1 应是品牌名、产品名或具体 offer；价值解释放在副标题，不把空泛口号当主标题。
+
+## Section 构图策略
+
+每个 section 必须选不同构图，禁止连续复用同一种布局。可选手法：
+
+| 构图手法 | 适用 |
+|---|---|
+| 文字主导 | 理念/服务型产品，缺少强图片素材时 |
+| 不对称分割 | B2B/SaaS/企业服务，信息层级要清晰时 |
+| 网格打破 | 多能力展示，但需要主次而不是三卡片平均铺平 |
+| 重叠与破界 | 创意/视觉强品牌，有真实产品图或场景图时 |
+| 时间线/蛇形 | 发展历程、流程、服务路径 |
+| 超大留白对比 | 高端、咨询、法律、金融等克制调性 |
+| 数据证明区 | 有真实数字/案例时，用大数字 + 短解释建立信任 |
+
+Hero 构图按品牌调性选，不默认左文右图，也不默认满屏背景。没有真实图片时，优先用文字主导、数据图示、流程图，而不是编造图片 URL。
+
+## 素材与真实性
+
+- Logo、产品图、客户案例、联系方式、社媒链接、数据背书必须来自用户提供或已验证资料；没有就留空/隐藏，不编造。
+- 每个 section 至少有一个视觉锚点：真实图片、产品截图、流程图、数据图示、引文排版、对比表或大字排版。
+- 图片/视频素材只走已验证 URL 或合规 CDN；不要用随机占位图替代真实业务素材。
+
+## 组件套餐（映射 design-system.md / canvas-design-system.md）
+
+- Hero：大标题 + 副标题 + 主/次操作；导航隐藏时可叠加 `yida-nav-shell` 顶部导航。
+- 价值证明：非等宽平铺的能力区，主能力放大，其余弱化。
+- 场景流程：步骤条、时间线、错位图文、数据图示。
+- 信任背书：案例卡、客户引文、数据证明、资质列表。
+- CTA：单一主动作，跳原生表单/外链/详情页；线索收集不要手写表单。
+
+## 本场景专属去 AI 味要点
+
+- ❌ **禁万能营销文案**：「一站式赋能」「极致体验」「智能高效」这类空话必须改成具体业务承诺。
+- ❌ **禁连续同构 section**：左文右图 + 三卡片 + 左文右图一路复制，是最明显的模板脸。
+- ❌ **禁无素材硬做大 Hero 图**：没有真实素材时用文字排版/数据图示/流程图，不编造图。
+- ✅ **每屏一个任务**：吸引、解释、证明、转化分清楚，不让一个 section 同时承担所有内容。
+- ✅ **CTA 克制明确**：全页主动作一致，按钮文案说清下一步，不堆多个同权按钮。
+
+## 视觉方向决策块示例
+
+```markdown
+### 【视觉方向决策】
+- 页面类型：landing（用户诉求是"做一个产品介绍官网页，对外讲清方案价值"）
+- 气质关键词：可信、清透、专业
+- 项目特定原则：① 首屏只讲"审批效率提升"一个主张；② 没有真实客户 Logo 时不做客户墙；③ CTA 统一跳到原生咨询表单
+- 布局骨架：Hero(产品名+唯一主张) → 价值证明(1 主 2 次) → 使用流程(时间线) → 数据背书 → CTA
+- 信息密度：低-中（每屏一个叙事任务，避免功能堆砌）
+- 视觉焦点：产品主张 + 流程图式视觉锚点
+- 场景专项策略：Hero 用文字主导 + 右侧流程图示；价值区用网格打破；流程区用时间线；背书区用数据证明；CTA 跳原生表单
+
+### 【差异化 5 维】
+1. 辅助/强调色：用低饱和青绿做证明数据点缀，告警/错误色不参与品牌表达
+2. 中性冷暖偏色：中性灰偏暖，降低工具感
+3. 圆角性格：标准圆，保持现代但不消费化
+4. 排版性格：Hero 大标题强字重，正文短句化；数据证明用 tabular-nums
+5. 装饰母题：细线流程节点 + 单色数据证明块 + 非对称 section 节奏
+
+### 【反默认说明】
+不是统一卡片网格，而是文字主导 Hero、错位价值区、时间线流程三种构图轮换；中性偏暖和细线流程母题也偏离默认灰白蓝模板。
+
+### 【图标策略】
+内联 SVG，仅用于流程节点和 CTA 箭头；section 标题不配装饰图标。
+```

package/yida-skills/skills/yida-page-uiux/references/scenes/list.md

@@ -0,0 +1,78 @@
+# 场景：列表 / 管理页
+
+> 面向「找到 → 筛选 → 处理」某类对象的日常操作台。数据是主角，装饰让位于可读与可操作。
+
+## 场景定位
+
+- **用户目标**：在一堆同类对象里快速定位、批量处理、下钻看详情。
+- **不是**：看板（那是聚合结论）、门户（那是入口）、单对象详情（那是 detail）。
+- **典型业务**：订单管理、客户列表、工单池、审批记录、商品管理。
+
+## 布局骨架 / 信息架构
+
+```
+┌─────────────────────────────────────┐
+│ 顶部：标题 + 主操作（新建）           │
+├─────────────────────────────────────┤
+│ 筛选栏（常用筛选平铺，高级筛选收起）   │  ← 克制一行，别堆一屏筛选
+├─────────────────────────────────────┤
+│ 数据表 / 卡片列表（主次列宽）         │  ← 焦点，密度高
+│   行内轻操作（查看/编辑/更多）        │
+├─────────────────────────────────────┤
+│ 分页 / 加载更多                       │
+└─────────────────────────────────────┘
+         点行 → 详情抽屉（不跳页）
+```
+
+移动端：表格退化为卡片列表（每行一卡，关键字段 2-3 个），筛选收进顶部抽屉。
+
+## 信息密度
+
+**高**。列表天生密集，靠**列宽主次 + 行高节奏 + 对齐**建立可读秩序，而不是靠留白稀释。金额/数量/状态等关键列要一眼可扫。
+
+## 焦点（hero）元素
+
+**数据表本身**。筛选栏、分页、操作都是配角，视觉重量给到行数据。主键列（名称/编号）最重，次要字段弱化。
+
+## 组件套餐（映射 design-system.md / component-jsx-guide.md）
+
+- 表格：`design-system.md` 紧凑表格 / 数据列表行；主键列加重，次要列弱化文字色
+- 状态：`design-system.md` 标签（tag），语义色（告警红仅给逾期/失败等真异常）
+- 筛选：自定义下拉（**禁 `<select>`**，见 `yida-custom-page` FATAL 规则）+ 搜索框 + 时间范围
+- 行操作：图标按钮（功能性图标，克制）+ 「更多」收起长尾操作
+- 详情：**抽屉（drawer）而非跳页**，保留列表上下文；需录入则内嵌 `iframe workbench/{formUuid}?iframe=true`
+- 空/错/载态：`design-system.md` 空状态 / 骨架屏 / 错误态**三态齐全**（列表最容易漏空态）
+
+## 本场景专属去 AI 味要点
+
+- ❌ **禁每列等宽平铺**：所有列一样宽 = 没有主次。主键列宽、时间/状态列窄，按信息重要度分配列宽。
+- ❌ **禁行内塞满彩色标签**：每个字段都上色 = 花。只有状态/告警用色，其余用中性字色分层级。
+- ❌ **禁点行跳整页**：下钻用抽屉保留列表上下文，别让用户「看完一条要退回来重新筛」。
+- ✅ **三态必须齐全**：空态（无数据友好提示 + 新建入口）、加载态（骨架屏非转圈）、错误态（可重试）。
+- ✅ **筛选克制**：常用筛选平铺一行，高级筛选收进「更多筛选」，别一屏全是筛选控件。
+- ✅ **批量操作有反馈**：勾选后出现批量操作条，操作后有结果提示（成功数/失败数）。
+
+## 视觉方向决策块示例
+
+```markdown
+### 【视觉方向决策】
+- 页面类型：list（用户诉求是"订单管理，能筛选、看状态、点进去处理"）
+- 气质关键词：高效、清晰、可操作
+- 项目特定原则：① 订单状态列必须一眼可扫（待付款/已发货/已完成/退款）；② 告警红只给「退款/超时未发货」；③ 金额列 tabular-nums 右对齐
+- 布局骨架：标题+新建 → 筛选栏(状态+时间+搜索) → 数据表(订单号/客户/金额/状态/时间/操作) → 分页；点行开详情抽屉
+- 信息密度：高（列宽主次 + 行高节奏建立秩序）
+- 视觉焦点：数据表（订单号列最重，金额右对齐）
+
+### 【差异化 5 维】
+1. 辅助/强调色：状态用语义色阶（待办=点缀色、完成=中性、异常=告警红）；避免每状态都高饱和
+2. 中性冷暖偏色：冷灰基底（管理工具专业感）
+3. 圆角性格：微圆（表格容器微圆，行不加圆角，克制）
+4. 排版性格：主键列 600 加重，次要列弱化文字色；金额 tabular-nums 右对齐
+5. 装饰母题：选中行左侧主色竖条 + 表头细分隔线（非满行描边）
+
+### 【反默认说明】
+用列宽主次 + 中性字色分层替代「等宽列 + 满行彩色标签」，下钻用抽屉非跳页——3 维偏离默认列表脸。
+
+### 【图标策略】
+内联 SVG，仅行操作（查看/编辑/更多）和状态用图标；表头、字段名不配装饰图标。
+```

package/yida-skills/skills/yida-page-uiux/references/scenes/workbench.md

@@ -0,0 +1,74 @@
+# 场景：工作台 / 门户首页
+
+> 用户进入应用的第一屏，「看一眼状态 + 快速跳去干活」。不是营销落地页，不要大 Hero 图套路。
+
+## 场景定位
+
+- **用户目标**：进来 3 秒内知道「有什么要我处理的 / 关键数据怎么样 / 我常用的入口在哪」。
+- **不是**：品牌展示页、数据大屏（那是 dashboard）、某个对象的详情（那是 detail）。
+- **典型业务**：部门门户、系统首页、我的工作台、班组看板首页。
+
+## 布局骨架 / 信息架构
+
+自上而下的纵向叙事（移动优先）：
+
+```
+┌─────────────────────────────────────┐
+│ 欢迎区（问候 + 当前用户 + 日期/待办数）│  ← 克制，1 行 2 行，不做大图 banner
+├─────────────────────────────────────┤
+│ 核心指标（3-5 个 KPI，主次分明）      │  ← 门户级概览，不是完整看板
+├─────────────────────────────────────┤
+│ 快捷入口（分组，有主次）              │  ← 高频操作在前，长尾折叠/靠后
+├─────────────────────────────────────┤
+│ 我的待办 / 最近动态                    │  ← 列表，可点进详情
+└─────────────────────────────────────┘
+```
+
+PC 端可将「核心指标 + 快捷入口」并成上区、「待办 + 动态」并成下区双栏；移动端全部纵向堆叠。
+
+## 信息密度
+
+**中**。门户是概览不是明细——每块只放最重要的，深入靠点击跳转。留白要够，别把首页做成信息轰炸。
+
+## 焦点（hero）元素
+
+**核心指标 + 主快捷入口**。欢迎区是配角，不要让问候语或装饰图占掉首屏焦点。
+
+## 组件套餐（映射 design-system.md / component-jsx-guide.md）
+
+- 指标卡：`design-system.md` 卡片 + 大字号数字（`tabular-nums`）+ 次要标签
+- 快捷入口：图标 + 文字的入口块（图标此处是功能性导航，允许，但风格统一）
+- 待办/动态：`design-system.md` 数据列表行（listItem）
+- 空态：`design-system.md` 空状态（新用户无待办时友好提示 + 主操作）
+
+## 本场景专属去 AI 味要点
+
+- ❌ **禁营销大 Hero**：不要顶部一张巨图 + 渐变遮罩 + 大标语。B 端门户不是官网。
+- ❌ **禁快捷入口平铺一片等宽图标格子**：入口要分组、有主次（高频 vs 低频），不是 4×N 的对称九宫格。
+- ✅ **欢迎区克制**：一句问候 + 关键数字（如「今天有 3 项待办」）即可，别配大插画和 emoji。
+- ✅ **指标有主次**：最重要的 1 个指标可放大/置于视觉起点，其余次级，不要 5 个 KPI 一样大平铺。
+
+## 视觉方向决策块示例
+
+```markdown
+### 【视觉方向决策】
+- 页面类型：workbench（用户诉求是"部门门户首页，进来先看待办和常用功能"）
+- 气质关键词：稳重、高效、克制
+- 项目特定原则：① 待办数量必须首屏可见；② 高频入口（提交申请/查进度）永远在入口区最前；③ 指标只放部门最关心的 3 个
+- 布局骨架：欢迎区(1 行) → 3 指标(主次) → 快捷入口(2 组) → 我的待办列表
+- 信息密度：中（概览为主，深入靠跳转）
+- 视觉焦点：核心指标 + 主快捷入口
+
+### 【差异化 5 维】
+1. 辅助/强调色：待办数用点缀色强调，逾期用告警红（仅此处）
+2. 中性冷暖偏色：冷灰基底（政企门户，专业感）
+3. 圆角性格：微圆（克制企业感，全页统一）
+4. 排版性格：指标数字大字 + tabular-nums；标题 600 正文 400
+5. 装饰母题：重点待办左侧主色竖条 + 单色阶分区（不用彩色卡片区分）
+
+### 【反默认说明】
+用冷灰基底 + 微圆 + 单色阶分区替代「灰白底 + 8px 圆角彩色卡片网格」，且快捷入口分组而非九宫格平铺——3 维偏离默认脸。
+
+### 【图标策略】
+内联 SVG 语义集，细描边；仅快捷入口和状态用图标，标题不配装饰图标。
+```

package/yida-skills/skills/yida-page-uiux/references/visual-decision-engine.md

@@ -0,0 +1,151 @@
+# 视觉决策引擎（共用）
+
+> 本文档为 `SKILL.md` 的 **Step 4 视觉方向决策** 提供差异化引擎，所有 scene 场景共用。
+> 蒸馏自业界应用型 UI skill 的视觉系统决策引擎，并**适配宜搭运行时约束**。
+
+## 宜搭关键约束（与通用引擎的差异，务必先读）
+
+1. **主色不可自由换**：宜搭已内置品牌色 CSS 变量（`var(--color-brand1-6)` 等），主色随平台主题走。**不要硬编码主色相、不要另选一个主题色**。差异化改由下面 5 个维度承载。
+2. **字体不可用 Google Fonts**：禁 `fonts.googleapis.com`（大陆不可达）。放弃「Inter vs Plus Jakarta」这类字体选型，改用**系统中文字体栈** + 字重/字号对比/字间距/`tabular-nums` 造性格。仅允许 `g.alicdn.com` 上已验证的字体。
+3. **B 端为主**：自定义页多为看板/列表/工具/详情，不是营销落地页。装饰要克制、服务于信息，不堆砌。
+4. **纯方向**：本引擎只帮你选方向，不产出色值/像素。具体数值到 `../../yida-custom-page/references/design-system.md` 取。
+
+---
+
+## 第 0 层：风格意图自决
+
+在心里从下面 5 个方向选一个并 commit。**不要默认选第一个**，问自己「这个业务、这个页面，我想让它散发什么气质」。每个方向给：关键词 + 硬约束 + 必须偏离规则。
+
+### A. 经典企业级
+> 关键词：稳重、可信赖、克制、大留白
+- 圆角：偏直角/微圆（R1-R2 性格），不宜大圆。
+- 中性色：冷灰或中性灰基底。
+- 必须偏离：在「辅助色 / 排版 / 图标」中至少 1 项不选该业务的第一直觉（如财务别默认冷蓝点缀，试暖金/墨绿）。
+
+### B. 现代 SaaS 感
+> 关键词：轻盈、精致、几何感、呼吸感
+- 圆角：微圆到标准圆（R2-R3 性格）。
+- 留白：加大区块间距，信息密度偏均衡。
+- 必须偏离：中性色或装饰母题至少 1 项不选「最安全」的纯灰。
+
+### C. 创新前沿感
+> 关键词：突破、科技、高对比、有个性
+- 对比：强化字重/字号跨度，主次拉开。
+- 装饰母题：至少用一次非常规手法（几何切割、错位网格、单色大字），打破常规卡片网格。
+- 必须偏离：布局或装饰母题选「边缘选项」，别回退到对称平铺。
+
+### D. 温暖亲和力
+> 关键词：友好、有机、人文、圆润
+- 圆角：偏圆润（R3+ 性格）。
+- 中性色：**暖灰基底**（关键差异点）。
+- 必须偏离：辅助色避开冷蓝，倾向绿/琥珀/陶土/珊瑚等暖调点缀。
+
+### E. 极简高端感
+> 关键词：克制、留白、品质、精准
+- 辅助色：低饱和，避免喧闹色。
+- 图标：细线性、克制。
+- 必须偏离：用大留白 + 精准对齐 + 字重克制造质感，别靠装饰堆砌；排版别用最普通的均匀字号。
+
+---
+
+## 反默认硬约束
+
+### 严禁直接套用的「宜搭默认脸」
+
+以下是宜搭自定义页最泛滥的组合，**严禁直接输出**。你的方案必须与它在**至少 3 个维度**上不同（输入极模糊时提升到 4 个）：
+
+```
+统一灰白底（#F7F8FA + 纯白卡片） + 统一 8px 圆角卡片网格 + 系统默认字体一套到底
++ 蓝色/品牌色平铺强调 + 每个卡片标题配一枚线性图标 + 等宽等高对称平铺
+```
+
+**执行规则**：
+1. 5 个差异化维度选完后，与上面的默认脸逐维比对。
+2. 差异维度 < 3 → 回到差异最少的那一维，强制换更有特色的选项。
+3. 注意：这里的「差异」不是换主色（主色被平台锁定），而是靠**中性冷暖 / 圆角性格 / 排版性格 / 装饰母题 / 辅助色取法**拉开。
+
+### 强制第二选择
+
+每一个差异化维度决策时：
+1. 写下**第一直觉**（通常就是默认/最泛滥的）。
+2. 写下**第二选项**（同样合理、更不常见）。
+3. **选第二选项**，除非它导致整体严重不协调（此时选第三，并在心里说明为何跳过第二）。
+
+### 差异化自检
+
+5 个维度选完后自问：「这套方向像不像 90% 的同类宜搭页？」
+- 若答「有点像/比较普通」→ 找出最像默认脸的那一维，替换为更有特色的选项，重查协调性。
+- 重复到确认「这套方向有个性、不会千篇一律」。
+
+---
+
+## 5 个差异化维度（主色固定，靠这 5 维拉开差异）
+
+### 维度 1 — 辅助 / 强调色
+
+主色已被平台锁定，**辅助色和图表色板是你最大的差异化空间**。
+
+- **状态色**：成功/警告/危险/信息用语义色（见 `design-system.md`），但**告警红是稀缺资源**——只给真正需要用户立刻反应的地方（库存告警、逾期、失败），不要满屏红。
+- **点缀色**：从气质关键词推导 1 个点缀色方向（暖金=高端/财务、墨绿=沉稳/健康、青=数据/科技、陶土=人文/教育），用于强调数字、选中态、图表主色。
+- **图表色板**：看板类对齐 `yida-chart` 的克制色板，避免每个系列都高饱和抢眼。
+
+### 维度 2 — 中性色冷暖偏色
+
+**最容易区分气质、又最常被忽略的维度。** 选一个基底方向并全页贯彻：
+
+| 方向 | 气质 | 适配 |
+|---|---|---|
+| 冷灰（偏蓝） | 冷静、科技、专业 | 数据平台、开发工具、金融 |
+| 中性灰 | 干净、通用、内容优先 | 通用后台 |
+| 暖灰（偏暖） | 温暖、人文、有机 | 教育、健康、生活、内部门户 |
+
+偏色强度逐级衰减：背景 5-8% > 边框 3-6% > 弱化文字 2-4% > 正文 0-1% > **标题 0%（严格不偏，保证黑色感）**。
+
+### 维度 3 — 圆角性格
+
+**全页统一一种性格**（不是所有元素同一个值，而是同一种调性，分层级见 `design-system.md` 圆角系统）：
+
+| 性格 | 气质 | 搭配意图 |
+|---|---|---|
+| 直角 / 微圆 | 硬朗、工程感、严肃 | A 经典企业级、C 前沿（配高对比） |
+| 标准圆 | 现代、友好、平衡 | B 现代 SaaS |
+| 圆润 / 大圆 | 柔和、亲切、消费感 | D 温暖亲和 |
+
+❌ 禁止全页一个圆角值无差别堆叠（那是默认脸）；也禁止同页混用互相打架的圆角性格。
+
+### 维度 4 — 排版性格
+
+字体不能换，就靠这些造性格：
+
+- **字重对比**：标题/正文拉开字重（如 600 vs 400），别全页一个字重。
+- **字号跨度**：主标题与正文字号差要够（详情页 ≥2.5×；看板 KPI 数字要显著大于标签）。
+- **字间距**：大标题可微调 `letter-spacing`（负值收紧显精致 / 正值拉开显克制）。
+- **数字**：所有金额/统计/KPI 用 `font-variant-numeric: tabular-nums`，保证对齐、不跳动。
+- **中文字体栈**：`-apple-system, BlinkMacSystemFont, "PingFang SC", "Helvetica Neue", sans-serif`（见 `design-system.md`）。
+
+### 维度 5 — 装饰母题（视觉 DNA）
+
+2-3 个贯穿全页的视觉基因，让人**遮住标题也能认出是同一套设计**。每个母题写清：类型（形态/色彩/纹理/构图习惯）+ 形式（长什么样）+ 出现位置 + 传递的感知。
+
+示例母题（选契合气质的，别堆砌）：
+- 左侧强调竖条（选中/重点行用主色/点缀色竖条标记）
+- 数字优先的大字排版（KPI 用超大字号 + tabular-nums 当视觉锤）
+- 单色分区块（用中性色阶而非彩色划分区域）
+- 克制的顶部细线 / 卡片左上角小几何标记
+- 非对称双栏（主 70% + 次 30%，打破对称）
+
+❌ 装饰母题不等于「加特效」：禁彩色发光、禁半透明彩色 blob、禁渐变文字（这些是 AI 味，见黑名单）。
+
+---
+
+## 差异化方向示例（同一业务，不同气质）
+
+> 以下只示范「方向」如何差异化，不含色值代码。色值到 `design-system.md` 取，主色始终用平台品牌变量。
+
+**同样是「进销存看板」：**
+
+- **意图 A 经典企业级**：中性=冷灰；圆角=微圆；排版=KPI 大字 + tabular-nums，标题 600 正文 400；装饰母题=重点行左侧主色竖条 + 单色分区。反默认：不套满屏卡片，用单色阶分区替代等宽卡片网格。
+
+- **意图 D 温暖亲和**：中性=暖灰基底；圆角=圆润；辅助色=墨绿点缀（避开冷蓝）；排版=字号跨度中等、字重对比柔和；装饰母题=非对称双栏（左大右小）+ 顶部克制细线。反默认：暖灰 + 圆润 + 暖调点缀，三维一起偏离默认脸。
+
+**判断标准**：两个方向摆一起，应一眼看出是两套不同性格的设计，而不是换了个数字的同一张脸。

package/yida-skills/skills/yida-page-uiux/workflow/output-decision-block.md

@@ -0,0 +1,36 @@
+# 输出：视觉方向决策块
+
+> Step 6 自检通过后，输出如下结构（**纯方向，不含代码**），然后提示交给 `yida-custom-page` / `yida-canvas-custom-page` 落地。
+
+```markdown
+### 【视觉方向决策】
+
+- **导航形态**：<导航可见（跟品牌融合）/ 导航隐藏 isRenderNav=false（视觉自立 + 自带导航壳，说明壳型）>
+- **页面类型**：<workbench / dashboard / list / detail / landing>（判定依据一句话）
+- **气质关键词**：<2-3 个>
+- **项目特定设计原则**：<3-5 条，具体到业务>
+- **布局骨架**：<来自 scene 文件的骨架，按本页信息调整>
+- **信息密度**：<紧凑 / 均衡 / 宽松 + 一句理由>
+- **视觉焦点**：<这页唯一的主角是什么>
+- **场景专项策略**：<landing 写 Section 构图 + 素材锚点 + 转化动作；dashboard 写 Shell + Archetype + 数据洞察落点；其他场景按需写导航壳/多视图>
+
+### 【差异化 5 维】
+
+1. 辅助/强调色：<取法 + 从哪个气质推导>
+2. 中性冷暖偏色：<冷灰 / 中性 / 暖灰 + 理由>
+3. 圆角性格：<直角 / 微圆 / 大圆，全页统一>
+4. 排版性格：<字重对比 / 字号跨度 / 字间距 / tabular-nums 用法>
+5. 装饰母题（视觉 DNA）：<2-3 个贯穿全页的视觉基因>
+
+### 【反默认说明】
+
+<一句话：本方案与「统一灰白底 + 8px 圆角卡片 + 系统字体 + 蓝色强调」的默认脸在哪 ≥3 个维度不同>
+
+### 【图标策略】
+
+<内联 SVG 语义集（默认）/ 用户提供的 iconfont URL（opt-in）；描边风格；只作功能用途>
+
+---
+> 下一步：交 `yida-custom-page`（native）或 `yida-canvas-custom-page`（Canvas），按 `references/design-system.md` / `canvas-design-system.md` 的 token/组件把以上方向落成 JSX。
+> 具体色值、圆角像素、间距、组件样式一律以 `design-system.md` 为准；本决策块只定方向与差异。
+```

package/yida-skills/skills/yida-page-uiux/workflow/step-0-nav-shape.md

@@ -0,0 +1,39 @@
+# Step 0：导航形态判定
+
+> 决定要不要跟应用框架融合、要不要自带导航壳。这是页面类型之上的**前置条件**，先于 Step 1。
+
+先确认这个自定义页**运行时是否隐藏了应用导航**，它决定了主色策略和是否需要自建导航。
+
+## 怎么判定
+
+- 页面配置为隐藏导航：发布时用 `openyida update-form-config <appType> <formUuid> false "<页面标题>"`（第 3 参 `isRenderNav=false`），或访问地址带 `?isRenderNav=false`。
+- 用户诉求里出现「沉浸式 / 独立页 / 全屏 / 门户首页当应用入口 / 大屏 / 分享页 / 不要宜搭那圈框」等，通常意味着导航隐藏。
+- 不确定时按「导航可见」这个更安全的默认走，并在决策块里标注假设。
+
+## 两种形态的策略分叉
+
+| | 导航可见（默认） | 导航隐藏（`isRenderNav=false`，沉浸/独立/门户/大屏） |
+|---|---|---|
+| **页面角色** | 嵌在应用框架内的一块内容区，左侧/顶部还是宜搭的应用导航 | 页面即整个视口，应用框架的导航已消失，页面就是完整体验 |
+| **主色策略** | **跟随应用品牌**（`var(--color-brand1-*)`），与应用框架无缝融合，别违和 | **不必严格跟品牌**，可自立一套完整视觉体系（尤其大屏/分享/科技风）；品牌色仍是安全默认，但允许换主色相。**语义色（成功/警告/错误）永远固定**，去 AI 味红线照样生效 |
+| **导航责任** | 无需自建，应用导航负责跨页跳转 | **必须自带导航壳**：应用导航没了，页面要自己承担应用级导航 |
+
+## 导航隐藏时的自带导航壳要点
+
+- **壳型选择**：顶部标签栏 / 左侧边栏 / 顶部条 + 面包屑——按信息广度选，别只堆一个孤零零的返回按钮。
+- **多视图切换**：单个自定义页内用本地状态（native `_customState.activeView` / Canvas `useState`）或 URL hash 切换多个视图区块，做出「一个页面即一个小应用」的多样化导航，而不是一屏到底。
+- **跨页跳转**：需要跳到别的自定义页/表单时，用 [field-and-url-reference.md](../../../references/field-and-url-reference.md) 的地址模板拼完整 URL，并把导航项参数合并进去；跳目标自定义页必须带 `?isRenderNav=false` 保持沉浸，不要用会丢参数的裸 `router.push(formUuid)`。
+- **配置闭环**：只要页面内自绘应用级导航，发布后必须执行 `openyida update-form-config <appType> <formUuid> false "<页面标题>"` 隐藏宜搭原导航，并验证最终 URL 仍带 `isRenderNav=false`。
+- **移动端**：侧边栏在窄屏要能收起为抽屉/底部标签，仍走 `isMobile` 响应式。
+
+**导航壳形态选型**：侧边栏 / 顶部 / 顶部+侧边混合 / 浮动胶囊 / 标签页——按顶级模块数量和是否常驻选。选型表、每种形态的骨架、选中态、移动端收敛、native + Canvas 代码示例见独立 skill [yida-nav-shell](../../yida-nav-shell/SKILL.md)。
+
+> 导航壳的**视觉方向**仍走 Step 1–6（多为 workbench/门户形态）；导航壳的**形态与实现**（选型、多视图切换、URL 拼接）见独立 skill [yida-nav-shell](../../yida-nav-shell/SKILL.md)，交 `yida-custom-page` / `yida-canvas-custom-page` 落地。
+
+## 产出
+
+在决策块「导航形态」一行记录：导航可见（跟品牌融合）/ 导航隐藏 `isRenderNav=false`（视觉自立 + 自带导航壳，说明壳型、隐藏原导航配置方式、导航项公共 URL 参数）。
+
+## 下一步
+
+→ [Step 1：页面类型判定](step-1-page-type.md)

package/yida-skills/skills/yida-page-uiux/workflow/step-1-page-type.md

@@ -0,0 +1,25 @@
+# Step 1：页面类型判定
+
+> 第一优先，决定后续所有决策。不同页面类型的信息架构、密度、焦点完全不同，**必须先锁类型再定风格**。
+
+只读命中的那一个 scene 文件（遵循「只读必要文档」原则，不要一次读全部）：
+
+| 页面类型 | 路由到 | 布局骨架 | 信息密度 | 焦点元素 |
+|---|---|---|---|---|
+| 工作台 / 门户首页 | `references/scenes/workbench.md` | 欢迎区 + 核心指标 + 快捷入口 + 我的待办 | 中 | 指标 + 快捷入口 |
+| 数据看板 / 驾驶舱 | `references/scenes/dashboard.md` | KPI 卡组 + 图表 + 排行/明细 | 高 | 关键 KPI |
+| 列表 / 管理页 | `references/scenes/list.md` | 筛选栏 + 表格/卡片 + 分页 + 详情抽屉 | 高 | 数据表 |
+| 详情 / 展示页 | `references/scenes/detail.md` | 单对象深度展示，叙事编排 | 低-中 | 主图/主对象 |
+| 官网 / 落地页 / 品牌展示页 | `references/scenes/landing.md` | Hero + 差异化 Sections + 素材锚点 + CTA | 低-中 | 品牌/产品主张 |
+
+**判定信号**：看用户诉求里的核心动作——「进来先看什么、干什么」。综合门户/首页/工作台 → workbench；看数据趋势/大屏/驾驶舱 → dashboard；管理一批记录/搜索筛选 → list；深看某一个对象/展示单品 → detail；面向外部传播、品牌介绍、产品官网、活动/招商/方案落地页 → landing。信号冲突时按「用户明示 > 主数据形态 > 最典型场景」取默认，并在决策块里标注假设。
+
+> **边界提醒**：自定义页不做表单/录入 UI，所以没有「表单页」类型。需要录入/提交一律走原生表单（见 SKILL.md「重要边界」）。landing 也只负责展示与跳转，线索收集表单应跳/嵌入原生表单。
+
+## 产出
+
+在决策块「页面类型」一行记录：workbench / dashboard / list / detail / landing + 判定依据一句话。
+
+## 下一步
+
+→ [Step 2：意图解码](step-2-intent-decode.md)

package/yida-skills/skills/yida-page-uiux/workflow/step-2-intent-decode.md

@@ -0,0 +1,25 @@
+# Step 2：意图解码
+
+> 从需求里提炼这个页面的**气质**，为差异化提供依据。这是 Step 4 差异化决策和 Step 6 自检的溯源根据。
+
+- **2-3 个气质关键词**：如「稳重可信 / 轻盈现代 / 克制高端 / 温暖亲和 / 前沿科技」。
+- **3-5 条项目特定设计原则**：结合业务写具体约束，而非套话。例：
+  - 「进销存看板 → 库存预警必须一眼可见（红色只留给告警）」
+  - 「财务门户 → 金额用 tabular-nums 对齐，禁跳动」
+  - 「品牌落地页 → 首屏只讲一个主张，后续每个 section 都有不同构图和一个视觉锚点」
+  - 「经营驾驶舱 → KPI/图表/表格的所有数值必须带单位、量级和业务含义」
+
+避免写「简洁 / 现代 / 美观」这类放到任何页面都成立的空话——那样 Step 6 的「替换测试」会直接判不合格。
+
+## 场景专项提炼
+
+- **landing/官网类**：额外提炼「唯一主张」「受众」「转化动作」「可用素材」。没有真实联系方式、Logo、产品图、客户案例时，明确标为缺失，后续落地不能编造。
+- **dashboard/看板类**：额外提炼「核心判断问题」「Shell 复杂度」「页面原型」「关键指标口径」。没有口径时先用业务假设占位，并在决策块标注。
+
+## 产出
+
+在决策块记录「气质关键词」（2-3 个）+「项目特定设计原则」（3-5 条，具体到业务）；landing/dashboard 额外记录场景专项策略。
+
+## 下一步
+
+→ [Step 3：路由到 scene 文件](step-3-scene-routing.md)

package/yida-skills/skills/yida-page-uiux/workflow/step-3-scene-routing.md

@@ -0,0 +1,29 @@
+# Step 3：路由到 scene 文件
+
+> 只读 Step 1 命中的那一个 `references/scenes/*.md`，不要一次读全部。
+
+从命中的 scene 文件拿到：
+
+- 场景定位
+- 布局骨架 / 信息架构
+- 信息密度
+- 焦点（hero）元素
+- 组件套餐（映射 `design-system.md` / `component-jsx-guide.md`）
+- 该场景专属去 AI 味要点
+- 视觉方向决策块示例
+
+| 页面类型 | scene 文件 |
+|---|---|
+| workbench | [references/scenes/workbench.md](../references/scenes/workbench.md) |
+| dashboard | [references/scenes/dashboard.md](../references/scenes/dashboard.md) |
+| list | [references/scenes/list.md](../references/scenes/list.md) |
+| detail | [references/scenes/detail.md](../references/scenes/detail.md) |
+| landing | [references/scenes/landing.md](../references/scenes/landing.md) |
+
+## 产出
+
+在决策块记录「布局骨架」「信息密度」「视觉焦点」三行（来自 scene 文件，按本页信息调整）。如果 scene 给出 Shell/Archetype、Section 构图或素材锚点，也写入「场景专项策略」。
+
+## 下一步
+
+→ [Step 4：视觉方向决策](step-4-visual-decision.md)

package/yida-skills/skills/yida-page-uiux/workflow/step-4-visual-decision.md

@@ -0,0 +1,32 @@
+# Step 4：视觉方向决策（差异化引擎）
+
+> 读 [references/visual-decision-engine.md](../references/visual-decision-engine.md)，在场景可行域内做决策。这是全流程的核心，去 AI 味成败在此。
+
+## 宜搭的关键主色约束
+
+- **导航可见时，主色由平台品牌变量 `var(--color-brand1-*)` 控制，不能自由换主色相**（要跟应用框架融合），所以差异化落到下面 5 个维度。
+- **导航隐藏时（Step 0 判定为 `isRenderNav=false`）主色相可自立**，但语义色仍固定、去 AI 味红线仍生效，差异化 5 维照样要做（至少 3 个维度偏离「默认泛滥组合」）。
+
+## 差异化 5 维
+
+1. **辅助/强调色**（点缀色、图表色板、状态色的取法）
+2. **中性色冷暖偏色**（冷灰 / 中性 / 暖灰基底——最容易区分气质又最常被忽略）
+3. **圆角性格**（直角工程感 / 微圆克制 / 大圆亲和，全页统一一种性格）
+4. **排版性格**（字重对比、字号跨度、字间距、`tabular-nums`——字体不能换 Google Fonts，用这些造性格）
+5. **装饰母题 / 视觉 DNA**（2-3 个贯穿全页的视觉基因，遮住标题也能认出是同一套设计）
+
+引擎会要求：**强制第二选择**（跳过第一直觉）+ **反默认自检**（不像 90% 同类页）。
+
+## 场景专项决策（按页面类型追加）
+
+- **landing/官网类**：每个 section 必须选择不同构图手法，并声明视觉锚点（真实图片/产品图/数据图示/信息图/大字排版）。不要连续两个 section 都是左文右图/卡片三列。Hero 构图按品牌调性选择，不默认左文右图，也不默认满屏背景。
+- **dashboard/看板类**：先选 Shell，再选 Archetype。Shell 解决导航骨架（single_page/top_nav/side_nav/l_shaped/无壳），Archetype 解决内容叙事（总览/分析/监控/报告/对比/运营）。每个图表/KPI 必须能回答一个业务问题，并给可读洞察。
+- **workbench/list/detail**：沿用 scene 文件的焦点和组件套餐；如有多视图或隐藏导航，叠加 `yida-nav-shell` 的壳型决策。
+
+## 产出
+
+在决策块「差异化 5 维」区块逐条记录，并写一句「反默认说明」：本方案与「统一灰白底 + 8px 圆角卡片 + 系统字体 + 蓝色强调」的默认脸在哪 ≥3 个维度不同。landing/dashboard 还要补「场景专项策略」。
+
+## 下一步
+
+→ [Step 5：图标与素材策略](step-5-icon-and-assets.md)

package/yida-skills/skills/yida-page-uiux/workflow/step-5-icon-and-assets.md

@@ -0,0 +1,36 @@
+# Step 5：图标与素材策略
+
+> 核心：**默认内联 SVG，图标只作功能用途**。图标是最明显的 AI 味来源之一，纪律要硬。
+
+## 图标策略
+
+**默认方案：内联 SVG 语义集（零依赖、无死链）**
+
+- 维护一份「语义 → SVG path」映射表 + `renderIcon(name, size, color)` 助手（骨架复用 `../../yida-custom-page/references/assets-guide.md` 已有的 `renderIcon`）。
+- 描边粗细 / 端点风格随 Step 4 的视觉方向统一（细线=克制高端；2px 圆头=温暖亲和）。
+- 常用 B 端语义清单：`search 搜索 / filter 筛选 / add 新建 / edit 编辑 / delete 删除 / more 更多 / arrow 箭头 / check 完成 / warning 告警 / user 用户 / calendar 日期 / export 导出 / refresh 刷新 / setting 设置`。同页只用一套风格。
+
+**opt-in 方案：iconfont（仅在用户提供自己的项目 URL 时）**
+
+- 用 `this.utils.loadStyleSheet(url)` 加载，**URL 必须是用户提供的 `at.alicdn.com` / `alicdn.com` 项目地址**（该域在 `alicdn.com` 下，符合 CDN 安全规范）。
+- ❌ **禁止 AI 编造任何 iconfont URL**——编造的地址要么 404、要么指向他人图标集，是死链和安全风险源。
+- 用户没有现成图标集时，引导用户自助：iconfont.cn 建项目 → 加入图标 → 「查看在线链接」发布 → 把生成的 `//at.alicdn.com/t/c/xxxxxx.css` 粘回来。拿到后才 opt-in。
+
+**图标纪律（去 AI 味硬约束）**
+
+- 图标**只作功能用途**：按钮、状态、导航、可点操作。
+- ❌ 禁止**每个章节/卡片标题前配一枚装饰性线性图标**——人做设计很少这样，AI 特别爱这么干，是最明显的 AI 味来源之一。
+- ❌ 禁止用 **emoji 当图标**。
+- 同一页面只用一套图标风格（描边粗细、端点、填充方式统一）。
+
+## 素材（图片/音效）
+
+需要图片/音效时，参考 `../../yida-custom-page/references/assets-guide.md`：优先无署名素材库（Unsplash/Pexels/Pixabay/Mixkit），生产资源上自有 CDN，遵守 CDN 安全规范（只用 `g.alicdn.com`/`alicdn.com` 或企业自托管，禁 `fonts.googleapis.com`/`cdn.jsdelivr.net`/来源不明 CDN）。
+
+## 产出
+
+在决策块「图标策略」一行记录：内联 SVG 语义集（默认）/ 用户提供的 iconfont URL（opt-in）；描边风格；只作功能用途。
+
+## 下一步
+
+→ [Step 6：去 AI 味自检](step-6-deai-selfcheck.md)