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.

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.

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.

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 allawed 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 definately could not call myself a CTO with any confidence.

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.

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.

Build a simple mortgage calculator. Inputs: home price, down payment, interest rate (%), loan term (years). On clicking Calculate, show loan amount, monthly payment, and total interest — all formatted as USD. Test it to make sure it works and that we can save results to a history. Pre-populate it with realistic values.

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

Step 2: Struggle

The zero shot promot 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!

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.

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.

I want to create a super simple mortgage lead tracking website for a mortgage loan originator, this is for a demo I am doing for PhoenixTeam mortgage so use the logo and style it in their brand guidelines. Make sure the logo has good contrast, perhaps a white background for the app. Use a modern, clean font. Give the application a modern feel. Don’t use a lot of colors, keep it simple. Let’s include some test leads but make sure we can delete the leads and put in real ones. The second feature I want is a chatbot that will allow the user to search the Fannie Mae Seller guide (which I have attached here) using OpenAI integration with version 4o and retrieval augmented generation. The chat bot should NEVER depart from the context and ONLY refer to the guide through RAG, but it should not be overly restrictive and should answer questions about Fannie Mae when asked. Make sure you set up a user ID so the chatbot feature can work. The chatbot window should wrap so the full text of what the user is typing can be seen. Make sure the bot window is prominent and allows me to see all the text, scrolling when necessary. Make sure it has some starter questions I can select. Create detailed answers, not simply summaries. Use a generous response length. The final feature I want is user authentication with their replit account. Set me up as the initial user with the initial test leads so authentication will work.

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 deply, in which case I recommend Railway. You will probably also need a databse, you can use Supabase for that. Be prepared for many more struggles. I'll cover advanced vibe coding in another article. Happy vibing!

By Tela G. Mathias, Chief Nerd and Mad Scientist, PhoenixTeam

‍