KI-Assistent
Der KI-Assistent öffnet sich über den Tab KI Assistent im Element-Panel oder direkt vom Startbildschirm aus. Er erstellt vollständige Layouts und nimmt gezielte Änderungen an bestehenden Elementen vor. Der Assistent läuft vollständig serverseitig: der API-Schlüssel verlässt den Server nie.
Modus wählen
| Modus | Wann nutzen |
|---|---|
| Erstellen | Neues Layout aus einem Prompt oder Bild generieren |
| Bearbeiten | Bestehendes Element verändern, z. B. einen Button hinzufügen |
Textprompt
- Wähle den Modus Erstellen.
- Beschreibe das gewünschte Layout im Eingabefeld, z. B. „Hero-Banner mit einem großen Bild, einer weißen Überschrift und einem CTA-Button".
- Klicke auf Element generieren.
Für einen schnellen Einstieg stehen Schnellstart-Buttons bereit: Banner, Slider, Accordion, Raster, Karte. Ein Klick füllt das Eingabefeld mit einem passenden Beispiel-Prompt vor.
Bildinput
Lade einen Screenshot, Mockup oder Wireframe hoch. Die KI liest Struktur und Stil direkt aus dem Bild und erzeugt das passende Layout. Den Bildinput ergänzt du im optionalen Textfeld mit Angaben, die das Bild nicht zeigt:
- Exakter Text (Überschriften, Fließtext, Button-Beschriftungen)
- Button-URLs
- Markenfarben, wenn sie vom Bild abweichen
- Hinweis, welchen Bereich verwenden, wenn der Screenshot mehrere Sektionen enthält
Maximale Bildgröße: 10 MB (wird automatisch komprimiert). Klicke auf das Upload-Feld oder ziehe das Bild hinein.
Nur mit Anthropic-Anbieter
Das Hochladen von Bildern erfordert den Anthropic-Anbieter, konfiguriert unter Einstellungen → System → Plugins → DmfTheOne → Konfigurieren.
Spracheingabe
Klicke auf Spracheingabe und diktiere deinen Prompt. Die Aufnahme läuft, bis du auf Aufnahme stoppen klickst. Die Spracheingabe wird in Text umgewandelt und wie ein normaler Prompt verarbeitet.
Bearbeitungsmodus
- Wechsle im KI-Assistenten in den Modus Bearbeiten.
- Beschreibe die gewünschte Änderung, z. B. „Füge einen Button unterhalb des Bildes in der ersten Spalte hinzu".
- Klicke auf Element generieren.
Die KI verändert nur den beschriebenen Bereich und lässt den Rest des Layouts unberührt.
Vorschau und Anwenden
Nach dem Generieren erscheint eine Vorschau des erzeugten Layouts.
- Klicke auf Auf Element anwenden, um das Layout zu übernehmen.
- Klicke auf ↩ Letzte Anwendung rückgängig, um den Zustand vor dem letzten Apply wiederherzustellen.
- Schließe das Panel ohne Anwenden, um den Vorschlag zu verwerfen.