What is "Vibe Coding?" Vibe coding is directing an AI tool to build a website or application on your behalf
- Human: provides high-level direction and oversight
- AI: writes and tests code
Many professional software developers are using this technique to create software much faster than they could do it themselves. But the cool thing is that this technique works for NON-developers as well: people with no technical background can ask an AI to craft a small application for their personal needs. Suddenly, custom web and mobile applications are available to nearly everyone, not just programmers!
This is easiest to demonstrate with small apps, so let's start there. (FYI, I used claude.ai and/or Claude Code for all of these projects; it's regarded as the leader for the "vibe coding" world, at least for now. You can probably guess how fast things change in this world :-)
Webinar Countdown Timer
The problem: your colleague made a really cool countdown timer for his webinars, a sweet 10-minute countdown video that he streams 10 minutes before the start of each of his webinars. And you want something similar but even better!
The solution: ask Claude to make a customized countdown time you can use for any webinar, for any duration.
Disclaimer: Because I was teaching a series of AI classes to a group of California librarians, I asked Claude to make my countdown timer based around a California theme. Then I told it to bump the "California-ness" up to 11, just to max out the California Kitsch vibe. Obviously you can ask Claude to style your apps however you'd like!
Here's the prompt that I gave Claude:
Build an artifact to serve as a countdown timer for my webinar. Unstated theme is
"California is AWESOME!" like a cheesy over-blown tourism campaign about how awesome
California is. Title is "AI Awesomeness Begins In..."
Countdown timer with standard controls
Make a movie-preview-style trivia slideshow built-in with 50 California historical
trivia questions.
Lots of greebles and texture and California relevant iconographyStorytime Suggestion Spinner
That first example was a super-simple "one-shot" example; we asked the AI to build XYZ and it built it. Done. But the real "vibe" in vibe coding is working collaboratively with your AI partner, bouncing ideas back and forth and having the AI refine the tool, improving it in each iterative pass! Let's look at a more complex example:
The problem: you're in charge of improvising a new children's storytime story but you're in a creative drought and you can't think of any engaging kid-friendly characters and settings!
The solution: ask Claude to help you brainstorm creative lists of characters, themes, and settings. Then have Claude build a randomizer that randomly generates the outline of a story using these lists! Test the app, looking for problems or bugs, and then ask Claude to fix those problems. The result is a polished, working creativity enhancer that took about 5 minutes to build.
Because this was a back-and-forth conversation, I'm sharing the entire transcript instead of copying here: transcript of app planning session.
Try the final result yourself here!
In our next article we'll use the same concept to do non-coding activities such as policy analysis.