Yida Design

yida-design

宜搭应用和页面视觉设计技能，输出 design.md。后续主题生成和页面开发都按这份设计实现。

先读已有需求、设计和应用主题，确定哪些地方需要调整。优先使用平台已有的主题变量，只在表达不了所需效果时新增变量，并写清哪些组件使用它；见 主题扩展规则。

导航默认沿用平台样式，像连续目录一样排列。只调整需要改变的颜色、尺寸和状态；边框、阴影可不设置，不要把每个菜单项做成输入框、按钮或卡片。改完后打开实际的数据管理页和业务页面检查，见 导航形状与密度的案例经验。

固定主题只写一套 token。CLI 让全局与平台 light、dark、white、gray 选择器共用同一个声明块，不为 is-light/is-dark 另配颜色。navTheme 按设计保存为应用配置，不能按主题名称猜测。

配色要按“文字＋所在背景”成对设计。正文、说明、表单标签、详情和搜索必须清楚；禁用色不能用于正常提示，品牌色不能直接当通用文字色。大面积画布和导航控制亮度、饱和度，强色留给局部重点。check-design 和带设计文件的主题生成会拦截已知低于 4.5:1 的文字组合，返回具体角色和 token；修复设计源后再生成，不自动改色。JSON 中 paletteContrast.unresolved 非空表示尚未确认，复杂颜色、图片与渐变仍需浏览器检查。

品牌变量必须完整，导航装饰可以省略。 design.md 提供 PC 品牌色阶 --color-brand1-1/2/3/5/6/9/10，CLI 同时生成移动端 --color-brand-1、--color-brand-2、--color-brand-3、--color-brand-4。最终 CSS 必须在全局 :root 中提供这 11 个可用颜色；移动端映射不必在 design.md 重复填写。生成和上传都会检查缺失、无效颜色及循环引用。报错时修复设计后重新生成，不能只替换主色后上传模板。

确定风格前，按设计方向比较以第一直觉为参照，发展两个更有表现力的方向，在当前规划轮次内选定。已有明确视觉要求时，在其范围内完善设计。

向用户说明设计时，写风格和适用场景：“设计主题风格为轻盈媒体栅格，适合产品展示型品牌官网。”风格名称与场景按当前项目填写；建议阶段使用“建议采用……风格”。

需要业务规划时调用 use_skill("yida-prd")。已有 prd.md 时直接读取其中的页面任务、区块和业务规则，再做视觉设计；查询业务字段或格式时，按需读取 yida-prd 的参考文件。

Fast、Plan 和单页设计使用相同的 UI 设计规则、主题变量和质量检查；流程只在编写方式与确认时机上有区别。共用 主题索引，按 共享主题选择规则 先读摘要、选中后读一份完整主题。

完整应用沿用需求分析阶段确认的模式与风格，按 设计模式路由 推进。Fast 使用下方视觉流程；Plan 使用 视觉分支 维护视觉事实，由 yida-app 生成方案并请用户确认；业务规划始终归 yida-prd。单页设计和主题调整直接继续。

---

入口快速路由（必读，先做设计对象判断）

进入本技能后，先判断设计对象，并按表中唯一动作执行。

---

用户选择暗色、黑色或夜间主题时，按 暗色主题浮层适配 检查浮层，并按 分割线弱背景 设计 --color-brand1-2 与标题文字：它是随内容明暗变化的品牌弱背景，不是固定近白色。不能只声明根级 --yida-divider-secondary-color 就认为组件内联引用已被覆盖。仅导航深色不触发整体暗黑适配。

主色实底分割线不沿用弱背景的文字配法：根据主色实底标题与字段标签，优先考虑白色/近白色标题与适合的局部品牌底，并与字段 label 的字体、字重、对齐和间距成组设计。不要机械地全页白字，也不要为突出章节把 label 弱化到难读。

Fast 视觉流程

输入为校验通过的共享 requirement-brief.json。沿用已确认的风格；业务规划与配色、组件样式同时准备，页面内容确定后补齐各页设计，由 yida-app 核对页面范围和设计引用。

完整应用输出一份应用级 design.md，包含主题、布局、组件、状态和响应式规则，三种流程共用 唯一输出契约：frontmatter 保存机器数据与 anchor 索引，完整规则只写在五章正文。Fast 手写并执行 check-design，Plan 使用紧凑契约由 CLI 生成并执行同一校验。页面实现同时读取业务 PRD 和视觉契约。

---

核心规则

修改已有设计时，只读取并更新相关章节、页面记录和 token。Plan 统一按 局部调整 执行；Fast 直接修改当前 design.md，再按主题更新命令同步已有 CSS，保留未改的正文和自定义样式。

