Figma设计稿转React代码：ClaudeCode+MCP实战教程

Claude Code + Figma MCP 入门教程：从设计稿到代码的智能桥梁

🎯 一、准备工作与环境搭建

1.1 账号准备

首先需要注册以下两个账号：

服务	网址	费用	备注
Claude Code	claude.ai	$20/月	需要Pro订阅才能使用MCP功能
Figma	figma.com	免费版可用	Starter计划即可

1.2 获取测试设计稿

如果你是设计师新手，可以使用Figma社区模板：

1. 访问 Figma社区
2. 搜索 "Button Component" 或 "UI Kit"
3. 复制一份到自己的账号中

🚀 二、方案一：官方MCP配置（5分钟快速上手）

2.1 启用Figma MCP

操作步骤：
1. 打开 Claude Code 网页版或桌面应用
2. 点击右下角 ⚙️ Settings（设置）
3. 选择 Integrations（集成）标签页
4. 在 MCP 商店中找到 Figma 并点击 Install（安装）

2.2 授权连接

点击安装后会弹出授权窗口，确认以下权限：

• ✅ 读取你的 Figma 文件
• ✅ 查看设计组件
• ❌ Claude 无法修改你的设计稿（安全保护）

2.3 基础使用示例

示例1：查看所有文件

在Claude对话框中输入：

请列出我Figma账户中的所有文件

预期返回：

我找到了以下Figma文件：
1. 📱 Mobile App Design (最后修改：2天前)
2. 🌐 Website Components (最后修改：1周前)
3. 🎨 Design System (最后修改：1个月前)

示例2：提取颜色系统

从文件"Website Components"中提取所有颜色，
生成CSS变量格式

AI生成的代码示例：

/* CSS变量定义 - 基于Figma设计系统  */
:root {
  /* 主色调 - Primary Colors */
  --color-primary-50: #EFF6FF;
  --color-primary-100: #DBEAFE;
  --color-primary-500: #3B82F6;
  --color-primary-600: #2563EB;
  --color-primary-900: #1E3A8A;
  
  /* 中性色 - Neutral Colors */
  --color-gray-50: #F9FAFB;
  --color-gray-200: #E5E7EB;
  --color-gray-500: #6B7280;
  --color-gray-900: #111827;
  
  /* 语义色 - Semantic Colors */
  --color-success: #10B981;
  --color-warning: #F59E0B;
  --color-error: #EF4444;
  --color-info: #3B82F6;
}

代码解释：

• :root 选择器定义全局CSS变量
• 变量名使用--前缀，遵循CSS自定义属性规范
• 颜色命名采用类型-名称-色值的层级结构
• 这些变量可以在整个项目中复用，确保设计一致性

示例3：生成基础按钮组件

查看"Website Components"中的主按钮设计，
生成React + Tailwind CSS代码

AI生成的React组件代码：

// Button.jsx - React按钮组件 
import React from 'react';

/**
 * 按钮组件属性接口
 * @typedef {Object} ButtonProps
 * @property {React.ReactNode} children - 按钮内容
 * @property {'primary' | 'secondary' | 'ghost'} variant - 按钮变体
 * @property {'sm' | 'md' | 'lg'} size - 按钮尺寸
 * @property {boolean} disabled - 是否禁用
 * @property {() => void} onClick - 点击事件处理函数
 */

export const Button = ({
  children,
  variant = 'primary',
  size = 'md',
  disabled = false,
  onClick
}) => {
  // 基础样式类
  const baseClasses = 'rounded-lg font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2';
  
  // 变体样式映射
  const variantClasses = {
    primary: 'bg-blue-600 hover:bg-blue-700 text-white focus:ring-blue-500',
    secondary: 'bg-gray-200 hover:bg-gray-300 text-gray-900 focus:ring-gray-500',
    ghost: 'bg-transparent hover:bg-gray-100 text-gray-700 border border-gray-300 focus:ring-gray-500'
  };
  
  // 尺寸样式映射
  const sizeClasses = {
    sm: 'px-3 py-1.5 text-sm',
    md: 'px-4 py-2 text-base',
    lg: 'px-6 py-3 text-lg'
  };
  
  // 禁用状态样式
  const disabledClasses = disabled ? 'opacity-50 cursor-not-allowed' : 'cursor-pointer';
  
  return (
    <button
      className={`
        ${baseClasses}
        ${variantClasses[variant]}
        ${sizeClasses[size]}
        ${disabledClasses}
      `}
      disabled={disabled}
      onClick={onClick}
      aria-disabled={disabled}
    >
      {children}
    </button>
  );
};

