🚀

Design Meets the Code

A new workflow for designers — learn GitHub, the IDE, and Claude Code to bring your designs to life.

Overview

What We'll Cover

Five building blocks that power the modern design-to-code workflow

GitHub

Where code lives

The IDE

Where code is written

✦

Claude Code

Your AI partner

MCPs

External connections

Workflow

Putting it together

Section 1

What is GitHub?

Think of it as Google Drive for code — a place in the cloud where your team's code is safely stored, tracked, and shared.

☁️

Cloud Storage

All code lives online, accessible from anywhere. No "which version is latest?" confusion.

📜

Version History

Every change is recorded — like Figma's version history, but for code. You can always go back.

👥

Team Collaboration

Multiple developers can work on the same project simultaneously without overwriting each other.

Repository

The Repository (Repo)

A repository is a project folder on GitHub. It contains all the code, files, images, and the complete history of every change ever made.

📦 my-project

📄 index.html

📄 styles.css

📁 components

📄 Header.tsx

📄 Button.tsx

📁 assets

🖼️ logo.png

📄 README.md

💡 Design Analogy

A repo is like a Figma project. It's the container that holds all the pages (files), components, and assets for one product or feature.

🔑 Key Point

Each project has its own repo. For example, we might have one repo for the main platform and another for a marketing site.

Branch

What is a Branch?

A branch is a separate copy of the code where you can make changes without affecting the main version. Like duplicating a Figma page to try a new layout.

💡 main is the "live" version. Developers create branches to work on features safely, then merge them back when ready. Just like duplicating a Figma page, experimenting, then moving the final design back to the main page.

The Git Journey

Clone, Pull, Push & PR

The 4 steps of working with GitHub — click each step to learn more

Clone — Copy the Project

One-time

When you join a project for the first time, you clone it — downloading the entire repository from GitHub to your computer. After that, you have a full local copy.

Figma analogy: Like downloading a shared Figma file to work locally — except Git keeps it connected so you can sync changes back.

Terminal

$ git clone github.com/team/project
Cloning into 'project'...
✓ Done! Project copied.

Pull — Get the Latest Changes

Every time

Do this every time you start working. Your teammates may have pushed new code. "Pull" downloads their latest changes so your local copy stays up to date.

Figma analogy: Like opening a shared Figma file and seeing "Updates available" — accept them to get the latest before making changes.

Terminal

$ git pull
Updating 3a7f2c1..b9e4d8f
3 files changed
✓ Up to date!

Push — Share Your Changes

After making changes locally, you first commit (save a checkpoint with a description), then push to send those changes up to GitHub so the team can see them.

Figma analogy: Like saving your Figma changes and hitting "Publish" so everyone on the team sees your latest updates.

Terminal

$ git add .
$ git commit -m "Add sidebar"
$ git push
✓ Pushed to GitHub!

Pull Request — Review & Merge

After pushing, you create a Pull Request on GitHub — a formal request saying "please review my changes and merge them into the main codebase." The team reviews, comments, and approves.

Figma analogy: Like sharing a prototype link with "Ready for review" — stakeholders comment, you iterate, and once approved the design moves to handoff.

Open Add sidebar nav

feature/sidebar → main

✓ Tests passing

✓ 1 approval

Merge Pull Request

Clone (once)

→

Pull

→

Write code

→

Push

→

PR

↻

Pull Request

The Pull Request (PR)

A Pull Request is a request to review and merge your branch into the main code. It's the team's quality gate.

🟢 Open Add new sidebar navigation

Ahmed opened this pull request 2 hours ago · 3 commits · 5 files changed

This PR adds the new sidebar navigation component based on the latest Figma designs.

✅ Design Approved ✅ Tests Passing ⏳ Review Pending

D

Doaa commented 30 min ago

Looks good! The spacing between nav items should be 12px not 16px — check the Figma specs. Otherwise, approved ✅

1. Developer creates PR

"I'm done — please review my work"

2. Team reviews

