This post is for beginners. If you have never written code and you keep hearing that people "build apps with Claude," you have probably noticed there is more than one Claude. There is the chat window, there are artifacts that show up next to the chat, and there is Claude Code, which works on real files on your computer or in the cloud. They are related, but they are not interchangeable.
When I teach this, the most common mistake I see is not picking the "wrong" tool. It is using one tool for a job it was never meant to do, then deciding AI building does not work. So here is how each one works today and how I decide which one to open.
The short version
- Chat is for thinking: planning features, writing a spec, asking "how does Stripe billing work," reviewing an error message.
- Artifacts are for things you can see and use right away: a prototype screen, a small tool, a dashboard, a document.
- Claude Code is for a real codebase: files in a folder, a database, payments, deploys, version history.
Most of my own projects use all three, in roughly that order.
Claude chat: your planning partner
Plain chat at claude.ai (or in the desktop and mobile apps) is where I start every project. Nothing gets built here. That is the point. You get to argue with an idea before it costs you anything.
Good chat jobs:
- Turning a vague idea into a list of features and a list of things to cut.
- Drafting the build spec you will later hand to Claude Code or Lovable.
- Explaining a concept in plain English, like row level security or webhooks.
- Pasting an error and asking what it means before you touch any code.
If you work on the same app across many chats, put it in a Project. A Project holds instructions and uploaded files (your spec, your brand notes, your pricing) that apply to every chat inside it. One thing to know: chats inside a Project do not share memory with each other unless the information is added to the project knowledge. If you decide something important in one chat, add it to the knowledge so the next chat knows it.
A starter prompt I give students:
I want to build a web app for [who] that helps them [do what].
Before suggesting features, ask me up to 8 questions about the
users, the one job the app must do well, and what I can skip
for version one. Then give me a feature list split into
"must have for launch" and "later."Artifacts: see it working in minutes
An artifact is something Claude makes that opens beside the conversation: a document, a code snippet, a single-page site, a diagram, a dashboard or a small interactive tool. You can edit it, come back to it and share it. Artifacts start out private to you.
Artifacts have grown up a lot. They can call Claude directly, so an artifact can be a small AI-powered tool, and on paid plans they can store data between sessions, either private to each user or shared by everyone who uses it. Each person who uses an AI-powered artifact signs in with their own Claude account, and their usage counts against their own plan, not yours. The help center page What are artifacts has the current details and limits.
Where artifacts shine for app builders:
- Clickable prototypes. Show a potential customer the main screen before you build anything real.
- Internal tools. A calculator, a checklist, a tracker your team uses.
- Design exploration. "Show me three layouts for this pricing page."
Where I stop using them: when the app needs things I control and can move later. My own Supabase database, user accounts that live in my system, Stripe subscriptions, a custom domain, a codebase I can hand to another developer. Artifacts are not where I would put a paid SaaS product. They are where I find out if the idea deserves one.
Claude Code: building the real thing
Claude Code is an agent. It reads the files in your project, runs commands, makes changes across many files and checks its own work. You describe the outcome. It proposes a plan, edits code and shows you what changed.
It runs in several places, and they all behave the same way:
- Terminal. Install it, open a folder, type
claude. - Desktop app. The Claude desktop app has a Code tab. You pick a folder on your computer and work without a terminal. For many beginners this is the friendliest door.
- Web. At claude.ai/code you connect a GitHub repository and Claude works on it in a cloud machine, then pushes a branch for you to review. This requires a GitHub repo.
- Your code editor. There are extensions for VS Code and JetBrains if you already use one.
One plan detail matters: chat and artifacts work on the free plan, but Claude Code needs a paid plan (Pro, Max, Team or Enterprise) or an API account through the Console. Check the current pricing page before you commit, because plan details change.
Claude Code is the right tool when:
- You exported a Lovable project to GitHub and want to fix or extend it outside Lovable.
- You need server code: webhooks, scheduled jobs, edge functions.
- You want version history and the ability to undo any change.
- The change touches many files at once, like renaming a database column everywhere it is used.
How I decide, in practice
Here is the rough order I follow with a new idea:
- Chat in a Project to shape the idea and write a one-page spec.
- An artifact to mock the main screen and show it to three real people.
- A builder like Lovable or Claude Code to build version one with a real database and login.
- Claude Code for anything that needs careful, multi-file work after that: payments, security fixes, refactors.
Some people skip Lovable entirely and go straight to Claude Code. That works if you are willing to learn a few basics like git and running a local dev server. If you are not there yet, there is no shame in starting in a visual builder and bringing Claude Code in later.
Common mistakes I see
- Building a whole product in chat. You end up copying and pasting code between a chat window and files, and you lose track of what changed. Once you have more than a couple of files, move to Claude Code.
- Treating an artifact like a production app. It is a great demo. It is not your billing system.
- Skipping the planning step. Claude Code is fast, which means it can build the wrong thing fast. Ten minutes in chat saves hours.
- Not picking a model on purpose. In Claude Code you can switch models with
/model. The larger models are better for planning and tricky bugs, and the smaller ones are fine for quick edits. You do not need to obsess over this, but know the switch exists.
A quick test for your current idea
Answer these three questions:
- Does it need to remember data for many users that you own and control?
- Does it take money?
- Will someone other than you ever need to maintain it?
If every answer is no, an artifact may be all you need. If any answer is yes, plan in chat and build with Claude Code or a builder backed by a real database.
Where to go next
If you want to try this with guidance, start with the free Intro to Vibe Coding course on the Courses page. When you are ready to build, the recipes give you build specs you can hand straight to Claude Code or Lovable.
What would have made it better?