使用豆包编程模式，分析这个仓库:https://github.com/GLips/Figma-Context-MCP

参考价值：

1、将sketch格式转为figma格式，直接复用这个项目，生成标准的DSL。存在的问题是figma有布局属性，如flex-start等，sketch除了规则以外，可以结合多模态大模型识别出布局。

2、如果阿里的适配代码能将DSL转代码，这个项目的意义是什么，提高代码质量，目前开源代码大模型做的效果怎么样？

你想弄清楚 Figma-Context-MCP 项目的输入输出逻辑，以及最终能生成哪些形式的前端代码，首先要纠正一个核心认知：这个项目本身并不直接返回前端代码，而是作为「数据中间层」为 AI 编码工具提供结构化的 Figma 设计数据，由 AI 工具（如 Cursor）基于这些数据生成前端代码。下面详细拆解：

一、项目的核心输入

Figma-Context-MCP 接收的输入并非直接由用户手动传入，而是由支持 MCP 协议的 AI 编码工具（如 Cursor）在调用该项目时传递，核心输入包含三类信息：

1. 核心标识信息（必选）

  • Figma 文件链接 / 文件 ID：指向具体的 Figma 设计文件（格式示例：https://www.figma.com/file/XXXX/XXX 或直接传入文件 ID XXXX）；
  • 可选的节点 / 层 ID：指定要提取的具体帧（Frame）、组件（Component）、组（Group）或页面（Page）的 ID（若不指定，默认提取整个文件的核心内容）。

2. 鉴权信息（必选）

  • Figma 个人访问令牌（Personal Access Token）：用户提前配置在 MCP 服务器中，用于调用 Figma 官方 API 获取设计数据（鉴权用）。

3. 可选的提取参数（非必选）

  • 提取范围：如仅提取布局、仅提取文本内容、仅提取组件信息；
  • 数据简化级别：控制返回数据的冗余度（如是否保留注释、隐藏节点）；
  • 图片处理方式：如是否下载图片、图片格式 / 尺寸。

二、项目的核心输出

项目的输出是标准化、轻量化的 JSON 结构化数据（而非前端代码），核心结构为 SimplifiedDesign，专门适配 LLM（大语言模型）的上下文理解，主要包含以下核心字段：

json

{
  "id": "figma-node-id",
  "name": "首页-头部导航",
  "type": "FRAME", // 节点类型：FRAME/COMPONENT/TEXT 等
  "layout": {      // 适配前端的 Flex 布局信息
    "display": "flex",
    "flexDirection": "row",
    "justifyContent": "space-between",
    "alignItems": "center",
    "padding": [16, 24],
    "gap": 12
  },
  "style": {       // 视觉样式（简化为 CSS 友好格式）
    "backgroundColor": "#ffffff",
    "boxShadow": "0 2px 8px rgba(0,0,0,0.1)",
    "borderRadius": 8
  },
  "texts": [       // 文本内容+样式
    { "content": "首页", "fontSize": 16, "color": "#333333" }
  ],
  "children": [],  // 子节点（嵌套布局）
  "images": [      // 图片资源链接
    { "id": "img-1", "url": "https://s3.figma.com/...", "width": 48, "height": 48 }
  ],
  "component": {   // 组件信息（若为组件节点）
    "key": "nav-button",
    "variant": "primary"
  }
}

输出的核心特点：

  1. 去冗余：过滤 Figma 原始 API 返回的内部冗余字段（如编辑器状态、历史记录），仅保留 AI 生成代码所需的核心信息；
  2. 标准化：将 Figma 私有布局 / 样式模型转换为前端开发者 / AI 熟悉的范式（如 Figma AutoLayout → CSS Flex 布局）；
  3. 轻量化：控制 Token 数量，适配 LLM 上下文窗口限制。

三、前端代码的支持形式（AI 基于输出数据生成）

前端代码是 Cursor 等 AI 工具 基于该项目输出的结构化数据生成的，而非项目直接返回，支持的代码形式覆盖主流前端技术栈，核心取决于你的提示词和 AI 工具的能力，主要包括：

1. 框架 / 语法支持

类型 具体支持项
基础语法 HTML + CSS + JavaScript（纯静态）、TypeScript
主流框架 React（含 Next.js）、Vue 2/Vue 3（含 Nuxt）、Svelte/SvelteKit、Solid.js
移动端框架 React Native（基于 Figma 尺寸适配）、Taro
CSS 解决方案 纯 CSS、Tailwind CSS（最常用，匹配 Figma 间距 / 颜色更精准）、CSS Modules、Styled Components、SCSS/SASS

2. 代码粒度支持

  • 单组件 / 元素：如按钮、输入框、卡片、导航栏等独立组件；
  • 整页布局：如首页、详情页、登录页的完整结构（含嵌套布局）；
  • 响应式布局：基于 Figma 设计的断点（Breakpoint）生成适配移动端 / 平板 / 桌面端的响应式代码；
  • 样式精准还原：匹配 Figma 中的像素级间距、颜色、字体、阴影、圆角、描边等。

示例：AI 生成的代码（基于项目输出数据）

若你向 Cursor 发送指令：基于这个 Figma 帧，用 React + Tailwind CSS 实现一个登录按钮组件，AI 会基于项目输出的结构化数据生成类似代码：

tsx

import React from 'react';

export const LoginButton = () => {
  return (
    <button 
      className="flex items-center justify-center px-8 py-3 bg-blue-600 text-white rounded-lg shadow-md hover:bg-blue-700 transition-colors"
      style={{ fontSize: 16, fontWeight: 500 }}
    >
      登录
    </button>
  );
};

四、关键补充

  1. 项目的定位：是「数据翻译官」，而非「代码生成器」—— 解决 AI 无法直接解析 Figma 原始 API 数据、只能靠截图识别的痛点；
  2. 代码质量：生成代码的质量取决于两个因素：① 项目输出数据的完整性（布局 / 样式是否精准转换）；② AI 工具的能力 + 你的提示词（越明确的指令，生成代码越贴合需求）；
  3. 扩展能力：若你需要特定框架的代码（如 Angular、Remix），只需在提示词中明确，AI 会基于标准化数据适配生成。

总结

  1. 输入：Figma 文件链接（+ 可选节点 ID）+ Figma API 令牌（由 AI 工具传递给项目）；
  2. 输出：轻量化、标准化的 Figma 设计数据（JSON），而非前端代码；
  3. 前端代码形式：由 AI 工具生成，支持 HTML/CSS/JS、React/Vue/Svelte 等主流框架、Tailwind/Styled Components 等 CSS 方案，粒度覆盖单组件到整页布局。

FAQ1：transformer这个文件夹做什么的