Designers can check if it matches the specs

3. Feedback & iterate

Leave comments, request changes

4. Merge ✅

Approved? Code goes to main

Section 2

What is an IDE?

Integrated Development Environment — it's to developers what Figma is to designers: the primary workspace where all the work happens.

Code Editor

Write and edit code with syntax highlighting, auto-complete, and error detection — like spell-check for code.

Built-in Terminal

Run commands, start servers, and interact with Git — all without leaving the editor window.

Extensions

Add superpowers with plugins — like Figma plugins, but for coding. Claude Code is one of these!

VS Code

Inside the IDE

Here's what a typical code editor looks like — similar layout to Figma with its panels and layers.

Dashboard.tsx — my-project — VS Code

📁

🔍

⚛️ Dashboard.tsx

🎨 styles.css

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

import { Card, Metric } from './components'

export function Dashboard() {
  return (
    <div className="grid grid-cols-3 gap-6">
      <Card title="Total AUM">
        <Metric
          value="$2.4B"
          trend="+12.5%"
        />
      </Card>
    </div>
  )
}

main TypeScript UTF-8 Ln 7, Col 24

✦ Section 3

What is Claude Code?

Claude Code is an AI coding assistant that lives inside your IDE. You talk to it in plain English, and it writes, edits, and manages code for you.

💬

Natural Language

Describe what you want in plain English — "Create a dashboard with three metric cards" — and it writes the code.

🎨

Design-to-Code

Share a Figma link or describe a design, and Claude generates pixel-accurate components with proper styling.

🔧

Full Codebase Aware

It reads your entire project — understands the structure, components, and patterns already in use.

💡 For designers: Think of Claude Code as having a developer sitting next to you who instantly translates your design vision into working code — while you stay in control of every decision.

✦ Setup Guide

Setting Up Claude Code

3 steps to get Claude Code running inside your IDE

1

Install VS Code or Cursor

Download and install your IDE of choice. Both are free and work on Mac, Windows, and Linux.

VS Code

code.visualstudio.com

Cursor

cursor.com

2

Install the Claude Code Extension

Open the Extensions panel in your IDE and search for "Claude Code". Click Install — that's it.

Extensions

Claude Code

✦

Claude Code

Anthropic · AI coding assistant

Install

3

Sign In & Start Using

Click the ✦ icon in the sidebar to open Claude Code. Sign in with your Anthropic account. You'll see a chat panel — type any request in plain English.

✦ Click the icon in the sidebar

Sign in with your account

Start chatting in plain English

✦ Inside the IDE

Claude Code in Action

Claude Code runs as a panel inside VS Code or Cursor — right next to your code.

Dashboard.tsx — my-project — VS Code ✦ Claude Code Active

📁

🔍

✦

⚛️ Dashboard.tsx

1
2
3
4
5
6
7
8
9
10

// Claude just generated this 👇
export function Dashboard() {
  return (
    <div className="p-6">
      <MetricCard
        title="Total AUM"
        value="$2.4B" />
    </div>
  )
}

✦ Claude Code

Create a dashboard with AUM metrics card using our existing Card component

I'll create the Dashboard component using your existing Card and Metric components. Let me check the current project structure first...

✅ Created Dashboard.tsx
📁 Read 3 existing components
🔗 Reused Card, Metric patterns

Make the spacing match the Figma — 24px gap between cards

Updated the gap from gap-4 to gap-6 (24px). The layout now matches your Figma specs.

feature/dashboard TypeScript ✦ Claude Code

✦ For Designers

What Designers Can Do With Claude Code

Real tasks you can accomplish — no coding background needed

🖼️ Figma → Working Prototype

Share a Figma URL, get a fully interactive HTML prototype you can open in a browser and share with stakeholders.

🔍 Design QA

Compare the built UI against your Figma specs. Get a detailed report of every spacing, color, and typography deviation.

🧪 Rapid Exploration

"Show me 3 different layouts for this dashboard" — iterate on live, interactive code faster than static mockups.

