Setup guide

The Terminal is a small app that comes with every Mac. You type short commands into it and the computer does what you ask.

1. Press ⌘ + Space to open Spotlight (the search bar).
2. Type Terminal and press Return.
3. A small black or white window appears. That's it — that's the terminal.

1. In your browser, go to nodejs.org.
2. Click the big LTSdownload button. (LTS stands for “Long Term Support” — it's the stable version most people use.)
3. Open the .pkg file that downloaded.
4. Click Continuethrough the installer. You will be asked for your Mac password — that's normal.
5. When the installer finishes, switch back to the Terminal, type the line below and press Return:

node --version

If you see something like v22.11.0, Node.js is installed. If nothing happens or you see “command not found”, quit the Terminal completely (⌘ + Q), reopen it, and try again.

Now we'll use Node.js to install Claude Code. Copy the line below, paste it into the Terminal, and press Return:

npm install -g @anthropic-ai/claude-code

It will print a lot of text. That's normal — let it run. When the blinking cursor comes back next to your %, it's done. Verify by running:

claude --version

If you see a version number, you're good. If you see a “permission denied” error, try again with sudo in front:

sudo npm install -g @anthropic-ai/claude-code

You'll be asked for your Mac password. As you type it you'll see nothing on screen — that's a security feature, not a bug. Type it and press Return.

Type claude and press Return. Your browser will open and ask you to log in to Anthropic. Follow the prompts. After logging in, you can close the browser tab and return to the Terminal.

To leave Claude Code, press Ctrl + C twice. You won't need to come back to the Terminal again for normal use — the Design In The Browser app handles that.

1. Go to designinthebrowser.com and click the big Download button.
2. You'll be asked: Apple Silicon or Intel?
   • If your Mac was bought after late 2020, it's almost certainly Apple Silicon (M1, M2, M3, M4 and so on).
   • To check: click the Apple logo (top-left of your screen) → About This Mac. If the “Chip” line starts with “Apple”, pick Apple Silicon. If it says “Intel”, pick Intel.
3. Open the .dmg file that downloaded.
4. Drag the Design In The Browser icon onto the Applications folder.
5. Open the app from your Applications folder. The first time, Mac may say “cannot be opened because it is from an unidentified developer”. If that happens, right-click the app and choose Openinstead of double-clicking. You'll only need to do this once.

In Design In The Browser, pick a folder to work in. If you don't have one yet, create an empty folder on your Desktop called something like my-first-site and select that.

Click the AI button and tell Claude what you want. For example: “Make a one-page personal site with a header, a paragraph about me, and a contact form.”

Watch the preview update as Claude writes the code. Click any element on the page to ask for changes. That's it — you're designing in the browser.

The Terminal is where you'll type a couple of commands. On Windows 11 it's already installed. On Windows 10 you may need to install it from the Microsoft Store first — search for Windows Terminal.

1. Press the Windows key.
2. Type Terminal and press Enter.
3. A window opens with something called PowerShell inside it. That's your terminal.

1. Go to nodejs.org.
2. Click the big LTSdownload button. (LTS = “Long Term Support”, the stable version.)
3. Open the .msi file that downloaded.
4. Click Next through the installer. Leave the default boxes ticked. When Windows asks for permission to make changes, click Yes.
5. Important: close the Terminal window completely and open it again. Windows needs a fresh terminal to notice the newly installed program.
6. In the new Terminal window, type the line below and press Enter:

node --version

If you see something like v22.11.0, Node.js is installed.

Paste this into the Terminal and press Enter:

npm install -g @anthropic-ai/claude-code

Wait while it prints a lot of text. When the prompt (>) comes back, it's done. Verify by running:

claude --version

Set-ExecutionPolicy -Scope CurrentUser -ExecutionPolicy RemoteSigned

Type claudeand press Enter. Your browser opens for you to log in to Anthropic. Follow the prompts and you're done. Press Ctrl + C twice to exit.

1. Go to designinthebrowser.com and click Download for Windows.
2. Open the .exefile. Windows SmartScreen may show a blue box saying “Windows protected your PC”. Click More info, then Run anyway. (This warning shows up because the app is new, not because anything is wrong.)
3. Follow the install wizard to the end.
4. Launch Design In The Browser from the Start menu.

Pick a folder to work in. If you don't have one yet, create an empty folder on your Desktop called something like my-first-site and select that.

Click the AI button and tell Claude what you want. For example: “Make a one-page personal site with a header, a paragraph about me, and a contact form.” Click any element to ask for changes.