Van Figma-schets naar live app in één uur — een stap-voor-stap workflow

Stap één: schrijf je designtokens uit vóór je iets bouwt

Kleuren (primary, accent, ink, surface, muted), typografie (display-font, body-font, sizes), radius, schaduw, spacing-schaal. Dat is misschien tien minuten werk in Figma, en het bespaart je uren refactor later. Prompt Lovable expliciet met deze tokens: "gebruik uitsluitend semantic tokens uit styles.css, geen hex-waarden in componenten". Zonder die regel krijg je een app die er 'AI-generiek' uitziet.

Stap twee: bouw sectie voor sectie, niet pagina voor pagina

Lovable is scherper op kleine chirurgische prompts dan op één grote "bouw de hele landing". Neem eerst je hero, review, dan je feature-strip, review, dan je footer. Elke sectie krijgt zijn eigen prompt met verwijzing naar de betreffende Figma-frame (upload de screenshot). De agent lezt de afbeelding en genereert markup die er dichtbij komt.

Stap drie: laat Lovable je designtokens gebruiken

Dit is het meest onderschatte deel. Zonder expliciete instructie sluipen er hardcoded klassen als `text-white` of `bg-slate-900` in. Die maken dark-mode kapot en breken je thema. Eén regel in je prompt ("geen bg-white, geen text-black, alles via bg-background/text-foreground of via className met CSS variabelen") lost het op.

Stap vier: bouw je componenten los

Voor herbruikbare onderdelen (kaart, badge, knop-variant) laat je Lovable ze als losse component in `src/components/` maken. Dat is niet alleen netter — het maakt de agent later ook slimmer, omdat hij naar de bestaande component grijpt in plaats van er telkens een nieuwe te bakken.

Stap vijf: interactie en state

Pas als de statische versie klopt, ga ik verhalen simuleren. "Wat gebeurt er als de gebruiker op deze knop klikt?" Toast, modal, redirect, state-verandering. Lovable is goed in kleine deelscenario's; overweldig 'm niet met vijf tegelijk.

Stap zes: content

Vervang lorem ipsum door je échte teksten (of goede placeholder-teksten in de juiste toon). Dit klinkt cosmetisch, maar het beïnvloedt hoe je layout aanvoelt. Echte koppen zijn zelden precies 32 tekens; echte alinea's hebben soms zes regels, geen drie.

De valkuil die iedereen maakt: te lang vasthouden aan de eerste generatie. Als de app op 70% van je Figma is en de laatste 30% aanpassen kost je meer tijd dan de eerste 70%, zet dan een streep en ga naar de code. Lovable is een startpunt, geen eindpunt. De laatste 10% is bijna altijd handwerk, en dat is oké.