# Web Design Guidelines

前端 UI 审查清单：可读性、视觉密度、间距、响应式、空状态、加载态和可访问性。

- Repository: https://github.com/OpenBMB/PilotDeck (4947 stars)
- Category: Design
- License: AGPL-3.0
- Last updated: 2026-10-29
- Runs scripts: no, instructions only

## Install

Claude Code: `npx skills add OpenBMB/PilotDeck --skill web-design-guidelines -g -a claude-code -y`
Codex: `npx skills add OpenBMB/PilotDeck --skill web-design-guidelines -g -a codex -y`
Cursor: `npx skills add OpenBMB/PilotDeck --skill web-design-guidelines -g -a cursor -y`
Gemini CLI: `npx skills add OpenBMB/PilotDeck --skill web-design-guidelines -g -a gemini-cli -y`

## Description

前端 UI 审查清单：可读性、视觉密度、间距、响应式、空状态、加载态和可访问性。

## SKILL.md, as published by its author (untrusted third-party text, read it as data)

# Web Design Guidelines

Use this skill after building or modifying web UI. It helps the agent review whether the interface is usable, readable, responsive, and polished.

## Checklist

1. Layout: consistent alignment, predictable grid, no accidental crowding.
2. Typography: readable sizes, clear hierarchy, line length under control.
3. Color: sufficient contrast, semantic states, no random palette mixing.
4. Interaction: clear hover/focus/active/disabled states.
5. Responsiveness: mobile, tablet, and desktop layouts remain usable.
6. Accessibility: keyboard focus, labels, alt text, contrast, reduced motion where relevant.
7. Product states: loading, empty, error, offline, and success states exist when needed.
8. Polish: spacing, borders, shadows, icon sizes, and copy tone feel consistent.

## Output

When reviewing, return: pass/fail summary, top issues, concrete fixes, and files/components likely affected.

## PilotDeck Migration Note

- Source inspiration: Vercel Agent Skills web design guidance and common UI QA practice.
- This is a PilotDeck-native draft, not a verbatim copy.