AI Dev Guide
Prompts Techniques

Writing Effective Prompts

Practical techniques for writing better prompts for AI coding tools to get the results you want

What Makes a Good Prompt?

Giving instructions to an AI coding tool is like delegating work to a new team member. You need to provide enough context without overwhelming them.

Core Principles

1. Be Specific

# Bad
Make a login feature

# Good
Create a login form with email and password fields.
- Validation: email format check, password min 8 chars
- Submit to: POST /api/auth/login
- On success: redirect to /dashboard
- On failure: show error message above the form

2. One Thing at a Time

Break large tasks into smaller requests. Instead of “Build an e-commerce site”:

  1. First, create the product listing page
  2. Then, add the cart functionality
  3. Then, build the checkout flow

3. Reference Existing Code

Create a ProductCard component with the same style as
UserCard (src/components/UserCard.tsx)

Pointing the AI to existing patterns in your project produces more consistent code.

4. Describe the Expected Result

When this button is clicked, a modal should appear with a form inside.
After form submission, the modal closes and a toast notification appears.

Common Mistakes

”Make it better”

The AI doesn’t know your definition of “better.” Give specific criteria.

# Bad
Make the performance better

# Good
The product list takes 3 seconds to load.
Reduce re-renders with React.memo and useMemo,
and add lazy loading for images.

”Do everything”

Tasks that are too large confuse the AI. Work incrementally.

Over-specifying Implementation

If you dictate every implementation detail, you lose the AI’s biggest strength. Tell it what to build, and let it figure out how.

Practical Templates

Bug Fix

[Problem] Login button does nothing when clicked
[Steps to reproduce] 1. Go to /login 2. Enter email and password 3. Click login
[Expected] Redirect to /dashboard
[Actual] Nothing happens. Console shows 401 error

New Feature

[Summary] Users should be able to upload a profile picture
[Requirements]
- Drag & drop support
- Accepted formats: JPG, PNG (max 5MB)
- Upload endpoint: /api/upload
- Show preview before upload
[Reference] Extend the existing FileUpload component (src/components/FileUpload.tsx)

Next Steps