Agent Skills › OpenBMB/PilotDeck › web-design-guidelines

web-design-guidelines

GitHub

用于前端 UI 审查，检查可读性、视觉密度、间距、响应式布局、空/加载状态及可访问性。

skills/web-design-guidelines/SKILL.md OpenBMB/PilotDeck

构建或修改 Web UI 后需要评估界面可用性与美观度时

npx skills add OpenBMB/PilotDeck --skill web-design-guidelines -g -y

More Options

Use without installing

npx skills use OpenBMB/PilotDeck@web-design-guidelines

指定 Agent (Claude Code)

npx skills add OpenBMB/PilotDeck --skill web-design-guidelines -a claude-code -g -y

安装 repo 全部 skill

npx skills add OpenBMB/PilotDeck --all -g -y

预览 repo 内 skill

npx skills add OpenBMB/PilotDeck --list

Frontmatter

{
    "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.

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