Live Building Walk-Through: Beat Pad App

What You'll Build

Welcome to the Product Builders Club Live Building walk-through. This guide walks you through the entire process of building a retro-styled beat pad web app — from initial design inspiration all the way to a live, deployed product on the internet. You'll use an AI-driven, design-first workflow that connects a design canvas directly to your codebase.

What you'll build: A playable beat pad where users can upload their own sounds to pads, trigger them by clicking or pressing keyboard keys, and have their sounds persist across page refreshes.

Estimated time: ~60 minutes

Tools You'll Need

Prerequisites

Before you begin, make sure you have the following set up:

Accounts

• GitHub account
• Vercel account (can sign in with GitHub)
• Access to Claude Code

Software

• Node.js (v18+) and pnpm installed
• Warp terminal (or any terminal you prefer)
• Paper desktop app installed and open
• Code editor (VS Code, Cursor, etc.)

Paper MCP Setup

You must install the Paper MCP before opening Claude Code. This is what allows Claude Code to read from and write to your Paper design files.

1. Go to paper.design/docs/mcp
2. Run the terminal command provided in the docs before you open Claude Code
3. Make sure the Paper desktop app is open and running — the MCP runs locally and needs the desktop app to function

How the Workflow Works

The core of this workflow is Claude Code acting as the bridge between your design canvas and your code repository:

1. Claude Code reads from Paper — examines your designs, colors, layout, typography
2. Claude Code writes to Paper — creates new artboards, design variations, components
3. Claude Code reads from Paper again — takes the finalized design as a reference
4. Claude Code writes to your codebase — implements the design as working code
5. You can edit Paper directly at any time — move things, change colors, adjust spacing, just like any design tool

Step 1: Create a New Code Project

We start by scaffolding a Next.js project with shadcn/ui already configured.

1.1 — Get the shadcn init command

1. Go to ui.shadcn.com
2. Click New Project
3. Select Next.js as the framework
4. Select Base UI as the component foundation (more actively maintained)
5. Copy the terminal command it generates

The command will look something like this:

pnpm dlx shadcn@latest init --preset b0 --base base --template next

1.2 — Run it in your terminal

1. Open Warp (or your terminal)
2. Navigate to the folder where you want to create the project
3. Paste and run the command

pnpm dlx shadcn@latest init --preset b0 --base base --template next

4. When asked for a project name, enter: my-beat-pad
5. Wait for it to create the project, install dependencies, and set up the files

1.3 — Move into the project

cd my-beat-pad

You now have a basic Next.js project with shadcn/ui installed. If you run pnpm dev and open http://localhost:3000, you'll see a blank page that says "project ready" with a button. That's our starting point.

Step 2: Connect to GitHub and Vercel

This ensures that every time you push code changes, they automatically deploy to the internet.

2.1 — Create a GitHub repository

1. Go to github.com/new
2. Name the repo my-beat-pad
3. Leave it as Public (or Private if you prefer)
4. Do not initialize with a README (we already have files)
5. Click Create repository

2.2 — Link your local project to GitHub

GitHub will show you commands to push an existing repository. Run these in your terminal:

git remote add origin https://github.com/YOUR-USERNAME/my-beat-pad.git
git push -u origin main

2.3 — Connect to Vercel

1. Go to vercel.com and sign in
2. Click New Project
3. Import the my-beat-pad repository from GitHub
4. Click Deploy

Vercel will build and deploy what you have (just the blank starter). From now on, every time you merge code into the main branch, Vercel automatically deploys the updated app.

Step 3: Start Claude Code

3.1 — Open Claude Code in your terminal

In the terminal, make sure you're in the my-beat-pad directory, then:

claude

Accept the trust prompt when asked.

3.2 — Open your code editor

Open the my-beat-pad folder in your code editor (VS Code, Cursor, etc.) so you can see the code as it changes.

3.3 — Verify Paper MCP is connected

When you make your first prompt referencing "Paper," you should see Claude Code connect to the Paper MCP. A small indicator in Paper will show that it's connected.

Step 4: Design in Paper

This is where the magic starts. We're going to have Claude Code create designs in Paper based on a mood board / design inspiration — then iterate until we're happy with the direction.

4.1 — Set up your design inspiration

Before prompting Claude Code, prepare your design canvas in Paper:

1. Open the Paper desktop app
2. Create a new file (or open an existing one)
3. Add a Design Inspo artboard with imagery that captures the vibe you're going for

For this project, we used an image of a 1970s Fisher-Price record player (vintage, warm tones) to set the overall warm, brownish, nostalgic aesthetic:

