Figma + Claude
MCP Integration

# Check Node.js version (must be 18+)
$ node --version
v20.11.0  # ✓ Good — v18 or higher

# Check npm (comes bundled with Node)
$ npm --version
10.2.4   # ✓ Good — any recent version works

# Check npx (this is what the MCP server uses)
$ npx --version
10.2.4   # ✓ Good — npx must be available

# Install nvm (macOS / Linux)
$ curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash

# Close and reopen your terminal, then:
$ nvm install --lts
$ nvm use --lts
$ node --version
v20.11.0

# On Windows, use nvm-windows instead:
# Download from github.com/coreybutler/nvm-windows
$ nvm install lts
$ nvm use lts

# Add to your shell profile (one-time setup)
# For Zsh (default on modern macOS):
$ echo 'export FIGMA_PERSONAL_ACCESS_TOKEN="figd_xYz123..."' >> ~/.zshrc
$ source ~/.zshrc

# For Bash (Linux default):
$ echo 'export FIGMA_PERSONAL_ACCESS_TOKEN="figd_xYz123..."' >> ~/.bashrc
$ source ~/.bashrc

# Verify it's set:
$ echo $FIGMA_PERSONAL_ACCESS_TOKEN
figd_xYz123...  # ✓ You should see your token

# Set permanently for your user account:
PS> [System.Environment]::SetEnvironmentVariable(
    "FIGMA_PERSONAL_ACCESS_TOKEN",
    "figd_xYz123...",
    "User"
)

# Or via System Properties:
# Win+R → sysdm.cpl → Advanced → Environment Variables
# Add a new User variable with:
#   Name:  FIGMA_PERSONAL_ACCESS_TOKEN
#   Value: figd_xYz123...

# Restart your terminal, then verify:
PS> echo $env:FIGMA_PERSONAL_ACCESS_TOKEN
figd_xYz123...

# Create a .env file in your project root
FIGMA_PERSONAL_ACCESS_TOKEN=figd_xYz123AbCdEfGhIjKlMnOp

# Run the server directly to test it works
$ npx -y figma-developer-mcp --figma-api-key=YOUR_TOKEN

# You should see output like:
Figma MCP Server running on stdio
# Press Ctrl+C to stop — this was just a test

# Clone the official repository
$ git clone https://github.com/anthropics/figma-developer-mcp.git
$ cd figma-developer-mcp

# Install dependencies
$ npm install

# Build the TypeScript source
$ npm run build

# Test it runs correctly
$ node dist/index.js --figma-api-key=YOUR_TOKEN
Figma MCP Server running on stdio

{
  "mcpServers": {
    "figma": {
      "command": "npx",
      "args": [
        "-y",
        "figma-developer-mcp",
        "--figma-api-key=YOUR_TOKEN_HERE"
      ]
    }
  }
}

{
  "mcpServers": {
    "figma": {
      "command": "npx",
      "args": [
        "-y",
        "figma-developer-mcp"
      ],
      "env": {
        "FIGMA_PERSONAL_ACCESS_TOKEN": "YOUR_TOKEN_HERE"
      }
    }
  }
}

{
  "mcpServers": {
    "figma": {
      "command": "node",
      "args": [
        "/absolute/path/to/figma-developer-mcp/dist/index.js",
        "--figma-api-key=YOUR_TOKEN_HERE"
      ]
    }
  }
}

{
  "mcpServers": {
    "figma": {
      "command": "npx",
      "args": ["-y", "figma-developer-mcp",
        "--figma-api-key", "YOUR_TOKEN"
      ]
    }
  }
}

# Add the Figma MCP server to your project
$ claude mcp add figma -- npx -y figma-developer-mcp \
    --figma-api-key YOUR_TOKEN

# Or add it globally (available in all projects)
$ claude mcp add --scope user figma -- npx -y figma-developer-mcp \
    --figma-api-key YOUR_TOKEN

# List all configured MCP servers to verify
$ claude mcp list
figma: npx -y figma-developer-mcp --figma-api-key=figd_...

