Website maken met AI: eigen huisstijl wint van een voorbeeldsite

Wie een website maakt met AI, heeft binnen een paar minuten iets wat er netjes uitziet. Alleen lijkt het op duizend andere sites. Een lijst die deze week rondging op sociale media had daar een oplossing voor: geef de AI een voorbeeld van een mooie site mee. Wij testten of dat werkt. Na dit artikel weet je wat je een AI wél moet meegeven en heb je een huisstijlbestand dat je vandaag nog kunt schrijven.

Wat we testten: drie keer dezelfde opdracht

Dezelfde opdracht ging drie keer naar Claude, steeds met een andere bijlage. Het bedrijf is verzonnen: Bakker & Zn Installatietechniek in Gouda, familiebedrijf sinds 1987, negen monteurs. De pagina moest bezoekers laten vragen om een offerte voor een hybride warmtepomp. We gebruikten Claude Opus 5.5 op 4 november 2026.

• A kreeg alleen de opdracht.
• B kreeg er de stijl van Intercom bij, een bekend softwarebedrijf. Dat stijlbestand komt van Refero, een van de sites uit die lijst. Zo’n bestand heet een DESIGN.md: een tekst die kleuren, letters en maten beschrijft zodat een AI ze kan volgen.
• C kreeg een eigen huisstijl van zeventien regels, die we in vijf minuten schreven: de kleuren van de bedrijfsbus, de letter, hoe het bedrijf praat en wat het niet wil.

Elke versie werd één HTML-bestand (de code van een webpagina) zonder foto’s. Claude deed er vier tot vijf minuten over per pagina.

Wat eruit kwam: alleen de eigen huisstijl leek op het bedrijf

Versie C was de enige pagina die eruitzag als déze installateur. De andere twee waren goed gebouwd, alleen pasten ze bij een ander soort bedrijf.

A, zonder voorbeeld, is netjes en inwisselbaar. Crème achtergrond, een terracotta knop, een vette letter met één gekleurd woord en een zonnetje achter het huis. Er is niets mis mee. Je kunt er alleen net zo goed het logo van een kapper of een boekhouder op zetten.

B, met de stijl van Intercom, is strak en herkenbaar als Intercom. Dunne koppen, kleine labels in een typemachineletter, lichtgrijze tekst met schreefjes en zwarte knoppen. Voor een softwarebedrijf werkt dat. Voor een installateur met veel oudere klanten werkt het tegen je: de dunne letter leest slechter. Het stijlbestand verbiedt bovendien uitdrukkelijk een zwaardere letter.

C, met de eigen huisstijl, gebruikt het groen en geel van de bus, een brede stevige letter, rechte hoeken, grote tekst en grote invulvelden. Claude volgde ook de inhoudelijke regels: nergens “ontzorgen”, geen monteur met zijn duim omhoog. Opa Bakker en zijn eerste bus kwamen terug als tekening. Minpunt: de kop is lang, vier regels op een telefoon.

Een voorbeeldsite verandert het jasje, niet de pagina

De opbouw was bij alle drie de versies vrijwel hetzelfde. Bovenaan een kop met uitleg, dan een rij cijfers (1987, negen monteurs), een getekend huis met buitenunit, “zo werkt het”, een stappenplan, de diensten, het formulier en op de telefoon een vaste balk met een belknop.

Daarom helpen de galerijen voor bovenste blokken, menu’s, knoppen en voetteksten uit die lijst weinig. Die onderdelen maakt de AI uit zichzelf al. Wat de bijlage wél bepaalt is het uiterlijk. Kies daar dan je eigen uiterlijk voor.

Alle drie werden ook lang: tussen de 8.500 en 9.500 pixels op een telefoon van 390 pixels breed. Dat is zo’n elf schermen scrollen voor één offerteknop. Vraag dus zelf om een korte pagina.

Wat je nodig hebt

• Een AI-assistent die webpagina’s kan maken: Claude, ChatGPT of Gemini in de chat. Een bouwer zoals Lovable kan ook.
• Je kleuren met hun kleurcode, zoals #1f4d3a. Die staan in je logobestand of weet je drukker.
• De naam van je lettertype of een foto van je bus of visitekaartje.
• Tien minuten.

Zo schrijf je je huisstijl in vijf stappen

Stap 1: je kleuren. Zet je kleuren erin met hun code. Weet je ze niet, upload dan je logo of een foto van je bus en vraag de AI welke kleurcodes erin zitten. Zeg erbij welke kleur de hoofdkleur is en welke alleen voor de belangrijkste knop.

Stap 2: je letter. Noem het lettertype van je logo of drukwerk. Weet je het niet, beschrijf het dan: breed of smal, dik of dun, met of zonder schreefjes. Zeg ook voor wie je schrijft. “Onze klanten zijn vaak ouder, dus geen dunne letter” deed in de test precies wat het moest doen.

Stap 3: je vorm. Rond of hoekig, veel lege ruimte of juist vol. Eén zin is genoeg.

