Figma-to-Code MCP: Automated Translation of Tokens to Tailwind CSS v4

[Figma Cloud] -> (REST API: /v1/files/:id/variables) -> [Figma MCP Server]
                                                              |
                                                              v
[AI Agent (Claude/GPT)] <- ToolCall(fetch_design_tokens) <----+
          |
          v
[Генерация CSS-first конфигурации] -> @theme { --color-primary: #3b82f6; }
          |
          v
[File System (Next.js)] -> Запись в app/globals.css

import { McpServer } from "@modelcontextprotocol/sdk/server/mcp.js";
import { z } from "zod";

const server = new McpServer({ name: "FigmaTokensMCP", version: "1.0.0" });
const FIGMA_API_TOKEN = process.env.FIGMA_PERSONAL_ACCESS_TOKEN;

/**
 * Вспомогательная функция для конвертации цвета из формата Figma (0-1 RGBA) в HEX.
 */
function rgbaToHex(r: number, g: number, b: number, a: number): string {
  const toHex = (c: number) => Math.round(c * 255).toString(16).padStart(2, '0');
  const hex = `#${toHex(r)}${toHex(g)}${toHex(b)}`;
  return a < 1 ? `${hex}${toHex(a)}` : hex;
}

server.tool(
  "fetch_figma_tokens",
  "Извлекает актуальные Design Tokens из указанного файла Figma",
  {
    fileKey: z.string().describe("Уникальный идентификатор файла Figma (из URL)"),
  },
  async ({ fileKey }) => {
    if (!FIGMA_API_TOKEN) {
      return { content: [{ type: "text", text: "Error: FIGMA_PERSONAL_ACCESS_TOKEN не задан." }], isError: true };
    }

    try {
      // Вызов Figma REST API для получения локальных переменных
      const response = await fetch(`https://api.figma.com/v1/files/${fileKey}/variables/local`, {
        headers: { 'X-Figma-Token': FIGMA_API_TOKEN }
      });
      
      if (!response.ok) throw new Error(`Figma API returned ${response.status}`);
      
      const data = await response.json();
      const variables = data.meta.variables;
      
      // Формирование словаря токенов, понятного для генерации Tailwind v4 CSS
      const tokens: Record<string, string> = {};
      
      for (const key in variables) {
        const v = variables[key];
        if (v.resolvedType === 'COLOR') {
          // Формируем имя CSS-переменной, например: --color-primary-500
          const cssVarName = `--color-${v.name.replace(/\//g, '-').toLowerCase()}`;
          const colorVal = v.valuesByMode[Object.keys(v.valuesByMode)[0]]; // Дефолтный режим
          
          if (typeof colorVal === 'object' && colorVal !== null && 'r' in colorVal) {
             tokens[cssVarName] = rgbaToHex(colorVal.r, colorVal.g, colorVal.b, colorVal.a);
          }
        }
      }

      // Возвращаем агенту нормализованный словарь токенов
      return {
        content: [{ type: "text", text: JSON.stringify(tokens, null, 2) }]
      };
      
    } catch (error) {
      return { 
        content: [{ type: "text", text: `Figma API Error: ${(error as Error).message}` }], 
        isError: true 
      };
    }
  }
);