你想了解 Figma-Context-MCP 项目中 transformers 文件夹的核心作用和具体实现，这个文件夹是整个项目的数据标准化核心层，核心目标是把 Figma 原始 API 返回的「私有、冗余、前端不友好」的数据，转换成 AI 和前端开发者能直接理解的「标准化、轻量化、前端范式」数据，是连接 Figma 私有模型和 AI 可消费数据的关键桥梁。

一、transformers 文件夹的核心定位

Figma 官方 API 返回的原始数据有两个核心问题：

  1. 私有性：字段是 Figma 内部定义的（如 layoutMode primaryAxisAlignItems），和前端的 Flex 布局、CSS 样式体系完全脱节；
  2. 冗余性：包含大量 Figma 编辑器内部的状态字段（如节点编辑历史、隐藏的元数据），对 AI 生成代码无意义；
  3. 不一致性：Figma 的布局逻辑和前端 CSS 存在细微差异（如对齐方式、间距计算）。

transformers 文件夹的核心就是解决这三个问题：它不生成新数据，只对 Figma 原始数据做「翻译、过滤、适配」，输出符合前端认知的标准化结构，让 AI 无需理解 Figma 私有模型就能精准生成代码。

二、transformers 文件夹的核心职责

总结来说，这个文件夹主要做 4 件事：

  1. 字段映射：将 Figma 私有字段（如 layoutMode）映射为前端标准字段（如 flexDirection）；
  2. 冗余过滤：剔除对 AI 无意义的字段（如 Figma 内部 ID、编辑器状态）；
  3. 格式标准化：将 Figma 的数值 / 格式（如颜色 #RRGGBBAA）转换为 CSS 标准格式（如 rgba() 或 #RGB 简写）；
  4. 逻辑适配：修正 Figma 布局逻辑与前端 CSS 的差异（如 AutoLayout 间距计算、对齐方式映射）。

三、transformers 文件夹的结构与文件分工

结合项目源码结构，该文件夹下的文件按「数据类型」拆分，每个文件只负责一类数据的转换，遵循「单一职责」原则，核心文件及作用如下：

文件名 核心作用
layout.ts 【最核心】Figma 布局 → 前端 Flex 布局转换（AutoLayout 适配）
style.ts Figma 样式（填充、描边、圆角）→ CSS 标准样式转换
text.ts Figma 文本属性（字体、字号、行高、对齐）→ CSS 文本样式转换
effects.ts Figma 视觉效果（阴影、模糊、渐变）→ CSS 效果样式转换
component.ts Figma 组件 / 组件集数据 → 简化的组件元数据（仅保留 ID、名称、变体等核心信息）
index.ts 对外导出所有转换器函数，方便其他模块（如 extractors）调用

四、核心文件的具体实现示例

以最关键的 layout.ts 为例，直观说明转换器的工作方式：

示例 1：Figma 布局模式映射（layout.ts）

Figma 的 layoutMode 字段表示布局方向，转换器将其映射为前端 flexDirection：

typescript

运行

// src/transformers/layout.ts
import type { LayoutMode } from 'figma-api-types';

// 映射 Figma 布局模式到 CSS flex-direction
export function convertLayoutMode(mode: LayoutMode | undefined): string {
  switch (mode) {
    case 'HORIZONTAL':
      return 'row'; // Figma 水平布局 → CSS flex 行布局
    case 'VERTICAL':
      return 'column'; // Figma 垂直布局 → CSS flex 列布局
    default:
      return 'row'; // 默认值
  }
}

// 映射 Figma 对齐方式到 CSS justify-content/align-items
export function convertAlign(align: string | undefined, direction: string): string {
  const alignMap = {
    HORIZONTAL: {
      'MIN': 'flex-start',
      'CENTER': 'center',
      'MAX': 'flex-end',
      'SPACE_BETWEEN': 'space-between'
    },
    VERTICAL: {
      'MIN': 'flex-start',
      'CENTER': 'center',
      'MAX': 'flex-end',
      'SPACE_BETWEEN': 'space-between'
    }
  };
  return alignMap[direction][align] || 'flex-start';
}

示例 2：样式数据过滤与标准化（style.ts）

剔除 Figma 样式中的冗余字段，仅保留核心样式属性，并转换为 CSS 格式：

typescript

运行

// src/transformers/style.ts
import type { Paint } from 'figma-api-types';

// 转换 Figma 填充样式为 CSS 背景色
export function convertBackground(paints: Paint[] | undefined): string | null {
  if (!paints || paints.length === 0) return null;
  
  // 只取第一个可见的填充（过滤隐藏/透明的填充）
  const mainPaint = paints.find(p => p.visible !== false && p.opacity !== 0);
  if (!mainPaint || mainPaint.type !== 'SOLID') return null;
  
  // Figma 颜色格式 #RRGGBBAA → CSS rgba() 或 #RRGGBB
  const { r, g, b, a = 1 } = mainPaint.color;
  return a === 1 
    ? `#${Math.round(r*255).toString(16).padStart(2, '0')}${Math.round(g*255).toString(16).padStart(2, '0')}${Math.round(b*255).toString(16).padStart(2, '0')}`
    : `rgba(${Math.round(r*255)}, ${Math.round(g*255)}, ${Math.round(b*255)}, ${a})`;
}

五、transformers 的设计原则

  1. 无副作用：只做数据转换，不修改原始数据、不发起网络请求、不依赖外部状态；
  2. 类型安全：基于 TypeScript 严格定义输入输出类型，避免转换后数据格式混乱；
  3. 单一职责：每个文件只处理一类数据（布局 / 样式 / 文本），每个函数只做一个转换操作；
  4. 轻量化：转换过程中主动剔除冗余字段，减少最终输出的 Token 数量，适配 LLM 上下文限制。

总结

  1. transformers 是「数据翻译层」：将 Figma 私有数据模型翻译为前端 / AI 可理解的标准化格式；
  2. 核心工作：字段映射、冗余过滤、格式标准化、布局逻辑适配；
  3. 关键价值：解决 AI 无法直接理解 Figma 原始数据的痛点，是保证 AI 生成精准前端代码的核心环节。

FAQ2：这个项目是如何识别出布局模式如space-between的

从这个项目来看，figma设计的时候就有布局概念。无需进行识别了。sketch原生设计稿是否有这个属性？

layout.tsidentity.ts整个项目识别 flex-start/center/flex-end/space-between 等布局对齐方式的核心逻辑，是将 Figma 原生的布局对齐属性映射为标准 CSS Flex 对齐值，涉及「数据源提取→轴方向判断→对齐值转换→最终属性映射」四个核心步骤，以下结合代码逐环节拆解：

一、核心数据源：Figma 原生对齐属性

Figma 的 Frame 类节点（Frame/Component/ComponentSet）和其子节点，暴露了原生的对齐相关属性，这是所有对齐值识别的基础：

