I vibe-coded this site with ChatGPT, Codex, and GitHub Copilot in one day
Yes, it is possible to vibe-code anything now. I began with my personal website. It needed more than a facelift; it needed a rethink of concept, design, and UX. Here's what I figured out along the way.
When I first approached vibe coding, I thought to myself:
This is nonsense! You can create a website simply by telling AI to create it for you? AI isn't that capable yet.
I was wrong. AI is amazingly capable at creating a website from scratch. In fact, it's frighteningly capable at it. If AI can create a website from scratch simply from a few prompts and follow-ups, what else is it capable of creating practically on its own? The website design industry is dead now! What other industries can AI cannibalize nowadays?
That's the question we have to answer as a society: Which industries are next? Which industries are we willing to give up to AI now in return for freedom to pursue our true dreams?
In my quest to try my hand at vibe coding, I learned a lot. Here are my suggestions to you.
Whether you are already a vibe coder, or are just beginning at the art, or have heard about vibe coding but still don't know what it is or how you can make the best use of it for yourself and your business, I'm here to teach you how to begin at vibe coding.
Before you continue, I invite you to take a look at my website and get a feel of the user experience (UX) it provides you as you browse and learn more about me and my talents. It's designed to offer you a view into my two sides: engineer and creative producer. Does it accomplish that goal? (Let me know!)
Is this site something you think you could create in under 8 hours?
When I began this work, I was extremely skeptical that AI could even generate something worthwhile as a fully functional portfolio website for a measly $20 a month. But AI proved me wrong.
Here's what I learned along the way.
Begin with a very strong prompt
The best way to generate content using an AI like ChatGPT (which is a generative AI, or gen-AI, program) is to feed it as much information as you can upfront. Let it know as much about your vision as possible, before it begins to generate anything. You'll give it the best opportunity to hit the mark on the first try.
AI is your employee.
In the sport of vibe coding, the point isn't to defeat AI, as you would a competitor. In fact, in truth, AI is the best employee you'll ever have. After you hire AI for a measly $20 a month, you'll never fire it. You'll want it to know everything, so it can do everything for you, as well as you want it to do it for you. It is so very powerful as:
- the ultimate weapon
- your secret sauce
- the main selling point
- the hook
- your partner
- your companion
- your sharpest tool in the box
- your ace-in-the-hole.
It will never betray your confidence, because it is sworn to secrecy never to divulge to your competition anything you tell it or anything it gives you in return.
So, give it everything upfront.
I began my website with a prompt like this:
I want to create a website to showcase my two sides of talent: my software engineering side, and my creative video producer side. I want to use colors that are strong, but I don't want to overuse colors. I want a minimalist approach to this design, because I want it to be easily scannable by computers as well as human eyes. I like an engineering blue color, and I need a secondary accent for the video producer side. There should be a portfolio section that showcases my projects I've worked on. Most importantly, there should be a resume section with a digital resume for me. I also have a blog I like to write, so include that in the site as well. I need you to produce images for my blog posts and wherever appropriate in the site, so there's something visual to look at. I need a way to post more blog entries easily on this site, and all of this needs to be done on the Qwik platform using Tailwind v4 as the visual design framework.
That was basically it. And from there, ChatGPT began to formulate my website. It began first by scanning the files of my website's previous iteration, getting to know the structure and the content that was in it. Then it worked on my design philosophy: layout, whitespace consideration, colors, typography, hierarchy, sectioning, individual primitive building blocks, component composition, and eventually the appropriate text for the different sections it had developed over the course of a half-hour or so.
That's all it takes to establish a pretty darn good website design. The rest of the time is spent to build the code for it, and to know how to guide the AI through the hours-long process.
That's the skill of a vibe coder: AI guidance. You pay a vibe coder for the skills he/she knows in AI guidance. Some call it AI engineering, but really it's a type of AI engineering. It's prompt engineering, and how well you know prompt engineering is how well you make your time valuable as a vibe coder.
Whenever in doubt, just give it permission.
Never forget this fact:
AI knows more than you do about almost everything.
But that isn't a bad thing. It's perhaps the best thing we humans have ever been able to experience. Now, we can vibe code an app, or a website, or any other idea, into existence simply by letting AI take control of the parts of the process that we can allow it to automate effectively.
Considering that fact, why would you naturally resist AI's opinion on anything? Two possible reasons:
- Your instinct says "AI is a bad thing," and your behavior follows from that belief.
- Your instinct says "I know this better than AI does, I'm sure of it," and you take control of the decision by not going with the default.
If you're in the first bucket, then you simply haven't yet realized how the raw power of AI is actually and accessibly at your fingertips and always to your advantage.
If you're in the second bucket, then you're making decisions based on your experience. But you aren't resisting for the wrong reason, necessarily. You're acting on your past. You're acting with evidence. That's entirely different than acting on fear, or anxiety, or any other negative.
Regularly audit, if your project is big
Make sure your copilot is ordering routine audits of your code as your progress in meeting milestones. Audits are your way of checking the AI's work:
- Did it make any mistakes?
- Are those big mistakes?
- Do you need to correct them, or can AI do it for you?
- Has AI already indicated its intention to do it for you?
- Where do you go from here, after the code is clean?
- Have you addressed any bugs you've noticed already?
All of those questions and more are answered at the audit phase of a milestone. Often your copilot will order it for you automatically as a natural progression of your project. But if it doesn't, then you need to know when and how to do it.
Just ask it for an audit, when you need one.
Have fun!
The best part of this AI Revolution is that we're free now. Free to work as we please. Free to work on whatever we choose to work on. Free to accelerate ourselves as quickly as we can, if we so choose to do. It's economic freedom, finally, for each and every person.
But if you recognize the AI Revolution as you would an apocalypse, you'll fear it -- irrationally -- and lose out on the golden opportunity to improve your life beyond the level you ever thought was possible.