/* Full file URL */
https://www.figma.com/design/FILE_KEY/File-Name

/* URL with specific page */
https://www.figma.com/design/FILE_KEY/File-Name?node-id=PAGE_ID

/* URL with specific frame/component */
https://www.figma.com/design/FILE_KEY/File-Name?node-id=123:456

/* The FILE_KEY is the important part — it's the unique */
/* identifier Claude uses to access your file via the API */

# Inside a Claude Code session, type:
/mcp

# You should see output like:
MCP Servers:
  figma — connected
    Tools: get_file, get_styles, get_components, get_node, ...
    Status: running

You: Can you read my Figma file and tell me what's in it?
  Here's the URL: https://www.figma.com/design/YOUR_FILE_KEY/Your-File-Name

/* If the connection works, Claude will respond with: */
Claude: I'll read your Figma file now...
  ✓ Successfully connected to Figma!
  Your file "Your File Name" contains:
  - 3 pages: Home, Components, Tokens
  - 24 frames across all pages
  - 12 published components
  ...

/* If the connection fails, you'll see something like: */
Claude: I tried to read the file but encountered an error:
  Error: 403 Forbidden — The token doesn't have access
  to this file, or the token is invalid.

# 1. Test your token directly
$ curl -s -H "X-Figma-Token: YOUR_TOKEN" \
    https://api.figma.com/v1/me | head -5
{"id":"123","email":"you@company.com","handle":"YourName"}
# ✓ Token is valid if you see your info

# 2. Test npx is available and can find the package
$ npx -y figma-developer-mcp --help
# Should print help info, not "command not found"

# 3. Find the absolute path to npx (for config)
$ which npx
/usr/local/bin/npx
# Use this full path in your config if "npx" alone doesn't work

# 4. Validate your config JSON
$ cat ~/Library/Application\ Support/Claude/claude_desktop_config.json | python3 -m json.tool
# If it prints formatted JSON, syntax is valid
# If it shows "Expecting..." error, you have a JSON syntax issue

/* Copy and customize this prompt for your needs */

Read this Figma file: [PASTE_FIGMA_URL]

Context:
- Framework: React with TypeScript
- Styling: Tailwind CSS (v3.4)
- Component library: Our custom design system
  at "src/components/ui/"
- Design tokens are in "src/tokens.css"

Please:
1. Convert the "Dashboard Layout" frame to code
2. Use our existing components where they match
   (Button, Card, Avatar, Badge)
3. Preserve all spacing using our 4px grid
4. Extract any new colors as CSS custom properties
5. Make it responsive (mobile-first)
6. Add meaningful component/prop names

You: Read this Figma file:
  https://www.figma.com/design/AbC123/Acme-Design-System

  Find the "Pricing Card" component on the Components page.
  Convert it to a React + TypeScript component using
  Tailwind CSS.

  Requirements:
  - Make it accept props for: title, price, features list,
    CTA button text, and a "popular" boolean for highlight
  - Use our color tokens: primary=#6366F1, surface=#1E1B2E
  - The card should be responsive
  - Export as a named export

import React from 'react';

interface PricingCardProps {
  title: string;
  price: string;
  period?: string;
  features: string[];
  ctaText: string;
  popular?: boolean;
  onCtaClick?: () => void;
}

