AI Studio: Visual Edits

Learn hoe je Visual Edits in AI Studio gebruikt om je project bij te werken vanuit de live preview. Je leert hoe je Visual Edit-modus inschakelt en hoe je elementen selecteert die je kunt aanpassen. Daarna zie je hoe je tekst, afbeeldingen, iconen, kleuren, spacing en layouts kunt wijzigen.

Wat zijn Visual Edits in AI Studio

Met Visual Edits in AI Studio kun je je AI-project verder verfijnen vanuit de live preview, nadat het project is gegenereerd. Je kunt tekst selecteren, pagina-elementen aanklikken, styling aanpassen, of een gerichte prompt gebruiken om wijzigingen toe te passen op specifieke onderdelen van de pagina.

Deze functie is handig als je AI-gegenereerde site bijna af is, maar je nog wil finetunen op copy, spacing, kleuren, knoppen, afbeeldingen, iconen of layout. Wijzigingen worden eerst getoond in de live preview. Pas als je opslaat, worden ze toegepast op je project.

Let op: Het AI-model wordt alleen gebruikt wanneer je expliciet een prompt verstuurt. Directe visuele wijzigingen via de bewerkingscontrols vereisen geen AI-generatie en verbruiken geen tokens.

Belangrijkste voordelen van Visual Edits in AI Studio

Direct bewerken op de pagina: Selecteer elementen in de preview en pas ze aan zonder de Code Editor (Code-editor) te openen.
Sneller copy aanpassen: Dubbelklik op tekst en typ direct in de pagina voor snelle contentwijzigingen.
Gerichte wijzigingen via prompts: Selecteer een element (of meerdere elementen) en beschrijf welke wijziging je wil toepassen.
Geen tokenverbruik bij directe edits: Wijzigingen via de visuele controls verbruiken geen AI-tokens.
Eerst preview, dan opslaan: Je ziet updates eerst in de live preview voordat je ze opslaat in het project.

Welke elementen kun je bewerken

Visual Edits ondersteunt de meest gebruikte pagina-elementen voor het verfijnen van een site. De beschikbare controls veranderen op basis van wat je selecteert. Daardoor toont het bewerkingspaneel alleen opties die relevant zijn voor het element waarop je klikt.

Je kunt onder andere dit bewerken:

Koppen en tekst: Pas copy, typografie, uitlijning, tekstkleur en stijl aan.
Knoppen: Wijzig labels, knopstijl, knoptype, spacing en kleuren.
Afbeeldingen: Werk de afbeeldingsbron, image fit en alt-tekst bij.
Iconen: Vervang iconen en pas grootte of styling aan.
Containers en secties: Pas spacing, borders, shadows, achtergronden en layout-styling aan.

Zo ga je naar Visual Edit-modus

Visual Edit-modus schakel je in vanuit de AI Studio builder. Zodra deze modus aan staat, wordt de preview interactief. Je kunt dan tekst, afbeeldingen, knoppen, iconen, containers en andere ondersteunde elementen selecteren.

Zo open je Visual Edit-modus:

Open AI Studio en klik op het project dat je wil bijwerken.
Klik op Visual Edits in het promptgebied linksonder in de builder.
Klik op een element in de preview om te beginnen met bewerken.

Zo maak je Visual Edits

Met Visual Edits kun je een pagina op meerdere manieren aanpassen nadat je Visual Edit-modus hebt ingeschakeld. Je kunt elementen selecteren om contextuele controls te openen, tekst direct op de pagina aanpassen, iconen wisselen, kleuren en spacing aanpassen, de lay-out van afbeeldingen wijzigen, iconen resizen, of prompts gebruiken op meerdere geselecteerde elementen.

Klik om te selecteren en Visual Controls te openen

Klik op een element in de preview om het Visual Edits-paneel te openen. De controls passen zich automatisch aan op basis van wat je selecteert, zoals tekst, knoppen, afbeeldingen, iconen, containers of layout-elementen. Zo kun je gericht wijzigingen maken zonder in de projectcode te zoeken.

Kleur- en spacing-controls zijn beschikbaar in het Visual Edits-paneel wanneer ze van toepassing zijn op het geselecteerde element. Je project-thema-kleuren staan naast het volledige Tailwind-palet. Je ziet ook margin- en padding-controls, waarmee je de spacing kunt aanpassen.

Tekst inline bewerken

Inline tekstbewerking is bedoeld voor snelle copy-wijzigingen. Dubbelklik op een tekstelement en typ direct in de pagina om de tekst aan te passen.

Iconen bijwerken

Met de icon-controls kun je Lucide-iconen vervangen of resizen zonder code te bewerken. Wanneer je een Lucide-icoon selecteert, kun je een doorzoekbare bibliotheek met 1.600+ iconen openen en een alternatief kiezen. De vervanging wordt direct toegepast zonder reload. Je kunt geselecteerde Lucide-iconen ook resizen.

Afbeeldingslayout aanpassen

Met image-controls pas je zowel de gebruikte afbeelding aan als de manier waarop de afbeelding in de toegewezen ruimte wordt weergegeven. Wanneer je een afbeelding selecteert, kun je de image URL wijzigen om een andere afbeelding te gebruiken, de alt-tekst bijwerken en via de dropdown Layout kiezen welk visueel resultaat je wil.

Prompts gebruiken op geselecteerde elementen

Met promptbewerking kun je één of meerdere elementen selecteren en in gewone taal beschrijven welke wijziging je wil. Gebruik dit als je een specifieke aanpassing wil doen aan één element, of als je dezelfde wijziging consistent wil toepassen op meerdere onderdelen.

Voor één element is promptbewerking bijvoorbeeld handig om een sectie moderner te maken, spacing in een container te verbeteren, een knopstijl zachter te maken, of één component beter aan te laten sluiten op de rest van de pagina.

Voor meerdere elementen is het handig om consistentie aan te brengen in herhaalde componenten, zoals het gelijk trekken van knopstijlen, spacing uitlijnen tussen containers, herhaalde cards of kolommen aanpassen, of dezelfde kleur toepassen op een groep geselecteerde elementen.

Visual Edits opslaan of weggooien

Visual Edits werkt met een preview-first aanpak. Zo kun je wijzigingen bekijken voordat je ze toepast op je project. Dit helpt om onbedoelde updates te voorkomen en geeft je ruimte om verschillende opties te testen.

Klik op Save om de wijziging toe te passen op het project. Als je Visual Edit-modus verlaat zonder op te slaan, worden je wijzigingen niet bewaard.

Als een wijziging op het verkeerde element terechtkomt, een ongewenste stijl oplevert of niet aansluit op wat je wil, klik je op Discard om niet-opgeslagen wijzigingen te verwijderen en terug te gaan naar de vorige versie.

Veelgestelde vragen

V: Moet ik een instelling inschakelen voordat ik Visual Edits kan gebruiken?

Antwoord: Nee. Open een AI Studio-project en klik op Visual Edits in het promptgebied linksonder in de builder om te starten.

V: Gebruiken Visual Edits AI-tokens?

Antwoord: Directe visuele edits verbruiken geen AI-tokens, omdat je de wijzigingen via bewerkingscontrols doet in plaats van via AI-gegenereerde prompts.

V: Kan ik een prompt gebruiken op een specifiek geselecteerd element?

Antwoord: Ja. Selecteer het element dat je wil aanpassen en voer een gerichte instructie in bij het Visual Edits promptgebied.

V: Kan ik meer dan één element tegelijk bewerken?

Antwoord: Ja. Met multi-select bewerken kun je gecoördineerde updates doen, zoals consistente spacing, gedeelde styling of herhaalde layout-aanpassingen.