Figma 属性 作用 对应 CSS 概念
primaryAxisAlignItems（Frame 节点） 自动布局主轴对齐方式 justifyContent
counterAxisAlignItems（Frame 节点） 自动布局交叉轴对齐方式 alignItems
layoutAlign（子节点） 子节点在交叉轴的自身对齐方式 alignSelf
layoutMode（Frame 节点） 布局方向（HORIZONTAL/VERTICAL） Flex 方向（row/column）

项目首先通过 isFrame 函数（identity.ts）判断节点是否为支持布局的 Frame 类型，确保仅处理有对齐属性的节点：

typescript

运行

// src/utils/identity.ts
export function isFrame(val: unknown): val is HasFramePropertiesTrait {
  return (
    typeof val === "object" && !!val && "clipsContent" in val && typeof val.clipsContent === "boolean"
  );
}

二、核心转换逻辑：对齐值映射（convertAlign/convertSelfAlign）

项目通过 layout.ts 中的 convertAlign（容器对齐）和 convertSelfAlign（子节点自身对齐）两个核心函数，将 Figma 原生值转为 CSS Flex 对齐值。

1. 容器对齐转换：convertAlign（处理 justifyContent/alignItems）

该函数是识别 flex-start/center/flex-end/space-between 的核心，逻辑分为两步：

步骤 1：判断是否需要映射为 stretch（拉伸）

先校验「子节点是否全部在自动布局流中，且对应轴向上的尺寸为「填充」（FILL）」，如果满足则直接返回 stretch：

typescript

运行

// src/transformers/layout.ts
function convertAlign(
  axisAlign?: HasFramePropertiesTrait["primaryAxisAlignItems"] | "counterAxisAlignItems",
  stretch?: { children: FigmaDocumentNode[]; axis: "primary" | "counter"; mode: "row" | "column" },
) {
  if (stretch && stretch.mode !== "none") {
    const { children, mode, axis } = stretch;
    const direction = getDirection(axis, mode); // 确定是水平/垂直方向
    
    // 检查所有子节点是否在对应轴向上为 FILL（填充）
    const shouldStretch = children.length > 0 && children.reduce((shouldStretch, c) => {
      if (!shouldStretch) return false;
      if (c.layoutPositioning === "ABSOLUTE") return true; // 绝对定位不影响拉伸判断
      if (direction === "horizontal") return c.layoutSizingHorizontal === "FILL";
      if (direction === "vertical") return c.layoutSizingVertical === "FILL";
      return false;
    }, true);

    if (shouldStretch) return "stretch";
  }
  // ... 步骤 2：基础对齐值映射
}
步骤 2：Figma 对齐值 → CSS Flex 对齐值

将 Figma 定义的对齐枚举值，直接映射为标准 Flex 对齐值（默认值 MIN 返回 undefined，因为 CSS Flex 默认就是 flex-start）：

typescript

运行

// src/transformers/layout.ts
switch (axisAlign) {
  case "MIN":
    // MIN = flex-start（CSS 默认值，无需显式返回）
    return undefined;
  case "MAX":
    return "flex-end"; // MAX = flex-end
  case "CENTER":
    return "center";   // CENTER = center
  case "SPACE_BETWEEN":
    return "space-between"; // SPACE_BETWEEN = space-between
  case "BASELINE":
    return "baseline"; // BASELINE = baseline
  default:
    return undefined;
}
2. 子节点自身对齐转换：convertSelfAlign（处理 alignSelf）

针对子节点的 layoutAlign 属性，映射其自身在交叉轴的对齐方式：

typescript

运行

// src/transformers/layout.ts
function convertSelfAlign(align?: HasLayoutTrait["layoutAlign"]) {
  switch (align) {
    case "MIN":
      return undefined; // MIN = flex-start（默认）
    case "MAX":
      return "flex-end"; // MAX = flex-end
    case "CENTER":
      return "center";   // CENTER = center
    case "STRETCH":
      return "stretch";  // STRETCH = stretch
    default:
      return undefined;
  }
}

三、轴方向关联：布局方向（row/column）影响对齐映射

项目先通过 buildSimplifiedFrameValues 将 Figma 的 layoutMode 转为 row（水平）/column（垂直），再结合 getDirection 函数，确定「主轴 / 交叉轴」对应的物理方向（水平 / 垂直）：

typescript

运行

// src/transformers/layout.ts
function getDirection(axis: "primary" | "counter", mode: "row" | "column"): "horizontal" | "vertical" {
  switch (axis) {
    case "primary":
      return mode === "row" ? "horizontal" : "vertical"; // 水平布局主轴=横向，垂直布局主轴=纵向
    case "counter":
      return mode === "row" ? "vertical" : "horizontal"; // 水平布局交叉轴=纵向，垂直布局交叉轴=横向
  }
}

// 映射 layoutMode 为 row/column
function buildSimplifiedFrameValues(n: FigmaDocumentNode) {
  const frameValues: SimplifiedLayout = {
    mode: !n.layoutMode || n.layoutMode === "NONE" 
      ? "none" 
      : n.layoutMode === "HORIZONTAL" ? "row" : "column",
  };

  // 主轴对齐 → justifyContent，交叉轴对齐 → alignItems
  frameValues.justifyContent = convertAlign(n.primaryAxisAlignItems ?? "MIN", {
    children: n.children,
    axis: "primary",
    mode: frameValues.mode,
  });
  frameValues.alignItems = convertAlign(n.counterAxisAlignItems ?? "MIN", {
    children: n.children,
    axis: "counter",
    mode: frameValues.mode,
  });
  frameValues.alignSelf = convertSelfAlign(n.layoutAlign); // 子节点自身对齐
}

四、完整流程：从 Figma 节点到最终对齐值

  1. 节点校验：通过 isFrame 判断节点是否为 Frame 类型，是否支持布局对齐属性；
  2. 方向转换：将 Figma 的 layoutMode（HORIZONTAL/VERTICAL）转为 row/column；
  3. 对齐值转换：
    • 调用 convertAlign 处理 primaryAxisAlignItems → justifyContent；
    • 调用 convertAlign 处理 counterAxisAlignItems → alignItems；
    • 调用 convertSelfAlign 处理子节点 layoutAlign → alignSelf；
  4. 排除异常节点：通过 isInAutoLayoutFlow 判断子节点是否为绝对定位（脱离布局流），这类节点不应用对齐规则；
  5. 提取整合：layoutExtractor（built-in.ts）调用 buildSimplifiedLayout，将对齐值整合到最终的简化布局数据中，供后续使用。

五、关键补充：对齐值的最终使用

转换后的对齐值（justifyContent/alignItems/alignSelf）会被封装到 SimplifiedLayout 结构体中，通过 layoutExtractor 提取，最终可通过 extractFromDesign 函数按需获取（比如仅提取布局时用 layoutOnly 提取器）：

typescript

运行

// src/extractors/built-in.ts
export const layoutExtractor: ExtractorFn = (node, result, context) => {
  const layout = buildSimplifiedLayout(node, context.parent);
  if (Object.keys(layout).length > 1) {
    result.layout = findOrCreateVar(context.globalVars, layout, "layout");
  }
};

