specsfy-specialist-ui-design

界面设计

何时使用

• 用于定义或审查界面的层级、网格、外壳、信息密度、设计令牌、视觉状态、表格、表单和导航。
• 当界面可以正常使用，但布局妨碍信息浏览、比较、优先级判断或错误恢复时使用。
• 如果要确认工作流是否满足用户需求，不要使用此工具；应使用 $specsfy-specialist-ux-design 开展研究、梳理用户旅程和任务测试。
• 如果 React 实现可以基于可复制的 TSX 参考，请结合 $specsfy-specialist-react-ui-components 使用。

工作流

1. 加载 $specsfy-specialist-design-system，并在布局前阅读 DESIGNSYSTEM.MD。确认已与用户定义用户旅程和信息流。对于新页面或表单，记录主要任务、页面、字段、验证规则和选定的打开模式。如果没有视觉方向，采用文档中的默认设置；只有在缺少关于行为或任务的答案时，才重新回到 UX 阶段。
2. 在提出新的视觉语言之前，阅读已观察到的技术栈、设计令牌、组件、断点和当前截图。 如果已有设计系统，还要检查受影响的页面和工作流、导航、内容、权限及状态，然后再调整布局。 保留现有框架、基础组件、样式和本地约定。只有在用户确认变更，或技术栈没有可识别的基础时，才提出使用新库。
3. 确认用户、主要任务、使用频率、设备、信息密度和错误后果；按优先级排列内容和操作。
4. 对 CRUD 应用宏观矩阵：列表使用 PageHeader 和 DataGrid，详情使用 PageHeader 和 DetailLists，新建和编辑使用 PageHeader 及响应式双列表单分区。每个分区都包含上下文栏和字段面板；只有明确例外时才记录理由。
5. 在布局前梳理数据、单位、权限以及正常、loading、empty、partial、error、offline 和 permission denied 状态。
6. 选择与信息架构一致的外壳、导航和网格；使用 references/standards.md 中的矩阵。
7. 通过分组、对比、比例和留白定义层级，并将每项选择映射到语义设计令牌。
8. 在所有断点实现或说明组件和边界情况，避免创建与现有组件等效的变体。
9. 开发过程中，即使用户没有提出要求，也要检查系统的边框、间距、外边距、内边距和字体排版。比较相关状态和视口下的渲染结果、DOM 检查结果或其他等效方式。
10. 通过视觉和行为验证，确认实际内容、可读性、响应式表现、无障碍性和一致性。在任务的 VISUAL 条目中记录结果。

当实现使用 React 时，在确定布局后加载 $specsfy-specialist-react-ui-components，以选择 TSX 参考，而不是把视觉选择交给示例目录。

规范

• 仪表板应回答问题，而不是由装饰性卡片组成。
• 先展示概览，再呈现细节；将操作放在受影响的对象旁边。
• 使用表格进行密集比较，使用列表便于阅读，使用卡片展示不同实体。
• 在列表和详情之间导航时，保留位置、筛选条件和上下文。
• 展示数据的单位、周期、来源、更新时间和空状态。
• 将破坏性操作单独呈现、加以说明，并尽可能支持撤销。
• 定义语义化令牌，并采用有限的间距和字体排版比例。
• 通过数据、语言、令牌、节奏和状态塑造个性，而不是堆砌通用卡片。
• 在字段上方显示标签，并在字段下方用红色显示字段错误。
• 在宽屏断点下，相关字段使用两列布局；在移动设备上使用单列布局；长字段、帮助信息、上传和错误信息使用全宽布局。
• 将整个 DataGrid 行设为前往详情页的导航；确保内部按钮、复选框和菜单位于行链接之上。
• 所有页面都保留 Breadcrumb，其中显示当前团队、模块和页面。在 Laravel 中，调整现有 shell 已渲染的 Breadcrumb 或 Breadcrumbs。
• 在 CRUD 的列表、详情、创建和编辑页面中使用统一、组件化且可复用的 PageHeader。
• 列表中的 DataGrid 使用全宽布局，始终显示 ID 列，将整行设为指向详情页的链接，并在行内保留独立的编辑和删除按钮。

反模式

• 将指标分散到样式相同的卡片中，却不说明问题、周期或比较对象；页面虽然展示了数字，却无法帮助用户解读变化或确定优先级。
• 为每个页面新增颜色、间距或变体；这会削弱设计系统的通用词汇，并让全局变更难以预测。
• 使用占位符代替标签、使用没有无障碍文本的图标，或仅用颜色表示状态；随着交互和无障碍使用，含义会变得不明确。
• 为了让页面显得“整洁”而将常用操作藏进菜单；这会增加操作成本、降低可发现性，却不能减少实际复杂度。
• 对需要比较的列表使用卡片，或用一个孤立的标题代替 PageHeader。
• 在每个页面重复编写 PageHeader 标记、隐藏 ID、缩窄 DataGrid，或将编辑和删除操作放在记录行之外。

验证

• 在同一布局中比较正常、加载、空、部分数据、错误、离线和权限被拒绝等场景。
• 根据 CRUD 界面，检查 DataGrid、DetailLists、PageHeader 和表单在响应式两列分区中的表现。
• 检查每个页面中的 Breadcrumb，确保团队名称可见，并将当前项标记为页面。在 Laravel 中，确认复用了现有组件。
• 确认对 DESIGNSYSTEM.MD 的任何例外都已记录其适用范围。
• 测试长短内容、极端数值、扩展后的翻译，以及日期、货币和 timezone 偏好设置。
• 检查最低支持的视口、200% 缩放、重排、对比度、键盘操作、焦点和减少动态效果设置。
• 对照已发布的令牌和组件审查新增内容，并说明任何重复。
• 在实现过程中，检查相关状态和视口下的边框、间距、外边距、内边距和字体排版，并将结果记录在 VISUAL 项中。
• 如果调整过任何 React 资源，须与 $specsfy-specialist-react-ui-components 共同进行最终审查。
• 未通过关键状态和视口的屏幕截图或等效检查，不得宣称界面一致或具有响应式。

相关技能

• $specsfy-specialist-reui 用于免费目录中已有的 React 和 Tailwind 组合。
• $specsfy-specialist-interface-experience 用于在视觉组合之前梳理屏幕、操作和状态。
• $specsfy-specialist-nextjs 负责界定服务端/客户端边界和界面路由；本技能负责视觉组合和状态。
• $specsfy-specialist-prototyping 在最终实现前，以所需的最低保真度测试不同的组合方案。
• $specsfy-specialist-shadcn-ui 提供基础组件和变体；本技能负责决定其层级以及所用系统的一致性。
• $specsfy-specialist-ux-design 负责研究、用户旅程、信息架构和任务验证。
• $specsfy-specialist-react-ui-components 在组合和层级确定后提供 TSX 示例。
• $specsfy-specialist-design-system 在视觉组合之前提供宏观规则、默认设置和典型场景。
• $specsfy-specialist-web-accessibility 负责开展 WCAG、键盘和辅助技术审计。
• $specsfy-specialist-tailwind-css 在观察到的技术栈适用时，将设计令牌和变体转换为工具类。

阅读 references/standards.md，了解布局、密度、数据、令牌、状态和视觉审查规则矩阵。