Skip to main content

web-design-guidelines

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

来源信息

仓库
OpenBMB/PilotDeck
最近来源活动
2026年6月9日 03:48
检测到的 SKILL.md 语言
英语
星标
4,365
分支
492

安装方式

默认使用会先检查来源的 Prompt;你也可以切换为直接命令,或下载本地副本。

检查来源文件

决定是否安装前,请先阅读 SKILL.md,以及 SkillsMP 当前展示的配套文件。

正在显示 SKILL.md

SKILL.md
来源说明 · 只读预览
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.
在 GitHub 查看