Complete AI Training
Start for Free

Your job's AI kit

Get your AI kit

Tell us who you are and what you do. We show you your kit right away and email you the link: skills, prompts, AI agents, MCP servers and courses for your job.

500+ jobs ready, and we make a kit for any other job. No payment needed to look.

Share

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.

CodingAdvancedIT & Software DevelopmentDesign & UXProduct Management

How to use it

  1. Copy the prompt and paste it into ChatGPT, Claude, Gemini or any other AI.
  2. Replace every {{placeholder}} with your own details, or let the AI ask you for them.
  3. Use the follow-ups below to go deeper.
Prompt

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

  1. Ask for any missing context above before writing the spec.
  2. Describe the interaction sequence step by step: drag start, drag feedback, drop trigger, and the full feedback sequence that follows.
  3. 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).
  4. Note the {{tech_stack}}-specific approach for drag detection, animation, and audio playback, flagging anything platform-specific (iOS vs Android vs web).
  5. 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".