---
id: interaction-design
name: "interaction-design"
url: https://skills.yangsir.net/skill/interaction-design
author: Owl-Listener
domain: design
tags: ["interaction", "micro-animations", "gestures"]
install_count: 49355
rating: 4.70 (210 reviews)
github: https://github.com/Owl-Listener/designer-skills
---

# interaction-design

> 专注于设计有意义的用户交互，包括微动效、状态转换和用户流程，以创造直观、愉悦且高效的数字体验。

**Stats**: 49,355 installs · 4.7/5 (210 reviews)

## Before / After 对比

### 用户交互体验升级

## Readme

# interaction-design
Design meaningful interactions with micro-animations, state machines, gestures, error handling, and feedback patterns.
## Skills (7)
- **micro-interaction-spec** — Specify micro-interactions with trigger, rules, feedback, and loop/mode definitions.
- **animation-principles** — Apply animation principles to UI motion for purposeful, polished interactions.
- **state-machine** — Model complex UI behavior as finite state machines with states and transitions.
- **gesture-patterns** — Design gesture-based interactions for touch and pointer devices.
- **error-handling-ux** — Design error prevention, detection, and recovery experiences.
- **loading-states** — Design loading, skeleton, and progressive content reveal patterns.
- **feedback-patterns** — Design system feedback for user actions including confirmations and status.
## Commands (3)
- `/design-interaction` — Design a complete interaction flow for a feature or component.
- `/map-states` — Model the states and transitions for a complex UI component.
- `/error-flow` — Design a complete error handling flow for a feature.


---
*Source: https://skills.yangsir.net/skill/interaction-design*
*Markdown mirror: https://skills.yangsir.net/api/skill/interaction-design/markdown*