Vibe Coding

For those of us not plugged into the programming side of internet slang, vibe coding refers to tool-assisted code generation. These tools are part of the rapidly developing field of machine learning and artificial intelligence (AI). You've probably heard of some already, like OpenAI's ChatGPT or X's (formerly known as Twitter) Grok.

When I first heard of AI's expansion towards code generation, I was scared. I worried that machines would be able to produce code that previously required a human to develop and maintain, removing jobs from the market. I began testing AI tools to write this article, the entire time hoping that my fears would be unfounded. After spending about a week using the tools, I don't know to be scared or ecstatic.

Claude

AI assistants can generate large portions of code with simple input. The input does not need to be programming instructions, either. Instead of for loops, if statements, and specific variables, human-like instructions do the trick. And most importantly, AI works fast.

My first time using an AI assistant was with Claude Sonnet 4. I gave Claude a short prompt - only three sentences - asking it to produce a Typescript component for my workplace's app. I wanted an interactive schedule that users could use to book reservations. In less than a minute, Claude gave me nearly 400 lines of code as an "artifact." I added the artifact, reloaded the app, and swiftly crashed the system.

Claude had failed to write the entire file in Typescript, instead mixing in HTML structures that were not compatible with my framework. If I hadn't realized that was the issue, lacking knowledge of programming languages, I would have been stuck and not known how to ask Claude to fix my problem - one point for humans. I rewrote my prompt - this time asking it to avoid HTML - and voila, a ready-to-go, functioning artifact - one point for machines.

This is just the first part of my story with Claude. Because even though the scheduling artifact was functional, it didn't fulfill my needs. I wanted to include this detail, however, to illustrate how AI's abilities are still bounded by its user. Despite being a programmer, I wasn't yet a prompter.

Learning how to Vibe

I have yet to mention one of my favorite features. Claude can accept reference images for artifact generation. Instead of trying to describe how I want something to look, I can show it. At the end of the article, I will include the original prompt and reference image I provided Claude, along with the result. The prompt reads a bit strangely since I was trying to be as specific as possible.

By this point in my vibe coding journey, I'd learned some new tricks. I needed to specify the data structures I wanted used in the component. This is where having programming knowledge is useful - understanding how what you ask for should work under the hood gives you an advantage when prompting. It's like knowing how a restaurant cuts their potatoes and being able to ask for special french fries because of it. I learned that I could request new additions based on previously generated artifacts. A waiter might be confused if you asked them for ketchup without knowing you'd already ordered fries. Claude could even tell me where in the code to make changes to finish integrating my back-end software.

Roughly 20 prompts later, I had a Firestore integrated, authentication-protected, self-regulating scheduling component. What took Claude minutes - not counting the time I spent learning how to ask for it - to produce would have taken me weeks. I was sold. Vibe coding is the way to go.

Machine > Human?

My fears were real; machines could produce code. They could produce it faster than a human could ever hope and at a much better cost: free. There isn't only downside, however. The human element of software development is not dead. Claude may have written the code, but I wrote the framework - the idea. If not for my ability to communicate my needs and understand Claude's output, I wouldn't have been able to achieve anything of quality. A software designer understands how to make a user interface; AI only understands how to make a front end.

While humans will continue being necessary in the world of programming, I do think changes are bound to happen. Individual developers will be able to use these tools to accomplish what previously took entire teams to achieve. No longer will a company need an IT department - they'll need an IT person.

This isn't necessarily bad, though. With AI doing the brunt of the labor, people can focus on bringing their ideas to life at previously infeasible speeds. Smaller companies or startups can attain software for their businesses more feasibly. Vibe coding can bring software development to the masses; everyone can try their hand at building a website or app.

Final Thoughts

Impressed would be an understatement. Humans have yet to achieve true artificial intelligence - probably for the best - but these AI assistants really feel as though they're learning. I can't recommend them as a complete replacement for coding, as I did have to make some changes myself, but I'd suggest trying out Claude or one of the many other AI assistants the next time you program.

They're also great for learning. You can tell the assistant to generate a component that you didn't know how to write yourself and then have the AI explain it to you. Stay away from complete reliance; view them as tools for hard work, not as replacements.

Prompts and Produced Artifacts

I need an Expo compatible, react-native component written completely in Typescript that creates a calendar-style booking component that allows users to make reservations. I want it to look similar to the image I uploaded, except I want the middle part with the times and time slots to be scroll-able for 24 hours in a day. When selecting a slot from the calendar, ask the user if they want to book it, as seen in the image. The top part of the component in the image should be a drop-down element that lets the user select the date they want to view. Let the user select days from the current date to two weeks ahead of the current date. Store the information about bookings in a Firebase Firestore compatible data structure - like an array.

Yes, we are going to add functionality. You do not need to re write the entire file for these next instructions. Give me a function I can insert into the component that will delete the current date's bookings from the database when midnight occurs.

An example of how my prompting changed once I was satisfied with the initial component and began adding additional functionality.