How to Vibe Code

In this new AI landscape and evolving Gen-AI apps, a new approach to writing software development has emerged: vibe coding.

This new method is changing how we build applications by leveraging artificial intelligence to handle the coding process. First publicly mentioned by Andrej Karpathy, co-founder of OpenAI, vibe coding has quickly gained popularity as a way for anyone, regardless of traditional programming knowledge. Now it is quite a common way for many to create functional software.

So, what is Vibe Coding?

Vibe coding is an approach to software development that uses AI tools to write code based on your instructions. Rather than manually typing out every line of code yourself, you focus on communicating your vision and desired outcomes to an AI assistant, which then generates the necessary code. This method involves:

• Giving into the "vibes" and embracing AI capabilities

• Focusing on what you want to build rather than how to build it

• Letting AI handle the technical implementation details

• Breaking down complex ideas into manageable chunks that AI can understand

The result? A dramatically lowered barrier to entry for software development, enabling people with great ideas but limited technical skills to bring their visions to life.

With Vibe Coding, even non-developers can now share instructions and build software.

Essential tools for successful Vibe Coding

To begin your vibe coding journey, you'll need the right AI-powered tools. Here are some of the best options available:

• Cursor: A popular dedicated AI code editor with features specifically designed for vibe coding, including "vibe PMing" for project planning, global and project-specific rules, and "YOLO mode" that automatically runs terminal commands. Cursor also offers checkpoint reverting and direct GitHub integration.

• Windsurf: A fork of VS Code that supports various AI models including Claude 3.7, Claude 3.5, and OpenAI models. Windsurf offers chat, write, and legacy modes, tab completion, browser preview, and the ability to paste URLs for documentation.

• VS Code with AI Extensions: Standard VS Code can be enhanced with AI extensions like Klein, and Copilot to enable vibe coding capabilities.

• Replit: A browser-based code editor with integrated AI assistance that allows for easy app deployment.

• Bolt.new/Lovable: Browser-based tools that will generate applications based on the prompts you shared.

• Claude, ChatGPT, and Google Gemini: These AI platforms offer canvas features where you can write and run HTML and JavaScript directly in your browser.

Though this looks super simple, you think you just need to write in plain English and get the software ready, it also needs some patience and a few tricks to make it work perfectly. Even I struggled a lot and kept doubting the entire technique until I learned a few tricks and tips, which I’m sharing next.

The Vibe Coding Workflow: A Step-by-Step Guide

1. Planning Your Project with "Vibe PMing":
Start by having a clear conversation with your AI assistant about what you want to build:

1. Ask the AI to create a README file that includes:

   • Project requirements

   • Recommended tech stack

   • Up to 5 milestones for development

2. Provide feedback to refine these specifications until they match your vision.

3. Keep your tech stack simple. For personal projects, client-side technologies with local storage are often sufficient.

2. Setting Up Your Development Environment
Before diving into coding:

Ask the AI about its knowledge cutoff date to understand which library versions it knows best.

1. Use versions the AI is familiar with to minimize compatibility issues.

2. Set up global and project-specific rules in your AI code editor to guide the AI's behavior. Examples include:

   • Explain your plan before coding

   • Prioritize simple solutions

   • Use modules and avoid duplicate code

   • Only make requested changes

3. Create a .cursorrules file (for Cursor) or equivalent to provide project-specific instructions to the AI.

3. Effective Communication with Your AI Assistant
The key to successful vibe coding lies in how you communicate with the AI:

1. Request a plan first: Use prompts like "Tell me your plan first; don't code" to review the approach before implementation.

2. Ask for multiple options: Request "a few options, starting with the simplest first" to evaluate different approaches.

3. Encourage thorough thinking: Tell the AI to "Think as long as you need and ask me questions if you need more info."

4. Be specific about changes: Request modifications to specific files rather than broad, sweeping changes.

5. Include visual context: Share screenshots when discussing design or bugs to help the AI understand the visual elements.

4. Implementing Features Through Vibe Coding
When it's time to build your application:

1. Break tasks into small, testable steps rather than attempting to build everything at once.

2. Start fresh chats for new features to avoid context bloat.

3. Treat the AI like a junior developer by giving clear, specific instructions.

4. Maintain control over core aspects of your application, including the overall idea, UI design, and feature set.

5. Test after every change to catch and fix issues early.

5. Debugging in the Vibe Coding Paradigm
When things go wrong (and they will):

1. Simply copy and paste error messages into the AI chat and ask it to fix them.

2. Use the "Revert to checkpoint" button in tools like Cursor and Windsurf when necessary.

3. Leverage GitHub for version control as an additional safety net.

4. Start new chats if the AI seems stuck or the context becomes too large.

5. Periodically ask the AI to look for code duplication or redundancies to keep your codebase clean.

Advanced Vibe Coding Techniques

Once you're comfortable with the basics, try these advanced approaches:

Understanding the Code:
While you don't need to write code manually, understanding how it works is valuable:

1. Ask the AI to "explain how this file works in simple terms" or "add comments that explain the code."

2. For entire codebases, use tools like Repomix to create a single file overview, then ask an AI for a technical architecture explanation.

Enhancing Your UI:

1. Leverage free UI templates online (Bootstrap themes, etc.) for professional-looking interfaces.

2. Instruct the AI to use components from these templates in your application.

Voice-Driven Development
Use voice dictation software like Superwhisper to verbally instruct the AI for a more immersive vibe coding experience.

Best Practices for Effective Vibe Coding

Keep it simple:

1. Prioritize simplicity in your solutions and avoid unnecessary complexity.

2. Keep files relatively short (200-300 lines) to help the AI understand and modify the code effectively.

Maintain quality:

1. Implement strict version control using Git and GitHub with frequent commits.

2. Test ruthlessly after every change, including manual verification and potentially AI-written tests.

3. Ask for security audits periodically and incorporate basic security best practices.

Manage AI limitations:

1. Use popular technology stacks that the AI is more likely to understand well.

2. Be aware of context window limitations and start new chats when necessary.

3. Paste relevant documentation into the AI's context when using specific APIs or frameworks.

Common mistakes to avoid

1. Trusting the AI too much without providing clear direction.

2. Attempting overly complex projects before mastering the basics.

3. Neglecting testing and version control, leading to difficult-to-fix issues.

4. Exposing sensitive information like API keys in your code.

5. Overloading the AI's context window with too much information at once.

What next after vibe coding?

With AI becoming more sophisticated, vibe coding will help you build more personal software. But it is always a question, I built software, and created a tool what should I do next?

Share it with the world by launching it on Product Launchpad. If you can even get users to such apps, there is no better feeling than that

Conclusion

The gap between idea and implementation will continue to shrink with vibe coding, enabling an entirely new generation of creators to build software without traditional programming knowledge.

Vibe coding is a new way to build apps. It will empower you to write and ship code faster and to focus on creativity and problem-solving rather than syntax and programming languages. If you have clear and creative side project ideas, you can let AI handle the technical implementation details.

Whether you're a seasoned developer looking to increase productivity or someone with great ideas but limited coding experience, vibe coding is an exciting new approach to building software.

If you vibe-coded any software, share it on Peerlist and tag me, I would love to check it out!