前言¶

改完一版前端，常见问题不是「能不能跑」，而是对照不上可访问性、焦点、移动端和性能上的约定：自己翻规范费时，纯靠模型凭印象又容易漏项。下面介绍 SkillHub 上的「网页设计指南」——在 Agent 会话里加载后，会先从固定源拉取最新规则，再对你指定的文件做逐项对照，并按 file:line 形式输出问题。

这是什么¶

「网页设计指南」是面向 UI 代码审查、无障碍检查、设计与 UX 审计的 Agent Skill，坐标为 @org-02qudk26/web-design-guidelines，当前版本 1.0.0，分类 design-media，来源标注为 enterprise，由 智雨科技 在 SkillHub 发布；Skill 包内说明其能力基于 Vercel 的 Web Interface Guidelines（元数据作者为 vercel，发布说明中对应上游 vercel-labs/agent-skills）。标签 requires_api_key=false，安装与调用不依赖额外 API Key。

SkillHub 页面简介（与 SKILL 描述一致）：在审查 UI 代码、检查可访问性、审计设计或 UX、或按 Web 界面最佳实践校验站点时使用。

核心功能¶

Skill 本体为通用 SKILL.md 工作流，不做本地规则硬编码，而是每次审查前联网获取规则文本。

1. 拉取最新规范：通过 WebFetch 访问下列地址，读取当前全部规则与输出格式说明。

https://raw.githubusercontent.com/vercel-labs/web-interface-guidelines/main/command.md

2. 读取待审文件：用户给出文件路径或 glob；未指定时，Agent 应询问要审查哪些文件。
3. 逐项对照：将文件内容与已拉取的 Guidelines 比对。
4. 统一输出：发现问题时采用规范要求的简洁 file:line 格式（具体字段以 command.md 为准）。

发布说明中归纳的适用能力方向包括：UX、无障碍、响应式、网页性能与交互规范；并明确其为审查与改进辅助，不能替代浏览器、屏幕阅读器或真实用户测试。

安装与启用¶

安装 SkillHub CLI¶

若尚未安装，可先检查版本：

command -v skillhub && skillhub --version

未安装时可执行官方完整安装脚本（见 SkillHub 安装文档）：

curl -fsSL https://skillhub-1388575217.cos.ap-guangzhou.myqcloud.com/install/install.sh | bash

安装本 Skill¶

安装时必须用 --dir 指向当前 Agent 的 skills 目录，否则默认落在 ./skills/ 可能不会被识别。

skillhub install @org-02qudk26/web-design-guidelines --dir ~/.cursor/skills/

常见客户端 skills 路径（摘自官方安装文档，按你实际使用的客户端选择其一）：

• Cursor：~/.cursor/skills/
• Claude Code：~/.claude/skills/
• Codex：~/.codex/skills/ 或项目下的 .agents/skills/

也可让 Agent 按 SkillHub 页面提示，参照 https://skillhub.cn/install/skillhub.md 完成安装。安装后若客户端未自动加载新 Skill，按所用客户端说明重启或刷新会话。

典型用法¶

用户侧只需说明「要审哪些文件」并触发 Skill；Agent 侧流程在 SKILL 中已固定：

1. 从上述 command.md URL 拉取最新 Guidelines。
2. 读取用户指定的文件（或先确认路径/模式）。
3. 应用全部规则并输出 findings。

发布说明中的示例场景（可据此组织提示词，路径换成你的仓库文件）：

1. 检查落地页是否存在可访问性与移动端问题。
2. 审核表单的标签、错误提示、键盘操作与焦点状态。
3. 上线前对页面做 UX、动画、图片与性能相关检查。

示例提示（Cursor 中 skills 已安装到对应目录）：

请使用网页设计指南 Skill，审查 src/pages/landing.tsx 和 src/components/SignupForm.tsx

若 Skill 支持 argument-hint 为 <file-or-pattern>，也可在调用时直接带上文件或 glob。

适用场景与注意¶

适合：前端/全栈在 PR 或发版前做规范化 UI 审计；需要对照无障碍与 Web 界面最佳实践但不想手工维护 checklist 的团队。

限制：

• 依赖 Agent 能成功 WebFetch 上述 GitHub raw 地址；网络或权限失败时无法拿到最新规则。
• 输出质量取决于被读文件是否覆盖真实 UI（仅审组件源码时，部分运行时问题仍要靠浏览器验证）。
• SkillHub 统计（以抓取资料为准）：评分 100000，下载 1885；页面展示安装数为 0，以商店实时数据为准。

结尾¶

「网页设计指南」把 Vercel Web Interface Guidelines 的拉取、对照与 file:line 报告嵌进 Agent 工作流，适合在改 UI 代码时做结构化自查。官方 Skill 页与 API 入口：

• https://www.skillhub.cn/skills/org-02qudk26/web-design-guidelines
• https://api.skillhub.cn/org-02qudk26/web-design-guidelines