Lesson 4 – Agentic Coding using Claude Code

Agentic Coding with Claude Code

The landscape of software development is shifting rapidly, and this lesson offers a hands-on demonstration of how an AI coding agent can integrate directly into a real-world development workflow. The session explores using Claude Code not just as a conversational assistant, but as an active agent capable of understanding a codebase and executing complex modifications based on natural language prompts. The core idea is agentic coding, a practice where the developer acts as a reviewer and director while the AI manages the heavy lifting of editing files, creating new components, and even interpreting visual design references. By working within an established project called Spendly, the demonstration shows how a developer can move from a concept to a committed change with unprecedented speed.

A Practical Git-Integrated Workflow

Central to the video is a clearly defined, repeatable workflow that mirrors best practices in professional software engineering. The process is structured around four distinct stages: session, prompt, commit, and push. Each coding session begins with a clearly defined objective, which is then translated into a structured prompt for the AI. Once Claude Code completes the task, the developer reviews the generated or modified code, stages the changes, and commits them to the version control system. The final step is pushing the commit to the remote repository. This disciplined approach ensures that AI-generated code is treated with the same rigor as manually written code, emphasizing the importance of version control and iterative progress. It validates the agent as a tool that fits seamlessly into existing Git-based collaboration norms rather than being an isolated experiment.

Evolving a Codebase Through Natural Language

A substantial portion of the lesson focuses on the practical execution of this workflow to enhance an existing web application. Starting with a basic landing page, the first task involves a seemingly simple but structurally important change: adding a footer with specific links. Through a well-crafted prompt, the AI agent is directed to search for the relevant files, understand the project’s templating structure, and inject the new HTML and styling. The demonstration then escalates in complexity by tasking the agent with generating entirely new pages, specifically Terms & Conditions and a Privacy Policy. The AI doesn't just create generic placeholder text; it generates legally plausible, structured content and integrates the new routes and links into the application’s navigation. This segment powerfully illustrates how routine, boilerplate-heavy tasks can be fully delegated, freeing the developer to concentrate on unique business logic and user experience.

Design Implementation from Visual Context

One of the most advanced and paradigm-shifting techniques covered is using an image as input context for code generation. The video showcases a hero section redesign, where the developer provides Claude Code with a reference image of a desired UI layout. The AI agent interprets the pixel-based design, inferring the arrangement of text, buttons, background elements, and spatial relationships, and then generates the corresponding front-end code. This capability bridges the traditional chasm between graphic design and development. Instead of a developer manually measuring elements from a mockup and writing every line of CSS, they can use an image as a living specification. The section demonstrates the workflow of providing the image, reviewing the AI-generated implementation, and iterating with follow-up prompts to refine details until the output matches the visual intent.

Mastering Iterative Corrections and Complex Components

Beyond initial generation, the lesson delves into the critical skill of handling mistakes and refining AI output through iterative prompting. A modal popup containing an embedded YouTube video serves as the case study for a more interactive and JavaScript-heavy feature. The process involves instructing the agent to create the modal, integrate the video iframe, wire up the open and close logic, and style the component. The video does not shy away from the reality that the first output may not be perfect. It models the debugging cycle: identifying a discrepancy, formulating a corrective follow-up prompt, and allowing the agent to revise its previous work. This highlights an essential mindset for agentic coding, where the user is an orchestrator guiding the AI toward the correct solution through a dialogue, rather than a passive recipient of potentially flawed code.

Understanding the Role of the Developer

The underlying message throughout the demonstration is a redefinition of the developer's role in an agentic coding environment. The focus shifts from being a writer of syntax to being a curator of intent. The key skill becomes prompt engineering—the ability to articulate complex software requirements with precision and context. The developer is responsible for system architecture knowledge, understanding which files to target, and critically reviewing the AI's output for correctness, security, and performance. The workflow of session, prompt, commit, and push is not just about process, but about maintaining ultimate responsibility. The video implicitly argues that agentic tools like Claude Code amplify a developer's capabilities, but the human element of strategic oversight, creative direction, and quality assurance remains the most critical component of the development lifecycle.