@createlex/figma-swiftui-mcp 1.3.1 → 1.4.1

package/companion/local-llm-generator.cjs

@@ -431,5 +431,7 @@ async function generateWithLocalKey(context, generationMode = 'editable') {
 module.exports = {
   generateWithLocalKey,
   buildGenerationPrompt,
+  parseClaudeResponse,
+  buildPromptContext,
   SWIFTUI_SYSTEM_PROMPT,
 };

package/companion/mcp-server.mjs

@@ -16,6 +16,7 @@ const {
   resolveWritableProjectPath,
   setSavedProjectPath,
   writeAssetCatalogEntries,
+  writeMultiScreenProject,
   writeSwiftUIScreen,
 } = require('./xcode-writer.cjs');
 const { startBridgeServer } = require('./bridge-server.cjs');
@@ -28,6 +29,8 @@ const {
 const {
   generateWithLocalKey,
   buildGenerationPrompt,
+  parseClaudeResponse,
+  buildPromptContext,
 } = require('./local-llm-generator.cjs');
 
 const BRIDGE_HTTP_URL = process.env.FIGMA_SWIFTUI_BRIDGE_HTTP_URL || 'http://localhost:7765';
@@ -420,7 +423,7 @@ server.registerTool('get_metadata', {
 });
 
 server.registerTool('get_design_context', {
-  description: 'Return node metadata, asset export candidates, and generation hints for the current Figma selection. PREFERRED WORKFLOW: call write_selection_to_xcode instead — it generates correct SwiftUI with Image("name") asset refs AND writes PNGs to Assets.xcassets in one step, no planning needed. Only call get_design_context if you need to inspect the raw node tree before generating.',
+  description: 'Return node metadata, asset export candidates, and generation hints for the current Figma selection. PREFERRED WORKFLOW: call figma_to_swiftui instead — it handles LLM generation, Image("name") asset refs, PNG export, DesignTokens, and reusable components in one shot. Only call get_design_context if you need to inspect the raw node tree before generating.',
   inputSchema: {
     nodeIds: z.array(z.string()).optional().describe('Optional list of Figma node ids. If omitted, uses the current selection'),
     nodeId: z.string().optional().describe('Optional single Figma node id'),
@@ -438,7 +441,7 @@ server.registerTool('get_design_context', {
 });
 
 server.registerTool('get_swiftui_generation_prompt', {
-  description: 'Return a ready-to-use SwiftUI system prompt and user message for AI-native generation. WARNING: prefer write_selection_to_xcode — it handles Image() asset refs and PNG export automatically. Only use get_swiftui_generation_prompt when you must generate code yourself. If you do use this: (a) use .font(.system(size:weight:)) — never hardcode custom font names like Inter or Roboto, (b) reference every assetExportPlan entry as Image("name") not Rectangle().',
+  description: 'Return a ready-to-use SwiftUI system prompt and user message for AI-native generation. PREFERRED: use figma_to_swiftui instead — it pre-writes assets and handles LLM generation automatically. Only use get_swiftui_generation_prompt when you need the raw prompt. If you do: (a) use .font(.system(size:weight:)) — never hardcode custom font names like Inter or Roboto, (b) reference every assetExportPlan entry as Image("name") not Rectangle().',
   inputSchema: {
     nodeIds: z.array(z.string()).optional().describe('Optional list of Figma node ids. If omitted, uses the current selection'),
     nodeId: z.string().optional().describe('Optional single Figma node id'),
@@ -775,26 +778,47 @@ server.registerTool('write_selection_to_xcode', {
 }, async ({ nodeIds, includeOverflow, generationMode, projectPath }) => {
   const targetDir = resolveTargetProjectPath(projectPath);
 
-  // Try hosted analysis first to get refinement hints alongside code
+  // Try LLM generation (Tier 2/3) to get better code than the template generator
+  let llmCode = null;
+  let llmAdditionalFiles = [];
   let analysisHints = null;
   try {
-    const analysis = await tryHostedSemanticGeneration({
+    const semanticResult = await tryHostedSemanticGeneration({
       nodeIds,
       generationMode,
       includeOverflow,
-      analyze: true,
+      analyze: false,
     });
-    if (analysis) {
-      analysisHints = {
-        generationHints: analysis.generationHints,
-        manualRefinementHints: analysis.manualRefinementHints,
-        reusableComponents: analysis.reusableComponents,
-        assetExportPlan: analysis.assetExportPlan,
-      };
+    if (semanticResult?.code) {
+      const parsed = parseClaudeResponse(semanticResult.code);
+      llmCode = parsed.code || semanticResult.code;
+      if (parsed.designTokensCode) {
+        llmAdditionalFiles.push({ name: 'DesignTokens.swift', code: parsed.designTokensCode, dir: 'shared' });
+      }
+      for (const comp of (parsed.componentFiles || [])) {
+        llmAdditionalFiles.push({ name: comp.name, code: comp.code, dir: 'components' });
+      }
+    }
+    // Also try to get analysis hints
+    if (!semanticResult) {
+      const analysis = await tryHostedSemanticGeneration({
+        nodeIds,
+        generationMode,
+        includeOverflow,
+        analyze: true,
+      });
+      if (analysis) {
+        analysisHints = {
+          generationHints: analysis.generationHints,
+          manualRefinementHints: analysis.manualRefinementHints,
+          reusableComponents: analysis.reusableComponents,
+          assetExportPlan: analysis.assetExportPlan,
+        };
+      }
     }
   } catch (err) {
-    // Non-fatal — continue with generation even if analysis fails
-    console.error('[figma-swiftui-mcp] Hosted analysis failed (non-fatal):', err?.message ?? err);
+    // Non-fatal — continue with plugin generation
+    console.error('[figma-swiftui-mcp] Semantic generation failed (non-fatal):', err?.message ?? err);
   }
 
   const generated = await callBridge('generate_swiftui', {
@@ -804,16 +828,20 @@ server.registerTool('write_selection_to_xcode', {
     includeImages: true,
   });
 
+  // Prefer LLM-generated code over template-generated code
+  const finalCode = llmCode || generated.code;
+
   const effectiveStructName = inferStructName({
-    code: generated.code,
+    code: finalCode,
     selectionNames: generated.selection?.names ?? [],
   });
 
   const result = writeSwiftUIScreen({
     targetDir,
-    code: generated.code,
+    code: finalCode,
     structName: effectiveStructName,
     images: Array.isArray(generated.images) ? generated.images : [],
+    additionalFiles: llmAdditionalFiles,
   });
 
   if (!result.ok) {
@@ -852,6 +880,235 @@ server.registerTool('write_selection_to_xcode', {
   }));
 });
 
+// ---------------------------------------------------------------------------
+// figma_to_swiftui — true one-shot Figma-to-SwiftUI generation
+// ---------------------------------------------------------------------------
+
+server.registerTool('figma_to_swiftui', {
+  description:
+    'One-shot Figma-to-SwiftUI: generates production-ready SwiftUI code from the current Figma selection (or all page frames) and writes it to the Xcode project — including PNG assets, DesignTokens.swift, and reusable components. ' +
+    'With BYOK keys (ANTHROPIC_API_KEY / OPENAI_API_KEY) or a CreateLex subscription this is a TRUE single-call operation. ' +
+    'Without those, it pre-writes assets and returns a structured prompt so the calling AI can generate code and finish with one more write_generated_swiftui_to_xcode call. ' +
+    'Use scope="page" to batch-generate every top-level frame on the current page.',
+  inputSchema: {
+    nodeIds: z.array(z.string()).optional().describe('Optional list of Figma node ids. If omitted, uses the current selection'),
+    scope: z.enum(['selection', 'page']).default('selection').describe('selection = current selection; page = every top-level frame on the active page'),
+    generationMode: z.enum(['editable', 'fidelity']).default('editable').describe('editable (default) keeps native SwiftUI elements; fidelity rasterizes the whole frame'),
+    includeOverflow: z.boolean().default(false).describe('Ignore Figma clipping when generating layout'),
+    projectPath: z.string().optional().describe('Optional Xcode source folder override'),
+  },
+}, async ({ nodeIds, scope, generationMode, includeOverflow, projectPath }) => {
+  const targetDir = resolveTargetProjectPath(projectPath);
+
+  // -------------------------------------------------------------------------
+  // 1. Resolve target node ids
+  // -------------------------------------------------------------------------
+  let effectiveNodeIds = nodeIds;
+
+  if (scope === 'page') {
+    const pageSnapshot = await callBridge('get_page_snapshot', { maxDepth: 1 });
+    const topFrames = (pageSnapshot?.children ?? []).filter(
+      (c) => c.type === 'FRAME' || c.type === 'COMPONENT' || c.type === 'COMPONENT_SET'
+    );
+    if (topFrames.length === 0) {
+      throw new Error('No top-level frames found on the current page');
+    }
+    effectiveNodeIds = topFrames.map((f) => f.id);
+  }
+
+  // -------------------------------------------------------------------------
+  // 2. Get design context (node tree, tokens, asset plan, components)
+  // -------------------------------------------------------------------------
+  const context = await callBridge('get_design_context', {
+    nodeIds: effectiveNodeIds,
+    maxDepth: 4,
+    includeScreenshot: false,
+  });
+
+  // -------------------------------------------------------------------------
+  // 3. Get images from plugin generator
+  // -------------------------------------------------------------------------
+  const generated = await callBridge('generate_swiftui', {
+    nodeIds: effectiveNodeIds,
+    includeOverflow,
+    generationMode,
+    includeImages: true,
+  });
+
+  const images = Array.isArray(generated.images) ? generated.images : [];
+  const imageNames = images.map((img) => img.name);
+
+  // -------------------------------------------------------------------------
+  // 4. Attempt LLM generation (Tier 2 BYOK → Tier 3 Hosted)
+  // -------------------------------------------------------------------------
+  let llmResult = null;
+
+  // Tier 2: BYOK
+  if (process.env.ANTHROPIC_API_KEY || process.env.HF_API_TOKEN || process.env.OPENAI_API_KEY) {
+    try {
+      const byokResult = await generateWithLocalKey(context, generationMode);
+      if (byokResult?.handled) {
+        llmResult = byokResult;
+      }
+    } catch (err) {
+      console.error('[figma-swiftui-mcp] BYOK generation failed:', err?.message ?? err);
+    }
+  }
+
+  // Tier 3: Hosted (only for editable single-root)
+  if (!llmResult && generationMode === 'editable') {
+    try {
+      const metadata = context?.metadata;
+      const isSingleRoot = !!metadata && (!Array.isArray(metadata?.nodes) || metadata.nodes.length === 1);
+      if (isSingleRoot && runtimeAuthState.authorized) {
+        const { response, data } = await postAuthorizedApi(runtimeAuthState, '/mcp/figma-swiftui/generate', {
+          context,
+          generationMode,
+          includeOverflow,
+        });
+        if (response.ok && data?.handled) {
+          llmResult = {
+            handled: true,
+            provider: data.provider || 'createlex-hosted',
+            code: data.code,
+            designTokensCode: null,
+            componentFiles: [],
+            diagnostics: data.diagnostics || [],
+          };
+        }
+      }
+    } catch (err) {
+      console.error('[figma-swiftui-mcp] Hosted generation failed (non-fatal):', err?.message ?? err);
+    }
+  }
+
+  // -------------------------------------------------------------------------
+  // 5a. Tier 2/3 succeeded — parse, write everything, return success
+  // -------------------------------------------------------------------------
+  if (llmResult) {
+    const parsed = parseClaudeResponse(llmResult.code || '');
+    const finalCode = parsed.code || llmResult.code || generated.code;
+    const effectiveStructName = inferStructName({
+      code: finalCode,
+      selectionNames: generated.selection?.names ?? [],
+    });
+
+    // Build additional files
+    const additionalFiles = [];
+    if (parsed.designTokensCode || llmResult.designTokensCode) {
+      additionalFiles.push({
+        name: 'DesignTokens.swift',
+        code: parsed.designTokensCode || llmResult.designTokensCode,
+        dir: 'shared',
+      });
+    }
+    for (const comp of (parsed.componentFiles || llmResult.componentFiles || [])) {
+      additionalFiles.push({ name: comp.name, code: comp.code, dir: 'components' });
+    }
+
+    const result = writeSwiftUIScreen({
+      targetDir,
+      code: finalCode,
+      structName: effectiveStructName,
+      images,
+      additionalFiles,
+    });
+
+    if (!result.ok) {
+      throw new Error(result.results.errors.join(' | ') || 'Failed to write generated SwiftUI to Xcode');
+    }
+
+    return jsonResult({
+      tier: llmResult.provider?.startsWith('local-') || llmResult.provider?.startsWith('huggingface:') ? 'byok' : 'hosted',
+      provider: llmResult.provider,
+      oneShot: true,
+      structName: effectiveStructName,
+      swiftFile: result.results?.swiftFile ?? null,
+      additionalFiles: result.results?.additionalSwiftFiles ?? [],
+      imagesWritten: imageNames.length,
+      imageNames,
+      generatedRoot: result.generatedRoot,
+      projectPath: result.projectPath,
+      _critical: [
+        `✅ SwiftUI generated via ${llmResult.provider} and written to ${result.results?.swiftFile ?? 'Xcode'}.`,
+        imageNames.length > 0
+          ? `🖼  ${imageNames.length} PNG asset(s) written: ${imageNames.join(', ')}.`
+          : null,
+        additionalFiles.length > 0
+          ? `📦 ${additionalFiles.length} additional file(s): ${additionalFiles.map((f) => f.name).join(', ')}.`
+          : null,
+        '🚫 DO NOT rewrite the generated Swift file. DO NOT replace Image("name") calls with shapes or colors.',
+        '✏️  You may ONLY: add GeometryReader for responsiveness, wire @State interactions, extract reusable sub-views.',
+      ].filter(Boolean),
+    });
+  }
+
+  // -------------------------------------------------------------------------
+  // 5b. Tier 1 — AI-native: pre-write assets, return structured prompt
+  // -------------------------------------------------------------------------
+
+  // Pre-write images to Assets.xcassets so Claude only needs to generate code
+  let assetsPreWritten = false;
+  if (images.length > 0) {
+    const assetResult = writeAssetCatalogEntries({
+      targetDir,
+      assets: images.map((img) => ({
+        name: img.name,
+        format: img.format || 'png',
+        base64: img.base64,
+        svg: img.svg,
+      })),
+    });
+    assetsPreWritten = assetResult.ok || assetResult.files.length > 0;
+  }
+
+  // Build the generation prompt
+  const prompt = buildGenerationPrompt(context);
+  const effectiveStructName = inferStructName({
+    code: generated.code,
+    selectionNames: generated.selection?.names ?? [],
+  });
+
+  // Build asset manifest for the prompt so the AI knows exactly which Image() names are valid
+  const assetManifest = (context?.assetExportPlan?.candidates ?? []).map((c) => ({
+    name: c.assetName || c.name,
+    blendMode: c.blendModeSwiftUI || null,
+    type: c.suggestedType || c.type || 'image',
+  }));
+
+  return jsonResult({
+    tier: 'ai-native',
+    oneShot: false,
+    assetsPreWritten,
+    imagesWritten: assetsPreWritten ? imageNames.length : 0,
+    imageNames,
+    structName: effectiveStructName,
+    projectPath: targetDir,
+    generationPrompt: prompt
+      ? {
+          systemPrompt: prompt.systemPrompt,
+          userMessage: prompt.userMessage + (assetManifest.length > 0
+            ? `\n\nASSET MANIFEST (already written to Assets.xcassets — use these exact names):\n${JSON.stringify(assetManifest, null, 2)}`
+            : ''),
+          outputStructName: prompt.outputStructName || effectiveStructName,
+        }
+      : null,
+    designContext: prompt ? null : context,
+    assetExportPlan: context?.assetExportPlan ?? null,
+    reusableComponents: context?.reusableComponents ?? null,
+    _critical: [
+      assetsPreWritten
+        ? `🖼  ${imageNames.length} PNG asset(s) pre-written to Assets.xcassets: ${imageNames.join(', ')}.`
+        : null,
+      'Generate SwiftUI code using the generationPrompt above (systemPrompt + userMessage).',
+      'Output code using <file name="StructName.swift"> XML tags.',
+      'Then call write_generated_swiftui_to_xcode with the generated code and images:[] (assets are already on disk).',
+      '⚠️  Use .font(.system(size:weight:)) ONLY — never custom font names.',
+      '⚠️  Reference every asset as Image("name") — never Rectangle() or Color() placeholders.',
+    ].filter(Boolean),
+  });
+});
+
 // ---------------------------------------------------------------------------
 // Response-size mitigation helpers
 // ---------------------------------------------------------------------------

package/companion/setup.cjs

@@ -6,10 +6,13 @@
  *
  * Supported targets:
  *   - Claude Desktop  (~/Library/Application Support/Claude/claude_desktop_config.json)
- *   - Claude Code     (~/.claude.json  → mcpServers)
+ *   - Claude Code     (~/.claude.json  → mcpServers)  (covers CLI + desktop + web)
  *   - Cursor          (~/.cursor/mcp.json)
  *   - Windsurf        (~/.codeium/windsurf/mcp_config.json)
  *   - VS Code         (~/.vscode/mcp.json  — user-level)
+ *   - OpenCode        (~/.config/opencode/opencode.json  → mcp)
+ *   - Codex CLI       (~/.codex/config.toml  → [mcp_servers.figma-swiftui])
+ *   - Gemini CLI      (~/.gemini/settings.json)
  *   - Antigravity     (~/.gemini/antigravity/mcp_config.json)
  */
 
@@ -118,6 +121,26 @@ function getTargets({ nodePath, scriptPath }) {
       entry: stdioEntry,
       wrapKey: null, // VS Code uses { servers: { ... } } at top level
     },
+    {
+      name: 'OpenCode',
+      path: path.join(home, '.config', 'opencode', 'opencode.json'),
+      key: 'mcp',
+      entry: scriptPath
+        ? { type: 'local', command: [nodePath, scriptPath, 'start'], enabled: true }
+        : { type: 'local', command: [resolveNpxPath(), '-y', '@createlex/figma-swiftui-mcp', 'start'], enabled: true },
+    },
+    {
+      name: 'Codex CLI',
+      path: path.join(home, '.codex', 'config.toml'),
+      format: 'toml',
+      entry: { command: stdioEntry.command, args: stdioEntry.args },
+    },
+    {
+      name: 'Gemini CLI',
+      path: path.join(home, '.gemini', 'settings.json'),
+      key: 'mcpServers',
+      entry: stdioEntry,
+    },
     {
       name: 'Antigravity (Gemini)',
       path: path.join(home, '.gemini', 'antigravity', 'mcp_config.json'),
@@ -145,6 +168,48 @@ function writeJsonSafe(filePath, data) {
   fs.writeFileSync(filePath, JSON.stringify(data, null, 2) + '\n', 'utf-8');
 }
 
+// ── TOML helpers (minimal, for Codex config.toml) ────────────────────
+// We only need to append/check a [mcp_servers.<name>] section — no full
+// TOML parser required.
+
+function tomlHasServer(raw, serverName) {
+  const pattern = new RegExp(`^\\[mcp_servers\\.${serverName.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')}\\]`, 'm');
+  return pattern.test(raw);
+}
+
+function tomlFormatValue(v) {
+  if (typeof v === 'string') return `"${v.replace(/\\/g, '\\\\').replace(/"/g, '\\"')}"`;
+  if (typeof v === 'boolean') return v ? 'true' : 'false';
+  if (typeof v === 'number') return String(v);
+  if (Array.isArray(v)) return `[${v.map(tomlFormatValue).join(', ')}]`;
+  return `"${v}"`;
+}
+
+function buildTomlSection(serverName, entry) {
+  const lines = [`[mcp_servers.${serverName}]`];
+  for (const [k, v] of Object.entries(entry)) {
+    if (k === 'env' && typeof v === 'object') continue; // handle env as sub-table
+    lines.push(`${k} = ${tomlFormatValue(v)}`);
+  }
+  if (entry.env && Object.keys(entry.env).length > 0) {
+    lines.push(`[mcp_servers.${serverName}.env]`);
+    for (const [ek, ev] of Object.entries(entry.env)) {
+      lines.push(`${ek} = ${tomlFormatValue(ev)}`);
+    }
+  }
+  return lines.join('\n') + '\n';
+}
+
+function appendTomlServer(filePath, serverName, entry, dryRun) {
+  const raw = fs.readFileSync(filePath, 'utf-8');
+  if (tomlHasServer(raw, serverName)) return false; // already present
+  const section = '\n' + buildTomlSection(serverName, entry);
+  if (!dryRun) {
+    fs.appendFileSync(filePath, section, 'utf-8');
+  }
+  return true;
+}
+
 // ── Main ──────────────────────────────────────────────────────────────
 function runSetup(flags = {}) {
   const force = flags.force || false;
@@ -177,6 +242,25 @@ function runSetup(flags = {}) {
       continue;
     }
 
+    // ── TOML targets (Codex) ──────────────────────────────────────
+    if (target.format === 'toml') {
+      const raw = fs.readFileSync(target.path, 'utf-8');
+      if (tomlHasServer(raw, MCP_KEY) && !force) {
+        console.log(`  ✅  ${target.name}  — already configured`);
+        skipped++;
+        continue;
+      }
+      if (dryRun) {
+        console.log(`  🟡  ${target.name}  — would configure (dry run)`);
+      } else {
+        appendTomlServer(target.path, MCP_KEY, target.entry, false);
+        console.log(`  ✅  ${target.name}  — configured!`);
+      }
+      configured++;
+      continue;
+    }
+
+    // ── JSON targets ────────────────────────────────────────────
     const config = readJsonSafe(target.path);
     if (!config) {
       console.log(`  ⚠️  ${target.name}  — could not parse config`);

package/companion/xcode-writer.cjs

@@ -443,6 +443,63 @@ function scoreSourceDirectory(dirPath, preferredNames = new Set()) {
   return score;
 }
 
+/**
+ * Write multiple screens from a single generation batch.
+ * Shares DesignTokens.swift and Components across all screens.
+ *
+ * @param {Object} opts
+ * @param {string} opts.targetDir - Xcode source folder
+ * @param {Array<{structName: string, code: string, images?: Array}>} opts.screens
+ * @param {string|null} opts.designTokensCode - Shared DesignTokens.swift
+ * @param {Array<{name: string, code: string}>} opts.componentFiles - Shared components
+ * @returns {{ok: boolean, screens: Array, errors: string[]}}
+ */
+function writeMultiScreenProject({ targetDir, screens = [], designTokensCode = null, componentFiles = [] }) {
+  const allErrors = [];
+  const screenResults = [];
+
+  // Build shared additional files list
+  const sharedFiles = [];
+  if (designTokensCode) {
+    sharedFiles.push({ name: 'DesignTokens.swift', code: designTokensCode, dir: 'shared' });
+  }
+  for (const comp of componentFiles) {
+    sharedFiles.push({ name: comp.name, code: comp.code, dir: 'components' });
+  }
+
+  for (let i = 0; i < screens.length; i++) {
+    const screen = screens[i];
+    // Only include shared files on the first screen write to avoid duplicates
+    const additionalFiles = i === 0 ? sharedFiles : [];
+
+    const result = writeSwiftUIScreen({
+      targetDir,
+      code: screen.code,
+      structName: screen.structName,
+      images: Array.isArray(screen.images) ? screen.images : [],
+      additionalFiles,
+    });
+
+    screenResults.push({
+      structName: screen.structName,
+      ok: result.ok,
+      swiftFile: result.results?.swiftFile ?? null,
+      imageCount: (screen.images ?? []).length,
+    });
+
+    if (!result.ok) {
+      allErrors.push(...result.results.errors);
+    }
+  }
+
+  return {
+    ok: allErrors.length === 0,
+    screens: screenResults,
+    errors: allErrors,
+    projectPath: targetDir,
+  };
+}
+
 module.exports = {
   GENERATED_ROOT_DIRNAME,
   GENERATED_LAYOUT_VERSION,
@@ -454,5 +511,6 @@ module.exports = {
   resolveWritableProjectPath,
   setSavedProjectPath,
   writeAssetCatalogEntries,
+  writeMultiScreenProject,
   writeSwiftUIScreen,
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@createlex/figma-swiftui-mcp",
-  "version": "1.3.1",
+  "version": "1.4.1",
   "description": "CreateLex MCP runtime for Figma-to-SwiftUI generation and Xcode export",
   "bin": {
     "figma-swiftui-mcp": "bin/figma-swiftui-mcp.js"