AI导哈

设计与多媒体

micro-interaction-spec

owl-listener/de…r-skills

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`.

  • 2325 次安装
  • 3100 星标
  • 收录于

安装命令

npx skills add https://github.com/owl-listener/designer-skills --skill micro-interaction-spec

SKILL.md

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

相关 Skills

presentation-deckowl-listener/de…r-skillsStructure a design presentation for a specific audience and decision. Use when presenting internally. For a portfolio narrative use `case-study`; for the written argument use `design-rationale`.文档办公3164typography-scaleowl-listener/de…r-skillsCreate a modular type scale with size, weight, and line-height relationships. Use when establishing typographic structure. For line length only use `readable-measure`; for judging type on an existing screen use `critique-typography` (visual-critique).设计与多媒体2646illustration-styleowl-listener/de…r-skillsDefine an illustration style guide — visual language, colour usage, and application rules. Use when commissioning or standardising illustration. For icons, use `icon-system` (design-systems).设计与多媒体2602visual-hierarchyowl-listener/de…r-skillsEstablish hierarchy through size, weight, colour, spacing, and position so the eye lands in the intended order. Use when composing new work. For judging an existing screen, use `critique-visual-hierarchy` (visual-critique).其他2589color-systemowl-listener/de…r-skillsBuild a product colour system — tonal scales, semantic roles, and contrast compliance. Use when defining or rebuilding colour from scratch. For dark-mode adaptation use `dark-mode-design`; for chart palettes use `data-visualization`; for multi-brand token architecture use `theming-system` (design-systems).设计与多媒体2551dark-mode-designowl-listener/de…r-skillsAdapt an existing palette to dark mode — surface elevation, contrast rebalancing, and desaturation rules. Use when you already have a light palette to translate. For building the base palette first, use `color-system`.设计与多媒体2499