Session 2: Setting Up Your AI Workspace

Duration: 2 hours
Prerequisites: Session 1 completed
You'll need: Laptop, internet, Figma account with Dev Mode access

Part 1: Installing Claude Code (30 min)

What You're Installing

Claude Code is a command-line tool that lets Claude read and write files in your project. It's how Claude goes from "understanding your design" to "implementing your design."

You'll interact with it through conversation—same as chatting with Claude, but with access to your codebase.

Installation Steps

1. Create a Claude account (if you don't have one)

Go to claude.ai
Sign up or log in

2. Install Claude Code

Open Terminal (Mac) or Command Prompt (Windows) and run:

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

If you don't have npm, install Node.js first from nodejs.org.

3. Authenticate

claude login

This opens a browser window. Log in with your Claude account.

4. Verify installation

claude --version

You should see a version number. If you do, you're set.

If Something Goes Wrong

"npm not found" → Install Node.js from nodejs.org
"permission denied" → On Mac, try sudo npm install -g @anthropic-ai/claude-code
Authentication fails → Make sure you're logged into claude.ai in your browser

Part 2: Connecting Figma MCP (45 min)

What MCP Does

MCP (Model Context Protocol) is the bridge between Figma and Claude. Without it, Claude only sees screenshots. With it, Claude sees:

Component hierarchy
Layer names
Variants and properties
Auto Layout constraints
Your Figma variables

Your well-structured Figma files—the ones you've spent years perfecting—now translate directly to better code.

Enabling Figma Dev Mode MCP

1. Open Figma Desktop

MCP requires the desktop app, not the browser version.

2. Enable Dev Mode

Open any file
Click the </> icon in the toolbar (or press Shift+D)
You're now in Dev Mode

3. Enable MCP Server

Go to Figma menu → Preferences → Enable Dev Mode MCP Server
The server runs locally at http://127.0.0.1:3845/sse

4. Keep Figma Running

The MCP server only works while Figma Desktop is open.

Connecting Claude Code to Figma

1. Add the MCP connection

claude mcp add figma-dev http://127.0.0.1:3845/sse

2. Verify the connection

Start a Claude Code session and ask:

Can you see my Figma files? List any open files.

Claude should list your open Figma files. If it can, the connection works.

What Claude Can Now Do

With MCP connected, Claude can:

Read any frame or component you select in Figma
Understand the structure (not just the pixels)
See your naming conventions
Access variant properties
Read Auto Layout settings

Your Figma discipline pays off. Clean layer names → clean component names. Proper Auto Layout → proper responsive behavior. Consistent naming → consistent code.

Part 3: Clone Leigher (30 min)

Getting the Repository

1. Install GitHub Desktop (if you don't have it)

Download from desktop.github.com. This gives you Git without the command line.

2. Clone Leigher

Open GitHub Desktop
File → Clone Repository
URL tab: https://github.com/samsen-studio/leigher-v2
Choose where to save it
Click Clone

3. Open in Claude Code

Navigate to the folder in Terminal:

cd path/to/leigher-v2
claude

This starts a Claude Code session in the Leigher project.

Understanding the Project Structure

Ask Claude:

Describe this project structure. What are the main parts? Where are the UI components?

Claude will explain:

/dashboard — The React frontend
/cloudflare-worker — The backend API
/docs — Documentation including design system files

You don't need to memorize this. Claude knows where things are.

Running the Development Server

1. Install dependencies

Ask Claude:

How do I run this project locally?

Claude will guide you through:

cd dashboard
npm install
npm run dev

2. Open in browser

Go to http://localhost:5173. You should see the Leigher dashboard.

3. Keep this running

Leave the dev server running. When Claude makes changes, you'll see them here.

Part 4: Test the Full Loop (15 min)

The Complete Connection

You now have:

Claude Code installed and authenticated
Figma MCP connected
Leigher cloned and running locally

Let's verify the entire loop works.

Test: Make a Small Change

1. Open Leigher's Figma file

(Link provided by instructor)

2. Select a simple component

Find a button or card in the Figma file. Select it.

3. Ask Claude to describe it

Look at the currently selected component in Figma. Describe what you see.

Claude should describe the component's structure, colors, and layout.

4. Ask Claude to make a small change

In the Leigher project, find a similar component and add 4px more padding to it.

5. Check the browser

The change should appear at localhost:5173. If it does, your workflow is operational.

Troubleshooting

Claude can't see Figma:

Is Figma Desktop running?
Is Dev Mode enabled?
Is the MCP server enabled in Preferences?
Try: claude mcp add figma-dev http://127.0.0.1:3845/sse again

Changes don't appear in browser:

Is the dev server running? (npm run dev)
Try refreshing the browser
Check the terminal for errors

Claude seems confused about the project:

Make sure you started Claude Code from the leigher-v2 folder
Try: claude --cwd /path/to/leigher-v2

Session 2 Checklist

[ ] Claude Code installed and authenticated
[ ] Figma MCP server enabled and connected
[ ] Leigher repository cloned
[ ] Development server running
[ ] Verified Claude can read Figma selections
[ ] Verified changes appear in browser

What's Next

Session 3: Briefing Your AI Colleague

Claude can now read your Figma and write to your codebase. But it doesn't know your conventions yet. Session 3 teaches you how to write the briefing document that makes Claude follow your rules.

Session 2 of 10 • The Shipping AI Designer Course
Next: Session 3 — Briefing Your AI Colleague

Setting Up Your AI Workspace