@atomixstudio/mcp 1.0.16 → 1.0.19

package/dist/index.js

@@ -1,4 +1,8 @@
 #!/usr/bin/env node
+import {
+  isAllowedMethod,
+  normalizeBridgeMethod
+} from "./chunk-FFAGTYRZ.js";
 
 // src/index.ts
 import { Server } from "@modelcontextprotocol/sdk/server/index.js";
@@ -12,13 +16,12 @@ import {
   GetPromptRequestSchema
 } from "@modelcontextprotocol/sdk/types.js";
 
-// node_modules/.pnpm/@atomixstudio+sync-core@file+..+atomix-sync-core/node_modules/@atomixstudio/sync-core/dist/index.js
+// ../atomix-sync-core/dist/index.js
 import * as fs from "fs";
 import * as path from "path";
 import * as path3 from "path";
 function generateETag(meta) {
-  const ts = meta.updatedAt ?? meta.exportedAt ?? "";
-  const hash = `${meta.version}-${ts}`;
+  const hash = `${meta.version}-${meta.updatedAt}`;
   return `"v${hash}"`;
 }
 function compareDesignSystems(cached, fresh) {
@@ -221,7 +224,7 @@ function detectGovernanceChangesByFoundation(cached, fresh) {
   return changes;
 }
 async function fetchDesignSystem(options) {
-  const { dsId: dsId2, apiKey: apiKey2, apiBase: apiBase2 = "https://atomixstudio.eu", etag, forceRefresh = false } = options;
+  const { dsId: dsId2, apiKey: apiKey2, accessToken: accessToken2, apiBase: apiBase2 = "https://atomixstudio.eu", etag, forceRefresh = false } = options;
   if (!dsId2) {
     throw new Error("Missing dsId. Usage: fetchDesignSystem({ dsId: '...' })");
   }
@@ -229,7 +232,9 @@ async function fetchDesignSystem(options) {
   const headers = {
     "Content-Type": "application/json"
   };
-  if (apiKey2) {
+  if (accessToken2) {
+    headers["Authorization"] = `Bearer ${accessToken2}`;
+  } else if (apiKey2) {
     headers["x-api-key"] = apiKey2;
   }
   if (etag) {
@@ -249,7 +254,7 @@ async function fetchDesignSystem(options) {
   }
   const data = await response.json();
   const responseETag = response.headers.get("etag");
-  const finalETag = responseETag || generateETag(data.meta);
+  const finalETag = responseETag || generateETag({ version: data.meta.version, updatedAt: data.meta.exportedAt });
   const designSystemData = {
     tokens: data.tokens,
     cssVariables: data.cssVariables,
@@ -1286,10 +1291,456 @@ function getTokenStats(data) {
 // src/index.ts
 import * as path2 from "path";
 import * as fs2 from "fs";
+import WebSocket, { WebSocketServer } from "ws";
+var FIGMA_BRIDGE_PORT = Number(process.env.FIGMA_BRIDGE_PORT) || 8765;
+var FIGMA_BRIDGE_HOST = process.env.FIGMA_BRIDGE_HOST || "127.0.0.1";
+var FIGMA_BRIDGE_TIMEOUT_MS = 15e3;
+var FIGMA_BRIDGE_TOKEN = process.env.FIGMA_BRIDGE_TOKEN || null;
+var FIGMA_CONNECTION_INSTRUCTIONS = {
+  installAndRun: "In Figma: Open Plugins and run the Atomix plugin (Atomix Token Extractor). If it's not installed yet, install it from the Figma Community or your team's plugin library, then run it.",
+  connect: 'In the plugin UI, tap **Connect to Cursor** and wait until the status shows "Connected".',
+  startBridge: "The Figma bridge runs with this MCP server. Ensure Cursor has started this MCP server (e.g. in Cursor settings), then in Figma run the Atomix plugin and click Connect to Cursor."
+};
+var bridgeWss = null;
+var pluginWs = null;
+var pendingBridgeRequests = /* @__PURE__ */ new Map();
+function startFigmaBridge() {
+  if (bridgeWss) return;
+  try {
+    bridgeWss = new WebSocketServer({
+      host: FIGMA_BRIDGE_HOST,
+      port: FIGMA_BRIDGE_PORT,
+      clientTracking: true
+    });
+    bridgeWss.on("connection", (ws, req) => {
+      const url = req.url || "";
+      const params = new URLSearchParams(url.startsWith("/") ? url.slice(1) : url);
+      const token = params.get("token");
+      const role = params.get("role");
+      if (FIGMA_BRIDGE_TOKEN && token !== FIGMA_BRIDGE_TOKEN) {
+        ws.close(4003, "Invalid or missing bridge token");
+        return;
+      }
+      if (role !== "plugin") {
+        ws.close(4002, "Only role=plugin is accepted (bridge runs in MCP server)");
+        return;
+      }
+      if (pluginWs) {
+        try {
+          pluginWs.close();
+        } catch (_) {
+        }
+        pluginWs = null;
+      }
+      pluginWs = ws;
+      ws.on("message", (raw) => {
+        const text = typeof raw === "string" ? raw : raw.toString("utf8");
+        let msg;
+        try {
+          msg = JSON.parse(text);
+        } catch {
+          return;
+        }
+        const parsed = msg;
+        if (parsed?.type === "ping" && typeof parsed.id === "string") {
+          try {
+            ws.send(JSON.stringify({ type: "pong", id: parsed.id }));
+          } catch (_) {
+          }
+          return;
+        }
+        if (typeof parsed.id === "string" && ("result" in parsed || "error" in parsed)) {
+          const pending = pendingBridgeRequests.get(parsed.id);
+          if (pending) {
+            clearTimeout(pending.timeout);
+            pendingBridgeRequests.delete(parsed.id);
+            if (parsed.error) pending.reject(new Error(parsed.error));
+            else pending.resolve(parsed.result);
+          }
+        }
+      });
+      ws.on("close", () => {
+        if (pluginWs === ws) pluginWs = null;
+      });
+      ws.on("error", () => {
+        if (pluginWs === ws) pluginWs = null;
+      });
+    });
+    bridgeWss.on("listening", () => {
+      console.error(`[atomix-mcp] Figma bridge listening on ws://${FIGMA_BRIDGE_HOST}:${FIGMA_BRIDGE_PORT} (local only)`);
+      if (FIGMA_BRIDGE_TOKEN) {
+        console.error("[atomix-mcp] Figma bridge token required (FIGMA_BRIDGE_TOKEN)");
+      }
+    });
+    bridgeWss.on("error", (err) => {
+      console.error("[atomix-mcp] Figma bridge server error:", err);
+    });
+  } catch (err) {
+    console.error("[atomix-mcp] Failed to start Figma bridge:", err);
+  }
+}
+function closeFigmaBridge() {
+  if (pluginWs) {
+    try {
+      pluginWs.close();
+    } catch (_) {
+    }
+    pluginWs = null;
+  }
+  if (bridgeWss) {
+    try {
+      bridgeWss.close();
+    } catch (_) {
+    }
+    bridgeWss = null;
+  }
+}
+function isBridgeReachable() {
+  return Promise.resolve(!!(pluginWs && pluginWs.readyState === WebSocket.OPEN));
+}
+function sendBridgeRequest(method, params, timeoutMs = FIGMA_BRIDGE_TIMEOUT_MS) {
+  const normalized = normalizeBridgeMethod(method);
+  if (!isAllowedMethod(normalized)) {
+    return Promise.reject(new Error(`Bridge method not allowed: ${method}`));
+  }
+  const ws = pluginWs;
+  if (!ws || ws.readyState !== WebSocket.OPEN) {
+    return Promise.reject(
+      new Error("Figma plugin not connected. Open Figma, run Atomix plugin, and click Connect to Cursor.")
+    );
+  }
+  const id = `mcp-${Date.now()}-${Math.random().toString(36).slice(2, 9)}`;
+  return new Promise((resolve4, reject) => {
+    const timeout = setTimeout(() => {
+      if (pendingBridgeRequests.delete(id)) {
+        reject(new Error("Figma bridge timeout. " + FIGMA_CONNECTION_INSTRUCTIONS.startBridge + " Then " + FIGMA_CONNECTION_INSTRUCTIONS.connect));
+      }
+    }, timeoutMs);
+    pendingBridgeRequests.set(id, { resolve: resolve4, reject, timeout });
+    try {
+      ws.send(JSON.stringify({ id, method: normalized, params }));
+    } catch (e) {
+      pendingBridgeRequests.delete(id);
+      clearTimeout(timeout);
+      reject(e instanceof Error ? e : new Error(String(e)));
+    }
+  });
+}
+function figmaColorNameWithGroup(key) {
+  if (key.includes("/")) {
+    const [group2, ...rest] = key.split("/");
+    const name2 = rest.join("/").trim();
+    if (!name2) return key;
+    const groupDisplay2 = group2.charAt(0).toUpperCase() + group2.slice(1).toLowerCase();
+    return `${groupDisplay2} / ${name2}`;
+  }
+  const firstDash = key.indexOf("-");
+  if (firstDash <= 0) return key;
+  const group = key.slice(0, firstDash);
+  const name = key.slice(firstDash + 1);
+  const groupDisplay = group.charAt(0).toUpperCase() + group.slice(1).toLowerCase();
+  return `${groupDisplay} / ${name}`;
+}
+function tokenValueToNumber(s) {
+  if (typeof s !== "string" || !s.trim()) return 0;
+  const t = s.trim();
+  if (t.endsWith("rem")) {
+    const n2 = parseFloat(t.replace(/rem$/, ""));
+    return Number.isFinite(n2) ? Math.round(n2 * 16) : 0;
+  }
+  if (t.endsWith("px")) {
+    const n2 = parseFloat(t.replace(/px$/, ""));
+    return Number.isFinite(n2) ? Math.round(n2) : 0;
+  }
+  const n = parseFloat(t);
+  return Number.isFinite(n) ? n : 0;
+}
+function parseBoxShadowToFigmaEffect(shadowStr) {
+  const s = shadowStr.trim();
+  if (!s || s.toLowerCase() === "none") return null;
+  const parsePx = (x) => typeof x === "string" ? parseFloat(x.replace(/px$/i, "")) : NaN;
+  const colorMatch = s.match(/(rgba?\s*\([^)]+\)|#[0-9A-Fa-f]{3,8})\s*$/i);
+  const colorStr = colorMatch ? colorMatch[1].trim() : void 0;
+  const rest = (colorMatch ? s.slice(0, colorMatch.index) : s).trim();
+  const parts = rest ? rest.split(/\s+/) : [];
+  if (parts.length < 3) return null;
+  const offsetX = parsePx(parts[0]);
+  const offsetY = parsePx(parts[1]);
+  const blur = parsePx(parts[2]);
+  let spread = 0;
+  if (parts.length >= 4) spread = parsePx(parts[3]);
+  let r = 0, g = 0, b = 0, a = 0.1;
+  if (colorStr) {
+    const rgbaMatch = colorStr.match(/rgba?\s*\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*(?:,\s*([\d.]+)\s*)?\)/i);
+    if (rgbaMatch) {
+      r = Number(rgbaMatch[1]) / 255;
+      g = Number(rgbaMatch[2]) / 255;
+      b = Number(rgbaMatch[3]) / 255;
+      a = rgbaMatch[4] != null ? parseFloat(rgbaMatch[4]) : 1;
+    } else {
+      const hexMatch = colorStr.match(/^#?([0-9A-Fa-f]{6})([0-9A-Fa-f]{2})?$/);
+      if (hexMatch) {
+        r = parseInt(hexMatch[1].slice(0, 2), 16) / 255;
+        g = parseInt(hexMatch[1].slice(2, 4), 16) / 255;
+        b = parseInt(hexMatch[1].slice(4, 6), 16) / 255;
+        a = hexMatch[2] ? parseInt(hexMatch[2], 16) / 255 : 0.1;
+      }
+    }
+  }
+  if (!Number.isFinite(offsetX) || !Number.isFinite(offsetY) || !Number.isFinite(blur)) return null;
+  return {
+    type: "DROP_SHADOW",
+    offset: { x: offsetX, y: offsetY },
+    radius: Math.max(0, blur),
+    spread: Number.isFinite(spread) ? spread : 0,
+    color: { r, g, b, a },
+    visible: true,
+    blendMode: "NORMAL"
+  };
+}
+function parseBoxShadowToFigmaEffects(shadowStr) {
+  const s = (shadowStr || "").trim();
+  if (!s || s.toLowerCase() === "none") return [];
+  const out = [];
+  const segments = s.split(/\s*,\s*/);
+  for (const seg of segments) {
+    const effect = parseBoxShadowToFigmaEffect(seg.trim());
+    if (effect) out.push(effect);
+  }
+  return out;
+}
+function buildFigmaPayloadsFromDS(data) {
+  const tokens = data.tokens;
+  const colors = tokens?.colors;
+  const typography = tokens?.typography;
+  const modes = [];
+  const variables = [];
+  const paintStyles = [];
+  const hexRe = /^#?[0-9A-Fa-f]{6}([0-9A-Fa-f]{2})?$/;
+  const addedNames = /* @__PURE__ */ new Set();
+  if (colors?.modes) {
+    const light = colors.modes.light ?? {};
+    const dark = colors.modes.dark ?? {};
+    if (Object.keys(light).length > 0) modes.push("Light");
+    if (Object.keys(dark).length > 0 && !modes.includes("Dark")) modes.push("Dark");
+    if (modes.length === 0) modes.push("Light");
+    const allKeys = /* @__PURE__ */ new Set([...Object.keys(light), ...Object.keys(dark)]);
+    for (const key of allKeys) {
+      const lightHex = light[key];
+      const darkHex = dark[key];
+      if (typeof lightHex === "string" && hexRe.test(lightHex)) {
+        const figmaName = figmaColorNameWithGroup(key);
+        if (addedNames.has(figmaName)) continue;
+        addedNames.add(figmaName);
+        const values = {};
+        if (modes.includes("Light")) values.Light = lightHex;
+        if (modes.includes("Dark")) values.Dark = typeof darkHex === "string" && hexRe.test(darkHex) ? darkHex : lightHex;
+        variables.push({ name: figmaName, values });
+        paintStyles.push({ name: figmaName, color: lightHex });
+      }
+    }
+  }
+  if (colors?.static?.brand && typeof colors.static.brand === "object") {
+    for (const [key, hex] of Object.entries(colors.static.brand)) {
+      if (typeof hex !== "string" || !hexRe.test(hex)) continue;
+      const figmaName = figmaColorNameWithGroup(`brand/${key}`);
+      if (addedNames.has(figmaName)) continue;
+      addedNames.add(figmaName);
+      paintStyles.push({ name: figmaName, color: hex });
+      if (modes.length === 0) modes.push("Light");
+      const values = {};
+      for (const m of modes) values[m] = hex;
+      variables.push({ name: figmaName, values });
+    }
+  }
+  if (variables.length === 0 && modes.length === 0) modes.push("Light");
+  const collectionName = data.meta?.name ? `${data.meta.name} Colors` : "Atomix Colors";
+  const textStyles = [];
+  const sizeToPx = (val, basePx = 16) => {
+    if (typeof val === "number") return Math.round(val);
+    const s = String(val).trim();
+    const pxMatch = s.match(/^([\d.]+)\s*px$/i);
+    if (pxMatch) return Math.round(parseFloat(pxMatch[1]));
+    const remMatch = s.match(/^([\d.]+)\s*rem$/i);
+    if (remMatch) return Math.round(parseFloat(remMatch[1]) * basePx);
+    const n = parseFloat(s);
+    if (Number.isFinite(n)) return n <= 0 ? basePx : n < 50 ? Math.round(n * basePx) : Math.round(n);
+    return basePx;
+  };
+  const letterSpacingToPx = (val, fontSizePx) => {
+    if (val === void 0 || val === null) return void 0;
+    if (typeof val === "number") return Math.round(val);
+    const s = String(val).trim();
+    const pxMatch = s.match(/^([-\d.]+)\s*px$/i);
+    if (pxMatch) return Math.round(parseFloat(pxMatch[1]));
+    const emMatch = s.match(/^([-\d.]+)\s*em$/i);
+    if (emMatch) return Math.round(parseFloat(emMatch[1]) * fontSizePx);
+    const n = parseFloat(s);
+    return Number.isFinite(n) ? Math.round(n) : void 0;
+  };
+  const firstFont = (obj) => {
+    if (typeof obj === "string") {
+      const match = obj.match(/['"]?([^'",\s]+)['"]?/);
+      return match ? match[1] : "Inter";
+    }
+    if (obj && typeof obj === "object" && !Array.isArray(obj)) {
+      const v = obj.body ?? obj.heading ?? obj.display ?? Object.values(obj)[0];
+      return firstFont(v);
+    }
+    return "Inter";
+  };
+  const fontFamily = typography ? firstFont(typography.fontFamily ?? "Inter") : "Inter";
+  const fontSizeMap = typography?.fontSize;
+  const fontWeightMap = typography?.fontWeight;
+  const lineHeightMap = typography?.lineHeight;
+  const letterSpacingMap = typography?.letterSpacing;
+  const textTransformMap = typography?.textTransform;
+  const textDecorationMap = typography?.textDecoration;
+  if (fontSizeMap && typeof fontSizeMap === "object" && Object.keys(fontSizeMap).length > 0) {
+    for (const [key, sizeVal] of Object.entries(fontSizeMap)) {
+      const fontSize = sizeToPx(sizeVal);
+      if (fontSize <= 0) continue;
+      const lh = lineHeightMap && typeof lineHeightMap === "object" ? lineHeightMap[key] : void 0;
+      const weight = fontWeightMap && typeof fontWeightMap === "object" ? fontWeightMap[key] : void 0;
+      const fontWeight = weight != null ? String(weight) : "400";
+      const letterSpacingPx = letterSpacingToPx(
+        letterSpacingMap && typeof letterSpacingMap === "object" ? letterSpacingMap[key] : void 0,
+        fontSize
+      );
+      const textTransform = textTransformMap && typeof textTransformMap === "object" ? textTransformMap[key] : void 0;
+      const textDecoration = textDecorationMap && typeof textDecorationMap === "object" ? textDecorationMap[key] : void 0;
+      const namePart = key.replace(/-/g, " / ");
+      const style = {
+        name: namePart.startsWith("Typography") ? namePart : `Typography / ${namePart}`,
+        fontFamily,
+        fontWeight,
+        fontSize,
+        lineHeightUnit: "PERCENT",
+        letterSpacingUnit: "PIXELS",
+        ...letterSpacingPx !== void 0 && letterSpacingPx !== 0 ? { letterSpacingValue: letterSpacingPx } : {}
+      };
+      if (lh != null && typeof lh === "number" && lh > 0) {
+        style.lineHeightValue = lh >= 10 ? Math.round(lh / fontSize * 100) : Math.round(lh * 100);
+      } else {
+        style.lineHeightValue = 150;
+      }
+      if (textTransform === "uppercase") style.textCase = "UPPER";
+      else if (textTransform === "lowercase") style.textCase = "LOWER";
+      else if (textTransform === "capitalize") style.textCase = "TITLE";
+      else style.textCase = "ORIGINAL";
+      if (textDecoration === "underline") style.textDecoration = "UNDERLINE";
+      else style.textDecoration = "NONE";
+      textStyles.push(style);
+    }
+  }
+  const textStylesMap = typography?.textStyles;
+  if (textStyles.length === 0 && textStylesMap && typeof textStylesMap === "object") {
+    for (const [styleName, style] of Object.entries(textStylesMap)) {
+      if (!style || typeof style !== "object") continue;
+      const fontSize = sizeToPx(style.fontSize ?? "1rem");
+      const lhStr = style.lineHeight;
+      const lineHeightUnitless = lhStr != null ? lhStr.endsWith("%") ? parseFloat(lhStr) / 100 : sizeToPx(lhStr) / fontSize : 1.5;
+      const payload = {
+        name: styleName.startsWith("Typography") ? styleName : `Typography / ${styleName.replace(/\//g, " / ")}`,
+        fontFamily,
+        fontWeight: String(style.fontWeight ?? "400"),
+        fontSize,
+        lineHeightUnit: "PERCENT",
+        lineHeightValue: Math.round((Number.isFinite(lineHeightUnitless) ? lineHeightUnitless : 1.5) * 100),
+        letterSpacingUnit: "PIXELS",
+        textCase: "ORIGINAL",
+        textDecoration: "NONE"
+      };
+      textStyles.push(payload);
+    }
+  }
+  const numberVariables = [];
+  const dsName = data.meta?.name ?? "Atomix";
+  const primitivesCollectionName = `${dsName} Primitives`;
+  const spacing = tokens?.spacing;
+  if (spacing?.scale && typeof spacing.scale === "object") {
+    for (const [key, val] of Object.entries(spacing.scale)) {
+      const n = tokenValueToNumber(val);
+      if (n >= 0) numberVariables.push({ name: `Spacing / ${key}`, value: n });
+    }
+  }
+  const radius = tokens?.radius;
+  if (radius?.scale && typeof radius.scale === "object") {
+    for (const [key, val] of Object.entries(radius.scale)) {
+      const n = tokenValueToNumber(val);
+      if (n >= 0) numberVariables.push({ name: `Radius / ${key}`, value: n });
+    }
+  }
+  const borders = tokens?.borders;
+  if (borders?.width && typeof borders.width === "object") {
+    for (const [key, val] of Object.entries(borders.width)) {
+      const n = tokenValueToNumber(val);
+      if (n >= 0) numberVariables.push({ name: `Borders / ${key}`, value: n });
+    }
+  }
+  const sizing = tokens?.sizing;
+  if (sizing?.height && typeof sizing.height === "object") {
+    for (const [key, val] of Object.entries(sizing.height)) {
+      const n = tokenValueToNumber(val);
+      if (n >= 0) numberVariables.push({ name: `Height / ${key}`, value: n });
+    }
+  }
+  if (sizing?.icon && typeof sizing.icon === "object") {
+    for (const [key, val] of Object.entries(sizing.icon)) {
+      const n = tokenValueToNumber(val);
+      if (n >= 0) numberVariables.push({ name: `Icon / ${key}`, value: n });
+    }
+  }
+  const layout = tokens?.layout;
+  if (layout?.breakpoint && typeof layout.breakpoint === "object") {
+    for (const [key, val] of Object.entries(layout.breakpoint)) {
+      const n = tokenValueToNumber(val);
+      if (n >= 0) numberVariables.push({ name: `Breakpoint / ${key}`, value: n });
+    }
+  }
+  const effectStyles = [];
+  const shadows = tokens?.shadows;
+  if (shadows?.elevation && typeof shadows.elevation === "object") {
+    for (const [key, val] of Object.entries(shadows.elevation)) {
+      if (typeof val !== "string") continue;
+      const effects = parseBoxShadowToFigmaEffects(val);
+      if (effects.length > 0) {
+        effectStyles.push({
+          name: `Shadow / ${key}`,
+          effects
+        });
+      }
+    }
+  }
+  if (shadows?.focus && typeof shadows.focus === "string") {
+    const effects = parseBoxShadowToFigmaEffects(shadows.focus);
+    if (effects.length > 0) {
+      effectStyles.push({ name: "Shadow / focus", effects });
+    }
+  }
+  return {
+    colorVariables: { collectionName, modes, variables },
+    paintStyles,
+    textStyles,
+    numberVariables: { collectionName: primitivesCollectionName, variables: numberVariables },
+    effectStyles
+  };
+}
+function getExpectedFigmaNamesFromDS(data) {
+  const payloads = buildFigmaPayloadsFromDS(data);
+  return {
+    colorVariableNames: payloads.colorVariables.variables.map((v) => v.name),
+    paintStyleNames: payloads.paintStyles.map((s) => s.name),
+    textStyleNames: payloads.textStyles.map((s) => s.name),
+    effectStyleNames: payloads.effectStyles.map((s) => s.name),
+    numberVariableNames: payloads.numberVariables.variables.map((v) => v.name)
+  };
+}
 function parseArgs() {
   const args = process.argv.slice(2);
   let dsId2 = null;
   let apiKey2 = null;
+  let accessToken2 = null;
   let apiBase2 = null;
   for (let i = 0; i < args.length; i++) {
     if (args[i] === "--ds-id" && args[i + 1]) {
@@ -1298,19 +1749,42 @@ function parseArgs() {
     } else if (args[i] === "--api-key" && args[i + 1]) {
       apiKey2 = args[i + 1];
       i++;
+    } else if (args[i] === "--atomix-token" && args[i + 1]) {
+      accessToken2 = args[i + 1];
+      i++;
     } else if (args[i] === "--api-base" && args[i + 1]) {
       apiBase2 = args[i + 1];
       i++;
     }
   }
-  return { dsId: dsId2, apiKey: apiKey2, apiBase: apiBase2 };
+  return { dsId: dsId2, apiKey: apiKey2, accessToken: accessToken2, apiBase: apiBase2 };
 }
 var cliArgs = parseArgs();
-var { dsId, apiKey } = cliArgs;
+var { dsId, apiKey, accessToken } = cliArgs;
 var apiBase = cliArgs.apiBase || "https://atomixstudio.eu";
 var cachedData = null;
 var cachedETag = null;
+var cachedMcpTier = null;
+var authFailedNoTools = false;
+function hasValidAuthConfig() {
+  return !!(dsId && accessToken);
+}
+var AUTH_REQUIRED_MESSAGE = "Atomix MCP requires authentication. Add both --ds-id and --atomix-token to your MCP config (Settings \u2192 MCP), then restart Cursor. Get your token from Atomix Studio: Export modal or Settings \u2192 Regenerate Atomix access token.";
 var lastChangeSummary = null;
+var FIGMA_TOOL_NAMES = /* @__PURE__ */ new Set([
+  "syncToFigma",
+  "getFigmaVariablesAndStyles",
+  "createDesignPlaceholder",
+  "resolveFigmaIdsForTokens",
+  "designCreateFrame",
+  "designCreateText",
+  "designCreateRectangle",
+  "designSetAutoLayout",
+  "designSetLayoutConstraints",
+  "designAppendChild",
+  "getDesignScreenshot",
+  "finalizeDesignFrame"
+]);
 var lastSyncAffectedTokens = null;
 function getLastChangeSummary() {
   return lastChangeSummary;
@@ -1326,10 +1800,11 @@ ${changes.summary}`);
   }
 }
 async function fetchDesignSystemForMCP(forceRefresh = false) {
-  if (!dsId) throw new Error("Missing --ds-id. Usage: npx @atomixstudio/mcp --ds-id <id>");
+  if (!dsId) throw new Error("Missing --ds-id. Usage: npx @atomixstudio/mcp --ds-id <id> --atomix-token <token>");
+  if (!accessToken) throw new Error("Missing --atomix-token. Get your token from the Export modal or Settings.");
   const result = await fetchDesignSystem({
     dsId,
-    apiKey: apiKey ?? void 0,
+    accessToken,
     apiBase: apiBase ?? void 0,
     etag: forceRefresh ? void 0 : cachedETag ?? void 0,
     forceRefresh
@@ -1338,6 +1813,7 @@ async function fetchDesignSystemForMCP(forceRefresh = false) {
   if (result.status === 304 || !result.data) throw new Error("No design system data (304 or null)");
   cachedData = result.data;
   cachedETag = result.etag;
+  cachedMcpTier = result.data.meta.mcpTier ?? null;
   await updateChangeSummary(result.data);
   return result.data;
 }
@@ -1345,7 +1821,7 @@ var TOKEN_CATEGORIES = ["colors", "typography", "spacing", "sizing", "shadows",
 var server = new Server(
   {
     name: "atomix-mcp-user",
-    version: "1.0.15"
+    version: "1.0.19"
   },
   {
     capabilities: {
@@ -1356,165 +1832,494 @@ var server = new Server(
   }
 );
 server.setRequestHandler(ListToolsRequestSchema, async () => {
-  return {
-    tools: [
-      {
-        name: "getToken",
-        description: "Get a specific design token by its path. Returns the value and CSS variable name.",
-        inputSchema: {
-          type: "object",
-          properties: {
-            path: {
-              type: "string",
-              description: "Token path in dot notation (e.g., 'colors.brand.primary', 'spacing.scale.md')"
-            }
-          },
-          required: ["path"]
-        }
-      },
-      {
-        name: "listTokens",
-        description: "List all tokens in a category (colors, typography, spacing, sizing, shadows, radius, borders, motion, zIndex).",
-        inputSchema: {
-          type: "object",
-          properties: {
-            category: {
-              type: "string",
-              enum: TOKEN_CATEGORIES,
-              description: "Token category to list"
-            },
-            subcategory: {
-              type: "string",
-              description: "Optional subcategory (e.g., 'brand' for colors, 'scale' for spacing)"
-            }
-          },
-          required: ["category"]
-        }
-      },
-      {
-        name: "searchTokens",
-        description: "Search for tokens by name or value.",
-        inputSchema: {
-          type: "object",
-          properties: {
-            query: {
-              type: "string",
-              description: "Search query (matches token paths or values)"
-            }
-          },
-          required: ["query"]
-        }
-      },
-      {
-        name: "validateUsage",
-        description: "Check if a CSS value follows the design system. Detects hardcoded values that should use tokens.",
-        inputSchema: {
-          type: "object",
-          properties: {
-            value: {
-              type: "string",
-              description: "CSS value to validate (e.g., '#ff0000', '16px', 'rgb(0,112,97)')"
-            },
-            context: {
-              type: "string",
-              enum: ["color", "spacing", "radius", "shadow", "typography", "any"],
-              description: "Context of the value to help find the right token"
-            }
-          },
-          required: ["value"]
-        }
-      },
-      {
-        name: "getAIToolRules",
-        description: "Generate design system rules for AI coding tools (Cursor, Copilot, Windsurf, etc.).",
-        inputSchema: {
-          type: "object",
-          properties: {
-            tool: {
-              type: "string",
-              enum: ["cursor", "copilot", "windsurf", "cline", "continue", "zed", "generic", "all"],
-              description: "AI tool to generate rules for. Use 'all' to get rules for all tools."
-            }
+  if (!hasValidAuthConfig()) {
+    authFailedNoTools = true;
+    console.error("[Atomix MCP] Missing --ds-id or --atomix-token. Add both to your MCP config.");
+    throw new Error(AUTH_REQUIRED_MESSAGE);
+  }
+  if (cachedMcpTier === null) {
+    try {
+      await fetchDesignSystemForMCP(true);
+      if (cachedMcpTier === "pro") {
+        console.error("[Atomix MCP] Resolved tier = pro. Figma sync/design tools are available.");
+      } else if (cachedMcpTier === "free") {
+        console.error(
+          "[Atomix MCP] Resolved tier = free. Figma sync/design tools are hidden. Pro tools appear when the DS owner has Pro and the pro_figma_export flag is enabled."
+        );
+      }
+    } catch (err) {
+      const msg = err instanceof Error ? err.message : String(err);
+      authFailedNoTools = true;
+      console.error(
+        "[Atomix MCP] Design system not loaded: ds-id or token invalid or API error. No tools will be shown.",
+        msg.includes("401") ? " Token invalid or expired. Regenerate in Atomix Studio (Settings \u2192 Regenerate Atomix access token), update your MCP config, then restart Cursor." : msg.includes("403") ? " You do not have access to this design system (owner or invited guest)." : msg.includes("404") ? " Design system not found (invalid ds-id)." : msg
+      );
+    }
+  }
+  if (authFailedNoTools) {
+    throw new Error(AUTH_REQUIRED_MESSAGE);
+  }
+  const toolsList = [
+    {
+      name: "getToken",
+      description: "Get a specific design token by its path. Returns the value and CSS variable name.",
+      inputSchema: {
+        type: "object",
+        properties: {
+          path: {
+            type: "string",
+            description: "Token path in dot notation (e.g., 'colors.brand.primary', 'spacing.scale.md')"
+          }
+        },
+        required: ["path"]
+      }
+    },
+    {
+      name: "listTokens",
+      description: "List all tokens in a category (colors, typography, spacing, sizing, shadows, radius, borders, motion, zIndex).",
+      inputSchema: {
+        type: "object",
+        properties: {
+          category: {
+            type: "string",
+            enum: TOKEN_CATEGORIES,
+            description: "Token category to list"
           },
-          required: ["tool"]
-        }
-      },
-      {
-        name: "exportMCPConfig",
-        description: "Generate MCP configuration file for AI tools.",
-        inputSchema: {
-          type: "object",
-          properties: {
-            tool: {
-              type: "string",
-              enum: ["cursor", "claude-desktop", "windsurf", "continue", "vscode", "all"],
-              description: "AI tool to generate MCP config for."
-            }
+          subcategory: {
+            type: "string",
+            description: "Optional subcategory (e.g., 'brand' for colors, 'scale' for spacing)"
+          }
+        },
+        required: ["category"]
+      }
+    },
+    {
+      name: "searchTokens",
+      description: "Search for tokens by name or value.",
+      inputSchema: {
+        type: "object",
+        properties: {
+          query: {
+            type: "string",
+            description: "Search query (matches token paths or values)"
+          }
+        },
+        required: ["query"]
+      }
+    },
+    {
+      name: "validateUsage",
+      description: "Check if a CSS value follows the design system. Detects hardcoded values that should use tokens.",
+      inputSchema: {
+        type: "object",
+        properties: {
+          value: {
+            type: "string",
+            description: "CSS value to validate (e.g., '#ff0000', '16px', 'rgb(0,112,97)')"
           },
-          required: ["tool"]
-        }
-      },
-      {
-        name: "getSetupInstructions",
-        description: "Get detailed setup instructions for a specific AI tool.",
-        inputSchema: {
-          type: "object",
-          properties: {
-            tool: {
-              type: "string",
-              enum: ["cursor", "copilot", "windsurf", "cline", "continue", "zed", "claude-desktop", "generic"],
-              description: "AI tool to get setup instructions for."
-            }
+          context: {
+            type: "string",
+            enum: ["color", "spacing", "radius", "shadow", "typography", "any"],
+            description: "Context of the value to help find the right token"
+          }
+        },
+        required: ["value"]
+      }
+    },
+    {
+      name: "getAIToolRules",
+      description: "Generate design system rules for AI coding tools (Cursor, Copilot, Windsurf, etc.).",
+      inputSchema: {
+        type: "object",
+        properties: {
+          tool: {
+            type: "string",
+            enum: ["cursor", "copilot", "windsurf", "cline", "continue", "zed", "generic", "all"],
+            description: "AI tool to generate rules for. Use 'all' to get rules for all tools."
+          }
+        },
+        required: ["tool"]
+      }
+    },
+    {
+      name: "exportMCPConfig",
+      description: "Generate MCP configuration file for AI tools.",
+      inputSchema: {
+        type: "object",
+        properties: {
+          tool: {
+            type: "string",
+            enum: ["cursor", "claude-desktop", "windsurf", "continue", "vscode", "all"],
+            description: "AI tool to generate MCP config for."
+          }
+        },
+        required: ["tool"]
+      }
+    },
+    {
+      name: "getSetupInstructions",
+      description: "Get detailed setup instructions for a specific AI tool.",
+      inputSchema: {
+        type: "object",
+        properties: {
+          tool: {
+            type: "string",
+            enum: ["cursor", "copilot", "windsurf", "cline", "continue", "zed", "claude-desktop", "generic"],
+            description: "AI tool to get setup instructions for."
+          }
+        },
+        required: ["tool"]
+      }
+    },
+    {
+      name: "syncAll",
+      description: "Sync tokens, AI rules, skills files (SKILL.md, design-in-figma.md), and atomix-dependencies.json. One tool for full project sync. Use /--sync prompt or call when the user wants to sync. Optional: output (default ./tokens.css), format (default css), skipTokens (if true, only writes skills and manifest).",
+      inputSchema: {
+        type: "object",
+        properties: {
+          output: {
+            type: "string",
+            description: "Token file path (e.g. ./tokens.css). Default: ./tokens.css. Ignored if skipTokens is true."
           },
-          required: ["tool"]
-        }
-      },
-      {
-        name: "syncTokens",
-        description: "Sync design tokens to a local file. Safe, never breaks UI - adds new tokens, updates existing values, marks deprecated tokens. Use /refactor to migrate deprecated tokens. WARNING: The output file is completely rewritten - only CSS custom properties (variables) are preserved. Custom CSS rules will be lost. Keep custom CSS in a separate file.",
-        inputSchema: {
-          type: "object",
-          properties: {
-            output: {
-              type: "string",
-              description: "Output file path relative to project root (e.g., './src/tokens.css', './DesignTokens.swift')"
-            },
-            format: {
-              type: "string",
-              enum: ["css", "scss", "less", "json", "ts", "js", "swift", "kotlin", "dart"],
-              description: "Output format. WEB: css, scss, less, json, ts, js. NATIVE: swift (iOS), kotlin (Android), dart (Flutter). Default: css"
-            }
+          format: {
+            type: "string",
+            enum: ["css", "scss", "less", "json", "ts", "js", "swift", "kotlin", "dart"],
+            description: "Token output format. Default: css. Ignored if skipTokens is true."
           },
-          required: ["output"]
-        }
-      },
-      {
-        name: "getDependencies",
-        description: "Get suggested dependencies for this design system (icon package, fonts, SKILL.md, token files). Use with atomix-setup prompt. Optional platform and stack for tailored suggestions.",
-        inputSchema: {
-          type: "object",
-          properties: {
-            platform: {
-              type: "string",
-              enum: ["web", "ios", "android"],
-              description: "Target platform (web, ios, android). Optional."
-            },
-            stack: {
-              type: "string",
-              description: "Stack or framework (e.g. react, vue, next, swift, kotlin). Optional."
-            }
+          skipTokens: {
+            type: "boolean",
+            description: "If true, skip token file and rules sync; only write skills and dependencies manifest. Default: false."
+          }
+        },
+        required: []
+      }
+    },
+    {
+      name: "getDependencies",
+      description: "Get suggested dependencies for this design system (icon package, fonts, SKILL.md, token files). Use with /--get-started prompt. Optional platform and stack for tailored suggestions.",
+      inputSchema: {
+        type: "object",
+        properties: {
+          platform: {
+            type: "string",
+            enum: ["web", "ios", "android"],
+            description: "Target platform (web, ios, android). Optional."
           },
-          required: []
+          stack: {
+            type: "string",
+            description: "Stack or framework (e.g. react, vue, next, swift, kotlin). Optional."
+          }
+        },
+        required: []
+      }
+    },
+    {
+      name: "syncToFigma",
+      description: "Push the owner's design system to Figma: creates color variable collection (Light/Dark), color and paint styles, number variables (spacing, radius, borders, sizing, breakpoints), text styles, and shadow effect styles. Uses local WebSocket bridge and Atomix Figma plugin (no Figma REST API). No arguments. If the bridge is not running, the response includes agentInstruction to start it; only if that fails should the user start the bridge and connect the plugin. Call this when the user asks to 'sync to Figma' or 'push DS to Figma'.",
+      inputSchema: {
+        type: "object",
+        properties: {},
+        required: []
+      }
+    },
+    {
+      name: "getFigmaVariablesAndStyles",
+      description: "Get all local variable collections (with variable names and ids) and local paint, text, and effect styles from the open Figma file. Call after syncToFigma when designing in Figma; use with resolveFigmaIdsForTokens to get ids for granular design commands. Requires Atomix Figma plugin connected.",
+      inputSchema: {
+        type: "object",
+        properties: {},
+        required: []
+      }
+    },
+    {
+      name: "createDesignPlaceholder",
+      description: "Create a placeholder frame in Figma with name 'Atomix: Preparing the design..', temporary background, and 'Design in progress...' text. Call this first when designing in Figma so the user sees the placeholder. Returns frameId; use that as parentId for designCreateFrame and other design commands. Optional width and height (default 400); use dimensions inferred from the request (e.g. mobile 390x844, card 400x300).",
+      inputSchema: {
+        type: "object",
+        properties: {
+          width: { type: "number", description: "Frame width in px (optional, default 400)" },
+          height: { type: "number", description: "Frame height in px (optional, default 400)" }
         }
       }
-    ]
-  };
+    },
+    {
+      name: "resolveFigmaIdsForTokens",
+      description: "Resolve design system token names to Figma variable and style ids in the open file. Call after syncToFigma and getFigmaVariablesAndStyles. Returns a map keyed by Figma name (e.g. 'Spacing / lg', 'Background / surface') to { variableId?, paintStyleId?, textStyleId?, effectStyleId? }. Use these ids in designCreateFrame, designCreateText, designSetAutoLayout, etc. No arguments.",
+      inputSchema: {
+        type: "object",
+        properties: {},
+        required: []
+      }
+    },
+    {
+      name: "designCreateFrame",
+      description: "Create a frame in Figma under the given parent. Use fillVariableId or fillPaintStyleId from resolveFigmaIdsForTokens for background. Returns nodeId.",
+      inputSchema: {
+        type: "object",
+        properties: {
+          parentId: { type: "string", description: "Parent frame/node id (e.g. from createDesignPlaceholder)" },
+          name: { type: "string", description: "Layer name" },
+          width: { type: "number", description: "Width in px (optional)" },
+          height: { type: "number", description: "Height in px (optional)" },
+          fillVariableId: { type: "string", description: "Color variable id from resolveFigmaIdsForTokens" },
+          fillPaintStyleId: { type: "string", description: "Paint style id from resolveFigmaIdsForTokens" }
+        },
+        required: ["parentId", "name"]
+      }
+    },
+    {
+      name: "designCreateText",
+      description: "Create a text node in Figma. Bind to a text style via textStyleId from resolveFigmaIdsForTokens.",
+      inputSchema: {
+        type: "object",
+        properties: {
+          parentId: { type: "string", description: "Parent frame id" },
+          characters: { type: "string", description: "Text content" },
+          textStyleId: { type: "string", description: "Text style id from resolveFigmaIdsForTokens (required)" },
+          name: { type: "string", description: "Layer name (optional)" }
+        },
+        required: ["parentId", "characters", "textStyleId"]
+      }
+    },
+    {
+      name: "designCreateRectangle",
+      description: "Create a rectangle in Figma. Use fillVariableId or fillPaintStyleId from resolveFigmaIdsForTokens.",
+      inputSchema: {
+        type: "object",
+        properties: {
+          parentId: { type: "string", description: "Parent frame id" },
+          width: { type: "number", description: "Width in px" },
+          height: { type: "number", description: "Height in px" },
+          fillVariableId: { type: "string", description: "Color variable id" },
+          fillPaintStyleId: { type: "string", description: "Paint style id" },
+          name: { type: "string", description: "Layer name (optional)" }
+        },
+        required: ["parentId", "width", "height"]
+      }
+    },
+    {
+      name: "designSetAutoLayout",
+      description: "Set auto-layout on a frame. Use variable ids from resolveFigmaIdsForTokens for padding and itemSpacing (e.g. Spacing / lg).",
+      inputSchema: {
+        type: "object",
+        properties: {
+          nodeId: { type: "string", description: "Frame node id" },
+          direction: { type: "string", description: "HORIZONTAL or VERTICAL" },
+          paddingVariableId: { type: "string", description: "Number variable id for all padding" },
+          paddingTopVariableId: { type: "string" },
+          paddingRightVariableId: { type: "string" },
+          paddingBottomVariableId: { type: "string" },
+          paddingLeftVariableId: { type: "string" },
+          itemSpacingVariableId: { type: "string", description: "Number variable id for gap between children" },
+          primaryAxisAlignItems: { type: "string", description: "MIN, CENTER, MAX, SPACE_BETWEEN" },
+          counterAxisAlignItems: { type: "string", description: "MIN, CENTER, MAX, BASELINE" },
+          layoutSizingHorizontal: { type: "string", description: "HUG or FILL" },
+          layoutSizingVertical: { type: "string", description: "HUG or FILL" }
+        },
+        required: ["nodeId", "direction"]
+      }
+    },
+    {
+      name: "designSetLayoutConstraints",
+      description: "Set min/max width and height on a frame (e.g. breakpoint variables). Use number variable ids from resolveFigmaIdsForTokens.",
+      inputSchema: {
+        type: "object",
+        properties: {
+          nodeId: { type: "string", description: "Frame node id" },
+          minWidthVariableId: { type: "string" },
+          maxWidthVariableId: { type: "string" },
+          minHeightVariableId: { type: "string" },
+          maxHeightVariableId: { type: "string" }
+        },
+        required: ["nodeId"]
+      }
+    },
+    {
+      name: "designAppendChild",
+      description: "Move a node under a new parent (reparent). Use to reorder or nest nodes.",
+      inputSchema: {
+        type: "object",
+        properties: {
+          parentId: { type: "string", description: "New parent frame id" },
+          childId: { type: "string", description: "Node id to move" }
+        },
+        required: ["parentId", "childId"]
+      }
+    },
+    {
+      name: "getDesignScreenshot",
+      description: "Export a frame as PNG and return it as base64 so you can verify layout, content fill, and hug. Call after each design pass to check your work against the user's intent. Use the returned image to decide if another pass is needed.",
+      inputSchema: {
+        type: "object",
+        properties: {
+          frameId: { type: "string", description: "Frame node id (e.g. from createDesignPlaceholder)" },
+          scale: { type: "number", description: "Export scale 1\u20134 (optional, default 1)" }
+        },
+        required: ["frameId"]
+      }
+    },
+    {
+      name: "finalizeDesignFrame",
+      description: "Rename the design frame and remove the placeholder background. Call after the final design pass. Set name to a short description of the design plus ' \u2705'. Use fillVariableId or fillPaintStyleId from resolveFigmaIdsForTokens (e.g. Background / surface) so the gray placeholder is replaced.",
+      inputSchema: {
+        type: "object",
+        properties: {
+          frameId: { type: "string", description: "Frame node id to finalize" },
+          name: { type: "string", description: "New frame name (e.g. 'Login card \u2705')" },
+          fillVariableId: { type: "string", description: "Variable id for frame fill (removes placeholder bg)" },
+          fillPaintStyleId: { type: "string", description: "Paint style id for frame fill" }
+        },
+        required: ["frameId", "name"]
+      }
+    }
+  ];
+  const tools = cachedMcpTier === "pro" ? toolsList : toolsList.filter((t) => !FIGMA_TOOL_NAMES.has(t.name));
+  return { tools };
 });
 server.setRequestHandler(CallToolRequestSchema, async (request) => {
   const { name, arguments: args } = request.params;
+  if (!hasValidAuthConfig() || authFailedNoTools) {
+    return {
+      content: [{
+        type: "text",
+        text: "MCP access requires valid --ds-id and --atomix-token. Add both to your MCP config and restart Cursor. No tools are available until then."
+      }],
+      isError: true
+    };
+  }
   try {
-    const shouldForceRefresh = name === "syncTokens";
+    const shouldForceRefresh = name === "syncAll";
     const data = await fetchDesignSystemForMCP(shouldForceRefresh);
+    if (FIGMA_TOOL_NAMES.has(name) && cachedMcpTier !== "pro") {
+      return {
+        content: [
+          {
+            type: "text",
+            text: "This design system does not have Pro Figma access. Figma sync and design tools are available when the design system owner has a Pro subscription."
+          }
+        ],
+        isError: true
+      };
+    }
+    async function performTokenSyncAndRules(designSystemData, tokenOutput, tokenFormat) {
+      const output = tokenOutput;
+      const format = tokenFormat;
+      const outputPath = path2.resolve(process.cwd(), output);
+      const fileExists = fs2.existsSync(outputPath);
+      const deprecatedTokens = /* @__PURE__ */ new Map();
+      const existingTokens = /* @__PURE__ */ new Map();
+      if (fileExists && ["css", "scss", "less"].includes(format)) {
+        const oldContent = fs2.readFileSync(outputPath, "utf-8");
+        const oldVarPattern = /(?:^|\n)\s*(?:\/\*[^*]*\*+(?:[^/*][^*]*\*+)*\/\s*)?(--[a-zA-Z0-9-]+):\s*([^;]+);/gm;
+        let match;
+        while ((match = oldVarPattern.exec(oldContent)) !== null) {
+          const varName = match[1];
+          const varValue = match[2].trim();
+          existingTokens.set(varName, varValue);
+          if (!(varName in designSystemData.cssVariables)) deprecatedTokens.set(varName, varValue);
+        }
+      }
+      const mergedCssVariables = { ...designSystemData.cssVariables };
+      const darkModeColors = designSystemData.tokens?.colors?.modes;
+      let newContent;
+      switch (format) {
+        case "css":
+          newContent = generateCSSOutput(mergedCssVariables, darkModeColors?.dark, deprecatedTokens);
+          break;
+        case "scss":
+          newContent = generateSCSSOutput(mergedCssVariables, darkModeColors?.dark, deprecatedTokens);
+          break;
+        case "less":
+          newContent = generateLessOutput(mergedCssVariables, darkModeColors?.dark, deprecatedTokens);
+          break;
+        case "json":
+          newContent = generateJSONOutput(designSystemData.tokens);
+          break;
+        case "js":
+          newContent = generateJSOutput(designSystemData.tokens);
+          break;
+        case "ts":
+          newContent = generateTSOutput(designSystemData.tokens);
+          break;
+        case "swift":
+          newContent = generateSwiftOutput(mergedCssVariables, darkModeColors?.dark, deprecatedTokens);
+          break;
+        case "kotlin":
+          newContent = generateKotlinOutput(mergedCssVariables, darkModeColors?.dark, deprecatedTokens);
+          break;
+        case "dart":
+          newContent = generateDartOutput(mergedCssVariables, darkModeColors?.dark, deprecatedTokens);
+          break;
+        default:
+          newContent = generateCSSOutput(mergedCssVariables, darkModeColors?.dark, deprecatedTokens);
+      }
+      const tokenCount = Object.keys(mergedCssVariables).length;
+      const dsTokenCount = Object.keys(designSystemData.cssVariables).length;
+      const deprecatedCount = deprecatedTokens.size;
+      let changes = [];
+      let diff;
+      if (fileExists && ["css", "scss", "less"].includes(format)) {
+        const oldContent = fs2.readFileSync(outputPath, "utf-8");
+        diff = diffTokens(oldContent, mergedCssVariables, format, darkModeColors?.dark);
+        const lightChanges = diff.added.length + diff.modified.length;
+        const darkChanges = diff.addedDark.length + diff.modifiedDark.length;
+        const totalChanges = lightChanges + darkChanges + deprecatedCount;
+        if (totalChanges === 0) {
+          const lastUpdated = designSystemData.meta.exportedAt ? new Date(designSystemData.meta.exportedAt).toLocaleString() : "N/A";
+          return {
+            responseText: `\u2713 Already up to date!
+
+File: ${output}
+Tokens: ${tokenCount}
+Version: ${designSystemData.meta.version}
+Last updated: ${lastUpdated}`,
+            rulesResults: []
+          };
+        }
+        changes = [...diff.modified, ...diff.modifiedDark];
+        const removedTokensWithValues = [];
+        for (const [token, value] of deprecatedTokens.entries()) removedTokensWithValues.push({ token, lastValue: value });
+        lastSyncAffectedTokens = {
+          modified: [...diff.modified, ...diff.modifiedDark].map((m) => ({ token: m.key, oldValue: m.old, newValue: m.new })),
+          removed: removedTokensWithValues,
+          added: [...diff.added, ...diff.addedDark],
+          format,
+          timestamp: (/* @__PURE__ */ new Date()).toISOString()
+        };
+      }
+      const outputDir = path2.dirname(outputPath);
+      if (!fs2.existsSync(outputDir)) fs2.mkdirSync(outputDir, { recursive: true });
+      fs2.writeFileSync(outputPath, newContent);
+      let rulesResults = [];
+      try {
+        rulesResults = await syncRulesFiles({
+          dsId,
+          apiKey: apiKey ?? void 0,
+          apiBase: apiBase ?? void 0,
+          rulesDir: process.cwd()
+        });
+      } catch (error) {
+        console.error(`[syncAll] Failed to sync rules: ${error}`);
+      }
+      const governanceChanges = cachedData ? detectGovernanceChangesByFoundation(cachedData, designSystemData) : [];
+      const response = formatSyncResponse({
+        data: designSystemData,
+        output,
+        format,
+        dsTokenCount,
+        deprecatedCount,
+        deprecatedTokens,
+        diff,
+        changes,
+        fileExists,
+        rulesResults,
+        governanceChanges,
+        changeSummary: getLastChangeSummary(),
+        hasRefactorRecommendation: !!lastSyncAffectedTokens?.removed.length,
+        deprecatedTokenCount: lastSyncAffectedTokens?.removed.length || 0
+      });
+      return { responseText: response, rulesResults };
+    }
     switch (name) {
       case "getToken": {
         const path4 = args?.path;
@@ -1688,7 +2493,7 @@ server.setRequestHandler(CallToolRequestSchema, async (request) => {
         const serverName = data.meta.name.toLowerCase().replace(/[^a-z0-9]/g, "-");
         const npxArgs = ["@atomixstudio/mcp@latest"];
         if (dsId) npxArgs.push("--ds-id", dsId);
-        if (apiKey) npxArgs.push("--api-key", apiKey);
+        if (accessToken) npxArgs.push("--atomix-token", accessToken);
         const config = {
           mcpServers: {
             [serverName]: {
@@ -1879,153 +2684,74 @@ server.setRequestHandler(CallToolRequestSchema, async (request) => {
           }]
         };
       }
-      case "syncTokens": {
-        const output = args?.output;
+      case "syncAll": {
+        const skipTokens = args?.skipTokens === true;
+        const output = args?.output || "./tokens.css";
         const format = args?.format || "css";
-        if (!output) {
-          return {
-            content: [{
-              type: "text",
-              text: JSON.stringify({ error: "Missing required parameter: output" }, null, 2)
-            }]
-          };
-        }
-        const outputPath = path2.resolve(process.cwd(), output);
-        const fileExists = fs2.existsSync(outputPath);
-        const deprecatedTokens = /* @__PURE__ */ new Map();
-        const existingTokens = /* @__PURE__ */ new Map();
-        if (fileExists && ["css", "scss", "less"].includes(format)) {
-          const oldContent = fs2.readFileSync(outputPath, "utf-8");
-          const oldVarPattern = /(?:^|\n)\s*(?:\/\*[^*]*\*+(?:[^/*][^*]*\*+)*\/\s*)?(--[a-zA-Z0-9-]+):\s*([^;]+);/gm;
-          let match;
-          while ((match = oldVarPattern.exec(oldContent)) !== null) {
-            const varName = match[1];
-            const varValue = match[2].trim();
-            existingTokens.set(varName, varValue);
-            if (!(varName in data.cssVariables)) {
-              deprecatedTokens.set(varName, varValue);
-            }
+        const parts = ["\u2713 syncAll complete."];
+        let tokenResponseText = "";
+        if (!skipTokens) {
+          const { responseText, rulesResults } = await performTokenSyncAndRules(data, output, format);
+          tokenResponseText = responseText;
+          parts.push(`Tokens: ${output} (${format})`);
+          if (rulesResults.length > 0) {
+            parts.push(`Rules: ${rulesResults.map((r) => r.path).join(", ")}`);
           }
         }
-        const mergedCssVariables = { ...data.cssVariables };
-        const darkModeColors = data.tokens?.colors?.modes;
-        let newContent;
-        switch (format) {
-          case "css":
-            newContent = generateCSSOutput(mergedCssVariables, darkModeColors?.dark, deprecatedTokens);
-            break;
-          case "scss":
-            newContent = generateSCSSOutput(mergedCssVariables, darkModeColors?.dark, deprecatedTokens);
-            break;
-          case "less":
-            newContent = generateLessOutput(mergedCssVariables, darkModeColors?.dark, deprecatedTokens);
-            break;
-          case "json":
-            newContent = generateJSONOutput(data.tokens);
-            break;
-          case "js":
-            newContent = generateJSOutput(data.tokens);
-            break;
-          case "ts":
-            newContent = generateTSOutput(data.tokens);
-            break;
-          case "swift":
-            newContent = generateSwiftOutput(mergedCssVariables, darkModeColors?.dark, deprecatedTokens);
-            break;
-          case "kotlin":
-            newContent = generateKotlinOutput(mergedCssVariables, darkModeColors?.dark, deprecatedTokens);
-            break;
-          case "dart":
-            newContent = generateDartOutput(mergedCssVariables, darkModeColors?.dark, deprecatedTokens);
-            break;
-          default:
-            newContent = generateCSSOutput(mergedCssVariables, darkModeColors?.dark, deprecatedTokens);
-        }
-        const tokenCount = Object.keys(mergedCssVariables).length;
-        const dsTokenCount = Object.keys(data.cssVariables).length;
-        const deprecatedCount = deprecatedTokens.size;
-        let diffSummary = "";
-        let changes = [];
-        let diff;
-        if (fileExists && ["css", "scss", "less"].includes(format)) {
-          const oldContent = fs2.readFileSync(outputPath, "utf-8");
-          diff = diffTokens(oldContent, mergedCssVariables, format, darkModeColors?.dark);
-          const lightChanges = diff.added.length + diff.modified.length;
-          const darkChanges = diff.addedDark.length + diff.modifiedDark.length;
-          const totalChanges = lightChanges + darkChanges + deprecatedCount;
-          if (totalChanges === 0) {
-            const lastUpdated = data.meta.exportedAt ? new Date(data.meta.exportedAt).toLocaleString() : "N/A";
-            return {
-              content: [{
-                type: "text",
-                text: `\u2713 Already up to date!
-
-File: ${output}
-Tokens: ${tokenCount}
-Version: ${data.meta.version}
-Last updated: ${lastUpdated}`
-              }]
-            };
-          }
-          changes = [...diff.modified, ...diff.modifiedDark];
-          const lightSummary = lightChanges > 0 ? `Light: ${diff.modified.length} modified, ${diff.added.length} added` : "";
-          const darkSummary = darkChanges > 0 ? `Dark: ${diff.modifiedDark.length} modified, ${diff.addedDark.length} added` : "";
-          const deprecatedSummary = deprecatedCount > 0 ? `${deprecatedCount} deprecated (use /refactor)` : "";
-          diffSummary = [lightSummary, darkSummary, deprecatedSummary].filter(Boolean).join(" | ");
-          const removedTokensWithValues = [];
-          for (const [token, value] of deprecatedTokens.entries()) {
-            removedTokensWithValues.push({ token, lastValue: value });
+        const skillsDir = path2.resolve(process.cwd(), ".cursor/skills/atomix-ds");
+        if (!fs2.existsSync(skillsDir)) fs2.mkdirSync(skillsDir, { recursive: true });
+        const dsVersion = String(data.meta.version ?? "1.0.0");
+        const dsExportedAt = data.meta.exportedAt;
+        const genericWithVersion = injectSkillVersion(GENERIC_SKILL_MD, dsVersion, dsExportedAt);
+        const figmaWithVersion = injectSkillVersion(FIGMA_DESIGN_SKILL_MD, dsVersion, dsExportedAt);
+        fs2.writeFileSync(path2.join(skillsDir, "SKILL.md"), genericWithVersion);
+        fs2.writeFileSync(path2.join(skillsDir, "design-in-figma.md"), figmaWithVersion);
+        parts.push("Skills: .cursor/skills/atomix-ds/SKILL.md, .cursor/skills/atomix-ds/design-in-figma.md (synced at DS v" + dsVersion + ")");
+        const tokens = data.tokens;
+        const typography = tokens?.typography;
+        const fontFamily = typography?.fontFamily;
+        const fontNames = [];
+        if (fontFamily) {
+          for (const key of ["display", "heading", "body"]) {
+            const v = fontFamily[key];
+            if (typeof v === "string" && v && !fontNames.includes(v)) fontNames.push(v);
           }
-          lastSyncAffectedTokens = {
-            modified: [...diff.modified, ...diff.modifiedDark].map((m) => ({
-              token: m.key,
-              oldValue: m.old,
-              newValue: m.new
-            })),
-            removed: removedTokensWithValues,
-            added: [...diff.added, ...diff.addedDark],
-            format,
-            timestamp: (/* @__PURE__ */ new Date()).toISOString()
-          };
-        }
-        const outputDir = path2.dirname(outputPath);
-        if (!fs2.existsSync(outputDir)) {
-          fs2.mkdirSync(outputDir, { recursive: true });
         }
-        fs2.writeFileSync(outputPath, newContent);
-        let rulesResults = [];
-        try {
-          rulesResults = await syncRulesFiles({
-            dsId,
-            apiKey: apiKey ?? void 0,
-            apiBase: apiBase ?? void 0,
-            rulesDir: process.cwd()
-          });
-        } catch (error) {
-          console.error(`[syncTokens] Failed to sync rules: ${error}`);
-        }
-        const governanceChanges = cachedData ? detectGovernanceChangesByFoundation(cachedData, data) : [];
-        const response = formatSyncResponse({
-          data,
-          output,
-          format,
-          dsTokenCount,
-          deprecatedCount,
-          deprecatedTokens,
-          diff,
-          changes,
-          fileExists,
-          rulesResults,
-          governanceChanges,
-          changeSummary: getLastChangeSummary(),
-          hasRefactorRecommendation: !!lastSyncAffectedTokens?.removed.length,
-          deprecatedTokenCount: lastSyncAffectedTokens?.removed.length || 0
-        });
+        const icons = tokens?.icons;
+        const ICON_PACKAGES = {
+          lucide: { web: "lucide-react", native: "lucide-react-native" },
+          heroicons: { web: "@heroicons/react", native: "heroicons-react-native" },
+          phosphor: { web: "phosphor-react", native: "phosphor-react-native" }
+        };
+        const lib = icons?.library || "lucide";
+        const iconPkgs = ICON_PACKAGES[lib] || ICON_PACKAGES.lucide;
+        const manifest = {
+          designSystem: { name: data.meta.name, version: data.meta.version },
+          tokenFile: skipTokens ? void 0 : output,
+          iconLibrary: {
+            package: iconPkgs.web,
+            nativePackage: iconPkgs.native,
+            strokeWidthToken: icons?.strokeWidth != null ? "icons.strokeWidth" : void 0,
+            strokeWidthValue: icons?.strokeWidth
+          },
+          fonts: { families: fontNames },
+          skills: {
+            skill: ".cursor/skills/atomix-ds/SKILL.md",
+            skillFigmaDesign: ".cursor/skills/atomix-ds/design-in-figma.md",
+            syncedAtVersion: data.meta.version ?? "1.0.0"
+          }
+        };
+        const manifestPath = path2.resolve(process.cwd(), "atomix-dependencies.json");
+        fs2.writeFileSync(manifestPath, JSON.stringify(manifest, null, 2));
+        parts.push("Manifest: atomix-dependencies.json (icons, fonts, skill paths)");
+        const summary = parts.join("\n");
+        const fullText = tokenResponseText ? `${summary}
+
+---
+
+${tokenResponseText}` : summary;
         return {
-          content: [{
-            type: "text",
-            text: response
-          }]
+          content: [{ type: "text", text: fullText }]
         };
       }
       case "getDependencies": {
@@ -2053,21 +2779,38 @@ Last updated: ${lastUpdated}`
           iconLibrary: {
             package: iconPkgs.web,
             nativePackage: iconPkgs.native,
-            performanceHint: "Use individual SVG imports for tree-shaking; avoid loading entire icon libraries or icon fonts."
+            strokeWidthToken: icons?.strokeWidth != null ? "icons.strokeWidth" : void 0,
+            strokeWidthValue: icons?.strokeWidth,
+            performanceHint: "Use individual SVG imports for tree-shaking. Apply the design system's icon tokens: sizing via getToken('sizing.icon.sm') or listTokens('sizing'), and stroke width via getToken('icons.strokeWidth') when the DS defines it. Do not use hardcoded sizes or stroke widths."
           },
           fonts: {
             families: fontNames,
-            performanceHint: "Implement self-hosted fonts and local @font-face declarations; avoid external CDN links; use font-display: swap."
+            performanceHint: "Link fonts via URL (e.g. Google Fonts <link> or CSS @import); no need to download font files or add them to the repo. Prefer font-display: swap when possible. You must also build a typeset: CSS rules (e.g. .typeset-display, .typeset-heading, .typeset-body) that use var(--atmx-typography-*) for font-family, font-size, font-weight, line-height, letter-spacing from getToken/listTokens(typography). Do not create a file that only contains a font import."
           },
           skill: {
             path: ".cursor/skills/atomix-ds/SKILL.md",
             content: GENERIC_SKILL_MD
           },
+          skillFigmaDesign: {
+            path: ".cursor/skills/atomix-ds/design-in-figma.md",
+            content: FIGMA_DESIGN_SKILL_MD
+          },
           tokenFiles: {
             files: ["tokens.css", "tokens.json"],
-            copyInstructions: "Call the syncTokens MCP tool to create the token file; do not only suggest the user run sync later."
+            copyInstructions: "Call the syncAll MCP tool to create the token file, skills, and atomix-dependencies.json; do not only suggest the user run sync later."
           },
-          meta: { dsName: data.meta.name, platform: platform ?? void 0, stack: stack ?? void 0 }
+          showcase: platform === "web" || !platform ? {
+            path: "atomix-setup-showcase.html",
+            template: SHOWCASE_HTML_TEMPLATE,
+            substitutionInstructions: "Replace placeholders with values from the synced token file. MCP/sync/export use the --atmx- prefix. {{TOKENS_CSS_PATH}} = path to the synced token file (e.g. ./tokens.css, same as syncAll output). {{DS_NAME}} = design system name. {{BRAND_PRIMARY_VAR}} = var(--atmx-color-brand-primary). {{BRAND_PRIMARY_FOREGROUND_VAR}} = var(--atmx-color-brand-primary-foreground). {{HEADING_FONT_VAR}} = var(--atmx-typography-font-family-heading) or var(--atmx-typography-font-family-display). {{FONT_FAMILY_VAR}} = var(--atmx-typography-font-family-body). {{FONT_LINK_TAG}} = Google Fonts <link> for the font, or empty string. Do not invent CSS variable names; use only vars that exist in the export."
+          } : void 0,
+          meta: {
+            dsName: data.meta.name,
+            platform: platform ?? void 0,
+            stack: stack ?? void 0,
+            designSystemVersion: data.meta.version ?? "1.0.0",
+            designSystemExportedAt: data.meta.exportedAt
+          }
         };
         return {
           content: [{
@@ -2076,13 +2819,363 @@ Last updated: ${lastUpdated}`
           }]
         };
       }
+      case "syncToFigma": {
+        const payloads = buildFigmaPayloadsFromDS(data);
+        const out = {};
+        const agentStartBridge = `The Figma bridge runs with this MCP server. Ensure Cursor has this MCP configured and running, then in Figma run the Atomix plugin and click Connect to Cursor. Then call **syncToFigma** again.`;
+        const userSteps = [
+          FIGMA_CONNECTION_INSTRUCTIONS.startBridge,
+          FIGMA_CONNECTION_INSTRUCTIONS.installAndRun,
+          FIGMA_CONNECTION_INSTRUCTIONS.connect,
+          "Then run Sync to Figma again."
+        ].join(" ");
+        try {
+          const reachable = await isBridgeReachable();
+          if (!reachable) {
+            out.bridgeNotRunning = true;
+            out.agentInstruction = agentStartBridge;
+            out.userInstruction = `If the bridge still does not connect: ${userSteps}`;
+            out.figmaPayload = {
+              collectionName: payloads.colorVariables.collectionName,
+              modes: payloads.colorVariables.modes,
+              variables: payloads.colorVariables.variables,
+              paintStyles: payloads.paintStyles,
+              textStyles: payloads.textStyles,
+              numberVariables: payloads.numberVariables,
+              effectStyles: payloads.effectStyles
+            };
+            return {
+              content: [{ type: "text", text: JSON.stringify(out, null, 2) }]
+            };
+          }
+          if (payloads.colorVariables.variables.length > 0) {
+            out.colorVariables = await sendBridgeRequest("create_color_variables", {
+              collectionName: payloads.colorVariables.collectionName,
+              modes: payloads.colorVariables.modes,
+              variables: payloads.colorVariables.variables
+            });
+          }
+          if (payloads.paintStyles.length > 0) {
+            out.paintStyles = await sendBridgeRequest("create_paint_styles", { styles: payloads.paintStyles });
+          }
+          if (payloads.numberVariables.variables.length > 0) {
+            try {
+              out.numberVariables = await sendBridgeRequest("create_number_variables", {
+                collectionName: payloads.numberVariables.collectionName,
+                variables: payloads.numberVariables.variables
+              });
+            } catch (e) {
+              const msg = e instanceof Error ? e.message : String(e);
+              out.numberVariables = { error: msg };
+              if (msg.includes("Method not allowed") && msg.includes("create_number_variables")) {
+                out.numberVariablesHint = "Number variables require the latest Atomix Figma plugin and bridge. Rebuild the plugin and bridge, reload the plugin in Figma, restart the bridge, then sync again.";
+              }
+            }
+          }
+          if (payloads.textStyles.length > 0) {
+            out.textStyles = await sendBridgeRequest("create_text_styles", { styles: payloads.textStyles });
+          }
+          if (payloads.effectStyles.length > 0) {
+            out.effectStyles = await sendBridgeRequest("create_effect_styles", { styles: payloads.effectStyles });
+          }
+          out.figmaPayload = {
+            collectionName: payloads.colorVariables.collectionName,
+            modes: payloads.colorVariables.modes,
+            variables: payloads.colorVariables.variables,
+            paintStyles: payloads.paintStyles,
+            textStyles: payloads.textStyles,
+            numberVariables: payloads.numberVariables,
+            effectStyles: payloads.effectStyles
+          };
+        } catch (e) {
+          out.error = e instanceof Error ? e.message : String(e);
+          out.figmaPayload = {
+            collectionName: payloads.colorVariables.collectionName,
+            modes: payloads.colorVariables.modes,
+            variables: payloads.colorVariables.variables,
+            paintStyles: payloads.paintStyles,
+            textStyles: payloads.textStyles,
+            numberVariables: payloads.numberVariables,
+            effectStyles: payloads.effectStyles
+          };
+          const errMsg = out.error.toLowerCase();
+          const connectionFailure = errMsg.includes("econnrefused") || errMsg.includes("bridge timeout") || errMsg.includes("websocket") || errMsg.includes("network");
+          if (connectionFailure) {
+            out.bridgeNotRunning = true;
+            out.agentInstruction = agentStartBridge;
+            out.userInstruction = `If the bridge still does not connect: ${userSteps}`;
+          } else if (errMsg.includes("plugin not connected") || errMsg.includes("figma plugin")) {
+            out.userInstruction = `${FIGMA_CONNECTION_INSTRUCTIONS.installAndRun} ${FIGMA_CONNECTION_INSTRUCTIONS.connect}`;
+          }
+        }
+        const textStylesResult = out.textStyles;
+        if (textStylesResult?.failed && textStylesResult.failures?.length) {
+          const firstReason = textStylesResult.failures[0].reason;
+          out.summary = `Text styles: ${textStylesResult.failed} could not be created. ${firstReason}`;
+        }
+        if (out.numberVariablesHint) {
+          out.summary = [out.summary, out.numberVariablesHint].filter(Boolean).join(" ");
+        }
+        out.motionEasingNote = "Motion easing tokens are not synced as Figma styles; Figma has no reusable easing style. Easing is only used in prototype transitions (e.g. smart animate). Duration/easing remain available as number variables (duration) or in export JSON.";
+        return {
+          content: [{
+            type: "text",
+            text: JSON.stringify(out, null, 2)
+          }],
+          ...out.error ? { isError: true } : {}
+        };
+      }
+      case "getFigmaVariablesAndStyles": {
+        try {
+          const reachable = await isBridgeReachable();
+          if (!reachable) {
+            return {
+              content: [{
+                type: "text",
+                text: JSON.stringify({
+                  error: "Figma bridge not reachable.",
+                  bridgeNotRunning: true,
+                  agentInstruction: "The Figma bridge runs with this MCP server. Ensure Cursor has this MCP running, then in Figma run the Atomix plugin and click Connect to Cursor. Then call getFigmaVariablesAndStyles again."
+                }, null, 2)
+              }],
+              isError: true
+            };
+          }
+          const result = await sendBridgeRequest("get_figma_variables_and_styles");
+          return {
+            content: [{ type: "text", text: JSON.stringify(result, null, 2) }]
+          };
+        } catch (e) {
+          const message = e instanceof Error ? e.message : String(e);
+          return {
+            content: [{
+              type: "text",
+              text: JSON.stringify({ error: message, hint: "Ensure the bridge is running and the Atomix plugin is connected." }, null, 2)
+            }],
+            isError: true
+          };
+        }
+      }
+      case "createDesignPlaceholder": {
+        try {
+          const reachable = await isBridgeReachable();
+          if (!reachable) {
+            return {
+              content: [{
+                type: "text",
+                text: JSON.stringify({
+                  error: "Figma bridge not reachable.",
+                  hint: "The bridge runs with this MCP server. Ensure Cursor has this MCP running, then run the Atomix plugin and click Connect to Cursor."
+                }, null, 2)
+              }],
+              isError: true
+            };
+          }
+          const w = args?.width;
+          const h = args?.height;
+          const placeholderParams = {};
+          if (typeof w === "number" && w > 0) placeholderParams.width = Math.round(w);
+          if (typeof h === "number" && h > 0) placeholderParams.height = Math.round(h);
+          const result = await sendBridgeRequest("create_design_placeholder", placeholderParams);
+          return {
+            content: [{ type: "text", text: JSON.stringify(result, null, 2) }]
+          };
+        } catch (e) {
+          const message = e instanceof Error ? e.message : String(e);
+          return {
+            content: [{
+              type: "text",
+              text: JSON.stringify({ error: message }, null, 2)
+            }],
+            isError: true
+          };
+        }
+      }
+      case "resolveFigmaIdsForTokens": {
+        try {
+          const reachable = await isBridgeReachable();
+          if (!reachable) {
+            return {
+              content: [{
+                type: "text",
+                text: JSON.stringify({
+                  error: "Figma bridge not reachable.",
+                  hint: "Run syncToFigma first, then ensure the plugin is connected. Then call resolveFigmaIdsForTokens again."
+                }, null, 2)
+              }],
+              isError: true
+            };
+          }
+          const raw = await sendBridgeRequest("get_figma_variables_and_styles");
+          const response = raw;
+          const variableByName = /* @__PURE__ */ new Map();
+          if (response.variableCollections) {
+            for (const coll of response.variableCollections) {
+              for (const v of coll.variables || []) {
+                variableByName.set(v.name, v.id);
+              }
+            }
+          }
+          const paintByName = /* @__PURE__ */ new Map();
+          for (const s of response.paintStyles || []) {
+            paintByName.set(s.name, s.id);
+          }
+          const textByName = /* @__PURE__ */ new Map();
+          for (const s of response.textStyles || []) {
+            textByName.set(s.name, s.id);
+          }
+          const effectByName = /* @__PURE__ */ new Map();
+          for (const s of response.effectStyles || []) {
+            effectByName.set(s.name, s.id);
+          }
+          const expected = getExpectedFigmaNamesFromDS(data);
+          const resolved = {};
+          const allNames = /* @__PURE__ */ new Set([
+            ...expected.colorVariableNames,
+            ...expected.paintStyleNames,
+            ...expected.textStyleNames,
+            ...expected.effectStyleNames,
+            ...expected.numberVariableNames
+          ]);
+          for (const name2 of allNames) {
+            const entry = {};
+            const vId = variableByName.get(name2);
+            if (vId) entry.variableId = vId;
+            const pId = paintByName.get(name2);
+            if (pId) entry.paintStyleId = pId;
+            const tId = textByName.get(name2);
+            if (tId) entry.textStyleId = tId;
+            const eId = effectByName.get(name2);
+            if (eId) entry.effectStyleId = eId;
+            if (vId || pId || tId || eId) resolved[name2] = entry;
+          }
+          return {
+            content: [{ type: "text", text: JSON.stringify({ resolved }, null, 2) }]
+          };
+        } catch (e) {
+          const message = e instanceof Error ? e.message : String(e);
+          return {
+            content: [{
+              type: "text",
+              text: JSON.stringify({ error: message }, null, 2)
+            }],
+            isError: true
+          };
+        }
+      }
+      case "getDesignScreenshot": {
+        try {
+          const reachable = await isBridgeReachable();
+          if (!reachable) {
+            return {
+              content: [{
+                type: "text",
+                text: JSON.stringify({
+                  error: "Figma bridge not reachable.",
+                  hint: "Run the Atomix plugin in Figma and click Connect to Cursor, then retry."
+                }, null, 2)
+              }],
+              isError: true
+            };
+          }
+          const frameId = args?.frameId;
+          const scale = args?.scale;
+          const params = { frameId };
+          if (typeof scale === "number" && scale >= 1 && scale <= 4) params.scale = scale;
+          const result = await sendBridgeRequest("get_design_screenshot", params);
+          if (result.error) {
+            return {
+              content: [{ type: "text", text: JSON.stringify(result, null, 2) }],
+              isError: true
+            };
+          }
+          const content = [
+            { type: "text", text: `Screenshot captured (format: ${result.format ?? "PNG"}, scale: ${result.scale ?? 1}). Use the image below to verify layout, fill, and content hug.` }
+          ];
+          if (result.imageBase64) {
+            content.push({ type: "image", data: result.imageBase64, mimeType: "image/png" });
+          }
+          return { content };
+        } catch (e) {
+          const message = e instanceof Error ? e.message : String(e);
+          return {
+            content: [{ type: "text", text: JSON.stringify({ error: message }, null, 2) }],
+            isError: true
+          };
+        }
+      }
+      case "finalizeDesignFrame": {
+        try {
+          const reachable = await isBridgeReachable();
+          if (!reachable) {
+            return {
+              content: [{
+                type: "text",
+                text: JSON.stringify({
+                  error: "Figma bridge not reachable.",
+                  hint: "Run the Atomix plugin in Figma and click Connect to Cursor, then retry."
+                }, null, 2)
+              }],
+              isError: true
+            };
+          }
+          const params = args && typeof args === "object" ? args : {};
+          const result = await sendBridgeRequest("finalize_design_frame", params);
+          return {
+            content: [{ type: "text", text: JSON.stringify(result, null, 2) }]
+          };
+        } catch (e) {
+          const message = e instanceof Error ? e.message : String(e);
+          return {
+            content: [{ type: "text", text: JSON.stringify({ error: message }, null, 2) }],
+            isError: true
+          };
+        }
+      }
+      case "designCreateFrame":
+      case "designCreateText":
+      case "designCreateRectangle":
+      case "designSetAutoLayout":
+      case "designSetLayoutConstraints":
+      case "designAppendChild": {
+        try {
+          const reachable = await isBridgeReachable();
+          if (!reachable) {
+            return {
+              content: [{
+                type: "text",
+                text: JSON.stringify({
+                  error: "Figma bridge not reachable.",
+                  hint: "Run the Atomix plugin in Figma and click Connect to Cursor, then retry."
+                }, null, 2)
+              }],
+              isError: true
+            };
+          }
+          const method = normalizeBridgeMethod(name);
+          const params = args && typeof args === "object" ? args : {};
+          const result = await sendBridgeRequest(method, params);
+          return {
+            content: [{ type: "text", text: JSON.stringify(result, null, 2) }]
+          };
+        } catch (e) {
+          const message = e instanceof Error ? e.message : String(e);
+          return {
+            content: [{
+              type: "text",
+              text: JSON.stringify({ error: message }, null, 2)
+            }],
+            isError: true
+          };
+        }
+      }
       default:
         return {
           content: [{
             type: "text",
             text: JSON.stringify({
               error: `Unknown tool: ${name}`,
-              availableTools: ["getToken", "listTokens", "searchTokens", "validateUsage", "getAIToolRules", "exportMCPConfig", "getSetupInstructions", "syncTokens", "getDependencies"]
+              availableTools: ["getToken", "listTokens", "searchTokens", "validateUsage", "getAIToolRules", "exportMCPConfig", "getSetupInstructions", "syncAll", "getDependencies", "syncToFigma", "getFigmaVariablesAndStyles", "createDesignPlaceholder", "resolveFigmaIdsForTokens", "designCreateFrame", "designCreateText", "designCreateRectangle", "designSetAutoLayout", "designSetLayoutConstraints", "designAppendChild", "getDesignScreenshot", "finalizeDesignFrame"]
             }, null, 2)
           }]
         };
@@ -2099,7 +3192,7 @@ Last updated: ${lastUpdated}`
         if (status === "404") {
           suggestion = `Design system ID "${dsId}" not found. Verify the ID is correct or the design system has been published.`;
         } else if (status === "401" || status === "403") {
-          suggestion = "Design system is private. Add --api-key <your-key> to your MCP server configuration.";
+          suggestion = "Add --atomix-token <your-token> from the Export modal or Settings \u2192 Regenerate.";
         } else {
           suggestion = `API request failed (${status}). Check your network connection and API base URL (${apiBase}).`;
         }
@@ -2124,54 +3217,177 @@ Last updated: ${lastUpdated}`
     };
   }
 });
+function injectSkillVersion(content, version, exportedAt) {
+  const endOfFrontmatter = content.indexOf("\n---\n", 3);
+  if (endOfFrontmatter === -1) return content;
+  const before = content.slice(0, endOfFrontmatter);
+  const after = content.slice(endOfFrontmatter);
+  const versionLines = `atomixDsVersion: "${version}"
+atomixDsExportedAt: "${exportedAt ?? ""}"
+`;
+  return before + "\n" + versionLines + after;
+}
 var GENERIC_SKILL_MD = `---
 name: atomix-ds
-description: Use this design system when editing UI, design system files, or when the user asks to follow the project's design system. Fetch rules dynamically via MCP.
+description: Use the Atomix design system for UI, tokens, and styles. Fetch rules and tokens via MCP tools; never hardcode design values.
 ---
 
 # Atomix Design System
 
+Use this skill when editing UI, design system files, or when the user asks to follow the project's design system. Your job is to **get the relevant data from the design system via MCP** and apply it\u2014not to guess or invent values.
+
+## Goal
+
+Complete the user's task using the design system as the single source of truth. Every color, spacing, typography, radius, shadow, or sizing value must come from the MCP tools (tokens or governance rules). Do not hardcode hex codes, pixel values, or font names.
+
 ## When to use
 
-- Editing UI components, pages, or styles
-- Working in design system or token files
-- User asks to follow the project's design system
+- Building or editing UI components, pages, or styles
+- Working in design system or token files (e.g. \`tokens.css\`, theme files)
+- User asks to "follow the design system", "use tokens", or "match the DS"
+- Validating or refactoring existing code, UI or visual design for token compliance
+
+## How to get design system data
 
-## How to use
+**1. Governance rules (how to use tokens in code)**  
+Call **getAIToolRules** with the tool id for your current environment: \`cursor\`, \`windsurf\`, \`copilot\`, \`cline\`, \`continue\`, \`zed\`, or \`generic\`.  
+Example: \`getAIToolRules({ tool: "cursor" })\`.  
+Alternatively use the **/--rules** prompt or the resource \`atomix://rules/<tool>\`.
 
-1. Call MCP tool **getAIToolRules** with the tool id that matches your **current AI coding environment**:
-   - **cursor** (Cursor IDE)
-   - **windsurf** (Windsurf)
-   - **copilot** (Copilot)
-   - **cline** (Cline)
-   - **continue** (Continue)
-   - **zed** (Zed)
-   - **generic** (other tools)
+**2. Token values (what to use in code)**  
+- **getToken(path)** \u2014 One token by path (e.g. \`colors.brand.primary\`, \`typography.fontSize.lg\`, \`sizing.icon.sm\`, \`icons.strokeWidth\`). Icon stroke width is at \`icons.strokeWidth\` when the design system defines it.
+- **listTokens(category)** \u2014 All tokens in a category: \`colors\`, \`typography\`, \`spacing\`, \`sizing\`, \`shadows\`, \`radius\`, \`borders\`, \`motion\`, \`zIndex\`. For icon config (e.g. stroke width), use \`getToken("icons.strokeWidth")\` since \`icons\` is not a list category.
+- **searchTokens(query)** \u2014 Find tokens by name or value.
 
-   Example: \`getAIToolRules({ tool: "cursor" })\` when in Cursor.
+**3. Validation**  
+- **validateUsage(value, context)** \u2014 Check if a CSS/value should use a token instead (e.g. \`validateUsage("#007061", "color")\`).
 
-2. Alternatively use the **design-system-rules** prompt or the resource \`atomix://rules/<tool>\` with the same tool id.
+**4. Syncing tokens to a file**  
+- **syncAll({ output?, format?, skipTokens? })** \u2014 Syncs tokens to a file, AI rules, skills (.cursor/skills/atomix-ds/*), and atomix-dependencies.json. Default output \`./tokens.css\`, format \`css\`. Use \`skipTokens: true\` to only write skills and manifest.
 
-3. Apply the returned rules (tokens, governance) when generating or editing code.
+Use the returned rules and token paths/values when generating or editing code. Prefer CSS variables (e.g. \`var(--atmx-*)\`) or the exact token references from the tools.
 
-4. Ensure Atomix MCP is configured with the project's \`--ds-id\` (config path varies by platform: e.g. \`.cursor/mcp.json\`, \`.windsurf/mcp.json\`).
+## Best practices
+
+- **Fetch first:** Before writing UI or styles, call getAIToolRules and/or getToken/listTokens so you know the exact tokens and conventions.
+- **Icons:** Apply the design system's icon tokens when rendering icons: sizing via \`getToken("sizing.icon.sm")\` or \`listTokens("sizing")\`, and stroke width via \`getToken("icons.strokeWidth")\` when the DS defines it; do not use hardcoded sizes or stroke widths.
+- **Typography:** Use typography tokens (fontFamily, fontSize, fontWeight, lineHeight, letterSpacing) from the DS for any text; build typesets (Display, Heading, body) from those tokens when creating global styles.
+- **No guessing:** If a value is not in the rules or token list, use searchTokens or listTokens to find the closest match rather than inventing a value.
+- **Version check:** If this skill file has frontmatter \`atomixDsVersion\`, compare it to the design system version from **getDependencies** (\`meta.designSystemVersion\`). If the design system is newer, suggest the user run **syncAll** to update skills and tokens.
+`;
+var FIGMA_DESIGN_SKILL_MD = `---
+name: atomix-design-in-figma
+description: Design in Figma using granular MCP commands. Three passes: wireframe, then tokens/rules, then audit. Use getDesignScreenshot to verify; finalizeDesignFrame to rename and remove placeholder.
+---
+
+# Design in Figma (principal product designer)
+
+Use this skill when the user asks to **design in Figma** (e.g. /--design-in-figma). Design by calling a **sequence of MCP tools**\u2014no script generation. All values come from the owner's Figma variables and styles (via **syncToFigma** and **resolveFigmaIdsForTokens**).
+
+## Mandatory: no hardcoding
+
+- **Only variable and style ids.** Use **resolveFigmaIdsForTokens** to get \`variableId\`, \`paintStyleId\`, \`textStyleId\`, \`effectStyleId\` keyed by Figma name (e.g. "Spacing / lg", "Background / surface"). Pass these ids into designCreateFrame, designCreateText, designSetAutoLayout, designSetLayoutConstraints. Never pass raw px, hex, or font sizes.
+
+## Mandatory: user AI rules (colors, typography, buttons)
+
+- **Colors:** Only variable/paint style ids from resolveFigmaIdsForTokens and getAIToolRules; no hex or raw values.
+- **Typography:** Only text style ids from resolved + rules; no raw font size/weight/family.
+- **Buttons:** Use token-based sizing and hierarchy from getAIToolRules; primary/secondary/ghost from resolved styles.
+
+## Mandatory: set up variables first
+
+- **Call syncToFigma first.** Then getAIToolRules, listTokens, and resolveFigmaIdsForTokens. Use the \`resolved\` map for every fill, text style, and spacing.
+
+## Mandatory: auto-layout and breakpoints
+
+- **Every frame with children:** Call **designSetAutoLayout** with \`nodeId\`, \`direction\`, \`paddingVariableId\`, \`itemSpacingVariableId\` from resolved. Use \`layoutSizingHorizontal\` / \`layoutSizingVertical\` (HUG or FILL) so content hugs or fills as intended.
+- **Breakpoints (non-mobile):** Use **designSetLayoutConstraints** with \`maxWidthVariableId\` from resolved for container frames.
+
+## Three-pass flow (strict order)
+
+**Setup (once):** syncToFigma \u2192 createDesignPlaceholder (save \`frameId\`) \u2192 getAIToolRules + listTokens \u2192 resolveFigmaIdsForTokens. Keep \`resolved\` and \`frameId\` for all passes.
+
+**Pass 1 \u2014 Layout and contents (wireframe)**  
+Build structure only: frames, text nodes, rectangles, auto-layout, layout constraints. Focus on hierarchy, spacing, and content placement; temporary or neutral fills are acceptable. Then call **getDesignScreenshot** with \`frameId\`. Check the image: layout correct? Content and frames hugging/filling as intended? If not, fix with design commands and take another screenshot until satisfied.
+
+**Pass 2 \u2014 Apply design tokens and AI rules**  
+Apply the owner's design system: set all fills to variable/paint ids from \`resolved\` (e.g. Background / surface, Brand / primary). Set all text to text style ids from \`resolved\`. Apply button and component tokens from getAIToolRules (colors, typography, buttons). Then call **getDesignScreenshot**. Check: do colors, typography, and buttons match the design system and rules? If not, fix and re-check.
+
+**Pass 3 \u2014 Confirm no hardcoded values and follow AI rules**  
+Audit: ensure no raw px, hex, or font values were introduced. Verify every fill, text style, and spacing uses an id from \`resolved\`. Check getAIToolRules again for colors, typography, buttons. Then call **getDesignScreenshot** one last time. If all good: call **finalizeDesignFrame** with \`frameId\`, \`name\` = short description of the design + " \u2705", and \`fillVariableId\` (or \`fillPaintStyleId\`) for the surface/background so the placeholder gray is removed. Then **summarise** what was built and any fixes made across passes.
+
+Do not generate or run any JavaScript code. Use only the MCP tools listed above.
+`;
+var SHOWCASE_HTML_TEMPLATE = `<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Setup complete \u2014 {{DS_NAME}}</title>
+  {{FONT_LINK_TAG}}
+  <link rel="stylesheet" href="{{TOKENS_CSS_PATH}}">
+  <style>
+    * { box-sizing: border-box; }
+    body {
+      margin: 0;
+      font-family: {{FONT_FAMILY_VAR}}, system-ui, sans-serif;
+      background: {{BRAND_PRIMARY_VAR}};
+      color: {{BRAND_PRIMARY_FOREGROUND_VAR}};
+      min-height: 100vh;
+      padding: 2rem;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      text-align: center;
+    }
+    .wrap { width: 375px; max-width: 100%; }
+    .icon { width: 2rem; height: 2rem; margin: 0 auto 1rem; }
+    h1 {
+      font-family: {{HEADING_FONT_VAR}}, {{FONT_FAMILY_VAR}}, system-ui, sans-serif;
+      font-size: clamp(1.5rem, 4vw, 2.25rem);
+      font-weight: 700;
+      margin: 0 0 0.75rem;
+      line-height: 1.25;
+    }
+    .lead { margin: 0 0 1.5rem; font-size: 1rem; line-height: 1.5; opacity: 0.95; }
+    .now { margin: 1.5rem 0 0; font-size: 0.875rem; line-height: 1.6; opacity: 0.95; text-align: left; }
+    .now strong { display: block; margin-bottom: 0.5rem; }
+    .now ul { margin: 0; padding-left: 1.25rem; }
+    .tips { margin-top: 1.5rem; font-size: 0.875rem; line-height: 1.6; opacity: 0.9; }
+    .tips a { color: inherit; text-decoration: underline; }
+  </style>
+</head>
+<body>
+  <div class="wrap">
+    <div class="icon" aria-hidden="true">
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" width="32" height="32"><path d="M20 6L9 17l-5-5"/></svg>
+    </div>
+    <h1>You're all set with {{DS_NAME}}</h1>
+    <p class="lead">This page uses your design system: brand primary as background, headline and body typesets, and an icon. Token file is linked above.</p>
+    <div class="now">
+      <strong>What you can do now:</strong>
+      <ul>
+        <li>Ask your agent to build your designs using the design system tokens</li>
+        <li>Build components and pages that use <code>var(--atmx-*)</code> for colors, spacing, and typography</li>
+        <li>Run <code>/--rules</code> to load governance rules; run <code>/--sync</code> and <code>/--refactor</code> after you change tokens in Atomix Studio</li>
+      </ul>
+    </div>
+    <p class="tips">Keep the source of truth at <a href="https://atomixstudio.eu" target="_blank" rel="noopener">atomixstudio.eu</a> \u2014 avoid editing token values in this repo.</p>
+  </div>
+</body>
+</html>
 `;
 var AI_TOOLS = ["cursor", "copilot", "windsurf", "cline", "continue", "zed", "generic"];
 server.setRequestHandler(ListResourcesRequestSchema, async () => {
+  if (!hasValidAuthConfig() || authFailedNoTools) {
+    throw new Error(AUTH_REQUIRED_MESSAGE);
+  }
   try {
     await fetchDesignSystemForMCP();
     return { resources: [] };
   } catch {
-    return {
-      resources: [
-        {
-          uri: "atomix://setup",
-          name: "Configure MCP",
-          description: "Add --ds-id to your MCP config to load design system resources",
-          mimeType: "text/markdown"
-        }
-      ]
-    };
+    authFailedNoTools = true;
+    throw new Error(AUTH_REQUIRED_MESSAGE);
   }
 });
 server.setRequestHandler(ReadResourceRequestSchema, async (request) => {
@@ -2183,7 +3399,7 @@ server.setRequestHandler(ReadResourceRequestSchema, async (request) => {
         mimeType: "text/markdown",
         text: `# Configure Atomix MCP
 
-Add \`--ds-id <your-design-system-id>\` to your MCP server config.
+Add \`--ds-id\` and \`--atomix-token\` to your MCP server config (both required).
 
 Example (\`.cursor/mcp.json\`):
 \`\`\`json
@@ -2191,16 +3407,19 @@ Example (\`.cursor/mcp.json\`):
   "mcpServers": {
     "atomix": {
       "command": "npx",
-      "args": ["@atomixstudio/mcp@latest", "--ds-id", "<your-ds-id>"]
+      "args": ["@atomixstudio/mcp@latest", "--ds-id", "<your-ds-id>", "--atomix-token", "<your-token>"]
     }
   }
 }
 \`\`\`
 
-Get your DS ID from: https://atomixstudio.eu/ds/[your-ds-id]`
+Get your DS ID and token from the Export modal or Settings \u2192 Regenerate Atomix access token.`
       }]
     };
   }
+  if (!hasValidAuthConfig() || authFailedNoTools) {
+    throw new Error("MCP access requires valid --ds-id and --atomix-token. Add both to your MCP config and restart Cursor. See atomix://setup for instructions.");
+  }
   const data = await fetchDesignSystemForMCP();
   const stats = getTokenStats(data);
   if (uri === "atomix://hello") {
@@ -2237,32 +3456,49 @@ Get your DS ID from: https://atomixstudio.eu/ds/[your-ds-id]`
   }
   throw new Error(`Unknown resource: ${uri}`);
 });
+var FIGMA_PROMPT_NAMES = /* @__PURE__ */ new Set(["--sync-to-figma", "--design-in-figma"]);
 server.setRequestHandler(ListPromptsRequestSchema, async () => {
-  const prompts = [
+  if (!hasValidAuthConfig()) {
+    authFailedNoTools = true;
+    throw new Error(AUTH_REQUIRED_MESSAGE);
+  }
+  if (cachedMcpTier === null && !authFailedNoTools) {
+    try {
+      await fetchDesignSystemForMCP(true);
+    } catch {
+      authFailedNoTools = true;
+    }
+  }
+  if (authFailedNoTools) {
+    throw new Error(AUTH_REQUIRED_MESSAGE);
+  }
+  const allPrompts = [
     { name: "--hello", description: "Get started with this design system - overview, tokens, and tools. Run this first!" },
-    {
-      name: "--setup",
-      description: "Setup design system in project. Three phases: scan, report and ask, then create only after you approve.",
-      arguments: [
-        { name: "platform", description: "Target platform (web, ios, android). Optional.", required: false },
-        { name: "stack", description: "Stack or framework (e.g. react, vue, next, swift, kotlin). Optional.", required: false }
-      ]
-    },
-    {
-      name: "--rules",
-      description: "Get the design system governance rules for your AI coding tool",
-      arguments: [
-        { name: "tool", description: "AI tool (cursor, copilot, windsurf, cline, continue, zed, generic). Optional.", required: false }
-      ]
-    },
-    { name: "--sync", description: "Sync tokens to a local file. Safe: adds new, updates existing, marks deprecated. Use /--refactor to migrate." },
-    { name: "--refactor", description: "Migrate deprecated tokens in codebase. Run after /--sync." }
+    { name: "--get-started", description: "Get started with design system in project. Three phases: scan, report and ask, then create only after you approve." },
+    { name: "--rules", description: "Get the design system governance rules for your AI coding tool (default: cursor)." },
+    { name: "--sync", description: "Sync tokens, AI rules, skills files, and dependencies manifest (icons, fonts). Use /--refactor to migrate deprecated tokens." },
+    { name: "--refactor", description: "Migrate deprecated tokens in codebase. Run after /--sync." },
+    { name: "--sync-to-figma", description: "Push this design system to Figma (variables, color + typography styles). Uses local bridge + plugin; no Figma token." },
+    { name: "--design-in-figma", description: "Design UI in Figma: 3 passes (wireframe \u2192 tokens/rules \u2192 audit), getDesignScreenshot after each pass, then finalizeDesignFrame (rename + \u2705, remove placeholder) and summarise." }
   ];
+  const prompts = cachedMcpTier === "pro" ? allPrompts : allPrompts.filter((p) => !FIGMA_PROMPT_NAMES.has(p.name));
   return { prompts };
 });
 server.setRequestHandler(GetPromptRequestSchema, async (request) => {
   const { name, arguments: args } = request.params;
-  const canonicalName = name === "--hello" ? "hello" : name === "--setup" ? "atomix-setup" : name === "--rules" ? "design-system-rules" : name === "--sync" ? "sync" : name === "--refactor" ? "refactor" : name;
+  if (!hasValidAuthConfig() || authFailedNoTools) {
+    return {
+      description: "MCP Server Configuration Required",
+      messages: [{
+        role: "user",
+        content: {
+          type: "text",
+          text: "MCP access requires valid --ds-id and --atomix-token. Add both to your MCP config and restart Cursor. No tools or prompts are available until then."
+        }
+      }]
+    };
+  }
+  const canonicalName = name === "--hello" ? "hello" : name === "--get-started" ? "atomix-setup" : name === "--rules" ? "design-system-rules" : name === "--sync" ? "sync" : name === "--refactor" ? "refactor" : name === "--sync-to-figma" || name === "syncToFigma" ? "sync-to-figma" : name === "--design-in-figma" ? "design-in-figma" : name;
   const shouldForceRefresh = canonicalName === "sync";
   let data = null;
   let stats = null;
@@ -2280,12 +3516,10 @@ server.setRequestHandler(GetPromptRequestSchema, async (request) => {
             content: {
               type: "text",
               text: `The MCP server isn't configured. To use design system prompts, you need to configure the server with:
-- \`--ds-id\`: Your design system ID (required - get it from https://atomixstudio.eu/ds/[your-ds-id])
-- \`--api-key\`: Your API key (optional - only needed for private design systems)
-
-**Note:** Most design systems are public and don't require an API key. Only add \`--api-key\` if your design system is private.
+- \`--ds-id\`: Your design system ID (get it from https://atomixstudio.eu/ds/[your-ds-id])
+- \`--atomix-token\`: Your access token (get it from the Export modal or Settings \u2192 Regenerate Atomix access token)
 
-Configure the MCP server in your Cursor settings, then restart Cursor.`
+Both are required. Configure the MCP server in your Cursor settings, then restart Cursor.`
             }
           }
         ]
@@ -2316,12 +3550,12 @@ Configure the MCP server in your Cursor settings, then restart Cursor.`
       } else if (status === "401" || status === "403") {
         helpText += `**Possible causes:**
 `;
-        helpText += `- Design system is private and requires an API key
+        helpText += `- Missing or invalid access token
 `;
-        helpText += `- API key is invalid or expired
+        helpText += `- You don't have access to this design system (owner or invited guest only)
 
 `;
-        helpText += `**Solution:** Add \`--api-key <your-key>\` to your MCP server configuration.`;
+        helpText += `**Solution:** Add \`--atomix-token <your-token>\` from the Export modal or Settings \u2192 Regenerate.`;
       } else {
         helpText += `**Possible causes:**
 `;
@@ -2349,6 +3583,20 @@ Configure the MCP server in your Cursor settings, then restart Cursor.`
     }
     throw error;
   }
+  if (FIGMA_PROMPT_NAMES.has(name) && cachedMcpTier !== "pro") {
+    return {
+      description: "Pro Figma required",
+      messages: [
+        {
+          role: "user",
+          content: {
+            type: "text",
+            text: "This design system does not have Pro Figma access. Figma sync and design prompts are available when the design system owner has a Pro subscription."
+          }
+        }
+      ]
+    };
+  }
   const buildCategoryPrompt = (category, instructions) => {
     const lines = [];
     lines.push(`## Design System Information`);
@@ -2568,19 +3816,61 @@ Format the response as a markdown table with columns: Token Name | Value | CSS V
     case "sync": {
       const output = args?.output || "./tokens.css";
       const format = args?.format || "css";
-      const response = {
-        description: `Sync design tokens to ${output}`,
+      return {
+        description: "Sync tokens, rules, skills, and dependencies manifest",
         messages: [
           {
             role: "user",
             content: {
               type: "text",
-              text: `Call the syncTokens tool now. Use output="${output}" and format="${format}". Execute immediately - do not search or ask questions.`
+              text: `Call the syncAll tool now. Use output="${output}" and format="${format}". This syncs tokens, AI rules, skills (.cursor/skills/atomix-ds/*), and atomix-dependencies.json. Execute immediately - do not search or ask questions.`
+            }
+          }
+        ]
+      };
+    }
+    case "sync-to-figma": {
+      return {
+        description: "Push design system to Figma via MCP tool",
+        messages: [
+          {
+            role: "user",
+            content: {
+              type: "text",
+              text: `Call the MCP tool **syncToFigma** now (no arguments). It pushes the design system into the open Figma file via the built-in bridge and Atomix plugin. Do not use the Figma REST API or external scripts. If the response includes \`bridgeNotRunning\` and \`agentInstruction\`, ensure Cursor has this MCP server running, then in Figma run the Atomix plugin and click Connect to Cursor, then call syncToFigma again. Only if that fails, tell the user: (1) Ensure Cursor has this MCP configured and running. (2) In Figma, open and run the Atomix plugin, then tap **Connect to Cursor**. (3) Run Sync to Figma again.`
+            }
+          }
+        ]
+      };
+    }
+    case "design-in-figma": {
+      return {
+        description: "Design in Figma using granular MCP commands: 3 passes (wireframe \u2192 tokens \u2192 audit), screenshot checks, then finalize and summarise",
+        messages: [
+          {
+            role: "user",
+            content: {
+              type: "text",
+              text: `You must **design in Figma** by calling a **sequence of MCP tools**\u2014do not generate or run any JavaScript code. Follow the design-in-Figma skill if present; otherwise follow this **three-pass flow**.
+
+Prerequisites: Figma bridge runs inside this MCP server. In Figma, run the Atomix plugin and click "Connect to Cursor"; leave the plugin open.
+
+**Setup (once):** syncToFigma \u2192 createDesignPlaceholder (save \`frameId\`) \u2192 getAIToolRules + listTokens \u2192 resolveFigmaIdsForTokens. Use the returned \`resolved\` map and \`frameId\` for all passes.
+
+**Pass 1 \u2014 Layout and contents (wireframe)**  
+Build the structure: designCreateFrame, designCreateText, designCreateRectangle, designSetAutoLayout (use paddingVariableId, itemSpacingVariableId, and layoutSizingHorizontal/layoutSizingVertical HUG or FILL from resolved), designSetLayoutConstraints, designAppendChild. Focus on hierarchy, spacing, and content placement. Then call **getDesignScreenshot** with \`frameId\`. Check the returned image: is layout correct? Do elements hug or fill as intended? If not, fix and take another screenshot until satisfied.
+
+**Pass 2 \u2014 Apply design tokens and AI rules**  
+Apply the owner's design system: set all fills and text styles using only ids from \`resolved\` (no raw px/hex). Strictly follow getAIToolRules for **colors, typography, and buttons**. Then call **getDesignScreenshot**. Check: do colors, typography, and buttons match the design system? If not, fix and re-check.
+
+**Pass 3 \u2014 Confirm no hardcoded values**  
+Audit: ensure no raw px, hex, or font values remain; every fill and text style must use an id from \`resolved\`. Call **getDesignScreenshot** once more. If everything is correct: call **finalizeDesignFrame** with \`frameId\`, \`name\` = a short description of the design + " \u2705", and \`fillVariableId\` (or \`fillPaintStyleId\`) from resolved for the surface/background so the placeholder gray is removed. Then **summarise** what was built and any fixes made across the three passes.
+
+If the bridge is not reachable: tell the user to run the Atomix plugin in Figma and click Connect to Cursor, then retry.`
             }
           }
         ]
       };
-      return response;
     }
     case "refactor": {
       if (!lastSyncAffectedTokens) {
@@ -2694,49 +3984,46 @@ Use \`/color\`, \`/spacing\`, \`/radius\`, \`/typography\`, \`/shadow\`, \`/bord
       };
     }
     case "atomix-setup": {
-      const setupInstructions = `You are running **atomix-setup** (design system setup). Three phases only.
+      const setupInstructions = `You are running **/--get-started** (get started with design system). Three phases only.
 
-**Rule:** Do not create, write, or modify any file until Phase 3 and only after the user has explicitly approved (e.g. replied "Yes", "Yes for all", "Go ahead"). Creating or modifying files before the user approves is a rule violation.
+**Rule:** Do not create, write, or modify any file until Phase 3 and only after the user has explicitly approved (e.g. "Yes", "Yes for all", "Go ahead").
 
 ## Todo list (required)
 
-- **Create a todo list** at the start with items for Phase 1, Phase 2, and Phase 3 (e.g. "Phase 1: Scan", "Phase 2: Report and ask", "Phase 3: Create after approval").
-- Work **step by step**: complete Phase 1, then Phase 2; do not run Phase 3 until the user has replied with approval.
-- Mark todo items completed as you finish each phase. Use this pattern so the user and you can track progress.
+- Create a todo list at the start: Phase 1, Phase 2, Phase 3. Work step by step; do not run Phase 3 until the user has replied with approval. Mark items completed as you go.
 
 ## Phase 1 \u2013 Scan
 
-- Resolve platform/stack: infer from the project (e.g. package.json, build.gradle, Xcode) or ask the user once: "Which platform? (e.g. web, Android, iOS)" and if relevant "Which stack? (e.g. React, Vue, Next, Swift, Kotlin)." Do not assume a default.
-- Call MCP tool **getDependencies** with \`platform\` and optional \`stack\`. If it fails, tell the user: "Atomix MCP is not connected or design system ID is missing. Configure MCP with --ds-id and try again."
-- Scan the repo for what already exists: .cursor/skills/atomix-ds/SKILL.md, a tokens file (e.g. tokens.css or src/tokens.css), icon package from getDependencies, font setup. Do **not** include or check for MCP config; MCP is already configured for this session.
-- **Web:** Scan for any existing CSS (e.g. globals.css, main.css, App.css, index.css, Tailwind entry, framework styles). Note whether at least one CSS file exists.
-- **Native (iOS/Android):** Scan for existing theme or style files (e.g. SwiftUI theme/asset catalog, Android themes.xml/styles.xml, Compose theme). Note whether the project already has a theme or style setup.
-- Build two lists: **Suggested** (from getDependencies minus what exists) and **Already present**. Only include: icon package, fonts, skill (.cursor/skills/atomix-ds/SKILL.md), token files. No MCP.
+- Resolve platform/stack: infer from the project (e.g. package.json, build.gradle, Xcode) or ask once: "Which platform? (e.g. web, Android, iOS)" and if relevant "Which stack? (e.g. React, Vue, Next, Swift, Kotlin)." Do not assume a default.
+- Call **getDependencies** with \`platform\` and optional \`stack\`. If it fails, tell the user the design system could not be reached and stop.
+- Scan the repo for: .cursor/skills/atomix-ds/SKILL.md, .cursor/skills/atomix-ds/design-in-figma.md, a tokens file (e.g. tokens.css or src/tokens.css), icon package from getDependencies, font links. **Web:** note any existing CSS (globals.css, main.css, Tailwind, etc.). **Native:** note any theme/style files (SwiftUI, Android themes, Compose).
+- Build two lists: **Suggested** (from getDependencies minus what exists) and **Already present**. Include: icon package, font links, skill (.cursor/skills/atomix-ds/SKILL.md), **Figma design skill** (.cursor/skills/atomix-ds/design-in-figma.md), token files; for web, also include the **showcase page** (atomix-setup-showcase.html) if getDependencies returned a \`showcase\` object.
 - Do not write, create, or add anything in Phase 1.
 
-## Phase 2 \u2013 Report and ask for permission
+## Phase 2 \u2013 Report and ask
 
 - Reply with: **Suggested:** [list] and **Already present:** [list].
-- Ask exactly once: "Do you want me to add the suggested items? (Yes for all, or say which ones.)" (Integration with existing CSS or theme is recommended after Phase 3; new global CSS/theme is only suggested when none exists.)
-- **Stop.** Do not run Phase 3 in this response. Wait for the user to reply.
+- Ask exactly once: "Do you want me to add the suggested items? (Yes for all, or say which ones.)"
+- **Stop.** Wait for the user to reply. Do not run Phase 3 in this response.
 
-## Phase 3 \u2013 Create or add (only after user approval)
+## Phase 3 \u2013 Create (only after user approval)
 
 - Run only when the user has said yes (all or specific items).
 - For each approved item:
-  - **Skill:** Write the skill content from getDependencies to .cursor/skills/atomix-ds/SKILL.md.
-  - **Token file:** Call the **syncTokens** MCP tool with \`output\` set to the path (e.g. "./src/tokens.css" or "./tokens.css"). You must call syncTokens; do not only suggest the user run sync later.
-  - **Icon package / fonts:** Add per getDependencies (e.g. install package, add font config). Do not overwrite existing.
-- Report only what you actually created or updated (e.g. "Added: .cursor/skills/atomix-ds/SKILL.md. Synced: src/tokens.css."). Do not claim the token file was added if you did not call syncTokens.
-- **After reporting \u2013 styles/theme (per platform):**
-  - **Web:** If the project **already has** at least one CSS file: recommend how to integrate Atomix (e.g. import the synced tokens file, use \`var(--atomix-*)\` or semantic classes). Do **not** suggest creating a new global CSS. Only if the project has **no** CSS file at all, ask once: "There are no CSS files yet. Do you want a minimal global CSS (typography + semantic utilities from the design system)?" and add it only if the user says yes.
-  - **iOS/Android:** If the project **already has** theme or style files: recommend how to integrate Atomix tokens (e.g. use synced DesignTokens.swift / Kotlin tokens in existing theme). Do **not** suggest creating a new global theme file. Only if the project has **no** theme/style setup at all, ask once: "There's no theme/style setup yet. Do you want a minimal token-based theme (colors, typography, spacing from the design system)?" and add it only if the user says yes.
-
----
+  - **Skill:** Write the skill content from getDependencies \`skill.content\` to \`skill.path\` (.cursor/skills/atomix-ds/SKILL.md).
+  - **Figma design skill:** Write the skill content from getDependencies \`skillFigmaDesign.content\` to \`skillFigmaDesign.path\` (.cursor/skills/atomix-ds/design-in-figma.md). Use this when designing in Figma so the agent follows principal-product-designer rules and prefers existing Figma variables.
+  - **Token file:** Call **syncAll** with \`output\` set to the path (e.g. "./src/tokens.css" or "./tokens.css"). syncAll also writes skills and atomix-dependencies.json. You must call syncAll; do not only suggest the user run it later.
+  - **Icon package:** Install per getDependencies. When rendering icons, apply the design system's icon tokens: use getToken(\`sizing.icon.*\`) or listTokens(\`sizing\`) for size, and getToken(\`icons.strokeWidth\`) for stroke width when the DS defines it; do not use hardcoded sizes or stroke widths.
+  - **Fonts and typeset:** Add font links (e.g. \`<link>\` or \`@import\` from Google Fonts). Then build a **typeset** in CSS: use **getToken** / **listTokens** (category \`typography\`) to get fontFamily, fontSize, fontWeight, lineHeight, letterSpacing for display, heading, and body, and write CSS rules (e.g. \`.typeset-display\`, \`.typeset-heading\`, \`.typeset-body\`, or \`h1\`/\`h2\`/\`p\`) that set those properties to \`var(--atmx-typography-*)\`. The typeset file (or section) must define the full type scale\u2014not only a font import. Do not create a CSS file that contains only a font import.
+  - **Showcase page (web only):** If platform is web and getDependencies returned a \`showcase\` object, create the file at \`showcase.path\` using \`showcase.template\`. Replace every placeholder per \`showcase.substitutionInstructions\`: TOKENS_CSS_PATH, DS_NAME, BRAND_PRIMARY_VAR (page background), BRAND_PRIMARY_FOREGROUND_VAR (text on brand), HEADING_FONT_VAR (h1), FONT_FAMILY_VAR (body), FONT_LINK_TAG. Use only CSS variable names that exist in the synced token file. Do not change the HTML structure. After creating the file, launch it in the default browser (e.g. \`open atomix-setup-showcase.html\` on macOS, \`xdg-open atomix-setup-showcase.html\` on Linux, or the equivalent on Windows).
+- Report only what you actually created or updated. Do not claim the token file was added if you did not call syncAll.
+- **After reporting \u2013 styles/theme:**
+  - **Web:** If the project already has at least one CSS file: recommend how to integrate Atomix (e.g. import the synced tokens file, use \`var(--atmx-*)\`). Do not suggest a new global CSS. Only if there is **no** CSS file at all, ask once: "There are no CSS files yet. Do you want me to build a global typeset from the design system?" If yes, create a CSS file that includes: (1) font \`@import\` or document that a font link is needed, and (2) **typeset rules**\u2014CSS classes or element rules that set font-family, font-size, font-weight, line-height, letter-spacing using \`var(--atmx-typography-*)\` from the token file (e.g. \`.typeset-display\`, \`.typeset-heading\`, \`.typeset-body\`). You must call getToken/listTokens to get the exact typography token paths and write the corresponding var() references. The output must not be only a font import; it must define the full typeset (Display, Heading, body) with every style detail from the design system.
+  - **iOS/Android:** If the project already has theme/style files: recommend how to integrate Atomix tokens. Do not suggest a new global theme. Only if there is **no** theme/style at all, ask once: "There's no theme/style setup yet. Do you want a minimal token-based theme?" and add only if the user says yes.
 
-Create your todo list first, then execute Phase 1 (resolve platform/stack, call getDependencies, scan, build lists). Then Phase 2 (report lists and ask). Do not perform Phase 3 until the user replies.`;
+Create your todo list first, then Phase 1 (resolve platform/stack, call getDependencies, scan, build lists), then Phase 2 (report and ask). Do not perform Phase 3 until the user replies.`;
       return {
-        description: "Setup design system in project (atomix-setup). Create todo list; Phase 1 scan, Phase 2 report and ask, Phase 3 create only after user approval.",
+        description: "Get started with design system in project (/--get-started). Create todo list; Phase 1 scan, Phase 2 report and ask, Phase 3 create only after user approval.",
         messages: [
           {
             role: "user",
@@ -2807,12 +4094,12 @@ ${tokenSummary}
 | Command | What to expect |
 |---------|----------------|
 | **/--hello** | Get started - overview, tokens, and tools. Run this first! |
-| **/--setup** | Setup design system in project. Three phases; creates files only after you approve. |
+| **/--get-started** | Get started with design system in project. Three phases; creates files only after you approve. |
 | **/--rules** | Governance rules for your AI tool (Cursor, Copilot, Windsurf, etc.). |
-| **/--sync** | Sync tokens to a local file. Safe: adds new, updates existing, marks deprecated. |
+| **/--sync** | Sync tokens, rules, skills, and dependencies manifest (icons, fonts). Safe: adds new, updates existing, marks deprecated. |
 | **/--refactor** | Migrate deprecated tokens in codebase. Run after /--sync. |
 
-**Suggested next step:** Run **/--setup** to set up global styles, icons, fonts, and token files; the AI will list options and ask before adding anything.
+**Suggested next step:** Run **/--get-started** to set up global styles, icons, fonts, and token files; the AI will list options and ask before adding anything.
 
 ---
 
@@ -2822,17 +4109,32 @@ ${tokenSummary}
 async function startServer() {
   if (!dsId) {
     console.error("Error: Missing --ds-id argument");
-    console.error("Usage: npx atomix --ds-id <id> [--api-key <key>]");
-    console.error("Note: --api-key is optional (only needed for private design systems)");
+    console.error("Usage: npx @atomixstudio/mcp@latest --ds-id <id> --atomix-token <token>");
+    console.error("Get your DS ID and Atomix access token from account settings.");
     console.error("");
-    console.error("For sync command: npx atomix sync --help");
-    console.error("Get your DS ID from https://atomixstudio.eu/ds/[your-ds-id]");
     process.exit(1);
   }
+  if (!accessToken) {
+    console.error("Error: Missing --atomix-token argument");
+    console.error("Usage: npx @atomixstudio/mcp@latest --ds-id <id> --atomix-token <token>");
+    console.error("Get your DS ID and Atomix access token from account settings.");
+    console.error("");
+    process.exit(1);
+  }
+  startFigmaBridge();
   const transport = new StdioServerTransport();
   await server.connect(transport);
   console.error(`Atomix MCP Server started for design system: ${dsId}`);
+  console.error(`Atomix MCP API base: ${apiBase}`);
+  console.error(
+    "If you switched MCP config (e.g. free vs pro DS), restart Cursor so this process uses the new --ds-id and --atomix-token."
+  );
+}
+function onShutdown() {
+  closeFigmaBridge();
 }
+process.on("SIGINT", onShutdown);
+process.on("SIGTERM", onShutdown);
 async function main() {
   await startServer();
 }