Building Your First Screen with Vibe Coding — A Practical Guide to Turning Ideas into Code
How to turn an idea into a prompt, and how the back-and-forth with AI takes shape into finished code — explained through a hands-on example.
Now that you’ve written your CLAUDE.md, you’re ready to start actually building. In this post, we’ll walk through the entire process of using Claude Code to build the first screen of a simple web service, from start to finish.
As our example, we’ll build a bookmark app (a service for collecting links) — “a simple service for saving links to read later.” It’s not complicated, but it has a structure similar to a real service, which makes it a great way to get a feel for vibe coding.
How to Turn an Idea into a Prompt
The first skill you need to learn in vibe coding is turning your idea into words the AI can understand. If you vaguely say “build me a cool app,” the AI will give you an equally vague result.
The difference between a good prompt and a bad one comes down to specificity.
| Type | Example Prompt | Problem |
|---|---|---|
| Bad prompt | “Build me a bookmark app” | No idea what technology to use or what it should look like |
| Average prompt | “Build me an app for saving bookmarks with React” | Specifies the technology, but features, design, and scope are unclear |
| Good prompt | See below | Covers technology, features, visual goals, and constraints |
Here’s how you’d write a good first prompt:
Build me a simple web app that saves bookmarks and shows them as a list.
Tech stack:
- React (built with Vite)
- No separate backend — store data in the browser's localStorage
- No CSS library — use inline styles
Features:
- Enter a URL and title to add it to the list
- Show saved bookmarks as cards
- Each card has a delete button
Visual goals:
- White background, simple design
- Centered on screen, max width 600px
Just build this much for now. I'll add other features later.Principles for writing prompts
- State the tech stack explicitly: Specify exactly which language and framework to use. If you don’t, the AI will pick something on its own.
- Limit the scope of features: Don’t ask for too much at once. Start small and add things step by step.
- Add a closing sentence: A line like “Just build this much for now” explicitly limits the scope. AI tends to add extra features with good intentions, so this helps prevent that.
The Back-and-Forth Flow of Finishing Code with AI
When you enter the prompt above into Claude Code, the AI creates the project structure and writes the files. From here, the process of refining the result through conversation begins.
Step 1: Create the Project
Move to your working folder in the terminal, then run Claude Code.
# Create a working folder
mkdir bookmark-app
cd bookmark-app
# Run Claude Code
claudeOnce Claude Code starts, you’ll see a > prompt. Enter the prompt you prepared above.
As the AI starts working, you’ll see messages like these:
Creating project structure...
Writing src/App.jsx...
Writing src/components/BookmarkList.jsx...
Writing src/components/AddForm.jsx...
...You can watch in real time as files are created and code is written.
Step 2: Try Running It
Once the files are created, Claude Code will tell you how to run the project. For a Vite-based project, it’s usually like this:
npm install
npm run devType the address shown in the terminal (something like http://localhost:5173) into your browser, and you’ll see the screen you just built.
Step 3: Request Changes
Looking at the result, there will probably be parts you don’t like. When that happens, ask Claude Code for specific changes.
Example design change request
Add a light gray background (#f5f5f5) to the cards,
and increase the spacing between cards.
Change the delete button to an × shape in the top-right corner of each card.Example feature change request
When adding a bookmark, if the URL doesn't start with http:// or https://,
show a warning that says "Please enter a valid URL."It’s important to request changes in small increments like this. If you ask for too many changes at once, the AI can end up changing the code in unexpected ways.
Step 4: Repeat
Repeat the cycle of modify → check → modify again. This is the rhythm of vibe coding.
Checking the Result in Your Browser
While the dev server is running (npm run dev), your browser updates automatically every time you change the code. You don’t need to refresh it yourself.
Checking that the dev server is running
If you see a message like this in the terminal, the server is running.
VITE v5.x.x ready in 300 ms
➜ Local: http://localhost:5173/
➜ Network: http://192.168.x.x:5173/Just enter http://localhost:5173/ in your browser.
Frequently used dev server commands
| Command | Purpose |
|---|---|
npm run dev |
Start the dev server (with auto-refresh) |
Ctrl + C |
Stop the dev server |
npm run build |
Generate production files (used later) |
npm run preview |
Preview the built files locally |
Common Problems and How to Fix Them
When building your first screen with vibe coding, you’ll often run into a few common situations.
| Situation | Cause | Solution |
|---|---|---|
| Browser shows only a blank screen | There’s an error, or the server isn’t running | Check the error message in the terminal and share it with Claude Code |
| “Cannot find module” error | Package isn’t installed | Run npm install |
| Red underlines in the AI-generated code | Editor syntax warnings (may still work fine) | Copy the error message and ask Claude Code about it |
| You made changes but the screen doesn’t update | Dev server isn’t running | Run npm run dev again |
How to hand an error to the AI
When an error occurs, the message appears in red text in the terminal. Just copy it as-is and paste it into Claude Code.
I'm getting the error below. Please fix it.
[Paste the full error message here]It’s fine if you don’t understand the code. The AI will analyze the cause and fix it for you.
What We’ve Built So Far
By the end of this stage, you’ll have a working first version of the bookmark app running in your browser. It only works locally (on your own computer) for now, and the saved data only survives a refresh — but your idea has become a screen that actually works.
In the next post, we’ll cover a problem you’re bound to run into once you start building this quickly: how project structure tends to fall apart the faster you add features, and how to manage that.