Hoe maak je een mooie website met AI?

Waarom ziet een AI-website er standaard uit als een template?

Elke builder kent het: de code klopt, de site werkt, en toch oogt het als een gratis template. Bootstrap-blauw, drie identieke kaartjes, een kop die net te dik is. Dat komt doordat een AI-model getraind is op het gemiddelde van internet. Vraag je niets specifieks, dan krijg je dat gemiddelde.

Het probleem is niet het model. Hetzelfde model dat de template-look produceert, bouwt met de juiste instructies iets waar mensen even stil van worden. Het verschil zit in wat jij meegeeft. Bezoekers en klanten oordelen in drie seconden op uitstraling; die drie seconden verdienen dus je beste input.

Wat heeft je AI nodig om iets moois te bouwen?

Drie dingen. Niet meer. Een designer maakt honderden microkeuzes; jij hoeft er maar drie aan te leveren, want de rest leidt het model daaruit af.

• Een kleurenpalet: vijf tot acht kleuren met exacte hexcodes en hun rol (achtergrond, tekst, accent). Eén accentkleur, consequent gebruikt.
• Een font-pairing: één lettertype voor koppen, één voor lopende tekst, met gewichten. Meer fonts maken het onrustiger, niet mooier.
• Een visuele richting: twee of drie zinnen over sfeer en regels. "Rustig, veel witruimte, één blikvanger per scherm" stuurt elke volgende keuze.

Struq is de Nederlandse visuele bibliotheek voor AI-native builders. De galerij staat vol met precies deze drie soorten assets, gecureerd en gratis te kopiëren. Je hoeft ze dus niet zelf te verzinnen.

Hoe pak je het stap voor stap aan?

1. Kies een kleurenpalet dat bij je merk past. Voorbeeld uit de galerij: "Warm paper", een rustig systeem met #FAF6F0 als canvas en #C2410C als accent.
2. Kies een font-pairing. Voorbeeld: "Fraunces + Inter", karaktervolle koppen boven kalme lopende tekst.
3. Kies een visuele richting. Voorbeeld: "Rustig en gedurfd": veel ruimte, één gedurfde zet per scherm, geen decoratieve ruis.
4. Plak alle drie de assets in je AI vóór je eerste bouwopdracht, met de instructie: "gebruik dit visuele systeem voor alles wat je bouwt."
5. Bouw daarna sectie voor sectie, en herhaal bij elke nieuwe sectie kort de kernregels. Modellen vergeten context; jij niet.

Welke prompt geef je je AI mee?

Dit is het skelet dat werkt in ChatGPT, Claude, Gemini en elke app-builder. Vul de waarden in vanuit de assets die je gekozen hebt.

Hoe houd je het mooi terwijl je doorbouwt?

De eerste versie mooi krijgen is één ding; mooi blijven tijdens twintig iteraties is het echte werk. Vier regels houden de boel bij elkaar.

• Eén accentkleur per view. Wil het model een tweede kleur toevoegen, zeg dan nee.
• Geen nieuwe fonts halverwege. Elke "mag het wat speelser"-neiging los je op met grootte en witruimte, niet met een extra lettertype.
• Herhaal je visuele systeem bij elke grote wijziging. Een kort "houd je aan het palet en de fonts" voorkomt stille drift.
• Bewaar wat werkt. Een prompt die een sectie precies goed maakte, gebruik je in je volgende project weer. Zo bouw je je eigen bibliotheek op.