ui-ux-pro-max

ui-ux-pro-max

将设计系统作为令牌、组件和交互的通用规则。复用项目现有系统进行维护和评审。仅当系统缺失或用户要求采用新方向时，才生成建议。

在 design-gate 下，使用调用方的规范门禁结果，取代独立的输出和编辑机制。将特定视角的结论纳入发现项或 review_focus，并为发现项使用稳定 ID。在访谈中，将决策字段补充到现有决策记录中。

选择工作类型

1. 评审现有界面： 将受影响的屏幕和交互与选定系统进行比较。返回发现项，不做编辑，除非用户要求修复。数据库搜索可选。
2. 在选定系统内实现： 将其令牌、组件和交互规则应用于所请求的改动。复用已确定的决策。仅搜索可能影响实现的细节。
3. 创建或保存新系统： 阅读 references/search-reference.md 中的生成和持久化命令。使用产品、行业、风格和用户要求作为搜索输入。
4. 解决具体的设计问题： 阅读 references/search-reference.md 了解领域或技术栈搜索。只有当查询或其中的视觉示例有助于任务时，才加载该文件。

使用现有项目技术栈或用户的选择。仅对没有选定技术栈的新产物使用 html-tailwind。

使用 frontend-design 进行定制视觉实现。使用 advanced-react 评审组件渲染、记忆化、上下文更新、过期闭包或请求竞争。此技能的 react 领域提供该评审所需的参考数据。

应用选定系统

对于已保存的系统，读取 design-system/<project-slug>/MASTER.md。检查 design-system/<project-slug>/pages/<page-slug>.md 中受影响页面的规则。页面规则优先于对应的主规则；其他规则以主规则为准。如果不存在页面文件，则使用主规则。

将数据库输出、生成的检查清单和示例值视为建议。结果应以用户要求、选定系统和项目令牌为准。调整建议时保留无障碍要求。

使用一致的图标，并通过官方来源核验品牌素材。保持交互反馈清晰、布局稳定。遵循项目的光标和动效惯例。

验证受影响的界面

针对已更改的页面和交互，使用一套检查项。整合相关系统规则、生成的检查项和以下要求，避免重复检查：

1. 对比度易读、键盘焦点清晰可见、带有标签和图像替代文本，并提供颜色之外的提示。
2. 图标一致、交互反馈清晰，并支持减少动态效果。
3. 布局具有响应性、移动端没有意外的水平滚动，且固定元素不会遮挡内容。

共享颜色或模式行为发生变化时，检查支持的浅色和深色模式。局部更改时，检查受影响区域在其支持模式下的表现。

对未更改的区域复用现有证据。修正后，重新检查受影响的行为。仅当改动或故障表明存在更广泛的风险时，才扩大检查范围。报告已测试的范围，以及不受支持或未经测试的模式。