export const PricingCard: React.FC<PricingCardProps> = ({
  title,
  price,
  period = '/month',
  features,
  ctaText,
  popular = false,
  onCtaClick,
}) => (
  <div
    className={`
      relative rounded-2xl p-8
      ${popular
        ? 'bg-[#6366F1] text-white ring-2 ring-[#6366F1]'
        : 'bg-[#1E1B2E] text-gray-100 ring-1 ring-white/10'}
      flex flex-col gap-6
      transition-transform hover:-translate-y-1
    `}
  >
    {popular && (
      <span className="absolute -top-3 left-1/2
        -translate-x-1/2 bg-amber-400
        text-black text-xs font-bold
        px-3 py-1 rounded-full">
        Most Popular
      </span>
    )}

    <h3 className="text-lg font-semibold
      tracking-tight">
      {title}
    </h3>

    <div className="flex items-baseline gap-1">
      <span className="text-4xl font-extrabold
        tracking-tight">
        {price}
      </span>
      <span className="text-sm opacity-70">
        {period}
      </span>
    </div>

    <ul className="flex flex-col gap-3">
      {features.map((feat, i) => (
        <li key={i}
          className="flex items-center gap-2
            text-sm">
          <span className="text-emerald-400">
            ✓
          </span>
          {feat}
        </li>
      ))}
    </ul>

    <button
      onClick={onCtaClick}
      className={`
        mt-auto w-full py-3 px-6 rounded-xl
        font-semibold text-sm
        transition-colors cursor-pointer
        ${popular
          ? 'bg-white text-[#6366F1] hover:bg-gray-100'
          : 'bg-[#6366F1] text-white hover:bg-[#5558E3]'}
      `}
    >
      {ctaText}
    </button>
  </div>
);

You: I have this legacy dashboard HTML. I also have our
  design system in Figma.

  Legacy code: [paste or share file path]
  Figma DS: https://figma.com/design/AbC123/Acme-DS

  Please:
  1. Analyze every UI element in the legacy HTML
  2. Read our Figma component library via MCP
  3. Create a detailed component mapping table
  4. Flag elements that have NO match in our DS
  5. Write a Figma assembly spec that a designer
     can follow to rebuild this page

/* Claude reads both sources and produces: */

===== COMPONENT MAPPING REPORT =====

File analyzed: dashboard.html (347 lines)
Figma library: Acme Design System v2.4
Components available: 47

--- DIRECT MATCHES (14 elements) ---

 #  | HTML Element           | Figma Component
----+------------------------+----------------------
 1  | .btn.btn-primary       | Button/Primary/MD
 2  | .btn.btn-outline-secondary | Button/Secondary/MD
 3  | .card                  | Card/Elevated
 4  | .form-control (text)   | Input/Text/Default
 5  | .form-control (search) | Input/Search/Default
 6  | .badge.bg-success      | Badge/Status/Success
 7  | .badge.bg-warning      | Badge/Status/Warning
 8  | .navbar                | Navigation/TopBar
 9  | .nav-sidebar           | Navigation/Sidebar
10  | .avatar-circle         | Avatar/Circle/MD
11  | .dropdown-menu         | Menu/Dropdown
12  | .table                 | DataTable/Default
13  | .breadcrumb            | Breadcrumb/Default
14  | .progress-bar          | ProgressBar/Linear

--- PARTIAL MATCHES (3 elements) ---

 15 | .stat-widget        | Card/Metric
     → NOTE: HTML has icon left-aligned;
       Figma has icon top. Suggest using
       Card/Metric/Horizontal variant

 16 | .chart-container    | NO direct match
     → RECOMMEND: Create "ChartWrapper"
       component in Figma using Card/Default
       with 24px internal padding

 17 | custom <footer>     | NO direct match
     → RECOMMEND: Use Stack/Horizontal with
       Text/Caption for copyright line

--- FIGMA ASSEMBLY SPEC ---

Page structure (top to bottom):
├─ Navigation/TopBar
│  ├─ Logo slot: Acme logo
│  ├─ Search: Input/Search/Default (width: fill)
│  └─ Right slot: Avatar/Circle/SM + Menu/Dropdown
├─ Main Layout: Auto-layout Horizontal
│  ├─ Navigation/Sidebar (width: 260px, fixed)
│  │  ├─ NavItem × 6 (icons: Home, Analytics, ...)
│  │  └─ Divider + NavItem "Settings"
│  └─ Content Area: Auto-layout Vertical, gap=24
│     ├─ Breadcrumb/Default
│     ├─ Metrics Row: Auto-layout Horizontal, gap=16
│     │  ├─ Card/Metric (Revenue) ×1
│     │  ├─ Card/Metric (Users) ×1
│     │  ├─ Card/Metric (Orders) ×1
│     │  └─ Card/Metric (Conversion) ×1
│     ├─ Card/Elevated (contains ChartWrapper)
│     │  ├─ Heading/H3: "Revenue Over Time"
│     │  └─ Chart placeholder (540×280)
│     └─ Card/Elevated (contains DataTable)
│        ├─ Heading/H3: "Recent Orders"
│        └─ DataTable/Default (6 cols, 10 rows)
└─ Footer (Stack/Horizontal)

