全部技能 / 设计 / web-design-guidelines
设计 · vercel-labs/agent-skills

web-design-guidelines

Review UI code for Web Interface Guidelines compliance. Use when asked to "review my UI", "check accessibility", "audit design", "review UX", or "check my site against best practices".

风险提醒：黄色 · 留意使用AI 侦查报告
作者 vercel-labsGitHub vercel-labs/agent-skills ↗Stars 30898许可 无 LICENSE 文件：agent-skills 仓库 HEAD 树 0 个 license 命中（git ls-tree 复核），gh api license=null。注意：其运行时规则源仓库 vercel-labs/web-interface-guidelines 为 MITcommit 063bee94c3
agent 宿主通常会约束 skill 执行权限；风险提醒为 AI 侦查观点，不构成质量或安全保证。第三方 skill 仅作拆解与展示，安装使用风险自负，版权归原作者。

1实现原理 · 为什么它能做到

薄壳型 skill：目录内唯一文件是 1.2KB 的 SKILL.md，自身不含任何规则条目，全部规则与输出格式指令在运行时从远端拉取

skills/web-design-guidelines/SKILL.md（git ls-tree -r HEAD 该路径仅此一文件）
Fetch fresh guidelines before each review: ``` https://raw.githubusercontent.com/vercel-labs/web-interface-guidelines/main/command.md ``` Use WebFetch to retrieve the latest rules. The fetched content contains all the rules and output format instructions.
注：skill 目录没有 references/ 或规则数据——『规则+输出格式』这一知识本体被外置到另一个仓库的 command.md，SKILL.md 只扮演加载器

工作机制 = 4 步纯 prompt 编排：拉取指南 → 读用户指定文件 → 逐条比对规则 → 以 terse file:line 输出

skills/web-design-guidelines/SKILL.md
1. Fetch the latest guidelines from the source URL below 2. Read the specified files (or prompt user for files/pattern) 3. Check against all rules in the fetched guidelines 4. Output findings in the terse `file:line` format
注：零脚本零可执行代码；一切由 agent 依提示词执行。文件范围由用户以 <file-or-pattern>（frontmatter argument-hint）给出，未给则反问

真正决定行为的远端 command.md 是给 agent 的完整指令（含 $ARGUMENTS 占位、13 组规则、反模式清单、输出格式示例），从 main 分支拉取且不 pin 版本

运行时拉取内容 https://raw.githubusercontent.com/vercel-labs/web-interface-guidelines/main/command.md（2026-09-06 实读；源仓库 vercel-labs/web-interface-guidelines，MIT，846★，pushed 2026-08-18）
--- description: Review UI code for Vercel Web Interface Guidelines compliance argument-hint: <file-or-pattern> --- # Web Interface Guidelines Review these files for compliance: $ARGUMENTS Read files, check against rules below. Output concise but comprehensive—sacrifice grammar for brevity. High signal-to-noise.
注：SKILL.md 与 command.md 双层 frontmatter 同构（description/argument-hint 一致）：SKILL.md 负责把 agent 带到远端指令，远端指令才包含 Accessibility/Focus/Forms/Animation/Typography/…/Hydration/Content & Copy 等 13 组约百余条规则与反模式清单

审查粒度：逐文件分组、给行号定位（VS Code 可点击），通过的文件显式标 ✓ pass，无问题则不解释、无前言

同上 command.md（运行时拉取）
Group by file. Use `file:line` format (VS Code clickable). Terse findings. ```text ## src/Button.tsx src/Button.tsx:42 - icon button missing aria-label … ## src/Card.tsx ✓ pass ```
注：输出格式指令同样来自远端（『Output findings using the format specified in the guidelines』），不在 skill 目录内

2核心能力

01UI 代码合规审查（可访问性/性能/UX/动效/i18n/hydration 等 13 组规则逐条比对）
02审查前实时拉取最新指南（每次执行都取 main 分支，不进 skill 发布周期）
03反模式显式标记（user-scalable=no、onPaste preventDefault、transition:all、outline-none 无替代、div onClick 等 14 类）
04terse file:line 结构化输出（按文件分组、行号可点击、✓ pass 表示通过、无前言）
05审查范围控制：接受文件/glob 参数；未指定时要求 agent 询问用户而非默认全仓扫描
06定位即修复建议的取舍纪律（『State issue + location』，修复不明显才解释，避免噪音）

3外部依赖

类型依赖
network审查规则源（行为定义体）：WebFetch 每次审查拉取 vercel-labs/web-interface-guidelines@main 的 command.md
cliWebFetch（宿主内置抓取工具，SKILL.md 点名要求使用）——非 skill 自带/安装的 CLI
network规则仓库本体（运行时内容上游）：vercel-labs/web-interface-guidelines

4风险提醒 风险提醒：黄色 · 留意使用

风险提醒：黄色 · 留意使用
  • 行为不随版本锁定：运行时依赖未 pin 的 main 分支内容，同 commit skill 不同时刻审查结果可不同，复现与合规审计困难 — SKILL.md 引用 main 分支 URL（raw.githubusercontent.com/vercel-labs/web-interface-guidelines/main/command.md），无 SHA/hash 锁定
  • 远端内容即指令（供应链指令注入面）：规则与输出格式全文被模型当指令执行，上游仓库/域名被攻破即等同于被注入 — 『Check against all rules in the fetched guidelines』『Output findings using the format specified in the guidelines』——未见签名或版本校验；属 🟡 档下最值得留意的面
  • 仓库内部署 zip 为过期副本（缺 metadata 块），若打包/分发链路误用 zip 会分发旧版 — skills/web-design-guidelines.zip 内 SKILL.md 为 2026-01-14 版 1183B vs 当前 1231B
  • finding 质量完全取决于模型执行质量：无本地校验脚本兜底，逐条比对应答可能漏检/误报；审查代码进上下文后存在通用 prompt-injection（诱导不实 finding） — 能力是『4 步提示词 + 远端规则』，正确性无任何程序化保障
  • agent-skills 仓库无 LICENSE 文件（规则源仓库为 MIT，但 skill 分发仓库本体未声明许可） — gh api license=null；git ls-tree 全树 license 命中 0
