office-web-ui-system

办公 Web UI 系统

创建清晰的操作界面，支持扫描、筛选、比较、编辑和管理记录。保留可用空间和产品的视觉识别。

委派

默认在主对话中运行。委派可能增加用量：使用子 Agent 前，先就拟定的 Agent 数量和范围征得明确批准。在批准范围内可重复使用该授权；要扩大已批准的数量或范围时，需再次征求批准。

明确页面的用途

检查框架、组件库、设计系统源文件、共享外壳和代表性页面。根据请求和项目判断这是否是操作界面；只有在这一点仍不明确且会改变设计时才提问。

确定主要任务和主导区域。将仪表板/报告、CRUD/列表、工作区/详情和表单/向导作为布局参考。遇到不熟悉的页面类型时，请阅读 page-type-playbook.md。

对于基于截图的工作，确定哪些内容应当匹配，哪些应适应现有产品。提供的目标即为选定方向。

面向实际工作进行布局

• 明确标题、上下文、主要操作、筛选条件和数据层级。添加辅助面板前，优先保留表格和表单的宽度。
• 让密集的 CRUD 界面保持克制。只有在能帮助用户理解页面时，才采用醒目的摘要或主视觉设计。
• 按含义对指标分组，并在相关时明确日期范围、单位、比较项和下钻入口。避免加入与用户任务无关的装饰性统计数据。
• 复用共享组件、设计令牌、工具函数和动效规则。只有存在具体的视觉或行为缺口时，才添加局部例外。
• 支持相关的加载、空状态、错误、验证、选择、禁用和焦点状态。在受支持的主题和视口中，确保键盘操作可用、触控体验良好且内容易读。
• 根据已安装的框架和库调整基础组件；不要强行将新的外壳、胶囊式顶栏、玻璃风格或深色主题套用到风格统一的现有产品上。

设计组件时，请参考 visual-language.md、navigation-and-panels.md 和 component-recipes.md。涉及库内部实现或作用域样式问题时，请使用 framework-adaptation.md。

确保各区域易于发现

使用语义化标记、无障碍名称、现有组件边界或稳定的项目定位器来识别重要区域。只有在能解决实际发现问题时，才添加易读的语义类；不要仅为符合类名规范而统一无关标记。

添加这类类名时，请阅读 locator-class-contract.md。可选扫描器会将这些类名映射到文件：

python3 "<skill-directory>/scripts/scan_ui_locators.py" "<project-root>" --match layout-sidebar

如果直接搜索源代码即可定位目标，就直接搜索。扫描器不会验证无障碍性，也不能替代浏览器检查。

验证结果

遵循宿主的浏览器策略，并检查实际渲染的页面。截取能展示改动的区域或页面；进行前后对比或参考对比时，使用相同的视口、主题、账户和数据。只有在有助于解决重要疑问时，才为含义不明的图像添加注释。

检查层级、密度、溢出、文本适配、表格交互、键盘可见焦点，以及受支持的主题和响应式状态。覆盖深色模式时，检查实际渲染的库节点。修复与选定目标之间的重要差异；若无法渲染，则说明限制。

运行针对性的项目检查和相关回归测试。报告用户可见的改动、证据、浏览器界面和剩余问题；将手动截图与自动化 E2E 覆盖明确区分。