Tutorial · Einsteiger

KI versteht Hand-Skizzen

Manchmal ist die Kommunikation mit einer KI einfacher, als man denkt. Statt lange zu beschreiben, was ich will, male ich es einfach.

Bei Webseiten geht es oft um Kleinigkeiten. Ein Abstand ist zu groß, ein Bild soll etwas weiter nach links. Das zu beschreiben, kostet mich oft mehr Zeit als die Änderung selbst. Und ob die KI dann das richtige Element erwischt, ist auch nicht sicher.

Screenshot statt Briefing

Inzwischen mache ich es anders. Ich mache einen Screenshot von der Seite und zeichne direkt hinein, mit der Maus oder mit dem Stift auf dem Tablet. Ich kreise Elemente ein und male Pfeile: Das Element soll dorthin, das hier etwas weiter nach links, hier soll der Abstand kleiner werden.

Schematische Webseite mit handgezeichneten Markierungen: Das Bild rechts ist eingekreist und ein Pfeil zeigt nach links, zwei Pfeile zwischen den Karten markieren den Abstand.
Schematische Darstellung: eingekreistes Element mit Pfeil nach links und Pfeile am Abstand zwischen den Karten.

Das Bild kopiere ich dann in einen Coding-Agenten wie Claude Code. Wenn nötig, schreibe ich dort noch einen kurzen Hinweis dazu. Der Agent erkennt, was ich meine, und passt den Code entsprechend an. Das funktioniert erstaunlich gut.

Ich muss dafür kein schönes Bild malen. Krumme Pfeile und schiefe Kreise reichen völlig. Es geht nur darum, dass klar wird, welches Element gemeint ist und wohin es soll. Oft packe ich auch mehrere Änderungen in ein Bild. Statt jede Kleinigkeit einzeln zu beschreiben, sieht der Agent alles auf einen Blick.

Zeigen statt erklären

Der große Vorteil: Ich muss keine langen Texte mehr formulieren. Ich zeige einfach, was ich haben will, genau so, wie ich es auch einem Kollegen am Bildschirm zeigen würde.

Manchmal sind wir uns auch bei den Begriffen nicht einig. Ich denke, ein Begriff beschreibt eindeutig, was ich meine. Claude versteht ihn aber anders und ändert dann an einer ganz anderen Stelle etwas. Mit dem Bild passiert das nicht mehr.

Das geht schneller, und es gibt weniger Missverständnisse. Die KI sieht, welches Element ich meine, und muss nicht raten.

Was man trotzdem beachten sollte

Ganz ohne Kontrolle geht es natürlich nicht. Ich schaue mir das Ergebnis immer im Browser an, bevor ich weitermache. Gerade bei Abständen sieht die KI auf dem Screenshot nicht, welche Werte genau dahinterstecken. Wenn es pixelgenau sein muss, gebe ich die Zahl lieber zusätzlich mit.

Auch bei responsiven Seiten muss man aufpassen. Ein Screenshot zeigt immer nur eine Ansicht. Ob sich die Änderung auch auf dem Handy richtig verhält, prüfe ich am Ende selbst.

Fazit

Wenn Worte umständlich werden, hilft ein Bild. Für kleine Layout-Änderungen ist das für mich inzwischen der schnellste Weg: einfach malen und zeigen, was man meint.

Hast du das schon einmal ausprobiert, oder beschreibst du deine Änderungen noch ausführlich im Text?

Das könnte dich auch interessieren

Fachartikel

Einfach mal vibe coden

Erfahrungen mit Claude Code: parallele Agenten, Review, Projektregeln, Randfälle und Spezifikation vorab. Die Arbeit verschiebt sich vom Schreiben zum Steuern.

Weiterlesen
Fachartikel

KI in der Entwicklung

KI-Assistenten übernehmen Boilerplate, Tests und Dokumentation. Grenzen setzen Projektkontext, Randfälle, Sicherheit und technische Schulden.

Weiterlesen