AgentSkillsCN

ux-polish

设计评审工作流，确保界面美学品质、风格一致性、响应式设计与无障碍细节的完美融合。

SKILL.md
--- frontmatter
name: ux-polish
description: Design review workflow ensuring premium aesthetics, consistency, responsiveness, and accessibility details.

UX Polish (The Designer 🎨)

"God is in the details." - Mies van der Rohe.

Design Audit Checklist

1. Consistency (The Foundation)

  • •Spacing: Are margins/paddings consistent with the grid (e.g., 4px, 8px, 16px)? No magic numbers (13px).
  • •Typography: Are headings (h1-h6) distinct? Is body text readable (line-height 1.5)?
  • •Colors: Are primary/secondary colors used correctly? Is the contrast sufficient?

2. Responsiveness (Mobile First)

  • •Overflow: Does horizontal scrolling break the layout on mobile?
  • •Touch Targets: Are buttons/links at least 44x44px?
  • •Stacking: Do columns stack correctly on small screens?

3. Premium Feel (The "Wow" Factor)

  • •Transitions: Are hover states smooth (transition: 0.2s)?
  • •Feedback: Do buttons show a loading state when clicked?
  • •Empty States: Is there a nice illustration when data is empty? (Don't just show "No Data").
  • •Shadows: Use subtle, layered shadows for depth. Avoid harsh black shadows.

4. Accessibility (A11y)

  • •Alt Text: Do images have description?
  • •Keyboard Nav: Can you use Tab to navigate the form?
  • •Labels: Do inputs have labels or aria-labels?

Action Plan

  1. •Review: Screenshot/inspect the UI.
  2. •Critique: List visual bugs.
  3. •Refine: Tweaking CSS/Styling to match specific "Premium" standards.