用途:这是一份针对工具/仪表盘 UI 的缺陷类规避清单,每条规则都来自真实构建与审计周期中发现的 bug 或设计异味,应视为硬性约束而非建议。使用前需声明正在使用该技能检查布局。
主要能力:规则覆盖结构与层级、页脚/指标/文案、表格与列表、颜色与对比度、状态与导航、交互正确性、无障碍与触控、i18n 与主题等。完整规则集位于同目录的 layout-design-rules.md,为唯一事实来源。
使用方式:设计前将「结构与层级」「颜色与对比度」「去套路」作为约束写入设计计划,并说明哪些规则影响了方案;构建中执行页脚/指标/文案、表格与列表、状态与导航、交互正确性、无障碍与触控、i18n 与主题等章节;构建后运行检查清单,并在真实浏览器中按规则29对两种主题截图测试,按规则30用空/最小数据集测试。
构建后检查要点:无左边框强调条;无眉题大写标签;第三级标题真实存在且可区分;每条结论/摘要行增加结论或命名关联实体;每个指标有信息量或可点击筛选;表格可排序可筛选并使用等宽数字;最浅文本令牌在两种主题下对比度达4.5:1;每个应用位置有 URL 且刷新可精确恢复;每个带 display 类的组件有 [hidden]{display:none};委托处理器中提前返回前处理关闭/重置逻辑;SVG 交互元素有焦点环、键盘激活和点击提示;若存在 i18n 则两种语言键值对等。
冲突优先级:用户明确表述 > 本规则集 > 项目现有系统 > 个人偏好。若规则与仓库现有设计系统冲突,应标记而非静默改写。
边界:颜色对比度测量与修改归 design-tokens;用户可见文案措辞归 ux-writing;流程可用性归 nielsen-heuristics;艺术方向、调色板与字体选择归 design-tokens 和 brandkit;英俄微排版归 typography;有界状态变化的语义与反馈归 semantic-micro-interactions;滚动叙事结构归 narrative-scrollytelling;高级排版、动画库配方、ARIA 深度未覆盖,若安装了 interfaces 则遵从,否则说明未审查该领域。
审查输出格式:按严重程度、位置、修改前、修改后、原因报告;严重程度分 HIGH(阻断内容或操作、丢失状态、破坏支持的视口)、MEDIUM(损害层级、适应性或正确性)、LOW(孤立打磨)。一个根因一行,列出所有受影响位置,最多15条,不填充,无发现也是有效结果。另附「考虑但拒绝」2-5条真实候选及原因,以及「验证」说明实际检查了哪些规则及方式,未检查项列为未验证。结论为阻断、需修改或批准。审查默认只读,除非用户同时要求应用修复。