菜单
当用户需要审查 UI 代码、进行可访问性检查、设计审计或对照最佳实践检查网站时使用。此 Skill 对照 Web Interface Guidelines 和 WCAG 2.2 标准检查合规性，输出结构化的审查结果。
默认使用会先检查来源的 Prompt；你也可以切换为直接命令，或下载本地副本。
决定是否安装前，请先阅读 SKILL.md，以及 SkillsMP 当前展示的配套文件。
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
直接命令不会经过审查 Prompt；运行前请先检查来源。
npx skills add https://github.com/boshi-xixixi/TraeSkill --skill web-design-guidelines命令会保持在同一行。复制前请横向滚动并检查完整内容。
想先保存到本地？可下载 SkillsMP 当前能够提供的文件。
基于 SOC 职业分类
正在显示 SKILL.md
| name | web-design-guidelines |
| description | 当用户需要审查 UI 代码、进行可访问性检查、设计审计或对照最佳实践检查网站时使用。此 Skill 对照 Web Interface Guidelines 和 WCAG 2.2 标准检查合规性，输出结构化的审查结果。 |
| argument-hint | <file-or-pattern> |
⚠️ 性能提示: 此 Skill 包含完整的 WCAG 2.2 检查清单。对于快速审查，可以只使用"快速检查清单"；对于完整审计，使用"详细检查清单"。
此 Skill 提供两种审查模式：
从源 URL 获取最新指南：
https://raw.githubusercontent.com/vercel-labs/web-interface-guidelines/main/command.md
读取指定的文件（或提示用户提供文件/模式）
对照获取的规则检查
使用简洁的 file:line 格式输出结果
当用户提供文件或模式参数时：
如果未指定文件，询问用户要审查哪些文件。
WCAG 2.2 在 2.1 基础上增加了 9 个新成功准则：
要求：焦点指示符必须满足以下所有条件：
检查点：
/* ✅ 合规的焦点样式 */
:focus {
outline: 2px solid #005fcc;
outline-offset: 2px;
}
/* ✅ 高对比度焦点 */
:focus {
outline: 3px solid #000000;
background: #ffff00;
}
要求：焦点指示符不能被其他内容完全遮挡
检查点：
要求：所有使用拖动操作的功能都应提供单指针替代方案
检查点：
// ❌ 不合规：只有拖动
<SortableList items={items} />
// ✅ 合规：提供替代方案
<SortableList items={items} />
<SortableList items={items} mode="buttons" />
要求：触摸目标至少 24x24 CSS 像素
检查点：
/* ✅ 合规的触摸目标 */
button {
min-height: 44px;
min-width: 44px;
padding: 12px 16px;
}
<!-- ✅ 合规 -->
<img src="chart.png" alt="2024年用户增长图表，显示同比增长25%" />
<!-- ❌ 不合规 -->
<img src="chart.png" />
<!-- ✅ 合规 -->
<label for="email">邮箱地址</label>
<input type="email" id="email" name="email" />
<!-- ❌ 不合规 -->
<span>邮箱地址</span>
<input type="email" aria-label="邮箱" />
文本对比度要求：
检查工具：
/* ✅ 合规 */
.text-primary {
color: #1a1a1a; /* 对比度 16:1 on #ffffff */
}
.text-secondary {
color: #5c5c5c; /* 对比度 7:1 on #ffffff */
}
/* ✅ 合规 */
body {
font-size: 1rem; /* = 16px default */
line-height: 1.5;
}
h1 {
font-size: 2rem; /* = 32px */
}
UI 组件对比度要求：
/* ✅ 合规 */
.input {
border: 1px solid #767676; /* 对比度 4.5:1 */
background: #ffffff;
}
.input:focus {
border-color: #005fcc; /* 对比度 4.7:1 */
}
内容放大 200% 时不丢失信息：
/* ✅ 合规 */
p {
letter-spacing: 0.12em;
word-spacing: 0.16em;
line-height: 1.5;
}
所有功能可通过键盘操作：
测试方法：
// ✅ 合规的键盘支持
<div
role="button"
tabIndex={0}
onClick={handleClick}
onKeyDown={(e) => {
if (e.key === 'Enter' || e.key === ' ') {
e.preventDefault();
handleClick();
}
}}
>
点击我
</div>
<!-- ✅ 合规 -->
<a href="#main-content" class="skip-link">
跳转到主要内容
</a>
<main id="main-content">
<!-- 主要内容 -->
</main>
<style>
.skip-link {
position: absolute;
top: -100px;
}
.skip-link:focus {
top: 0;
}
</style>
<!-- ✅ 合规 -->
<a href="/pricing">查看定价方案</a>
<!-- ❌ 不合规 -->
<a href="/pricing">点击这里</a>
<!-- ✅ 合规 -->
<label for="search">搜索产品</label>
<input type="search" id="search" placeholder="输入关键词..." />
<!-- ❌ 不合规 -->
<input type="search" placeholder="搜索产品" />
outline: none 除非有替代方案<!-- ✅ 合规 -->
<button>
<svg aria-hidden="true"><!-- ... --></svg>
<span>提交</span>
</button>
<!-- ❌ 不合规 -->
<button aria-label="提交"></button>
<!-- ✅ 合规 -->
<html lang="zh-CN">
<!-- ❌ 不合规 -->
<select onchange="this.form.submit()">
<!-- ✅ 合规 -->
<select onchange="confirm('确认选择？') && this.form.submit()">
<!-- ✅ 合规 -->
<label for="email">邮箱</label>
<input type="email" id="email" aria-describedby="email-error" />
<span id="email-error" role="alert">
请输入有效的邮箱地址
</span>
<!-- ❌ 不合规 -->
<input type="email" aria-invalid="true" />
<!-- ✅ 合规 -->
<label for="username">用户名</label>
<p id="username-hint">4-20个字符，可包含字母数字下划线</p>
<input id="username" aria-describedby="username-hint" />
<!-- ✅ 合规 -->
<button>提交</button>
<!-- ❌ 不合规 -->
<div onclick="submit()">提交</div>
<!-- ✅ 合规 -->
<div aria-live="polite" aria-atomic="true">
{statusMessage}
</div>
# 可访问性审计报告
## 概述
- **审计日期**: YYYY-MM-DD
- **审计范围**: [页面/组件/功能]
- **符合标准**: WCAG 2.2 AA
## 发现问题
### P0 - 立即修复
| 问题 | 位置 | 影响 | 建议修复 |
|------|------|------|---------|
| ... | ... | ... | ... |
### P1 - 尽快修复
| 问题 | 位置 | 影响 | 建议修复 |
|------|------|------|---------|
| ... | ... | ... | ... |
### P2 - 计划修复
| 问题 | 位置 | 影响 | 建议修复 |
|------|------|------|---------|
| ... | ... | ... | ... |
## 通过项目
- [ ] 列表
- [ ] 通过
- [ ] 的项目
## 建议
1. ...
2. ...
3. ...
## 参考资料
- [WCAG 2.2 官方文档](https://www.w3.org/TR/WCAG22/)
- [WebAIM 对比度检查](https://webaim.org/resources/contrastchecker/)
- [axe DevTools](https://www.deque.com/axe/)