// 使用示例：仅提取布局（含对齐值）
const layoutData = extractFromDesign(nodes, layoutOnly, { maxDepth: 3 });

总结

项目识别 Flex 对齐方式的核心是「Figma 原生属性 → 轴方向判断 → CSS 对齐值映射」：

  • 数据源：Figma 的 primaryAxisAlignItems/counterAxisAlignItems/layoutAlign；
  • 转换规则：MIN→flex-start/MAX→flex-end/CENTER→center/SPACE_BETWEEN→space-between；
  • 方向关联：布局方向（row/column）决定「主轴 / 交叉轴」对应的物理方向，进而影响 justifyContent/alignItems 的映射；
  • 异常处理：排除绝对定位节点，确保仅对布局流内的节点应用对齐规则。整个项目识别 flex-start/center/flex-end/space-between 等布局对齐方式的核心逻辑，是将 Figma 原生的布局对齐属性映射为标准 CSS Flex 对齐值，涉及「数据源提取→轴方向判断→对齐值转换→最终属性映射」四个核心步骤，以下结合代码逐环节拆解：

一、核心数据源：Figma 原生对齐属性

Figma 的 Frame 类节点（Frame/Component/ComponentSet）和其子节点，暴露了原生的对齐相关属性，这是所有对齐值识别的基础：

Figma 属性 作用 对应 CSS 概念
primaryAxisAlignItems（Frame 节点） 自动布局主轴对齐方式 justifyContent
counterAxisAlignItems（Frame 节点） 自动布局交叉轴对齐方式 alignItems
layoutAlign（子节点） 子节点在交叉轴的自身对齐方式 alignSelf
layoutMode（Frame 节点） 布局方向（HORIZONTAL/VERTICAL） Flex 方向（row/column）

项目首先通过 isFrame 函数（identity.ts）判断节点是否为支持布局的 Frame 类型，确保仅处理有对齐属性的节点：

typescript

运行

// src/utils/identity.ts
export function isFrame(val: unknown): val is HasFramePropertiesTrait {
  return (
    typeof val === "object" && !!val && "clipsContent" in val && typeof val.clipsContent === "boolean"
  );
}

二、核心转换逻辑：对齐值映射（convertAlign/convertSelfAlign）

项目通过 layout.ts 中的 convertAlign（容器对齐）和 convertSelfAlign（子节点自身对齐）两个核心函数，将 Figma 原生值转为 CSS Flex 对齐值。

1. 容器对齐转换：convertAlign（处理 justifyContent/alignItems）

该函数是识别 flex-start/center/flex-end/space-between 的核心，逻辑分为两步：

步骤 1：判断是否需要映射为 stretch（拉伸）

先校验「子节点是否全部在自动布局流中，且对应轴向上的尺寸为「填充」（FILL）」，如果满足则直接返回 stretch：

typescript

运行

// src/transformers/layout.ts
function convertAlign(
  axisAlign?: HasFramePropertiesTrait["primaryAxisAlignItems"] | "counterAxisAlignItems",
  stretch?: { children: FigmaDocumentNode[]; axis: "primary" | "counter"; mode: "row" | "column" },
) {
  if (stretch && stretch.mode !== "none") {
    const { children, mode, axis } = stretch;
    const direction = getDirection(axis, mode); // 确定是水平/垂直方向
    
    // 检查所有子节点是否在对应轴向上为 FILL（填充）
    const shouldStretch = children.length > 0 && children.reduce((shouldStretch, c) => {
      if (!shouldStretch) return false;
      if (c.layoutPositioning === "ABSOLUTE") return true; // 绝对定位不影响拉伸判断
      if (direction === "horizontal") return c.layoutSizingHorizontal === "FILL";
      if (direction === "vertical") return c.layoutSizingVertical === "FILL";
      return false;
    }, true);

    if (shouldStretch) return "stretch";
  }
  // ... 步骤 2：基础对齐值映射
}
步骤 2：Figma 对齐值 → CSS Flex 对齐值

将 Figma 定义的对齐枚举值，直接映射为标准 Flex 对齐值（默认值 MIN 返回 undefined，因为 CSS Flex 默认就是 flex-start）：

typescript

运行

// src/transformers/layout.ts
switch (axisAlign) {
  case "MIN":
    // MIN = flex-start（CSS 默认值，无需显式返回）
    return undefined;
  case "MAX":
    return "flex-end"; // MAX = flex-end
  case "CENTER":
    return "center";   // CENTER = center
  case "SPACE_BETWEEN":
    return "space-between"; // SPACE_BETWEEN = space-between
  case "BASELINE":
    return "baseline"; // BASELINE = baseline
  default:
    return undefined;
}
2. 子节点自身对齐转换：convertSelfAlign（处理 alignSelf）

针对子节点的 layoutAlign 属性，映射其自身在交叉轴的对齐方式：

typescript

运行

// src/transformers/layout.ts
function convertSelfAlign(align?: HasLayoutTrait["layoutAlign"]) {
  switch (align) {
    case "MIN":
      return undefined; // MIN = flex-start（默认）
    case "MAX":
      return "flex-end"; // MAX = flex-end
    case "CENTER":
      return "center";   // CENTER = center
    case "STRETCH":
      return "stretch";  // STRETCH = stretch
    default:
      return undefined;
  }
}

三、轴方向关联：布局方向（row/column）影响对齐映射

项目先通过 buildSimplifiedFrameValues 将 Figma 的 layoutMode 转为 row（水平）/column（垂直），再结合 getDirection 函数，确定「主轴 / 交叉轴」对应的物理方向（水平 / 垂直）：

typescript

运行

// src/transformers/layout.ts
function getDirection(axis: "primary" | "counter", mode: "row" | "column"): "horizontal" | "vertical" {
  switch (axis) {
    case "primary":
      return mode === "row" ? "horizontal" : "vertical"; // 水平布局主轴=横向，垂直布局主轴=纵向
    case "counter":
      return mode === "row" ? "vertical" : "horizontal"; // 水平布局交叉轴=纵向，垂直布局交叉轴=横向
  }
}

// 映射 layoutMode 为 row/column
function buildSimplifiedFrameValues(n: FigmaDocumentNode) {
  const frameValues: SimplifiedLayout = {
    mode: !n.layoutMode || n.layoutMode === "NONE" 
      ? "none" 
      : n.layoutMode === "HORIZONTAL" ? "row" : "column",
  };

  // 主轴对齐 → justifyContent，交叉轴对齐 → alignItems
  frameValues.justifyContent = convertAlign(n.primaryAxisAlignItems ?? "MIN", {
    children: n.children,
    axis: "primary",
    mode: frameValues.mode,
  });
  frameValues.alignItems = convertAlign(n.counterAxisAlignItems ?? "MIN", {
    children: n.children,
    axis: "counter",
    mode: frameValues.mode,
  });
  frameValues.alignSelf = convertSelfAlign(n.layoutAlign); // 子节点自身对齐
}

