Last week, I attended an AI Ready RVA event hosted at CarMax where Kyle Johnson presented the topic - vibe coding. While I was already familiar with the topic, I was interested to see what this “trend” could mean for my day-to-day work. After Kyle provided a great overview, we had time for some hands-on work. In the 20 minutes we had left, I picked a simple concept to get me started: take my LinkedIn profile and create a single-page web resume.
I started by dumping my current profile data into a text file, called profile.txt. Using Visual Studio code with the GitHub Copilot extension, I added the text file as my context and I entered a simple prompt using Claude Sonnet 3.7 as the LLM:
Using HTML, CSS, and JavaScript only, create a single file web page of my resume using the profile.txt file as your data source.
The initial results were accurate, but didn’t provide anything outstanding. However, here is where the exercise got interesting. I started to give more information in my subsequent prompts based on the vision I had in my mind. I asked for the information to be organized in a different way, ordering my certifications by descending date, making certain areas collapsible and expandable, how hyperlinks should behave, what color scheme I wanted, etc. After 10 minutes, the LLM spit out something that was pretty decent:
https://blog.mikediiorio.net/vibe/resume1.html
It was at that moment that it occurred to me the real power of what just happened. Granted, this is a pretty simple example, but in 10 minutes time, I bootstrapped a web page, iterated on 5 different versions, and landed on a result that was close to what I had in my head and I didn’t write a single line of code. I have over 20 years of custom application development in my past. I know HTML, CSS and JavaScript. I could write this page manually and produce it in a couple of hours, but I just flushed out prototype in a matter of minutes and I didn’t write a single line of code. With the event over, I stewed on what just happened on my drive home and cracked open the laptop a few minutes after walking in the door. I had another vision. I tried this prompt instead:
Using HTML, CSS, and JavaScript only, create a single file web page of my resume using the profile.txt file as your data source.
The body of the page should be a group of circles with the corresponding section titles only (examples: Summary, Contact, Certifications, Skills, Experience), arranged in a circle pattern. When the user hovers over the circle for each section, there should be a hover window that pops up with the content for that section. My demographic information should appear in a circle in the middle.
Within the Experience section the company name, title, date and location are visible, but the description is collapsed when the page loads. Each description should be able to be toggled to expand or collapse independently. Use the words “More” and “Less” on the toggle link. The company name should appear above the title.
Certifications should be listed in descending issue date order. The date should be on a separate line from the certification name.
Hyperlinks for my blog, email address and Linked In profile should open in a new browser tab.
With that prompt, the LLM generated the following page:
https://blog.mikediiorio.net/vibe/resume2.html
Reviewing on the desktop, I was pretty impressed with that result. The design was getting a little more complex and the LLM was able to turn my instructions into the vision I had in my head. The LLM went so far as to add icons on each of the sections even though I didn’t specifically ask for them. That’s pretty slick. If you look at the page on a mobile device in portrait mode, it doesn’t hold up, but I hadn’t considered that in my prompts. On one hand, I was able to bring my vision to life in a few minutes, but I also found out that the vision may not be mobile friendly. Considering I was able to find that limitation out in about 30 minutes, I feel like this is exactly where vibe coding could be an invaluable tool to validate ideas.
One of the key takeaways from the exercise is the level of detail in the prompt engineering is important. What this really means for people working as application developers is this: AI will not steal your job. LLMs can generate code based on well-established patterns and code samples it has been trained on (30 years of web development techniques), but the real quality of the output only improved when I started prompting it based on the subject matter: the context of my profile. I know my work history and accomplishments, so, I was able to highlight that context in such a way to produce a much higher quality result. That subject matter expertise is what will differentiate a developer who knows a few languages and writes code vs a developer who deeply understands a particular problem domain where the LLM may not be as aware. If you view LLMs as a junior developer who you can delegate programming tasks along with the appropriate context and subject matter expertise, they can be viewed as they should - a copilot. You are the captain!