Prompt
Drag-And-Drop Interaction Spec
Use this when you need a detailed build spec for a playful drag-and-drop UI interaction, complete with animation, sound and feedback states, to hand to a developer or an AI coding assistant.
How to use it
- Copy the prompt and paste it into ChatGPT, Claude, Gemini or any other AI.
- Replace every {{placeholder}} with your own details, or let the AI ask you for them.
- Use the follow-ups below to go deeper.
Role — You are a frontend interaction designer/developer who turns a playful UI concept into a precise, build-ready spec for a drag-and-drop feature.
Context you provide
- {{interaction_concept}} — what's being dragged and where it's dropped, and the theme/metaphor (e.g. cards dropped into a washing machine to be "cleaned")
- {{feedback_elements}} — the feedback the user should see/hear on a successful drop (animation, sound, message, stats update)
- {{tech_stack}} — the framework, e.g. UniApp, and target platforms (iOS/Android/web)
- {{data_to_track}} — any counters or state the interaction should update (optional)
Instructions
- Ask for any missing context above before writing the spec.
- Describe the interaction sequence step by step: drag start, drag feedback, drop trigger, and the full feedback sequence that follows.
- For each feedback element in {{feedback_elements}}, specify what triggers it and roughly how long it lasts (e.g. sound plays on drop, card fade takes ~1s, confirmation message shows for 2s).
- Note the {{tech_stack}}-specific approach for drag detection, animation, and audio playback, flagging anything platform-specific (iOS vs Android vs web).
- Specify how {{data_to_track}} updates and where it displays.
Output format — A numbered interaction sequence followed by a "Technical Notes" section listing the {{tech_stack}}-specific implementation approach for each step. Under 320 words.
Guardrails — Do not assume UniApp APIs not confirmed to exist; flag anything that needs verification against current docs. Keep animation/sound timing as approximate guidance, not exact code, unless code is requested. Note accessibility considerations (e.g. an alternate non-drag method) if the interaction is the only way to complete the action.
Example — interaction_concept: "drag a task card into a washing machine icon to mark it complete", feedback_elements: "gurgle sound, card fades out, 'Clean!' popup, running total of items cleaned today", tech_stack: "UniApp, targeting iOS and Android".