Frontend mit KI: Screenshots als Feedback

Ein Agent sieht dein UI nicht – bis du ihm einen Screenshot gibst. Visuelles Feedback ist der Schlüssel zu guter Frontend-Arbeit mit KI.

Das Problem: KI sieht dein UI nicht

Ein Agent, der Code schreibt, „sieht" das Ergebnis im Browser nicht automatisch. Er weiß nicht, ob ein Button richtig ausgerichtet ist oder ob Text überläuft – es sei denn, du zeigst es ihm. Genau das ist der Unterschied zwischen „mach das Dashboard schöner" (vage) und einem Screenshot plus konkreter Anweisung.

Screenshots als Feedback

Du kannst Screenshots direkt einfügen: per Drag-and-drop, per Copy-Paste oder als Dateipfad. Gib dem Agenten ein Bild vom gewünschten Design und lass ihn danach einen Screenshot vom Ergebnis machen und vergleichen. So entsteht ein Kreislauf, den der Agent selbst schließen kann, statt dass du jeden Zwischenschritt manuell prüfst.

Komponenten-Iteration

Arbeite in kleinen Schritten: eine Komponente bauen, Screenshot machen, Unterschiede zum Ziel benennen, korrigieren. Das funktioniert besser als „bau die ganze Seite" auf einmal, weil Fehler früh sichtbar werden.

Design-Systeme nutzen

Wenn dein Projekt ein Design-System hat (feste Farben, Abstände, Komponenten), sag dem Agenten das explizit oder zeig ihm bestehende Komponenten als Vorlage. Das verhindert, dass er eigene, inkonsistente Lösungen erfindet.

Visuell verifizieren

Am Ende zählt nicht der Code, sondern das sichtbare Ergebnis. Lass dir immer einen Screenshot des tatsächlichen Ergebnisses zeigen, nicht nur eine Beschreibung von „fertig".

BEISPIEL

Prompt mit Bild: „[Screenshot des Zieldesigns eingefügt] Implementiere dieses Design für die Dashboard-Kopfzeile. Nutze unsere bestehenden Komponenten aus @src/components. Mach danach einen Screenshot vom Ergebnis, vergleiche mit dem Original und liste Unterschiede auf."

🛠️ ÜBUNG — MACH DAS BEI DIR

Nimm eine kleine UI-Komponente aus einem Übungsprojekt (oder erstelle eine einfache Karten-Komponente) und lass einen Agenten sie gegen ein Bild-Vorbild iterieren.

Suche oder erstelle ein Referenzbild (Screenshot einer Webseite, Design-Mockup) und füge es dem Agenten bei.
Prompt: „Implementiere dieses Design als Komponente. Mach danach einen Screenshot des Ergebnisses und vergleiche mit dem Original."
Lass den Agenten mindestens einmal selbst nachbessern, basierend auf dem Vergleich, bevor du selbst eingreifst.

✅ SELBST-CHECK

☐ Hat der Agent tatsächlich einen Screenshot gemacht und verglichen, oder nur behauptet, es sehe gut aus?
☐ Welche konkreten Abweichungen hat der Vergleich aufgedeckt?
☐ War das Ergebnis nach der Selbstkorrektur näher am Original als der erste Versuch?

KURZ-QUIZ

Warum ist ein Screenshot des Zieldesigns effektiver als der Prompt „mach das Dashboard schöner"?