Moodle KI-Design-Generator 🎨

• Jörg Steinemann

• Lizenz: CC0

Einführung

Vom Gedanken zur fertigen Gestaltung in wenigen Minuten – ganz ohne HTML- oder CSS-Kenntnisse. Der KI-Design-Editor übersetzt Ihre Beschreibung („zweispaltiges Layout mit Bild", „Hinweisbox für wichtige Informationen", „Agenda mit vier Terminen") automatisch in sauberen, Moodle-tauglichen Code. So entstehen professionelle, einheitliche Gestaltungselemente, die Sie per Klick in Ihren Kurs übernehmen und bei Bedarf im TinyMCE-Editor feinjustieren.

Was ist der KI-Design-Generator?

• Dieses Werkzeug ist Ihr persönlicher Design-Assistent für Moodle. Es vereinfacht den Designprozess erheblich.
• Anstatt sich mit komplexem HTML- und CSS-Code zu beschäftigen, können Sie hier in einfachen Worten beschreiben, wie ein Inhaltselement aussehen soll.
• Die künstliche Intelligenz (KI) übersetzt Ihre Wünsche direkt in fertigen Code, den Sie einfach in Moodle kopieren können.

Warum sich das Ausprobieren lohnt

• Schnell & einfach: natürliche Sprache statt Code.
• Konsistent: auf Wunsch strikt an Ihren Styleguide (Farben, Schriften, Abstände) gebunden.
• Vorschau inklusive: sehen, anpassen, übernehmen.
• Wiederverwendbar: Bausteine, die in verschiedenen Kursen funktionieren.
• Fokussieren Sie sich auf Inhalte – der Editor übernimmt das Design. Geben Sie Ihre erste Idee ein, und lassen Sie sich überraschen, wie schnell daraus ein überzeugendes Moodle-Element wird.

Wie funktioniert er?

Gib im Feld „Design beschreiben" eine Anweisung oder Beschreibung für dein Wunschdesign ein. Zum Beispiel: „Eine moderne Box mit einem dicken grünen Rand links für wichtige Hinweise" oder „Ein zweispaltiges Layout mit Bild links und Text rechts". Nach einem Klick auf „Design generieren" erstellt die KI eine Vorschau und den Code. Du kannst auch direkt Text als Inhalt eingeben und bekommst ein zum Inhalt passendes Layout, welches du auch im TinyMCE Editor noch anpassen kannst.

Auch Schlagwörter führen zu Ergebnissen: z.B. Hinweisbox oder Agenda mit 4 Terminen sind möglich. Je besser Du es beschreibst, desto genauer das Ergebnis.

Konsistenz und Vielfalt

Der Generator kann an einen visuellen Leitfaden (Styleguide) angebunden werden. Die KI kann angewiesen werden, nur bestimmte Farben, Schriftarten oder Abstände zu verwenden. Weitere, diesbezügliche Details finden Sie unterhalb dieses Beispiels.

Beispiel

In der Box unten „HTML für den KI-Design-Generator" finden Sie das gesamte, notwendige HTML für den Generator. Kopieren Sie das HTML einfach in einen beliebigen Text-Editor und speichern das HTML ab. Wichtig: Die Datei muss die Endung .html haben.

!!!Achtung wichtig!!!

const apiKey = "hier müssen Sie ihren API-Key einfügen";

const apiUrl =

Im dritten Feld „Code für Moodle" wird Ihnen das HTML für die weitere Nutzung in Moodle angezeigt.

Über die Schaltfläche „Kopieren" übertragen Sie das HTML in Moodle.

Weiterarbeit in Moodle

Nachdem Sie das HTML kopiert haben, wechseln Sie in den zu bearbeitenden Kurs in Ihrer Moodle-Instanz.

Schritt 1: Aktivität anlegen

Gehen sie zu der Stelle in Ihrem Moodle-Kurs, an welcher Sie das Design-Element einfügen möchten und klicken Sie anschließend auf „Aktivität oder Material anlegen":

Schritt 2: Text- und Medienfeld wählen

Wählen Sie die Aktivität „Text- und Medienfeld" aus, eine Alternative wäre ein „Universelles Textfeld"

Wichtig ist an dieser Stelle, dass der tinyMCE-Editor in ihrer Instanz zur Verfügung steht, bzw. als Standardeditor ausgewählt ist.

Schritt 3: Quellcode-Ansicht öffnen

Wählen Sie im Menüpunkt „Ansicht" die Option „Quellcode" aus.

Daraufhin öffnet sich ein neues Fenster (gilt für den tinyMCE-Editor):

In dieses neue Fenster fügen sie das zuvor im KI-Design-Generator kopierte HTML ein:

Den Text bzw. die vom KI-Design-Editor erstellten Platzhalter passen Sie an dieser Stelle an bzw. füllen die Platzhalter.

Schritt 4: Speichern

Klicken Sie unten rechts auf „Speichern".

Im Editor sehen Sie jetzt eine Vorschau, welche Sie über den Menüpunkt „Ansicht" und die Option „Quellcode" erneut überarbeiten und anpassen können. Alternativ können Sie den Text auch direkt im Editor bearbeiten.

Schritt 5: Zum Kurs speichern

Klicken Sie nun auf „Speichern und zum Kurs". Anschließend wird Ihnen das vom KI-Design-Generator erstellte Element in Ihrem Kurs angezeigt.

Viel Spaß mit unserem KI-Design-Editor!

Download HTML-Vorlage

Kopieren Sie den HTML-Code unten in einen Text-Editor (z.B. Notepad, VS Code), speichern Sie die Datei mit der Endung .html (z.B. ki-design-generator.html).

Wichtige Anpassungen:

• In Zeile mit const apiKey = müssen Sie Ihren API-Key einfügen
• In Zeile mit const apiUrl = können Sie die API-URL anpassen (Google Gemini ist voreingestellt)
• Unterhalb von const styleGuide = können Sie den Systemprompt für Ihr gewünschtes Design anpassen

Code-Vorlage für KI-Design-Generator:

<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Moodle KI-Design-Generator</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <!-- Schriftart auf Open Sans geändert, wie im Styleguide vorgegeben -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&display=swap" rel="stylesheet">
    <style>
        body {
            /* Schriftart und Farben gemäß Styleguide */
            font-family: 'Open Sans', sans-serif;
            background-color: #ececec; /* Primär 6 (Hellgrau) */
            color: #28344a; /* Primär 3 (Getöntes Schwarz) */
        }
        .component-preview, .copy-button, .ai-button {
            transition: all 0.3s ease;
        }
        .ai-button:disabled {
            cursor: not-allowed;
            opacity: 0.6;
        }
        .loader {
            border: 2px solid #f3f3f3;
            border-top: 2px solid #fff;
            border-radius: 50%;
            width: 16px;
            height: 16px;
            animation: spin 1s linear infinite;
        }
        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
    </style>
</head>
<body>

    <!-- Hauptcontainer mit max-width von 900px gemäß Styleguide -->
    <div class="max-w-[900px] mx-auto p-4 md:p-8">
        <header class="text-center mb-8">
            <!-- Überschrift in Primärfarbe 3 -->
            <h1 class="text-3xl md:text-4xl font-bold" style="color: #28344a;">Moodle KI-Design-Generator 🎨</h1>
            <!-- Text in Dunkelgrau -->
            <p style="color: #505050;" class="mt-2">Beschreiben Sie Ihr Wunschdesign und erhalten Sie fertigen Code für Moodle.</p>
        </header>

        <!-- Einspaltiges Layout mit flex-col -->
        <div class="flex flex-col gap-8">
            <!-- Sektion 1: Konfiguration -->
            <div class="bg-white p-6 rounded-lg shadow-md">
                <h2 class="text-2xl font-bold mb-4 border-b pb-2" style="color: #28344a;">1. Design beschreiben</h2>
                <div>
                    <label for="description" class="block text-sm font-bold text-[#505050] mb-1">Beschreiben Sie Ihr gewünschtes Design</label>
                    <textarea id="description" rows="8" class="w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#e50046] focus:border-[#e50046]" placeholder="z.B. eine moderne Box mit blauem Farbverlauf, abgerundeten Ecken und einem leichten Schatten..."></textarea>
                    <!-- Button in NLQ-Rot (Primär 1 & 2) -->
                    <button id="aiButton" class="ai-button mt-4 w-full flex items-center justify-center gap-2 text-white px-4 py-3 rounded-lg text-base font-bold" style="background-color: #e50046;" onmouseover="this.style.backgroundColor='#c6003c'" onmouseout="this.style.backgroundColor='#e50046'">
                        🎨 Design generieren
                    </button>
                </div>
            </div>

            <!-- Sektion 2: Vorschau und Code -->
            <div class="bg-white p-6 rounded-lg shadow-md">
                <h2 class="text-2xl font-bold mb-4 border-b pb-2" style="color: #28344a;">2. Vorschau</h2>
                <div id="preview" class="component-preview border border-gray-200 rounded-lg p-4 min-h-[150px] bg-gray-50">
                    <div class="p-4 rounded-lg text-center text-gray-500">Hier erscheint Ihr KI-generiertes Design.</div>
                </div>

                <h2 class="text-2xl font-bold mb-4 mt-6 border-b pb-2" style="color: #28344a;">3. Code für Moodle</h2>
                <div class="relative">
                    <textarea id="output" readonly class="w-full h-48 p-3 border border-gray-300 rounded-lg bg-[#28344a] text-white font-mono text-sm resize-none"></textarea>
                    <!-- Button in NLQ-Rot (Primär 1 & 2) -->
                    <button id="copyButton" class="copy-button absolute top-3 right-3 text-white px-4 py-2 rounded-lg text-sm" style="background-color: #e50046;" onmouseover="this.style.backgroundColor='#c6003c'" onmouseout="this.style.backgroundColor='#e50046'">Kopieren</button>
                </div>
                 <p id="copy-feedback" class="text-green-600 font-medium mt-2 opacity-0 transition-opacity">Code in die Zwischenablage kopiert!</p>
            </div>
        </div>
         <footer class="text-center mt-12 text-[#7f7f7f] text-sm">
            <p>2025 Prototyp - Moodle KI-Design-Generator</p>
        </footer>
    </div>

    <script>
        // DOM-Elemente
        const descriptionInput = document.getElementById('description');
        const aiButton = document.getElementById('aiButton');
        const preview = document.getElementById('preview');
        const output = document.getElementById('output');
        const copyButton = document.getElementById('copyButton');
        const copyFeedback = document.getElementById('copy-feedback');
        
        async function callGemini(prompt, buttonElement) {
            const originalButtonContent = buttonElement.innerHTML;
            buttonElement.disabled = true;
            buttonElement.innerHTML = '<div class="loader"></div>';

            const apiKey = "hier müssen Sie ihren API-Key einfügen"; 
            const apiUrl = `https://generativelanguage.googleapis.com/v1beta/models/gemini-2.0-flash:generateContent?key=${apiKey}`;
            
            const payload = { contents: [{ role: "user", parts: [{ text: prompt }] }] };

            try {
                const response = await fetch(apiUrl, {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify(payload)
                });
                
                if (!response.ok) throw new Error(`API-Fehler: ${response.statusText}`);

                const result = await response.json();
                
                if (result.candidates && result.candidates.length > 0) {
                    let text = result.candidates[0].content.parts[0].text;
                    
                    const match = text.match(/```html\n([\s\S]*?)\n```/);
                    if (match && match[1]) {
                        return match[1].trim();
                    }
                    
                    const firstTagIndex = text.indexOf('<');
                    const lastTagIndex = text.lastIndexOf('>');
                    if (firstTagIndex !== -1 && lastTagIndex !== -1 && lastTagIndex > firstTagIndex) {
                        return text.substring(firstTagIndex, lastTagIndex + 1).trim();
                    }

                    return text;

                } else {
                    return "<div>Leider konnte kein Design generiert werden.</div>";
                }
            } catch (error) {
                console.error("Fehler beim Aufruf der Gemini API:", error);
                return `<div>Fehler: ${error.message}</div>`;
            } finally {
                buttonElement.disabled = false;
                buttonElement.innerHTML = originalButtonContent;
            }
        }
        
        async function generateAIDesign() {
            if (!descriptionInput.value.trim()) {
                preview.innerHTML = `<div style="padding: 1rem; border-radius: 0.5rem; background-color: #fef2f2; color: #991b1b;">Bitte geben Sie zuerst eine Beschreibung für Ihr Design ein.</div>`;
                return;
            }

            const styleGuide = `
**VERBINDLICHER STYLEGUIDE FÜR DAS KI-DESIGN (NLQ Moodle):**

Du bist ein Experte für Webdesign und Moodle-Layouts. Deine Aufgabe ist es, HTML-Code basierend auf den Wünschen des Nutzers und den folgenden strikten Regeln zu erstellen.

**1. GRUNDLEGENDE ANFORDERUNGEN:**
   - **Nur Inline-CSS:** Der gesamte Style MUSS inline im \`style\`-Attribut geschrieben werden.
   - **Keine Style-Tags oder Klassen:** Verwende KEINE externen oder internen \`<style>\`-Tags und KEINE CSS-Klassen.
   - **Einzelne HTML-Struktur:** Erstelle eine einzelne, in sich geschlossene HTML-Struktur (z.B. ein umschließendes \`div\`).
   - **Platzhalter-Inhalte:** Füge passende Platzhalter-Inhalte (Überschriften, Absätze, Listen) ein, damit das Design und die Struktur klar ersichtlich sind.
   - **Nur reiner HTML-Code:** Gib NUR den reinen HTML-Code zurück, OHNE jeglichen Begleittext oder Erklärungen. Deine Antwort muss in einem Markdown-Code-Block für HTML formatiert sein.

**2. LAYOUT & RESPONSIVE DESIGN (RASTER):**
   - **Maximale Breite (Inneres Raster):** Der Hauptcontainer muss eine maximale Breite von 900px haben (\`max-width: 900px;\`) und horizontal zentriert sein (\`margin: 0 auto;\`). Verwende **niemals** eine feste Breite (\`width: 900px;\`).
   - **Responsive Code:** Der gesamte Code MUSS responsive sein. Das bedeutet, dass sich das Layout auf kleineren Bildschirmen (z.B. Smartphones) automatisch anpasst und gut lesbar bleibt. Verwende flexible Einheiten und Techniken, wo immer es möglich ist (z.B. Breiten in Prozent für Spalten innerhalb des Hauptcontainers).
   - **Abstände (Padding & Margin):** Sei großzügig mit Innen- und Außenabständen, um eine klare Struktur zu schaffen.
     - **Padding in Boxen:** Mindestens \`20px\`.
     - **Abstand zwischen Elementen:** Mindestens \`20px\`.
   - **Schatten & Kanten:** Verwende subtile Schatten (\`box-shadow: 0 4px 12px rgba(0,0,0,0.08);\`) und abgerundete Ecken (\`border-radius: 8px;\`), um eine moderne Optik zu erzeugen.

**3. FARBPALETTE (VERBINDLICH):**
   - **Primärfarben (kursübergreifend):**
     - **Primär 1 (NLQ-Rot, für Links):** \`#e50046\`
     - **Primär 2 (Hover-Farbe für Links):** \`#c6003c\`
     - **Primär 3 (Getöntes Schwarz, für Hauptüberschriften H3, H5, H6):** \`#28344a\`
     - **Primär 4 (Dunkelgrau):** \`#505050\`
     - **Primär 5 (Mittelgrau):** \`#7f7f7f\`
     - **Primär 6 (Hellgrau, für Hintergründe):** \`#ececec\`
   - **Kursfarben (wird für spezifische Elemente wie H4 oder farbige Boxen verwendet):**
     - **Orange:** \`#ff6206\`
     - **Olivgrün:** \`#84b727\`
     - **Mintgrün:** \`#2f9c95\`
     - **Blau:** \`#006ed8\`
     - **Amethystblau:** \`#5e4bbd\`
     - **Purpur:** \`#9c2386\`
   - **WICHTIG:** Wähle EINE passende Kursfarbe für das Design aus, wenn die Nutzerbeschreibung eine Farbe andeutet, und verwende sie konsistent. Mische die Kursfarben nicht.

**4. TYPOGRAFIE & LESBARKEIT (VERBINDLICH):**
   - **Schriftart:** Verwende ausschließlich \`font-family: 'Open Sans', sans-serif;\`.
   - **Überschriften:**
     - **H3:** \`font-family: 'Open Sans', sans-serif; font-weight: 700; font-size: 28px; color: #28344a;\`
     - **H4 (in Kursfarbe):** \`font-family: 'Open Sans', sans-serif; font-weight: 700; font-size: 28px; color: [EINE KURSARBE HIER];\`
     - **H5:** \`font-family: 'Open Sans', sans-serif; font-weight: 700; font-size: 20px; color: #28344a;\`
     - **H6:** \`font-family: 'Open Sans', sans-serif; font-weight: 700; font-size: 18px; color: #28344a;\`
   - **Fließtext (p):**
     - \`font-family: 'Open Sans', sans-serif; font-weight: 400; font-size: 18px; line-height: 1.2;\`
   - **Links (a):**
     - \`color: #e50046; text-decoration: none;\` (Unterstreichung nur bei Hover).

**5. BILDER:**
   - Verwende ausschließlich hochwertige Platzhalter-URLs von pexels.com oder placehold.co. Die Bilder sollten thematisch passen (z.B. Zusammenarbeit, Lernen, Technologie).
   - Achte auf die Bildformate aus dem Styleguide: oft quadratisch (z.B. 450x450px) oder daraus abgeleitet (z.B. 900x450px).
`;

            const prompt = `${styleGuide}

**DEINE AUFGABE:**
Erstelle nun ein neues, einzigartiges Design, das auf der folgenden Beschreibung des Nutzers basiert und sich strikt an den oben genannten, verbindlichen Styleguide hält: "${descriptionInput.value}"`;
            
            const generatedHtml = await callGemini(prompt, aiButton);
            preview.innerHTML = generatedHtml;
            output.value = generatedHtml;
        }

        // Event Listeners
        aiButton.addEventListener('click', generateAIDesign);
        
        copyButton.addEventListener('click', () => {
            output.select();
            try {
                document.execCommand('copy');
                copyFeedback.style.opacity = '1';
                copyButton.textContent = "Kopiert!";
                setTimeout(() => {
                    copyFeedback.style.opacity = '0';
                    copyButton.textContent = "Kopieren";
                }, 2000);
            } catch (err) {
                console.error('Konnte den Text nicht kopieren: ', err);
                copyFeedback.textContent = "Kopieren fehlgeschlagen!";
                copyFeedback.style.color = "#991b1b";
                copyFeedback.style.opacity = '1';
                 setTimeout(() => {
                    copyFeedback.style.opacity = '0';
                    copyFeedback.textContent = "Code in die Zwischenablage kopiert!";
                    copyFeedback.style.color = "#15803d";
                }, 3000);
            }
        });

    </script>

</body>
</html>

Projekt ReMoodle

• kontakt[at]remoodle.de

ReMoodle ist ein Projekt von

• J&K – Jöran und Konsorten GmbH & Co. KG
  Schmilinskystraße 45
  20099 Hamburg, Deutschland
• +49 (0)40 75 66 61 80
• Öffentlicher PGP-Schlüssel für die Adresse buero[at]joeran.de

• Impressum