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

web-design-guidelines

GitHub

用于在构建或修改 Web UI 后，审查界面的可用性、可读性、响应式布局及可访问性。涵盖布局、排版、色彩、交互状态及产品状态（加载/空/错误等），提供通过/失败总结及具体修复建议。

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

用户完成前端页面开发并请求审查用户修改现有 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.