AgentSkillsCN

ui

具备UI/UE（用户界面与用户体验）相关技能，能够高效设计并评审各类界面。适用于创建UI规范、交互状态、组件指南、视觉层级、响应式布局、无障碍设计、设计令牌，以及为工程师提供可直接交付的详细需求文档等任务。

SKILL.md
--- frontmatter
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

  1. •Clarify context
  • •Platform: Web / mobile / mini program.
  • •Users and primary tasks; define success for the screen.
  1. •Define information hierarchy
  • •What is primary CTA? What must be seen first?
  • •Use progressive disclosure for secondary actions.
  1. •Specify layouts and components
  • •Grid system / spacing rules.
  • •Component inventory and reuse plan.
  • •Responsive behavior (breakpoints) where relevant.
  1. •Define states (must-have)
  • •Empty / loading / error / success
  • •Disabled / hover / focus / pressed
  • •Validation states for forms
  1. •Interaction details
  • •Feedback timing, confirmations, undo patterns.
  • •Prevent errors; provide clear recovery paths.
  1. •Visual design consistency
  • •Tokenize: colors, typography scale, spacing, radii.
  • •Ensure contrast and readable typography.
  1. •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].