AI 设计助手：从 Figma 插件到设计系统自动生成的工程实践

一、设计工作的重复性困境：为什么设计师 80% 的时间在做"搬砖"

UI 设计中有大量重复性工作：调整组件间距使其符合 8px 网格、为不同状态（Default/Hover/Active/Disabled）生成颜色变体、将设计稿中的样式参数提取为设计 Token、检查新页面是否与现有设计系统一致。这些工作虽然技术含量不高，却占据了设计师 60-80% 的时间，真正用于创意思考的时间被严重压缩。

AI 设计助手的核心目标是自动化这些重复性工作，让设计师专注于创意决策。但"自动化"并非简单地用大模型生成界面——生成的界面往往缺乏设计系统的一致性，且无法与现有组件库对接。更务实的路径是将 AI 作为"设计系统执行者"——设计师做出创意决策，AI 负责将决策转化为符合设计系统规范的完整实现。

二、AI 设计助手的架构：意图理解、约束执行与系统对齐

AI 设计助手的核心挑战是"创意自由度与系统一致性"的平衡。设计师需要自由表达创意意图，但输出必须符合设计系统的约束（间距、颜色、排版、组件规范）。

flowchart TB
    A[设计师输入: 自然语言描述] --> B[意图理解层]
    B --> B1[布局意图: 卡片/列表/网格]
    B --> B2[风格意图: 简约/丰富/商务]
    B --> B3[内容意图: 数据展示/表单/营销]

    B1 & B2 & B3 --> C[约束执行层]
    C --> C1[设计 Token 约束]
    C --> C2[组件库约束]
    C --> C3[布局规则约束]

    C1 & C2 & C3 --> D[生成层]
    D --> D1[Figma 节点树]
    D --> D2[CSS 代码]
    D --> D3[设计 Token JSON]

    D1 & D2 & D3 --> E[验证层]
    E --> E1[间距合规检查]
    E --> E2[颜色合规检查]
    E --> E3[组件使用检查]

    E1 & E2 & E3 --> F[输出: 合规设计稿]

关键设计是"约束执行层"——AI 的生成结果必须通过设计系统约束的验证，不合规的输出会被自动修正或拒绝。这确保了 AI 输出与设计系统的一致性，而非"看起来不错但不合规"的结果。

三、AI 设计助手的代码实现

3.1 设计 Token 约束引擎

/**
 * 设计 Token 约束引擎
 * 将 AI 生成的设计参数对齐到设计系统规范
 */
interface DesignTokens {
  spacing: Record<string, number>;   // 间距 Token
  colors: Record<string, string>;    // 颜色 Token
  typography: Record<string, {       // 排版 Token
    fontSize: number;
    lineHeight: number;
    fontWeight: number;
  }>;
  radii: Record<string, number>;     // 圆角 Token
}

class TokenConstraintEngine {
  private tokens: DesignTokens;

  constructor(tokens: DesignTokens) {
    this.tokens = tokens;
  }

  /**
   * 将任意间距值对齐到最近的间距 Token
   * 设计系统使用 8px 基础网格
   */
  alignSpacing(value: number): { token: string; value: number } {
    const spacingEntries = Object.entries(this.tokens.spacing);

    // 找到最接近的 Token
    let closest = spacingEntries[0];
    let minDiff = Math.abs(value - closest[1]);

    for (const [name, tokenValue] of spacingEntries) {
      const diff = Math.abs(value - tokenValue);
      if (diff < minDiff) {
        minDiff = diff;
        closest = [name, tokenValue];
      }
    }

    return { token: closest[0], value: closest[1] };
  }

  /**
   * 将任意颜色值对齐到最近的调色板 Token
   * 使用 CIEDE2000 色差公式计算感知距离
   */
  alignColor(hex: string): { token: string; value: string } {
    const targetLab = this.hexToLab(hex);
    const colorEntries = Object.entries(this.tokens.colors);

    let closest = colorEntries[0];
    let minDelta = Infinity;

    for (const [name, tokenHex] of colorEntries) {
      const tokenLab = this.hexToLab(tokenHex);
      const delta = this.ciede2000(targetLab, tokenLab);
      if (delta < minDelta) {
        minDelta = delta;
        closest = [name, tokenHex];
      }
    }

    return { token: closest[0], value: closest[1] };
  }

