Wijs aan wat je wilt veranderen in je app, Cursor schrijft de code

Een ontwerper die wijzigingen intypt in een chatvenster terwijl de applicatie op het andere scherm draait. Zo werken de meeste AI-tools voor code vandaag, en het voelt als een omweg. Cursor 3.7 maakt die omweg overbodig. De vernieuwde Design Mode laat je op een element in je draaiende app klikken, meerdere elementen tegelijk selecteren en je wijzigingen inspreken. De AI-agent kijkt mee naar precies hetzelfde scherm als jij en past de code live aan. Het resultaat verschijnt binnen seconden.

Hoe werkt Cursor Design Mode?

Design Mode combineert twee informatiebronnen die de AI-agent tegelijk ontvangt: de broncode van het geselecteerde element en een screenshot van hoe dat element eruitziet op je scherm. De agent weet daardoor niet alleen waar een knop in de code zit, maar ook hoe groot die knop is, welke kleur hij heeft en hoe hij zich verhoudt tot de rest van de pagina.

Technisch stuurt Design Mode een xpath, de component-attributen, computed styles en de fiber tree props naar de agent. Tegelijk maakt het een screenshot van de viewport en markeert het geselecteerde element. Die twee signalen samen geven de agent genoeg context om de juiste bestanden te vinden en gerichte aanpassingen te maken, zonder dat je hoeft uit te leggen waar iets staat.

Even voor de beeldvorming: vergelijk het met een aannemer die je huis komt verbouwen. De oude manier was een beschrijving per mail sturen. "Verplaats de keuken, maak het aanrecht breder, de kleur moet lichter." Nu loop je samen door het huis, wijst op het aanrecht en zegt "dit stuk moet een meter breder." De aannemer ziet wat jij ziet. Geen vertaalslag nodig.

In de praktijk draai je je applicatie lokaal, opent Cursor's ingebouwde browservenster en klikt op het element dat je wilt aanpassen. In het zijpaneel beschrijf je de wijziging of spreek je hem in. De agent analyseert je instructie, zoekt het juiste bestand in je codebase en voert de aanpassing door. Hot-reload toont het resultaat direct, je hoeft niet te wachten tot de build klaar is.

Wat is er nieuw in versie 3.7?

Multi-select was de meest gevraagde ontbrekende functie en Cursor 3.7 voegt hem toe. Je selecteert nu twee of meer elementen tegelijk om hun onderlinge relatie aan te passen. Twee knoppen selecteren en zeggen "maak deze dezelfde breedte" werkt nu gewoon. Een navigatiebalk en een header selecteren en zeggen "lijn deze horizontaal uit" ook. Eerder moest je elk element apart aanpassen en zelf onthouden hoe de verhoudingen lagen.

De tweede grote toevoeging is voice input. Via een overlay spreek je wijzigingen in terwijl de agent doorwerkt. Je wijst op een formulier, zegt "labels vetgedrukt, placeholders lichter" en de agent past het aan. Het scheelt het heen-en-weer-typen dat visueel itereren zo traag maakt.

Overigens kun je nu ook meerdere wijzigingen achter elkaar inspreken zonder te wachten tot de vorige klaar is. De agent zet je instructies in de wachtrij en werkt ze af terwijl jij al naar het volgende element kijkt. Bij een pagina met twintig elementen die allemaal kleine aanpassingen nodig hebben, scheelt dat flink.

Design Mode werkt nu ook in canvassen, de gedeelde werkruimte van Cursor. Je deelt een canvas-link met een collega, wijst samen elementen aan en laat de agent de wijzigingen doorvoeren terwijl jullie live meekijken. Handig voor een review-sessie waar ontwerper en developer samen aan tafel zitten.

Onder de motorkap draait Composer 2.5, een model dat volgens Cursor's aankondiging specifiek is geoptimaliseerd voor interface-werk. Het bedrijf noemt het "fast and strong at interface work" en het routeert automatisch naar de snelste variant voor visuele taken.

De prijzen op een rij

Design Mode zit in alle betaalde Cursor-abonnementen. Elke keer dat je op "Apply" klikt en de agent je wijziging in code omzet, verbruik je agent-credits. Hoe intensiever je Design Mode gebruikt, hoe sneller die credits op zijn.

Bij jaarlijks betalen bespaar je twintig procent volgens de prijspagina van Cursor. Het Pro-abonnement komt dan op $16 per maand, omgerekend zo'n 15 euro. Een team van vijf developers op Pro kost gezamenlijk zo'n 95 euro per maand, minder dan een uur freelance-ontwikkeling.