You: Our designer has finished rebuilding the dashboard
  in Figma using our Acme DS components. Here's the
  redesigned page:
  https://figma.com/design/XyZ789/Dashboard-Redesign

  Please convert this to production React + TypeScript.

  Requirements:
  - Import components from "@acme/ui"
  - Use our spacing tokens: $space-xs=4, $space-sm=8,
    $space-md=16, $space-lg=24, $space-xl=32
  - Follow our file conventions:
    one component per file, PascalCase names
  - Include TypeScript interfaces for all props
  - Make the sidebar collapsible on mobile
  - Use CSS Modules for any custom styles
  - Include the data-fetching hooks (use SWR)

import React, { useState } from 'react';
import useSWR from 'swr';
import {
  TopBar,
  Sidebar,
  SidebarItem,
  Card,
  MetricCard,
  DataTable,
  Breadcrumb,
  SearchInput,
  Avatar,
  Stack,
} from '@acme/ui';
import { RevenueChart } from './RevenueChart';
import { fetcher } from '@/lib/fetcher';
import styles from './DashboardPage.module.css';

interface MetricData {
  label: string;
  value: string;
  change: number;
  trend: 'up' | 'down';
}

export const DashboardPage = () => {
  const [sidebarOpen, setSidebarOpen] =
    useState(true);
  const { data: metrics } =
    useSWR<MetricData[]>('/api/metrics', fetcher);
  const { data: orders } =
    useSWR('/api/orders/recent', fetcher);

  return (
    <div className={styles.layout}>
      <TopBar>
        <TopBar.Logo src="/acme-logo.svg" />
        <SearchInput
          placeholder="Search anything..."
          className={styles.searchExpand} />
        <Avatar
          size="sm"
          src="/me.jpg"
          fallback="IS" />
      </TopBar>

      <div className={styles.body}>
        <Sidebar
          collapsed={!sidebarOpen}
          onToggle={()=>setSidebarOpen(!sidebarOpen)}>
          <SidebarItem icon="home"
            active>Dashboard</SidebarItem>
          <SidebarItem icon="chart"
            >Analytics</SidebarItem>
          <SidebarItem icon="users"
            >Customers</SidebarItem>
          <SidebarItem icon="box"
            >Products</SidebarItem>
          <Sidebar.Divider />
          <SidebarItem icon="settings"
            >Settings</SidebarItem>
        </Sidebar>

        <main className={styles.content}>
          <Breadcrumb
            items={[
              { label: 'Home', href: '/' },
              { label: 'Dashboard' },
            ]} />

          <Stack direction="horizontal"
            gap="md" wrap>
            {metrics?.map((m) => (
              <MetricCard
                key={m.label}
                label={m.label}
                value={m.value}
                change={m.change}
                trend={m.trend} />
            ))}
          </Stack>

          <Card variant="elevated"
            padding="lg">
            <Card.Header>
              Revenue Over Time
            </Card.Header>
            <RevenueChart />
          </Card>

          <Card variant="elevated"
            padding="lg">
            <Card.Header>
              Recent Orders
            </Card.Header>
            <DataTable
              data={orders ?? []}
              columns={orderColumns}
              sortable
              pagination={{ pageSize: 10 }} />
          </Card>
        </main>
      </div>
    </div>
  );
};

You: Read our Figma design system at [URL].
  Extract ALL design tokens and output them as:
  1. CSS custom properties (:root block)
  2. A Tailwind theme extension config

  Include: colors, typography, spacing, border-radius,
  shadows, and any Figma variables you find.

/* Auto-extracted from Figma: Acme Design System v2.4 */
/* Generated via Claude + Figma MCP */