四、完整流程：从 Figma 节点到最终对齐值

  1. 节点校验：通过 isFrame 判断节点是否为 Frame 类型，是否支持布局对齐属性；
  2. 方向转换：将 Figma 的 layoutMode（HORIZONTAL/VERTICAL）转为 row/column；
  3. 对齐值转换：
    • 调用 convertAlign 处理 primaryAxisAlignItems → justifyContent；
    • 调用 convertAlign 处理 counterAxisAlignItems → alignItems；
    • 调用 convertSelfAlign 处理子节点 layoutAlign → alignSelf；
  4. 排除异常节点：通过 isInAutoLayoutFlow 判断子节点是否为绝对定位（脱离布局流），这类节点不应用对齐规则；
  5. 提取整合：layoutExtractor（built-in.ts）调用 buildSimplifiedLayout，将对齐值整合到最终的简化布局数据中，供后续使用。

五、关键补充：对齐值的最终使用

转换后的对齐值（justifyContent/alignItems/alignSelf）会被封装到 SimplifiedLayout 结构体中，通过 layoutExtractor 提取，最终可通过 extractFromDesign 函数按需获取（比如仅提取布局时用 layoutOnly 提取器）：

typescript

运行

// src/extractors/built-in.ts
export const layoutExtractor: ExtractorFn = (node, result, context) => {
  const layout = buildSimplifiedLayout(node, context.parent);
  if (Object.keys(layout).length > 1) {
    result.layout = findOrCreateVar(context.globalVars, layout, "layout");
  }
};

// 使用示例：仅提取布局（含对齐值）
const layoutData = extractFromDesign(nodes, layoutOnly, { maxDepth: 3 });

总结

项目识别 Flex 对齐方式的核心是「Figma 原生属性 → 轴方向判断 → CSS 对齐值映射」：

  • 数据源：Figma 的 primaryAxisAlignItems/counterAxisAlignItems/layoutAlign；
  • 转换规则：MIN→flex-start/MAX→flex-end/CENTER→center/SPACE_BETWEEN→space-between；
  • 方向关联：布局方向（row/column）决定「主轴 / 交叉轴」对应的物理方向，进而影响 justifyContent/alignItems 的映射；
  • 异常处理：排除绝对定位节点，确保仅对布局流内的节点应用对齐规则。

FAQ3：MCP 这个文件夹的作用

index.tsmcp 文件夹是 Figma-Context-MCP 项目实现 Model Context Protocol (MCP) 核心能力的核心模块，其核心作用是「构建符合 MCP 规范的服务器，对外暴露标准化的 Figma 数据操作工具，让 AI 客户端（如 Cursor、VS Code 等）能调用 Figma 相关能力」。以下是具体拆解：

一、核心定位

MCP（Model Context Protocol）是一套让 AI 客户端与第三方服务交互的标准化协议，mcp 文件夹的所有代码都是为了实现「Figma 能力的 MCP 化封装」—— 让 AI 代理 / 编辑器能通过 MCP 协议调用 Figma 数据获取、图片下载等能力，而非直接操作 Figma API。

二、文件结构与职责

plaintext

src/mcp/
├── index.ts          # MCP 服务器核心构建逻辑（入口）
├── tools/            # MCP 工具定义（Figma 具体能力封装）
│   ├── get-figma-data-tool.ts   # 获取 Figma 文件数据的工具
│   ├── download-figma-images-tool.ts  # 下载 Figma 图片的工具
│   └── index.ts      # 工具统一导出

三、核心功能拆解

1. index.ts：MCP 服务器的构建与工具注册

这是 mcp 文件夹的核心入口，主要做 3 件事：

  • 创建 MCP 服务器实例：基于 @modelcontextprotocol/sdk 的 McpServer 构建符合 MCP 规范的服务器，关联 Figma 认证信息（API Key/OAuth）；
  • 初始化 Figma 服务：创建 FigmaService 实例（核心业务逻辑层），作为工具与 Figma API 交互的桥梁；
  • 注册 MCP 工具：将 tools/ 下的 Figma 操作工具注册到 MCP 服务器，让外部客户端能调用这些工具。

核心代码逻辑：

typescript

运行

// 创建 MCP 服务器
function createServer(authOptions: FigmaAuthOptions, options: CreateServerOptions = {}) {
  const server = new McpServer(serverInfo); // 初始化 MCP 服务器
  const figmaService = new FigmaService(authOptions); // 关联 Figma 认证
  registerTools(server, figmaService, options); // 注册工具
  return server;
}

// 注册 Figma 工具到 MCP 服务器
function registerTools(server: McpServer, figmaService: FigmaService, options) {
  // 注册「获取 Figma 数据」工具
  server.tool(
    getFigmaDataTool.name,
    getFigmaDataTool.description,
    getFigmaDataTool.parameters,
    (params) => getFigmaDataTool.handler(params, figmaService, options.outputFormat),
  );
  // 注册「下载 Figma 图片」工具（可通过配置跳过）
  if (!options.skipImageDownloads) {
    server.tool(downloadFigmaImagesTool.name, ...);
  }
}
2. tools/：Figma 能力的 MCP 工具封装

tools/ 下的文件是「具体的 Figma 操作能力」封装，每个工具都遵循 MCP 规范定义：

  • 工具元信息：名称、描述、入参规范（如 get_figma_data 需要 fileKey 入参）；
  • 工具处理逻辑：调用 FigmaService 与 Figma API 交互，返回标准化结果（YAML/JSON 格式）。

核心作用：

  • get-figma-data-tool.ts：封装「获取 Figma 文件 / 节点数据」的能力，返回简化后的 Figma 设计数据（包含布局、文本、样式等）；
  • download-figma-images-tool.ts：封装「下载 Figma 节点中的图片资源」的能力，支持图片缩放、格式处理等；
  • 对外暴露统一的工具调用接口，让 AI 客户端无需关心 Figma API 细节，只需按 MCP 规范传参即可。
3. 对外暴露能力（关联 mcp-server.ts）

src/mcp-server.ts 会重新导出 mcp/index.ts 的 createServer 等核心函数，让项目外部能快速使用 MCP 服务器能力：

typescript

运行

// mcp-server.ts
export { createServer } from "./mcp/index.js";
export type { FigmaService } from "./services/figma.js";

四、实际使用场景

当用户在 Cursor/VS Code 等 AI 客户端中配置 figma-developer-mcp 服务器后：

  1. 客户端通过 MCP 协议连接到该服务器；
  2. 调用 get_figma_data 工具，传入 Figma 文件 Key，获取标准化的设计数据；
  3. 调用 download_figma_images 工具，下载设计中的图片资源；
  4. AI 代理基于这些数据生成代码（如将 Figma 设计转为 React 组件）。

