← Back to Help Center

Prompting Guide

Everything you need to become a prompting pro. Start with the basics, then level up with advanced techniques — animations, carousels, galleries, and more.

Two Guides. One Goal.

The Prompting Guide is your complete resource for communicating with the AI. Pick the guide that matches where you are right now.

The Prompting Mindset

Before you dive into either guide, keep these core principles in mind. They apply to every single prompt you write.

01

Be Specific About Placement

Always name the section. "In the hero section" or "below the services cards" tells the AI exactly where to make changes — not just what to change.

02

Describe Direction & Movement

For animations, always say which direction. "Move from right to left" or "zoom in slowly" removes all guesswork and gets you the exact effect you want.

03

Name the Animation Type

Say "Ken Burns effect," "scroll zoom," or "fade in on scroll" — the AI knows exactly what these mean and will implement them correctly.

04

Specify Speed & Timing

Vague is the enemy of great design. "20-second loop" or "0.3s smooth transition" gives the AI the precision it needs to nail the feel.

05

Use Percentages for Position

Instead of "move it a bit," say "shift down by 10% and left by 5%." Percentage-based positioning gives you precise, predictable control.

06

Protect What You Love

Add "keep everything else the same" when making targeted changes. This tells the AI to only touch what you asked about — nothing else.

Example Prompts That Work

These are real prompts you can paste directly into your Vibe Otter chat. Modify the details for your own site.

🏠 Hero Section
"On the homepage hero section, apply a Ken Burns animation to the background image — slowly zoom in and pan slightly to the right over 20 seconds, then loop continuously. Keep the movement smooth and cinematic."
🎉 Carousel
"In the services section, create a horizontally moving carousel of cards that scrolls from right to left continuously. Show one centered card with partial cards on each side. Loop infinitely with smooth transitions."
🔍 Scroll Effect
"In the features section, apply a zoom effect to each card when the user scrolls to it — scale up to 110% on scroll, then return to 100% when scrolling away. Keep transitions smooth."
📷 Gallery
"Create a photo gallery section using the images I uploaded. Display them in a clean 3-column grid layout. Support up to 30 images and organize them neatly with consistent spacing."
📄 PDF Download
"Create a Resources page with a downloadable PDF section. Add a short description above the file and a clearly labeled 'Download PDF' button. Keep the layout clean and minimal."
🎯 Positioning
"Move the call-to-action button down by 10% and shift it left by 5%. Keep everything else in the section exactly the same."

Ready to start prompting?

Pick the guide that fits where you are — or read both to unlock the full power of Vibe Otter.

AI Prompting Guide › Cool Features Guide ›
🦦

Vibe Otter Help

Ask me anything

Hey! I know everything in the Vibe Otter guides. Ask me about prompting, billing, features, or anything else.