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
- 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.
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.
1---2name: web-design-guidelines3description: 前端 UI 审查清单：可读性、视觉密度、间距、响应式、空状态、加载态和可访问性。4---56# Web Design Guidelines78Use this skill after building or modifying web UI. It helps the agent review whether the interface is usable, readable, responsive, and polished.910## Checklist11121. Layout: consistent alignment, predictable grid, no accidental crowding.132. Typography: readable sizes, clear hierarchy, line length under control.143. Color: sufficient contrast, semantic states, no random palette mixing.154. Interaction: clear hover/focus/active/disabled states.165. Responsiveness: mobile, tablet, and desktop layouts remain usable.176. Accessibility: keyboard focus, labels, alt text, contrast, reduced motion where relevant.187. Product states: loading, empty, error, offline, and success states exist when needed.198. Polish: spacing, borders, shadows, icon sizes, and copy tone feel consistent.2021## Output2223When reviewing, return: pass/fail summary, top issues, concrete fixes, and files/components likely affected.2425## PilotDeck Migration Note2627- Source inspiration: Vercel Agent Skills web design guidance and common UI QA practice.28- This is a PilotDeck-native draft, not a verbatim copy.29
OpenBMB