Master the art of writing effective prompts for AI coding tools. Learn core principles, prompt structures, and techniques for better results.
Prompt Engineering Fundamentals
The quality of AI output is directly tied to the quality of your input. Prompt engineering is the skill of writing clear, effective instructions that help AI tools understand exactly what you need.
Core Principles
1. Clarity
Be explicit about what you want. Ambiguous prompts force the AI to guess, often incorrectly.
Bad:
make a login form
Good:
Create a login form component in React with TypeScript:
- Email and password fields
- Client-side validation (email format, password min 8 chars)
- Loading state during submission
- Error message display
- Use Tailwind CSS for styling
2. Specificity
Include the details that matter. The more specific you are, the more accurate the output.
Always specify:
- Programming language and version
- Framework or library preferences
- Error handling expectations
- Output format requirements
3. Context
Help the AI understand not just what you want, but why and how it fits into your project.
Essential context:
- Tech stack and dependencies
- Project architecture
- Coding standards and conventions
- Related files or functions
4. Constraints
Set boundaries to prevent unwanted behaviors:
Generate a REST API endpoint with the following constraints:
- Use Express.js with TypeScript
- Follow RESTful naming conventions
- Include input validation using Zod
- Return appropriate HTTP status codes
- Do NOT use deprecated methods
5. Examples
Showing is more powerful than telling. Include examples of desired output when helpful:
Convert these function names to camelCase:
- get_user_data → getUserData
- fetch_all_posts → fetchAllPosts
- send_email_notification → ???
The Prompt Structure Template
A well-structured prompt has four parts:
[ROLE/CONTEXT]
You are building a [type of app] using [tech stack].
[TASK]
Create/Fix/Refactor [specific thing].
[REQUIREMENTS]
- Requirement 1
- Requirement 2
- Requirement 3
[CONSTRAINTS]
- Must use [specific library/pattern]
- Should not [limitation]
[FORMAT]
Return the code with comments explaining key decisions.
Prompting for Different Tasks
Code Generation
Create a [component/function] that:
- Does [primary function]
- Handles [edge cases]
- Uses [specific patterns/libraries]
- Returns [expected output]
Example:
Create a React hook called useDebounce that:
- Takes a value and delay (in milliseconds) as parameters
- Returns the debounced value
- Cleans up the timeout on unmount
- Uses TypeScript with proper generic typing
- Include a usage example in comments
Debugging
I'm getting this error:
[error message]
In this code:
[code snippet]
When trying to:
[what you were doing]
Expected behavior:
[what should happen]
Actual behavior:
[what's happening instead]
Refactoring
Refactor this code to:
- Follow [specific pattern]
- Improve [performance/readability/maintainability]
- Use [modern syntax/best practices]
Current code:
[code]
Preserve: Exact same input/output behavior
Explanation
Explain this code to a [audience level]:
[code]
Include:
- What each section does
- Why these patterns are used
- Potential improvements
Advanced Techniques
Chain of Thought
Ask the AI to think through problems step by step:
Think through this step by step:
1. First, analyze [x]
2. Then, consider [y]
3. Finally, implement [z]
[Problem description]
Few-Shot Prompting
Provide examples that demonstrate the pattern you want:
Format API responses like this:
Input: { user: "john", age: 25 }
Output: { success: true, data: { user: "john", age: 25 } }
Input: null
Output: { success: false, error: "Invalid input" }
Now format this:
Input: { product: "laptop", price: 999 }
Meta Prompting
Ask the AI to help you write a better prompt:
I want to build [feature]. Before we start, ask me clarifying
questions to understand exactly what I need.
Tool-Specific Tips
Different tools have different capabilities:
| Tool | Context Tips |
|---|---|
| Cursor | Use @file, @folder, @codebase for context |
| Claude Code | Reference specific files by path |
| Copilot | Use clear function names and comments |
| Lovable | Be descriptive, use visual references |
| v0 | Include design constraints and layout details |
Common Mistakes to Avoid
1. Too Vague
❌ "Make it better" ✅ "Improve performance by memoizing expensive calculations"
2. Too Much at Once
❌ "Build me a complete e-commerce site" ✅ Start with one component or feature at a time
3. No Context
❌ "Fix this bug" ✅ Include the error, code, expected behavior, and tech stack
4. Assuming Knowledge
❌ "Use our standard pattern" ✅ Describe the pattern or reference the specific file
5. Not Iterating
AI rarely gets it perfect on the first try. Plan to refine:
You: Create a user card component
AI: [provides code]
You: Good start, but add a loading skeleton state
AI: [updated code]
You: Now add an optional badge prop for user roles
AI: [final code]
Prompt Templates
React Component
Create a [ComponentName] React component:
Purpose: [what it does]
Props:
- [propName]: [type] - [description]
Behavior:
- [behavior 1]
- [behavior 2]
Styling: Use Tailwind CSS with [design notes]
State: [any state management needed]
Example usage:
<ComponentName prop1="value" prop2={data} />
API Endpoint
Create an API route at /api/[name]:
- Method: [GET/POST/etc]
- Input: [schema]
- Output: [schema]
- Validation: Use Zod
- Error handling: Return appropriate status codes
Bug Fix
Bug: [description]
Error message:
[paste error]
Relevant code:
[paste code]
Steps to reproduce:
1. [step 1]
2. [step 2]
Expected: [behavior]
Actual: [behavior]
What I've tried:
- [attempt 1]
- [attempt 2]
Exercise
Take this vague prompt and improve it using the principles you learned:
Original:
make a form that saves data
Your Improved Version:
Think about:
- What kind of form?
- What fields does it need?
- Where should data be saved?
- What validation is required?
- What feedback should users see?
Summary
- Clarity: Be explicit about what you want
- Specificity: Include relevant details
- Context: Help AI understand your project
- Constraints: Set boundaries
- Examples: Show desired patterns
- Iteration: Refine through conversation
Good prompts lead to good code. Take time to craft your requests—it saves time debugging later.
Next Steps
Now that you can write effective prompts, let's learn how to evaluate and work with AI-generated output safely.