Prompt Engineering: Write Better Prompts for Better Results
Learn how to write effective prompts that help HeyBoss AI understand exactly what you want to build. Master the fundamentals of prompt engineering to get better results faster.
Key takeaway: Clear, specific prompts = better AI output. Think of the AI as your engineering partner—it only knows what you tell it.
What is Prompt Engineering?
Prompt engineering is the art and science of communicating effectively with AI. Instead of giving vague instructions like "make a website," you provide clear, detailed descriptions that guide the AI to create exactly what you envision.
Why it matters:
Better prompts = better results on the first try
Saves time and credits by reducing iterations
Helps you build exactly what you want
Reduces frustration and back-and-forth
The 5 Fundamentals of Good Prompts
1. Be Specific and Detailed
The more specific you are, the better the AI understands your needs.
Bad prompt: "Add a login page"
Good prompt: "Add a login page at /login with email and password fields, a 'Remember me' checkbox, a 'Forgot password?' link, and a blue submit button that says 'Sign In'"
Why it's better: Specifies exact location, all UI elements, colors, and text.
2. Mention the Exact Page or Component
Always tell the AI WHERE you want changes made.
Bad prompt: "Change the button color"
Good prompt: "On the /dashboard page, change the 'Export Data' button in the top-right corner to green (#10B981)"
Why it's better: Specifies page, exact button, location, and color code.
3. Describe the Expected Behavior
Don't just say what you want—explain how it should work.
Bad prompt: "Add a search feature"
Good prompt: "Add a search bar in the header that filters the product list in real-time as the user types. Show 'No results found' if there are no matches."
Why it's better: Explains functionality, user interaction, and edge cases.
4. Use Examples and References
Show the AI what you want with examples, screenshots, or references to similar sites.
Examples:
"Make it look like the pricing page on stripe.com"
"Add a card layout similar to Airbnb's search results"
"Use the color scheme from our brand guidelines: primary #3B82F6, secondary #10B981"
You can also upload screenshots to show exactly what you want.
5. Add Guardrails (Tell AI What NOT to Touch)
Prevent the AI from changing things you want to keep.
Example: "Add a testimonials section to the homepage. DO NOT change the existing hero section, navigation, or footer."
Why it's important: Protects working code from unintended changes.
Prompt Structure Template
Use this template for complex features:
1. What: Describe what you want to build
2. Where: Specify the page or component
3. How: Explain the behavior and functionality
4. Design: Describe the visual appearance
5. Guardrails: List what should NOT be changed
Example:
"What: Add a contact form
Where: Create a new /contact page
How: Form should have name, email, message fields. On submit, send email to [email protected] and show a success message
Design: Use our brand colors (blue #3B82F6), rounded corners, clean minimal style
Guardrails: Don't change the header or footer navigation"
Common Prompting Mistakes to Avoid
❌ Mistake #1: Being Too Vague
Bad: "Make it better"
Good: "Increase the font size of the headline to 48px and make it bold"
❌ Mistake #2: Asking for Too Much at Once
Bad: "Build a complete e-commerce site with products, cart, checkout, user accounts, admin panel, and inventory management"
Good: Break this into smaller prompts: First products page, then cart, then checkout, etc.
❌ Mistake #3: Not Specifying the Page
Bad: "Add a hero section"
Good: "Add a hero section to the homepage with a headline, subheading, and CTA button"
❌ Mistake #4: Forgetting About Edge Cases
Bad: "Add a product search"
Good: "Add a product search. Show loading state while searching, 'No results' message if nothing found, and limit results to 20 items"
Advanced Prompting Tips
Use Natural Language
You don't need to write like a programmer. Write naturally:
✅ "When users click the button, show a success message"
✅ "If the email field is empty, display an error"
✅ "Make the cards stack vertically on mobile"
Break Complex Tasks into Steps
Instead of one massive prompt, break it down:
First: "Create a products page with a grid layout"
Then: "Add filtering by category to the products page"
Finally: "Add sorting by price on the products page"
Iterate and Refine
Don't expect perfection on the first try. Refine with follow-up prompts:
"Make that button bigger"
"Change the spacing between cards to 24px"
"Move the search bar to the left side"
Real-World Examples
Example 1: Adding Authentication
Basic prompt: "Add login"
Better prompt: "Create a login page at /login with email and password fields. Add a 'Sign up' link that goes to /signup. After successful login, redirect users to /dashboard. Show error messages for invalid credentials."
Example 2: Building a Blog
Basic prompt: "Make a blog"
Better prompt: "Create a blog with three pages: 1) /blog - shows list of blog posts in a 2-column grid, newest first. 2) /blog/[slug] - individual post page with title, date, author, and content. 3) Keep the same header and footer from the homepage."
Example 3: Styling Changes
Basic prompt: "Make it look better"
Better prompt: "On the homepage hero section: increase font size to 56px, change background to gradient from #667eea to #764ba2, add 40px padding top and bottom, center align the text."
Using Screenshots and Visual References
Screenshots are incredibly powerful for prompting:
Upload a screenshot of a design you like
Circle or annotate specific elements you want to replicate
Combine with text: "Make my hero section look like this screenshot but use our brand colors"
Best for: Layout changes, design inspiration, bug reports
Testing and Validating Your Prompts
After the AI makes changes:
Test the functionality - Does it work as expected?
Check all pages - Did it break anything else?
Test edge cases - What if fields are empty? Wrong format?
Mobile test - Does it look good on mobile?
Use Chat Mode to ask follow-up questions without editing code
Quick Reference: Prompt Checklist
Before submitting your prompt, check:
✅ Did I specify the exact page/component?
✅ Did I describe the expected behavior?
✅ Did I include design details (colors, sizes, layout)?
✅ Did I mention edge cases?
✅ Did I add guardrails for what NOT to change?
✅ Is my prompt specific and detailed?
✅ Am I asking for a reasonable amount of work?
✅ Did I include examples or references if needed?
Common Questions
How long should my prompts be?
As long as needed to be clear! Good prompts are usually 2-5 sentences for simple tasks, or a full paragraph for complex features. Don't worry about being too verbose—clarity is more important than brevity.
Should I use technical terms or simple language?
Use whatever is clearest for you. HeyBoss AI understands both technical terms ("add a useState hook") and simple language ("remember the user's selection"). Natural language usually works best.
What if the AI doesn't understand my prompt?
Try rephrasing with more specific details, add examples or screenshots, or break your request into smaller steps. Use Chat Mode to clarify what you mean before making code changes.
Can I reference other websites in my prompts?
Yes! Absolutely. Saying "make it look like Stripe's pricing page" or "add a hero section similar to Airbnb" gives the AI a clear visual reference.
Should I mention technical implementation details?
Only if you have specific requirements. Usually it's better to describe WHAT you want, not HOW to build it. The AI will choose the best implementation. But if you need something specific like "use Supabase for the database," mention it.
How do I know if my prompt is good enough?
If the AI builds what you wanted on the first try, it's a great prompt! If you need multiple iterations, review your prompt and add more details for next time. You'll get better with practice.
See also: Best Practices | Troubleshooting
Need help? Contact Support