# Web Design Guidelines

> 审阅 UI 代码是否符合 Web 界面指南。适用于“审阅我的 UI”“检查无障碍性”“审计设计”“审阅 UX”或“按最佳实践检查网站”等场景。

- Skill: `misonl/web-design-guidelines` (Agent Skill)
- Install (CLI): `npx skillmds@latest add misonl/web-design-guidelines`
- Raw SKILL.md: https://api.skillmd.com/api/skills/misonl/web-design-guidelines/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: misonl (https://skillmd.com/u/misonl)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/misonl/web-design-guidelines

---


# Web 界面指南

审阅文件是否符合 Web 界面指南。

## 工作方式

1. 从下方来源 URL 获取最新指南
2. 读取指定文件（或提示用户提供文件/匹配路径）
3. 按获取到的指南逐条检查
4. 使用精简的 `file:line` 格式输出发现

## 指南来源

每次审阅前都获取最新指南：

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

使用 `WebFetch` 获取最新规则。获取内容包含完整规则及输出格式说明。

## 使用方式

当用户提供文件或路径参数时：
1. 从上述 URL 获取指南
2. 读取指定文件
3. 应用获取到的全部规则
4. 按指南指定格式输出发现

如果未指定文件，请先询问用户要审阅哪些文件。

---

## 相关技能

| 技能 | 适用场景 |
|-------|-------------|
| **[frontend-design](../frontend-design/SKILL.md)** | 编码前：学习设计原则（色彩、排版、UX 心理学） |
| **web-design-guidelines**（当前） | 编码后：审计无障碍、性能与最佳实践 |

## 设计工作流

```
1. DESIGN   -> 阅读 frontend-design 原则
2. CODE     -> 实现设计
3. AUDIT    -> 运行 web-design-guidelines 审阅 <- 当前所处阶段
4. FIX      -> 根据审阅发现进行修复
```