Building Your First Screen with Vibe Coding — Turning Ideas into Code

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 describing your idea in as much detail as possible. People with illusions about AI services think that, unlike a person, an AI will hand you what you want even from a vague request. But that only holds at the level of something built for fun — in an industrial project, where a result that deviates from expectations counts as a defect, it doesn’t. For a person and an AI alike, the range of things you could imagine from a vague request is simply too wide, so you have to spell things out to narrow that gap and get the result you expected.

In other words, 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. When I enter a URL and title, it should be added to the list. Show the saved list as cards, and each card should have a delete button so I can remove items too. Let's build the bare minimum first and add the details as we go. I'm thinking of building it with React and Vite — how would you approach it?

Principles for writing prompts

Be clear about what to build: Write down, in as much detail as you can, the core features the project must have and the shape they should take.
Limit the scope of features: Don’t ask for too much at once. Start small and add things step by step.
Ask about what you don’t know: You don’t have to force every spec into place. Rather than handing over everything at once, decide together — asking about what you’re unsure of, just like a real conversation with a person.

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
claude

Once 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. It’s especially worth watching closely at the beginning: the less of a codebase there is, the more often the AI heads in the wrong direction or misreads the project’s intent. If it isn’t writing what you meant, stop it at any point and steer it back toward your intent with a correcting prompt.

Step 2: Try Running It

Once the files are created, Claude Code will tell you how to run the project. For a React + Vite project, for example, it’s usually like this:

npm install
npm run dev

Type 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 widen the spacing between them a bit.
Change the delete button to the icon I added in the assets folder.

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 repetition matters: every act of creation is built by stacking up thin but well-finished pieces, and vibe coding is no different.

Checking the Result

It depends on the project, but for the React + Vite setup used in this example, keeping the dev server open reflects your changes in real time. Check the result in whatever way suits your project’s foundation.

e.g., Vite dev server running (Terminal)

  VITE v5.x.x  ready in 300 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: http://192.168.x.x:5173/

In that case, 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 problems. AI services frequently recognize and resolve issues on their own — but when the AI can’t read the error message directly, or when the problem only reproduces in a separate environment, you’ll need to describe and help analyze the situation yourself.

Usually, when an error occurs, a message is printed 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]

Even in coding done entirely by hand, this troubleshooting process is the hardest and most important part — it’s no exaggeration to say that doing it well decides whether vibe coding succeeds or fails. This is where a great deal of experience and skill come into play.

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’ll often run into during vibe coding: how project structure tends to fall apart the more features you add, and how to manage it.