Eigenes Screentool erstellen

Erstelle ein neues Modul mit KI-Unterstützung oder programmiere es selbst.

Mit KI erstellen

Selbst programmieren

Schritt 1: Idee beschreiben

Was soll dein Screentool können? Beschreibe es in eigenen Worten.

Schritt 2: Prompt kopieren und an KI geben

Klicke auf den Button, um einen fertigen Prompt zu erzeugen. Kopiere ihn und füge ihn in ein KI-Sprachmodell ein (z.B. ChatGPT, Claude, Gemini).

Schritt 3: KI-Ergebnis einfügen

Kopiere die JSON-Antwort der KI hierher.

Kopiere den folgenden Text und sende ihn an das Sprachmodell, damit es den Fehler korrigiert:

JSON direkt bearbeiten

Bearbeite das JSON unten. Die Kommentare erklären die einzelnen Felder. Wenn alles passt, klicke auf „Modul importieren".

{
  // Eindeutige ID (Kleinbuchstaben, Zahlen, Bindestriche)
  "id": "mein-tool",

// Anzeigename im Menü
  "name": "Mein Tool",

// Emoji-Icon fürs Menü
  "icon": "🧩",

// Optionale CSS-Regeln (werden als <style> injiziert)
  "css": "",

// Anfangszustand — wird als Funktionskörper ausgeführt, muss Objekt zurückgeben
  "defaultState": "return { text: 'Hallo Welt' };",

// Vollbild-Anzeige — erhält state, gibt HTML zurück
  "renderDisplay": "return `<div style='font-size:4rem;display:flex;align-items:center;justify-content:center;width:100%;height:100%'>${state.text}</div>`;",

// Einstellungs-Sidebar — erhält state, gibt HTML zurück
  "renderConfig": "return `<label>Text</label><input type='text' id='cfg-text' value='${state.text}'>`;",

// Event-Listener — erhält container, state, api
  // api: saveState(state), getState(), refresh(), container, configPanel
  "init": "api.configPanel.querySelector('#cfg-text').addEventListener('input', function(e) { state.text = e.target.value; api.saveState(state); var el = container.querySelector('div'); if(el) el.textContent = state.text; });",

// Aufräumen beim Deaktivieren (optional)
  "destroy": ""
}

Modul erfolgreich importiert! Probiere es aus →
Wenn es nicht so funktioniert wie gewünscht, kannst du es im Menü wieder löschen und es mit einer verbesserten Beschreibung erneut versuchen.

← Zurück zu WorkshopScreen