总结

mcp 文件夹是项目的「MCP 协议层」，核心职责是：

  • 遵循 MCP 规范构建服务器，承接 AI 客户端的调用请求；
  • 将 Figma 的核心能力（数据获取、图片下载）封装为标准化 MCP 工具；
  • 桥接 Figma 服务层（services/figma.js）与外部 AI 客户端，屏蔽底层 API 细节，提供统一的交互方式。mcp 文件夹是 Figma-Context-MCP 项目实现 Model Context Protocol (MCP) 核心能力的核心模块，其核心作用是「构建符合 MCP 规范的服务器，对外暴露标准化的 Figma 数据操作工具，让 AI 客户端（如 Cursor、VS Code 等）能调用 Figma 相关能力」。以下是具体拆解：

一、核心定位

MCP（Model Context Protocol）是一套让 AI 客户端与第三方服务交互的标准化协议，mcp 文件夹的所有代码都是为了实现「Figma 能力的 MCP 化封装」—— 让 AI 代理 / 编辑器能通过 MCP 协议调用 Figma 数据获取、图片下载等能力，而非直接操作 Figma API。

二、文件结构与职责

plaintext

src/mcp/
├── index.ts          # MCP 服务器核心构建逻辑（入口）
├── tools/            # MCP 工具定义（Figma 具体能力封装）
│   ├── get-figma-data-tool.ts   # 获取 Figma 文件数据的工具
│   ├── download-figma-images-tool.ts  # 下载 Figma 图片的工具
│   └── index.ts      # 工具统一导出

三、核心功能拆解

1. index.ts：MCP 服务器的构建与工具注册

这是 mcp 文件夹的核心入口，主要做 3 件事：

  • 创建 MCP 服务器实例：基于 @modelcontextprotocol/sdk 的 McpServer 构建符合 MCP 规范的服务器，关联 Figma 认证信息（API Key/OAuth）；
  • 初始化 Figma 服务：创建 FigmaService 实例（核心业务逻辑层），作为工具与 Figma API 交互的桥梁；
  • 注册 MCP 工具：将 tools/ 下的 Figma 操作工具注册到 MCP 服务器，让外部客户端能调用这些工具。

核心代码逻辑：

typescript

运行

// 创建 MCP 服务器
function createServer(authOptions: FigmaAuthOptions, options: CreateServerOptions = {}) {
  const server = new McpServer(serverInfo); // 初始化 MCP 服务器
  const figmaService = new FigmaService(authOptions); // 关联 Figma 认证
  registerTools(server, figmaService, options); // 注册工具
  return server;
}

// 注册 Figma 工具到 MCP 服务器
function registerTools(server: McpServer, figmaService: FigmaService, options) {
  // 注册「获取 Figma 数据」工具
  server.tool(
    getFigmaDataTool.name,
    getFigmaDataTool.description,
    getFigmaDataTool.parameters,
    (params) => getFigmaDataTool.handler(params, figmaService, options.outputFormat),
  );
  // 注册「下载 Figma 图片」工具（可通过配置跳过）
  if (!options.skipImageDownloads) {
    server.tool(downloadFigmaImagesTool.name, ...);
  }
}
2. tools/：Figma 能力的 MCP 工具封装

tools/ 下的文件是「具体的 Figma 操作能力」封装，每个工具都遵循 MCP 规范定义：

  • 工具元信息：名称、描述、入参规范（如 get_figma_data 需要 fileKey 入参）；
  • 工具处理逻辑：调用 FigmaService 与 Figma API 交互，返回标准化结果（YAML/JSON 格式）。

核心作用：

  • get-figma-data-tool.ts：封装「获取 Figma 文件 / 节点数据」的能力，返回简化后的 Figma 设计数据（包含布局、文本、样式等）；
  • download-figma-images-tool.ts：封装「下载 Figma 节点中的图片资源」的能力，支持图片缩放、格式处理等；
  • 对外暴露统一的工具调用接口，让 AI 客户端无需关心 Figma API 细节，只需按 MCP 规范传参即可。
3. 对外暴露能力（关联 mcp-server.ts）

src/mcp-server.ts 会重新导出 mcp/index.ts 的 createServer 等核心函数，让项目外部能快速使用 MCP 服务器能力：

typescript

运行

// mcp-server.ts
export { createServer } from "./mcp/index.js";
export type { FigmaService } from "./services/figma.js";

四、实际使用场景

当用户在 Cursor/VS Code 等 AI 客户端中配置 figma-developer-mcp 服务器后：

  1. 客户端通过 MCP 协议连接到该服务器；
  2. 调用 get_figma_data 工具，传入 Figma 文件 Key，获取标准化的设计数据；
  3. 调用 download_figma_images 工具，下载设计中的图片资源；
  4. AI 代理基于这些数据生成代码（如将 Figma 设计转为 React 组件）。

总结

mcp 文件夹是项目的「MCP 协议层」，核心职责是：

  • 遵循 MCP 规范构建服务器，承接 AI 客户端的调用请求；
  • 将 Figma 的核心能力（数据获取、图片下载）封装为标准化 MCP 工具；
  • 桥接 Figma 服务层（services/figma.js）与外部 AI 客户端，屏蔽底层 API 细节，提供统一的交互方式。

style.tslayout.tsREADME.mdindex.tsextractors 是 Figma-Context-MCP 项目中对 Figma 原始设计数据进行「灵活、高效、可定制提取与标准化」的核心模块，核心目标是从 Figma API 返回的原始数据中，按需提取关键信息（布局、文本、样式、组件等），并转化为适合 LLM（大语言模型）消费的精简格式，最大化利用 LLM 上下文窗口，提升 AI 处理 Figma 设计的准确性。

一、核心定位与设计理念

extractors 解决了 Figma 原始 API 数据「冗余、结构复杂、不适合 LLM 直接消费」的问题，核心设计原则：

特性 说明
单遍遍历（Single Tree Walk） 无论组合多少提取器，仅遍历一次 Figma 节点树，避免重复计算，效率极高
可组合（Composable） 内置提取器可自由组合（如「布局 + 文本」「仅视觉样式」），适配不同场景
可扩展（Extensible） 支持自定义提取器，适配业务专属逻辑（如识别设计系统组件）
上下文优化 按需提取数据，减少冗余，适配 LLM 上下文窗口大小，提升 AI 响应质量
类型安全 全 TypeScript 类型覆盖，避免类型错误

二、核心架构分层

模块严格遵循「分层设计」，职责清晰：

  1. 策略层（Strategy Layer）：定义「要提取什么」—— 即提取器函数（ExtractorFn），包括内置 / 自定义提取逻辑；
  2. 遍历层（Traversal Layer）：定义「怎么遍历」—— 单遍遍历 Figma 节点树，执行提取器，处理深度 / 过滤规则（核心：node-walker.ts）；
  3. 提取层（Extraction Layer）：定义「怎么转换」—— 纯函数将单个节点的原始属性转为标准化格式（如布局→CSS 友好格式、文本样式→精简对象）。

