基于Claude API与Figma插件实现智能代码生成(MCP)的工程实践

1次阅读

共计 2866 个字符，预计需要花费 8 分钟才能阅读完成。

在传统的前端开发流程中，设计师产出的 Figma 稿与工程师的代码实现之间总存在令人头疼的断层。根据 2023 年 Postman 的开发者调查报告，68% 的团队每周要花费 10+ 小时在还原设计稿这类机械劳动上。更糟糕的是，设计系统的迭代常常导致代码库不同步，产生大量 padding: 17px 这类魔数代码。

我们构建的 MCP(Mockup-to-Code Pipeline)方案，通过三个核心环节实现自动化转换：

设计稿元数据提取：Figma 插件捕获图层树结构
智能代码生成：Claude API 解析结构数据并输出语法正确的代码
框架适配：将 AI 输出适配到不同技术栈

首先需要在 Figma 插件中获取可操作的设计数据。关键是要提取带有语义的结构化信息，而非简单的绝对定位数据：

// 获取当前选中节点的结构化数据
const extractLayerMeta = (node: SceneNode) => {
  return {
    type: node.type,
    name: node.name,
    // 提取布局相关属性
    layout: {
      width: node.width,
      height: node.height,
      constraints: node.constraints,
    },
    // 提取样式属性
    style: {
      fills: node.fills,
      strokes: node.strokes,
      effects: node.effects,
    },
    // 递归处理子节点
    children: 'children' in node 
      ? node.children.map(extractLayerMeta)
      : []}
}

插件 manifest 需要声明必要的 API 权限：

// manifest.json
{
  "name": "MCP Generator",
  "id": "1234567890",
  "api": "1.0.0",
  "main": "dist/plugin.js",
  "ui": "dist/ui.html",
  "capabilities": [
    "currentuser",
    "activeusers",
    "fileusers",
    "nodequery"
  ],
  "enableProposedApi": true
}

将设计数据转化为有效的 prompt 需要特别注意结构化描述。我们采用 YAML 格式传递设计数据，配合明确的指令模板：

interface ClaudeMessage {
  role: 'user' | 'assistant';
  content: string;
}

const createPrompt = (meta: LayerMeta): ClaudeMessage[] => [
  {
    role: 'user',
    content: `
请将以下设计数据转换为 ${targetFramework}组件代码。要求：1. 使用 CSS-in-JS 语法
2. 保留所有交互状态样式
3. 输出可复用的函数组件

设计数据：${yaml.dump(meta)}`
  }
];

关键 API 参数配置：

# claude-config.yaml
model: claude-2.1
temperature: 0.3  # 降低随机性保证结构稳定
top_p: 0.7       # 平衡创造性与确定性
max_tokens: 4096
stop_sequences: 
  - "```"       # 防止代码截断

为支持不同技术栈，我们实现了一个适配器层处理 AI 原始输出：

// 框架适配器基类
abstract class CodeAdapter {abstract normalize(aiOutput: string): string;
  abstract wrapComponent(code: string): string;
}

// React 实现
class ReactAdapter extends CodeAdapter {normalize(code) {return code.replace(/class=/g, 'className=');
  }

  wrapComponent(code) {
    return `import React from 'react';
${code}`;
  }
}

// Vue 实现
class VueAdapter extends CodeAdapter {normalize(code) {return code.replace(/className=/g, 'class=');
  }

  wrapComponent(code) {
    return `<script setup>
${code}
</script>`;
  }
}

操作类型	平均耗时	Token 消耗
简单按钮组件	1.2s	312
表单布局	3.8s	897
完整页面框架	7.5s	2145

Figma API 有严格的每分钟 60 次调用限制。我们采用指数退避策略：

# rate-limit-config.yaml
strategy: exponential-backoff
initialDelay: 1000  # 初始 1 秒
maxDelay: 10000     # 最大 10 秒
retryCount: 5       
headers:
  Retry-After: X-RateLimit-Reset

Claude 有时会输出不完整的代码片段。我们通过以下方式提升稳定性：

在 prompt 中明确要求输出 Markdown 代码块
添加后处理校验：

function validateCode(output: string) {const hasValidWrapper = output.includes('```tsx') 
    && output.includes('```');
  const hasComponent = /function\s+\w+/.test(output);
  return hasValidWrapper && hasComponent;
}

使用 Docker 容器化调试环境：

# docker-compose.yml
version: '3.8'
services:
  figma-plugin:
    build: ./plugin
    ports:
      - 3000:3000
    volumes:
      - ./plugin/src:/app/src

  claude-proxy:
    image: node:18
    working_dir: /app
    ports:
      - 8080:8080
    command: npm run dev
    environment:
      CLAUDE_KEY: ${CLAUDE_API_KEY}

这套方案在实际项目中已转化超过 200 个 Figma 组件，主要收获有：