Web 界面指南审查
将以下提示词粘贴到你的 AI 对话框中:
请根据 https://skillhub.cn/install/skillhub.md,安装 @org-02qudk26/cn-web-design-guidelines-zh。
技能介绍
解决的问题
在 Web 前端协作中,界面实现经常缺少可执行的规则检查:组件结构、样式约定、交互细节、无障碍要求可能分散在模板、脚本和样式文件里。人工审查容易遗漏,而通用 lint 工具也未必覆盖项目约定。这个技能把审查聚焦到“指定文件是否符合 Web 界面指南”,帮助开发者快速得到可定位的问题清单。
工作方式
- 每次审查前,技能会先从指南来源 URL 获取最新规则,避免使用本地缓存的过期说明。
- 读取用户提供的文件或文件模式;如果没有指定文件,会先询问审查对象。
- 对照获取到的指南规则逐条检查文件内容。
- 以简洁的
file:line格式输出发现,便于工程师直接跳转到代码位置。
适用边界
- 它面向已有 Web 界面代码或前端资源的合规性审查,不是设计稿生成器,也不替代完整的可用性测试。
- 审查结果依赖每次获取到的指南内容;如果来源不可访问或规则变更,结论会随之变化。
- 输出以问题定位为主,通常不会自动重写代码。
使用场景
- 在 PR 合并前,对组件模板和样式文件做 UI 指南审查,拿到可跳转的问题位置。
- 接手陌生前端仓库时,用文件模式批量检查界面代码是否遵守既定 Web 指南。
- 修复视觉走查反馈后,复查对应 HTML/CSS/JS 文件是否仍符合指南规则。
- 把设计系统规则接入评审流程前,验证指定页面文件是否存在不合规项。
适合人员
- 负责前端组件库规范落地的工程师,需要在合码前定位不合规文件与行号。
- 做视觉走查的前端负责人,需要把界面指南检查变成可复用的代码审查步骤。
- 维护企业后台界面的开发者,需要确认新增页面符合内部 Web 界面约定。
- 参与代码评审的同事,需要快速获得 file:line 形式的规则问题清单。