Nutze Screenshots oder Mock‑Ups, um Claude Code die gewünschte Optik zu zeigen und iteriere, bis das Ergebnis exakt dem Bild entspricht.
Menschen beurteilen Oberflächen visuell, daher sind Bilder ein starkes Feedbacksignal. Claude Code kann Bilder interpretieren und auf dieser Grundlage Code iterativ anpassen. Der Guide empfiehlt, Screenshots direkt zu pasten oder per Datei einzubinden, um visuelle Qualität zu erreichen.
Erstelle ein visuelles Mock‑Up deines UI‑Ziels (z. B. in Figma) oder mach einen Screenshot des gewünschten Ergebnisses.
Gib Claude eine Möglichkeit, Screenshots zu sehen: entweder über den Puppeteer MCP‑Server oder durch Drag‑&‑Drop bzw. Pfadangabe der Bilddatei.
Bitte Claude, den Code zu schreiben oder anzupassen, sodass er dem Mock‑Up entspricht, und fordere anschließend einen Screenshot des Ergebnisses an.
Vergleiche den Screenshot mit dem Zielbild und gib weitere Anweisungen wie „mache den Button blau" oder „die Abstände sind zu groß". Wiederhole den Prozess, bis das Ergebnis passt.
Ein UX‑Designer gab Claude eine Mock‑Up‑Grafik für eine Landing‑Page. Nach drei Iterationen stimmte das generierte React‑Layout pixelgenau mit dem Mock‑Up überein.
Ein Entwickler nutzte den Screenshot‑Workflow, um Farbfehler in einem Balkendiagramm zu beheben: „[Image pasted] update the chart to make the bars green".