Build a simple app with Claude Code

1. 1

   Shrink your idea to one screen

   First apps fail by being too big. Use Claude (the normal chat) to cut your idea down to something that fits on one screen and needs no login or payments.

   Copy-ready promptCopy prompt

   I have no coding experience and want to build my first small web app with Claude Code. My idea: [your idea]. Cut it down to the smallest version that fits on one screen, has no login and no payments, and saves data in the browser. Describe it in 5 bullet points I can paste into Claude Code.

   

   In this step

   Claude · Careful writing help and long-document reading.

   Free · paid from $20/mo

   Check it worked: Your app fits in 5 bullet points.

2. 2

   Install Claude Code

   Claude Code needs a paid Claude plan or API credits. Follow the install steps on Anthropic's official Claude Code page for your system, then open a terminal (Terminal on Mac, PowerShell on Windows) and sign in when asked. If a terminal feels scary, check whether the Claude desktop app offers Claude Code for your system.

   

   In this step

   Claude Code · An AI agent that works inside your codebase.

   From $20/mo

   Check it worked: Typing claude --version in the terminal prints a version number.

3. 3

   Start a project folder

   Make an empty folder for the app (for example habit-tracker in Documents), open your terminal in it, and type claude. Everything Claude Code creates will stay in this folder.

   

   In this step

   Claude Code · An AI agent that works inside your codebase.

   From $20/mo

   Check it worked: Claude Code greets you and shows the folder name.

4. 4

   Ask for a plan before any code

   Paste your 5 bullet points with the prompt below. Read the plan; if anything sounds complicated, ask for a simpler way. Claude Code asks permission before it changes files or runs commands — read each request before you say yes.

   Copy-ready promptCopy prompt

   I'm not a programmer. Build this as a simple web app that runs in my browser. First, explain your plan in plain language and tell me what you'll install, then wait for my OK.
   
   [paste your 5 bullet points]

   

   In this step

   Claude Code · An AI agent that works inside your codebase.

   From $20/mo

   Check it worked: You understand the plan well enough to explain it to a friend.

5. 5

   Run it and look at it

   Say OK and let it build. Then ask: "How do I open the app in my browser?" It will start it and give you a link like http://localhost:…. Click around and try to break it.

   

   In this step

   Claude Code · An AI agent that works inside your codebase.

   From $20/mo

   Check it worked: The app opens in your browser and the main button works.

6. 6

   Improve it one change at a time

   Ask for one change per message and check it in the browser before the next. Describe what you see, not how to code it: "The button is hard to see on my phone" works better than technical words.

   Copy-ready promptCopy prompt

   Here's what I see: [describe the problem or what you want]. Fix only this, explain what you changed in one or two sentences, and tell me how to check it.

   

   In this step

   Claude Code · An AI agent that works inside your codebase.

   From $20/mo

   Check it worked: Each change works before you ask for the next.

7. 7

   Save your progress

   Ask Claude Code to save a checkpoint with git after every working change, so you can always go back. When you're happy, ask how to put it online for free; it can walk you through a hosting service step by step.

   Copy-ready promptCopy prompt

   Set up git for this folder if it isn't already, and save a checkpoint now with a short description of what works. From now on, remind me to save after each working change.

   

   In this step

   Claude Code · An AI agent that works inside your codebase.

   From $20/mo

   Check it worked: Asking "show my saved checkpoints" lists at least one.

Prices change often and can differ by country. Always check the official site before you pay.