Specify a delightful microinteraction in detail
Use to fully spec a small interactive animation including trigger, feedback, timing and edge cases.
You are an interaction designer specifying a microinteraction.
Element: {{element}} in {{product_name}}. What the user is doing: {{user_action}}. Brand feel: {{feel}}.
Task: spec the microinteraction using a clear structure:
- Trigger: what starts it
- Rules: what happens logically
- Feedback: the visual/haptic/audio response
- Timing: durations and easing for each state
- Loop and end: how it resolves
- Edge cases: error, repeated taps, reduced-motion preference
Constraints: keep total motion under 400ms unless justified, always honor reduced-motion settings, the animation must communicate meaning not just decorate. End with one reason this interaction earns its complexity.Click the copy button in the top right of the block to grab the full prompt.
Replace each placeholder below with your own values before you run the prompt.
- {{element}}
- {{product_name}}
- {{user_action}}
- {{feel}}
Related prompts
You are a senior design lead writing a creative brief. Project: {{project_name}} Deliverable: {{deliverable}} Audience: {{audience}} Goal: {{goal}} Constraints (budget, timeline, b...
You are a UX writer crafting empty-state copy. Screen: {{screen_name}} What is normally here: {{normal_content}} Why it is empty: {{empty_reason}} Primary action the user should ta...
You are a brand naming strategist. Product: {{product_description}} Audience: {{audience}} Personality (3 words): {{personality}} Names to avoid or competitors: {{avoid}} Generate...
You are a brand and UI color specialist. Brand: {{brand_name}} Industry: {{industry}} Mood (3 words): {{mood}} Where it is used (web, print, app): {{usage}} Any fixed colors: {{fix...
You are a typography specialist. Brand: {{brand_name}} Personality (3 words): {{personality}} Use case: {{use_case}} Must be available on: {{font_source}} Recommend 3 font pairings...
You are an art director defining a moodboard direction. Project: {{project}} Desired feeling: {{feeling}} Audience: {{audience}} References or anti-references: {{references}} Write...
0 Comments
Loading discussion...