openyida yida-design
宜搭应用和页面视觉设计技能，输出 design.md。
完整应用沿用需求分析阶段确认的模式与风格，按 设计模式路由 推进。Fast 使用下方视觉流程；Plan 使用 视觉分支 维护视觉事实，由 yida-app 生成方案并请用户确认；业务规划始终归 yida-prd。单页设计和主题调整直接继续。
入口快速路由（必读，先做设计对象判断）
进入本技能后，先判断设计对象，并按表中唯一动作执行。
| 用户诉求 | 判定为 | 唯一动作 |
|---|---|---|
| 完整应用、多个角色、多页面、导航分组、首页/入口页、官网 + 看板 + 后台 | 完整应用视觉设计 | Fast 执行下方视觉流程；Plan 执行 视觉分支 |
| 单个自定义页要求好看、高级、品牌化、去 AI 味、页面太丑、不够惊艳 | 单页设计 | 读 page-design，确认当前页面和应用主题后输出设计补充 |
应用主题色、品牌色、全局换肤、--color-brand1-*、自定义主题 CSS、themeColor、navTheme |
主题色和 token 设计 | 读 workflow/step-2-theme-system.md 和 workflow/step-6-handoff.md，输出 themeProfile、应用主题文件和 token 契约 |
| 页面 / 主页面 / 首页 / 工作台 UI 设计 | 页面视觉设计 | 读取当前页面上下文，输出或更新 design.md |
用户选择暗色、黑色或夜间主题时，按 暗色主题浮层适配 检查浮层；仅导航深色不触发整体暗黑适配。
Fast 视觉流程
输入为校验通过的共享 requirement-brief.json。沿用已确认的风格；业务规划与配色、组件样式同时准备，页面内容确定后补齐各页设计，由 yida-app 核对页面范围和设计引用。
| 步骤 | 名称 | 功能描述 | 产出物 |
|---|---|---|---|
| 1 | 读取整理后的用户需求 | 读取业务对象、页面场景、明确范围、品牌和色彩偏好 | 视觉输入摘要 |
| 2 | 选择主题色和 token | 确定主色、辅助色、中性色、字体层级、组件基调和宜搭 token 作用域 | themeProfile |
| 3 | 页面结构和交互设计 | 根据用户需求中的页面场景确定布局骨架、区块、主操作、状态和响应式规则 | 低保真结构 + 交互路径 |
| 4 | UI 视觉和状态设计 | 从业务任务、信息拓扑和视觉 DNA 选择设计风格 | design.md 内容草稿 |
| 5 | 写入 design.md | 写入唯一视觉事实源和稳定 designRefs |
prd/<项目名>/design.md |
完整应用输出一份应用级 design.md，包含主题、布局、组件、状态和响应式规则，Fast 手写格式见 视觉输出契约；Plan 使用紧凑契约，由 CLI 生成完整文档。页面实现同时读取业务 PRD 和视觉契约。
核心规则
- 平台能力优先：数据录入、提交、编辑、审批、权限、字段校验走宜搭表单/流程；自定义页负责展示数据、呈现分析结果、放置业务入口、打开详情页，并串联表单、流程、报表和导航入口。
- 美感提升保持功能契约：页面美化、视觉升级和页面重构默认只调整颜色、布局、密度、间距、视觉层级、素材和图标表达；现有数据源、字段映射、按钮动作、筛选逻辑、提交 URL、权限和业务状态保持原样。
- 默认保留平台应用导航：普通自定义页、页面内 tab、分段、筛选和快捷入口都不触发
yida-nav-shell。PRD 选择自定义导航，或用户明确要求自绘应用级导航、隐藏应用导航时，写appBlueprint.hideAppNav: 'y'并交给yida-nav-shell。用户只说全屏、无导航或isRenderNav=false时，只写页面级隐藏配置。 - 同应用页面入口归导航：同应用页面优先放入平台导航或导航分组；自定义页内容区放当前页动作、原生表单新建/查看、外部链接和跨应用资源。
- 表单入口响应式：新增/提交页 URL 默认使用页面级隐藏导航的
submission/{formUuid}?isRenderNav=false；详情页 URL 默认使用formDetail/{formUuid}?formInstId={formInstId}&navConfig.layout=1180&isRenderNav=false，且formInstId必须来自真实数据记录并优先取row.formInstId；PC 端默认在侧边抽屉中用 iframe 承载宜搭原生表单，抽屉默认半屏50vw，提交页和详情页使用同一宽度规则；移动端整页或新页打开。 - 主题文件：Plan 直接使用 CLI 返回的
outputs.theme；Fast 和已有主题调整按 主题文件生成与更新 执行。主题 CSS 生成后只用Read查看目标 token、用小范围Edit逐组修改；不得用 Python、Node、Shell 或run_workspace_script脚本生成、复制、整文件重写、正则替换或 rethemeapp-theme.css，校验脚本只能读取并报告问题，不能改写主题文件。 - 默认主题先做业务判断：工作台、门户、列表、详情、普通看板和数据大屏默认都是浅底 / light 模式，但主色不固定为
podBlue或 #1677ff；先根据行业、品牌、业务情绪和视觉目标做创意色彩判断，主题色可以是任意合法 CSS 颜色。只有用户明确说暗色/深色/夜间/高对比时才用深色沉浸。 - 页面布局要到可实现粒度：每个页面至少写清顶部/左侧/主体/右侧/底部区域、核心组件、信息密度、主操作位置、PC/移动端差异和空/载/错态。
- 页面丰富度建议：工作台、首页、门户、看板、展示页和业务入口页推荐规划 8-10 个有业务目的的区块以上，例如上下文标题、状态摘要、主操作、筛选、任务列表、最近记录、动态流、洞察、提醒、空态行动、右侧上下文和底部辅助信息。区块数量不是硬门槛，窄场景、单任务页面或用户明确要求精简时可以更少，但要写清每个区块的业务目的和取舍原因。计数按“区块组”算，不按子项算：
KPI 卡片: 学生总数, 课程总数, 出勤率, 平均分只能算 1 个状态摘要区块，快捷入口: 录入学生/登记成绩/记录考勤/管理课程只能算 1 个动作区块；不能用重复 KPI 卡、重复快捷入口或大空白卡凑数量。 - 工作台禁低密大卡片套路：工作台 / 业务首页不能用“标题 + 4 个等宽大 KPI 白卡 + 图标快捷卡 + 大空态白卡”撑首屏。默认改成紧凑状态摘要条、任务/动态列表、最近记录、右侧上下文面板和高频动作；没有真实数据时也展示薄空态行 + 登记入口，不铺大块空白卡片。
- 默认圆润高密且有呼吸感：业务工具页默认使用圆润形状、紧凑信息密度和清晰呼吸节奏。
design.md必须写清roundedRule、densityRule和breathingRule：卡片 padding 必须大于 20px（默认 22-28px），卡片与卡片的 gap 必须小于 20px（默认 12-18px），卡片圆角范围 0-32px（业务卡片默认 20-24px），控件 10-14px，状态摘要 64-88px，动作条 40-56px，列表行 44-56px，空态 88-120px 内；页面边距、卡片 gap 和卡片 padding 要形成可扫读的分组节奏。呼吸感来自对齐、分组、层级和节奏，不来自额外 margin、超宽空 KPI 框或空白卡撑页面。 - 背景与卡片必须有层次对比：默认业务页背景保持浅色调、清爽但不能与卡片相近或相同。
design.md必须写清surfaceContrast：白色/浅色背景配有边框卡片；浅灰背景（如#F3F4F6）配白色无边框卡片；浅彩色背景（如浅蓝、浅暖灰）配白色无边框卡片；渐变背景配玻璃感卡片。禁止浅底白卡无边框、同色背景同色卡片或只有阴影没有色差/边框的层次。 - 设计风格先选后定制：先按业务任务、信息拓扑选择风格，再按用户确认的色彩氛围协调页面、卡片、导航、填充、边界和交互。布局、圆角与材质可保留，模板固定灰阶和品牌色面积限制不能覆盖用户要求。“自然绿意”等整体风格不能缩减成只有按钮和 logo 变绿；明确只改强调色或忠实中性参考时才保持原画布。文字保留可读的中性层级，状态保留独立语义。
- 应用主题统一：
app-theme.css只在应用级配置，由平台统一作用于应用壳、原生表单、详情页和自定义页面外层。YidaCodeCanvas页面只在YidaComp内消费--color-brand1-*、--color-group和--pod-*；严禁页面代码修改或向上层注入主题变量。 - 参考转成可执行选择：参考 Dribbble / 优秀案例时，落到主色、背景素材、首屏构图、信息密度、动线、区块数量和反默认点。
- 页面文案和图标使用专业表达：渲染文案使用纯文本；图标只使用
lucide-react或@ant-design/icons的具体组件，默认选择lucide-react，并在design.md的iconSystem中写清业务动作、状态、导航和空态到图标组件的映射。emoji 不能改成 CSS 形状、字母占位、Unicode 符号或临时 SVG；如果需要图标，必须映射到上述两类库的具体组件。 - 实现交接明确：设计产物只定义页面结构、视觉系统和验收标准；常规业务图表使用
yida-rechart；ECharts 例外只用于用户明确要求复杂 ECharts option 或维护旧图表。
参考文件
| 文档 | 覆盖范围 | 何时阅读 |
|---|---|---|
| 读取整理后的用户需求 | 业务对象、页面场景、明确范围、品牌和色彩偏好 | 完整应用必读 |
| 选择主题色和 token | 主题 token、色彩、字体、组件基调 | 涉及主题或视觉 |
| 页面结构和交互设计 | 布局骨架、内容区块、主操作、抽屉、响应式 | 页面设计 |
| UI 视觉和状态设计 | 设计风格选择、视觉 DNA、主题换肤、素材图标、空/载/错态、去 AI 味 | 输出前自检 |
| 写入 design.md | design.md 必填内容、稳定引用和完成条件 |
输出前 |
| page-design 单页设计 | 单页主题证据、页面级设计流程、输出补充字段 | 单个自定义页设计 |
| design.md 输出格式 | design.md 字段示例 |
Fast 写入前；Plan 定制时按需 |
| design.md 生成规则 | 从业务推演视觉 DNA，选择设计风格并按主题色换肤，生成应用级 design.md |
UI 视觉设计 |
| 视觉结构配方库 | 将高质量页面结构转成 visualScaffold 槽位，约束页面实现落地 |
UI 视觉设计 |
| 页面质量门禁 | 区块数量、源码槽位、低密大卡片、主题一致性和 pageSpecHandoff 检查 |
页面结构、视觉与交接阶段 |
| style-design 风格注册表 | 内置视觉 DNA 风格、选择评分、风险扣分、风格消费规则 | UI 视觉设计 |
| 应用结构参考 | 应用角色、导航、页面清单、页面/表单/流程资源蓝图 | 完整应用或主页面 |
| 应用主题与 token 参考 | 平台主题 key、候选主题、token profile | 需要主题 key 或 token |
| 应用主题 CSS 模板 | AI 可复制修改的品牌、Shell、页面、表格和导航 token | 生成自定义应用主题文件时必读 |
| yida-canvas-custom-page 样式实现指南 | 将 design.md 的 token、背景、圆角、密度和组件规则落到页面源码、antd、CSS、图表和控件状态 |
实现阶段 |
| 字段与 URL 参考 | isRenderNav=false、页面 URL、跨页跳转 |
拼接页面/表单 URL |