superior-ui

卓越 UI

打造契合该产品的界面。根据用户请求、现有设计依据、内容和任务流程来确定设计选择；不要强加统一的固定风格，也不要机械地禁用常见设计手法。

明确设计概要

开始编辑前，先确定：

• 主要用户以及此界面要支持的工作；
• 值得优先关注的内容和操作；
• 现有的设计规范来源：设计令牌、字体排印、组件、布局、品牌素材和已记录的决策；
• 实现约束、受影响的路由和状态；
• 必须保持不变的内容。

条件允许时，检查渲染后的界面。如果缺少设计方向，就做出最小且可撤销、同时符合产品的假设，并说明任何会对结果产生实质影响的选择。

确定视觉主张

用一句切实有效的话说明设计方向，例如：“低调的界面装饰搭配高信号状态色的高密度运营控制台。”这句话必须能约束层级、密度、字体、色彩、形状或动效等实际设计决策。避免使用适用于任何产品的氛围标签。

如果没有既定的视觉方向，请列出两到三个差异显著且符合产品的候选方案，并分别说明其对任务的适配性、定义特征和主要风险。除非用户明确要求并行设计多个概念，否则应在实施前选定一个主要方向。辅助风格可以影响某个局部细节，但不要把多种具名风格混搭成不协调的潮流拼盘。

如果任务需要创建新的视觉方向、改动多个组件或进行大幅视觉润色，请阅读 references/visual-system.md。如果要在具名 UI 风格中做选择、建立新的配色方案，或为主体、组件和字体角色分配颜色，也请阅读 references/style-and-palette-direction.md。对于范围明确的编辑，应沿用局部设计系统，不必加载这两份参考文档。

如果要构建或大幅重新设计落地页、首页、多分区营销页面或页脚，请阅读 references/page-closure-and-footer.md。应将页面结尾视为页面构成中经过刻意设计的一部分，但不要假设每个网站都需要大型多栏页脚。

如果要构建或大幅修改内容需要便于发现、链接或索引的公开页面，请阅读 references/semantic-html-and-search-discovery.md，包括落地页、首页、文章、文档、目录和公开详情页。除非产品约定另有要求，否则不要将私有仪表板和已认证工具纳入面向搜索的要求。

如果设计方向需要非对称构图、层叠纵深、编辑式张力或定制的触感组件细节，请阅读 references/expressive-composition-and-component-craft.md。这些模式应作为依据内容和任务而选用的方案，而非强制装饰或随机挑选的风格。

如果动效是体验的重要组成部分，包括动画导航、叠加层、滚动进入效果、协同状态转换或富有表现力的微交互，请阅读 references/motion-and-rendering-performance.md。动效应目的明确、易于访问，并与运行时成本相称。

围绕任务构建

• 从语义结构和信息顺序入手，再考虑装饰。
• 为每个区域赋予明确作用。删除那些仅为套用常见模板而存在的部分。
• 如果现有基础组件能够表达所需层级，就优先复用。只有现有契约无法满足需求时，才添加变体。
• 先通过间距、字体、对比度、对齐和分组来建立层级，再添加容器或效果。
• 让重复组件对应重复内容。不要强行把不同的信息放进相同的卡片。
• 保持响应式和无障碍行为完好。当其中任一方面构成请求的重要部分时，加载专门的技能。

当主要工作涉及用户旅程、信息架构、任务流程、跨屏连续性、反馈或恢复契约时，加载 superior-ux。普通的页面层级和视觉交互设计仍在此处处理。

维护产品完整性

当界面涉及仪表板、营销声明、表单、导航、异步数据或多种 UI 状态时，请阅读 references/product-integrity.md。

至少要做到：

• 绝不捏造指标、客户、评价、活动、合规性或目标页面；
• 确保控件可用，否则就移除它们，或如实标注为不可用；
• 在相关情况下，区分加载、首次使用、筛选后无结果、权限被拒、验证、错误和成功状态；
• 使用产品自身的词汇，编写具体的标签和操作；
• 保留用户数据，以及请求变更范围之外的现有行为。

交付前评审

从三个层面审视结果：

1. 页面： 主要任务是否一目了然？版面节奏是否经过设计？页面结尾是否在视觉和信息上都收束得当？
2. 组件： 每个组件是否都有充分理由占据独立边界、获得强调并具备交互？
3. 细节： 标签、图标、状态、焦点、对齐和内容是否诚实且一致？

质疑所有看起来像是套用通用模板的内容。有证据或功能依据时就保留；如果只是装饰习惯，就进行修改。

验证

测试已更改的交互和相关状态。检查有代表性的窄屏和宽屏视口、极端内容、键盘操作流程，并根据变更规模运行项目常规的 lint、类型检查和构建检查。报告具体结果，以及任何尚未验证的风险。

当加载、渲染、响应能力、打包体积或客户端内存是主要的衡量关注点时，加载 superior-performance。如果不需要专门进行性能调查，此技能仍涵盖常规的动效和渲染规范。