Sketch:
zeichnen Sie es, und der Agent sieht, was Sie meinen
Sketch ist eine Zeichenflaeche, direkt in den KI-Agenten-Composer eingebaut. Oeffnen Sie eine leere Flaeche, um ein Mockup oder ein Diagramm zu skizzieren, oder oeffnen Sie einen Screenshot, um ihn zu annotieren. Kreisen Sie den Bug ein, zeichnen Sie einen Pfeil, heben Sie den Bereich hervor, fuegen Sie eine Notiz hinzu. Die Zeichnung wird an Ihre Nachricht angehaengt und an Ihren KI-Coding-Agenten gesendet.
Ein Bild sagt mehr als tausend Worte, und das gilt fuer einen KI-Agenten doppelt. Statt 'der Button oben rechts im Modal ist zu nah am Rand' zu schreiben, kreisen Sie ihn einfach ein. Die Skizze landet direkt neben Ihrem Prompt, der Agent bekommt das visuelle Feedback in einem Zug, und Sie haben das Terminal nie verlassen.
Sketch in Aktion: oeffnen Sie die Flaeche aus dem Composer, kreisen Sie den visuellen Bug auf einem Screenshot ein, haengen Sie die Zeichnung an und senden Sie sie an den Agenten.
Hier ist das Problem, das Sketch loest. Sie sind beim Vibe Coding mit einem KI-Agenten, und etwas sieht auf dem Bildschirm falsch aus. Eine Karte laeuft ueber, ein Button sitzt ein paar Pixel daneben, der Abstand in einer Zeile ist kaputt. Damit der Agent es behebt, muessen Sie das visuelle Problem in Worten beschreiben. 'Die zweite Karte in der mittleren Spalte, die mit dem Avatar, ihr Padding ist rechts zu eng.' Sie schreiben drei Saetze, der Agent raet, er korrigiert das falsche Element, Sie schreiben drei weitere.
Sketch macht Schluss mit dem Raten. Sie machen einen Screenshot, oeffnen ihn in der Sketch-Flaeche, zeichnen einen roten Kreis um die kaputte Karte, fuegen einen Pfeil und das Wort 'hier zu eng' hinzu und haengen ihn an Ihre Nachricht an. Der Agent interpretiert keinen Absatz mehr. Er schaut sich die Zeichnung an. Das visuelle Feedback ist eindeutig, weil es visuell ist.
Sketch funktioniert auch andersherum. Starten Sie mit einer leeren Flaeche und skizzieren Sie, was Sie wollen, bevor der Agent es baut: ein grobes Mockup eines Screens, ein Wireframe eines Layouts, ein schnelles Diagramm eines Flows. Eine handgezeichnete Skizze gibt dem Agenten einen besseren Rahmen als eine Textwand. Sie zeichnen den Prototyp, der Agent codet ihn.
Die Sketch-Flaeche geoeffnet aus dem Composer: annotieren Sie einen Screenshot, zeichnen Sie Formen und Pfeile und haengen Sie die Zeichnung an die Nachricht an, die an Ihren Agenten gesendet wird.
Warum Sketch in Ihren Agenten-Workflow gehoert
Praezision. Ein Kreis auf einem Screenshot zeigt auf genau ein Element. Ein Satz zeigt auf eine Vermutung. Wenn Sie das Problem zeichnen, behebt der Agent genau das, was Sie wirklich gemeint haben, nicht das daneben. Kein 'nein, der andere Button, der darunter' mehr.
Tempo. Ein Rechteck um einen Bereich zu zeichnen dauert drei Sekunden. Denselben Bereich in Worten zu beschreiben dauert drei Saetze, und die Saetze sind trotzdem mehrdeutig. Sketch macht aus dem Annotieren eines visuellen Bugs statt einer laestigen Pflicht einen Reflex.
Ausdruck. Manche Ideen sind Formen, keine Saetze. Ein Layout, ein Flow, ein Screen. Mit Sketch zeichnen Sie das Mockup oder das Diagramm direkt, freihand oder mit Formen und Pfeilen, und uebergeben dem Agenten die Zeichnung als Spezifikation.
Flow. Sketch lebt im Composer. Sie oeffnen keine separate Zeichen-App, exportieren keine Datei, ziehen nichts hin und her. Die Zeichnung und Ihr geschriebener Prompt reisen gemeinsam in derselben Nachricht, sodass der Agent den vollstaendigen Kontext auf einmal erhaelt.
So funktioniert Sketch, von Anfang bis Ende
Vom Sketch-Button im Composer bis zur Zeichnung, die an die Agenten-Nachricht angehaengt ist.
Sketch aus dem Composer oeffnen
Jeder Agenten-Composer hat einen Sketch-Button. Klicken Sie ihn an, und eine bildschirmfuellende Zeichenflaeche oeffnet sich, sofort einsatzbereit, mit bereits aktivem Rechteck-Werkzeug, damit Sie Dinge gleich einrahmen koennen.
Auf einer leeren Flaeche zeichnen oder ein Bild annotieren
Starten Sie mit einer leeren Flaeche, um ein Mockup, ein Wireframe oder ein Diagramm zu skizzieren. Oder oeffnen Sie ein vorhandenes Bild: ziehen Sie einen Screenshot in den Composer, klicken Sie dann auf den Stift in seinem Thumbnail (oder auf Annotieren in der Dateivorschau), um darauf zu zeichnen.
Skizzieren, einkreisen, Pfeil, hervorheben, tippen
Die Flaeche bietet Ihnen Freihandzeichnen, Rechtecke, Ellipsen, Pfeile, Linien und Text. Kreisen Sie ein kaputtes Element ein, richten Sie einen Pfeil darauf, heben Sie eine Zone hervor, schreiben Sie eine kurze Notiz daneben. Alles, was das visuelle Feedback eindeutig macht.
Die Zeichnung an Ihre Nachricht anhaengen
Klicken Sie auf An Nachricht anhaengen. Die Flaeche wird als PNG exportiert und als Thumbnail zum Composer hinzugefuegt, genau wie eine abgelegte Datei. Wenn Sie ein vorhandenes Bild annotieren, ersetzt die annotierte Version das urspruengliche Thumbnail, sodass der Agent nie beide erhaelt.
An den Agenten senden
Tippen Sie Ihren Prompt wie gewohnt und senden Sie ihn. Das PNG wird ueber dieselbe Pipeline wie jede andere Datei an die Nachricht angehaengt. Die Zeichnung und Ihr Text erreichen den Agenten gemeinsam, in einem Zug.
Der Agent liest die Zeichnung
Ihr KI-Coding-Agent erhaelt die Skizze als Bildanhang. Solange sein Modell Bildeingaben unterstuetzt, sieht er genau das, was Sie eingekreist, mit Pfeilen markiert und hervorgehoben haben, und handelt nach dem visuellen Feedback, statt eine Beschreibung zu parsen.
Zwei Wege, Sketch zu nutzen
Starten Sie bei null oder zeichnen Sie auf das, was bereits da ist.
Leere Flaeche: ein Mockup skizzieren
Oeffnen Sie eine leere Flaeche und zeichnen Sie, was der Agent bauen soll. Ein grobes Mockup eines Screens, ein Wireframe eines Layouts, ein Prototyp einer Komponente, ein Diagramm eines Datenflusses. Freihandstriche, Boxen, Pfeile und Textlabels. Eine handgezeichnete Skizze ist eine Spezifikation, der der Agent folgen kann, ohne dass Sie einen einzigen Absatz UI-Beschreibung schreiben.
Annotieren: auf einen Screenshot zeichnen
Laden Sie einen Screenshot oder ein beliebiges Bild in die Flaeche und markieren Sie es. Kreisen Sie das verschobene Element ein, zeichnen Sie einen Pfeil zum Ueberlauf, heben Sie die falsche Farbe hervor, schreiben Sie 'das hier fixen' neben den Bug. Die Sketch-Flaeche oeffnet sich mit Ihrem Bild als Hintergrundebene, Sie zeichnen darauf, und der annotierte Screenshot geht direkt als visuelles Feedback an den Agenten.
Was Sketch wirklich ist
Sketch ist eine vollwertige Zeichenflaeche, eingebettet in die AgentsRoom-Desktop-App, geoeffnet aus dem Composer eines beliebigen KI-Agenten. Es ist kein Screenshot-Viewer mit einem Marker obendrauf. Sie bekommen echte Zeichenwerkzeuge: Freihandstift, Rechtecke, Ellipsen, Pfeile, Linien und Text, dasselbe Toolkit, das Sie von einer richtigen Skizzenflaeche erwarten.
Die Flaeche laeuft in zwei Modi. Der Leer-Modus gibt Ihnen eine leere Flaeche fuer Mockups, Wireframes und Diagramme. Der Annotieren-Modus laedt ein vorhandenes Bild als Hintergrund und laesst Sie darueber zeichnen. Den Annotieren-Modus erreichen Sie ueber das Thumbnail eines beliebigen bereits im Composer angehaengten Bildes oder ueber den Annotieren-Button in der Dateivorschau.
Wenn Sie die Zeichnung anhaengen, exportiert Sketch die Flaeche als PNG auf weissem Hintergrund, damit jeder Strich lesbar bleibt, und legt die Datei dann im Anhang-Bereich des Composers ab. Von dort folgt die Zeichnung dem normalen Weg: sie reist gemeinsam mit Ihrem Prompt und wird als Bild an den Agenten gesendet. Sketch fuegt keinen neuen Sendemechanismus hinzu, es nutzt den bereits vorhandenen.
Alles bleibt auf Ihrem Rechner. Skizzen werden lokal auf der Festplatte gespeichert und nicht in Ihr Repository committet oder an einen Drittanbieterdienst gesendet. Sie sind bewusst fluechtig: eine Zeichnung ist Kontext fuer eine Nachricht, keine Datei, die Sie verwalten muessen. Sketch ist lokal, privat und providerunabhaengig: es funktioniert mit jedem Agenten, dessen Modell ein Bild akzeptiert, sodass sowohl Claude-Code- als auch Codex-Setups denselben Zeichnung-zum-Agenten-Flow bekommen.
Was Menschen mit Sketch zeichnen
Drei Muster, die aus einer Zeichnung den schnellsten Weg machen, mit einem Agenten zu sprechen.
Einen visuellen Bug melden
Machen Sie einen Screenshot der kaputten UI, kreisen Sie das Element ein, markieren Sie den Ueberlauf mit einem Pfeil, heben Sie den falschen Abstand hervor. Der Agent sieht den visuellen Bug, statt Ihre Beschreibung davon zu entschluesseln. Der mit Abstand schnellste Weg, eine UI-Regression an einen KI-Agenten zu melden.
Ein Mockup oder Wireframe skizzieren
Zeichnen Sie den Screen, bevor der Agent ihn baut. Ein grobes Wireframe, eine Layout-Skizze, ein Low-Fidelity-Mockup einer Komponente. Uebergeben Sie dem Agenten die Zeichnung als Briefing und lassen Sie ihn Ihre Skizze in Code verwandeln.
Ein Diagramm oder einen Flow zeichnen
Manche Erklaerungen sind Diagramme. Ein Datenfluss, ein Zustandsautomat, die Struktur einer Seite, wie zwei Komponenten miteinander reden. Skizzieren Sie es mit Boxen und Pfeilen und senden Sie das Diagramm als Kontext an den Agenten.
In Worten beschreiben vs. es zeichnen
Dasselbe visuelle Feedback, derselbe Agent. Ein Weg ist langsam und mehrdeutig, der andere ist eine Skizze.
Ohne Sketch
- : Sie beschreiben das visuelle Problem in Worten und hoffen, dass der Agent sich dasselbe vorstellt.
- : Sie schreiben drei Saetze, um auf ein Element zu zeigen, und es bleibt trotzdem mehrdeutig.
- : Um ein Mockup zu zeichnen, oeffnen Sie eine separate App, exportieren eine Datei und ziehen sie dann in den Composer.
- : Der Kontextwechsel unterbricht Ihren Flow und das Gespraech mit dem Agenten.
- : Der Agent behebt das falsche Element, Sie erklaeren erneut, die Schleife zieht sich hin.
Mit Sketch
- : Sie kreisen das Element auf einem Screenshot ein, und das Feedback ist eindeutig.
- : Eine Zeichnung ersetzt drei Saetze Beschreibung, in drei Sekunden.
- : Die Flaeche steckt im Composer: keine separate App, kein Export, kein Drag-and-drop.
- : Sie verlassen das Terminal nie und reissen den Faden zum Agenten nie ab.
- : Der Agent sieht genau, was Sie meinten, und behebt es im ersten Anlauf.
Sketch ist der kuerzeste Weg zwischen einem visuellen Problem und einem KI-Agenten, der es versteht.
FAQ
Was ist Sketch in AgentsRoom?
Sketch ist eine Zeichenflaeche, eingebaut in den KI-Agenten-Composer. Sie oeffnen sie aus dem Composer, zeichnen eine Skizze auf einer leeren Flaeche oder annotieren einen vorhandenen Screenshot, und die Zeichnung wird als PNG exportiert und an die Nachricht angehaengt, die Sie an Ihren KI-Coding-Agenten senden. Sketch macht aus visuellem Feedback etwas, das Sie zeichnen, statt etwas, das Sie beschreiben.
Wie sende ich eine Zeichnung an einen KI-Agenten?
Klicken Sie auf den Sketch-Button im Agenten-Composer, zeichnen Sie auf der Flaeche und klicken Sie dann auf An Nachricht anhaengen. Die Zeichnung wird zu einem PNG-Thumbnail im Composer. Schreiben Sie Ihren Prompt und senden Sie: die Skizze ist an die Nachricht angehaengt und erreicht den Agenten gemeinsam mit Ihrem Text.
Kann ich einen Screenshot annotieren?
Ja. Ziehen Sie einen Screenshot in den Composer, klicken Sie dann auf den Stift in seinem Thumbnail oder oeffnen Sie die Dateivorschau und klicken Sie auf Annotieren. Die Sketch-Flaeche oeffnet sich mit Ihrem Screenshot als Hintergrundebene, sodass Sie darauf zeichnen koennen: einen Bug einkreisen, einen Pfeil hinzufuegen, einen Bereich hervorheben, eine Notiz schreiben. Der annotierte Screenshot ersetzt das Original, wenn Sie ihn anhaengen.
Was kann ich mit Sketch zeichnen?
Die Flaeche bietet Ihnen Freihandzeichnen, Rechtecke, Ellipsen, Pfeile, Linien und Text. Sie koennen ein Mockup skizzieren, ein Wireframe zeichnen, ein Diagramm anlegen oder einen Screenshot mit Kreisen, Pfeilen und Hervorhebungen markieren. Das Rechteck-Werkzeug ist standardmaessig aktiv, sodass Sie ein Element einrahmen koennen, sobald sich die Flaeche oeffnet.
Sieht der KI-Agent meine Skizze wirklich?
Die Zeichnung wird als PNG-Bild an Ihre Nachricht angehaengt. Solange das Modell des Agenten Bildeingaben unterstuetzt, sieht er die Skizze und handelt danach. Claude und die Modelle der GPT-4-Klasse, die Claude Code und Codex antreiben, lesen Bilder, sodass der Agent Ihr visuelles Feedback direkt erhaelt.
Welche Agenten und Provider funktionieren mit Sketch?
Sketch haengt ein Standard-PNG-Bild an, ist also providerunabhaengig. Jeder Agent, dessen Modell eine Bildeingabe akzeptiert, funktioniert: Claude Code, Codex und andere CLIs, die AgentsRoom unterstuetzt. Es gibt keine providerspezifische Einrichtung.
Brauche ich eine separate Zeichen-App oder ein Whiteboard?
Nein. Genau das ist der Sinn von Sketch. Die Zeichenflaeche steckt im Composer. Sie oeffnen kein Excalidraw, kein Figma und keinen Screenshot-Annotator in einem anderen Fenster, exportieren keine Datei, ziehen sie nicht zurueck. Sketch haelt die gesamte Zeichnen-und-Senden-Schleife im Terminal.
Wo werden meine Skizzen gespeichert? Sind sie privat?
Skizzen werden lokal auf Ihrem eigenen Rechner gespeichert. Sie werden nicht in Ihr Git-Repository committet und nicht zu einem Drittanbieterdienst hochgeladen. Sie sind fluechtig: eine Skizze ist Kontext fuer eine Nachricht, und alte Skizzen werden automatisch aufgeraeumt.
Kann ich eine Skizze erneut bearbeiten oder neu annotieren?
Ja. Jedes Bild im Composer, einschliesslich eines bereits annotierten Screenshots, kann erneut in der Sketch-Flaeche geoeffnet werden, um wieder darauf zu zeichnen. Wenn Sie die neue Version anhaengen, ersetzt sie das vorherige Thumbnail, sodass der Agent dasselbe Bild nie zweimal erhaelt.
Warum einen Bug zeichnen, statt ihn zu beschreiben?
Weil eine Beschreibung eine Vermutung ist und eine Zeichnung nicht. Wenn Sie 'der Button oben rechts ist verschoben' schreiben, muss der Agent den Screen im Kopf rekonstruieren. Wenn Sie den Button auf einem Screenshot einkreisen, gibt es nichts zu rekonstruieren. Ein Bild sagt mehr als tausend Worte, und fuer visuelles Feedback an einen KI-Agenten ist es zusaetzlich mehrere verschwendete Zuege wert.
Passt gut zusammen mit
Browser Automation
Ihr QA-Agent steuert einen echten Browser und macht Screenshots. Sketch ist der Weg, wie Sie einen dieser Screenshots annotieren und das markierte Feedback zurueckschicken.
Scratchpad
Ein Notizblock fuer Prompts und Notizen in AgentsRoom. Scratchpad kuemmert sich um die Worte, Sketch um die Zeichnung: beide speisen denselben Agenten-Composer.
Vibe Coding Review
Beobachten Sie jede Datei, die der Agent aendert, in Echtzeit. Wenn eine Aenderung auf dem Bildschirm falsch aussieht, ist Sketch der schnellste Weg, darauf zu zeigen.
Figma to AI Agents
Bringen Sie ein Figma-Design in den Agenten-Workflow. Sketch ist der gröbere, schnellere Verwandte: ein handgezeichnetes Mockup direkt im Composer, wenn Sie keine vollstaendige Designdatei brauchen.
Schluss mit dem Beschreiben des Bugs. Zeichnen Sie ihn.
Laden Sie AgentsRoom herunter und nutzen Sie Sketch: eine Zeichenflaeche im Agenten-Composer, um Mockups zu skizzieren und Screenshots zu annotieren, und senden Sie die Zeichnung dann an Ihren KI-Coding-Agenten, ohne je das Terminal zu verlassen.
Companion-App: Agenten auch unterwegs im Blick behalten
Nutzen Sie Claude, Codex, Antigravity CLI oder einen anderen AI-Anbieter.
Bugs und Wünsche direkt in dein öffentliches Backlog schicken.
Ein Blick auf AgentsRoom in Aktion.