📊 Research & Analysis

Competitor benchmarking, UX heuristic reviews, and design system documentation — all generated as polished HTML reports.

Section 4

What are MCPs?

Model Context Protocol — plugins that connect Claude Code to external tools like Figma, Notion, and more.

Without MCPs

Claude Code can only see the files on your computer. To reference a Figma design, you'd have to describe it or paste screenshots.

Claude Code ⟶ Local files only

With MCPs

Claude Code can directly read your Figma designs, access Notion docs, deploy to Netlify — all from within the IDE.

Claude Code ⟶ Figma + Notion + Netlify + ...

Think of MCPs as Figma plugins — for Claude Code

Just like you install Figma plugins to add new capabilities (icons, illustrations, accessibility checks), MCPs give Claude Code the ability to connect to external services. Each MCP adds a new superpower.

How It Connects

Your IDE, Connected

Claude Code inside your IDE acts as the hub — MCPs are the bridges to external tools

For Designers

Top MCPs for Designers

The most valuable MCPs to enable in your setup

F

Figma MCP

Design extraction & code generation

Share a Figma URL and Claude reads the design specs, takes screenshots, and generates matching code. The most essential MCP for design-to-code workflows.

Read designs Screenshots Design tokens

N

Notion MCP

Docs, wikis & project context

Access Notion pages and databases directly. Claude can read project briefs, design specs docs, and meeting notes to understand context while coding.

Read pages Search docs Create pages

M

Miro MCP

Boards, diagrams & flows

Read Miro boards for user flows, diagrams, and workshop outputs. Claude can use these as context when building features that match your mapped-out flows.

Read boards Create diagrams

N

Netlify MCP

Deploy & host prototypes

Deploy your prototypes and HTML files to a live URL with one command. Share interactive prototypes with stakeholders instantly — no dev setup needed.

Deploy sites Live URLs

How to Enable MCPs

1

Open Settings

In Claude Code, MCPs are configured in the .claude.json file in your project.

2

Add MCP Server

Add the MCP server configuration with the server name, command, and any required API keys.

3

Start Using

Restart Claude Code — the MCPs are now available. Just share a Figma link or ask about a Notion page.

Figma MCP Setup

Setting Up Figma MCP

Step-by-step: connect Claude Code to your Figma designs

1

Get a Figma Access Token

Go to Figma Settings → Personal Access Tokens and generate a new token. Copy it — you'll need it in the next step.

              Token:
              figd_xxxxxxxxxxxxxxxx
            

2

Add to Your Project Config

Open .claude.json in your project root and add the Figma MCP server config:

// .claude.json
{
  "mcpServers": {
    "figma": {
      "command": "npx figma-developer-mcp",
      "env": {
        "FIGMA_API_KEY": "figd_xxxx"
      }
    }
  }
}

3

Restart Claude Code

Close and reopen the Claude Code panel in your IDE. It will detect the new MCP server and connect to Figma automatically.

✓

Share a Figma Link & Go!

Paste any Figma URL into Claude Code. It will read the design specs, capture a screenshot, and generate matching code — all in one step.

✦ Claude Code

Build this component from Figma:
figma.com/design/abc123...

Reading design from Figma...

✓ Extracted layout specs

✓ Captured screenshot

✓ Read design tokens

✓ Generated Card.tsx

🎨

Figma → Code

One link in, production-ready component out

Miro MCP Setup

Setting Up Miro MCP

Connect Claude Code to your Miro boards, diagrams, and user flows

1

Get a Miro API Token

Go to miro.com/app/settings → Your apps → Create new app. Enable the required scopes (boards:read, boards:write) and copy the access token.

              Token:
              miro_xxxxxxxxxxxxxxxx
            

2

Add to Your Project Config

Add the Miro MCP server alongside your existing MCPs in .claude.json:

