Vibe Coding is essential for resolving common issues encountered when generating code with conversational AI. Understanding this concept is crucial to prevent situations where code generated by AI fails to work, has security vulnerabilities, or is difficult to modify when instructed to build an app.
Definition of Vibe Coding
Vibe coding is a method of having AI generate code by describing an application or feature to it. Users state what they want, and the AI implements it in code. The instructions given to the AI are called ‘prompts.’ An example of a prompt would be a sentence like, “Create a simple blog website for me.”
Limitations of AI Code Generation
Many users attempt to delegate code generation to AI with only high-level instructions. However, when AI autonomously generates code based solely on such instructions, it often results in errors. The generated code may lack proper file structure, have security vulnerabilities, or become ‘spaghetti code’ (disorganized and difficult to maintain) that hinders future feature additions and modifications. While such code might function in a local environment (developer’s computer), it can cause significant problems in a production service environment. A codebase refers to all the code bundled together for a project.
Efficient App Development Strategy Using AI
To create effective apps with vibe coding, an approach where AI is treated like a junior developer is necessary. The developer must design the overall application structure and provide detailed instructions for the code required for each feature.
Before delegating code generation to AI, you must first define the project’s architecture and technology stack. For instance, you should decide on a framework like Next.js (one of the tools for building user interfaces) or a database like Sanity, and then convey this information to the AI. By assigning the AI the role of a ‘junior developer,’ the human developer acts as a ‘senior architect,’ managing the AI with prompts that include clear constraints and roles.
Resolving Errors in AI-Generated Code
AI-generated code is not perfect. Even with well-crafted prompts, ‘hallucinations’ can lead to incorrect code. In such cases, you can instruct the AI specifically to resolve the errors it created. For example, if a route group conflict (a method of organizing code) or an image loading failure occurs, you can present the error message to the AI and ask for correction methods or instruct it to update necessary configuration files (e.g., next.config.ts).
While AI excels at writing code, developers must personally verify and manage whether the code functions according to their objectives and the actual environment.
Capabilities and Limitations of Vibe Coding
What You Can Build with Vibe Coding:
- Generating the initial structured project boilerplate based on clear instructions and architecture definitions.
- Efficient implementation of specific features or components (reusable code snippets).
- Debugging and correcting code errors with AI’s assistance.
- Requesting code snippets (small pieces of code) for security vulnerability reviews or performance improvements.
What Not to Expect from Vibe Coding:
- Automatic generation of perfect, robust, and easily maintainable code without developer intervention.
- Writing robust test code that covers all edge cases (exceptional situations).
- Automatic improvement of subjective aspects like code quality or readability (refactoring).
- Understanding the complexity of the entire codebase and autonomously proposing solutions.
AI is a powerful tool, but clear instructions and management from the developer are essential to fully harness its potential.
Common Issues When Vibe Coding
- Blaming AI when only providing high-level instructions and not getting the desired outcome.
- Using generated code without understanding it, leading to a situation where even minor modifications are impossible, ultimately requiring the entire project to be discarded.
- Uncritically adopting AI-suggested tech stacks, leading to starting a project with technologies unsuitable for its purpose.
- Acknowledging AI’s limitations when discovering errors or inefficiencies it created, instead of attempting to fix them directly.
Self-Assessment
After asking AI to ‘Create a simple blog website for me,’ if you can explain why the AI-suggested tech stack (e.g., React (one of the technologies used to build user interfaces), Python (a language used for creating computer programs), Django (a tool that helps build websites efficiently using the Python language), etc.) is suitable or unsuitable for that blog, then you have understood the content of this article. Furthermore, check if, when problems arise with AI-generated code, you consider ‘What instructions should I make clearer?’ instead of blaming the AI.
➡️ What’s Next
- Distinguish between absolute and relative paths and accurately specify file locations.
- Explain that code executes from top to bottom and what execution means.