Kunde schickt einen Screenshot als Vorlage: Divis KI-Agent baut daraus ein eigenes Farb- und Schriftsystem

Ein Kunde schickt den Screenshot einer Website, die ihm gefällt, oder ein Foto von seinem Flyer, und fragt, ob die eigene Seite genauso aussehen kann. Bisher hieß das: Farben mit der Pipette aus dem Bild ziehen, Schriftgröße schätzen, Abstände nach Augenmaß nachbauen. Elegant Themes hat am 30. Oktober 2026 beschrieben, wie der Divi-AI-Agent diesen Abgleich übernimmt – als fertige Funktion, nicht als Beta.

Das Problem: ein Bild, aber kein Code

Ein Screenshot verrät nicht, welche Schriftart tatsächlich verwendet wird, welchen Hex-Wert eine Farbe hat oder wie groß ein Abstand in Pixeln ist. Wer das von Hand nachbaut, trifft lauter kleine Einzelentscheidungen, die am Ende selten zusammenpassen: eine Überschrift wirkt zu groß, der Zeilenabstand zu eng, die Buttonfarbe einen Ton daneben. Genau diese Abschätzarbeit will der Agent übernehmen, indem er das Bild direkt analysiert statt nur zu beschreiben, was er sieht.

Was der Agent dahinter tut

Der Divi-AI-Agent arbeitet laut Elegant Themes in zwei Schritten: Im Ask-Modus prüft er zunächst die vorhandenen Farb-, Schrift- und Zahlen-Variablen der Seite und schlägt Änderungen vor, ohne sie schon anzuwenden. Erst im Build-Modus setzt er sie um. Aus dem Screenshot liest er Hex-Werte für Farben, mögliche Schriftfamilien, die Größenverhältnisse zwischen Überschrift und Fließtext, Eckenradien von Buttons und Karten sowie typische Abstände in der Heading-Hierarchie heraus. Das Ergebnis sind keine klassischen globalen Elemente, sondern aktualisierte Design-Variablen, dazu Option-Group- und Element-Presets, die sich wie ein Baukasten auf mehrere Module anwenden lassen – dieselben Variablen, die sich seit dem letzten Update auch verschachteln und miteinander verrechnen lassen. Wie weit die Agenten im Divi-5-Builder inzwischen eingreifen dürfen, habe ich bereits bei der Einführung der über 200 Werkzeuge und drei Risikostufen eingeordnet.

Schritt für Schritt: vom Screenshot zu eigenen Variablen

• Im Variable Manager unter der Gruppe „Numbers“ zunächst über „Generate Fluid Sizing Variables“ Skalen für Schriftgröße, Abstand, Lücke und Radius anlegen – darauf baut der Agent später auf.
• Im Chat des AI-Agenten den Screenshot per Anhang-Funktion hochladen (JPEG oder PNG).
• Den Agenten die bestehenden Variablen gegen das Bild prüfen lassen; er schlägt Zuordnungen zu vorhandenen oder neuen Variablen vor.
• Die vorgeschlagenen Variablen im Variable Manager gegenprüfen, bevor sie übernommen werden.
• Erst danach eine Seite oder Sektion mit diesen Variablen statt mit festen Werten erzeugen lassen.

Was Sie danach prüfen sollten

Elegant Themes schreibt selbst, dass Farben Schätzwerte sind, vor allem bei kantengeglätteten Schriften, Verläufen oder komprimierten Bildkanten. Ich würde jede abgeleitete Farbe gegen das Original-Logo oder vorhandene CI-Vorgaben prüfen, statt sie blind zu übernehmen – gerade wenn es um die Hausfarbe eines Kunden geht, zählt der dokumentierte Hex-Wert aus den Markenunterlagen mehr als die Schätzung aus einem Foto. Schriftarten müssen zudem in Divi verfügbar sein, sonst wählt der Agent eine Ersatzschrift. Und weil Variablenänderungen global wirken, also jede Seite betreffen, die sie referenziert, gehört dieser Schritt auf eine Staging-Umgebung, nicht auf die Live-Seite. Für die Nutzung braucht es außerdem ein aktives Divi-AI-Abonnement oder Divi Pro, und jede Agentenanfrage zieht zusätzlich auf einem separaten Guthabenkonto, dem AI Wallet.

Wie man es künftig vermeidet

Wenn ein Kunde ein fremdes Design als Vorbild schickt, kläre ich vorher, ob er die eigene Marke eigentlich nur in Divi abbilden will oder tatsächlich das Design einer anderen Website kopieren möchte – rechtlich ist beides ein Unterschied. Für die eigene Marke lohnt sich ein kurzes CI-Dokument mit den tatsächlichen Hex-Werten und der lizenzierten Schriftart, dann entfällt das Schätzen ganz. Der Agent eignet sich am besten für den ersten groben Entwurf, den man anschließend von Hand feinjustiert, nicht als letzter Schritt vor der Veröffentlichung – wie viel handwerkliches Webdesign dabei am Ende noch nötig ist, zeigt sich meist erst in dieser Feinjustierung.

Quellen

Elegant Themes: Creating A Design System From A Screenshot with Divi AI Agents (30. Oktober 2026)

Kurz beantwortet

Kann der Divi-AI-Agent ein Logo aus einem Screenshot originalgetreu nachbauen?

Nein. Er schätzt Farben, Schriften und Proportionen aus dem Bild – für ein Logo oder verbindliche Markenfarben braucht es die echten Werte aus den Markenunterlagen.

Ist die Funktion kostenlos, wenn ich schon ein Divi-Abo habe?

Nein. Zusätzlich zum Divi-AI-Abonnement oder Divi Pro wird jede Agentenanfrage über ein separates Guthabenkonto, das AI Wallet, abgerechnet.

Soll ich die vom Agenten erzeugten Variablen direkt auf der Live-Seite anwenden?

Nein. Da Variablenänderungen alle Seiten betreffen, die sie referenzieren, gehört der Test zuerst auf eine Staging-Umgebung.