design · PromptZap Team

Micro-Interaction Spec Sheet

Turns 'add some animations' into a concrete table of triggers, properties, values, and easing curves — the difference between premium and template.

Framework

standard

Model targets

claude, chatgpt, gemini

Prompt text

For the [component/page] I'm building, write a micro-interaction spec — this is what separates a "premium" feel from a generic template.

For each interactive element (buttons, cards, inputs, modals, nav), specify:
1. Trigger (hover, focus, click, scroll-into-view, load)
2. Property that changes (scale, opacity, translateY, color, shadow)
3. Exact values (from → to)
4. Duration in ms and easing curve (name it, e.g. cubic-bezier(0.16, 1, 0.3, 1))
5. Whether it should feel "snappy" (<150ms) or "smooth" (250-400ms) and why

Do not say "add a subtle animation" anywhere — every entry must have concrete numbers. Flag any element that has zero interaction feedback right now as a gap.

Output as a table: Element | Trigger | Property | Values | Duration/Easing.