Effective Prompts for Code

The quality of your AI-generated code depends directly on the quality of your prompts. Prompt engineering for code follows its own rules — technical precision, context provision, and iterative refinement.

Code Generation

The Perfect Code Generation Prompt

A good prompt contains five elements:

1. What: The function or component to create
2. How: Technology stack, patterns, and conventions
3. Context: Relevant existing interfaces, types, and dependencies
4. Constraints: What NOT to do, performance requirements
5. Example: An input/output example or similar pattern in the codebase

Bad:

"Create a login function"

Good:

"Create a handleLogin server action in src/app/actions/auth.ts. Use Supabase Auth with signInWithPassword. Validate email and password with Zod. On success redirect to /dashboard, on error return a typed error message. Follow the pattern in @file:src/app/actions/signup.ts"

Incremental Code Generation

Instead of generating an entire feature in one prompt — build it step by step:

1. Types/interfaces first: "Define the TypeScript types for..."
2. Database schema: "Create the Supabase migration for..."
3. Server logic: "Implement the server action with the defined types..."
4. UI component: "Create the form component that calls the server action..."
5. Tests: "Write Vitest tests for the server action..."

Refactoring with AI

Refactoring Prompts

Pattern-based refactoring:

"Refactor @file:src/components/UserList.tsx — replace the useEffect + useState for data loading with useSWR. Keep the existing error handling."

Performance refactoring:

"Optimize the render performance of @file:src/components/Dashboard.tsx — identify unnecessary re-renders and apply React.memo, useMemo, and useCallback appropriately."

Architecture refactoring:

"Extract the business logic from @file:src/components/OrderForm.tsx into a custom hook useOrderForm. The component should only render UI."

Debugging with AI

Effective Debug Prompts

Error message + context:

"I'm getting this error: [paste error message]. The error occurs in @file:src/lib/api.ts line 42. The relevant function uses @file:src/types/api.ts. What's the cause?"

Reproducible description:

"When I click 'Save', the form in @file:src/components/EditProfile.tsx submits, but the data in Supabase doesn't update. The Network tab shows a 200 status. No error in the console."

AI Debug Workflow

1. Share error message + stack trace
2. Reference relevant files with @file
3. Ask AI for diagnosis (not immediately for a fix)
4. Validate the diagnosis
5. Have the fix implemented
6. Ask AI about edge cases that could cause the same bug

Test Writing

Test Generation Prompts

Unit tests:

"Write Vitest unit tests for @file:src/lib/utils/pricing.ts. Test all functions with valid inputs, edge cases (0, negative numbers, undefined), and error cases. Use describe/it blocks with German descriptions."

Integration tests:

"Write an integration test for the signup flow: fill form → server action → create Supabase user → redirect. Mock Supabase with vi.mock."

Documentation Generation

Generate Docs from Code

"Create JSDoc comments for all exported functions in @file:src/lib/billing/stripe.ts. Describe parameters, return values, and possible errors. Add @example blocks."

Commit Messages

"Analyze the current git diff and write a Conventional Commit message. Format: type(scope): description. Body with the key changes."

Golden rule: The more context you give the AI, the better the output. Always reference existing files, types, and patterns — the AI should write code that fits into your codebase, not generic code.