:root {
  /* --- Colors: Primary --- */
  --color-primary-50:  #EEF2FF;
  --color-primary-100: #E0E7FF;
  --color-primary-500: #6366F1;
  --color-primary-600: #4F46E5;
  --color-primary-900: #312E81;

  /* --- Colors: Semantic --- */
  --color-success: #10B981;
  --color-warning: #F59E0B;
  --color-danger:  #EF4444;
  --color-info:    #3B82F6;

  /* --- Colors: Surface --- */
  --color-bg:       #0F0D1A;
  --color-surface:  #1E1B2E;
  --color-elevated: #2A2640;
  --color-border:   rgba(255,255,255,0.08);

  /* --- Typography --- */
  --font-sans: 'Inter', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
  --text-xs:   0.75rem;   /* 12px */
  --text-sm:   0.875rem;  /* 14px */
  --text-base: 1rem;      /* 16px */
  --text-lg:   1.125rem;  /* 18px */
  --text-xl:   1.25rem;   /* 20px */
  --text-2xl:  1.5rem;    /* 24px */
  --text-3xl:  1.875rem;  /* 30px */

  /* --- Spacing (4px grid) --- */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-6:  24px;
  --space-8:  32px;
  --space-12: 48px;
  --space-16: 64px;

  /* --- Border Radius --- */
  --radius-sm:   6px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-full: 9999px;

  /* --- Shadows --- */
  --shadow-sm:  0 1px 2px rgba(0,0,0,0.3);
  --shadow-md:  0 4px 12px rgba(0,0,0,0.25);
  --shadow-lg:  0 8px 24px rgba(0,0,0,0.3);
}

/* PHASE 1: STUDY (run this first) */

Read this Figma file via MCP:
[FIGMA_URL]

Before writing any code, output a complete
design specification including:

1. COLOR PALETTE: Every unique color used,
   grouped by purpose (backgrounds, text, borders,
   accents, states). Use exact hex values.

2. TYPOGRAPHY SCALE: Every text style — font
   family, weight, size, line-height, letter-spacing,
   and where each is used.

3. SPACING MAP: All unique padding, margin, and
   gap values. Identify the base grid unit.

4. COMPONENT INVENTORY: Every distinct UI element
   (buttons, cards, inputs, etc) with their exact
   visual properties.

5. EFFECTS: All shadows, gradients, blurs, border
   radii, and opacity values.

6. LAYOUT STRUCTURE: Page width, section layout
   (flex/grid), column counts, responsive behavior
   inferred from constraints.

Output as a structured spec document.
Do NOT write code yet.

/* PHASE 2: GENERATE (run after reviewing spec) */

Now generate the HTML/CSS using exactly the spec
above. Requirements:

- Use CSS custom properties for ALL design tokens
  (colors, spacing, radii, shadows). Define them in
  a :root block at the top.
- Match the Figma layout precisely:
  same flex directions, same gaps, same alignment.
- Preserve exact values — do NOT round 18px to
  16px, do NOT change #1E1B2E to #1a1a2e.
- Include hover states and transitions that
  match the Figma interaction specs (if present).
- Use semantic HTML5 elements.
- Make it responsive following the Figma constraints.
- Single file: inline all CSS in a <style> block.
- Load the exact Google Fonts referenced in Figma.

/* PHASE 3: REFINE (run after visual comparison) */

I compared your output to the Figma design.
Fix these specific differences:
[LIST EXACT DIFFERENCES YOU SPOTTED]

/* Provide as much source material as possible */

I want to create an HTML page that matches the visual
style of a reference website exactly.

Reference materials I'm providing:

1. Screenshot: [attached image]
2. Source HTML: [pasted or attached]
3. Key CSS values (from DevTools):
   - Background: #0a0a0a
   - Primary text: #fafafa
   - Secondary text: #a1a1aa
   - Accent color: #6366f1
   - Card background: #18181b
   - Border color: rgba(255,255,255,0.08)
   - Font: Inter, 400/500/600/700
   - Base size: 16px, line-height: 1.6
   - Border radius: cards=12px, buttons=8px
   - Content max-width: 1200px
   - Section padding: 80px vertical
   - Card shadow: 0 4px 24px rgba(0,0,0,0.2)

