@createlex/figma-swiftui-mcp 1.2.4 → 1.2.7

package/companion/bridge-server.cjs

@@ -13,6 +13,7 @@ const {
   setSavedProjectPath,
   writeSwiftUIScreen,
 } = require('./xcode-writer.cjs');
+const { buildGenerationPrompt } = require('./local-llm-generator.cjs');
 
 const DEFAULT_PORT = 7765;
 const DEFAULT_HOST = 'localhost';
@@ -278,21 +279,35 @@ function startBridgeServer(options = {}) {
 
     const data = response.data || {};
 
-    // Attach explicit AI workflow instructions so any agent that fetches this URL
-    // knows exactly how to generate and write correct SwiftUI code with real images.
+    // Build the full generation prompt so AI tools without MCP access
+    // can still generate proper native SwiftUI with individual elements.
+    let generationPrompt = null;
+    try {
+      generationPrompt = buildGenerationPrompt(data);
+    } catch (_) {
+      // Non-fatal — prompt is a bonus, not required
+    }
+
     const assetCount = data.assetExportPlan?.candidates?.length ?? 0;
     const aiWorkflow = {
-      step1: 'You have the Figma design context. Do NOT generate SwiftUI code from scratch — that produces grey placeholder rectangles instead of real images.',
-      step2: 'Call the MCP tool `write_selection_to_xcode`. It generates SwiftUI with correct Image("name") asset references AND writes the PNG files to Assets.xcassets automatically.',
-      step3: 'After write_selection_to_xcode returns, ONLY refine the code it produced: add GeometryReader for responsiveness, wire interactions. DO NOT rewrite Image("name") calls or replace them with Rectangle()/shapes.',
-      step4: 'If the caller has no MCP access, use the structName and assetExportPlan below to write SwiftUI that references Image("name") for every asset candidate listed.',
-      mcpTool: 'write_selection_to_xcode',
-      mcpServer: 'figma-swiftui',
+      IF_YOU_HAVE_MCP_ACCESS: {
+        step1: 'Call the MCP tool `write_selection_to_xcode` (server: figma-swiftui). It generates SwiftUI with correct Image("name") asset references AND writes the PNG files to Assets.xcassets automatically.',
+        step2: 'After write_selection_to_xcode returns, ONLY refine the code it produced: add GeometryReader for responsiveness, wire @State interactions. DO NOT rewrite Image("name") calls or replace them with Rectangle()/shapes.',
+        mcpTool: 'write_selection_to_xcode',
+        mcpServer: 'figma-swiftui',
+      },
+      IF_NO_MCP_ACCESS: {
+        instruction: 'Use _generationPrompt.systemPrompt as the system message and _generationPrompt.userMessage as the user message to generate native SwiftUI code. Output individual SwiftUI views — Text(), VStack, HStack, ZStack, Image("name") — NOT a single composite Image().',
+        rule1: 'Every asset in assetExportPlan.candidates MUST become Image("assetName").resizable() — never Rectangle() or Color.',
+        rule2: 'Text nodes become Text("content") with .font(.system(size: X, weight: .bold)) — NEVER custom font names.',
+        rule3: 'Output a full SwiftUI View struct with individual elements positioned using the node geometry in the design context.',
+        rule4: 'End with #Preview { StructName() }.',
+      },
       assetCandidateCount: assetCount,
-      warning: 'Photos, 3D renders, illustrations and icons are pre-exported as PNG assets. Always use Image("name") — never reconstruct them with SwiftUI shapes or colors.',
+      warning: 'DO NOT generate a single Image() wrapping the whole frame. Generate individual SwiftUI elements for each node.',
     };
 
-    res.json({ ok: true, ...data, _aiWorkflow: aiWorkflow });
+    res.json({ ok: true, ...data, _generationPrompt: generationPrompt, _aiWorkflow: aiWorkflow });
   });
 
   function sendBridgeMessage(ws, payload) {

package/companion/local-llm-generator.cjs

@@ -35,6 +35,8 @@ RULES:
 9. End every file with a #Preview { StructName() } block.
 10. Emit best-effort code for anything complex — never emit TODO comments or placeholder stubs.
 11. If reusableComponents are present, output each as a separate <file name="ComponentName.swift"> tag.
+12. FONTS: Always use .font(.system(size: X, weight: .bold)) — NEVER reference custom font names like "Inter-Bold", "Roboto", or any fontName from Figma. Custom fonts are not bundled in the Xcode project and will cause runtime errors. System font only.
+13. IMAGES: Every node listed in assetExportPlan MUST be referenced as Image("assetName").resizable().scaledToFill() — NEVER replace with Rectangle(), Color, or shapes. These PNGs are pre-exported to Assets.xcassets.
 
 RESPONSIVE LAYOUT RULES:
 - Root frame with FILL sizing → .frame(maxWidth: .infinity)

package/companion/mcp-server.mjs

@@ -420,7 +420,7 @@ server.registerTool('get_metadata', {
 });
 
 server.registerTool('get_design_context', {
-  description: 'Return node metadata, asset export candidates, and generation hints for the current selection or an explicit node. AI-native workflow: call this tool, then generate SwiftUI yourself using your own model (burns zero CreateLex tokens), then call write_generated_swiftui_to_xcode to save the result. Alternatively call get_swiftui_generation_prompt to get a ready-to-use system prompt + user message.',
+  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.',
   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 +438,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. Call this, then feed the returned systemPrompt + userMessage to your own AI model (Claude Code, Cursor, Windsurf, ChatGPT, etc.) to generate SwiftUI — burning zero CreateLex tokens. After generation, parse <file name="X.swift"> tags in the response and call write_generated_swiftui_to_xcode with the code and any additionalFiles.',
+  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().',
   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'),
@@ -765,11 +765,11 @@ server.registerTool('write_generated_swiftui_to_xcode', {
 });
 
 server.registerTool('write_selection_to_xcode', {
-  description: 'Generate SwiftUI from the connected Figma selection, write it into the configured Xcode project, and return refinement hints. After writing, the AI assistant SHOULD automatically apply the returned refinementInstructions to make the generated code adaptive and interactive — replacing raster placeholders with native SwiftUI controls, adding GeometryReader for adaptive layout, and wiring basic interactions.',
+  description: 'Generate SwiftUI from the connected Figma selection and write it into the configured Xcode project. THIS IS THE CORRECT TOOL TO CALL — it exports real PNG assets to Assets.xcassets and generates Image("name") references automatically. Use generationMode="fidelity" for designs with blend modes, 3D renders, complex shadows, or photographic images — fidelity rasterizes the whole frame as one pixel-perfect PNG instead of trying to reconstruct it with shapes.',
   inputSchema: {
     nodeIds: z.array(z.string()).optional().describe('Optional list of Figma node ids. If omitted, uses the current selection'),
     includeOverflow: z.boolean().default(false).describe('Ignore Figma clipping when generating layout'),
-    generationMode: z.enum(['editable', 'fidelity']).default('editable').describe('Editable keeps more native SwiftUI structure; fidelity rasterizes more complex layouts'),
+    generationMode: z.enum(['editable', 'fidelity']).default('editable').describe('Use fidelity for designs with blend modes, 3D renders, complex shadows, or photographic content — rasterizes the whole frame as one pixel-perfect PNG. Use editable for UI screens with native controls (buttons, lists, forms).'),
     projectPath: z.string().optional().describe('Optional Xcode source folder override'),
   },
 }, async ({ nodeIds, includeOverflow, generationMode, projectPath }) => {

package/package.json

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