Effective prompt patterns and conversation strategies for vibe coding
In vibe coding, prompts are the "instructions" you write instead of code. Good instructions include these 3 elements:
Clearly state what to build.
Bad: "Make a login feature"
Good: "Build an email/password login using Supabase Auth.
On successful login, redirect to /dashboard."
Share the current situation and existing code.
Bad: "Fix the bug"
Good: "Clicking the login button gives 'TypeError: Cannot read property email of null'.
I think it's in the handleSubmit function in app/login/page.tsx."
Describe the desired result format.
Bad: "Make an API"
Good: "Create a GET /api/users endpoint that returns a user list.
Response format: { users: [{ id, name, email }], total: number }"
| # | Bad Prompt | Good Prompt | Improvement |
|---|---|---|---|
| 1 | "Make a button" | "Make a blue rounded button. On hover it turns dark blue, shows a spinner when loading" | Style + states |
| 2 | "Connect DB" | "Set up a Supabase client in lib/supabase.ts. Read env vars from .env.local" | Tool + file path |
| 3 | "Handle errors" | "In this API route, return appropriate HTTP status codes and English messages on Supabase errors" | Specific action |
| 4 | "Write tests" | "Write unit tests for calculatePrice. 2 normal cases, 2 error cases" | Scope + quantity |
| 5 | "Make a page" | "Create a pricing page with Free/Pro/Enterprise plans, toggle for monthly/yearly" | Detailed structure |
| 6 | "Improve performance" | "This component calls the API on every render. Add caching with useSWR" | Cause + solution |
| 7 | "Make it responsive" | "1 column on mobile (below 640px), 2 columns on tablet, 3 columns on desktop" | Breakpoints |
| 8 | "Deploy it" | "Configure for Vercel deployment. Update next.config.ts and list required env vars" | Platform + deliverables |
| 9 | "Clean up code" | "Remove unused imports, extract functions into separate files by functionality" | Specific task list |
| 10 | "Add dark mode" | "Implement dark mode with next-themes. Auto-detect system preference, add toggle in header" | Library + location |
"Add [feature name].
Requirements:
- [Specific requirement 1]
- [Specific requirement 2]
- [Specific requirement 3]
Tech stack: [Libraries/tools to use]
File location: [File path to create]"
"In [where], when [doing what], [problem] occurs.
Error message:
[Full error message]
Expected: [What should happen]
Actual: [What is happening]"
"Refactor [file/function].
Current issues:
- [Problem 1]
- [Problem 2]
Desired direction:
- [Improvement 1]
- [Improvement 2]
Note: [What should NOT change]"
"Change the design of [component].
Current: [Current appearance]
Desired: [Desired appearance]
Reference: [Reference site/image if any]
Responsive:
- Mobile: [Mobile layout]
- Desktop: [Desktop layout]"
"Review the code in [file/folder].
Check for:
- Security vulnerabilities
- Performance issues
- Code duplication
- Best practice violations
Suggest fixes for any issues found."
# Copy the full error message as-is
> "I'm getting this error:
TypeError: Cannot destructure property 'user' of '...' as it is undefined.
at LoginPage (app/login/page.tsx:15:9)
Please fix it."Instead of "there's an error", copy-paste the full error message. AI uses details like file names, line numbers, and stack traces to find the exact cause.
Claude Code understands images. For UI issues, show a screenshot:
> "Look at this screenshot (drag and drop image)
The header overlaps like this on mobile, please fix it"| Situation | Strategy | Reason |
|---|---|---|
| New project setup | One big prompt | Consistent overall structure |
| Adding features | Break into small prompts | Step-by-step verification |
| Bug fixes | One at a time | Easier root cause tracking |
| UI improvements | One big prompt | Design consistency |
For complex tasks, ask for a plan before implementation:
> "Before implementing this feature, show me which files you'll create and modify"> "Undo the last changes"
> "Restore the 3 files you just modified to their original state"> "Let's try a different approach instead. [New direction]"
> "Keep what we have so far, but redo [this part]"When the AI conversation isn't going the direction you want, starting a new session is fastest. Use /clear to reset the conversation, or close the terminal and run claude again.
Now that you know prompt writing techniques: