Cursor 集成 Figma MCP 实现阅读理解原型图生成方案

最新推荐文章于 2025-10-20 16:08:39 发布

原创

最新推荐文章于 2025-10-20 16:08:39 发布 · 1.8k 阅读

21 ·

CC 4.0 BY-SA版权

文章标签：

#figma

Cursor 集成 Figma MCP 实现阅读理解原型图生成方案

整体架构设计

在 Cursor 中配置 Figma MCP 的完整方案

1. Cursor 配置文件 (`cursor.config.js`)

// cursor.config.js
module.exports = {
   
   
  figma: {
   
   
    // Figma MCP 配置
    mcp: {
   
   
      enabled: true,
      apiKey: process.env.FIGMA_API_KEY,
      fileId: "YOUR_FIGMA_FILE_ID",
      mcpFrameId: "MCP_FRAME_ID", // MCP 主框架 ID
      
      // MCP 组件映射
      components: {
   
   
        question: "COMPONENT_ID:QUESTION",
        option: "COMPONENT_ID:OPTION",
        feedback: "COMPONENT_ID:FEEDBACK",
        progress: "COMPONENT_ID:PROGRESS"
      },
      
      // 样式配置
      styles: {
   
   
        primaryColor: "#4361EE",
        secondaryColor: "#F1F5F9",
        fontFamily: "Inter"
      }
    },
    
    // 阅读理解题目处理配置
    readingComprehension: {
   
   
      maxQuestions: 10,
      optionsPerQuestion: 4,
      difficultyLevels: ["easy", "medium", "hard"]
    }
  },
  
  // 其他 Cursor 配置
  aiModel: "gpt-4-turbo",
  maxTokens: 4096,
  temperature: 0.3
}

2. Figma MCP 连接脚本 (`figma-mcp-integration.js`)

// figma-mcp-integration.js
const axios = require('axios');
const config = require('./cursor.config.js').figma;

class FigmaMCPIntegrator {
   
   
  constructor() {
   
   
    this.api = axios.create({
   
   
      baseURL: 'https://api.figma.com/v1/',
      headers: {
   
   
        'X-Figma-Token': config.mcp.apiKey
      }
    });
  }

  /**
   * 获取 MCP 框架结构
   */
  async getMCPStructure() {
   
   
    try {
   
   
      const response = await this.api.get(`files/${
     
     config.mcp.fileId}`);
      const mcpFrame = this.findMCPFrame(response.data.document);
      return {
   
   
        frame: mcpFrame,
        components: config.mcp.components
      };
    } catch (error) {
   
   
      console.error('获取 Figma MCP 失败:', error);
      throw error;
    }
  }

  /**
   * 在 Figma 文档树中查找 MCP 框架
   */
  findMCPFrame(node) {
   
   
    if (node.id === config.mcp.mcpFrameId) return node;
    
    if (node.children) {
   
   
      for (const child of node.children) {
   
   
        const found = this.findMCPFrame(child);
        if (found) return found;
      }
    }
    
    return null;
  }

  /**
   * 根据阅读理解数据生成原型
   */
  async generateReadingComprehensionPrototype(questions) {
   
   
    const operations = [];
    const baseX = 100;
    let currentY = 200;
    
    // 创建主框架
    const mainFrame = {
   
   
      type: 'FRAME',
      name