Sketch:
teken het, en de agent ziet wat je bedoelt
Sketch is een tekencanvas dat direct is ingebouwd in de AI-agent composer. Open een leeg canvas om een mockup of een diagram te schetsen, of open een screenshot om het te annoteren. Omcirkel de bug, teken een pijl, markeer het gebied, voeg een notitie toe. De tekening wordt aan je bericht toegevoegd en naar je AI-coderingsagent gestuurd.
Een afbeelding zegt meer dan duizend woorden, en dat geldt dubbel voor een AI-agent. In plaats van te schrijven 'de knop rechtsboven in de modal is te dicht bij de rand', omcirkel je het. De schets komt naast je prompt, de agent krijgt de visuele feedback in één keer, en je hebt de terminal nooit verlaten.
Sketch in actie: open het canvas vanuit de composer, omcirkel de visuele bug op een screenshot, voeg de tekening toe, stuur het naar de agent.
Hier is het probleem dat Sketch oplost. Je bent vibe coding met een AI-agent en er lijkt iets mis op het scherm. Een kaart loopt over, een knop zit een paar pixels verkeerd, de afstand op een rij is kapot. Om de agent het te laten repareren, moet je het visuele probleem in woorden beschrijven. 'De tweede kaart in de middelste kolom, die met de avatar, de padding is te strak aan de rechterkant.' Je schrijft drie zinnen, de agent raadt, het repareert het verkeerde element, je schrijft er nog drie.
Sketch verwijdert het giswerk. Je maakt een screenshot, opent het in het Sketch canvas, tekent een rode cirkel rond de kapotte kaart, voegt een pijl en de woorden 'te strak hier' toe, en voegt het toe aan je bericht. De agent interpreteert geen alinea meer. Het kijkt naar de tekening. De visuele feedback is ondubbelzinnig omdat het visueel is.
Sketch werkt ook andersom. Begin met een leeg canvas en schets wat je wilt voordat de agent het bouwt: een ruwe mockup van een scherm, een wireframe van een lay-out, een snel diagram van een flow. Een handgetekende schets kadert de agent beter dan een muur van tekst. Jij tekent het prototype, de agent codeert het.
Het Sketch canvas geopend vanuit de composer: annoteer een screenshot, teken vormen en pijlen, voeg vervolgens de tekening toe aan het bericht dat naar je agent wordt gestuurd.
Waarom Sketch in je agent workflow hoort
Precisie. Een cirkel op een screenshot wijst naar één exact element. Een zin wijst naar een gok. Wanneer je het probleem tekent, repareert de agent het ding dat je daadwerkelijk bedoelde, niet het ding ernaast. Geen 'nee, de andere knop, die eronder' meer.
Snelheid. Een rechthoek om een gebied tekenen kost drie seconden. Datzelfde gebied in woorden beschrijven kost drie zinnen, en de zinnen zijn nog steeds dubbelzinnig. Sketch verandert het annoteren van een visuele bug van een karwei in een reflex.
Expressie. Sommige ideeën zijn vormen, geen zinnen. Een lay-out, een flow, een scherm. Met Sketch teken je de mockup of het diagram direct, vrijhandig of met vormen en pijlen, en geef je de tekening aan de agent als de specificatie.
Flow. Sketch leeft binnen de composer. Je opent geen aparte tekenapp, je exporteert geen bestand, je sleept niets rond. De tekening en je geschreven prompt reizen samen in hetzelfde bericht, zodat de agent de volledige context in één keer krijgt.
Hoe Sketch werkt, van begin tot eind
Van de Sketch-knop in de composer naar een tekening die aan het agentbericht is toegevoegd.
Open Sketch vanuit de composer
Elke agent composer heeft een Sketch-knop. Klik erop en een full-screen tekencanvas opent, klaar voor gebruik, met het rechthoekgereedschap al actief zodat je dingen meteen kunt kaderen.
Teken op een leeg canvas, of annoteer een afbeelding
Begin met een leeg canvas om een mockup, een wireframe of een diagram te schetsen. Of open een bestaande afbeelding: sleep een screenshot in de composer, klik vervolgens op het potlood op de miniatuur (of Annotate in de bestandspreview) om erop te tekenen.
Schets, omcirkel, pijl, markeer, typ
Het canvas biedt je vrijehandtekenen, rechthoeken, ellipsen, pijlen, lijnen en tekst. Omcirkel een defect element, wijs er een pijl naar, markeer een zone, schrijf een korte notitie ernaast. Wat het visuele feedback ook maar duidelijk maakt.
Voeg de tekening toe aan je bericht
Klik op Voeg toe aan bericht. Het canvas wordt geëxporteerd als een PNG en toegevoegd als een miniatuur aan de composer, net zoals een gedropt bestand. Wanneer je een bestaande afbeelding annoteert, vervangt de geannoteerde versie de originele miniatuur, zodat de agent nooit beide krijgt.
Stuur het naar de agent
Typ je prompt zoals gewoonlijk en verstuur. De PNG wordt aan het bericht toegevoegd via dezelfde pijplijn als elk ander bestand. De tekening en je tekst bereiken de agent samen, in één beurt.
De agent leest de tekening
Je AI-coderingsagent ontvangt de schets als een afbeeldingbijlage. Zolang het model beeldinvoer ondersteunt, ziet het precies wat je hebt omcirkeld, gepijld en gemarkeerd, en handelt het op de visuele feedback in plaats van een beschrijving te ontleden.
Twee manieren om Sketch te gebruiken
Begin vanaf niets, of teken bovenop wat er al is.
Leeg canvas: schets een mockup
Open een leeg canvas en teken wat je wilt dat de agent bouwt. Een ruwe mockup van een scherm, een wireframe van een lay-out, een prototype van een component, een diagram van een gegevensstroom. Vrijehandstreken, kaders, pijlen en tekstlabels. Een handgetekende schets is een specificatie die de agent kan volgen zonder dat je een enkele paragraaf UI-beschrijving hoeft te schrijven.
Annoteren: teken op een screenshot
Laad een screenshot of een afbeelding in het canvas en markeer het. Omcirkel het verkeerd uitgelijnde element, teken een pijl naar de overflow, markeer de verkeerde kleur, schrijf 'fix this' naast de bug. Het Sketch-canvas opent met je afbeelding als achtergrondlaag, je tekent erbovenop, en de geannoteerde screenshot gaat rechtstreeks naar de agent als visuele feedback.
Wat Sketch eigenlijk is
Sketch is een volledig tekencanvas ingebed in de AgentsRoom desktop-app, geopend vanuit de composer van elke AI-agent. Het is geen screenshotviewer met een marker erbovenop. Je krijgt echte tekentools: vrijehandpen, rechthoeken, ellipsen, pijlen, lijnen en tekst, dezelfde toolkit die je verwacht van een echt schetsoppervlak.
Het canvas werkt in twee modi. Lege modus geeft je een leeg oppervlak voor mockups, wireframes en diagrammen. Annotatiemodus laadt een bestaande afbeelding als achtergrond en laat je eroverheen tekenen. Je bereikt de annotatiemodus vanuit de miniatuur van een afbeelding die al aan de composer is toegevoegd, of vanuit de Annoteren-knop in de bestandsweergave.
Wanneer je de tekening toevoegt, exporteert Sketch het canvas naar een PNG op een witte achtergrond zodat elke lijn leesbaar blijft, en plaatst het bestand in de bijlagetray van de composer. Vanaf daar volgt de tekening het normale pad: het gaat mee met je prompt en wordt als afbeelding naar de agent gestuurd. Sketch voegt geen nieuw verzendmechanisme toe, het sluit aan op het al bestaande.
Alles blijft op je machine. Schetsen worden lokaal op schijf opgeslagen en worden niet aan je repository toegevoegd of naar een externe service gepusht. Ze zijn vluchtig van ontwerp: een tekening is context voor één bericht, niet een bestand dat je moet beheren. Sketch is lokaal, privé en provider-onafhankelijk: het werkt met elke agent waarvan het model een afbeelding accepteert, zodat Claude Code en Codex setups beide dezelfde tekening-naar-agent stroom krijgen.
Wat mensen tekenen met Sketch
Drie patronen die een tekening omzetten in de snelste manier om met een agent te communiceren.
Meld een visuele bug
Maak een screenshot van de defecte UI, omcirkel het element, teken een pijl naar de overflow, markeer de verkeerde afstand. De agent ziet de visuele bug in plaats van je beschrijving ervan te ontcijferen. De snelste manier om een UI-regressie aan een AI-agent te melden.
Schets een mockup of wireframe
Teken het scherm voordat de agent het bouwt. Een ruwe wireframe, een lay-outschets, een low-fidelity mockup van een component. Geef de tekening aan de agent als briefing en laat het je schets omzetten in code.
Teken een diagram of stroom
Sommige uitleggen zijn diagrammen. Een gegevensstroom, een toestandsmachine, de structuur van een pagina, hoe twee componenten communiceren. Schets het met kaders en pijlen en stuur het diagram naar de agent als context.
Het in woorden beschrijven vs het tekenen
Dezelfde visuele feedback, dezelfde agent. Eén pad is traag en dubbelzinnig, de andere is een schets.
Zonder Sketch
- : Je beschrijft het visuele probleem in woorden en hoopt dat de agent hetzelfde voor zich ziet.
- : Je schrijft drie zinnen om naar één element te wijzen, en het is nog steeds dubbelzinnig.
- : Om een mockup te maken open je een aparte app, exporteer je een bestand en sleep je het vervolgens naar de composer.
- : De contextwisseling onderbreekt je flow en het gesprek met de agent.
- : De agent repareert het verkeerde element, je legt het opnieuw uit, de lus sleept voort.
Met Sketch
- : Je omcirkelt het element op een screenshot en de feedback is ondubbelzinnig.
- : Een tekening vervangt drie zinnen van beschrijving, in drie seconden.
- : Het canvas is in de composer: geen aparte app, geen export, geen slepen en neerzetten.
- : Je verlaat nooit de terminal en onderbreekt nooit de draad met de agent.
- : De agent ziet precies wat je bedoelde en repareert het bij de eerste poging.
Sketch is de kortste weg tussen een visueel probleem en een AI-agent die het begrijpt.
FAQ
Wat is Sketch in AgentsRoom?
Sketch is een tekencanvas ingebouwd in de AI-agent composer. Je opent het vanuit de composer, tekent een schets op een leeg canvas of annoteert een bestaande screenshot, en de tekening wordt geëxporteerd als een PNG en toegevoegd aan het bericht dat je naar je AI-coderingsagent stuurt. Het verandert visuele feedback in iets dat je tekent in plaats van iets dat je beschrijft.
Hoe stuur ik een tekening naar een AI-agent?
Klik op de Sketch-knop in de agent composer, teken op het canvas en klik vervolgens op Bijvoegen aan bericht. De tekening wordt een PNG-miniatuur in de composer. Schrijf je prompt en stuur: de schets wordt aan het bericht toegevoegd en bereikt de agent samen met je tekst.
Kan ik een screenshot annoteren?
Ja. Sleep een screenshot naar de composer, klik vervolgens op het potlood op de miniatuur, of open de bestandsweergave en klik op Annoteren. Het Sketch-canvas opent met je screenshot als achtergrondlaag zodat je er bovenop kunt tekenen: omcirkel een bug, voeg een pijl toe, markeer een gebied, schrijf een notitie. De geannoteerde screenshot vervangt het origineel wanneer je het bijvoegt.
Wat kan ik tekenen met Sketch?
Het canvas biedt je vrije hand tekenen, rechthoeken, ellipsen, pijlen, lijnen en tekst. Je kunt een mockup schetsen, een wireframe tekenen, een diagram opstellen of een screenshot markeren met cirkels, pijlen en markeringen. Het rechthoekgereedschap is standaard actief zodat je een element kunt kaderen zodra het canvas opent.
Ziet de AI-agent mijn schets daadwerkelijk?
De tekening wordt als een PNG-afbeelding aan je bericht toegevoegd. Zolang het model van de agent beeldinvoer ondersteunt, ziet het de schets en handelt ernaar. Claude en de GPT-4 klasse modellen die Claude Code en Codex aandrijven lezen afbeeldingen, dus de agent krijgt je visuele feedback direct.
Welke agents en providers werken met Sketch?
Sketch voegt een standaard PNG-afbeelding toe, dus het is provider-onafhankelijk. Elke agent waarvan het model een beeldinvoer accepteert werkt: Claude Code, Codex en andere CLI's die AgentsRoom ondersteunt. Er is geen provider-specifieke setup.
Heb ik een aparte tekenapp of whiteboard nodig?
Nee. Dat is het punt van Sketch. Het tekencanvas bevindt zich in de composer. Je opent Excalidraw, Figma of een screenshot-annotator niet in een ander venster, je exporteert geen bestand, je sleept het niet terug. Sketch houdt de hele teken-en-verzend cyclus in de terminal.
Waar worden mijn schetsen opgeslagen? Zijn ze privé?
Schetsen worden lokaal op je eigen machine opgeslagen. Ze worden niet gecommit naar je git-repository en niet geüpload naar een externe dienst. Ze zijn vluchtig: een schets is context voor één bericht, en oude schetsen worden automatisch opgeruimd.
Kan ik een schets opnieuw bewerken of annoteren?
Ja. Elke afbeelding in de composer, inclusief een screenshot die je al hebt geannoteerd, kan opnieuw worden geopend in het Sketch-canvas om er opnieuw op te tekenen. Wanneer je de nieuwe versie bijvoegt, vervangt deze de vorige thumbnail zodat de agent nooit twee keer dezelfde afbeelding ontvangt.
Waarom een bug tekenen in plaats van beschrijven?
Omdat een beschrijving een gok is en een tekening niet. Wanneer je schrijft 'de knop rechtsboven is verkeerd uitgelijnd', moet de agent het scherm in zijn hoofd reconstrueren. Wanneer je de knop op een screenshot omcirkelt, is er niets te reconstrueren. Een afbeelding zegt meer dan duizend woorden, en voor visuele feedback aan een AI-agent is het ook meerdere verspilde beurten waard.
Gaat goed samen met
Browserautomatisering
Je QA-agent bestuurt een echte browser en maakt screenshots. Sketch is hoe je een van die screenshots annoteert en de gemarkeerde feedback terugstuurt.
Kladblok
Een notitieblok voor prompts en notities binnen AgentsRoom. Kladblok behandelt de woorden, Sketch behandelt de tekeningen: beide voeden dezelfde agent-composer.
Vibe Code Review
Bekijk elk bestand dat de agent in realtime verandert. Wanneer een verandering er verkeerd uitziet op het scherm, is Sketch de snelste manier om erop te wijzen.
Figma naar AI-agents
Breng een Figma-ontwerp in de agentworkflow. Sketch is de ruwere, snellere neef: een handgetekende mockup direct in de composer wanneer je geen volledig ontwerpbestand nodig hebt.
Stop met het beschrijven van de bug. Teken het.
Download AgentsRoom en gebruik Sketch: een tekencanvas in de agent-composer om mockups te schetsen en screenshots te annoteren, en stuur de tekening naar je AI-coderingsagent zonder ooit de terminal te verlaten.
Companion-app: houd je agents onderweg in de gaten
Breng je eigen: Claude, Codex, Antigravity CLI of andere AI-provider.
Stuur bugs en verzoeken direct naar je openbare backlog.
Een glimp van AgentsRoom in actie.