I built a personal web page with AI in 5 minutes. You can too!

I’ve been chatting with ChatGPT, Claude, and Gemini for years, but nothing prepared me for the first time I started vibe coding with them.

My first taste of vibe coding with AI came courtesy of Google’s Antigravity software, which lets Gemini and other AI models jump out of their chat boxes and actually do things on your machine. When I first saw Gemini churning out code directly on my system, I was floored–I hadn’t truly realized what AI was capable of until then. 

Now, you may hear the term “vibe coding” and think it’s something only programmers or tech enthusiasts can do, or maybe the idea of vibe-coding a program or an app is too overwhelming. I assure you that’s not the case, and I’m here to prove it right now.

Before we get started, a quick note: As you tinker, you may find that vibe-coding the initial web page is a snap, but getting it just the way you want can be a lot more frustrating. It’s one of the key lessons of AI, and the more you use vibe-coding tools like those I’m about to show you, the more you’ll see how we humans fit into the AI workflow loop.

Pick a vibe-coding tool

I’m going to show you how to vibe code a simple web page, and you can do it for free and in about five minutes. Nothing will be going live on the internet–this will just be a simple web page living on your Mac or PC’s storage drive, and you’ll be able to open it locally using any web browser.

For this exercise, you’ll need a vibe coding tool. There are many choices, so let’s focus on the big three: Claude Code, Google Antigravity, and OpenAI’s Codex. Claude Code is available as a tab in the main Claude desktop app, while Google Antigravity and Codex are standalone apps. They can all be downloaded for either Mac or PC, and they all offer easy, one-click installers. (You could also install Claude Code, Codex, and Gemini CLI in your Terminal app, but let’s keep it simple for now.)

Now, I’ve worked extensively with Claude Code, Antigravity, and Codex, and I actually like all of them for different reasons. But for this example, I’m going to focus on OpenAI’s Codex because a) you can use it with a free ChatGPT account (Claude Code requires a paid account), and b) in my opinion, it’s easier to use than Antigravity (although the latter isn’t all that difficult, and it was my gateway vibe-coding app).

Get your workspace ready

Anyway, let’s assume you’ve chosen Codex for now. Go ahead and install it, and sign in with your OpenAI account (again, you can create one for free).

Next, create a new directory on your computer’s hard drive. The directory should be completely empty (meaning no files or subdirectories); in my case, I created a “Projects” directory just inside my main user directory.

Now, fire up the Codex app. Once you’re signed in, you’ll be greeted with a “Let’s build” banner with a clickable workspace selector just beneath. Click the selector, click “Add new project” at the bottom of the pull-down menu, navigate to the empty directory you just created, then select it.

The prompt

You’re ready to start coding; all you need is a prompt. I went ahead and fashioned one with the help of ChatGPT (you can create your own prompt, of course):

I want to create a simple personal homepage, but I’d like you to guide me through it step by step.

First, ask me a short onboarding quiz (no more than five questions) to understand what I want on my site.

Keep the questions quick and easy to answer (multiple choice or short answers). Good topics to cover:

• My name
• The overall vibe (e.g., minimal, playful, professional)
• A short bio or tagline
• A few interests or hobbies
• Whether I prefer light or dark mode

Ask the questions one at a time and wait for my answers before continuing.

Once I’ve answered everything, generate a complete single-file website called index.html.

Requirements for the site:

• Everything should be in one file (HTML + CSS + optional JavaScript)
• Include my name, bio, and interests
• Make the design clean, modern, and visually appealing
• Match the vibe and preferences I gave you
• Add one small interactive element (like a button, hover effect, or toggle)

After creating the file:

• Save it as index.html in this folder
• Show me the full contents of the file
• Explain (in simple terms) how I can open it in my browser
• Suggest 2–3 easy things I could ask you to change or improve next

Keep everything beginner-friendly and avoid technical jargon.

Copy and paste that prompt into the Codex chat box, then click Submit.

Once you do, Codex (or Claude Code, or Antigravity) will ask you a series of questions about what you want on your web page, such as your name, your hobbies, and a short tagline. (Remember, none of this is actually going onto the internet.) For the “dark mode or light mode” question, feel free to answer “both.”

When you’re done with the quiz, Codex will begin coding–very quickly. When it’s done (mine took 56 seconds), it will tell you how to open the page in a web browser (just double-click the index.html file).

And… voilà! There’s your first vibe-coded web page. (If you used Codex, it will likely create it with a sleek “card” design with a drop shadow and rounded corners, which appears to be Codex’s favorite look for basic web pages).

Extra credit: Start tinkering

If you’re feeling inspired, here’s where the real magic (or the rabbit hole) begins. Ask Codex to change the design or the colors, or ask it to create new sections. I asked Codex for a “hero” image (it created an abstract landscape graphic) along with a local weather widget and a “good news” headline pulled from the web.

Go ahead and experiment, while keeping in mind that the original prompt calls for a simple page that can fit in a single index.html file. Want something more involved? Just ask.

And if the initial fun curdles into frustration because you can’t quite get what you’re asking for, well… welcome to the club.