// .claude.json
{
  "mcpServers": {
    // ...figma config above...
    "miro": {
      "command": "npx @anthropic/miro-mcp",
      "env": {
        "MIRO_API_KEY": "miro_xxxx"
      }
    }
  }
}

3

Restart Claude Code

Close and reopen the Claude Code panel. It will pick up the new Miro MCP server automatically.

✓

Reference a Miro Board & Go!

Ask Claude to read a Miro board or share a board URL. It will pull in diagrams, stickies, user flows, and tables to use as context while coding.

✦ Claude Code

Read the user flow from our Miro board and build the checkout steps

Reading Miro board...

✓ Found 5 flow steps

✓ Extracted sticky notes

✓ Read connector logic

✓ Generated Checkout.tsx

Best for

● User flow diagrams

● Workshop output / stickies

● Architecture diagrams

● Journey maps

Section 5

The Workflow

How the three tools work together — Claude Code lives inside the IDE

GitHub

Cloud storage & review

← Pull

Push →

IDE

VS Code or Cursor

Code Editor

export function Dashboard() {
  return (
    <Card title="AUM"/>
  )
}

You write & review code here

Claude Code

Build a dashboard with AUM card

✓ Created Dashboard.tsx using your existing Card component

AI assistant lives here

✦ Claude Code runs as an extension inside the IDE — not a separate app

GitHub

Stores code in the cloud. The team pulls from and pushes to it.

IDE

Your workspace. Where you see, edit, and run the code locally.

Claude Code

Lives inside the IDE. Generates and edits code based on your instructions.

Demo: Step 1 of 6

Clone the Project & Install Dependencies

First time? Clone the repo. Then install the packages the project needs to run.

Option A: Terminal Commands Manual

Step 1 — Clone
$ git clone github.com/team/client-360
$ cd client-360
Step 2 — Install & Run
$ npm install
added 847 packages in 32s
$ npm run dev
✓ localhost:3000

Recommended

Option B: Just Tell Claude Code

Clone the client-360-dashboard repo, install all dependencies, and start the dev server

✓ Cloned github.com/team/client-360-dashboard

✓ Installed 847 packages

✓ Dev server running at localhost:3000

All set! The project is running. What would you like to build?

What just happened?

✓ Downloaded the full project from GitHub

✓ Installed all libraries (React, Tailwind, etc.)

✓ Started the local dev server at localhost:3000

Why use Claude Code for this?

➤ No need to memorize terminal commands

➤ Describe what you want in plain English

➤ Claude handles errors automatically (wrong Node version, missing tools, etc.)

Demo: Step 2 of 6

Setting Up API Keys

Some projects need secret keys to connect to services like Figma, APIs, or databases. These go in a .env file.

What is a .env file?

A .env file stores secret keys and passwords that the project needs to connect to external services. It's like a keychain for the project.

Important: This file is never pushed to GitHub — it stays private on your computer. Each team member creates their own.

Manual approach

Copy .env.example → .env and fill in your keys:

$ cp .env.example .env
# Then edit .env and add your keys:
GITHUB_TOKEN=ghp_xxxxx
FIGMA_API_KEY=figd_xxxxx
MIRO_API_KEY=miro_xxxxx

Easier

With Claude Code

Set up the .env file for this project. My GitHub token is ghp_xxxxx, Figma token is figd_xxxxx, and Miro token is miro_xxxxx

✓ Copied .env.example to .env

✓ Added GitHub, Figma, and Miro tokens

✓ All environment variables configured

Where do I get these keys?

From GitHub Settings

1. Go to github.com → Settings (click your avatar, top-right)

2. Scroll to Developer Settings → Personal Access Tokens → Tokens (classic)

3. Click Generate new token, give it a name, select scopes (repo, read:org)

4. Copy the token immediately — you won't see it again!

Other services

F

Figma
Settings → Access Tokens

M

Miro
Settings → Your Apps

?

Others
Check README or ask team lead

Demo: Step 3 of 6

Mock Data & Live Preview

See your changes instantly — Claude generates realistic data and the local server updates in real-time

