Effective Prompting for Code Generation
The quality of AI-generated code depends heavily on how you ask for it. This guide covers proven techniques for getting better results from Cursor, Claude, ChatGPT, and other AI coding tools.
The Anatomy of a Great Prompt
1. Context
Tell the AI what it's working with:
# Good: Full context
"I'm building a Next.js 14 app with TypeScript, using Supabase
for the backend and Tailwind CSS for styling. The app is a
project management tool."
# Bad: No context
"Create a function to save data"
2. Specific Requirements
Be explicit about what you need:
# Good: Specific requirements
"Create a React hook called useProjects that:
- Fetches projects from Supabase where owner_id matches current user
- Returns { projects, loading, error, refetch }
- Handles loading and error states
- Uses TypeScript with proper types
- Includes JSDoc comments"
# Bad: Vague requirements
"Make a hook for projects"
3. Constraints
Specify limitations and preferences:
"Requirements:
- No external dependencies beyond what's already installed
- Must work with React 18 concurrent features
- Should be under 50 lines of code
- Follow the existing code style in the project"
Prompting Patterns That Work
The Specification Pattern
## Task
Create a user registration form component
## Requirements
- Fields: email, password, confirm password, name
- Validation: email format, password min 8 chars, passwords match
- UI: Use shadcn/ui components
- State: React Hook Form with Zod validation
- Submission: Call /api/auth/register endpoint
## Expected Behavior
1. Show inline validation errors
2. Disable submit while processing
3. Show success toast on completion
4. Redirect to /dashboard after success
The Example Pattern
"Create a similar component to this one, but for projects instead of users:
\`\`\`tsx
function UserCard({ user }: { user: User }) {
return (
<Card>
<CardHeader>
<Avatar src={user.avatar} />
<CardTitle>{user.name}</CardTitle>
</CardHeader>
<CardContent>
<p>{user.email}</p>
</CardContent>
</Card>
);
}
\`\`\`
The project card should show: title, description, status badge, and bounty amount."
The Iteration Pattern
Start simple, then refine:
# Round 1
"Create a basic button component"
# Round 2
"Add variants: primary, secondary, outline, ghost"
# Round 3
"Add size options: sm, md, lg"
# Round 4
"Add loading state with spinner"
# Round 5
"Add disabled state styling"
Advanced Techniques
Chain of Thought
Ask the AI to think through the problem:
"Before writing code, explain:
1. What components/functions are needed
2. How they'll interact
3. What edge cases to handle
4. Then implement the solution"
Role Assignment
"You are a senior TypeScript developer who prioritizes:
- Type safety over convenience
- Explicit over implicit
- Readable over clever
- Tested over assumed working
Review this code and suggest improvements..."
Negative Prompting
Tell the AI what NOT to do:
"Create an auth system.
DO NOT:
- Use any deprecated APIs
- Store passwords in plain text
- Use 'any' type in TypeScript
- Skip error handling
- Hardcode any values"
Common Prompting Mistakes
1. Being Too Vague
ā "Make it better" ā "Improve performance by memoizing expensive calculations and reducing re-renders"
2. Asking for Too Much
ā "Build me a complete e-commerce platform" ā "Create the product listing page with filtering and sorting"
3. Not Providing Examples
ā "Match the existing style" ā "Match this style: [paste example code]"
4. Ignoring Errors
ā "It's not working, fix it" ā "Getting this error: [paste error]. The issue seems to be [your analysis]"
Prompt Templates
New Feature
## Feature: [Name]
## Context: [Tech stack, existing code]
## Requirements:
- [Requirement 1]
- [Requirement 2]
## Acceptance Criteria:
- [ ] [Criterion 1]
- [ ] [Criterion 2]
## Constraints:
- [Constraint 1]
Bug Fix
## Bug: [Description]
## Expected: [What should happen]
## Actual: [What happens]
## Error: [Error message if any]
## Relevant Code: [Paste code]
## What I've Tried: [Your attempts]
Code Review
## Code to Review:
[Paste code]
## Review Focus:
- Security vulnerabilities
- Performance issues
- TypeScript best practices
- Error handling gaps
## Output Format:
For each issue, provide:
1. Location (line/function)
2. Problem description
3. Suggested fix with code
Need help crafting the perfect prompt? Get expert assistance on CoderVibez.