// 使用示例
export default function App() {
  return (
    <div className="space-x-4">
      <Button variant="primary" onClick={() => console.log('点击了主要按钮')}>
        主要按钮
      </Button>
      <Button variant="secondary" size="sm">
        次要按钮
      </Button>
      <Button variant="ghost" disabled>
        禁用按钮
      </Button>
    </div>
  );
}

代码详细解释：

1. 组件结构：

   • 导出一个名为Button的React函数组件
   • 使用TypeScript风格的JSDoc注释说明组件属性

2. 样式系统：

   • 采用Tailwind CSS工具类
   • baseClasses：基础样式（圆角、字体、过渡效果）
   • variantClasses：不同变体的颜色映射
   • sizeClasses：不同尺寸的间距和字体大小

3. 交互功能：

   • onClick：点击事件回调
   • disabled：禁用状态控制
   • aria-disabled：无障碍访问属性

4. 使用示例：

   • 展示了三种变体的使用方式
   • 演示了事件处理和状态传递

🔧 三、方案二：非官方MCP配置（高级功能）

3.1 获取Figma API Key

详细步骤：

1. 登录 Figma 网页版 (figma.com)
2. 点击右上角头像 → Settings（设置）
3. 找到 "Personal Access Tokens" 部分
4. 点击 "Generate new token"
5. 输入描述：Claude MCP Integration
6. 权限选择：File content - Read only
7. 复制生成的Token（只会显示一次！）

安全提示：

• Token格式类似：figd_Xy8h2kL9mN4pQ7rS...
• 像密码一样保管，不要提交到Git仓库
• 建议使用环境变量存储

3.2 安装非官方MCP服务器

打开终端（Terminal）执行：

# 方法1：使用npx直接运行（推荐给新手）
npx -y @modelcontextprotocol/server-figma

# 方法2：全局安装（适合频繁使用）
npm install -g @modelcontextprotocol/server-figma

命令解释：

• npx：Node.js包执行器，无需安装即可运行
• -y：自动确认所有提示
• @modelcontextprotocol/server-figma：非官方的Figma MCP服务器包

3.3 配置文件设置

根据你的操作系统，创建配置文件：

macOS/Linux系统：

# 创建配置文件目录
mkdir -p ~/.config/claude

# 创建配置文件
nano ~/.config/claude/mcp-settings.json

Windows系统：

# 在文件资源管理器地址栏输入
%APPDATA%\Claude\

# 创建mcp-settings.json文件

配置文件内容：

{
  "mcpServers": {
    "figma": {
      "command": "npx",
      "args": [
        "-y",
        "@modelcontextprotocol/server-figma"
      ],
      "env": {
        "FIGMA_PERSONAL_ACCESS_TOKEN": "你的_API_Token_粘贴在这里"
      }
    }
  }
}

进阶技巧：使用环境变量（更安全）

{
  "mcpServers": {
    "figma": {
      "command": "npx",
      "args": ["-y", "@modelcontextprotocol/server-figma"],
      "env": {
        "FIGMA_PERSONAL_ACCESS_TOKEN": "${FIGMA_TOKEN}"
      }
    }
  }
}

然后在系统环境变量中设置FIGMA_TOKEN。

3.4 测试连接

重启Claude Code后，在对话框中输入：

列出可用的MCP工具

预期返回：

当前已连接的MCP服务器：
✅ figma
   - get_file: 获取Figma文件内容
   - get_comments: 读取设计评论
   - get_components: 获取组件库
   - get_styles: 获取样式定义
所有服务运行正常！

🎨 四、实战案例：完整设计稿转代码

4.1 案例：电商商品卡片生成

步骤1：获取Figma文件ID

