Hoe maak je een Lovable-website mooier?

Waarom ziet een Lovable-site er standaard uit?

Lovable is goed in wat de meeste mensen eerst nodig hebben: snel een werkende site met pagina’s, formulieren en een nette basis. Dat is veel waard. Maar zonder ontwerpkeuzes zie je in Lovable-sites vaak hetzelfde terug: een veilige kleur, een generiek lettertype, een hero met een knop en daaronder drie kaarten op een rij.

Wensen als "maak het moderner" of "maak het strakker" helpen weinig. Lovable weet dan niet wat jij onder modern verstaat, dus het past iets aan en kiest opnieuw het gemiddelde. Een site die indruk maakt, begint met keuzes die je vooraf vastlegt.

Welke ontwerpkeuzes zet je in de projectinstructies?

Lovable heeft een vaste plek voor instructies die bij elk bericht meegaan: in je projectinstellingen, onder Instructions. Tot voor kort heette dat Knowledge. Er past tot 10.000 tekens in, ruim genoeg voor een complete richting. Zet daar drie dingen in:

1. Eén visuele richting in een paar woorden, bijvoorbeeld redactioneel en ingetogen, of donker en technisch. Kies er één en houd je eraan.
2. Een palet met hexcodes: een achtergrond, een tekstkleur, één accent en waar elke kleur voor dient.
3. Twee lettertypes met karakter: een voor koppen en een voor lopende tekst, met de grootte van de grootste kop.

Je hoeft die keuzes niet zelf te bedenken. In de galerij van Struq staan paletten met hexcodes en lettercombinaties, elk met een prompt die je zo kopieert. Graphite Ivory en Serif Editorial passen bijvoorbeeld bij een redactionele, ingetogen site.

Hoe pas je de site per sectie aan zonder opnieuw te beginnen?

Staan de keuzes in de projectinstructies, dan werk je de site van boven naar beneden af. Vraag per bericht om één aanpassing in één sectie, en noem de sectie bij naam. Zo kan Lovable niet ongemerkt de rest van de pagina herschrijven, en zie je meteen wat een wijziging doet.

• Begin bij de hero. Die bepaalt de eerste indruk, en de rest van de site volgt zijn toon.
• Geef een sectie een eigen opbouw. Niet elke sectie hoeft een kop met drie kaarten te zijn: een grote quote, een foto over de volle breedte of één groot getal werkt vaak beter.
• Is een wijziging mislukt, ga dan terug naar de vorige versie in plaats van verder te repareren.

Hoe vraag je Lovable om beweging die indruk maakt?

Minder generiek is stap één. Indruk maakt een site pas met beweging die bij de richting past. Vraag daar ook per sectie om, en beschrijf wat er gebeurt, wanneer en hoe lang. "Voeg animaties toe" levert overal hetzelfde invliegende blok op.

• Een hero die beweegt: de kop die regel voor regel verschijnt, of een achtergrond die langzaam verschuift.
• Onthullingen bij het scrollen: koppen en beelden die rustig verschijnen zodra ze in beeld komen, niet alles tegelijk.
• Reacties op de muis: knoppen en afbeeldingen die subtiel reageren als je eroverheen beweegt.

Hier zit ook de grens. Onthullingen, een bewegende hero en reacties op de muis kun je in Lovable per sectie vragen. Een sectie die vaststaat terwijl je scrollt, overgangen tussen pagina’s of één bewegingssysteem voor de hele site vragen meer sturing dan een chatbericht. Hoe verder je gaat, hoe vaker je moet bijsturen.

Werkt dezelfde aanpak in Bolt en v0?

Ja. De aanpak is overal hetzelfde: vaste keuzes op een vaste plek, daarna per sectie aanpassen. Alleen de plek heet anders.

• Bolt: in je projectinstellingen, onder Knowledge. Daar zet je de richting, het palet en de lettertypes voor één project. Account knowledge geldt voor al je projecten, Team knowledge voor de projecten van je team.
• v0: via de + in het invoerveld kies je Instructions en maak je een nieuwe instructie met een titel en de regel zelf. Een instructie die je aanvinkt, gaat mee met je berichten tot je hem weer uitvinkt.

Wanneer stap je over naar Claude Code?

Blijf bij Lovable zolang je site vooral moet werken en jij niet in code wilt kijken. Stap over naar Claude Code als je wilt dat de hele site één ontwerp en één bewegingssysteem volgt, met overgangen tussen pagina’s en een sectie die vaststaat terwijl je scrollt. Claude Code werkt in je eigen projectmap, en daar kun je een design-skill installeren die die keuzes vooraf plant.