企业官网建设流程全解析

• AI 技能
• AI 评测
• 前端

如果你正在用 AI 写前端界面，web-interface-guidelines 审查命令可以帮你把关最后一环：它让 AI 编程 Agent 按照 command.md 中 17 组规则，对你的 UI 代码做逐行体检——缺失的aria-label、违规的transition: all、没写尺寸的图片……都会被以file:line格式精确定位，输出一份高信噪比的审查报告。

什么是 web-interface-guidelines 审查命令 🩺

web-interface-guidelines 是 Vercel 开源的一套Web 界面开发规范，覆盖交互、动画、布局、表单、性能、设计等维度。仓库由 4 个核心文件组成：

理解这套组合的关键：command.md 负责"写完后审"，AGENTS.md 负责"写的时候就守"，两者形成闭环。

一键安装：把审查命令装进你的 AI 工具

command.md本质是一个 Markdown 格式的 Slash Command，头部 frontmatter 定义了命令名与参数提示：

--- description: Review UI code for Vercel Web Interface Guidelines compliance argument-hint: <file-or-pattern> ---

（见 command.md）

install.sh 会自动检测本机安装了哪些 AI 工具，并将命令写入对应目录：

• Claude Code / Cursor / OpenCode / Amp：写入各自的commands目录
• Gemini CLI：自动转换成 TOML 格式命令文件
• Windsurf：追加到全局规则global_rules.md
• Antigravity：转换成SKILL.md技能格式

没有匹配工具时，脚本会提示你直接参考 README.md 中的说明，把 command.md 作为 Prompt 手动使用。如需 clone 仓库获取文件，地址是https://gitcode.com/gh_mirrors/we/web-interface-guidelines。

用法：一条命令开始逐行体检

安装完成后，在项目里直接输入：

/web-interface-guidelines src/components

也支持传入单个文件或匹配模式。命令会要求 Agent 阅读目标文件，对照规则逐条检查，并且刻意要求输出简洁、高信噪比——"为 brevity 牺牲 grammar"（见 command.md）。

command.md 逐段拆解：17 组检查规则 🔍

这是 command.md 的核心部分（command.md），按主题分为 17 节，每组都是可直接判定的硬规则：

其中 Anti-patterns 清单 特别实用——它列出 12 种"看到就该报警"的写法，相当于一份 Code Review 快查表。

审查报告长什么样：file:line 定位 + 极简输出 📋

command.md 末尾明确规定了输出格式（command.md）：按文件分组、file:line定位（VS Code 中可直接点击跳转）、只说问题不说废话、没有问题的文件标✓ pass。实际效果类似：

## src/Button.tsx src/Button.tsx:42 - icon button missing aria-label src/Button.tsx:18 - input lacks label src/Button.tsx:67 - transition: all → list properties ## src/Card.tsx ✓ pass

这种格式对新手很友好：不需要理解长篇解释，打开对应行直接修即可。

进阶：搭配 AGENTS.md 实现"生成即合规"

审查是事后把关，而 AGENTS.md 把同样的规则浓缩成MUST / SHOULD / NEVER三级指令（例如"NEVER:transition: all"），放进你的项目根目录后，AI Agent 在生成代码时就会主动遵守规范。

推荐的两步工作流：

1. 写：项目根目录放 AGENTS.md，让 Agent 按规范生成交互
2. 审：提交前跑一遍/web-interface-guidelines <路径>，把漏网的问题一次性清掉

新手上手建议 💡

• 从单个组件开始：先审一个目录（如src/components），熟悉报告格式后再扩大范围
• 重点关注高频问题：反模式清单里的transition: all、无 label 表单、<div onClick>导航是新手最常踩的坑
• 配合规范正文学习：审查报告只告诉你"哪里错了"，README.md 中的完整规范会解释"为什么"，两者对照看提升最快
• 框架差异：规则大多框架无关，但部分条目针对 React/Next.js（如 Hydration Safety），其他框架可酌情跳过

常见问题

这个命令会修改我的代码吗？不会。它只做审查并输出报告，所有修改由你自己（或指示 Agent）完成。

非 React 项目能用吗？可以。绝大多数规则（无障碍、焦点、表单、性能、排版）是框架无关的纯 HTML/CSS/JS 规则，仅 Hydration 等少量条目是 React 专属。

规则会不会过时？规范被明确标注为"living, non-exhaustive list"（见 README.md），建议定期 pull 更新 command.md 保持规则最新。

• AI 技能
• AI 评测
• 前端