75 lines
2.1 KiB
HTML
75 lines
2.1 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<style>
|
|
body {
|
|
font-family: sans-serif;
|
|
padding: 16px;
|
|
}
|
|
button,
|
|
textarea {
|
|
width: 100%;
|
|
padding: 8px;
|
|
margin: 8px 0;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<h3>AI Design Assistant</h3>
|
|
|
|
<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"
|
|
placeholder="Describe what you want to create..."
|
|
></textarea>
|
|
<button id="ai-generate">Generate with AI</button>
|
|
|
|
<button id="get-selection">Get Selection Info</button>
|
|
<pre id="selection-info"></pre>
|
|
|
|
<script>
|
|
const send = (msg) => {
|
|
parent.postMessage({ pluginMessage: msg }, "*");
|
|
};
|
|
|
|
window.onload = () => {
|
|
document.getElementById("create-rect").onclick = () => {
|
|
parent.postMessage(
|
|
{ pluginMessage: { type: "create-rectangle" } },
|
|
"*"
|
|
);
|
|
};
|
|
document.getElementById("create-text").onclick = () => {
|
|
parent.postMessage(
|
|
{ pluginMessage: { type: "create-text", text: "Hallo Figma!" } },
|
|
"*"
|
|
);
|
|
};
|
|
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 = () => {
|
|
const prompt = document.getElementById("ai-prompt").value;
|
|
send({ type: "ai-generate", prompt });
|
|
};
|
|
|
|
window.onmessage = (event) => {
|
|
const msg = event.data.pluginMessage;
|
|
if (msg?.type === "selection-data") {
|
|
document.getElementById("selection-info").textContent =
|
|
JSON.stringify(msg.data, null, 2);
|
|
}
|
|
};
|
|
</script>
|
|
</body>
|
|
</html>
|