Aitishiku.com- 📌Skill基础信息
- 名称：Web Interface Guidelines（网页设计规范审查）
- 简称：web-design-guidelines
- 来源：社区第三方（作者 Schalkez）
- 运行宿主：仅限 VoxAgent 平台（通过
skills install命令安装） - 核心定位：自动审查前端代码是否符合行业设计规范，适用于 UI 走查、无障碍检测、设计规范审计等场景
- 🧩内部核心组成
- 核心组件：
- 动态规则库：每次执行时从 Vercel Labs 官方仓库实时获取最新规范（[源地址](https://raw.githubusercontent.com/vercel-labs/web-interface-guidelines/main/command.md)）
- 文件扫描引擎：支持直接指定文件或通过交互式选择文件
- 规则匹配器：将代码与规范逐条比对
- 输出格式：采用简洁的
文件:行号格式标记问题点
- 🛠安装与启用方式
# 在 VoxAgent 环境执行
skills install --user Schalkez/voxagent前置要求：
- 需联网以获取最新规范
- 需具备文件读取权限
- 📋标准工作流
- 用户触发指令（如 "review my UI"）
- Skill 实时拉取 Vercel 最新设计规范
- 扫描目标代码文件（支持通配符或交互式选择）
- 逐行比对代码与规范条款
- 输出标准化问题报告
- ⚠️关键限制、缺陷、注意事项
- 平台限制：仅限 VoxAgent 生态
- 动态依赖：必须保持网络通畅以获取规则库
- 审查范围：仅覆盖 Vercel 官方规范，不包含 WCAG 等第三方标准
- 生产环境：适合预发布审查，不建议直接集成到 CI/CD 流水线
- ✅适用场景 & ❌不适合场景
| 适用场景 | 不适用场景 |
|---|---|
| 个人项目快速规范检查 | 需要自定义规范的企业项目 |
| 前端代码质量预审 | 需要深度语义分析的场景 |
| 教育用途演示 | 离线开发环境 |
| 开源项目合规检查 | 需要实时交互反馈的 IDE 集成 |
如何安装
skills install --user Schalkez/voxagent通用安装教程：在哪里输入上面的命令
上面的命令本质是在「终端 / 命令行」中调用技能管理器，把该 Skill 下载并注册到你的 AI 工具。各主流工具打开终端的位置不同，按下面操作即可：
- 打开工具自带的终端面板，或系统终端（macOS「终端」、Windows「PowerShell」、Linux「Terminal」）。
- 把上面的安装命令复制进去，回车运行，等待下载与注册完成。
- 重启或重新加载 AI 工具，让新安装的 Skill 被识别。
- 新建对话并触发：直接描述用途，或通过该工具的技能 / 斜杠菜单选中此 Skill。
Claude 桌面版（macOS / Windows）
桌面版没有内置命令行，Skill 需通过 Claude Code CLI 安装。打开系统终端，先执行 npm install -g @anthropic-ai/claude-code，再运行上面的安装命令；完成后完全退出并重新打开 Claude。
Claude Code（终端 CLI）
直接在项目目录的终端里运行上面的命令即可。也可先输入 claude 启动交互界面，再在对话中引用该 Skill（/ 斜杠菜单或直接描述用途）。
VS Code（含 GitHub Copilot）
打开终端面板：菜单「终端 → 新建终端」，或快捷键 Ctrl+`（macOS 为 ⌃+`）。在终端里运行上面的命令；装完后执行「重新加载窗口」（Ctrl+Shift+P → Reload Window），让 Copilot 等扩展识别新技能。
Cursor
底部「终端」面板（Ctrl+`）即是内置终端。粘贴运行上面的命令，完成后在命令面板执行「Reload Window」刷新，再开始对话。
Windsurf
底部「终端」面板运行命令；也可直接使用其内置 Agent 终端，在对话侧执行安装。
其他工具（ChatGPT、本地脚本等）
不支持本地终端的产品，可先在本机终端完成安装，再在对话中描述该 Skill 的能力让其调用；不同工具的命令格式请以其官方文档为准。
风险提示
自动扫描未发现高危命令、隐私抓取或数据外传行为。仍建议安装前快速浏览仓库代码。