首页 / 全部技能 / 设计 / web-design-guidelines
English (EN)简体中文 (ZH)日本語 (JA)
设计 · 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".

L3 联网 · 声明域名与密钥范围V1 已固定联网Dual-pass Audit
Author vercel-labsGitHub vercel-labs/agent-skills ↗Stars 30898License 无 LICENSE 文件：agent-skills 仓库 HEAD 树 0 个 license 命中（git ls-tree 复核），gh api license=null。注意：其运行时规则源仓库 vercel-labs/web-interface-guidelines 为 MITCommit 063bee94c3
管控等级描述 skill 的能力与建议配套的管控措施，不代表质量或安全认证，也不表示可用或不可用。是否使用由用户和管理者决定。不同 agent 宿主对权限的约束各不相同，请勿假定宿主一定会提供安全兜底。第三方 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外部依赖

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

4管控建议与判定依据

建议配套管控措施
面向 Agent
声明可访问域名与密钥范围
面向管理者
密钥最小权限，保留请求日志
判定依据（文件路径与关键语句摘要）
  • 网络端点: 声明外部网络访问: 审查时每次 WebFetch GET https://raw.githubusercontent.com/vercel-labs/web-interf
审计说明： 。唯一外部动作是每次审查对公开 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 用的场景——它只挑错不产出设计。
    Install Agent-Ready
    ① Verified Mirror 2026-09-06
    Option A · Direct DownloadDownload web-design-guidelines.tar.gz
    sha256: ec370ab42a34427f…
    Option B · Copy Guide for Agent
    install.json
    agent 读 JSON 指南后会自动从本站下载安装，无需更多说明。
    ② Upstream GitHub
    GitHub Repo ↗
    Pinned to commit 063bee94c3.