Multimodales Prompting

Das Problem

Die meisten Entwickler nutzen nur Text-Prompts und ignorieren, dass moderne KI-Modelle Bilder, Screenshots, Diagramme und visuellen Kontext zusammen mit Text verarbeiten koennen. Ein Screenshot eines Bugs sagt mehr als tausend Worte Beschreibung. Ein Mockup-Bild erzeugt besseren UI-Code als absatzlange Layout-Spezifikationen. Multimodale Eingabe nicht zu nutzen, verschenkt erhebliche KI-Faehigkeiten.

Der Prompt

Ich liefere sowohl Text- als auch visuelle Eingabe. Analysiere beides zusammen.

TEXT-KONTEXT:
[beschreibe was das Bild zeigt und was du brauchst]

BILD:
[haenge Screenshot, Mockup, Diagramm oder Fehler-Screenshot an]

AUFGABE:
[was die KI mit beiden Eingaben tun soll]

ANWEISUNGEN ZUR VISUELLEN ANALYSE:
- Beschreibe was du im Bild siehst, bevor du darauf reagierst
- Referenziere spezifische visuelle Elemente (Button oben links, Fehlermeldung in Rot, etc.)
- Falls die Bildqualitaet schlecht ist oder Details unklar sind, nenne was du nicht bestimmen kannst
- Kreuzreferenziere visuelle Elemente mit dem Textkontext

AUSGABEFORMAT:
[spezifiziere was du zurueckmoechtest: Code, Analyse, Beschreibung, Fixes]

Beispielausgabe

VISUELLE ANALYSE:
Der Screenshot zeigt ein React-Dashboard mit einer Datentabelle. Sichtbar:
- Eine Tabelle mit 5 Spalten (Name, E-Mail, Rolle, Status, Aktionen)
- Zeile 3 zeigt ein falsch ausgerichtetes "Aktionen"-Dropdown, das ueber den Tabellencontainer hinausragt
- Die Status-Badges verwenden inkonsistente Farben (Zeile 1: gruen, Zeile 4: ebenfalls gruen aber dunkler)
- Die Kopfzeile hat keine Sortierindikatoren trotz Zeiger-Cursor auf "Name"

IDENTIFIZIERTE PROBLEME:
1. Dropdown-Ueberlauf — das Aktionen-Menue benoetigt position: relative auf der Elternzelle
   und z-index: 10 auf dem Dropdown
2. Inkonsistente Badge-Farben — das dunklere Gruen (#16a34a) in Zeile 4 sollte dem
   helleren Gruen (#22c55e) aus Zeile 1 entsprechen
3. Fehlende Sortier-Affordance — Chevron-Icons zu sortierbaren Spaltenkoepfen hinzufuegen

CODE-FIX fuer Problem 1:
.table-cell-actions {
  position: relative;
}
.actions-dropdown {
  position: absolute;
  right: 0;
  z-index: 10;
}

Wann verwenden

Verwenden Sie multimodales Prompting beim Debugging von UI-Problemen anhand von Screenshots, bei der Umsetzung von Designs aus Mockups, bei der Analyse von Fehlerbildschirmen, bei der Pruefung von Diagrammen oder jeder Aufgabe, bei der visueller Kontext Informationen liefert, die Text allein nicht erfassen kann. Besonders leistungsstark fuer Frontend-Entwicklung, Design-to-Code-Workflows und visuelle Bug-Reports.

Profi-Tipps

• Das Modell zuerst das Bild beschreiben lassen — dies bestaetigt, dass es sieht was Sie sehen, und faengt Fehlinterpretationen ab, bevor sie zu falschen Loesungen fuehren.
• Screenshots annotieren — zeichnen Sie Pfeile oder Kreise auf die Problembereiche vor dem Upload; dies fokussiert die Aufmerksamkeit des Modells.
• Mockup + bestehenden Code kombinieren — liefern Sie sowohl das Design-Bild als auch Ihren aktuellen Komponentencode, damit das Modell den Diff generieren kann, nicht eine komplette Neuschreibung.
• Screenshots fuer Fehler-Debugging nutzen — Terminal-Fehler-Screenshots, Browser-Konsolen-Aufnahmen und Deployment-Logs als Bilder koennen schneller sein als Kopieren und Einfuegen von Text.