You know what vibe coding is. You’ve looked at the tools. Now let’s actually build something.

This tutorial walks you through creating a real, working project using nothing but natural language prompts. No coding experience required. By the end, you’ll have something running in a browser that you can show someone and say, “I made that.”

What We’re Building

A personal bookmark dashboard. Dark-themed, clean, and something you might actually keep using. You’ll be able to save links, organize them into categories, and pull them up whenever you need them. Simple enough to finish in one sitting, useful enough to open again tomorrow.

What we’re going for:

  • A clean, dark-themed layout
  • Sections for different link categories (Work, Learning, Tools, etc.)
  • The ability to add new bookmarks
  • Data saved in the browser so your links stick around
  • A live clock, because it’s easy and it makes the page feel alive

What You’ll Need

Pick one of these. Any of them will work:

  • ChatGPT — Free, browser-based, good starting point
  • Claude Code — If you’re comfortable in the terminal
  • Cursor — If you want to work inside a code editor
  • Replit AI — If you want to build and deploy without leaving the browser

That’s the entire setup. No frameworks, no build tools. Just you and an AI.

The Build

Step 1

Start With the Foundation

Open your AI tool and describe the project. Be specific here — the more detail you give upfront, the closer the first result will be to what you’re picturing.

Your prompt

Build me a personal bookmark dashboard using HTML, CSS, and JavaScript in a single file. Dark theme with a near-black background (#0a0a0f), light gray text, and a green accent color (#c4f04d). Include a header with the title “My Bookmarks” and a live clock showing the current time. Use a clean, modern font.

The AI will give you a complete HTML file. Save it as index.html, open it in your browser, and you should see a dark page with a title and a ticking clock. One prompt, and you’ve already got something on screen.

Step 2

Add Bookmark Categories

Now let’s give it some structure.

Your prompt

Add bookmark sections for these categories: Work, Learning, Tools, and Personal. Each section should have a heading and display bookmarks as a grid of cards. Each card shows the site name and URL. Pre-fill a few example bookmarks in each category so I can see the layout.

Refresh your browser. You should see organized sections with placeholder bookmarks laid out in a grid. It’s starting to look like something you’d actually use.

Step 3

Make It Interactive

Time to make it do something real.

Your prompt

Add an “Add Bookmark” button that opens a simple form. The form should have fields for: site name, URL, and category (dropdown with my existing categories). When submitted, the new bookmark appears in the correct category. Save all bookmarks to localStorage so they persist when I close the browser.

Try it out. Add a bookmark, close the tab, reopen it. If the bookmark is still there, you just built a functional web app with three prompts. If something’s off — the form doesn’t close, the bookmark lands in the wrong category — just tell the AI what happened and ask it to fix it. That back-and-forth is a normal part of the process, not a sign that something went wrong.

Step 4

Polish the Design

It works. Now let’s make it look intentional.

Your prompt

Improve the visual design: add subtle hover effects on the bookmark cards (slight lift and border glow), make the form appear as a modal overlay with a backdrop blur, add smooth transitions on all interactive elements, and make sure the layout is responsive on mobile. Add a delete button (small X) on each bookmark card.

This is the part that tends to hook people. You’re making design decisions in plain English and watching them show up in real time. No digging through CSS documentation, no fiddling with pixel values by hand.

Step 5

Ship It

Your app works and looks good. Put it on the internet.

If you’re using Replit, hit deploy and you’re done. For everyone else, a few fast (and free) options:

  • Vercel — Drop your file in a GitHub repo, connect to Vercel, deployed in seconds
  • Netlify — Drag and drop your file onto netlify.com, instant deployment
  • GitHub Pages — Push to a repo, enable Pages in settings, live site

Your bookmark dashboard is on the internet now. You built and deployed a real project using AI prompts.

What You Just Learned

Without writing a single line of code yourself, you:

  • Built a functional web application
  • Used HTML, CSS, and JavaScript together
  • Implemented localStorage for data persistence
  • Created responsive design with hover effects and transitions
  • Deployed to the internet

The bigger takeaway, though, is that you practiced communicating clearly with AI. Look back at those prompts. Each one was specific about what to build, how it should look, and how it should behave. That specificity is what separates getting usable output on the first try from going back and forth five times trying to explain what you meant.

Pro tip

Save your prompts. As you build more projects, you’ll develop a personal library of prompts that work well. Reuse them, tweak them, share them. That’s what Vibe Code Source is all about.

What’s Next

You’ve got one project done. A few ideas for the next one:

  • A personal portfolio page — showcase your work (including this bookmark dashboard)
  • A daily planner — tasks, time blocks, progress tracking
  • A habit tracker — log daily habits with streaks and stats
  • A note-taking app — markdown support, categories, search

Same process every time: describe what you want, let AI build the first draft, iterate until it’s right, ship it. Your prompts get sharper with each project, and the whole thing starts to feel more natural.