Skip to main content
Prompts UniApp Washing Machine Drag-Drop Animator

developer coding user risk: low

UniApp Washing Machine Drag-Drop Animator

Create a drag-and-drop experience in UniApp where cards are dropped into a washing machine, including drag-and-drop feedback, background bubble animations, gurgling sound effects,…

PROMPT 

I want to create a drag-and-drop experience using UniApp, where cards can be dropped into a washing machine for cleaning. It should include drag-and-drop feedback, background bubble animations, gurgling sound effects, and a washing machine animation.
1. Play the “gulp-gulp” sound.
2. The card gradually fades away. 12.
3. A pop-up message reads, “Clean!”.
4. Bottom update: “Cleaned X items today” statistics.

EXPECTED OUTPUT

Format
code

SUCCESS CRITERIA

  • Create drag-and-drop experience using UniApp for cards into washing machine
  • Include drag-and-drop feedback
  • Add background bubble animations
  • Include gurgling sound effects
  • Include washing machine animation
  • Play gulp-gulp sound
  • Gradually fade card away
  • Show Clean! pop-up message
  • Update Cleaned X items today statistics

FAILURE MODES

  • May generate non-UniApp compatible code
  • Might omit specified animations or sound effects
  • Could ignore statistics update functionality

CAVEATS

Missing context
  • UniApp version or specific libraries (e.g., uni-ui).
  • Structure of cards (data source, content).
  • Assets: sound files, animation resources.
  • Full UI layout and component hierarchy.
  • State management for statistics (e.g., storage).
  • Target platforms (H5, app, etc.).
Ambiguities
  • Typo in step 2: 'The card gradually fades away. 12.' – unclear what '12.' means.
  • Numbered steps 1-4 do not fully cover all mentioned features like drag-and-drop feedback, bubble animations, washing machine animation.
  • Vague terms like 'drag-and-drop feedback', 'background bubble animations', 'gurgling sound effects' without specifics.

QUALITY

OVERALL
0.50
CLARITY
0.65
SPECIFICITY
0.55
REUSABILITY
0.25
COMPLETENESS
0.45

IMPROVEMENT SUGGESTIONS

  • Fix typo in step 2 and ensure complete, sequential numbering matching all features.
  • Specify output format (e.g., 'Provide full UniApp Vue component code').
  • Add detailed descriptions or references for animations/sounds (e.g., CSS/JS libraries).
  • Include wireframe sketch or example card HTML.
  • Introduce placeholders like [CARD_DATA] for reusability.
  • Define success criteria (e.g., 'Works on H5 and app, smooth 60fps animations').

USAGE

Copy the prompt above and paste it into your AI of choice — Claude, ChatGPT, Gemini, or anywhere else you're working. Replace any placeholder sections with your own context, then ask for the output.

MORE FOR DEVELOPER