Vibe Coding + Expertise = Mega Win! 🏆

Vibe coding can help you go far, but the best winning combination is one where you combine vibe coding with deep expertise of what good code should look like.

Hi everybody - these days, I am a part of the vibe coding club. I sit down, describe my problem using natural language, and the AI takes care of it from there:

This workflow has been a huge time saver, especially for the types of things I vibe code, which are usually dynamic animations:

Animation code is a lot like any other code we may have to write. There is a lot of busy work, and the more unique/creative parts of the code, where we humans can add value, happen quite a while later. This is where AI assistants really shine. They remove a lot of the boringness and struggle that used to be a part of writing code:

Instead of us writing boilerplate code, fixing simple bugs, or doing other non-creative tasks that get in the way of building something cool, we delegate all of that to an AI assistant. We focus on the cool and fun parts instead.

But…

What I have also noticed is this. Across all of the AI assistants that I regularly try (Gemini, Claude, ChatGPT), they do a great job turning my (often) vague prompts into working code. That’s the good news. The bad news is about the quality of the generated code itself.

Getting back to my vibe coded animations world, when I inspect the generated code, I can usually spot many inconsistencies, bad practices, or missing edge cases. The following is one of several common issues that I see:

The thing to emphasize is that none of these problems are deal breakers. The animation actually works for the most part. It is just that it doesn’t meet my bar for what a high quality implementation should look like, and this is a bar that I have built by simply writing a lot of animation code over the past decade are two and learning from many MANY mistakes. For the coding scenarios that you are very familiar with, there is a good chance that the AI-generated code won’t meet your bar as well.

The interesting thing is that the AI assistants do know how to generate high-quality code. They just need you and I to either prompt them with more details up front or revise the output with a more detailed follow-up prompt:

This is a gotcha because this isn’t something that just works, at least not today. Being able to do this requires us to either proactively or reactively specify likely edge cases and pitfalls. It requires us to remind the AI assistant to follow certain best practices that only those with deep experience in this space would know. This means that you and I still need to have a certain level of familiarity with what the AI assistance is generating to be able to do that in the first place.

This leads to my general observation about how to vibe code effectively. The more you and I know about the underlying details of what code the AI is generating, the better we will be at vibe coding something that is high quality. This means that there is still a huge amount of value in being a domain expert in the areas that we are expecting AI to generate code for us. This also aligns with the various things we’ve seen where AI assistants still require us to play the role of code reviewer. We need to go line-by-line and ensure that our standards are being met, just like how we may treat a pull request or change from another human being:

Now, as the models keep improving in quality, there will be a future where we may no longer need to be domain experts around the generated code. The default output from AI assistants will automatically incorporate best practices, address edge cases, and make the sorts of smart choices that will bring a tear to your eye. That day is definitely not today. Until then, there is a lot of direct value in being very familiar with the code that is being generated.

Can you spot the bad practices / issues?

Before I wrap this up, there was a tangible example I was working on where a lot of these issues came to light. I was creating the following animation, where the speed and direction of the infinitely scrolling grid will vary based on the mouse position:

This animation was fully vibe coded, and it works. It also happens to have a lot of glaring issues in how it was built. Some issues are big. Some are quite small. Just for kicks, are you up for looking at the code and sharing your feedback on what can be improved?

If you are down for that, take a look at the live example and full source code. Reply to that thread with the main issues you find. To the first three of you who find the most correct issues, I’ll mail you a copy of one of my recent books.

If you are in the US 🇺🇸, the mailed copy will be autographed with a random doodle included! Otherwise, it will be a regular copy mailed from Amazon.

Till Next Time

With AI assistance, there will likely never be a time when we go back to writing a lot of code manually. Code writing is now a form of abstraction similar to how writing machine language and assembly code might be today for most of us. All new code will be written by an AI assistant. We will play the all-important role of reviewing the code and ensuring the output meets our standards.

If you have any thoughts or comments about this, feel free to contact me by posting on Twitter / X, the forums, or by replying to this thread…or have an AI assistant do that for you. It’s all good!

Cheers,
Kirupa 😀