Wacht even, want die credits zijn relevant. Cursor rekent per "Apply"-actie af. Als je tien knoppen een voor een aanpast, betaal je tien keer. Selecteer je ze alle tien via multi-select en pas je ze in een keer aan, betaal je een keer. Multi-select bespaart dus niet alleen tijd, maar ook credits.

Waar loopt het spaak?

De agent kan soms de logica van een component negeren. Een disabled-button wordt grijs gemaakt door een hardcoded kleurwaarde in plaats van via de state die bepaalt wanneer de knop actief is. Je moet het resultaat controleren, net als bij een junior-developer die enthousiast maar soms onzorgvuldig werkt.

Een valkuil die vroege gebruikers melden: de agent maakt soms duplicaten aan in plaats van bestaande componenten te hergebruiken. Na tien wijzigingen kun je eindigen met drie versies van dezelfde header-component. Bij Cursor noemen ze dit "design drift" en ze raden aan om op een aparte Git-branch te werken. Goed advies, ongeacht welke AI-tool je gebruikt.

Tot slot vereist Design Mode een lokale ontwikkelomgeving. Je hebt een gekloonde repository nodig, geïnstalleerde dependencies en een draaiende dev-server. Een productmanager die even snel een kleurtje wil aanpassen, heeft daar nog steeds een developer voor nodig die de boel opstart. Builder.io en vergelijkbare tools lossen dat op met een cloudgebaseerde editor, maar die schrijven niet direct in je eigen repository.

Hoe verhoudt dit zich tot Copilot en andere tools?

Microsoft lanceerde vorige maand computer-using agents in Copilot Studio die zelfstandig door Windows-applicaties navigeren. Het verschil met Cursor is fundamenteel: Copilot kijkt naar je scherm om bestaande software te bedienen, Cursor kijkt naar je scherm om software te bouwen.

Cursor's Design Mode past in een bredere trend. In mei bracht Microsoft CUA voor legacy-apps. Google lanceerde Gemini Spark, een AI-agent die 24 uur per dag je inbox bijhoudt. Anthropic liet Claude meekijken in Photoshop en Blender. De richting is steeds dezelfde: AI die begrijpt wat er op je scherm staat, niet alleen wat er in je prompt zit.

De bredere les voor teams die bouwen

De iteratiecyclus bij visueel werk was tot nu toe: bouwen, bekijken, beschrijven wat er mis is, aanpassen, opnieuw bekijken. Vijf stappen. Met Design Mode wordt dat: bouwen, aanwijzen, inspreken. Drie stappen. Bij twintig visuele iteraties per dag scheelt dat meer dan een uur.

Vergelijk het met de overgang van Figma-annotaties naar directe code. Twee jaar geleden stuurde een ontwerper een Figma-bestand naar een developer, die het vertaalde naar HTML en CSS. Toen kwamen tools als Cursor en v0 die Figma-ontwerpen direct omzetten in code. Nu slaat Design Mode die stap ook over: je werkt direct in de draaiende applicatie, zonder Figma-tussenstap.

Voor development-teams die al met Cursor's multi-agent workflows werken, is Design Mode een logische uitbreiding. De vijf agents die parallel aan je codebase werken, krijgen nu een visuele tegenhanger. Je stuurt de agents niet alleen met tekst aan, maar ook met klikken en gesproken instructies.

Wat kun je hier maandag mee?

Als je al met Cursor werkt, update naar versie 3.7 en open Design Mode op een project dat je toch wilde aanpassen. Selecteer twee elementen die niet goed op elkaar aansluiten en spreek de gewenste wijziging in. Het is de snelste manier om te testen of de functie jouw werkwijze versnelt.

Werk je met een extern development-team? Stuur dit artikel door en vraag of ze Design Mode al inzetten bij visuele iteratie. De productiviteitswinst is het grootst in de fase waarin ontwerp en code heen en weer gaan: je bouwt iets, bekijkt het, past het aan, bekijkt het opnieuw. Design Mode halveert die cyclus.

Gebruik je zelf geen Cursor? De gratis Hobby-versie geeft beperkte toegang tot Design Mode. Genoeg om te ontdekken of het past bij hoe jij bouwt. Download Cursor, open een bestaand webproject en klik op het eerste element dat je stoort. De rest doet de agent.