ui
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.
When & Why to Use This Skill
This Claude skill provides a professional framework for UI/UX design and interface auditing, bridging the gap between creative experience goals and technical implementation. It enables users to generate comprehensive deliverables including wireframe-level specifications, interaction maps, and design tokens. By emphasizing accessibility (WCAG), responsive layouts, and systematic component guidelines, the skill ensures that interfaces are inclusive, consistent, and ready for developer handoff.
Use Cases
- Interface Specification: Create detailed wireframes, layout grids, and navigation maps for web, mobile, or mini-program platforms.
- Interaction Design: Define complex user flows, transition states, and micro-interactions, including error handling and loading states.
- Design System Documentation: Establish standardized design tokens (colors, typography, spacing) and reusable component guidelines to maintain visual consistency.
- Accessibility & Quality Auditing: Review existing interfaces against WCAG standards and visual hierarchy best practices to improve usability.
- Developer Handoff: Produce engineer-ready requirements featuring precise asset notes, copy specifications, and responsive breakpoint behaviors.
| 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].