三、核心文件与职责

文件 核心职责
types.ts 定义全模块核心类型（如 ExtractorFn 提取器函数类型、SimplifiedNode 标准化节点、TraversalContext 遍历上下文），是类型安全的基础
node-walker.ts 实现核心遍历逻辑：extractFromDesign 函数，单遍遍历节点树，应用提取器，支持深度限制、节点过滤、子节点后置处理
design-extractor.ts 对接 Figma API 原始响应（GetFileResponse/GetFileNodesResponse），整合节点、组件、样式数据，调用 node-walker 完成全量提取，暴露 simplifyRawFigmaObject 函数
built-in.ts 实现所有内置提取器 + 便捷组合 + 辅助函数：1. 单个提取器（布局 / 文本 / 视觉 / 组件）；2. 组合提取器（如 layoutAndText）；3. 辅助函数（如 collapseSvgContainers 折叠 SVG 容器）
index.ts 统一导出模块的类型、核心函数（如 extractFromDesign）、内置提取器，对外提供简洁的使用入口
README.md 模块使用文档，包含用法、自定义提取器、LLM 上下文优化等示例

四、核心功能拆解

1. 内置提取器（核心能力）

built-in.ts 实现了 4 个基础提取器，可单独 / 组合使用：

提取器 提取内容 适用场景
layoutExtractor 节点布局属性（位置、尺寸、弹性布局、对齐方式等），转为 SimplifiedLayout 结构分析、生成布局代码
textExtractor 文本内容 + 文本样式（字体、字号、行高、对齐、大小写等） 文案提取、内容分析、生成文本样式
visualsExtractor 视觉样式（填充 / 描边 / 阴影 / 透明度 / 圆角），转为 CSS 友好格式 设计系统分析、生成样式代码
componentExtractor 组件实例属性（组件 ID、变体参数、自定义属性） 组件化开发、生成组件代码
2. 便捷组合提取器

为简化使用，内置「常用组合」，覆盖典型场景：

组合提取器 包含的基础提取器 适用场景
allExtractors 所有基础提取器 全量数据提取（兼容原有逻辑）
layoutAndText layoutExtractor + textExtractor 内容分析、布局规划
contentOnly textExtractor 文案审计、纯文本提取
visualsOnly visualsExtractor 设计系统分析、样式提取
layoutOnly layoutExtractor 仅分析页面 / 组件结构
3. 灵活的配置能力

支持通过「遍历选项」定制提取逻辑，适配不同需求：

  • 深度限制（maxDepth）：控制节点树遍历深度（如只提取前 3 层，减少冗余）；
  • 节点过滤（nodeFilter）：按节点类型 / 名称过滤（如只处理 FRAME/GROUP，或名称含 button 的节点）；
  • 后置处理（afterChildren）：处理子节点后调整父节点（如 collapseSvgContainers 折叠纯 SVG 容器，精简数据）。
4. 自定义提取器

支持按 ExtractorFn 类型编写自定义提取逻辑，适配业务专属需求：

typescript

运行

// 示例：识别设计系统组件（名称以 DS/ 开头）
const designSystemExtractor: ExtractorFn = (node, result, context) => {
  if (node.name.startsWith("DS/")) {
    result.isDesignSystemComponent = true;
    result.dsCategory = node.name.split("/")[1];
  }
};
// 组合使用：布局 + 自定义设计系统提取器
const data = extractFromDesign(nodes, [layoutExtractor, designSystemExtractor]);
5. LLM 上下文优化

针对 LLM 不同处理阶段，按需提取数据，减少上下文体积：

typescript

运行

// 示例：按 LLM 阶段提取不同数据
function extractForLLM(nodes, phase) {
  switch (phase) {
    case "structure": return extractFromDesign(nodes, layoutOnly, { maxDepth: 3 }); // 仅结构
    case "content": return extractFromDesign(nodes, contentOnly); // 仅文本
    case "styling": return extractFromDesign(nodes, visualsOnly, { maxDepth: 2 }); // 仅样式
    case "full": return extractFromDesign(nodes, allExtractors); // 全量
  }
}

五、与其他模块的关联

extractors 是连接「Figma 原始数据」和「MCP 工具」的核心桥梁：

  1. 依赖层：调用 transformers 模块（layout.ts/text.ts/style.ts 等），将 Figma 原始属性转为标准化格式；
  2. 被依赖层：MCP 工具（get-figma-data-tool.ts）调用 simplifyRawFigmaObject，使用 allExtractors 提取全量数据，精简后返回给 AI 客户端（如 Cursor/VS Code）。

六、核心价值总结

extractors 模块的核心作用是：将「Figma 原始、冗余的 API 数据」转化为「LLM 友好、精简、可定制的标准化数据」，通过「单遍遍历 + 可组合提取器」兼顾效率与灵活性，最终让 AI 能更精准地基于 Figma 设计生成代码 / 分析内容。extractors 是 Figma-Context-MCP 项目中对 Figma 原始设计数据进行「灵活、高效、可定制提取与标准化」的核心模块，核心目标是从 Figma API 返回的原始数据中，按需提取关键信息（布局、文本、样式、组件等），并转化为适合 LLM（大语言模型）消费的精简格式，最大化利用 LLM 上下文窗口，提升 AI 处理 Figma 设计的准确性。

一、核心定位与设计理念

extractors 解决了 Figma 原始 API 数据「冗余、结构复杂、不适合 LLM 直接消费」的问题，核心设计原则：

特性 说明
单遍遍历（Single Tree Walk） 无论组合多少提取器，仅遍历一次 Figma 节点树，避免重复计算，效率极高
可组合（Composable） 内置提取器可自由组合（如「布局 + 文本」「仅视觉样式」），适配不同场景
可扩展（Extensible） 支持自定义提取器，适配业务专属逻辑（如识别设计系统组件）
上下文优化 按需提取数据，减少冗余，适配 LLM 上下文窗口大小，提升 AI 响应质量
类型安全 全 TypeScript 类型覆盖，避免类型错误

二、核心架构分层

模块严格遵循「分层设计」，职责清晰：

  1. 策略层（Strategy Layer）：定义「要提取什么」—— 即提取器函数（ExtractorFn），包括内置 / 自定义提取逻辑；
  2. 遍历层（Traversal Layer）：定义「怎么遍历」—— 单遍遍历 Figma 节点树，执行提取器，处理深度 / 过滤规则（核心：node-walker.ts）；
  3. 提取层（Extraction Layer）：定义「怎么转换」—— 纯函数将单个节点的原始属性转为标准化格式（如布局→CSS 友好格式、文本样式→精简对象）。

