技能库智客分类：Agent 工作流 web-design-guidelines

网络设计准则

由Vercel工程团队审查Web界面指南的UI代码遵守情况. 封面布局,打字,颜色,运动,以及产品UI的可访问性.

官方网址：GitHub

技能介绍

先看中文介绍；官方 description 原文单独保留，不改写 SKILL.md。

做什么

由Vercel工程团队审查Web界面指南的UI代码遵守情况. 封面布局,打字,颜色,运动,以及产品UI的可访问性.

何时用

官方 description 未单独写出 Use when。按规范，代理会在用户任务与这段 description 的关键词匹配时激活本技能。

代理如何加载

按 Agent Skills 渐进披露：启动时只加载 name 与 description（约 100 token）；任务匹配后才读入整份 SKILL.md 正文；scripts/、references/、assets/ 仅在需要时再读。本文件正文结构：Web Interface Guidelines、How It Works、Guidelines Source、Usage。

文件分析

文件分析：除 SKILL.md 外，正文引用了 references/guidelines.md，属于带资源的技能包，这些文件按需再读。

官方 description（原文）

Review UI code for Web Interface Guidelines compliance by the Vercel engineering team. Covers layout, typography, color, motion, and accessibility for product UI.

Web Interface GuidelinesHow It WorksGuidelines SourceUsage

来源分类：GitHub skill

来源与网址

市场来源：GitHub

开源榜 Skill 分类

SKILL.md 与 Agent 调用

官方规范 ↗

name: web-design-guidelines
description: Review UI code for Web Interface Guidelines compliance by the Vercel engineering team. Covers layout, typography, color, motion, and accessibility for product UI.

发现技能客户端向 Agent 提供名称与描述目录。
匹配与调用用户指定或任务匹配后，载入 SKILL.md 指令。
按需加载按步骤读取参考文档、使用脚本与素材。

指令中引用的文件 · 1

references/guidelines.md

以下路径提取自原文；文件是否齐全请以来源仓库中的完整目录为准。

具体调用语法与可用工具以目标 Agent 客户端为准。查看调用机制说明 ↗

安装这个技能

Skills CLI ↗

先选择目标 Agent 和安装范围，保留技能包的附属文件，安装后检查客户端能否发现该技能。

该技能引用了附属文件，请从来源获取完整目录；仅复制 SKILL.md 可能缺少依赖。

交给 Agent 安装

复制安装指令给支持 Agent Skills 的代理，确认其中的目标目录与客户端匹配。

把 Agent Skill「web-design-guidelines」安装到我的项目：SKILL.md 原文与官方 description 见 https://zicq.com/zh/skills/skl-3150c5ae17d5b6e5-%E7%BD%91%E7%BB%9C%E8%AE%BE%E8%AE%A1%E5%87%86%E5%88%99.html
请存为 .cursor/skills/web-design-guidelines/SKILL.md 或 .claude/skills/web-design-guidelines/SKILL.md，frontmatter 的 name 与 description 保持原样，不要改写。
该技能还带 scripts/、references/、assets/ 等文件，请从 https://github.com/nexu-io/open-design/tree/HEAD/skills/web-design-guidelines 取完整目录，不要只建一个 SKILL.md。

GitHub 完整包 ↗

终端安装 · Skills CLI

需要 Node.js 与 npx。先查看仓库技能列表，确认实际名称。

npx skills add 'https://github.com/nexu-io/open-design/tree/HEAD/skills/web-design-guidelines' --list

npx skills add 'https://github.com/nexu-io/open-design/tree/HEAD/skills/web-design-guidelines' --skill 'web-design-guidelines'

CLI 会交互选择目标 Agent，默认安装到项目；用户级安装使用 -g。先通过查看命令核对仓库内容，再用 npx skills list 检查已安装技能。

SKILL.md 原文可复制，不会改动源文件

# Web Interface Guidelines

Review files for compliance with Web Interface Guidelines.

## How It Works

1. Load the pinned guidelines from [`references/guidelines.md`](references/guidelines.md) — this is the default, reproducible execution path
2. Optionally, fetch the latest guidelines from the upstream URL below and diff against the pinned snapshot to see if anything has changed
3. Read the specified files (or prompt user for files/pattern)
4. Check against all rules in the guidelines
5. Output findings in the terse `file:line` format

## Guidelines Source

**Default (pinned):** The vendored copy at [`references/guidelines.md`](references/guidelines.md) is the default execution path. It is a pinned snapshot of the upstream guidelines and guarantees the skill produces reproducible results in any runtime environment.

**Upstream (live):** For users who want the very latest rules, the live source is available at:

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

Fetching the live version is optional — the pinned snapshot is always the baseline.

## Usage

When a user provides a file or pattern argument:
1. Load [`references/guidelines.md`](references/guidelines.md) as the default source
2. Optionally fetch the upstream URL to check for updates
3. Read the specified files
4. Apply all rules from the guidelines
5. Output findings using the format specified in the guidelines

If no files specified, ask the user which files to review.

阅读排版

--- name: web-design-guidelines description: | Review UI code for Web Interface Guidelines compliance by the Vercel engineering team. Covers layout, typography, color, motion, and accessibility for product UI. triggers: - "web design guidelines" - "vercel design" - "product ui standards" - "design checklist" - "review my UI" - "check accessibility" - "audit design" - "review UX" - "设计审查" metadata: author: vercel version: "1.0.0" argument-hint: od: mode: design-system surface: web platform: desktop category: design-systems upstream: "https://github.com/vercel-labs/web-interface-guidelines" source-commit: 4e799d45c17aec1498c269287a83b9dba22b966b preview: type: markdown example_prompt: | Review my UI code against the Vercel Web Interface Guidelines — check layout, typography, color, motion, and accessibility compliance. --- # Web Interface Guidelines Review files for compliance with Web Interface Guidelines. ## How It Works 1. Load the pinned guidelines from [`references/guidelines.md`](references/guidelines.md) — this is the default, reproducible execution path 2. Optionally, fetch the latest guidelines from the upstream URL below and diff against the pinned snapshot to see if anything has changed 3. Read the specified files (or prompt user for files/pattern) 4. Check against all rules in the guidelines 5. Output findings in the terse `file:line` format ## Guidelines Source **Default (pinned):** The vendored copy at [`references/guidelines.md`](references/guidelines.md) is the default execution path. It is a pinned snapshot of the upstream guidelines and guarantees the skill produces reproducible results in any runtime environment. **Upstream (live):** For users who want the very latest rules, the live source is available at: ``` https://raw.githubusercontent.com/vercel-labs/web-interface-guidelines/main/command.md ``` Fetching the live version is optional — the pinned snapshot is always the baseline. ## Usage When a user provides a file or pattern argument: 1. Load [`references/guidelines.md`](references/guidelines.md) as the default source 2. Optionally fetch the upstream URL to check for updates 3. Read the specified files 4. Apply all rules from the guidelines 5. Output findings using the format specified in the guidelines If no files specified, ask the user which files to review.

网络设计准则

技能介绍

做什么

何时用

代理如何加载

文件分析

SKILL.md 与 Agent 调用

安装这个技能

相关技能

技能创建者Skill Creator

克劳德胡布Clawdhub

团队指挥Agent Team Orchestration

超级力量Superpowers