Getting Started with Vibe Coding in Four Steps

Getting Started with Vibe Coding in Four Steps

By Tela Gallagher Mathias

Article content
My four step process to getting up and running with vibe coding.

We are gearing up for the innovation track at MBA servicing and one of the labs we are running is on vibe coding (you can sign up for the lab here, it's free to MBA registrants). There are plenty of things to worry about with generative AI (safety matters!), but today I thought I'd keep it light. Vibe coding has changed everything for me, and caused me to unthink and rethink the entire paradigm of discovery in product development.

Article content
Yuchen Jin is the PhD cofounder and CTO of Hyperbolic. He works on machine learning and distributed systems. He's a total baller and hilarious to boot. I'm a superfan.

Vibe coding is the process of using a software development agent to bring ideas to life through natural language expression and iteration. You express your ideas in plain English, and the machine creates a representation of your idea (software). You don't have to be an engineer, and you don't (directly) write any code. The term was originally coined by Andrej Karpathy in a now infamous X post. Andrej is one of the original founders of OpenAI and a well known AI researcher and educator. I'm a superfan.

Article content

Before we get into the process I used to get started - let's address the controversy. This is a hotly debated topic, with superfans and haters alike. The main controversy in the AI community comes down to:

  1. Security. The code "works" and you can ship it (publish it to the internet, for example) but if you are not careful, it will come with all the classic security vulnerabilities that professional software engineers know to avoid. Traditional software development processes typically control for this.
  2. Scalability. If you can't explain how it works, it's much harder to debug, maintain, and enhance, especially in a team environment. It's difficult to vibe code as a team although I have had some success with this in Replit. I do agree that it's not currently a scalable practice.
  3. Maintainability. Without guardrails and good development practices, you are likely to create a spaghetti mess of code that is overly complex, inconsistent, duplicative, and very hard to refactor. It can create a ton of technical debt.
  4. Homogenization. The thing we build out of the developer agents can have a very similar feel and tend to work similarly, especially as you are just getting started. There is concern that we are all just converging to a see of sloppy AI-generated apps, diminishing the value of software and losing the true craft of software engineering.

These are all definitely real risks, but the massive scale success of Anthropic's Claude Code shows that it can be done, although their practices probably fall more inline with AI-assisted software engineering.

Article content
Personally, I value the software engineering profession MORE thank I ever have now that I am so much closer to the craft. I don't see the craft being diminished, I see it being elevated.

As a personal aside, I am the CTO at PhoenixTeam and I suppose I'm a new kind of CTO as I do not have a classic software engineering background. (I usually make a joke about vector embeddings here about how I am more "developery" than some and less than others but you have to know a bit for this to be funny). Vibe coding has allowed me to get so much closer to the practice of software engineering. Without genAI and what I've done over the past two years with genAI I definitely could not call myself a CTO with any confidence.

Article content
Tela and other as two dimensional vector representation. Not to scale. I am pretty much no where near these guys from a product perspective but you get the idea.

But I digress and have said too much about vector embeddings, I hope you have hung on to this point. On to the four steps. I started my vibe coding journey relatively early in late 2024 (how is that early, amirite?). And once I started I was completely hooked. Things that have historically taken months and multiple roles, I could do in a weekend. All alone. That was it for me. I started with Replit and then moved onto Claude code, which is where I am now.

Article content
These are the four steps I tool to get started and how I advise others who are just getting started with vibe coding.

Step 1: Be Amazed

Find a tool. You have to just get in there and do stuff. There are a lot of choices, Lovable, Bolt, Replit, others. I personally like Replit but it's what I know so I have that bias. You can start for free.

  1. Prompting proficiency is a suggested pre-requisite for effective vibe coding but certainly not required.
  2. Start small. You can use the below zero shot prompt t get started on a free replit account.
  3. Think big – what’s something you always wanted build but never had the time/team?
  4. Literally no engineering is required to get started, systems thinking helps.

Article content

The above prompt should render your application in about 2.5 minutes.

Step 2: Struggle

The zero shot prompt above should work right out of the gate, but it may not. It could have bugs. This is part of the struggle. Don't give up here! Especially as you get more proficient and try harder things, it won't work right away.

  1. These tools are constantly improving. You will hit the ”jagged frontier”.
  2. When in doubt, start a new chat/conversation.
  3. Ask the agent to take stock of where it is, familiarize with the app, reset context.
  4. Take a breath. Start over. You got this!

Article content
Something like this should pop out. Then you can "vibe" and make changes, debug.

Step 3: Iterate

Then you just jam out. In the above example, I made the button pink, which you can see below. It took about 58 seconds on a relatively slow internet connection. How cool is that.

  1. As you begin, you will not know precisely what you want.
  2. Don’t be afraid to start over completely multiple times. The tooling is nascent.
  3. Take note what what you learn so you can use it for your “clear thinking” version.

Article content
Sadly, you won't get rich with this idea but hey, it took less than five minutes!

Step 4: Arrive at Clear(er) Thinking

As you work through the struggle, you will discover so much more about your idea. This is the fun and also depressing part. You will discover you need a login, you will figure out that you should have started with data requirements. You will start over. You will get angry. Keep going.

  1. Data requirements will become clear and central.
  2. The flaws and learnings of prior iterations become requirements.
  3. Once you know what you really want, your prompt and products will improve dramatically.
  4. Continually refine and keep track of your prompt.

Here's a more complex prompt you can try. In this example, I load my logos and the Fannie Mae Seller/Servicer guide as reference for retrieval augmented generation (RAG). I've built this app at least ten times, which is how I arrived at this prompt. This one probably won't work in one turn but you can debug it within about 20 minutes. It will take about 15 minutes to render so go get your coffee.

Article content

Voila!

And that's kind of it to get started. From here you may want a finer grain of control, in which case I cannot enthuse enough about Claude Code. I am in it every, single day. If you go Claude Code, you will need a way to deploy, in which case I recommend Railway. You will probably also need a database, you can use Supabase for that. Be prepared for many more struggles. I'll cover advanced vibe coding in another article. Happy vibing!




I love this!! It's amazing what you can do with vibe coding, what you can create, and what you can build. Thank you for sharing.

Like
Reply

To view or add a comment, sign in

More articles by PhoenixTeam

Others also viewed

Explore content categories