How to Talk to AI Coding Agents
Your results are only as good as your prompts. Learn the patterns that turn AI into a world-class coding partner — no programming experience required.
🏆 The Golden Rule of Vibe Coding Prompts
Describe the WHAT, not the HOW. Tell the AI what you want the user to experience, not how to write the code. You're the product manager — the AI is the developer.
❌ Don't say:
"Create a useState hook for the email field and add an onChange handler that validates with regex"
✅ Do say:
"Add an email field to the signup form that validates the email in real time and shows a red error message if it's invalid"
Prompt Templates You Can Copy
🚀 Starting a New Project
Use this when creating something from scratch
Example:
"Build a recipe organizer that lets users save, search, and categorize their favorite recipes. Key features: add recipes with ingredients and steps, search by ingredient, filter by category (breakfast, lunch, dinner, dessert). Tech stack: Next.js with Tailwind CSS. Style: clean and modern with food-themed colors. Start with the main page and navigation."
✨ Adding a Feature
Use this when adding something to an existing project
🐛 Fixing a Bug
Use this when something isn't working right
🔧 Improving Existing Code
Use this when things work but could be better
🎨 Designing a Page
Use this when you care about visual appearance
Common Prompting Mistakes
Being Too Vague
"Make the app better" gives AI nothing to work with.
Fix: "Add a loading spinner while data fetches, and show an empty state with helpful text when no results are found."
Asking for Everything at Once
"Build me a full e-commerce site with payments, inventory, user accounts, reviews, and a recommendation engine."
Fix: Break it into steps. Start with the product listing page, then add the cart, then checkout, etc.
Not Iterating
Expecting perfect results from a single prompt and starting over when it's not right.
Fix: Treat it as a conversation. Say "Good, but change the header color to blue and make the buttons bigger."
No Context About the Project
"Add a dashboard" without explaining what the app does or who it's for.
Fix: "This is a fitness tracking app for casual gym-goers. Add a dashboard that shows their weekly workout summary and progress toward goals."
Micromanaging Implementation
"Use a for loop with index i from 0 to array.length to iterate over the items and create a div for each one."
Fix: "Display all the items in a grid layout with a card for each one showing the name, image, and price."
Best Practices
🪜 Build in Layers
Start with the basic structure, then add styling, then add interactivity, then add edge cases. Each layer builds on the last.
📝 Reference What Exists
"Make the new settings page match the style of the existing profile page." Referencing existing work gives AI concrete examples to follow.
🎭 Describe the User Experience
"When a user clicks Submit, show a loading state, then redirect to the dashboard with a success toast." Tell AI what the user sees and feels.
🔍 Ask AI to Explain
After AI generates code, ask "Explain what this code does in simple terms." Understanding builds confidence and helps you prompt better next time.
📐 Set Constraints
"Keep it simple — no external libraries. Use only what's already installed." Constraints help AI make better choices and avoid over-engineering.
🧪 Request Tests
"Add tests for the checkout flow that verify the total calculation, coupon codes, and empty cart handling." Tests catch bugs before users do.
Advanced Prompting Patterns
The Specification Pattern
For complex features, write a mini-spec before asking AI to build:
The Role Pattern
Give AI a persona to improve output quality:
The Example Pattern
Show AI what you want by describing examples:
Level Up Your Prompting
Get weekly prompt templates and real-world examples in your inbox.
Follow Our Blog