Richt je prompts haarscherp met de visual inspector in Lovable
Stop met het langdradig omschrijven van UI-elementen in je chatbox. Met de visuele inspector van Lovable wijs je exact aan wat er moet veranderen, wat zorgt voor snellere builds en minder fouten.
Joost Meijer
Bijdrager · lvbl.nl
Direct aanwijzen in plaats van omslachtig beschrijven
In plaats van in het chatvenster een hele alinea te typen waarin je uitlegt welke knop je bedoelt, kun je met de visuele inspector simpelweg op het betreffende element in de preview klikken. Boven het previewvenster vind je het icoon voor de elementenselector. Zodra je hierop klikt en over je applicatie beweegt, zie je een duidelijke omkadering rondom individuele componenten, zoals kaarten, knoppen, invoervelden en navigatiebalken. Door op een element te klikken, koppel je dat specifieke onderdeel rechtstreeks aan je volgende prompt. Het chatvenster geeft direct aan welk element of welk onderdeel van de DOM-structuur is geselecteerd.
Wat er onder de motorkap gebeurt
Voor de gemiddelde gebruiker voelt deze functie als een handige manier van aanwijzen, maar onder de motorkap verandert er fundamenteel iets in de manier waarop de AI je verzoek verwerkt. Normaal gesproken scant het taalmodel de volledige codebase of de globale paginastructuur om te bepalen welk bestand moet worden aangepast. Dat kost niet alleen meer rekenkracht en tijd, maar verhoogt ook de kans op fouten. Wanneer je een element visueel selecteert, stuurt Lovable de exacte componentenpaden en de bijbehorende code-context mee. De AI hoeft niet meer te zoeken; hij weet tot op de regel nauwkeurig in welk React-component hij moet werken.
Drie scenario's waarin deze functie onmisbaar is
Het visueel selecteren levert de grootste tijdswinst op bij specifieke micro-aanpassingen. Het eerste scenario is het verfijnen van styling. Stel dat je een datatabel hebt en je wilt alleen de koppen van de tabel een subtiele grijze achtergrond geven met een kleine padding. Klik op de tabelkop, typ dat je de achtergrondkleur wilt aanpassen naar een lichtere tint, en de AI laat de rest van de tabel onveranderd.
Interactiviteit toevoegen aan specifieke knoppen
Een tweede sterk scenario is het toevoegen van een kleine functionaliteit aan een bestaand element. Denk aan een 'kopieer naar klembord'-knop naast een gegenereerde API-sleutel. Als je de knop selecteert en vraagt om een toast-melding te tonen wanneer erop wordt geklikt, blijft de functionaliteit van het omliggende formulier intact. De AI focust zich uitsluitend op de event handler en de UI-status van die specifieke knop.
Refactoring van ingewikkelde componenten
Het derde scenario heeft te maken met het opbreken van grote bestanden. Wanneer een dashboard-kaart te veel logica bevat, kun je de kaart selecteren en vragen om dit specifieke onderdeel uit te splitsen in een los component. Doordat je alleen de kaart hebt aangeklikt, blijft het overkoepelende dashboard-bestand overzichtelijk en voorkom je dat de AI de hele paginastructuur gaat herschrijven.
Valkuilen bij het gebruik van de selector
Hoewel de elementenselector enorm krachtig is, zijn er een paar valkuilen waar je op moet letten. De meest voorkomende fout is het selecteren van het verkeerde niveau in de HTML-boom. Als je een knop wilt aanpassen maar per ongeluk de bovenliggende container selecteert, zal de AI veranderingen doorvoeren die invloed hebben op het hele blok. Let daarom altijd goed op de omkadering en de naam van het geselecteerde element boven het chatvenster voordat je je prompt verstuur.
Vraag geen grote systeemwijzigingen via een micro-element
Een andere valkuil is het vragen van globale logica terwijl je één enkel element hebt geselecteerd. Als je een zoekveld selecteert en vervolgens vraagt om de complete authenticatie van de applicatie te herzien, raakt de AI in de war door de tegenstrijdige context. Gebruik de selector dus echt voor lokale aanpassingen, component-specifieke logica en visuele afwerking. Voor grote architecturale wijzigingen aan je applicatie is het beter om geen specifiek element te selecteren en de prompt op paginaniveau te houden.
Koppel visueel selecteren aan duidelijke instructies
De beste resultaten haal je wanneer je de visuele selector combineert met concrete actiewoorden. Typ niet simpelweg "maak dit mooier" nadat je een knop hebt geselecteerd, maar wees specifiek over wat er moet veranderen. Geef bijvoorbeeld aan welke Tailwind-klassen je wilt gebruiken of hoe de interactie moet voelen. Door de combinatie van een exacte visuele verwijzing en een heldere instructie hoeft Lovable niets meer te interpreteren of te gokken.
Een onafhankelijke kijk op slim bouwen
Als redactie van lvbl.nl testen we dagelijks nieuwe features en workflows binnen het platform. Hoewel we een onafhankelijke communitysite zijn en geen officieel verband hebben met het team achter Lovable, delen we graag de technieken die ons in de praktijk de meeste tijd besparen. Het aanwennen van de visuele selector is een van de snelste manieren om je bouwproces op te schalen. Je voorkomt hiermee dat je kostbare tijd verliest aan het herstellen van onbedoelde code-wijzigingen.
Maak er een vaste gewoonte van
Wie leert werken met de visuele inspector merkt al snel dat het aantal mislukte prompts drastisch afneemt. Het dwingt je bovendien om gefocust te bouwen: stap voor stap, component voor component. Maak er dus een gewoonte van om vóór elke prompt even je muis naar de inspector-knop te bewegen. Het kost één seconde extra, maar het levert je bij elke iteratie direct tijdwinst op.
Vond je dit fijn?
Geef een hartje en deel het met een andere Lovable-fan.
