Reinventing.AI
AI Agent InsightsBy Reinventing.AI
Vibe Coding

Prompt Engineering for AI Coding

The quality of your prompts directly impacts the quality of your AI-generated code. Learn how to write prompts that get you exactly what you want, faster.

Why Prompts Matter

AI coding tools like Bolt.new, Cursor, and GitHub Copilot are incredibly powerful—but they're only as good as the instructions you give them. A vague prompt gets you generic code. A specific prompt gets you production-ready results.

Think of it like ordering at a restaurant. "I want food" gets you whatever. "I want a medium-rare ribeye steak with roasted garlic mashed potatoes and grilled asparagus" gets you exactly what you wanted.

The Anatomy of a Great Coding Prompt

Every effective coding prompt has these five elements:

1. Context

What kind of app or feature is this?

2. Functionality

What should it do? List specific features.

3. Design/Style

How should it look and feel?

4. Technical Requirements

Framework, libraries, responsiveness, etc.

5. Edge Cases

What happens when things go wrong?

Before & After Examples

Example 1: Building a Login Form

❌ Weak Prompt:

"Create a login form"

✅ Strong Prompt:

"Create a login form with email and password fields. Include:
- Email validation (must be valid format)
- Password field with show/hide toggle
- 'Remember me' checkbox
- 'Forgot password?' link
- Submit button that's disabled until form is valid
- Show error messages below each field for invalid input
- Modern design with Tailwind CSS
- Mobile-responsive layout
- Focus states and smooth transitions"

Example 2: Creating a Dashboard

❌ Weak Prompt:

"Make a dashboard with charts"

✅ Strong Prompt:

"Create an analytics dashboard with:
- Top row: 4 stat cards (Total Users, Revenue, Conversion Rate, Active Sessions)
- Middle row: Line chart showing user growth over the last 30 days
- Bottom row: Bar chart for top 5 traffic sources
- Use Recharts library for charts
- Use dummy data that looks realistic
- Dark theme with accent color #38bdf8
- Add loading skeleton states for charts
- Responsive grid layout (1 column mobile, 2 columns tablet, 4 columns desktop)"

Power Techniques

1. Use Examples and References

AI models understand references better than abstract descriptions:

"Create a pricing table similar to GitHub's pricing page—three tiers (Free, Pro, Enterprise) with feature lists, highlighted middle tier, and CTA buttons"

2. Specify Design Systems

Reference established design systems for consistency:

"Use Material Design principles with primary color #1976d2, rounded corners (8px), and elevation shadows"

3. Break Complex Requests into Steps

For large features, use multi-turn conversations:

Turn 1:

"Create the basic layout for a blog with header, sidebar, and main content area"

Turn 2:

"Now add a list of blog posts with thumbnail, title, excerpt, and read time"

Turn 3:

"Add pagination at the bottom, 10 posts per page"

4. Include Data Structure

When working with data, show the AI what shape it is:

"Create a product listing grid. Each product has this structure:"

{
  id: 1,
  name: "Wireless Headphones",
  price: 79.99,
  image: "/images/headphones.jpg",
  rating: 4.5,
  inStock: true
}

Platform-Specific Tips

Bolt.new

  • Bolt builds full apps, so describe the complete user flow
  • Mention specific npm packages if you have preferences
  • Use "Update the..." for modifications instead of starting over
  • Request "Add comments explaining..." for learning

Cursor AI

  • Reference existing files: "Following the pattern in Header.tsx..."
  • Use Cmd+K for inline edits with surgical precision
  • Highlight code sections and ask "Refactor this to..."
  • Ask for TypeScript types: "Add full TypeScript types for this component"

GitHub Copilot

  • Write descriptive comments above functions—Copilot reads them
  • Start typing function names that describe what you want
  • Use the chat for refactoring: "Extract this into a custom hook"
  • Be specific in comments: "// Fetch user data and cache for 5 minutes"

Common Pitfalls to Avoid

❌ Assuming the AI knows your stack

Always specify: "Using React with TypeScript and Tailwind CSS". Don't assume.

❌ Ignoring accessibility

Add: "Make sure it's accessible with keyboard navigation and screen readers"

❌ Forgetting mobile responsiveness

Always include: "Mobile-first responsive design" unless it's desktop-only

❌ Not specifying error states

Include: "Show loading spinner while fetching, error message if request fails"

Advanced: Prompt Templates

Save time with reusable templates. Here's one for new features:

Create a [COMPONENT TYPE] for [PURPOSE]

Features:
- [FEATURE 1]
- [FEATURE 2]
- [FEATURE 3]

Technical requirements:
- Framework: [React/Vue/etc]
- Styling: [Tailwind/CSS Modules/etc]
- State: [useState/Redux/etc]
- Responsive: [Mobile-first]

Design:
- Style: [Modern/Minimal/Playful/etc]
- Colors: [Primary/Secondary/etc]
- Layout: [Grid/Flex/etc]

Edge cases:
- Loading state: [Skeleton/Spinner]
- Error state: [Error message]
- Empty state: [Placeholder text]

Real-World Example: E-commerce Product Card

Here's a complete prompt that demonstrates all the principles:

Create a product card component for an e-commerce site.

Features:
- Product image with hover zoom effect
- Product name and brand
- Star rating (out of 5) with review count
- Price with strikethrough if on sale
- "Add to Cart" button
- Heart icon to add to wishlist
- "Quick View" button on hover

Technical requirements:
- React with TypeScript
- Tailwind CSS for styling
- Responsive (stack vertically on mobile, grid on desktop)
- Smooth transitions and hover effects
- Optimized images (lazy loading)

Design:
- Clean, modern aesthetic similar to Shopify stores
- White background with subtle shadow
- Primary color: #3b82f6
- Round corners (12px)
- Scale up slightly on hover

Props interface:
- id, name, brand, image, price, salePrice?, rating, reviewCount

Edge cases:
- Show "Out of Stock" badge if stock is 0
- Disable "Add to Cart" when out of stock
- Handle missing images with placeholder

Practice Exercise

Try writing a detailed prompt for a weather app widget. Include:

  • Current temperature and conditions
  • 5-day forecast
  • Location search functionality
  • Design preferences
  • Error handling for failed API calls

Test your prompt in Bolt.new and see how close you get on the first try!

Troubleshooting

AI keeps generating the wrong thing

Be more specific. Add "No, I meant..." and clarify the difference. Use examples or screenshots if possible.

Generated code is too complex

Add: "Keep it simple and beginner-friendly" or "Don't over-engineer this"

Missing features after generation

Your prompt might be too long. Break it into multiple turns: basic structure first, then add features one by one.

Keep Learning

Prompt engineering is a skill that improves with practice. Study prompts from PromptingGuide.ai and experiment constantly.

For done-for-you AI solutions that don't require prompting, check out Reinventing.AI.

Next Steps