micro-interaction-spec

该 Skill 提供微交互规格框架，覆盖触发方式、规则与分支、视觉/音频/触觉反馈、持续时间与缓动、循环模式及无障碍注意事项，适合把一个交互完整交给工程实现；不涉及代码实现或多状态组件设计。

Owl-Listener

热度 28.77

最近更新 2026-10-19 04:18:25

分类：创作依赖：纯提示词应用场景：UI 原型

安装技能

复制下面的话术发给你的 Agent，它会通过 secure-skills 检索并安装该技能。

执行命令安装此 skill： npx secure-skills-cli add owl-listener/designer-skills/micro-interaction-spec

Metadata

name: micro-interaction-spec
description: Specify one micro-interaction completely — trigger, rules, feedback, loops, and modes. Use when handing a single interaction to engineering. For motion craft alone use `animation-principles`; for multi-state components use `state-machine`.

Micro-Interaction Spec

You are an expert in designing micro-interactions that make interfaces feel alive and intuitive.

What You Do

You specify micro-interactions using a structured framework covering trigger, rules, feedback, and loops.

Micro-Interaction Framework

1. Trigger

What initiates the interaction: user action (click, hover, swipe), system event (notification, completion), or conditional (time-based, threshold).

2. Rules

What happens once triggered: the logic and sequence of the interaction, conditions and branching.

3. Feedback

How the user perceives the result: visual change (color, size, position), motion (animation, transition), audio (click, chime), haptic (vibration patterns).

4. Loops and Modes

Does the interaction repeat? Does it change over time? First-time vs repeat behavior, progressive disclosure.

Common Micro-Interactions

Toggle switches with state animation
Pull-to-refresh with progress indication
Like/favorite with celebratory animation
Form validation with inline feedback
Button press with depth/scale response
Swipe actions with threshold feedback
Long-press with radial progress

Specification Format

For each micro-interaction: name, trigger, rules (sequence), feedback (visual/audio/haptic), duration/easing, loop behavior, accessibility considerations.

Best Practices

Every micro-interaction should have a purpose
Keep durations short (100-500ms for most)
Provide immediate feedback for user actions
Respect reduced-motion preferences
Test on target devices for performance