博然精选 设计与视频工程开发
Web 界面规范走查：按行号验收体验
使用这技能的好处
界面问题变成 file:line 清单，验收不再靠感觉。
技能摘要
Web 界面规范走查技能把界面验收从「感觉还行」变成可定位的缺陷清单。Agent 需对照 Web Interface Guidelines（无障碍、焦点态、表单、动画、文案与触控目标等）审查指定文件，并以 file:line 格式输出问题与修复建议。它适合在功能合入前做一次结构化 UX/a11y 审查，也适合在改版后回归。对内容站与工具页，走查能减少键盘陷阱、对比度不足、仅图标按钮缺标签等常见故障，从而提升真实可用性与搜索质量信号（可访问性与体验相关性）。本技能与「前端设计规范」互补：一个管品味方向，一个管规范合规。主要读者包括前端工程师、QA、产品设计。该技能以本站仓库内 SKILL.md 维护，归入「设计与视频、工程开发」，强调可验收、可复用的 Agent 工作流。请结合本页步骤在真实任务中验证后再固化到团队约定。
博然AI · Skill Web 界面规范走查：按行号验收体验
适合谁
- 前端工程师
- QA
- 无障碍专员
- 产品设计
- UI 工程师
- React
- Vue
- 设计工程
- 技术负责人
- 测试工程师
- 设计师
- UI 设计师
- 视觉设计师
- 动效设计师
- 前端工程师
- QA
- 无障碍专员
- 产品设计
- UI 工程师
- React
- Vue
- 设计工程
- 技术负责人
- 测试工程师
- 设计师
- UI 设计师
- 视觉设计师
- 动效设计师
这样用它
- 改完 UI 后指定文件或 glob，说「按 Web 界面规范走查这些文件」。
- 要求输出按严重级别排序，且每条带 file:line 与复现说明。
- 把清单当验收门禁：高优先级项修完再构建或发布。
- 对表单与弹层重点核对标签、焦点陷阱与异步更新的 aria-live。
- 改代码前先写出验收标准与禁止事项，再让 Agent 按本技能约束施工，避免「看起来能跑」的半成品。
- 合并前要求 Agent 给出变更摘要、风险面与回滚点；不确定就停在评审，不要直接推生产。
安装与来源
- 本技能为博然站点自维护内容，源文件位于仓库 .agents/skills/web-design-guidelines/，随站点实践迭代，本页不提供第三方外链。
- 在 Cursor 或 Claude Code 中加载对应 Skill 目录后，使用本页「这样用它」中的触发语调用。
- 更新站点栏目或规范后，应同步修订 Skill 正文，保证 Agent 读取到的约束与线上流程一致。
- 验收时核对输出是否符合 Skill 内的硬性规则（禁词、字段齐全、格式约束等），不满足则要求返工。
- 该技能仅服务本站内容与工程流程，不作为对外开源分发包；引用时请注明博然AI笔记。
本技能为博然站点自维护内容，详情见上方安装步骤；本页不提供外部仓库链接。