AI UI Animation Prompts That Work with Exode MCP

Why most animation prompts fail

Two failure modes cover most of it. The first is asking for a feeling without a structure: "make it feel premium" gives the model nothing to build, so it guesses with a heaviness that is rarely what you meant. The second is describing the result instead of the machine: "the card should slide up and fade in" produces one timeline, not the states you need when the user can interrupt it.

The fix in both cases is the same. Describe the system: what exists, what changes it, and how it should feel when it changes.

The five parts of a prompt

This structure maps onto the actual tools, so each sentence has somewhere to go. It also makes the output reviewable, because you can check each part separately.

• Object: the named object or artboard, plus the file path.
• States: two to five named states, in the words your team uses.
• Inputs: booleans, numbers or triggers, and what sets each one.
• Transitions: which condition moves which state to which.
• Feel: one or two words for the motion, plus what must not change.

Twelve prompts to copy

Short, specific, and each one produces a known structure. Replace the file and object names with yours.

• Toggle: "In artboards/settings.exode, on SwitchRow, two states On and Off driven by boolean isOn. 180ms, soft spring, no overshoot."
• Saved state: "On SaveButton, three states: Idle, Saving, Saved. Trigger submit moves Idle to Saving, saved becomes true moves Saving to Saved. Spinner rotates once in Saving."
• Press feedback: "On PlanCard, press scales to 0.97 in 90ms and releases with a spring that settles in about 250ms. Do not move the shadow."
• Accordion: "On FaqItem, expanded boolean input, two states Collapsed and Expanded. Height animates, chevron rotates 180 degrees, 240ms ease out."
• Entrance: "On Artboard Home, stagger the five cards 60ms apart, translate up 16px, fade from 0. Spring, calm, no bounce."
• Drag: "On Sheet, add Draggable behaviour with a snap threshold at 40 percent. On release below the threshold, spring back."
• Error shake: "On EmailField, state Error. On entry, shake x by 6px three times over 300ms, then settle. Only shake, do not change colour."
• Loading to loaded: "On ResultsList, states Loading, Loaded, Empty. isLoaded and isEmpty booleans. Loading to Loaded crossfades, 200ms."
• Hover menu: "On NavItem, reveal SubMenu on hover with 120ms delay, 160ms fade. Close immediately on mouse leave."
• Tab indicator: "On TabBar, slide the indicator to the active tab, 220ms ease in out. Nothing else moves."
• Progress: "On UploadBar, number input progress 0 to 1 drives the width. Add a subtle pulse while progress is below 1."
• Reduced motion: "On Hero, keep the layout but remove the parallax, fade only, 120ms. The state machine must stay identical."

Prompts for the structural pass

When the structure is the hard part, ask for the graph and validate it in the same turn. This is where an agent saves the most time, because wiring conditions by hand is the tedious part of state machines.

In artboards/onboarding.exode, build the state machine for a three-step flow:
states Step1, Step2, Step3, Done.
Number input "step". step 1 shows Step1, 2 shows Step2, 3 shows Step3,
and a trigger "finish" moves Step3 to Done.
Each step fades and slides 12px from the right, 200ms.
Going backwards reverses the direction.
Then run validate_artboard and fix anything it reports.

Prompts that waste a turn

These are common and consistently unhelpful. They are not wrong to want, just wrong to ask for in one step.

• "Make it feel good" with no states or object named.
• "Copy this animation" with a link and no description of the parts.
• "Fix the timing" without saying what is wrong with it.
• A whole screen redesign plus the motion in one request.
• "Use the best spring settings" when the product has its own vocabulary to match.

Iterating without starting over

The second prompt matters as much as the first. Change one dimension at a time: the overshoot, then the duration, then the delay. Asking for all three in one turn makes it impossible to know which change produced the result.

Ask the agent to read the file before it edits it. "Read artboards/card.exode and tell me each state transition before changing anything" costs one turn and prevents a rewrite of work that was already fine.