Design inspiration — 1970s Fisher-Price record playerSave image

4.2 — Prompt Claude Code for design variations

In Claude Code, enter:

I want to design a beat pad app that is two pads across and four pads down
based on the design inspo artboard. Create three variations of this app in Paper.

Important: Always reference "Paper" in your prompt — both when telling Claude where to look for context and where to create the design. This triggers the Paper MCP connection.

What happens next:

• Claude Code reads the Paper file and describes what it sees (the mood board image, colors, fonts)
• It creates three artboards with different design variations
• It writes HTML and CSS directly to the Paper canvas
• It takes screenshots to self-review and may fix spacing/contrast issues

The three variations might be something like:

• V1 — Retro Toy: Vibrant, playful pads in orange, yellow, blue, and green. Cream background with chunky rounded corners.
• V2 — Vinyl Lounge: Dark, moody design with warm brown/amber/mahogany tones and subtle border details.
• V3 — Analog Warmth: Soft, modern pastels — warm tans, sage greens, and dusty blues with extra-rounded corners.

4.3 — Choose a direction and refine

Pick the variation you like best. You can:

• Delete the variations you don't want
• Manually adjust anything in Paper (spacing, colors, fonts, sizes)
• Prompt Claude Code for further refinement

Example refinement prompt:

I like V1 Retro Toy the best. Can you make some of the pads as if they
had sounds already loaded onto them and some pads that don't have sounds
loaded? Each pad should have an upload action. Can you design an additional
version in Paper based on this V1 direction?

4.4 — Iterate on the design

Continue refining. Common adjustments:

• "Can you make all of the pads the same size, even if it has a sound loaded or not? Make this change in Paper."
• Delete elements you don't need (e.g., a BPM indicator or play button if they're not part of your MVP)
• Adjust spacing, padding, and borders directly in the Paper UI

Step 5: Plan and Code Based on Designs

Now we switch from designing to building. Claude Code will read the design from Paper and implement it in your Next.js codebase.

5.1 — Clear context and create a feature branch

/clear

Then:

Create a new branch called 'feat/beat-pad'

This creates a separate Git branch so all your changes are isolated. You'll merge back to main when everything works.

5.2 — Initialize Claude Code in the project

/init

This has Claude Code scan your project structure, read configuration files, and create a CLAUDE.md file with context about the project (dev commands, architecture, conventions).

5.3 — Connect Vercel (if you forgot earlier)

If you haven't connected to Vercel yet, do it now while Claude Code initializes. Go to Vercel, import the GitHub repo, and deploy.

5.4 — Enter plan mode and describe the feature

Press Shift+Tab to enter plan mode, then describe what you want to build:

Take a look at the V1 Retro Toy (Pad States) artboard in Paper and plan
the implementation of it in code.

A user can upload their own sounds into the beat pad by pressing on a pad.
It will trigger that sound to play one time. The user will first upload a
sound, then that sound will show the state with the name of the file. The
user can press that button and it will play/trigger that sound. Pressing
the trigger again will re-trigger the sound and stop the original played sound.

Please interview me about this implementation — ask me questions about
trade-offs before you plan it out.

5.5 — Answer Claude's questions

Claude Code will examine the design and codebase, then ask you questions. Here are the types of questions it may ask and how we answered them:

5.6 — Review and tweak the plan

Claude Code generates a plan file. Review it and make adjustments:

Can you make this at the /beat-pad route instead?

Also, ensure you are using color tokens in CSS — don't hard-code color values.

5.7 — Let Claude Code build

Once the plan looks good, let Claude Code execute. It will:

1. Create component files (pad grid, filled pad, empty pad, waveform bars)
2. Set up the audio engine (hooks for uploading and playing sounds)
3. Configure IndexedDB for sound persistence
4. Wire up the page assembly and routing
5. Update global styles with the retro theme colors

You can watch the code appear in your editor in real time.

Step 6: Test, Debug, and Iterate

6.1 — Test the app

While Claude is building, you can check progress at http://localhost:3000/beat-pad (make sure your dev server is running with pnpm dev).

6.2 — Debug issues

It's normal to hit bugs on the first run. In our session, we hit an IndexedDB error when uploading sounds. The fix workflow is simple:

1. Copy the error message from the browser
2. Paste it into Claude Code: "I'm getting an error when I upload a new sound. The error is: [paste error]"
3. Claude Code fixes the issue

6.3 — Commit your working version

Once the core functionality works, commit immediately:

Can you commit and push these changes?

6.4 — Add features iteratively

With the core working, add features one at a time. For example, we added keyboard mapping:

