ui-design-brain

UI 设计指南

本技能提供了一个经过精选的知识库，涵盖 60 多种 UI 组件模式，内容源自 component.gallery，并融入了最佳实践、布局指导和使用规则。在生成界面时，它能以真实的设计系统知识取代泛泛而谈的猜测。

编写任何 UI 代码之前，请先查阅本技能，选择合适的组件并遵循其最佳实践。完整参考请阅读 components.md。

何时使用本技能

在用户要求构建、设计或生成以下内容时使用：

• 网页、着陆页、营销网站
• SaaS 仪表盘、管理面板、设置页面
• 表单、数据表格、导航结构
• 模态框、抽屉、弹出框或叠加层模式
• 任何 React、HTML/CSS 或 Tailwind UI 组件

设计理念

生成的每个界面都应显得现代、简约且可投入生产，而不是像模板。

核心原则

1. 克制胜过装饰。 元素宜少，细节要精。留白也是一种设计。
2. 用排版体现层次。 将有辨识度的展示字体与简洁的正文字体搭配。尽可能拉开标题和标签之间的字重差异。
3. 突出一种色彩。 首先使用中性色调（暖白、近黑色、低饱和度的中间色）。再加入一种鲜明的强调色。如果它适合出现在海报或书籍封面上，那么它大概经得起时间考验。
4. 间距构成结构。 使用 8 px 网格。较小的间距用于组合相关元素；较大的间距让主视觉内容更舒展。
5. 无障碍不可妥协。 对比度至少符合 WCAG AA 标准。提供焦点指示器。使用语义化 HTML。支持键盘导航。
6. 避免千篇一律的 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 操作；锁定焦点；关闭后将焦点返回原处
• Toast：4–6 s 后自动消失，允许手动关闭，新消息显示在最上方
• 切换开关：仅用于立即生效的操作——需要点击“保存”的表单应使用复选框

排版与间距

• 严格遵循标题层级（h1 → h2 → h3），每页仅使用一个 h1
• 移动端触控目标至少为 44 px
• 标签放在输入框上方（纵向表单）或旁边（横向表单）
• 占位符文本用于提示格式，绝不能代替标签

状态

• 空状态：插图 + 清晰易懂的标题 + 主要 CTA
• 加载：优先使用骨架屏，而不是加载旋转图标（延迟 300 ms 后显示）
• 验证：在失去焦点时进行行内验证，不要在每次按键时验证
• 禁用元素：视觉上应明显区分，但仍须清晰可读

第 3 步 — 选择设计方向

选择最符合用户意图的样式预设；如果不确定，请先询问：

现代 SaaS（默认）

• 中性色调，搭配一种醒目的强调色
• 8 px 网格，留白充足
• 简洁、专业、宽敞

Apple 级极简

• 近乎单色，采用暖灰色
• 字号层级鲜明，展示文字的字距紧凑
• 留白充足，搭配微交互（150–250 ms 缓出）

企业 / 公司风格

• 信息密集，区域划分明确
• 紧凑的间距比例（4/8/12/16/24 px）
• 表单处理稳健，完全支持键盘导航

创意 / 作品集

• 大胆、有表现力，视觉个性鲜明
• 非对称布局，尺寸对比强烈
• 编辑风格的排版，鲜艳的强调色

数据仪表盘

• 数据密集，便于快速浏览
• 各行保持一致的垂直对齐
• 指标层级清晰：KPI → 趋势 → 详情

第 4 步 — 生成代码

按照以下规则编写可用于生产环境的代码：

Stack:       React + Tailwind CSS (unless user specifies otherwise)
Spacing:     Tailwind spacing scale (p-2, gap-4, etc.) on an 8px grid
Colors:      CSS variables or Tailwind config for palette consistency
Typography:  Tailwind text utilities; expressive font pairings via Google Fonts
States:      Implement hover, focus, active, disabled for all interactive elements
Responsive:  Mobile-first; test at 375, 768, 1440 px
Accessibility: Semantic HTML, ARIA where needed, focus management

组件速查

以下是最常用的 15 种组件。如需查看包含最佳实践、别名和布局示例的完整 60 多种组件参考，请参阅 components.md。

组件	适用场景	关键规则
按钮	触发操作	标签以动词开头；每个区域只设一个主要按钮
卡片	呈现实体	媒体 → 标题 → 元信息 → 操作；阴影与边框二选一，不要同时使用
模态框	聚焦注意力	限制焦点；使用 X、取消和 Escape 关闭
导航	页面 / 区域链接	最多 5–7 项；清晰显示当前选中状态
表格	结构化数据	固定表头；数字右对齐；列可排序
标签页	切换面板	2–7 个标签页；显示选中状态指示器；移动端使用手风琴布局
表单	收集输入	单列布局；标签置于上方；失焦时进行行内校验
Toast 提示	简短确认	4–6 s 后自动关闭；对破坏性操作提供撤销功能
警示框	重要状态	使用语义化颜色和图标；最多 2 句话
抽屉	次级面板	详情置于右侧，导航置于左侧；桌面端宽度为 320–480 px
搜索输入框	查找内容	使用 Cmd/Ctrl+K 快捷键；防抖 200–300 ms
空状态	无数据时	配图 + 标题 + CTA；采用积极的措辞
骨架屏	加载占位	匹配实际布局形状；添加渐变动画
徽标	状态 / 元数据标签	1–2 个词；状态使用药丸形；限制颜色数量
下拉菜单	操作 / 导航选项	7±2 项；破坏性操作置于末尾并使用红色

应避免的反模式

绝不要生成以下内容——它们会让界面显得千篇一律、质量低下：

• 彩虹徽标 — 每种状态都使用不同的鲜艳颜色，却没有语义含义
• 模态框中嵌套模态框 — 复杂流程应使用页面或抽屉
• 没有说明原因的禁用提交按钮 — 始终说明缺少什么
• 在布局可预测时使用加载转圈图标 — 改用骨架屏
• “点击此处”链接 — 链接文字必须说明目标内容
• 桌面端使用汉堡菜单 — 空间允许时应使用可见导航
• 自动切换轮播图 — 让用户控制导航
• 只用占位符的表单字段 — 始终显示标签
• 权重相同的按钮 — 建立主要 / 次要 / 第三级层级
• 过小的文字（< 12 px） — 正文最小 14 px，建议使用 16 px