KI-Layout-Generator

Der KI-Layout-Generator fügt in der Werkzeugleiste einer Seite den Button KI-Layout hinzu. Damit machst du aus dem Screenshot einer beliebigen Webseite fertige Baukasten-Layouts auf der aktuellen Seite – inklusive Zeilen, Spalten, Blöcken und Texten.

Hinweis

Der Generator baut Layout, Struktur und Texte nach – nicht die Bilder des Screenshots. Farben und Schriften werden auf das Design deiner eigenen Seite umgelegt. So bekommst du ein sauberes Gerüst, das du danach mit deinen Inhalten füllst.

Einrichtung

Bevor der Button funktioniert, muss einmalig ein KI-Anbieter mit passendem API-Key hinterlegt werden. Das erledigt eine Person mit Administrator-Rechten.

1. Öffne den Tab Einstellungen und scrolle zum Abschnitt KI-Layout-Generator.

2. Wähle einen Anbieter (OpenRouter, OpenAI oder Anthropic) und trage den passenden API-Key ein:

   • OpenRouter – openrouter.ai/keys
   • OpenAI – platform.openai.com/api-keys
   • Anthropic – console.anthropic.com

3. Speichern. Sobald ein Key für den gewählten Anbieter hinterlegt ist, wird der Button KI-Layout aktiv.

Kosten

Jede Generierung verbraucht das Guthaben bzw. Kontingent des hinterlegten Anbieter-Kontos. Es gibt keinen gemeinsamen oder von Baukasten bereitgestellten Key – die Kosten laufen über den eingetragenen API-Key.

Verwendung

1. Öffne eine Seite mit einem Layout-Feld.

2. Klicke oben in der Werkzeugleiste auf KI-Layout, um das Menü zu öffnen.

3. Gib optional einen Hinweis ein, um das Ergebnis zu steuern (z. B. „nur der obere Bereich” oder „ohne Footer”). Wähle dann:

   • Ersetzen – das bestehende Layout der Seite wird ersetzt, oder
   • Anhängen – die neuen Layouts werden unter dem bestehenden Layout eingefügt.

4. Wähle einen Screenshot (JPEG, PNG oder WebP). Er wird analysiert; nach der Generierung werden die Layouts eingefügt und die Seite lädt neu.

Eine Generierung dauert in der Regel etwa 30 Sekunden.

Datenschutz & Sicherheit

Der Screenshot wird nicht in der Medienbibliothek gespeichert – er wird direkt zur Analyse gesendet. Nur Personen, die die Seite bearbeiten dürfen, können den Generator nutzen. Ein leeres Ergebnis überschreibt niemals ein bestehendes Layout.

Was erzeugt wird

• Layout & Struktur: Jede Zeile bekommt eine der im Baukasten definierten Spaltenaufteilungen (volle Breite, Hälften, Drittel, Viertel usw.). Passt eine erkannte Aufteilung nicht exakt, wird sie automatisch auf die nächstliegende gültige Variante gesetzt.
• Blöcke & Texte: Überschriften, Fließtexte und passende Blocktypen werden übernommen.
• Bilder bleiben leer: Bild-, Karten-, Vektor- und Datei-Felder werden nicht befüllt – die Medien fügst du nach dem Einfügen selbst hinzu.
• Farben & Schriften: Sie werden auf die Design-Vorgaben deiner Seite abgestimmt, nicht auf die exakten Farben des Screenshots.

Zentrierte Bereiche

Ein Screenshot verrät nicht, ob ein zentrierter, schmaler Bereich bewusst als eingerückte Spalte gedacht ist oder einfach der normale Seitenrand ist. Der Generator entscheidet konservativ – korrigiere die Spaltenaufteilung der Zeile bei Bedarf einfach im Layout-Editor.

Fehlermeldungen

Läuft etwas schief, erscheint eine Meldung im Panel. Das steckt dahinter:

• „Kein API-Key für … hinterlegt — bitte in den Einstellungen eintragen.” – Für den gewählten Anbieter ist kein Key gespeichert. Trage ihn im Tab Einstellungen (Abschnitt KI-Layout-Generator) ein.
• „API-Key ungültig oder abgelaufen. Bitte in den Einstellungen prüfen.” – Der Anbieter hat den Key abgelehnt. Prüfe den Wert und ob der richtige Anbieter ausgewählt ist.
• „Guthaben beim Provider aufgebraucht. Bitte Kontostand aufladen.” – Das Konto beim Anbieter hat kein Guthaben mehr. Lade das Konto beim jeweiligen Anbieter auf.
• „Zu viele Anfragen — bitte kurz warten und erneut versuchen.” – Der Anbieter drosselt gerade die Anfragen. Warte einen Moment und versuche es erneut.

Tipp

Zeigt die Seite im Frontend nach dem Einfügen noch die alte Version, kann der Seiten-Cache noch die vorherigen Daten ausliefern. Leere den Cache oder warte, bis er abläuft.