Can you map the different pads to keys on my keyboard? On the left column
from top to bottom should go from 5 to B. On the right column should go
from 6 to N. When I press a key, it should trigger the sound in that pad.

This lets you play multiple pads simultaneously using the keyboard — something you can't do with a mouse alone.

Step 7: Merge and Deploy

7.1 — Create a Pull Request

Make a PR for this

Claude Code will:

• Push your branch to GitHub
• Create a pull request with a summary of changes
• Include a test plan

7.2 — Merge the PR

1. Open the PR on GitHub (Claude Code provides the URL)
2. Review the changes if you'd like
3. Click Merge pull request

7.3 — Verify deployment

Vercel automatically builds and deploys when you merge to main.

1. Go to your Vercel dashboard
2. Wait for the build to complete
3. Visit your app at https://my-beat-pad.vercel.app/beat-pad

Your beat pad is now live on the internet!

Next Steps: Continuing to Iterate

The first version is deployed, but there's always more to build. Here's how to continue the design-to-code loop:

Add a Landing Page

1. In Claude Code, prompt: "Can you design a super simple landing page in Paper that says 'Welcome to my beat pad' with a call to action button that goes to the /beat-pad route? Base the design on the style already in the artboards."
2. Create a new branch: feat/landing-page
3. Have Claude Code implement the landing page in code
4. Merge and deploy

Add a Context Menu

1. In Claude Code, prompt: "Can you design a context menu for the pads that would be triggered by right clicking or long pressing on a pad? It should have: Replace sound, Clear sound. Design this in Paper."
2. Review and refine the design in Paper
3. Implement in code on a new branch
4. Merge and deploy

Load an Existing Codebase into Paper

If you have an existing project and want to bring it into Paper:

1. Connect Claude Code to both the code repository and Paper
2. Prompt: "Look at this code repository and build out the main screens/pages in Paper"
3. Ask it to create a design system in Paper based on the code (typography, colors, spacing tokens, components)
4. Use the design system in Paper to drive new design variations

Tips and Best Practices

Design Phase

• Start with a mood board — even a single image with a few words sets the tone
• Generate multiple variations — ask for 3 variations and pick the best direction
• Combine ideas — take elements from different variations
• Edit directly in Paper — don't fight the agent with text for small tweaks; just do it in the design tool
• Clear context between phases — when moving from design to code, clear Claude Code's context so it only reads the final design file

Planning Phase

• Use plan mode (Shift+Tab) — have Claude Code plan before building
• Ask Claude to interview you — let it surface the questions that matter for implementation
• Don't write a requirements doc — requirements emerge naturally through building
• Use color tokens — ensure Claude uses CSS custom properties, not hard-coded color values

Building Phase

• Commit early and often — save working versions as checkpoints
• Fix bugs by pasting errors — copy/paste error messages directly into Claude Code
• Add features one at a time — get each feature working before moving on
• Test in the browser constantly — don't wait until everything is "done" to check

Workflow

• Measure twice, cut once — the planning phase takes the longest, and that's a good thing
• Get something real fast — a working prototype in minutes beats a requirements document that takes days
• Use the product — new requirements emerge from actually using what you built
• Create branches for each feature — keeps your main branch clean and deployable

Quick Reference: Key Commands

Appendix: Prompts Used in This Walk-Through

Design prompts

1. "I want to design a beat pad app that is two pads across and four pads down based on the design inspo artboard. Create three variations of this app in Paper."
2. "I like V1 Retro Toy the best. Can you make some of the pads as if they had sounds already loaded onto them and some pads that don't have sounds loaded? Each pad should have an upload action. Can you design an additional version in Paper based on this V1 direction?"
3. "Can you make all of the pads the same size, even if it has a sound loaded or not? Make this change in Paper."

Planning prompts

4. "Take a look at the V1 Retro Toy (Pad States) artboard in Paper and plan the implementation of it in code. [feature description]. Please interview me about this implementation."
5. "Can you make this at the /beat-pad route instead? Ensure you are using color tokens in CSS."

Building prompts

6. "I'm getting an error when I upload a new sound. [paste error]"
7. "Can you commit and push these changes?"
8. "Can you map the different pads to keys on my keyboard? On the left from top to bottom should go from 5 to B. On the right should go from 6 to N."
9. "Make a PR for this."

Post-build prompts

10. "Can you design a super simple landing page in Paper that says 'Welcome to my beat pad' with a call to action button that goes to the beat pad route? Base the design on the style already in the artboards."
11. "Can you design a context menu for the pads triggered by right clicking or long pressing? It should have: Replace sound, Clear sound. Design this in Paper."