1. 在浏览器中打开你的Figma设计稿
2. 查看URL：https://www.figma.com/file/ABC123/Product-Design
3. ABC123就是文件ID

步骤2：编写详细提示词

分析Figma文件[ABC123]中名为"Product Card"的组件，
生成一个完整的React商品卡片组件，要求：

1. 技术栈：React + TypeScript + Tailwind CSS
2. 组件特性：
   - 响应式设计（移动端适配）
   - 图片懒加载
   - 悬停动画效果
   - 价格格式化显示
   - 购物车按钮交互
3. 包含完整的TypeScript接口定义
4. 添加详细的代码注释

步骤3：AI生成的完整代码

// ProductCard.tsx - 电商商品卡片组件 
import React, { useState } from 'react';

/**
 * 商品卡片组件属性接口
 */
interface ProductCardProps {
  /** 商品ID */
  id: string;
  /** 商品图片URL */
  imageUrl: string;
  /** 商品名称 */
  name: string;
  /** 商品描述 */
  description: string;
  /** 商品价格（单位：分） */
  price: number;
  /** 折扣价（可选） */
  discountPrice?: number;
  /** 商品评分（0-5） */
  rating: number;
  /** 是否显示购物车按钮 */
  showAddToCart?: boolean;
  /** 添加到购物车回调函数 */
  onAddToCart?: (productId: string) => void;
  /** 商品点击回调函数 */
  onClick?: (productId: string) => void;
}

/**
 * 电商商品卡片组件
 * 基于Figma设计稿自动生成的响应式组件
 */
export const ProductCard: React.FC<ProductCardProps> = ({
  id,
  imageUrl,
  name,
  description,
  price,
  discountPrice,
  rating,
  showAddToCart = true,
  onAddToCart,
  onClick
}) => {
  // 状态：是否显示加载动画
  const [isImageLoading, setIsImageLoading] = useState(true);
  // 状态：是否已添加到购物车
  const [isAddedToCart, setIsAddedToCart] = useState(false);
  
  /**
   * 格式化价格显示
   * @param amount 价格（分）
   * @returns 格式化后的价格字符串
   */
  const formatPrice = (amount: number): string => {
    return `¥${(amount / 100).toFixed(2)}`;
  };
  
  /**
   * 渲染评分星星
   * @param score 评分（0-5）
   * @returns 星星元素数组
   */
  const renderStars = (score: number) => {
    const stars = [];
    const fullStars = Math.floor(score);
    const hasHalfStar = score % 1 >= 0.5;
    
    // 满星
    for (let i = 0; i < fullStars; i++) {
      stars.push(
        <svg key={`full-${i}`} className="w-4 h-4 text-yellow-400 fill-current" viewBox="0 0 20 20">
          <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
        </svg>
      );
    }
    
    // 半星
    if (hasHalfStar) {
      stars.push(
        <svg key="half" className="w-4 h-4 text-yellow-400 fill-current" viewBox="0 0 20 20">
          <defs>
            <linearGradient id="half-gradient">
              <stop offset="50%" stopColor="#FBBF24" />
              <stop offset="50%" stopColor="#D1D5DB" />
            </linearGradient>
          </defs>
          <path fill="url(#half-gradient)" d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
        </svg>
      );
    }
    
    // 空星
    const emptyStars = 5 - stars.length;
    for (let i = 0; i < emptyStars; i++) {
      stars.push(
        <svg key={`empty-${i}`} className="w-4 h-4 text-gray-300 fill-current" viewBox="0 0 20 20">
          <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
        </svg>
      );
    }
    
    return stars;
  };
  
  /**
   * 处理添加到购物车
   */
  const handleAddToCart = () => {
    if (onAddToCart) {
      onAddToCart(id);
      setIsAddedToCart(true);
      
      // 3秒后重置按钮状态
      setTimeout(() => setIsAddedToCart(false), 3000);
    }
  };
  
  /**
   * 处理卡片点击
   */
  const handleCardClick = () => {
    if (onClick) {
      onClick(id);
    }
  };
  
  return (
    <div 
      className="
        group
        bg-white 
        rounded-xl 
        shadow-md 
        overflow-hidden 
        transition-all 
        duration-300
        hover:shadow-xl
        hover:-translate-y-1