Start here

You unzipped the kit. Getting it running has two phases. Do them in order.

Docs link: https://getdesign.md/vibecoder-kit-docs

Every doc and kit skill in this kit is also browsable in your browser at the link above. Sidebar + nicely rendered markdown, easier to read than raw .md files.

• Phase 1 — Set up your machine. Get Node.js and pnpm installed. One-time work.
• Phase 2 — Pick how you'll chat with your code. Three methods. Pick one, install it, run the kit.

What you are actually doing (read this first)

The kit you unzipped is a folder of code files. To turn that folder into a website you can preview in your browser, you run two commands in a terminal:

• pnpm install reads the project files, figures out what tools and libraries it needs, and downloads them into the folder. You only run this the first time, and again whenever the kit's dependency list changes.
• pnpm dev starts a tiny web server on your own computer. While it is running, you can open http://localhost:3000 in your browser and see your site live. Edit a file, save it, browser auto-refreshes. Stop the server with Ctrl+C in the terminal.

For those two commands to even exist on your computer, you need four pieces in place:

So Phase 1 exists for one reason: get Node.js and pnpm working on your machine. After that you never touch them again.

Phase 2 is the part where you pick how you want to talk to your code (a code editor with AI built in, a standalone AI app, or a plain web chat) and let the AI run the actual pnpm install and pnpm dev for you. You will not type those commands by hand unless you choose Method 3.

Phase 1 — Set up your machine

Goal: node --version and pnpm --version both print a version. Skip this section if they already do.

Path A — Let a web chat AI walk you through it

If you do not have Node yet and the manual route below feels intimidating, open one of these in your browser:

• ChatGPT
• Claude.ai
• Gemini

Paste this prompt and send:

I am about to set up a website project on my computer. I am on [Mac / Windows — fill in] and not a developer.

I need to install Node.js (LTS version) and pnpm. On modern Node, pnpm comes via corepack — please use that, not "npm install -g pnpm".

Walk me through it one step at a time. After each step, ask me what I see on screen before we move on. If something does not work, ask me to paste the error and help me fix it.

Stop after `node --version` and `pnpm --version` both print a version. The rest of the project work happens in Phase 2.

If at any point the chat loses the thread, fall back to the manual walkthrough at docs/setup-from-zero.md. Both Mac and Windows are covered there.

Path B — Do it yourself

Install Node.js LTS from nodejs.org. Then enable pnpm via Corepack:

corepack enable
corepack prepare pnpm@10.28.2 --activate

Verify with node --version and pnpm --version.

For OS-specific details (Homebrew, winget, fixing PATH issues), see docs/setup-from-zero.md.

Phase 2 — Pick how you'll chat with your code

You have three ways. Most developers in the industry use Method 1 or Method 2 — those are what we recommend. Method 3 works but is slower because every change is copy-paste.

Pick one. The rest of Phase 2 details that method end-to-end, including how to run the kit.

Method 1 — VS Code + AI extension (recommended)

You install VS Code, install one AI extension inside it, and chat with the AI in a panel right next to your code. The AI reads your files, runs commands in the integrated terminal, and edits code directly.

Setup

1. Download VS Code: code.visualstudio.com. Run the installer, accept defaults.
2. Open VS Code, open this kit's folder: File → Open Folder.
3. Click the Extensions icon in the left sidebar. Install one:
   • Claude Code for VSCode
   • Codex (for ChatGPT / OpenAI)
   • Gemini Code Assist
   • GitHub Copilot Chat
4. Sign in to the extension when it asks.

Run the kit

5. Open the AI chat panel (Cmd+Alt+I on Mac, Ctrl+Alt+I on Windows).

6. Send this message:

   Get this project running on my machine.

7. The AI reads agent-skills/get-it-running.md and walks you through pnpm install, pnpm dev, and any installs that are still missing. Expect a few back-and-forth questions; if it gets stuck, paste the error back and ask it to retry.

8. When the dev server starts, the terminal prints something like ➜ Local: http://localhost:3000/. Open that URL in your browser.

You should see a page with a big heading that reads "Your headline goes here." That means the kit is running.

Method 2 — Standalone AI app (recommended)

Instead of a code editor with an AI extension, you use an app that is already an AI coder. Each one is its own download. Pick one.

Setup

1. Pick one app from the table above and install it.
2. If the app asks you to open a folder, open the kit folder. Otherwise the app finds your folder when you tell it to.
3. Sign in to the app.

Run the kit

4. In the app's chat, send:

   Get this project running on my machine.

5. The app installs anything missing and starts the dev server. Look at its terminal output for a URL like http://localhost:3000/ and open it in your browser.

Method 3 — Web chat + separate code editor (works, slower)

If you do not want to install a coding-focused tool, you can use a web chat (ChatGPT, Claude.ai, Gemini) on one side and a basic code editor on the other. Every change is copy-paste between the two. Fine for one-off help; tiring for ongoing work.

Setup

1. Open a web chat in your browser:
   • ChatGPT
   • Claude.ai
   • Gemini
2. Install a basic code editor for viewing and editing files. VS Code works well; you do not need any AI extension for this method.
3. Open the kit folder in the editor.

Run the kit

4. In the editor's terminal (or any terminal opened to the kit folder), run:

   pnpm install
   pnpm dev

5. The terminal prints something like ➜ Local: http://localhost:3000/. Open that URL in your browser.

If pnpm install or pnpm dev errors, copy the error into your web chat and ask for help. The chat will give you commands to run; you run them in your terminal manually.

For ongoing work in this method: copy the file you want to change into the chat as context, ask for the edit, paste the AI's code back into the file in your editor, save. Repeat. Switch to Method 1 or 2 once you do this more than a few times.

When the kit is running

You should see a page with a big heading that reads "Your headline goes here." at http://localhost:3000/ (or whatever URL the terminal showed).

If you see that, the kit is running. Move on to README.md for what to do next.

Stuck?

• Phase 1 manual guide (Mac + Windows): docs/setup-from-zero.md.
• Phase 2 detail (the kit skill the AI follows for setup): agent-skills/get-it-running.md.
• Other AI tools we did not list above: docs/how-to-start.md.
• If the AI got confused: paste the error back into chat and ask it to retry. If that does not recover, start a new chat with a more specific question.