ui-design

name	ui-design
description	用于设计、实现或评审 UI 视觉质量，适用于任意项目中的布局、层级、密度、色彩、动效、状态、组件组合和截图验收；当需要 Nil Design 风格时，使用其克制、语义 token 驱动、light/dark 自适应的视觉语言。

设计 UI

当任务依赖视觉质量、信息层级、交互状态或截图验收时使用这个技能。它是通用 UI 设计技能；需要 Nil Design 风格时，按下方 token、层级和状态规则设计。

工作模型

• 先明确界面类型：工作台、文档页、组件示例、表单流程、数据列表、工具面板、落地首屏或游戏/可视化。
• 明确第一眼应该识别的主内容、主操作和状态。
• 从现有设计系统、tokens、组件库和相邻页面继承风格；没有系统时再建立最小视觉规则。
• 视觉正确性重要时，用浏览器截图确认桌面/移动、light/dark、hover/focus/disabled 和溢出换行。

Nil Design 视觉语言

• 以 OKLCH token、语义 utility 和 light-dark 自适应为基础，而不是硬编码色值。
• 中性 canvas 和 surface 承载大面积界面，品牌色用于强调、焦点、选中和关键操作。
• 层级主要靠间距、字号、字重、边框、轻阴影和对齐建立，不靠大面积渐变或装饰图形。
• 圆角克制，常规控件偏紧凑；卡片用于重复项、模态层、浮层或有语义的工具表面。
• 状态必须完整：hover、active、focus-visible、disabled、selected、error、loading 在 light/dark 下都成立。
• 文案和真实内容结构优先；避免模板化 dashboard、无意义图标排、占位假数据和只为氛围存在的背景。

场景偏好

• 应用和工作台优先密度、扫描、对齐和重复操作效率；不要默认做营销 hero。
• 文档站服务阅读、导航和示例运行；自定义视觉不应干扰正文、代码块和搜索。
• 组件示例用最少装饰展示行为和状态，让使用者看懂 API。
• 落地页可以更表达性，但第一视口要有真实产品、对象或内容锚点。

动效与响应式

• 动效解释状态、层级、路由、打开/关闭或焦点变化；优先 transform / opacity，并尊重 reduced motion。
• 固定格式 UI 要有稳定尺寸，避免 hover、label、icon、loading 文本导致跳动。
• 文本必须在移动端和桌面端都不重叠、不被按钮或图标挤坏；长词要有可控换行或收缩策略。

评审清单

• 主内容和主操作能在几秒内识别。
• 色彩、间距、半径、阴影和字号来自系统或清晰规则。
• light/dark 对比度和状态一致。
• 控件目标尺寸稳定，focus 可见，disabled 仍可理解。
• 没有 UI 卡片嵌套卡片、无意义装饰、文本溢出或布局重叠。