UI Design Brain
此技能提供了一个包含 60 多个 UI 组件模式的精选知识库，这些模式源自 component.gallery，并融入了最佳实践、布局指导和用法规则。它用真实的设计系统知识替代了通用的猜测，用于生成界面。
在编写任何 UI 代码之前，请查阅此技能以选择正确的组件并遵循其最佳实践。阅读 components.md 以获取完整参考。
何时使用此技能
当用户要求构建、设计或生成以下内容时应用：
- 网页、着陆页、营销网站
- SaaS 仪表盘、管理面板、设置页面
- 表单、数据表格、导航结构
- 模态框、抽屉、弹出框或覆盖层模式
- 任何 React、HTML/CSS 或 Tailwind UI 组件
设计理念
每个生成的界面都应感觉现代、极简、可直接投产 — 而不是像模板。
核心原则
- 克制优于装饰。 更少的元素，更高的精致度。空白空间是一种特性。
- 排版承载层次。 将独特的展示字体与简洁的正文字体配对。最大限度地提高标题和标签之间的字重对比。
- 一个强烈的色彩时刻。 首选中性调色板（暖白色、近似黑色、柔和的中间色调）。引入一个自信的强调色。如果它看起来能出现在海报或书籍封面上，那它很可能经得起时间考验。
- 间距即结构。 使用 8 像素网格。更紧密的间距将相关元素分组；宽敞的间距让主要内容的呼吸空间更足。
- 可访问性不可妥协。 WCAG AA 对比度最低要求。焦点指示器。语义化 HTML。键盘导航。
- 没有通用的 AI 美学。 避免：紫色配白色渐变、Inter/Roboto 默认字体、均匀间距卡片网格和千篇一律的布局。每个界面都应感觉是为其特定上下文而设计的。
质量标准
输出应达到顶级 SaaS 公司资深产品设计师的水平：
- 清晰的视觉节奏，带有有意的非对称性
- 明显的交互反馈（悬停、焦点、激活状态）
- 优雅的边缘情况处理（空状态、加载中、错误）
- 响应式设计，无断点伪影
工作流程
步骤 1 — 识别组件
阅读用户的请求，确定需要哪些 UI 组件。参考 components.md，通过名称或别名查找每个组件。
常见映射：
- "导航" → Header, Navigation, Breadcrumbs, Tabs
- "表单" → Form, Text input, Select, Checkbox, Radio button, Button
- "数据显示" → Table, Card, List, Badge, Avatar
- "反馈" → Alert, Toast, Modal, Spinner, Progress bar, Empty state
- "输入" → Text input, Textarea, Select, Combobox, Datepicker, File upload, Slider
- "覆盖层" → Modal, Drawer, Popover, Tooltip, Dropdown menu
步骤 2 — 应用最佳实践
对于界面中的每个组件，遵循参考文档中的最佳实践。广泛适用的关键规则：
布局
- 单列表单 — 扫描速度更快
- 重复行（列表、表格）中一致的垂直通道
- 图标和操作使用固定宽度插槽，即使为空也应保留
- 卡片：媒体 → 标题 → 元数据 → 操作 层次结构
交互
- 按钮：动词优先的标签（“保存更改”，而不是“提交”），每个区域一个主要按钮
- 模态框：始终提供 X、取消和 Escape 关闭；锁定焦点；关闭时归还焦点
- 提示：4-6 秒自动消失，允许手动关闭，新提示堆叠在顶部
- 开关：仅立即生效 — 在需要保存的表单中使用复选框
排版与间距
- 严格的标题层次（h1 → h2 → h3），每页一个 h1
- 移动端最小 44 像素触摸目标
- 标签位于输入框上方（垂直表单）或旁边（水平表单）
- 占位符文本作为格式提示，绝不能替代标签
状态
- 空状态：插图 + 有帮助的标题 + 主要操作按钮
- 加载中：骨架屏 > 旋转加载动画（300 毫秒延迟后显示）
- 校验：失去焦点时内联显示，而不是每次按键时
- 禁用元素：视觉上可区分但仍可读
步骤 3 — 选择设计方向
选择最符合用户意图的样式预设，如果不够明确则询问：
现代 SaaS（默认）
- 中性调色板，一个强烈强调色
- 8 像素网格，充足的空白空间
- 干净、专业、宽敞
苹果级极简
- 近乎单色，暖灰色
- 大字号层次，展示文字紧凑字距
- 大量空白空间，微交互（150–250 毫秒 ease-out）
企业 / 公司
- 信息密集，区域划分清晰
- 紧凑间距尺度（4/8/12/16/24 像素）
- 强大的表单处理，完全键盘可导航
创意 / 作品集
- 大胆、表现力强，视觉个性鲜明
- 不对称布局，戏剧性的尺寸对比
- 编辑式排版，鲜艳的强调色
数据仪表盘
- 数据密集，优化可扫描性
- 跨行一致的垂直对齐
- 清晰指标层次：KPI → 趋势 → 详情
步骤 4 — 生成代码
按照以下规则编写可直接投产的代码：
栈： React + Tailwind CSS（除非用户另行指定）
间距： Tailwind 间距尺度（p-2, gap-4 等），基于 8px 网格
颜色： 使用 CSS 变量或 Tailwind 配置保持调色板一致
排版： Tailwind 文本工具；通过 Google Fonts 使用表现力字体组合
状态： 为所有交互元素实现悬停、焦点、活跃、禁用状态
响应式： 移动端优先；在 375、768、1440 像素宽度下测试
可访问性： 语义化 HTML，必要时添加 ARIA 属性，焦点管理
组件快速参考
以下是最常用的 15 个组件。要获得完整的 60+ 组件参考及其最佳实践、别名和布局示例，请参阅 components.md。
| 组件 | 何时使用 | 关键规则 |
|---|---|---|
| Button | 触发操作 | 动词优先标签；每个区域一个主要按钮 |
| Card | 表示一个实体 | 媒体 → 标题 → 元数据 → 操作；阴影或边框，二选一 |
| Modal | 聚焦注意力 | 锁定焦点；X + 取消 + Escape 关闭 |
| Navigation | 页面/章节链接 | 最多 5–7 项；清晰的激活状态 |
| Table | 结构化数据 | 固定表头；数字右对齐；可排序列 |
| Tabs | 切换面板 | 2–7 个标签页；激活指示器；移动端转为手风琴 |
| Form | 收集输入 | 单列；标签在上方；失去焦点时内联校验 |
| Toast | 简短确认 | 4–6 秒自动消失；破坏性操作提供撤销 |
| Alert | 重要状态 | 语义色 + 图标；最多 2 句话 |
| Drawer | 辅助面板 | 右侧用于详情，左侧用于导航；桌面端 320–480 px |
| Search input | 查找内容 | Cmd/Ctrl+K 快捷键；防抖 200–300 毫秒 |
| Empty state | 没有数据 | 插图 + 标题 + 操作按钮；积极正向的表达 |
| Skeleton | 加载占位符 | 匹配实际布局形状；闪烁动画 |
| Badge | 状态/元数据标签 | 1–2 个词；状态用药丸形状；有限的调色板 |
| Dropdown menu | 操作/导航选项 | 7±2 项；破坏性操作放在最后并标红 |
需要避免的反模式
永远不要生成以下内容 — 它们标志着通用、低质量的 UI：
- 彩虹徽章 — 每个状态都是不同的亮色，没有语义含义
- 模态框嵌套模态框 — 对于复杂流程使用页面或抽屉
- 禁用的提交按钮且无解释 — 始终指示缺少什么
- 可预测布局使用旋转加载动画 — 使用骨架屏代替
- “点击这里”链接 — 链接文本必须描述目标位置
- 桌面端的汉堡菜单 — 空间允许时使用可见导航
- 自动推进轮播 — 让用户控制导航
- 仅占位符的表单字段 — 始终使用可见标签
- 等权重的按钮 — 建立主要/次要/第三级层次结构
- 极小文字（< 12 px） — 正文字体最小 14 px，推荐 16 px