Gerichter bouwen met de visuele elementkiezer van Lovable
Wie enkel via het chatvenster bouwt, mist de kracht van de visuele elementkiezer in Lovable. Door specifieke componenten op het scherm aan te wijzen, geef je de AI directe context en voorkom je dat hele pagina's onnodig worden verbouwd.
Sanne de Vries
Bijdrager · lvbl.nl
Hoe de visuele selectie precies werkt
Wanneer je in het previewscherm de elementkiezer activeert, verandert je cursor in een precisiewerktuig. Zodra je over de preview van je applicatie beweegt, lichten afzonderlijke HTML-elementen en React-componenten op met een blauwe rand. Met één klik selecteer je het exacte onderdeel dat je wilt aanpassen, zoals een specifieke tabelrij, een navigatiebalk of een modalscherm. Lovable voegt op dat moment een directe referentie naar het geselecteerde component toe aan je chatprompt. De AI weet daardoor tot op het niveau van het specifieke codebestand en de relevante JSX-structuur waar je opdracht betrekking op heeft.
Minder ruis en snellere generatie
De grootste winst van deze werkwijze is de drastische reductie van ruis. Wanneer je in natuurlijke taal zegt "maak de knop rechtsboven blauw", moet het taalmodel eerst analyseren welke knop je precies bedoelt. Als er meerdere knoppen op de pagina staan, gokt de AI of past hij per ongeluk alle knoppen aan. Door het element eerst aan te klikken, krijgt het model de exacte ID of componentnaam mee. Hierdoor hoeft de AI minder bestanden te doorzoeken, is de kans op onbedoelde fouten in andere onderdelen veel kleiner en genereert de code aanzienlijk sneller.
Praktisch voorbeeld met een complex formulier
Stel dat je bouwt aan een dashboard waarin een uitgebreid formulier met meerdere kolommen staat. Je wilt alleen de regelafstand van de invoervelden in het rechterpaneel aanpassen en een informatietext toevoegen aan het label van het wachtwoordveld. Als je dit puur tekstueel omschrijft, raakt het taalmodel al snel de draad kwijt over welk invoerveld het precies gaat. Klik met de elementkiezer het specifieke invoerveld aan, en typ vervolgens je instructie. Lovable begrijpt direct dat de wijziging beperkt moet blijven tot dat specifieke formulieronderdeel en laat de rest van de formulierlogica intact.
Gericht stijlen zonder Tailwind-chaos
Bij het aanpassen van de lay-out en stijlen in Tailwind CSS ontstaat in AI-applicaties vaak vervuiling. De AI voegt telkens nieuwe utility classes toe aan al bestaande klassen, waardoor bestanden onleesbaar worden en stijlen elkaar gaan tegenwerken. Door een element aan te wijzen en een gerichte vraag te stellen over de styling van dát element, forceer je de AI om kritisch naar de bestaande klassen van die specifieke DOM-knoop te kijken. Vraag bijvoorbeeld: "Schoon de Tailwind-klassen van dit geselecteerde element op en maak de schaduw iets subtieler." De AI vervangt de bestaande klassen in plaats van er wéér een extra laag overheen te plakken.
Foutopsporing op de vierkante millimeter
De elementkiezer is niet alleen nuttig voor uiterlijk, maar ook voor het opsporen van functionele bugs in de interface. Wanneer een specifiek dropdown-menu niet sluit nadat er een optie is geselecteerd, selecteer je met de kiezer de dropdown. Je prompt luidt dan: "Wanneer ik op een item in dit geselecteerde component klik, blijft het menu openstaan. Zorg dat de state 'isOpen' op false wordt gezet bij de onClick handler van de items." Doordat de AI direct naar het juiste bestand en de juiste event handler kijkt, hoeft er geen zoektocht door de hele applicatie plaats te vinden.
Waar je op moet letten bij het selecteren
Hoewel de visuele kiezer enorm krachtig is, zijn er een paar praktische zaken om rekening mee te houden. Ten eerste selecteer je in het previewvenster soms het omhullende div-element in plaats van het daadwerkelijke interactieve component. Zorg dat je goed kijkt welk kader oplicht voordat je klikt. Ten tweede werkt de kiezer het beste voor aanpassingen aan de front-end en presentatielaag. Als een probleem veroorzaakt wordt door een fout in een databasequery of een externe API-koppeling, helpt het aanwijzen van een knop je niet verder. Gebruik de kiezer voor de visuele en interactieve laag, en vertrouw op gestructureerde prompts voor de diepere back-end logica.
Maak van de elementkiezer een vaste gewoonte
Het aanwijzen van onderdelen op het scherm voelt in het begin misschien als een extra handeling als je gewend bent om snel door te typen in de chat. Toch levert het onder de streep een enorme tijdswinst op. Je voorkomt dat Lovable code aanpast die al goed werkte, je krijgt schonere componenten en je leidt de AI precies naar de plek waar de actie moet plaatsvinden. Maak er bij het bouwen een gewoonte van om vóór elke visuele of componentspecifieke prompt eerst de elementkiezer aan te klikken. Je zult merken dat je iteraties sneller, scherper en zonder onnodige bijwerkingen verlopen.
Vond je dit fijn?
Geef een hartje en deel het met een andere Lovable-fan.
