TLDR: Quick Start

This toolkit sets you up to prototype with a coding assistant, Claude Code or Codex, as a collaborator. You explore ideas together: it proposes plans and handles the technical side of building, testing, fixing and publishing, and you decide what to make and what to try next. Start by getting your assistant running, then work through the rest of the setup together, one step at a time.

Do one step at a time. Send the messages in the boxes to your agent: the AI helper you'll install in VS Code. The help links are there if you get stuck.

This assumes your project is already on GitHub and Vercel already updates its website automatically when you save changes to GitHub.

Part 1: Set Up and Start Prototyping

Everyone does this part. Steps 1 to 13 set up your agent, GitHub and Vercel, then put them to work on your prototype.

Set up a folder for your projects. In Finder (Mac) or File Explorer (Windows), create a folder called Projects in your home folder. Avoid Documents and Desktop, which iCloud Drive or OneDrive may sync. If you already have a folder for your projects, use that one.
Open your projects folder in VS Code. Open VS Code, then use File → Open Folder… to open the folder from step 1. If VS Code asks whether you trust the authors, click Yes, I trust the authors. Your agent won't work otherwise.
Choose and install your agent. Pick Codex by OpenAI or Claude Code by Anthropic.
Check student access using your edu email before buying a plan. For Codex, follow Codex for Students to create or sign in to your ChatGPT account and verify your student status. For Claude Code, check your edu account's Claude access and ask your school's IT help desk whether it includes Claude Code.
In VS Code, click Extensions (the four-squares icon on the left). Search for your chosen agent, click Install, open its chat panel, and sign in.
For more information about accounts, installation, and signing in, see the Codex tutorial or the Claude Code tutorial. Your plan gives your agent a usage allowance that resets every few hours; Costs and Limits explains it.
Ask your agent where it is.
Which folder are you working in?
Check that it names the folder you just opened.
Ask it to list your GitHub projects.
Show me my projects on GitHub.
If it can't:
Install what you need to connect to GitHub, for all my projects. Then sign me in with GitHub CLI: show me the one-time code and web address, and wait while I approve it. Then set up Git to use this sign-in, and set my Git name and GitHub no-reply email if they aren't set.
Open the address, enter the code, and approve. Do it straight away: the code expires after about 15 minutes. Then ask to see your projects again. GitHub help
Open one project on your computer. Replace [project name] with a name from your GitHub list:
Clone my GitHub project called [project name] into this folder (make a copy connected to GitHub). If it's already here, use that copy. Tell me which folder to open in VS Code.
Open that folder using File → Open Folder…, and trust it if asked. Then start a new chat with your agent. From here on, you work inside this project folder.
Ask it to list your Vercel projects.
Show me my projects on Vercel.
If it can't:
Install what you need to connect to Vercel, for all my projects. Then sign me in: show me the web address, and wait while I approve it.
Open the address and approve. Do it straight away: it only works for a few minutes. Then ask to see your projects again.
Then tell your agent how you publish. You do this once, and it applies to all your projects:
Add this rule to your global instructions, the file you read in every project: ~/.claude/CLAUDE.md for Claude Code, or ~/.codex/AGENTS.md for Codex. Create the file if it doesn't exist, and keep anything already in it: "Never deploy with Vercel CLI. To publish, commit and push to GitHub."
Vercel help
Run your project on this computer.
Run my project on this computer and give me a link to open it.
Open the link and try your app. If it won't run, ask your agent:
My project won't run. Explain the problem in plain language, then fix it. If something needs installing, install it for all my projects. Don't show me any secret values.
If the agent can't find something it just installed, restart VS Code (see Stuck? below). Setup help
If the agent says an API key is missing, or the AI features don't respond, ask your agent:
Copy my API key into .env.local from this project's Vercel project. If the key isn't in the Development settings, use Production. Don't show me any values, and keep .env.local out of GitHub.
Then try your app again. If the key comes back empty, Vercel is hiding it: copy it from Google AI Studio instead. API key help
Running your app on your computer uses the same key as your live site, so each test uses your AI service's free allowance, or costs money on a paid plan. Costs and Limits
Ask for a UI audit. This checks how your app looks and how easy it is to use.
Use Playwright to audit my app on computer and phone screens, using the Laws of UX (https://lawsofux.com/) as your reference. Show me what's confusing, hard to read, or difficult to use, with screenshots, and name the law each problem relates to. Suggest the three most useful improvements. Don't change anything yet.
If the agent says it doesn't have Playwright, ask your agent:
If you don't have Playwright browser tools, install them yourself for all my projects. In Claude Code, run Claude Code's own command-line tool: claude plugin install playwright@claude-plugins-official --scope user (if claude isn't found, use the program named in the CLAUDE_CODE_EXECPATH environment variable). In Codex, add the Playwright MCP server (npx @playwright/mcp@latest) to my global Codex settings. Then tell me exactly what to restart before I ask for the audit again.
Allow the install when the agent asks, restart as it tells you, then ask for the audit again. Playwright help

Set up your agent for prototyping. AGENTS.md holds instructions for future chats. CLAUDE.md tells Claude Code to read them too.

Add the prototyping instructions from https://prototypingtoolkit.aroughidea.com/prototyping-instructions.md to this project's AGENTS.md, and make sure CLAUDE.md reads them too. Keep any instructions already there.

Three settings at the bottom of the prompt box change how your agent works:

Setting	What it changes	Claude Code	Codex
Permission mode	How much it asks before acting	Click the mode. Use Plan: it describes a plan and waits for your OK. Manual asks before each edit. Avoid Edit automatically and Auto for now.	Click the permissions menu. Use Ask for approval. Avoid Full access.
Model	Which AI model answers	Click the model name, or type `/model`.	Click the model menu.
Effort	How long it thinks first. Higher is slower and uses more of your plan.	In the mode menu, or type `/effort`.	In the model menu.

Leave the model and effort as they are unless a task is hard. To make every new Claude Code chat start in Plan mode, open VS Code settings (Cmd + , on a Mac, Ctrl + , on Windows), search for Claude Code permission, and set Initial Permission Mode to plan.

Then start a new chat and ask your agent:

What instructions are you following in this project?

It should mention both the prototyping instructions and the publishing rule from step 7. Full setup guide

Optional: try Superpowers. Skip this unless you already have experience developing software and want a disciplined software-engineering assistant in Claude Code. Superpowers suits well-developed projects better than early prototyping. If you try it, start with one project; if you like it, you can install it for all your projects later.
Install Superpowers yourself for this project only. In Claude Code, run Claude Code's own command-line tool: claude plugin install superpowers@claude-plugins-official --scope local (if claude isn't found, use the program named in the CLAUDE_CODE_EXECPATH environment variable). Then tell me exactly what to restart, and don't start any other work.
After restarting, start a new chat and ask your agent:
Which Superpowers skills do you have? In plain language, tell me when I'd use each one. Then help me try the brainstorming skill on one small idea for this project: ask me one question at a time, keep the design to about a page, and stop after the design so I can decide what to do next.
Superpowers help
Put your setup to work. Pick one small task. First, ask your agent to make a save point, a snapshot of your project you can return to if the task goes wrong:
Save a checkpoint of my project with Git, so we can go back to this version if the next change goes wrong. Tell me in one sentence what you saved.
Then send your agent one of these:
- Describe your project in a README, the page people see first on GitHub:
  Write a README.md for this project for people who aren't technical: what it is, who it's for, a link to the live site, how to use it, and what the AI part does. Don't invent features. If you're unsure about something, ask me.
- Draw how it works as a simple diagram:
  Make a simple diagram of how my app and its AI work, for people who aren't technical. Save it as docs/system-diagram.md with a short plain-language explanation. If something isn't clear from the code, ask me.
- Change how it looks to match another website's design:
  Restyle my app to follow the design of https://design.berkeley.edu/: study the site's colors, fonts and spacing with a design-system extraction tool, save those rules in the project, and apply them. Keep my app's content and features, and don't copy Berkeley's logos, photos or text.
When you're happy with the result, ask your agent:
Save my changes to GitHub. Check that Vercel's update worked and give me a link to the result.
More detail
Look back at how it went. Ask your agent:
Look back over this chat. Summarize what I asked for, what you did, where you guessed, and where I corrected you.
Then ask yourself: Did the plan match what you meant? What did the agent get wrong, and how did you notice? What would you tell it next time? Ask the agent to add that last answer to AGENTS.md, so your next chat starts better. More questions

You've finished the setup. Keep exploring your prototype the same way: one small change at a time, with a save point before each.

Part 2: Add a Backend (Advanced, Optional)

Come back to this part when your idea needs a backend: somewhere to keep data or files, or a way to control who can use an app that spends your budget. Do step 14 first. Do steps 15 to 17 when your prototype needs them, and step 18 after any of them. Everything here is free within each service's limits.

Keep your keys on the server. A secret key the browser can see can be used by anyone.
Check whether any secret key this app uses — for an AI service or any other paid API — could ever reach the browser. Look at how this app is built and deployed, including any build settings that copy environment variables into browser code. If a key could reach the browser, move the calls that use it to server code and remove whatever copies it. Don't show me any key values.
If the agent changed anything, ask it to run the app and check the AI features still work. Key help
Add a database. Do this when your prototype needs to remember things.
Install Neon's agent tools for all my projects, and sign me in to Neon: show me the web address and wait while I approve it. Then create a Neon project just for this app, and connect the app to it following Neon's instructions for this app's framework. Add the connection settings to this project on Vercel, copy them into .env.local without showing them, and keep them out of GitHub.
New to Neon? Create an account on the sign-in page, with GitHub or Google. Database help
Add sign-in, and choose who can use the app. Do this before you share an app that spends your budget.
Add Google sign-in with Neon Auth, following Neon's instructions for this app's framework. Add this app's Vercel web address to Neon Auth's trusted domains. Then make the server code that uses my paid API keys refuse any request unless the person is signed in and their email is in an ALLOWED_EMAILS setting on Vercel.
Then add ALLOWED_EMAILS in your Vercel project's settings: the email addresses allowed to use the app, separated by commas. To let anyone with a Google account in, tell your agent instead. Then ask your agent to save your changes to GitHub. Test sign-in on your main Vercel address. Sign-in help
Store files. Do this when your app handles uploads or images. First, create a Blob store on Vercel:
1. Go to vercel.com, sign in, and open your project.
2. In the project's sidebar, open Storage.
3. Select Create Database, choose Blob, then select Continue.
4. Set the access to Private.
5. Give it a name, such as your app's name, and select Create a new Blob store.
6. When asked which environments to include, keep Production and Preview, and also tick Development, so the store works on your computer too.
Then ask your agent, replacing [what the files are], for example with "photos people upload":
Use this project's Vercel Blob store for [what the files are], following Vercel's instructions for this app's framework. Only let signed-in users upload, and keep the files private unless I say otherwise.
File storage help
Check your costs and limits. Every service has them: how much its free plan includes, how much a paid service can charge you, and how many requests it accepts per minute. Do this after any of steps 15 to 17.
Show me how much of each free plan this app uses: Neon, Vercel (including Blob), and any paid API it calls. Tell me what happens when each limit is reached, and whether any of them could charge me.
Costs and limits help

Before you rely on it. Try your app's main flow yourself, then ask someone else to try it without your help. If you start relying on the app or sharing it more widely, give testing, who has access, costs, and how many people it can handle more attention.

Stuck? If your agent says you've reached a usage limit, that's your plan's allowance, not an error: wait until it resets, or use a lower effort setting (Costs and Limits). If your agent can't find something it just installed, quit VS Code completely (Cmd + Q on a Mac, File → Exit on Windows) and open it again. Otherwise, tell your agent what happened and ask: “Help me fix this. Give me one step at a time.”

TLDR: Quick Start ​

Part 1: Set Up and Start Prototyping ​

Part 2: Add a Backend (Advanced, Optional) ​

TLDR: Quick Start

Part 1: Set Up and Start Prototyping

Part 2: Add a Backend (Advanced, Optional)