Stap 4: je toon. Drie zinnen over hoe je praat. Jij of u? Kort of uitgebreid? En één ding dat klanten van je weten. Bij Bakker was dat opa met zijn ene bus.

Stap 5: wat je niet wilt. Woorden die je nooit gebruikt, plaatjes die je niet wilt zien, pop-ups of een chatbot. Dit lijstje werkte in de test het best: Claude hield zich aan elk verbod.

Zo zag de huisstijl uit de test eruit:

Huisstijl Bakker & Zn Installatietechniek

Zo zien we eruit (staat ook op de bus en de werkkleding):
- Donkergroen #1f4d3a is onze hoofdkleur. Warm geel #f2b632 alleen
  voor de belangrijkste knop of een accent.
- Achtergrond gebroken wit, geen felwit.
- Letter: een stevige, brede schreefloze letter (op de bus staat
  Archivo). Geen dunne letters, onze klanten zijn vaak ouder.
- Rechte hoeken, niks rond of bollerig.

Zo praten we:
- Zoals we bij je in de keuken staan: kort, eerlijk, geen vakjargon.
  Je en jij.
- Familiebedrijf sinds 1987, dat mag je merken. Opa Bakker begon met
  één bus.
- We beloven niets wat we niet waarmaken: bij storing binnen 24 uur
  een monteur.

Wat we niet willen:
- Geen woorden als "ontzorgen", "oplossingen" of "duurzame toekomst".
- Geen plaatjes van lachende monteurs met de duim omhoog.
- Geen pop-ups of chatbot.

Waar het misgaat

De grootste valkuil is dat je een pagina krijgt die af lijkt terwijl hij dat niet is.

• Een losse pagina is nog geen website. Je hebt hosting nodig, een domein, een formulier dat echt iets verstuurt en een privacyverklaring. In onze test verstuurde het formulier niets. Waarom een zelfgebouwde pagina niet altijd de moeite waard is, lees je in Je landingspagina vibe-coden? De baas van Tilda noemt dat zinloos.
• De AI verzint dingen. In de opdracht stond “verzin geen keurmerken, reviews of klantnamen” en daar hield Claude zich aan. Zet die zin er altijd in en lees elke bewering op je pagina na.
• Je neemt per ongeluk andermans werk over. Een indeling of een kleur als voorbeeld nemen is iets anders dan teksten, foto’s, logo’s of illustraties kopiëren. Wat je als ondernemer kunt doen als het misgaat, staat in AI en auteursrecht: welke vrijwaring heb je als ondernemer?
• De pagina wordt te lang. Vraag om hooguit vier blokken.
• Eén test is één test. We draaiden elke versie één keer, met één AI. Een tweede ronde kan anders uitvallen. Ook beoordeelden we de pagina’s zelf, zonder panel van klanten.

Wat het kost

• Geld: de AI-assistent die je al hebt. Ook met een gratis account kun je om een webpagina vragen. Voor langer of vaker werken heb je al snel een betaald abonnement nodig. De meeste galerijsites uit de lijst zijn gratis, Scrolltide niet helemaal: de premiumbibliotheek kost eenmalig 299 dollar.
• Tijd: vijf minuten voor je huisstijl, een paar minuten voor de AI en daarna je eigen tijd om alles na te lopen. Hosting, domein en formulier komen er los bij.
• Hardware: geen. Een gewone computer met een browser is genoeg.

Voor wie wel, voor wie niet

Dit is iets voor je als:

• je al een uitstraling hebt (bus, drukwerk, logo) en snel een eerste versie van een pagina wilt;
• je een webbouwer of ontwerper wilt briefen: hetzelfde huisstijlbestand werkt als briefing.

Dit is niets voor je als:

• je nog geen huisstijl hebt en een echt merk wilt laten maken: daar is een ontwerper voor;
• je een webshop, boekingssysteem of klantportaal nodig hebt. Lees dan eerst AI zelf bouwen of een expert inhuren: hier ligt de grens.

De acht sites uit de lijst: wat heb je eraan?

De lijst noemde acht sites met voorbeelden. Zo bruikbaar zijn ze voor een ondernemer die zijn eigen pagina maakt.

Zo begin je vandaag

Schrijf de huisstijl hierboven over met je eigen gegevens. Plak hem daarna met deze prompt in Claude, ChatGPT of Gemini:

Bouw een landingspagina voor [bedrijfsnaam] in [plaats].
Gegevens: [wat je doet, sinds wanneer, hoeveel mensen, werkgebied].
Doel van de pagina: bezoekers vragen [een offerte / een afspraak] aan voor [dienst].

Dit is onze huisstijl, houd je eraan:
[plak hier je huisstijl]

Eisen: één HTML-bestand. Nederlandstalig. Hooguit vier blokken.
Goed leesbaar op een telefoon. Verzin geen keurmerken, reviews of klantnamen.

Werkt dat, dan heb je een eerste versie waarmee je naar een webbouwer kunt. Of je bouwt hem zelf verder. Wil je eerst weten of er wel vraag is naar je dienst, lees dan Idee valideren voordat je bouwt met AI.