How to "vibe code"
🧠 Knowledge Series #62: Build prototypes, test ideas, create shared components and more. Is this the future of product development?
🔒The Knowledge Series is available for paid subscribers. Get full ongoing access to 60+ explainers and tutorials to grow your technical knowledge at work. New guides added every month.
The days of hand writing code line by line are coming to an end.
Over the past few months, AI coding startups have raised tens of millions in funding with billion dollar valuations and the emerging consensus now seems to be that the future belongs to those who can combine technical skills with product and design sense.
The product teams of the future may not look like they do now with clear separations of disciplines (PM, engineers, designers). And a major driver of this shift is what some people are calling “vibe coding”. It sounds a little juvenile and buzzwordy and I personally find the phrase reasonably cringeworthy, but for the purposes of this Knowledge Series, we’re going to embrace it fully and lean into some real world examples of how you might be able to “vibe code” at work.
We’ll explore real world use cases for product teams including building new prototypes, landing pages, dynamic components and more. Plus, we’ll take a look at a hypothetical end to end example to explain how each member of a product team (PMs, engineers, designers) might use vibe coding when bringing a new feature to life.
Vibe coding may be a passing fad, but the underlying principle — the ability to build and design products by describing them — looks set to shape the future of product development, whether we like it or not.
Coming up:
What’s vibe coding?
How use vibe coding to:
Build a prototype for user testing
Build a new landing page
Create a new component for a SaaS product
Build a simple game
An end to end example - how engineers, designers and PMs might vibe code at work to build a feature together
What the future or product teams might look like - 3 possible scenarios
Tools you can use for vibe coding
What is vibe coding?
The phrase “vibe coding” is literally just a few weeks old. It was coined by the co-founder of OpenAI. He describes it as a new type of coding “where you fully give in to the vibes, embrace exponentials, and forget that the code even exists.” Instead of fixating on the line by line creation of hand written code, vibe coding involves relying heavily on AI tools to handle the technical details. The process of building something as a vibe coder often involves multiple conversational steps between the user and AI where the two go back and forth until the user’s desired outcome has been built.
Since the term first gained traction, a bunch of commentators and influencers have embraced it as part of a wider trend where non-technical people are building prototypes at record speed without traditional engineering input. Figma’s AI product manager shared a story recently about how a non-technical founder was able to craft a fully functional MVP in 4 hours of “vibe coding” and this investor predicts that engineers who are not using the AI vibe coding tools won’t be as effective as those who are:
How technical do you have to be to “vibe code” effectively?
Vibe coding involves using tools to bring your ideas to life quickly - whether you can code or not. But different AI tools have different levels of control and required technical skills.
I’d argue that tools like Cursor are better suited to more technical users and engineers whereas tools like Lovable only require little to no technical knowledge at all.
Here’s a snapshot of how some of the world’s leading “vibe coding” tools compare across various criteria - including whether they’re suitable for PMs, designers or engineers:
Using one of these tools can be a double edged sword; sure, it makes building an initial prototype a lot easier, but if you’ve got zero technical skills at all, they can be extremely frustrating. More on that later as we look at some examples together.
The most effective way to get the most out of these tools is to have a basic understanding of some of the technologies that are used in transforming prompts into products. For tools like Replit and Lovable, these typically use front end javascript and CSS frameworks like React and Tailwind. And while knowledge of these isn’t essential, it helps for the times where you need to quickly tweak something, fix something or edit a component to look a certain way.
A technical understanding is not a necessity at all — as you’ll see, these tools still work extremely well whether you have a technical foundation or not. But if you’re keen to get a solid base understanding before delving into AI tools, here’s a summary of some recommended relevant Knowledge Series articles to help you get started:
Front end technologies explained - https://departmentofproduct.substack.com/p/knowledge-series-3-front-end-technologies
What does javascript actually do? https://departmentofproduct.substack.com/p/knowledge-series-38-what-does-javascript
CSS frameworks explained - https://departmentofproduct.substack.com/p/knowledge-series-14-css-frameworks
How to vibe code at work - practical examples
Now that we’ve covered some of the essentials about the origins of vibe coding and how to get a solid technical understanding, let’s dig into some practical examples of how you can use vibe coding. We’ll cover building a functional prototype for user testing, an advanced component for a SaaS product and a new landing page from scratch.