Web界面指南审查（web-design-guidelines）：用最新官方指南逐行审查你的 UI 代码
- 它是什么：一个专门“挑毛病”的审查型 AI 技能，把 UI 代码对照最新版 Web 界面指南逐条比对，直接告诉你哪一行、哪条规则不达标。
- 怎么工作：每次审查前先联网拉取最新指南规则，再读取你指定的文件，输出
文件:行格式的简洁问题清单，不用你手工翻文档。 - 适合谁用：前端开发者、UI/UX 设计师、需要做无障碍与设计审计的技术负责人，以及想在上线前做一次“体检”的独立开发者。
- 最大差异点：规则不写死在本地，而是每次实时获取，天然跟随指南更新，避免“拿三年前的规范审今天的代码”。
- 使用门槛：只要会用一句话描述需求（如“审查我的 UI”“检查可访问性”），并给出文件或匹配模式即可，无需配置规则集。
该技能叫什么？如何一键安装 AI 技能提升开发效率？
技能中文名：Web界面指南审查Skill 技能英文名：web-design-guidelines 技能ID：13710
它解决的是一个很具体的痛点：UI 代码写得对不对、合不合规范，长期以来只能靠人肉翻规范文档、靠资深同事 Code Review 时凭经验“感觉不对”，或者靠零散工具各管一段（可访问性一个工具、设计规范又一个工具）。这个技能把“拉取最新指南 + 读取代码 + 逐条比对 + 输出定位到行的问题”打包成一次调用，让规范审查从“靠记忆”变成“可执行”。
一键安装的思路与步骤
AI 技能的安装本质上是“把技能挂到你的 AI 助手/客户端上”，让它在对话里被识别并调用。通用流程如下：
- 确认前提：你的 AI 客户端或开发环境支持安装外部 AI 技能（Skill），并且具备读取本地文件与联网抓取网页（WebFetch）的能力——因为本技能每次审查都要从源地址获取最新指南，联网能力是硬性前提。
- 找到入口：在技能市场/技能目录中搜索技能名
web-design-guidelines或技能ID13710，进入详情页点击安装或添加；具体命令、按钮位置与账号权限要求以官方说明为准。 - 完成授权：安装过程中如提示授予“文件读取”或“网络访问”权限，请按提示开启，否则技能无法读取待审查文件、也无法拉取指南。
- 验证是否生效：安装后新建一次对话，直接输入“用 web-design-guidelines 审查我的 UI”或给出一个文件路径/匹配模式。若技能正常响应并开始请求指南、读取文件，说明已生效；若它只是泛泛而谈而没有定位到文件与行号，通常是未真正调用技能或权限未开。
安装完成之后，日常使用就是“一句话 + 一个文件参数”，把重复性的规范核对交给它，人只负责判断与修改。
该技能的主要功能和特点
- 实时获取最新指南：审查开始前，先从
https://raw.githubusercontent.com/vercel-labs/web-interface-guidelines/main/command.md抓取最新规则。规则由上游维护，你不需要本地同步、升级或手动更新规则包。 - 按文件或模式审查：支持传入具体文件，也支持传入匹配模式批量覆盖，适合单文件精审与整目录扫查两种节奏。
- 规则全量比对：不是抽查几条常见问题，而是把获取到的指南中的所有规则逐条应用到目标文件上。
- 输出定位精确到行：结果以简洁的
文件:行格式呈现，看到问题就能直接跳到对应位置，省掉“全文搜索找哪一行”的环节。 - 交互式补全：当你没有指定文件时，技能不会瞎猜，而是主动询问“要审查哪些文件”，避免审错对象。
- 触发语义自然：说“审查我的 UI”“检查可访问性”“审计设计”“审查 UX”“根据最佳实践检查我的网站”都能唤起它，不需要背命令。
和普通工具相比，它强在两点：一是规则不僵化（每次取最新），二是审查动作被嵌进对话流——你可以在同一个上下文里让它审完再改、改完再审，形成“审—改—复审”的闭环，而不是在工具之间来回导出导入。
如何使用该技能？
整体是“四步走”的固定流程，技能内部已经封装好，你只需要给对输入。
第 1 步：唤起技能并给出目标
常见几种说法（任选其一）：
- “审查我的 UI，文件是
src/components/Header.tsx” - “检查可访问性：
src/pages/**/*.tsx” - “审计设计，帮我看看
app/checkout/page.tsx” - “根据最佳实践检查我的网站，先看
components/目录”
技能接受的参数提示为 <文件或模式>。
第 2 步：技能自动拉取最新指南
它会先从上面那个指南源地址获取当前版本的规则与输出格式说明。这一步不需要你干预，但需要网络可达；如果抓取失败，应以技能返回的提示为准处理。
第 3 步：读取文件并逐条比对
技能读取你指定的文件内容，然后把指南中的全部规则应用到该文件上。
第 4 步：读取 文件:行 格式的结果并修复
输出是简洁的定位清单，你按图索骥逐条修改即可。修改完成后，可以立即再喊一次“复审这个文件”，验证问题是否收敛。
一个可直接参考的输入示例
用户：审查我的 UI，文件是
src/components/LoginForm.tsx技能行为：抓取最新指南 → 读取该文件 → 应用全部规则 → 输出形如
src/components/LoginForm.tsx:42的问题定位清单。
使用小技巧
- 想覆盖全面，就用模式参数一次扫整个组件目录；想深入，就单文件反复审。
- 把“审查 + 修复 + 复审”放在同一个对话里，上下文连续，改动能被继承。
- 审查前先确认文件路径存在，路径写错时技能读取会失败，白白浪费一次调用。
同类型竞品对比分析
| 方案名称 | 定位 | 核心功能 | 安装/使用门槛 | 适用场景 | 优势与不足 |
|---|---|---|---|---|---|
| web-design-guidelines（本技能） | 对话式 UI 规范审查 | 实时拉取最新指南、读取文件、全规则比对、输出 文件:行 定位 |
需在支持技能的 AI 客户端中安装，且具备文件读取与联网能力；用自然语言调用 | 开发过程中随手审、Code Review 前的自检、小型团队缺少专职设计审查时 | 优势：规则实时更新、审查融入对话闭环、输出定位到行；不足：依赖外部指南源与网络，深度自动化流水线集成需另行设计 |
| Lighthouse | 页面级性能与最佳实践审计 | 性能、可访问性、最佳实践、SEO 多项打分 | 浏览器开发者工具内置或命令行运行，几乎零安装成本 | 上线前的整页体检、性能优化 | 优势：指标全面、报告直观、生态成熟；不足：面向运行中的页面而非源码，难以定位到代码行，规则覆盖与特定设计指南不完全对齐 |
| axe DevTools | 可访问性专项检测 | 自动化无障碍规则扫描、问题解释与修复建议 | 浏览器插件或集成进测试流程 | 合规检查、无障碍专项整改 | 优势：无障碍规则库专业、误报控制好；不足：聚焦可访问性单一维度，不覆盖整体界面设计规范 |
| ESLint + 无障碍类插件 | 代码静态检查 | 在编码阶段拦截语法与部分可访问性问题 | 需配置规则集与构建流程，有一定工程成本 | 团队统一代码规范、CI 卡点 | 优势：可进 CI 强制拦截、速度快；不足：规则偏“代码层”，对界面设计层面的判断有限，规则需自行维护更新 |
选择建议：需要源码级、设计规范维度、且规则常新的审查，用本技能；需要整页运行时体检，用 Lighthouse；需要无障碍合规硬门槛，用 axe DevTools 或静态检查插件。三者并不互斥，组合使用覆盖最全。
该技能的典型应用场景与实际体验情况
场景一：前端开发提交前的自检
角色：中级前端工程师。痛点：自认为写得没问题，Code Review 时被指出一堆界面规范问题，返工来回两三轮。使用方式：改完组件后直接说“审查我的 UI，文件是 src/components/CartDrawer.tsx”，拿到 文件:行 清单先自己修一遍再提交。实际体验：上手几乎零成本，因为不需要学新命令；效果取决于指南本身的覆盖面；注意事项是它输出的是“问题定位”，判断与改法仍需要你自己拍板。
场景二：设计师与开发的规范对齐
角色：UI 设计师。痛点：设计稿和实现之间总差一点，说不清差在哪。使用方式：让技能按模式参数扫一遍对应组件目录，把结果当成“实现与指南的差距清单”，再逐条和开发沟通。实际体验：把主观的“感觉不对”转成可逐条讨论的清单，沟通效率提升明显；注意审查对象是代码文件，不是设计稿。
场景三：小团队的 Code Review 前置关卡
角色：技术负责人。痛点：团队没有专职设计审查，Review 全凭个人经验，标准不稳定。使用方式：约定“提 PR 前先跑一次 web-design-guidelines 审查”，把结果贴进 PR 描述。实际体验：相当于给团队加了一层稳定的规范基线；注意目前流程偏人工触发，若要完全自动化进 CI 需要额外工程投入。
场景四：存量页面整改盘点
角色：独立开发者。痛点：接手老项目，不知道从哪开始改。使用方式：传入目录匹配模式，批量获取问题清单，再按影响面排序修复。实际体验：清单式输出很适合做整改台账；注意文件量大时建议分批审查，避免一次读取过多导致单次对话过长。
该技能能为用户带来的价值
- 把规范审查从“记忆活”变成“检索活”：规则不再依赖个人记忆和文档检索，每次审查都用最新指南，减少“我记得好像有这么一条”的不确定性。
- 压缩返工轮次：问题在提交前就被定位到
文件:行，把设计规范类问题从“Review 阶段发现”提前到“开发阶段发现”，越早发现修复成本越低。 - 降低规范门槛：不需要通读整套 Web 界面指南才能开始做审查，一句话就能调用，新人也能借助它拿到与资深同事接近的检查覆盖面。
- 提供可复用的沟通语言：
文件:行的清单天然适合贴进 PR、工单或聊天记录，设计、开发、评审三方看同一份事实清单，减少争论。 - 长期价值在于“规则常新”：指南由上游统一维护，你不需要维护一份会过期的本地规则集，检查标准随时间自动跟随，团队规范不会因为人员流动而倒退。
常见问题 FAQ
Q1：怎么安装这个技能？要不要命令行？
在支持 AI 技能的市场或目录中搜索 web-design-guidelines 或技能ID 13710 即可添加，具体安装命令与入口位置以官方说明为准。安装时请确保客户端具备文件读取与网络访问能力，否则技能无法拉取指南、也无法读取待审文件。
Q2：这个技能收费吗？
技能本身的功能描述中未涉及价格信息，是否收费取决于你所在平台与账号的计费规则，以官方说明为准。需要注意的是，它每次审查都要访问指南源地址，这部分只消耗你的网络与调用额度。
Q3：适合谁用？后端或产品经理能用吗？
最适合写 UI 代码的前端开发者、负责界面质量的设计师与评审者。产品或运营如果只是想确认“界面是否合规”，也可以用它拿到一份清单，但仍需开发配合修改代码。
Q4：它和 Lighthouse、axe DevTools 有什么区别？
本技能面向源码文件做设计规范维度的逐条审查，输出定位到行；Lighthouse 面向运行中的页面做整体打分；axe DevTools 聚焦可访问性单一维度。要做源码级整改就用本技能，要做上线前整页体检用 Lighthouse，两者可并行。
Q5：为什么每次都要“先获取指南”？会不会很慢或失败？
因为技能的设计就是把规则放在上游实时维护，确保审查依据永远是最新版本。代价是依赖网络可达性——若指南源抓取失败，本次审查可能无法完成，具体表现与重试方式以技能返回提示和官方说明为准。