feat: Wireframe ersellen

code.js

@@ -45,40 +45,91 @@ figma.ui.onmessage = async (msg) => {
       });
       break;
 
-case 'ai-generate':
-  try {
-    const response = await fetch('http://localhost:3001/api/generate-design', {
-      method: 'POST',
-      headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify({ prompt: msg.prompt })
-    });
-    const result = await response.json();
+    case 'ai-generate':
+      try {
+        const response = await fetch('http://localhost:3001/api/generate-design', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ prompt: msg.prompt })
+        });
+        const result = await response.json();
 
-    for (const element of result.elements) {
-      if (element.type === 'rectangle') {
-        const rect = figma.createRectangle();
-        rect.x = element.x;
-        rect.y = element.y;
-        rect.resize(element.width, element.height);
-        rect.fills = [{ type: 'SOLID', color: element.color }];
-        figma.currentPage.appendChild(rect);
+        for (const element of result.elements) {
+          if (element.type === 'rectangle') {
+            const rect = figma.createRectangle();
+            rect.x = element.x;
+            rect.y = element.y;
+            rect.resize(element.width, element.height);
+            rect.fills = [{ type: 'SOLID', color: element.color }];
+            figma.currentPage.appendChild(rect);
 
-      } else if (element.type === 'text') {
-        const textNode = figma.createText();
-        await figma.loadFontAsync({ family: "Inter", style: "Regular" });
-        textNode.characters = element.text;
-        textNode.fontSize = element.fontSize || 20;
-        textNode.x = element.x;
-        textNode.y = element.y;
-        figma.currentPage.appendChild(textNode);
+          } else if (element.type === 'text') {
+            const textNode = figma.createText();
+            await figma.loadFontAsync({ family: "Inter", style: "Regular" });
+            textNode.characters = element.text;
+            textNode.fontSize = element.fontSize || 20;
+            textNode.x = element.x;
+            textNode.y = element.y;
+            figma.currentPage.appendChild(textNode);
+          }
+        }
+
+      } catch (error) {
+        figma.ui.postMessage({ type: 'error', message: error.message });
       }
-    }
-
-  } catch (error) {
-    figma.ui.postMessage({ type: 'error', message: error.message });
-  }
-  break;
+      break;
 
+    case 'create-wireframe':
+      // Header
+      const header = figma.createRectangle();
+      header.resize(800, 80);
+      header.x = 100;
+      header.y = 100;
+      header.fills = [{ type: 'SOLID', color: { r: 0.9, g: 0.9, b: 0.9 } }];
+      header.name = 'Header';
+      figma.currentPage.appendChild(header);
+      // Header Text
+      const headerText = figma.createText();
+      await figma.loadFontAsync({ family: "Inter", style: "Regular" });
+      headerText.characters = "Header";
+      headerText.x = 120;
+      headerText.y = 130;
+      headerText.fontSize = 32;
+      figma.currentPage.appendChild(headerText);
+      // Content
+      const content = figma.createRectangle();
+      content.resize(800, 400);
+      content.x = 100;
+      content.y = 200;
+      content.fills = [{ type: 'SOLID', color: { r: 0.95, g: 0.95, b: 0.95 } }];
+      content.name = 'Content';
+      figma.currentPage.appendChild(content);
+      // Content Text
+      const contentText = figma.createText();
+      await figma.loadFontAsync({ family: "Inter", style: "Regular" });
+      contentText.characters = "Content";
+      contentText.x = 120;
+      contentText.y = 220;
+      contentText.fontSize = 24;
+      figma.currentPage.appendChild(contentText);
+      // Footer
+      const footer = figma.createRectangle();
+      footer.resize(800, 60);
+      footer.x = 100;
+      footer.y = 620;
+      footer.fills = [{ type: 'SOLID', color: { r: 0.85, g: 0.85, b: 0.85 } }];
+      footer.name = 'Footer';
+      figma.currentPage.appendChild(footer);
+      // Footer Text
+      const footerText = figma.createText();
+      await figma.loadFontAsync({ family: "Inter", style: "Regular" });
+      footerText.characters = "Footer";
+      footerText.x = 120;
+      footerText.y = 640;
+      footerText.fontSize = 20;
+      figma.currentPage.appendChild(footerText);
+      figma.viewport.scrollAndZoomIntoView([header, content, footer]);
+      break;
 
     default:
       console.log("Unknown message:", msg);

ui.html

@@ -20,6 +20,7 @@
 
     <button id="create-rect">Create Rectangle</button>
     <button id="create-text">Create Text</button>
+    <button id="create-wireframe">Wireframe erstellen</button>
 
     <textarea
       id="ai-prompt"
@@ -51,6 +52,9 @@
         document.getElementById("get-selection").onclick = () => {
           parent.postMessage({ pluginMessage: { type: "get-selection" } }, "*");
         };
+        document.getElementById("create-wireframe").onclick = () => {
+          parent.postMessage({ pluginMessage: { type: "create-wireframe" } }, "*");
+        };
       };
 
       document.getElementById("ai-generate").onclick = () => {