三、核心文件与职责

文件 核心职责
types.ts 定义全模块核心类型（如 ExtractorFn 提取器函数类型、SimplifiedNode 标准化节点、TraversalContext 遍历上下文），是类型安全的基础
node-walker.ts 实现核心遍历逻辑：extractFromDesign 函数，单遍遍历节点树，应用提取器，支持深度限制、节点过滤、子节点后置处理
design-extractor.ts 对接 Figma API 原始响应（GetFileResponse/GetFileNodesResponse），整合节点、组件、样式数据，调用 node-walker 完成全量提取，暴露 simplifyRawFigmaObject 函数
built-in.ts 实现所有内置提取器 + 便捷组合 + 辅助函数：1. 单个提取器（布局 / 文本 / 视觉 / 组件）；2. 组合提取器（如 layoutAndText）；3. 辅助函数（如 collapseSvgContainers 折叠 SVG 容器）
index.ts 统一导出模块的类型、核心函数（如 extractFromDesign）、内置提取器，对外提供简洁的使用入口
README.md 模块使用文档，包含用法、自定义提取器、LLM 上下文优化等示例

四、核心功能拆解

1. 内置提取器（核心能力）

built-in.ts 实现了 4 个基础提取器，可单独 / 组合使用：

提取器 提取内容 适用场景
layoutExtractor 节点布局属性（位置、尺寸、弹性布局、对齐方式等），转为 SimplifiedLayout 结构分析、生成布局代码
textExtractor 文本内容 + 文本样式（字体、字号、行高、对齐、大小写等） 文案提取、内容分析、生成文本样式
visualsExtractor 视觉样式（填充 / 描边 / 阴影 / 透明度 / 圆角），转为 CSS 友好格式 设计系统分析、生成样式代码
componentExtractor 组件实例属性（组件 ID、变体参数、自定义属性） 组件化开发、生成组件代码
2. 便捷组合提取器

为简化使用，内置「常用组合」，覆盖典型场景：

组合提取器 包含的基础提取器 适用场景
allExtractors 所有基础提取器 全量数据提取（兼容原有逻辑）
layoutAndText layoutExtractor + textExtractor 内容分析、布局规划
contentOnly textExtractor 文案审计、纯文本提取
visualsOnly visualsExtractor 设计系统分析、样式提取
layoutOnly layoutExtractor 仅分析页面 / 组件结构
3. 灵活的配置能力

支持通过「遍历选项」定制提取逻辑，适配不同需求：

  • 深度限制（maxDepth）：控制节点树遍历深度（如只提取前 3 层，减少冗余）；
  • 节点过滤（nodeFilter）：按节点类型 / 名称过滤（如只处理 FRAME/GROUP，或名称含 button 的节点）；
  • 后置处理（afterChildren）：处理子节点后调整父节点（如 collapseSvgContainers 折叠纯 SVG 容器，精简数据）。
4. 自定义提取器

支持按 ExtractorFn 类型编写自定义提取逻辑，适配业务专属需求：

typescript

运行

// 示例：识别设计系统组件（名称以 DS/ 开头）
const designSystemExtractor: ExtractorFn = (node, result, context) => {
  if (node.name.startsWith("DS/")) {
    result.isDesignSystemComponent = true;
    result.dsCategory = node.name.split("/")[1];
  }
};
// 组合使用：布局 + 自定义设计系统提取器
const data = extractFromDesign(nodes, [layoutExtractor, designSystemExtractor]);
5. LLM 上下文优化

针对 LLM 不同处理阶段，按需提取数据，减少上下文体积：

typescript

运行

// 示例：按 LLM 阶段提取不同数据
function extractForLLM(nodes, phase) {
  switch (phase) {
    case "structure": return extractFromDesign(nodes, layoutOnly, { maxDepth: 3 }); // 仅结构
    case "content": return extractFromDesign(nodes, contentOnly); // 仅文本
    case "styling": return extractFromDesign(nodes, visualsOnly, { maxDepth: 2 }); // 仅样式
    case "full": return extractFromDesign(nodes, allExtractors); // 全量
  }
}

五、与其他模块的关联

extractors 是连接「Figma 原始数据」和「MCP 工具」的核心桥梁：

  1. 依赖层：调用 transformers 模块（layout.ts/text.ts/style.ts 等），将 Figma 原始属性转为标准化格式；
  2. 被依赖层：MCP 工具（get-figma-data-tool.ts）调用 simplifyRawFigmaObject，使用 allExtractors 提取全量数据，精简后返回给 AI 客户端（如 Cursor/VS Code）。

六、核心价值总结

extractors 模块的核心作用是：将「Figma 原始、冗余的 API 数据」转化为「LLM 友好、精简、可定制的标准化数据」，通过「单遍遍历 + 可组合提取器」兼顾效率与灵活性，最终让 AI 能更精准地基于 Figma 设计生成代码 / 分析内容。

# figma # 状态模式
Logo
2048 AI社区

有“AI”的1024 = 2048，欢迎大家加入2048 AI社区

更多推荐

Gemini认证：AI职业发展的黄金通行证

Gemini认证是AI领域的重要专业资质，涵盖机器学习、自然语言处理等核心技术，主要面向开发者与数据科学家。该认证通过验证专业技能提升职业竞争力，获得企业广泛认可，可助力薪资增长与职位晋升。备考需重点掌握深度学习框架与AI伦理规范，推荐结合官方教材与实践项目。认证与AI产品经理等新兴岗位高度契合，并具有国际就业优势。随着技术迭代，认证内容将持续更新，在医疗、金融等垂直领域应用前景广阔，是AI从业者

avatar 2048 AI社区

【AI测试全栈：质量】45、Kubernetes云原生AI服务测试全实战：从容器化到多租户隔离（附Kind集群实操+踩坑指南）

云原生AI服务测试实战指南 本文针对Kubernetes环境下AI服务的特殊需求，提供了一套完整的测试方法论和实操指南。文章首先分析了云原生AI服务的核心架构，重点突出了GPU适配、模型持久化、推理性能等关键测试维度。随后详细介绍了五大核心测试模块：容器化测试、资源调度测试、弹性伸缩测试、服务网格测试和多租户隔离测试。 测试方案基于Kind本地集群，整合了Docker、Helm等云原生工具链，并特

avatar 2048 AI社区

存储系统核心技术全解析

本文系统梳理了存储技术体系，从基础架构到前沿趋势：1）硬件层面分析HDD/SSD/NVM介质特性及SATA/NVMe协议差异；2）软件层面详解文件系统结构、日志恢复及缓存优化策略；3）分布式场景探讨CAP理论与RAID/纠删码技术；4）前瞻方向包括SCM内存、存算一体架构和量子存储研究。通过多层次技术解析，呈现了存储系统设计中的性能、可靠性与成本平衡机制。

avatar 2048 AI社区