article

Vibe coding with Claude for a first project

Vibe coding with Claude has two entry points: the browser for zero-setup single-page builds and Claude Code for real projects, plus a first session.

Femcode Collective||4 min read

Vibe coding with Claude starts in one of two places. Open Claude in the browser and it writes code you can see and run as a live preview inside the chat; open Claude Code in your terminal and the same description turns into files it creates and edits directly on your computer. Picking the right one for your stage saves confusion, so let us sort that first. Everything below describes how the tools work in September 2026, and both of them change often enough that the details are worth re-checking when you start.

The two ways in

Claude in the browser. You chat, describe what you want, and Claude writes code it can run and preview right in the conversation as an artifact. Zero setup, nothing installed, no folder on your machine. This is the right starting point for single-page things: a calculator, a quiz, a landing page, a small game. You iterate by saying what to change, and the preview updates beside the conversation.

Claude Code. A tool that runs on your own computer and works with real project folders. It asks permission before it edits a file or runs a command, creates files, installs packages, runs your tests and reads the errors back. This is for when your project is bigger than one page.

Start in the browser. Move to Claude Code when your project needs more than one file, when you want it live on the internet under your own domain, or when you find yourself copying code out of a chat window into an editor by hand.

The skill is describing

Vibe coding is mostly the skill of describing. A few patterns that work:

  • Describe the outcome, with a user in it. "A page where someone pastes their week's meals and gets a shopping list" beats "make a meal app." The user story gives Claude the decisions you have not thought of yet.
  • One change per message while learning. Big vague asks produce big vague rewrites. "Make the button save to local storage so the list survives refresh" keeps you in control and keeps the diff small enough to read.
  • Paste errors without shame. Copy the whole error message in, say what you did before it appeared, and let it debug. Error messages are for the model now; nobody is grading you on reading a stack trace.
  • Name the constraint. "No libraries, plain HTML and CSS" or "it has to work on my phone" changes the answer completely, and Claude will pick something reasonable if you say nothing, which may not be the reasonable thing you had in mind.
  • Ask it to explain. "Explain what this function does like I am new" is a legitimate prompt, and it is how vibe coding quietly turns into learning to code.

A first session that works

Pick something tiny and yours: a tool you would use this week. Describe it in three sentences. Let Claude build the first version, react to what is wrong with it in plain language, and repeat until it does the thing.

Then, and this is the part people skip, ask Claude to walk you through the code it wrote. Twenty minutes of that per project compounds fast. After three or four projects you start predicting what it will write before it writes it, which is the point at which you are reviewing rather than hoping.

Save a copy whenever something works. In the browser that means keeping the version of the artifact you liked; on your machine it means git init and a commit, which Claude Code will set up if you ask. The failure mode for beginners is rarely bad code. It is a working thing that got talked into a broken thing with no way back.

Where it goes wrong

Asking for too much at once is the common one. You get a half-working app and no idea which of the twelve new things broke it. Accepting code you cannot read at all is fine for a weekend toy and expensive in anything you will maintain. And then there is anything security-shaped, where the model will happily hand you a key pasted into a file that ends up on GitHub, a login form it invented, or a database left open to the internet. If a project touches other people's data or money, slow down there and get a human to look.

Claude will also confidently write code against a library version that moved. When something looks right and does not run, the version is a good first suspect.

Getting it in front of someone

When you outgrow the browser, Claude Code plus a free hosting service gets your project a real URL. Ask for the deploy steps in the same plain language you used for everything else; the model knows the common hosts and will walk you through the account, the build command and the domain.

That milestone, sending someone a link to a thing you made, is the one that changes people. It is also the moment the feedback stops being about your code and starts being about your idea, which is the more interesting conversation.

Vibe coding with Claude for a first project | femcode collective