1. 平台能力优先：数据录入、提交、编辑、审批、权限、字段校验走宜搭表单/流程；自定义页负责展示数据、呈现分析结果、放置业务入口、打开详情页，并串联表单、流程、报表和导航入口。
2. 美感提升保持功能契约：页面美化、视觉升级和页面重构默认只调整颜色、布局、密度、间距、视觉层级、素材和图标表达；现有数据源、字段映射、按钮动作、筛选逻辑、提交 URL、权限和业务状态保持原样。
3. 默认保留平台应用导航：普通自定义页、页面内 tab、分段、筛选和快捷入口都不触发 yida-nav-shell。PRD 的应用工作区选择自定义导航，或用户明确要求自绘应用级导航、隐藏应用导航时，写 appBlueprint.hideAppNav: 'y' 并交给 yida-nav-shell。独立前台选择自己的菜单时，同样进入 yida-nav-shell，但只配置该页独立展示，保留后台应用导航。用户只说全屏、无导航或 isRenderNav=false 时，只写页面级隐藏配置。
4. 同应用页面入口归导航：同应用页面优先放入平台导航或导航分组；自定义页内容区放当前页动作、原生表单新建/查看、外部链接和跨应用资源。
5. 表单入口响应式：新增/提交页 URL 默认使用页面级隐藏导航的 submission/{formUuid}?isRenderNav=false；详情页 URL 默认使用 formDetail/{formUuid}?formInstId={formInstId}&navConfig.layout=1180&isRenderNav=false，且 formInstId 必须来自真实数据记录并优先取 row.formInstId；PC 端默认在侧边抽屉中用 iframe 承载宜搭原生表单，抽屉默认半屏 50vw，提交页和详情页使用同一宽度规则；移动端整页或新页打开。
6. 主题文件：主题目录统一包含设计、CSS、表单布局三个文件，导出和生成参数见 命令与参数。Plan 使用 CLI 返回的 outputs.theme；Fast 和已有主题调整按 主题文件生成与更新 执行。按 共用主题规则 将已选风格落实为 token，并核对生成的 CSS。修改变量要回到设计源后重新生成、上传；仅 CLI 未覆盖且已核实选择器的样式覆盖可在 CSS 末尾小范围追加，不另写脚本生成或重写主题文件。
7. 默认主题先做业务判断：工作台、门户、列表、详情、普通看板和数据大屏默认都是浅底 / light 模式，但主色不固定为 podBlue 或 #1677ff；先根据行业、品牌、业务情绪和视觉目标做创意色彩判断，主题色可以是任意合法 CSS 颜色。只有用户明确说暗色/深色/夜间/高对比时才用深色沉浸。
8. 页面布局要到可实现粒度：每个页面至少写清顶部/左侧/主体/右侧/底部区域、核心组件、信息密度、主操作位置、PC/移动端差异和空/载/错态。
9. 页面丰富度建议：工作台沿用 PRD 已确定的内容和业务关系。综合工作台参考 8-10 个有独立业务价值的区块，不作为硬门槛；按任务覆盖和信息增量衡量丰富度，不用重复记录、入口或装饰凑数。区块依据信息关系采用不同且合适的表现形式，不要求每块换一种组件。
10. 工作台禁低密大卡片套路：工作台 / 业务首页不能用“标题 + 4 个等宽大 KPI 白卡 + 图标快捷卡 + 大空态白卡”撑首屏。按已确定的业务内容和信息关系安排主视图、分析区、操作区及快捷入口，不指定统一列表组合或固定双栏。空态保留该视图所需的上下文与可执行下一步，不铺大块空白卡片。
11. 按主题保持形状、密度与呼吸感：design.md 正文写清圆角、密度与呼吸节奏的具体消费方式和必要数值，优先采用选中主题的容器/控件形状与内距、组间距、列表行高。通用业务页参考值只补主题未定义项，不能用固定大圆角、padding 或 gap 覆盖主题。呼吸感来自对齐、分组、层级和节奏，不来自超宽空 KPI 框或空白卡。
12. 背景与内容层次清晰：正文说明主题如何用色差、细边界、共容器、留白或材质区分内容。同色画布与面板可通过明确边界和分组成立；渐变、玻璃、阴影按主题规则启用，不强制添加。
13. 模板与自由创意并列：始终支持自由创意，根据业务独立推演，不要求从模板选择。使用模板时，先按业务任务、信息拓扑选择风格，再按用户确认的色彩氛围协调页面、卡片、导航、填充、边界和交互。布局、圆角与材质可保留，模板固定灰阶和品牌色面积限制不能覆盖用户要求。“自然绿意”等整体风格不能缩减成只有按钮和 logo 变绿；明确只改强调色或忠实中性参考时才保持原画布。文字保留可读的中性层级，状态保留独立语义。
14. 应用主题统一：模板或项目 design.md 是整套视觉的唯一来源，导航的颜色、border、hover、radius、shadow 与其他界面一起定义；业务决定结构和交互需求，外观由整体主题表达。优先复用平台已有变量绑定，仅声明必要的导航覆盖，不要求完整变量清单或最低数量。不额外选择导航风格包，也不强制所有颜色由主色派生。按 整体主题规则 一起设计导航、应用框架、提交/编辑表单、记录详情和自定义页面。app-theme.css 保存完整主题变量与消费样式。YidaCodeCanvas 页面只在 YidaComp 内消费 --color-brand1-*、--color-group 和 --pod-*；严禁页面代码修改或向上层注入主题变量。应用包含表单或详情页时，读取 表单风格规则，将组件布局和只读详情样式写入 design.md；视觉值写入应用主题 CSS，结构写入表单配置。
15. 参考转成可执行选择：参考 Dribbble / 优秀案例时，落到主色、背景素材、首屏构图、信息密度、动线、区块数量和反默认点。
16. 页面文案和图标使用专业表达：渲染文案使用纯文本；图标只使用 lucide-react 或 @ant-design/icons 的具体组件，默认选择 lucide-react，并在 design.md 的 iconSystem 中写清业务动作、状态、导航和空态到图标组件的映射。emoji 不能改成 CSS 形状、字母占位、Unicode 符号或临时 SVG；如果需要图标，必须映射到上述两类库的具体组件。
17. 实现交接明确：设计产物只定义页面结构、视觉系统和验收标准；常规业务图表使用 yida-rechart；ECharts 例外只用于用户明确要求复杂 ECharts option 或维护旧图表。
18. 素材按页面分级：在 assetStrategy 中记录图片等级和槽位；需要素材时交给 yida-image-assets。