Office Web UI System 是一个用于构建或改进运营型 Web 界面的技能，主要面向运营仪表盘、管理工具、CRM/ERP、CRUD、报表以及记录管理类界面，适合信息密集的工作流和仪表盘场景。其核心目标是创建一个清晰的运营界面，支持用户浏览、筛选、比较、编辑和管理记录，并在设计过程中保留可用空间与产品既有的视觉识别。
用途与页面定位 该技能要求先确认页面的核心任务和主导区域。它把 dashboard/report（仪表盘/报表）、CRUD/list（增删改查/列表）、workspace/detail（工作区/详情）以及 form/wizard（表单/向导）作为组合设计的参考。对于不熟悉的页面类型，可查阅 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 覆盖区分开。
委托与审批 默认在主对话中运行。委托可能增加用量：在使用子代理之前，需要就提议的代理数量和范围获得明确批准；在该批准范围内可复用，扩大已批准数量或范围之前需再次询问。
适用场景与限制 该技能适用于运营型密集界面及其相关状态与验证流程。其限制包括：未提供关于具体收费、价格、支持平台、性能效果等方面的信息，暂未提供；扫描脚本仅做定位映射，不验证可访问性；渲染不可用时只能报告限制。