Ismail/ai-design-assistant
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Wireframe ersellen

Browse Source
This commit is contained in:
Ismail Ali
2025-07-18 05:47:07 +02:00
parent 24e2de97c6
commit a7bfbe45d8
2 changed files with 85 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

111
code.js
View File

@@ -45,40 +45,91 @@ figma.ui.onmessage = async (msg) => {
}); });
break; break;
case 'ai-generate': case 'ai-generate':
try { try {
const response = await fetch('http://localhost:3001/api/generate-design', { const response = await fetch('http://localhost:3001/api/generate-design', {
method: 'POST', method: 'POST',
headers: { 'Content-Type': 'application/json' }, headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ prompt: msg.prompt }) body: JSON.stringify({ prompt: msg.prompt })
}); });
const result = await response.json(); const result = await response.json();
for (const element of result.elements) { for (const element of result.elements) {
if (element.type === 'rectangle') { if (element.type === 'rectangle') {
const rect = figma.createRectangle(); const rect = figma.createRectangle();
rect.x = element.x; rect.x = element.x;
rect.y = element.y; rect.y = element.y;
rect.resize(element.width, element.height); rect.resize(element.width, element.height);
rect.fills = [{ type: 'SOLID', color: element.color }]; rect.fills = [{ type: 'SOLID', color: element.color }];
figma.currentPage.appendChild(rect); figma.currentPage.appendChild(rect);
} else if (element.type === 'text') { } else if (element.type === 'text') {
const textNode = figma.createText(); const textNode = figma.createText();
await figma.loadFontAsync({ family: "Inter", style: "Regular" }); await figma.loadFontAsync({ family: "Inter", style: "Regular" });
textNode.characters = element.text; textNode.characters = element.text;
textNode.fontSize = element.fontSize || 20; textNode.fontSize = element.fontSize || 20;
textNode.x = element.x; textNode.x = element.x;
textNode.y = element.y; textNode.y = element.y;
figma.currentPage.appendChild(textNode); figma.currentPage.appendChild(textNode);
}
}
} catch (error) {
figma.ui.postMessage({ type: 'error', message: error.message });
} }
} break;
} catch (error) {
figma.ui.postMessage({ type: 'error', message: error.message });
}
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: default:
console.log("Unknown message:", msg); console.log("Unknown message:", msg);

4
ui.html
View File

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