How to Prompt AI Coding Agents: The Vibe Coding Prompt Playbook (With Templates)

The best prompts for AI coding agents describe the goal, give the relevant context, state constraints, define what "done" looks like, and ask for a plan before code. Vague prompts like "make it better" or "build me an app" produce vague, buggy code. Specific prompts produce code you can actually ship.

This playbook works with any agent: Claude Code, Cursor, GitHub Copilot, OpenAI Codex, Google Antigravity or an app builder like Lovable. It's the skill that matters most in vibe coding, more than which tool you pick.

Why prompting still matters with smart agents

Modern agents can explore your codebase on their own, so you don't need the elaborate "prompt engineering" tricks of 2023. But they still can't read your mind. Every gap in your prompt gets filled with an assumption, and assumptions are where bugs come from:

• You didn't say which database, so it invented one.
• You didn't say "mobile-friendly", so it isn't.
• You didn't say "don't change the API", so it did.

Good prompting is really just good briefing, like explaining a task to a talented contractor who has never seen your project. AI labs say the same thing in their own guidance, such as Anthropic's Claude Code best practices↗ (opens in a new tab).

The 5-part prompt formula

1. Goal: what you want and why.
2. Context: relevant files, existing patterns, who the users are.
3. Constraints: tech choices, things not to touch, performance or style rules.
4. Acceptance criteria: how you'll know it's done (ideally testable).
5. Process: ask for questions or a plan first.

Here's the difference in practice:

Weak prompt:

Add search to the blog.

Strong prompt:

Goal: Let readers search blog posts by title and description so they can find guides faster.

Context: Posts are MDX files loaded by lib/blog.js (getAllPosts). The blog index is
app/blog/page.js. We use Tailwind and the PostCard component.

Constraints:
- Client-side search only, no new backend or search service
- No new npm dependencies
- Keep the page statically generated

Done when:
- A search input above the grid filters posts as you type (case-insensitive)
- Shows "No guides match" when empty
- Works with keyboard only and on mobile widths

Before writing code, list any questions and propose a short plan.

The second prompt takes 60 seconds longer to write and saves an hour of back-and-forth.

Copy-paste prompt templates

New feature

Goal: [feature] so that [user benefit].
Relevant files: [@file1, @file2]. Follow the patterns in [@example file].
Constraints: [stack rules, no new deps, don't modify X].
Done when: [3–5 testable criteria].
Write or update tests for the new behavior.
Ask clarifying questions, then show a plan before editing.

Bug fix

Bug: [what happens] when [exact steps to reproduce].
Expected: [what should happen].
Error output:
[paste the full error and stack trace]
First explain the most likely root causes and how to confirm each one.
Don't change code until we agree on the cause. Then fix it and add a regression test.

More debugging strategies are in how to debug AI-generated code.

Refactor

Refactor [@file or folder] to [goal: e.g. split into smaller components / remove duplication].
Behavior must stay exactly the same. Run the tests before and after.
Do it in small steps and stop after each one so I can review the diff.

UI from a screenshot

[attach screenshot or mockup]
Recreate this layout for the pricing page in @app/pricing/page.tsx using our Tailwind
design tokens. Match spacing and hierarchy, not exact pixels. It must be responsive down
to 360px wide and meet WCAG AA contrast. Use semantic HTML.

Understanding unfamiliar code

Explain how authentication works in this project, as if I'm a beginner.
Walk through the files in order of a login request, and point out anything that
looks insecure or unusual. Don't change any code.

Security review

Review the changes on this branch for security issues: missing auth or ownership
checks, secrets in client code, unvalidated input, SQL/NoSQL injection, XSS, overly
permissive CORS, and exposed error details. Rank findings by severity with file:line.

Pair it with our full vibe coding security checklist.

12 prompting habits that make agents better

1. One task per prompt. Big multi-part requests produce sprawling diffs. Chain small tasks instead.
2. Ask for a plan first. Use plan mode in Claude Code or Cursor, or just say "plan first". See spec-driven development.
3. Point to examples. "Follow the pattern in @components/PostCard.js" beats describing a style.
4. Paste full errors. The whole stack trace, not "it doesn't work".
5. Say what not to touch. "Don't change the database schema" prevents scope creep.
6. Define done. Acceptance criteria give the agent a target it can test against.
7. Request tests. Tests let the agent verify its own work and protect against regressions.
8. Ask "why". "Why did you choose this approach? What are the alternatives?" catches bad decisions early.
9. Use screenshots for UI. A picture really is worth a thousand tokens.
10. Reset when stuck. Clear the conversation and restate the problem with what you've learned.
11. Put repeated instructions in a context file, not every prompt. That's what AGENTS.md and CLAUDE.md are for.
12. Give it tools to check its work. Browser automation via MCP lets it see what users see.

Prompting mistakes to avoid

• "Make it better / fix everything." The agent will change things you liked.
• Arguing in circles. If you've corrected the same mistake three times, the context is polluted. Start fresh.
• Accepting giant diffs unread. Ask for smaller steps instead.
• Asking it to "use the latest version" of a library. Models don't know what the latest is. Point them to docs, or use a docs MCP server.
• Pasting secrets into prompts. Use environment variables and placeholders.

A real session, start to finish

Here's how a small feature typically flows with a good agent:

1. You: feature prompt using the template above, ending with "plan first".
2. Agent: asks whether search should include tags. You say yes.
3. Agent: proposes a 4-step plan. You ask it to skip a debounce library and use a simple state update.
4. Agent: implements, runs the build, fixes a type error, and reports.
5. You: test it, find search breaks with special characters like C++, and report the exact input.
6. Agent: escapes the input, adds a test, and confirms.
7. You: review the diff and commit.

Total time: about 15 minutes, with code you understand.

Frequently asked questions

How long should a coding prompt be?

As long as it needs to be to remove ambiguity, usually 5–15 lines for a feature. Put long-lived project rules in a context file instead of repeating them.

Should I tell the AI to "act as a senior engineer"?

It rarely hurts, but it helps far less than concrete context, constraints and acceptance criteria.

Do different AI coding tools need different prompts?

The fundamentals are identical. Only the mechanics differ, like how you reference files (@ mentions) or switch to plan mode.

What if I don't know enough to write acceptance criteria?

Ask the agent: "Before building, list the acceptance criteria and edge cases you'd test for this feature." Then edit the list.