web-design-guidelines

star 3.4k

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

OpenBMB By OpenBMB schedule Updated 6/9/2026

name: web-design-guidelines description: 前端 UI 审查清单:可读性、视觉密度、间距、响应式、空状态、加载态和可访问性。

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.
Install via CLI
npx skills add https://github.com/OpenBMB/PilotDeck --skill web-design-guidelines
Repository Details
star Stars 3,432
call_split Forks 356
navigation Branch main
article Path SKILL.md
Occupations
More from Creator