1

Start the local server

$ npm run dev
Local: http://localhost:3000
✓ Ready in 1.2s

or

Tell Claude: "Start the dev server"

✓ Server running at localhost:3000

2

Add mock data & iterate live — changes appear instantly in your browser

✦ Claude Code

Add mock data for the portfolio dashboard — use realistic AUM figures, client names, and performance numbers for MENA wealth management

I'll create realistic mock data for the dashboard:

✓ Created mockData.ts with 12 client profiles

✓ AUM range: $2.4M – $180M (HNW/UHNW)

✓ Added portfolio allocation breakdowns

✓ Connected to Dashboard component

Change the total AUM to $4.2B and make the trend +8.3%

✎ Updated totalAUM: "$2.4B" → "$4.2B"

✎ Updated trend: "+12.5%" → "+8.3%"

✓ Changes saved — check your browser!

localhost:3000

Portfolio Dashboard

Total AUM

$4.2B

+8.3%

Active Clients

847

+24 this month

YTD Return

14.2%

vs 11.8% benchmark

Client

AUM

Return

Risk

Al Maktoum Family Office

$180M

+16.4%

Medium

Rashid Holdings Ltd

$92M

+11.2%

Low

Emirates Trust PJSC

$67M

-2.1%

High

Hot reload — updates instantly when Claude saves a file

Hot Reload

Every time Claude saves a file, the browser refreshes automatically. You see changes in under a second — no manual refresh needed.

Iterate in Conversation

Keep your browser open next to the IDE. Tell Claude "change the AUM to $4.2B" — watch it update live in your browser.

Demo: Step 4 of 6

Connect Figma & Generate Code

Share a Figma link with Claude Code — it reads the design and builds the component

✦ Claude Code client-360-dashboard

Build the portfolio overview card from this Figma design:
figma.com/design/Kx8f3.../Client-360?node-id=2401-8847

I'll extract the design from Figma and build the component.

✓ Reading Figma node 2401-8847...

✓ Captured screenshot for visual reference

✓ Detected: Card with header, 3 metric rows, sparkline chart

✓ Found existing Card, Metric components — reusing them

✎ Created PortfolioOverview.tsx

✎ Updated Dashboard.tsx to include new component

The card looks good but the header font should be 600 weight not 700, and the gap between metrics is 16px not 20px. Fix those.

✎ Updated font-weight: 700 → 600 in header

✎ Updated gap-5 → gap-4 (20px → 16px) between metrics

✓ Both changes applied. Check localhost:3000 to verify.

Figma MCP

Reads the design directly — no copy-pasting specs

Iterate in English

Give feedback like you would to a developer

Reuses existing code

Finds and reuses your project's components

Demo: Step 5 of 6

Design QA Against Figma

Before pushing, run a design audit to compare the built UI against the original Figma specs

✦ Claude Code client-360-dashboard

Run a design QA on the PortfolioOverview component against the Figma source:
figma.com/design/Kx8f3.../Client-360?node-id=2401-8847

Running design QA audit — spawning parallel agents to compare your implementation against Figma.

✓

Figma Spec Agent — Extracting design tokens, spacing, typography...

✓

Implementation Scanner — Reading computed styles from component...

✓

Comparison Engine — Matching specs against implementation...

QA Report — PortfolioOverview.tsx

Property

Figma Spec

Implementation

Status

Card border-radius

12px

✓ Pass

Header font-weight

600

✓ Pass

Card padding

24px

20px

✗ Fail

Metric label color

#8b949e

#6e7681

✗ Fail

Metric gap

16px

✓ Pass

3 passed

2 deviations

Full report saved to qa-reports/

Fix both deviations to match the Figma specs

✎ Updated padding: p-5 → p-6 (20px → 24px)

✎ Updated label color: text-muted → text-secondary (#8b949e)

✓ Both deviations fixed. Re-run QA to verify, or push when ready.

Reads Figma Specs

Extracts exact spacing, colors, and typography from the source design

Catches Deviations

Compares every property side-by-side and flags mismatches

Auto-Fixes Issues

Tell Claude to fix the deviations and it updates the code instantly

Demo: Step 6 of 6

Push Changes & Create a PR

Happy with the result? Push to GitHub and request a review — all through Claude Code

✦ Claude Code client-360-dashboard

Commit my changes and push to GitHub

✓ Created branch feature/portfolio-overview

✓ Staged 2 files: PortfolioOverview.tsx, Dashboard.tsx

✓ Committed: "feat: add portfolio overview card from Figma design"

✓ Pushed to GitHub

Create a pull request for the team to review

Created your pull request:

Open Add portfolio overview card

feature/portfolio-overview → main · 2 files changed

Adds the PortfolioOverview component based on the Figma design (node 2401-8847). Uses existing Card and Metric components. Includes header, 3 metric rows, and sparkline chart.

ready for review figma-verified

github.com/team/client-360-dashboard/pull/42

Clone

→

npm install

→

F Figma link

→

✦ Claude generates

→

Review & iterate

→

Push & PR

↻

After the PR

CI Checks & What Happens Next

After you push a PR, GitHub automatically runs checks before anyone reviews your code

What is CI?

Continuous Integration (CI) is an automated system that runs checks on your code every time you create or update a PR.

Figma analogy: Like Figma's "Inspect" panel checking your design for issues before handoff — but for code, and fully automatic.

Open Add portfolio overview card

feature/portfolio-overview → main

Automated Checks

✓

Build

Code compiles without errors

12s

✓

Lint

Code style and formatting rules pass

4s

✓

Tests

All automated tests pass

28s

✓

Preview Deploy

Live preview URL generated for reviewers

View ↗

✓ All checks passed Ready for review

GitHub CLI (gh) — Install This in Your IDE

A command-line tool that lets Claude Code interact with GitHub directly

The GitHub CLI lets you create PRs, check CI status, view review comments, and merge — all from inside the IDE terminal. Claude Code uses it behind the scenes to manage your PRs.

✓ Create PRs

✓ Check CI status

✓ View comments

✓ Merge PRs

Install & Login

# Install on Mac
$ brew install gh
# Login to your account
$ gh auth login
✓ Logged in as doaa

Or tell Claude: "Install the GitHub CLI and log me in"

You Have a New Teammate

Claude Code is always there inside your IDE — ready to help with anything. No question is too small, no task too complex. Just ask.

Ask Anything

"What does this component do?" — Claude explains code in plain English, no jargon.

Make Mistakes Freely

Broke something? Claude can undo changes, fix errors, and explain what went wrong.

Grow Your Skills

The more you use it, the more you'll understand code. Claude teaches as it builds.

✦ Prompt Ideas

What Can You Ask Claude?

Copy-paste these prompts to get started — or use them as inspiration

Design to Code

"Build this screen from the Figma link: [paste URL]. Match the spacing and colors exactly."

"Create a responsive card component with a header, 3 metric rows, and a chart placeholder."

Design QA

"Compare this component against the Figma design [URL] and list every spacing, color, and typography deviation."

"Run a design QA audit and fix all the deviations automatically."

Exploration & Prototyping

"Show me 3 different layout options for a client portfolio dashboard. Make them interactive HTML files."

"Create a quick prototype of the onboarding flow with realistic data and transitions."

Research & Analysis

"Research how Bloomberg, Refinitiv, and Wealthsimple handle portfolio performance views. Generate an HTML comparison report."

"Run a UX heuristic review on the current trading flow and suggest improvements."

Git & Workflow

"Commit my changes with a clear message and push to GitHub."

"Create a pull request for the team to review. Include a summary of what changed and why."

Understanding Code

"Explain how the Dashboard component works. I'm a designer, keep it simple."

"What design tokens and colors does this project use? List them all."

Thank You

Open your IDE, type your first prompt, and start building.

Claude is ready when you are.