  /**
   * HEX 转 LAB 色彩空间
   * LAB 空间中的欧氏距离更接近人眼感知差异
   */
  private hexToLab(hex: string): [number, number, number] {
    // HEX → RGB → XYZ → LAB 转换
    const r = parseInt(hex.slice(1, 3), 16) / 255;
    const g = parseInt(hex.slice(3, 5), 16) / 255;
    const b = parseInt(hex.slice(5, 7), 16) / 255;

    // sRGB 线性化
    const linearize = (c: number) =>
      c > 0.04045 ? Math.pow((c + 0.055) / 1.055, 2.4) : c / 12.92;

    const lr = linearize(r), lg = linearize(g), lb = linearize(b);

    // XYZ 转换（D65 白点）
    const x = (lr * 0.4124 + lg * 0.3576 + lb * 0.1805) / 0.95047;
    const y = (lr * 0.2126 + lg * 0.7152 + lb * 0.0722) / 1.00000;
    const z = (lr * 0.0193 + lg * 0.1192 + lb * 0.9505) / 1.08883;

    // XYZ → LAB
    const f = (t: number) =>
      t > 0.008856 ? Math.pow(t, 1 / 3) : (903.3 * t + 16) / 116;

    const L = 116 * f(y) - 16;
    const A = 500 * (f(x) - f(y));
    const B = 200 * (f(y) - f(z));

    return [L, A, B];
  }

  /**
   * CIEDE2000 色差计算（简化版）
   * 感知均匀的色差度量
   */
  private ciede2000(
    lab1: [number, number, number],
    lab2: [number, number, number]
  ): number {
    const dL = lab2[0] - lab1[0];
    const da = lab2[1] - lab1[1];
    const db = lab2[2] - lab1[2];
    // 简化：使用欧氏距离近似
    return Math.sqrt(dL * dL + da * da + db * db);
  }
}

3.2 意图理解与布局生成

/**
 * 设计意图理解器
 * 将自然语言描述解析为结构化布局指令
 */
interface LayoutIntent {
  type: "card" | "list" | "grid" | "form" | "dashboard";
  columns: number;
  density: "compact" | "comfortable" | "spacious";
  style: "minimal" | "standard" | "rich";
  components: ComponentSpec[];
}

interface ComponentSpec {
  type: string;       // 组件类型：button, input, card, table...
  variant: string;    // 变体：primary, secondary, ghost...
  size: string;       // 尺寸：sm, md, lg
  props: Record<string, any>;
}

class DesignIntentParser {
  /**
   * 解析自然语言描述为布局意图
   * 使用关键词匹配 + 规则引擎（非大模型调用）
   */
  parse(description: string): LayoutIntent {
    const intent: LayoutIntent = {
      type: "card",
      columns: 1,
      density: "comfortable",
      style: "standard",
      components: [],
    };

    // 布局类型识别
    if (/列表|清单|list/i.test(description)) {
      intent.type = "list";
    } else if (/网格|宫格|grid/i.test(description)) {
      intent.type = "grid";
      intent.columns = this.extractColumns(description);
    } else if (/表单|填写|form/i.test(description)) {
      intent.type = "form";
    } else if (/仪表盘|看板|dashboard/i.test(description)) {
      intent.type = "dashboard";
    }

    // 密度识别
    if (/紧凑|compact|密集/i.test(description)) {
      intent.density = "compact";
    } else if (/宽松|spacious|留白/i.test(description)) {
      intent.density = "spacious";
    }

    // 风格识别
    if (/简约|minimal|极简/i.test(description)) {
      intent.style = "minimal";
    } else if (/丰富|rich|华丽/i.test(description)) {
      intent.style = "rich";
    }

    // 组件提取
    intent.components = this.extractComponents(description);

    return intent;
  }

  private extractColumns(desc: string): number {
    const match = desc.match(/(\d)[列栏列]/);
    return match ? parseInt(match[1]) : 3;
  }