Instructions:

- Match the visual style exactly. Use the CSS
  values I provided as the source of truth.
- Do NOT approximate or round any values.
- Replicate the layout structure: [describe layout]
- Include the same hover effects and transitions.
- Use CSS custom properties for all tokens.
- Single self-contained HTML file.
- Load fonts from Google Fonts CDN.

Content to use:
[Provide YOUR content — headings, text, images — that
should be styled in the reference site's visual language]

/* Claude reads both Figma files via MCP */

I have two Figma files. Please read both:

SOURCE (the design to restyle):
[FIGMA_URL_1]
Focus on the page/frame: "[Frame Name]"

REFERENCE (the target style to match):
[FIGMA_URL_2]
This is our design system / brand reference.

Please do the following:

1. ANALYZE both files. Extract the complete
   design token sets from BOTH — colors, typography,
   spacing, effects, component patterns.

2. CREATE A MAPPING between the source's visual
   properties and the reference's design tokens.
   Show me a table:
   | Source Property | Source Value | Reference Token |

3. GENERATE A REDESIGN SPEC that tells a designer
   exactly how to rebuild the SOURCE design using
   ONLY the REFERENCE's visual language:
   - Which reference colors replace which source colors
   - Which reference type styles replace which headings
   - Which reference components replace which elements
   - How spacing should change to match the ref grid

4. THEN GENERATE CODE that implements the source
   layout/content but with the reference's complete
   visual style applied. Every color, font, spacing,
   shadow, and radius should come from the reference.

The output should be indistinguishable in style
from a page designed natively in the reference system.

/* Provide both the code and your Figma library */

I have existing HTML/CSS code and I need to recreate
it faithfully in Figma using our component library.

My code: [paste HTML/CSS or share file]

Our Figma component library:
[FIGMA_LIBRARY_URL]

Please:

1. AUDIT MY CODE — list every visual element,
   its computed dimensions, colors, fonts, spacing.
   Be exhaustive. Include:
   - Exact pixel dimensions of each section
   - Every color value (backgrounds, text, borders)
   - Font properties for each text element
   - Spacing between all elements (margin + padding)
   - Border radius, shadows, opacity for every box
   - Layout type (flex/grid) with direction & gaps

2. READ THE FIGMA LIBRARY — catalog all components,
   their variants, and their visual properties.

3. MAP CODE → FIGMA COMPONENTS — for each coded
   element, specify exactly which Figma component
   (and which variant/size) to use. Where there's
   no exact match, specify overrides needed.

4. WRITE A FIGMA BUILD SPEC — a step-by-step
   assembly guide a designer can follow:

   Frame: "Dashboard" (1440×900)
     ├─ Auto-layout: Vertical, gap=0
     ├─ Child 1: Navigation/TopBar
     │   ├─ Width: Fill, Height: 64px
     │   ├─ Padding: 0 24px
     │   ├─ Background: #0F0D1A
     │   └─ Contents: [Logo] + [Spacer] + [Avatar/SM]
     ├─ Child 2: Auto-layout Horizontal, gap=0
     │   ├─ Child 2a: Sidebar (Width: 260px, Fill Y)
     │   └─ Child 2b: Main Content (Fill X, Fill Y)
     │       ├─ Padding: 32px
     │       ├─ Auto-layout: Vertical, gap=24
     │       └─ Children: [Metrics Row] [Chart Card] ...

   Include EVERY property needed to match the code.

/* BAD — vague, forces Claude to guess */
✗ "The header looks off."
✗ "The colors aren't quite right."
✗ "It doesn't feel the same."
✗ "Make it match better."

/* GOOD — surgical, one-shot fixes */
✓ "The hero heading should be font-weight 800,
   not 700. And the line-height should be 1.1,
   not 1.2."

✓ "Card background is #16161F but should be
   #1E1B2E. Border should be rgba(255,255,255,0.06)
   not rgba(255,255,255,0.1)."

✓ "The gap between metric cards is 16px but
   should be 20px. And each card should have
   padding 24px, not 20px."

✓ "The CTA button border-radius is 8px but should
   be 12px. Its box-shadow should be
   0 4px 14px rgba(99,102,241,0.4), not the
   current 0 2px 8px value."

✓ "The section padding is 64px top/bottom but
   should be 80px. And the max-width should be
   1140px, not 1200px."

The [section name] still doesn't match.

Here are the EXACT computed CSS values from the
reference (copied from DevTools):

.hero-container {
  max-width: 1140px;
  margin: 0 auto;
  padding: 96px 48px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
  background: #0a0a0f;
}

.hero-heading {
  font: 800 64px/1.08 "Inter";
  letter-spacing: -0.03em;
  color: #fafafa;
  text-align: center;
  max-width: 800px;
}

.hero-subtitle {
  font: 400 20px/1.6 "Inter";
  color: #a1a1aa;
  text-align: center;
  max-width: 580px;
}

Replace your current hero section CSS with these
EXACT values. Do not modify or "improve" them.

Read this Figma file: [URL]
Focus on frame: "[Frame Name]"

CRITICAL RULES:
- Extract and use EXACT color values (no rounding)
- Match EXACT font weights, sizes, and line heights
- Preserve EXACT spacing (padding, margin, gap)
- Replicate EXACT border-radius and shadow values
- Follow EXACT layout structure (flex/grid/auto-layout)

Output approach:
1. First output the design tokens as CSS variables
2. Wait for my confirmation
3. Then generate the full HTML with those tokens
4. Use semantic HTML5, single file, inline styles
5. Load exact Google Fonts from the design

I want to build a page that matches the visual style
of [WEBSITE_URL] but with my own content.

Here are the exact CSS values from the reference
(from DevTools):

Colors: [list every color]
Fonts: [family, weights, sizes]
Spacing: [section padding, card padding, gaps]
Effects: [shadows, radii, gradients]
Layout: [max-width, columns, breakpoints]

My content: [YOUR_CONTENT]

Apply the reference's visual language to my content.
Use CSS custom properties. Match the reference EXACTLY
on colors, typography, spacing, and effects.

Create a high-fidelity mockup page for [PURPOSE]
that visually matches the design language of
[REFERENCE].

I'm providing:
- Screenshot of the reference: [attached]
- Key CSS values: [pasted from DevTools]

Requirements:
- Match the reference's color palette EXACTLY
- Use the same typography system (font, weights, scale)
- Replicate the spacing rhythm (base unit + scale)
- Copy the component styling (cards, buttons, inputs)
- Include matching hover/transition effects
- Responsive: mobile-first with 768px/1024px breaks
- Self-contained single HTML file

My page content & structure:
[Describe your page sections and content]

I have existing code that needs to be restyled to
match our design system in Figma.

My current code: [paste or file path]

Our Figma design system: [FIGMA_URL]

Please via MCP:
1. Read the Figma DS and extract ALL tokens
2. Analyze my code's current styling
3. Generate UPDATED code that:
   - Keeps the same structure & functionality
   - Replaces ALL colors with DS tokens
   - Replaces ALL fonts with DS typography
   - Replaces ALL spacing with DS grid values
   - Replaces ALL effects with DS shadow/radius tokens
   - Uses DS component patterns where applicable

The output should look like it was built natively
with the design system from day one.

I compared your output to the reference. Fix these
specific mismatches (do NOT change anything else):

1. [Element]: [property] is [current]
   → should be [correct value]
2. [Element]: [property] is [current]
   → should be [correct value]
3. [Element]: [property] is [current]
   → should be [correct value]

Apply ONLY these changes. Do not "improve" or
adjust anything else in the code.

{
  "mcpServers": {
    "figma": {
      "command": "npx",
      "args": ["-y", "figma-developer-mcp"],
      "env": {
        // Each dev sets this env var locally
        "FIGMA_PERSONAL_ACCESS_TOKEN": "${FIGMA_PERSONAL_ACCESS_TOKEN}"
      }
    }
  }
}