What is Vibe Coding?

Key Concepts

• Vibe Coding: A coding style where a developer fully trusts and relies on Generative AI (GenAI) to write code, often without detailed review, driven by intuition and the AI's perceived capabilities.
• GenAI Assisted Coding: A more professional approach where GenAI acts as a tool to enhance developer productivity, speed up tasks, identify bugs, and perform code reviews, while the developer maintains oversight and understanding of the code.
• Integrated Development Environment (IDE): Software application used by developers for coding, typically featuring panes for file navigation and code editing.
• GenAI Pane: An additional pane within an IDE used for interacting with GenAI, submitting prompts, and receiving code generation or explanations.
• LLMs (Large Language Models): The underlying AI technology enabling GenAI coding capabilities.
• Prompt Engineering: The art of crafting effective instructions for GenAI to achieve desired outcomes.
• Token Waste: A colloquial term referring to unnecessary or inefficient use of computational resources (tokens) when interacting with AI models.
• Moving Up the Stack: A metaphor for increasing levels of abstraction and capability in programming languages, from low-level machine code to higher-level languages and now, potentially, natural language.

Vibe Coding vs. GenAI Assisted Coding

The video distinguishes between two closely related terms: vibe coding and GenAI assisted coding.

• Vibe Coding: This is described as a more "wild" approach where the developer "fully gives into the vibes, embraces exponentials, and forgets that the code even exists." The core idea is to let GenAI write the code with minimal to no review, based on the assumption that LLMs are becoming sufficiently advanced. The original definition from Andre Karpathy is quoted: "I just see stuff, say stuff, run stuff, copy and paste stuff, and it mostly works." This style is deemed suitable for less critical applications like weekend projects or hobby projects.

• GenAI Assisted Coding: This is presented as the more professional and responsible term, particularly for important projects or commercial software. In this approach, developers still need to understand and approve all code, ensuring it aligns with architectural standards and project requirements. GenAI serves as a "helping hand" to boost productivity, accelerate development, assist in bug detection, and even perform code reviews, but it does not take over the entire coding process.

The Developer Workflow with GenAI

The video illustrates how GenAI integrates into a developer's workflow, primarily within an Integrated Development Environment (IDE).

• Traditional IDE Structure: An IDE typically has two main panes:

  • Left Pane: Displays folders and files, reflecting the hierarchical structure of a software project, which can involve thousands of files.
  • Main Pane (Tabs): Opens individual files as tabs, similar to browser tabs, displaying the code for each file.

• Introducing the GenAI Pane: When using GenAI for coding, a third pane is introduced:

  • GenAI Pane: This is where the developer interacts with the AI. Prompts are entered here, and the AI's responses, explanations, and generated code appear.

• Interaction Styles:

  • Vibe Coding: The developer might minimize or ignore the code panes and focus primarily on the GenAI pane, issuing instructions and letting the AI make direct edits to the code.
  • GenAI Assisted Coding: The developer actively observes the code panes, monitors the AI's actions, and ensures the generated code integrates correctly with the existing architecture and adheres to standards.

Demonstration: Implementing Dark Mode with Vibe Coding

The presenter provides a practical demonstration of vibe coding by adding a dark mode feature to a simple mobile app that converts running metrics (miles to kilometers, pace conversion).

1. Project Setup: The presenter shows the IDE with the existing HTML, JavaScript, and CSS files for the running calculator app.
2. Initial Prompt: The first interaction with the GenAI pane is to ask for an overview of the project: "Hey, I'm new to this project. Can you please explain it to me?" The AI analyzes the project files and provides a summary.
3. Feature Request: The next prompt is to implement the desired feature: "I would like to implement a dark mode for this application. Can you come up with a plan to do that?"
4. Plan Generation: The AI generates a plan, which typically involves:
   • Analyzing the current structure.
   • Designing a color palette for dark mode.
   • Adding theme switching logic (e.g., a button).
   • Converting and switching colors between themes.
   • Implementing smooth transitions.
5. Execution and Auto-Acceptance: The presenter chooses to "auto-accept edits," allowing the AI to proceed with implementing the plan directly.
6. AI Actions Observed: The AI then proceeds to:
   • Add a theme toggle button (moon/sun icon).
   • Edit the stylesheet (styles.css) to define dark mode colors and CSS variables.
   • Implement JavaScript logic to switch themes when the button is clicked.
   • Implement theme persistence using local storage, so the chosen theme is remembered across sessions.
   • Test the application.
7. Review and Verification: The presenter then tests the implemented dark mode by clicking the new button. The app successfully switches between light and dark modes, and the functionality appears to be correct. The presenter notes that this task, which might have taken hours manually, was completed by the AI in approximately five to six minutes.

Future of Coding and GenAI

The video concludes by discussing the rapid evolution of this field and its potential impact.

• Rapid Advancement: The term "vibe coding" was coined in February 2025, highlighting the speed at which these technologies are developing. GenAI's coding capabilities are expected to improve significantly.
• Evolving Developer-AI Relationship: The relationship between developers and GenAI will continue to evolve, with new ways to leverage AI for coding tasks.
• "English as a New Coding Language": A significant quote is presented: "There's a new coding language in town and its name is English." This suggests a future where natural language commands can be used to build software, representing a new layer of abstraction in programming. This aligns with the historical trend of programming languages becoming more human-readable and abstract.
• Positive Impact: The presenter believes these advancements will positively impact everyone involved in software development.

Conclusion

The video provides a clear and practical introduction to vibe coding and GenAI assisted coding. It demystifies the concept by showing a live demonstration of how GenAI can be used to implement features like dark mode within an IDE. While vibe coding offers a glimpse into a future where AI handles much of the coding, GenAI assisted coding emphasizes a more collaborative and controlled approach for professional development. The overarching theme is the transformative potential of GenAI in software development, moving towards more intuitive and natural ways of instructing computers to build software.