  private extractComponents(desc: string): ComponentSpec[] {
    const components: ComponentSpec[] = [];
    const componentPatterns: Record<string, string> = {
      "按钮|button": "button",
      "输入框|input": "input",
      "卡片|card": "card",
      "表格|table": "table",
      "标签|tag": "tag",
      "头像|avatar": "avatar",
    };

    for (const [pattern, type] of Object.entries(componentPatterns)) {
      if (new RegExp(pattern, "i").test(desc)) {
        components.push({
          type,
          variant: "primary",
          size: "md",
          props: {},
        });
      }
    }

    return components;
  }
}

3.3 Figma 插件集成

/**
 * Figma 插件：AI 设计助手
 * 在 Figma 中直接调用 AI 生成能力
 */

// 插件入口
figma.showUI(__html__, { width: 360, height: 540 });

// 监听来自 UI 的消息
figma.ui.onmessage = async (msg) => {
  if (msg.type === "generate-layout") {
    const intent = new DesignIntentParser().parse(msg.description);
    const nodes = generateLayout(intent);
    figma.currentPage.appendChild(nodes);
    figma.viewport.scrollAndZoomIntoView([nodes]);
  }
};

/**
 * 根据布局意图生成 Figma 节点树
 */
function generateLayout(intent: LayoutIntent): FrameNode {
  const tokens = loadDesignTokens();
  const engine = new TokenConstraintEngine(tokens);

  // 创建容器 Frame
  const container = figma.createFrame();
  container.name = `AI Generated: ${intent.type}`;
  container.layoutMode = intent.type === "grid" ? "HORIZONTAL" : "VERTICAL";

  // 应用间距 Token
  const gap = engine.alignSpacing(
    intent.density === "compact" ? 8 :
    intent.density === "spacious" ? 24 : 16
  );
  container.itemSpacing = gap.value;

  // 应用内边距 Token
  const padding = engine.alignSpacing(
    intent.density === "compact" ? 12 :
    intent.density === "spacious" ? 32 : 20
  );
  container.paddingLeft = padding.value;
  container.paddingRight = padding.value;
  container.paddingTop = padding.value;
  container.paddingBottom = padding.value;

  // 生成组件节点
  for (const spec of intent.components) {
    const componentNode = createComponentNode(spec, engine);
    container.appendChild(componentNode);
  }

  return container;
}

四、AI 设计助手的创意局限与系统约束的冲突

意图理解的精度瓶颈：基于关键词匹配的意图解析无法理解模糊或复杂的描述。例如"做一个像 Airbnb 那样的首页"需要理解 Airbnb 的设计语言、布局模式和交互范式，远超关键词匹配的能力。引入大模型可以提升理解精度，但增加了延迟（1-3 秒）和成本，且输出不确定性增大。建议对高频意图使用规则引擎（低延迟、确定性），对模糊意图回退到大模型。

约束修正的过度矫正：当 AI 生成的颜色或间距与最近 Token 差距较大时，强制对齐可能导致视觉效果偏离设计师意图。例如设计师指定了 13px 间距（接近 12px Token），对齐到 12px 是合理的；但如果指定了 15px，对齐到 16px 可能改变了视觉节奏。建议设置对齐阈值——差距小于 2px 时自动对齐，超过时提示设计师确认。

组件库的覆盖范围限制：AI 只能生成组件库中已有的组件类型。如果设计师需要组件库中没有的新组件（如自定义图表），AI 无法生成，需要回退到手动创建。建议在 AI 生成失败时提供"最接近的替代组件"建议，而非直接报错。

Figma API 的性能限制：Figma 插件通过 API 创建节点，大量节点创建时性能会显著下降。一个包含 50+ 组件的复杂布局可能需要 5-10 秒生成。建议对大型布局采用分步生成策略——先创建骨架结构，再逐步填充内容，并显示进度条。

五、总结

AI 设计助手的核心架构是"意图理解 → 约束执行 → 生成验证"三层模型。约束执行层确保 AI 输出与设计系统一致，是区别于通用 AI 生成工具的关键。落地时建议从"设计 Token 对齐"开始——先实现间距和颜色的自动对齐，验证效果后再扩展到布局生成和组件推荐。意图理解优先使用规则引擎（低延迟），模糊意图回退到大模型。Figma 插件集成时注意 API 性能限制，大型布局采用分步生成策略。