| name | ui |
| description | UI/UE (user interface & user experience) skill for designing and reviewing interfaces. Use for tasks like creating UI specs, interaction states, component guidelines, visual hierarchy, responsive layouts, accessibility, design tokens, and handoff-ready requirements for engineers. |
ui
Use this skill for UI/UE 设计与评审：把“体验”落到可交付的界面规范与交互细节。
Outputs (choose what the task needs)
- Screen list + navigation map
- Wireframe-level UI spec (layout, components, spacing)
- Interaction spec (states, transitions, micro-interactions)
- Component guidelines (variants, props, usage rules)
- Design tokens (colors, typography, spacing, radii, shadows)
- Accessibility checklist (WCAG basics)
- Engineer handoff notes (assets, copy, edge cases)
Workflow
- Clarify context
- Platform: Web / mobile / mini program.
- Users and primary tasks; define success for the screen.
- Define information hierarchy
- What is primary CTA? What must be seen first?
- Use progressive disclosure for secondary actions.
- Specify layouts and components
- Grid system / spacing rules.
- Component inventory and reuse plan.
- Responsive behavior (breakpoints) where relevant.
- Define states (must-have)
- Empty / loading / error / success
- Disabled / hover / focus / pressed
- Validation states for forms
- Interaction details
- Feedback timing, confirmations, undo patterns.
- Prevent errors; provide clear recovery paths.
- Visual design consistency
- Tokenize: colors, typography scale, spacing, radii.
- Ensure contrast and readable typography.
- Accessibility
- Keyboard navigation, focus order, ARIA labels (web).
- Dynamic type and screen reader labels (mobile).
UI acceptance criteria template
- Given [state], when [action], then [UI updates] within [time].
- Copy: [exact text], error message: [exact text].
- Responsive: at [breakpoint], [layout change].
- Accessibility: [tab order], [label], [contrast].
