The Positive Implications of Vibe Coding
Speed: AI-assisted coding makes developing applications faster. It can help developers’ complete tasks, build applications without worrying about technical do’s and don'ts, and automate repetitive tasks by suggesting real-time solutions, allowing developers to focus on other important tasks.
Reduction of Development Cost: It can reduce cost because it can be used for creating prototypes or a Minimum Viable Product (MVP) and test ideas quickly, saving time, which equals money during early stages before it can scale using the right efforts.
This can also help developers get feedback faster and discover what works and what doesn't, making it easier to avoid pursuing the wrong approach early in the process.
Focus on Creativity: AI coding tools can reduce the stress of solving complex problems, allowing developers to think more creatively, knowing that the tool handles the complexity of building or developing.
This approach allows people or developers to think of different innovations to build and experiment with.
Beneficial to Technical or Senior Coders: For technical coders, using AI can be useful in creating fast prototyping while focusing on code performance and optimization.
It also allows coders to find solutions or explore different solution patterns, which can unlock more strategic and creative thinking regarding code structure and performance.
The Negative Implications of Vibe Coding
Vibe coding comes with its own risk; for instance, a user on X created a SaaS using cursor AI assistance, he even had paying customers, after sharing this information on the internet about how he was able to build his product by vibe coding, he experienced an attack, people bypassed subscription, maxed out usage on API keys, etc.
With this situation, we see that it is not just about using AI to generate code; there are technicalities involved, like securing databases, authentication and access, input and data security, secrets and key management, Multifactor-Authentication, etc.
Since the incident, he has learnt some lessons and has created several projects by vibe coding, and also started a community of vibe coders.
Some examples of implications of Vibe Coding include;
Security Vulnerabilities: Unvetted AI-generated code could lead to security vulnerabilities like SQL injections, insecure authentication mechanisms, or exposure of sensitive data, which can cause several implications, including extortion or theft.
Technical Complexities: Vibe coding can only handle basic frameworks, but for more complex real-world applications, its usage can be limited, for example, building complex banking systems that have to deal with sensitive transactions.
Code Quality: Code quality can raise concerns if there's a lack of structure, making it hard to debug, maintain, and scale, especially if you do not understand the code generated or how it works.
Over-reliance: Without understanding how it works, it can impact how well you can problem solve, which is one of the core benefits of learning to code. It encourages bad practices like creating:
Additionally, completely trusting AI-generated code without proper testing, code review, or refactoring can lead to unstable codebases that become hard to maintain.
Here’s a list of tools that can be used if you want to give in to the vibes and start creating;
Cursor
Cursor is a lightweight and fast AI code editor used to write, edit, and understand code. Developers can get up-to-date information from the web instead of leaving the editor when they want to search Google for something.
Benefits of Cursor AI include;
Quickly completes tasks
Automatically write and run terminal commands
Identify lint errors and fix errors automatically, reducing the need to debug manually.
Predict your next edit and also suggests edits to your code.
A chat section that allows you to talk with an AI that views your codebase, you can ask the AI agent to add blocks of code to your codebase.
These are some of the features you get when using the cursor; there are still more you can check out on the official website.
Bolt
Bolt is an app builder developed by Stackblitz. It is powered by AI, which makes it possible to prompt, run, edit, and deploy full-stack web and mobile applications directly from your browser.
It was designed for technical and non-technical users, and it has AI support available to help users create applications from concept to a live product. Some features include;
Import Figma design elements into the project.
Netlify for deployment and hosting
GitHub for version control
Stripe for payment handling
Supabase for databases, authentication, and file storage
Expo for mobile app development.
The official website provides more information about other features and how to get started.
Tempo Labs
Tempo is an AI-powered platform designed to create web and mobile applications. It combines an IDE, design tool, and AI assistant to generate full-stack applications using text or image prompts. Some of its features include:
Generating code for React applications using text or image prompts.
Figma Plugin to convert Figma designs into React Code.
Ability to build and maintain design systems by importing components from Storybook. You can edit and preview components visually, etc.
Let's Vibe Code!
Let’s use the Tempo tool to create an application, all we need to do is tell it what we want to generate, and it’ll do it. On the website, there’s the option to test it out and generate your first app.
Let’s create a simple e-commerce perfume store application and test it out to see what it can generate.
If you haven’t signed up yet, it’ll provide options for you to do so before you can generate your app.
After completing the signup process, you can see in the image below that it created an e-commerce website.
You can also find the source code for the design within the platform.
In this free version, you can deploy what has been created on Vercel. Vercel is a platform that provides developers with tools and cloud infrastructure to build, secure, scale, and deploy web applications to production.
After deploying using Vercel, you’ll get an actual website. The link is only available for 48 hours; however, if you’re familiar with React, you can copy the source code it generated and tweak it.
If you want to follow this trend or approach of coding and building applications, here’s some advice to follow;
Use a Popular Tech Stack: To use any of these tools, it is advised to choose a popular tech stack and use popular tools like Express, React, or VueJS, because LLMs are effective at solving problems by utilizing patterns from already solved solutions.
Learn Version Control: Learn how to use Git/GitHub and similar tools. This allows you to save your code, so if you lose it, you can recover it easily.
Think like a product manager: Break down complex requirements into smaller problems so you can take charge of the creative aspect to get better results.
