{"slug": "vibe-coding-to-agentic-engineering-with-claude-code", "title": "Vibe Coding to Agentic Engineering with Claude Code", "summary": "A developer outlines a three-phase Claude Code workflow that shifts from 'Vibe Coding' to 'Agentic Engineering' by using structured prompts with explicit requirements, planning, and verification criteria to reduce wasted sessions and context window overflows.", "body_md": "You write a prompt, hand it to your coding agent, and wait. A few minutes later, you get back… something. Maybe it compiles. But it ignores half your requirements, invents an abstraction you never asked for, or quietly breaks a pattern the rest of the codebase depends on. So you re-prompt. And re-prompt again. And burn through the context window before you’ve shipped anything.\n\n*If that loop feels familiar, the problem usually isn’t the model. *Left to guess, a Claude Code session fills the gaps you didn’t realize you’d left open: ambiguous requirements, unclear scope, missing acceptance criteria, and no way for it to verify its own work.\n\nThe fix isn’t a cleverer one-off prompt. It’s a repeatable *process* around the prompt. In this blog, I am going to show you the three-phase Claude Code workflow that I follow whenever I’m working on a coding task:\n\nThanks to this three-phase process, I am seeing more coding sessions end up in implementing what I need while also avoiding frequent long session runtimes, wasted sessions and context window overflows. Adopting this process shifts you from *Vibe Coding* to *Agentic Engineering,* and it’s the difference between hoping for good output and engineering it.\n\n## Vibe Coding vs. Agentic Engineering\n\nVibe Coding is the now-common practice of prompting an agent, skimming the result, accepting it if it looks about right, and moving on. The problem shows up the moment the code has to live in a real codebase: the agent fills any ambiguity with guesses, and you inherit whatever it guessed.\n\nAgentic Engineering is the opposite stance. You treat the coding agent as a capable but literal collaborator and keep the engineering disciplines that earned their place over decades, such as clear requirements, a plan, tests, verification, and review. The agent does more of the typing; you stay responsible for the engineering.\n\nHere’s the contrast at a glance:\n\nVibe Coding |\nAgentic Engineering |\n|\nRequirements |\nImplied in a one-line prompt | Stated explicitly, with scope and intent |\nPlanning |\nNone (straight to code) | A plan you review before any coding starts |\nVerification |\n“Looks right” | Tests and acceptance criteria that the agent must meet |\nReview |\nSkimmed or skipped | Code review and a walkthrough before merge |\nBest for |\nPrototypes, throwaway scripts | Code that ships and has to be maintained |\n\nThe three-phase process below is what Agentic Engineering looks like in day-to-day practice.\n\n## Start with a Structured Code Prompt to Capture Intent\n\nA good code prompt gives the coding agent a single task with a well-defined scope and verification criteria. Here’s a prompt template you should copy and fill in before every coding task:\n\n```\n[One imperative sentence describing the task.] [One or two sentences\non why... the intent behind it.]\n\nBefore making any changes, read [relevant files, modules, or patterns\nto reference].\n\nThe solution must [constraint], [constraint], and [constraint]. Do not\ntouch [out-of-scope items].\n\nWrite [testing expectations -- e.g., \"unit tests for any new logic\"]\nand ensure the existing suite passes. The task is complete when\n[verifiable criterion] and [verifiable criterion].\n```\n\nInstead of a one-line task statement, this prompt template encourages you to think about and communicate clearly:\n\n**A single, imperative task statement.** One sentence, active voice, no ambiguity. \"Add pagination to the`/users`\n\nendpoint,\" not \"It would be good to handle large user lists maybe.\"**The intent behind the task.** A brief \"why\" helps the agent make sensible judgment calls when it hits edge cases you didn't anticipate. \"…so the endpoint doesn't time out on large datasets.\"**Pointers to relevant context.** Name the specific files, modules, or existing patterns the agent should read before touching anything. Don't make it go hunting.**Constraints.** Technical, stylistic, or operational limits the solution must respect — e.g., \"don't change the public API surface\", \"follow the error-handling pattern in`auth.ts`\n\n\", \"no new dependencies\".**Explicit out-of-scope items.** Anything adjacent that a reasonable agent might assume is fair game. Being explicit here prevents well-intentioned over-reach.**Testability expectations.** Should the agent write new tests, update existing ones, or just verify the suite still passes? Left unspecified, this is a common source of inconsistent output.**Verifiable acceptance criteria.** Each criterion should be checkable without human judgment — a passing test, a specific curl response, a lint run with no errors. \"It should work correctly\" is not a criterion.\n\nHere is an example prompt written using this template:\n\n```\nAdd offset-based pagination to the `GET /users` endpoint. The\nendpoint currently returns all users in one query, causing production\ntimeouts as the table has grown past 500k rows.\n\nBefore making any changes, read `src/routes/users.ts`, the existing\npagination pattern in `src/routes/posts.ts`, and the `paginate()`\nhelper in `src/db/helpers.ts`.\n\nThe solution must default to page=1, limit=20 so existing callers are\nunaffected, use the error-handling pattern in `src/lib/errors.ts`, and\nintroduce no new dependencies. Do not touch any other endpoints, the\nUser model, or the database schema.\n\nAdd unit tests for the new logic in `src/routes/users.test.ts` and\nensure the existing suite passes. The task is complete when:\n- `GET /users` returns a meta object with page, limit, and total\n- `GET /users?page=2&limit=10` returns the correct slice\n- Error handling is implemented for invalid page parameters\n```\n\nYou can find the [complete prompt template here](https://gist.github.com/thehappybug/386fe5f39ce87720398209b8ca296abb).\n\n### Why does this work?\n\nThe Structured Code Prompt directly *addresses common mistakes* such as ambiguous requirements, unclear scope, missing verification steps, and acceptance criteria.\n\nMore importantly, it *forces you to think* about these before starting every coding task, gain clarity on them, and, in turn, transfer this clarity to the coding agent.\n\nLastly, by referencing relevant files and existing patterns, you provide the coding agent with a significant boost in *code understanding*, helping it discover important files, code flows and similar patterns to follow in the code it writes.\n\n### Code Prompting Anti-Patterns to Avoid\n\nA structured coding prompt gives you the best starting point for your coding session. However, there are still a few anti-patterns you should avoid:\n\nOne-Shotting an Application |\nLarge or Multi-part Tasks |\nRepeating Project Context |\n|\nExample |\n“Build a dashboard for my application.” | “Create a blog editor, media manager, and spell checker.” | “The purpose of this project is to...” |\nWhy |\nThe agent must make many assumptions. | Scope and requirements become unclear. | Shared context is hard to maintain. |\nPreferred Approach |\nSplit into smaller tasks. | Break work into smaller tasks or use follow-up prompts. | Store context in `CLAUDE.md` or `AGENTS.md` . |\nException |\nDemos, reports, throw-away projects. | Tightly coupled tasks. | When evolving project scope or architecture. |\n\nEven when you follow the Structured Code Prompt and avoid anti-patterns, we recommend planning the changes rather than jumping straight into implementation.\n\n## Use Claude Code’s Plan Mode to Align on Implementation\n\nWhen starting a new task, use Plan Mode to create an implementation plan before the agent starts coding. Plan Mode allows the agent to:\n\n- Explore the codebase and gather context\n- Check any ambiguities or assumptions in the plan\n- Understand what to do\n- Break down the requirements into a step-by-step plan\n- Align with the user on the details\n\nMost coding agents provide a [Plan Mode](https://docs.claude.com/en/docs/claude-code/overview), which in Claude Code you can trigger by pressing `Shift + Tab`\n\ntwice (or with the `/plan`\n\ncommand). First, enable Plan Mode and then start your coding session with a Structured Code Prompt:\n\n```\n/plan Add offset-based pagination to the `GET /users`\nendpoint... [rest of your structured prompt goes here]\n```\n\nYour coding agent will return a plan file like this:\n\nOnce you have the plan in hand, you can edit it directly or ask the coding agent to make changes to it, allowing you to *align the agent *with your understanding of requirements and code changes.\n\n### Why does this work?\n\nThe Plan phase provides dedicated time and space (in terms of tokens) for the coding agent to plan before it begins implementation. Here, the focus is on *understanding and connecting* rather than just making something work by any means.\n\nWhen you start without a planning phase, you are telling the agent to do just the bare minimum thinking (and planning) needed to complete the task and stop as soon as you hit the task goal (or close to it).\n\nIt is, therefore, no surprise that coding sessions without a planning phase often miss requirements, which later require further iteration, design consolidation, and simply more effort if we had started with a plan.\n\n### Pro Tips for Using Plan Mode\n\nOnce you have the plan in hand, it is time to *align the agent* with your understanding of requirements and code changes.\n\n#### Participate in the Planning Process:\n\nAsk the agent to run any requirements ambiguity, implementation decisions or blocking issues with you during planning:\n\n```\n/plan Add offset-based pagination to the `GET /users`\nendpoint... [rest of your structured prompt goes here].\n\nIn case you need to confirm any major design or implementation\ndetails, blocking concerns or requirement ambiguity, use the\nquestion tool to ask me clarifying questions before writing\nthe final plan.\n```\n\nThe agent will now ask you questions as it works towards a plan.\n\n#### Review Plan and Provide Feedback:\n\nThe best part of the plan mode is that it returns a `PLAN.md`\n\nfile you can edit before implementation begins.\n\nHere are some things you should focus on in your feedback:\n\n- Interface design, file placement or naming.\n- Adding/removing something from the scope.\n- Asking for more thorough test coverage.\n- Correcting the agent on its assumptions.\n- Changing the code design to fit with the architecture.\n\nOnce you have provided feedback, the agent will give you an updated plan file.\n\n#### Check Your Assumptions:\n\nSometimes, the plan does not cover all implementation details. Ask the agent clarifying questions about the plan and test their understanding from the planning phase.\n\nHere are a few questions I like to ask:\n\n`List all the interface changes you're going to implement.`\n\n`Which files are going to be impacted by this implementation?`\n\n`Is there any requirement that significantly increases implementation complexity?`\n\n`Can you explain how you will test the XYZ feature?`\n\nOnce you’re satisfied with the plan, you can ask the agent to finally start implementation.\n\n## Close with an AI Code Review and Walkthrough\n\nOnce the implementation is complete, we have our conversation history and the generated code in the coding agent's context window, presenting yet another opportunity to improve the coding task output.\n\n### Code Review\n\nDoing an automated code review using your coding agent is one of the lowest-hanging fruit you can go for post-implementation. Never skip this!\n\nYou can use the `/code-review`\n\ncommand, which comes built into Claude Code or Codex. However, I prefer this prompt, adopted from Claude’s docs:\n\n```\nUse a subagent to review the changes against `PLAN.md`. Check\nthat every requirement is implemented, the listed edge cases\nhave tests, and nothing outside the task's scope changed. Report\ngaps, not style preferences.\n```\n\nThis gets you both a code review and a validation against the acceptance criteria.\n\nOnce the agent responds with a list of issues, you can ask it clarifying questions or simply ask it to fix the issues.\n\n```\nFix the issues you found.\n```\n\n#### Why does this work?\n\nIt might seem strange to have the coding agent review its own code. Think of it as asking the agent to start with a fresh mind (or rather, a fresh context window), but with a focus on reviewing code rather than writing code.\n\nUsually, these steps help me fix 2 to 4 issues after each coding session with minimal effort.\n\n### Code Coverage Check\n\nThis is another low-effort improvement that you can ask your coding agent to do for you:\n\n```\nCheck the test coverage for the new code and updated code\nfiles. Then close any gaps by adding new tests.\n```\n\n#### Why does this work?\n\nThe coding agent reads your `CLAUDE.md`\n\nor `AGENTS.md`\n\nfile and knows which test runner you are using, as well as the commands to run it.\n\nSince I mainly code in TypeScript, I use [Vitest](https://github.com/vitest-dev/vitest) as my test runner, which supports generating a test coverage report with the command `vitest --coverage`\n\n.\n\nThe coding agent automatically runs this command and, based on the observed gaps, writes new tests to close them.\n\n### Code Walkthrough\n\nUsually, at this stage, I am ready to start reviewing the code myself.\n\nIf you’re doing Agentic Engineering rather than Vibe Coding, you should review all generated code before committing it to your repository. However, it may feel like there is always more AI-generated code than you can keep up with.\n\nLet's tackle this AI-generated problem with more AI!\n\n```\nWrite a walkthrough tutorial to help me onboard onto the new code\nchanges.\n\n- Make sure to introduce me to the new concepts, interfaces and\nflows introduced as part of the code changes and connect them to\nexisting ones in the codebase.\n- Identify any gotcha or surprises that came up during the\nimplementation.\n- Use code snippets and examples in your explanations.\n- Always link to the specific files or code segments you are\ntalking about so I can navigate to them if I need to.\n\nNote that I am already familiar with this codebase, but the code\nchanges are completely new for me.\n```\n\nThis creates a customized step-by-step onboarding tutorial to help familiarize you with the code changes.\n\nSometimes, I will add a statement in the prompt, asking it to focus on a specific concept or issue: `Add a focused section on how authentication works for the APIs.`\n\n#### Why does this work?\n\nWith the planning details and code changes in the context window, the coding agent is well-equipped to provide a concierge walkthrough of the changes.\n\nThe walkthrough helps you avoid expending precious developer hours on random walks through Git by having the coding agent act as your guide, just as in-person code review sessions do.*As you go through the code walkthrough, feel free to flag any issues you find during your review back to the coding agent and ask it to fix them. *Usually, I try to gather the issues in a scratchpad somewhere and then paste them into the coding agent to fix all in one go, especially when the list is small.\n\n## What Did We Learn?\n\nThe three-phase implementation process is simple:\n\nIt works because it steers engineers away from a vibe coding workflow towards proper *“Agentic Engineering”*, where requirements, design, testing, verification, and code review are fixed parts of your coding routine.\n\nThe best engineering teams integrate coding agents into their existing Software Development Lifecyle (SDLC) rather than working around it.\n\nIn the future, we will touch upon more topics critical to Agentic Engineering, which I could not cover here due to space:\n\n- Documenting Context (\n`CLAUDE.md`\n\nor`AGENTS.md`\n\n) - Project Structure and Navigability\n- Scaling Engineering with AI\n\nMeanwhile, here’s a quick tip to improve your coding session: check out [APIMatic’s Context Plugin](/product/context-plugins), which helps speed up writing API Integration code whenever you’re working with your favorite APIs.\n\n## Frequently Asked Questions\n\n### How do I get better results from Claude Code?\n\nGive it less to guess. Most disappointing output traces back to an underspecified prompt, so start every task with a structured prompt that states the task, the intent, the files to read, the constraints, what’s out of scope, and verifiable acceptance criteria. Then plan before coding and review after.\n\n### What is Plan Mode, and when should I use it?\n\nPlan Mode is a read-only mode where the agent explores your codebase and proposes an implementation plan without changing any files. In Claude Code, you enter it by pressing `Shift + Tab`\n\ntwice (or with the `/plan`\n\ncommand). Use it for anything non-trivial, such as multi-file changes, refactors, or unfamiliar code. If you could describe the diff in one sentence, you can skip it.\n\n### Is Agentic Engineering different from Vibe Coding?\n\nYes. Vibe coding means accepting AI output on a quick “looks right” judgment; Agentic Engineering keeps requirements, planning, testing, verification, and review in the loop so the agent’s work holds up in a real codebase. Same model but different process around the prompt.\n\n### Do I still need to review AI-generated code?\n\nAlways. The walkthrough and code review steps in this workflow make the review faster, but they don’t replace your judgment. Before anything merges, you should understand what changed and why. Having the agent generate a focused walkthrough is the cheapest way to get there.", "url": "https://wpnews.pro/news/vibe-coding-to-agentic-engineering-with-claude-code", "canonical_source": "https://www.apimatic.io/blog/agentic-engineering-claude-code", "published_at": "2026-06-24 17:52:10+00:00", "updated_at": "2026-06-24 18:10:16.753827+00:00", "lang": "en", "topics": ["ai-agents", "developer-tools", "large-language-models", "ai-tools"], "entities": ["Claude Code"], "alternates": {"html": "https://wpnews.pro/news/vibe-coding-to-agentic-engineering-with-claude-code", "markdown": "https://wpnews.pro/news/vibe-coding-to-agentic-engineering-with-claude-code.md", "text": "https://wpnews.pro/news/vibe-coding-to-agentic-engineering-with-claude-code.txt", "jsonld": "https://wpnews.pro/news/vibe-coding-to-agentic-engineering-with-claude-code.jsonld"}}