风险提醒：黄色，留意使用。唯一外部动作是每次审查对公开 GitHub raw 端点的常规拉取（官方 vercel-labs 仓库、外发对象可预期、不涉及凭证），符合 🟡 档特征；无脚本执行、无凭证读取、无本地写入。留意点在于行为定义体（规则+输出格式）整体外置且不 pin——内容漂移/上游被投毒会直接改变 skill 行为，属指令信任面而非代码执行面；另注意 agent-skills 仓库本身无 LICENSE 声明。

5第二遍独立确认

  • [ok] 『目录仅 SKILL.md 一个文件』 — git ls-tree -r HEAD skills/web-design-guidelines/ 仅返回 SKILL.md；ls -la 亦确认。补充发现：skills/web-design-guidelines.zip 是仓库级跟踪的兄弟文件（不在子目录内），其内 SKILL.md 为过期版（2026-01-14，1183B，缺 metadata 块）
  • [ok] SKILL.md 引用真实性（How It Works / URL / WebFetch / Usage 段落） — 全文重读（1.2KB 全量），md5 确认工作副本==HEAD 版本（98087aed…），各引用段落逐字吻合
  • [ok] 『规则+输出格式在远端 command.md』是否成立、有无夸大 — 独立 read 拉取 raw.githubusercontent.com 端点成功：内容为完整指令（$ARGUMENTS 占位、13 组规则、14 类反模式、file:line 输出示例、✓ pass 标记），与 SKILL.md 描述一致；前端 description 声明『100+ 规则』（README.md:44 亦称 100+ rules）与实际规则面相符
  • [ok] 外部依赖仓库归属与许可 — gh api 复核 vercel-labs/web-interface-guidelines：确为同一组织、MIT、846★、pushed 2026-08-18；agent-skills 自身 HEAD 树无 LICENSE（ls-tree grep -ci license = 0）
  • [ok] 安全结论反例搜寻：隐藏脚本 / 额外网络调用 / 本地写入 / 凭证读取 — 全树（含 zip 内）无任何代码文件；SKILL.md 全文仅一处外部动作（WebFetch 上述 URL）；无凭证/写入指令；未发现遗漏的调用点。残余面确认为『远端指令信任』与『审查代码进上下文』两类注入，均已在 injection_surface 表述
  • [ok] meta 数据（stars/last_push/license）一致性 — gh api：30898★、license null、pushed_at 2026-08-28T13:36:31Z，与 HEAD commit 063bee9 提交时间（2026-08-28T13:36:07Z，+02:00 后同刻）一致

6结论

  • 规则永远最新：每次审查都重新拉取 main 分支指南，新增/修订的 web 最佳实践即时生效，不进发布周期
  • 规则面广而深：远端 command.md 覆盖 a11y、focus、表单、动效、排版、i18n、dark mode、hydration、安全区等长尾并附 14 类反模式清单
  • 输出纪律适配 agent 工作流：file:line 可点击定位、通过文件显式 ✓ pass、无前言无废话，结果可直接回灌 IDE
  • 极薄=极低维护面：零脚本零依赖，行为边界（一次 GET + 文件读取）一目了然，审计成本趋近零
    • 适合：需要紧跟最新 Web UI 最佳实践的代码合规审查场景（React/Next.js 等前端代码评审、上线前 UI 审计）；偏好『官方持续维护规则、skill 自身零维护』的团队；接受每次审查联网拉取、不要求审查结果可复现的环境。
    不适合：离线或锁版本环境（行为依赖每次在线拉取 main 分支）；需要自研/本地化规则集或严格审计留痕的组织；把它当『设计/生成』skill 用的场景——它只挑错不产出设计。
    安装 agent 直装可复制
    ① 本站镜像 更新 2026-09-06
    方式 A · 人下载镜像包下载 web-design-guidelines.tar.gz
    sha256: ec370ab42a34427f…
    方式 B · JSON 格式安装指南，复制给 agent
    安装指南
    agent 读 JSON 指南后会自动从本站下载安装，无需更多说明。
    ② 上游 GitHub · 原始来源
    能访问 GitHub？直接去上游安装（实时版，可能已更新）GitHub 原始 ↗
    本页镜像锁定 commit 063bee94c3；上游为实时仓库。
    来源信息 GitHub 原始
    作者 / 仓库vercel-labs / vercel-labs/agent-skills
    原始 GitHubvercel-labs/agent-skills ↗
    Stars30898
    最近推送2026-08-28
    本 skill commit063bee94c3
    许可无 LICENSE 文件：agent-skills 仓库 HEAD 树 0 个 license 命中（git ls-tree 复核），gh api license=null。注意：其运行时规则源仓库 vercel-labs/web-interface-guidelines 为 MIT
    本站信息
    收录日期2026-09-06
    分类设计
    侦查报告2026-09-06 · 2 遍
    本站镜像与 GitHub 原始是不同来源：本站锁定 commit 快照经 /r2 分发；GitHub 为实时上游，内容可能已更新。