Set Up Claude Design

A step-by-step guide for your Mac. No technical experience needed. Takes about 15 minutes.

0

What You're About to Install

A quick overview before we begin, so you know what each piece does.

Claude Code is an AI assistant that runs in your Terminal (the text-based app on your Mac). The Claude Design plugin teaches it how to create WbD proposal decks.

After setup, you just describe what you need in plain English. No coding, no design skills, no templates to fill in.

Here is what we will install:

  1. Node.js - a tool your Mac needs to run Claude Code
  2. Claude Code - the AI assistant itself
  3. Claude Design - the WbD plugin Dan built for proposals
1

Open Terminal

Terminal is the text-based app on your Mac where you'll talk to Claude.

Press these keys together:

Cmd + Space

This opens Spotlight (a search bar at the top of your screen). Type:

Terminal

Press Enter to open it.

What you should see
macbook ~ % _
If something went wrong
If you see zsh or bash followed by your computer name, you are in the right place. That is exactly what Terminal looks like. The blinking cursor means it is ready for you to type.
2

Install Node.js

Node.js is a behind-the-scenes tool your Mac needs to run Claude Code.

  1. Open your web browser and go to https://nodejs.org
  2. Click the big green "LTS" button on the left side
  3. Open the downloaded .pkg file
  4. Follow the installer. Click Continue, then Install
  5. When it says "Installation was successful", close the installer

Back in Terminal, verify it worked. Type this and press Enter:

node --version
What you should see
macbook ~ % node --version v20.18.1
If something went wrong
If you see "command not found", close Terminal completely by pressing Cmd+Q, then reopen it and try node --version again. The installer needs Terminal to restart before it recognizes the new software.
3

Install Claude Code

This downloads and installs the AI assistant on your Mac.

Type this in Terminal and press Enter:

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

Wait about 30 seconds. You will see a progress bar.

What you should see
macbook ~ % npm install -g @anthropic-ai/claude-code added 42 packages in 28s
If something went wrong
If you see "EACCES permission denied", you need to run it with admin access. Type this instead:

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

It will ask for your Mac password. When you type the password, nothing will appear on screen. That is normal and a security feature. Just type your password and press Enter.
4

Launch Claude Code and Sign In

Start Claude for the first time and connect your account.

Type this in Terminal and press Enter:

claude

Your web browser will open automatically with a sign-in page. Follow the prompts to authenticate.

What you should see
macbook ~ % claude Opening browser for authentication... Authentication successful. Welcome to Claude Code! Type a message to get started.
If something went wrong
If the browser does not open automatically, look for a URL printed in Terminal. Copy the entire URL and paste it into your browser manually.
5

Download Claude Design

Download the WbD proposal plugin that Dan shared with you.

  1. Open the Google Drive link Dan shared (the folder is called "claude-design")
  2. Click the Download button (the down arrow icon at the top)
  3. It will download as claude-design.zip to your Downloads folder
  4. Double-click the .zip file to unzip it
  5. Move the unzipped claude-design folder into your Documents folder (drag it from Downloads to Documents in Finder)
What you should see in Finder
Documents/ claude-design/ <-- the plugin lives here permanently
If something went wrong
Make sure the folder actually unzipped and you moved it. You should see a claude-design folder in your Documents folder. If you only see the .zip in Downloads, double-click it again to unzip, then drag the folder to Documents. If the folder has a different name (like "claude-design-main"), that is fine. Just use that name in the next step.
6

Install the Plugin

Tell Claude Code to load the design plugin you just downloaded.

In Claude Code (you should still have it open from Step 4), type:

/install-plugin ~/Documents/claude-design
What you should see
Plugin claude-design installed successfully
If something went wrong
If you see "not found", the folder might have a different name. Type this to see what is in your Downloads folder:

ls ~/Downloads/

Look for anything with "claude-design" in the name and use that name instead. For example: /install-plugin ~/Documents/claude-design-main
7

Run Setup

This configures the plugin and installs any extra tools it needs.

In Claude Code, type:

/deck-setup

This takes 1-2 minutes. Wait for it to finish.

What you should see
Installing dependencies... Configuring Playwright... Setting up output directory... Setup complete!
If something went wrong
If it fails during the Playwright step, this usually means a browser component could not be downloaded. Ask Dan for help. He can walk you through it in a few minutes.
8

Connect to Grain (Optional)

This lets Claude pull meeting transcripts directly, so you do not have to copy-paste.

In Claude Code, just say:

Connect to Grain

Follow the authentication prompts that appear. This is a one-time setup.

You can skip this step and come back to it later. Decks work fine without Grain. You will just type in the discovery details yourself.

If something went wrong
If Grain authentication fails, make sure you are logged into Grain in your browser first. Then try the command again. If it still does not work, skip this step for now.
9

Create Your First Test Deck

Let's make sure everything works by creating a test proposal.

In Claude Code, say:

Create a proposal for Test Corp
  1. When it asks about a transcript, say "no transcript"
  2. Answer the 5 discovery questions it asks (make up answers, this is just a test)
  3. Wait while it builds the deck
What you should see
Creating proposal for Test Corp... Do you have a meeting transcript? no transcript Question 1/5: What is the prospect's primary challenge? They struggle with inconsistent sales messaging ... Generating slides... Rendering deck... Deck complete! Opening in browser...

A slide deck should open in your web browser. If it does, everything is working.

If something went wrong
If the deck does not open in your browser, look for a file path in Terminal. You can copy-paste that path into your browser address bar. If the process fails entirely, take a screenshot and send it to Dan.
10

You're Ready

Here is everything you need to know going forward.

Where your decks are saved:

Documents → WbD-Decks

To create a new proposal:

Create a proposal for [Account Name]

To refine a deck: Just tell Claude what to change in plain English. For example, "make the pricing slide more prominent" or "change the title to Revenue Transformation."

To finalize and export:

finalize

Guide built by WbD AI team. Questions? Ask Dan.

Need a printed copy? Press Cmd+P