Hoe ik samen met AI een website ontwierp en wat ik onderweg leerde

Home » AI Kennisbank » Hoe ik samen met AI een website ontwierp en wat ik onderweg leerde

Kan je AI als een volwaardige senior webdesigner inzetten? Voor het redesign van een makelaarswebsite nam ik de proef op de som. In dit artikel deel ik mijn eerlijke ervaringen. Je leest over de ongekende mogelijkheden, de onverwachte obstakels en de ontwerplessen die je alleen in de praktijk leert.

Kan AI een senior webdesigner vervangen?

VanHuyse is een landelijk makelaarskantoor. De site vanhuyse.nl voldoet qua functionaliteit uitstekend. Het design paste echter niet meer bij het merk. Het leek te veel op een standaard makelaarswebsite, terwijl hun onderscheidende vermogen juist ligt in het partnerschap. Ze zijn partner in wonen voor, tijdens en lang na de transactie. Naast dit menselijke aspect is innovatie enorm belangrijk voor VanHuyse.

Daarom zette ik een pilot op om te testen of we zelf een volledige redesign konden uitvoeren met Claude Code. Het doel was het ontwerpen van een nieuwe stijl voor alle templates en componenten, zodat de webbouwer dit kon doorvoeren in de techniek. Ik heb veel ontwerptrajecten van websites begeleid en heb kennis van webdesign, dus ik was erg benieuwd of AI de rol van een senior webdesigner kon overnemen.

Het korte antwoord is dat dit absoluut mogelijk is. In deze blog deel ik het ontwerpproces tot de overdracht aan de webdeveloper.

1. Het begint bij een goede briefing

De grootste fout die je kunt maken, is direct de opdracht geven om een homepage te bouwen. Voordat ik één regel code liet genereren, heb ik een zeer uitgebreide briefing geschreven. Deze bevatte o.a. de volgende informatie:

• Achtergrond over VanHuyse.
• De doelgroep en persona’s, in dit geval woningkopers, verkopers en huiseigenaren.
• De gewenste tone of voice.
• De harde do’s en don’ts.
• Voorbeelden van design-elementen en websites ter inspiratie.
• Een kleurpalet waarbij elke kleur een vaste taak krijgt. Geen losse lijst met kleurcodes, maar strakke regels zoals: ‘onze conversieknoppen zijn altijd deze tint blauw’.

Hoe specifieker dit document is, hoe minder correctierondes je nodig hebt. Het principe van ‘garbage in, garbage out’ (AI-slop) geldt voor AI nog sterker dan voor een menselijke ontwerper.

2. De eerste versie was verrassend goed

Ik startte de desktop-app van Claude Code, gaf het systeem toegang tot één specifieke map op mijn computer en liet hierin de homepage uitwerken in losse HTML- en CSS-bestanden. Op deze manier kon ik elke pagina direct in de webbrowser openen en feedback geven.

De eerste versie van de nieuwe homepagina was verrassend goed. In plaats van weken te wachten op een eerste opzet, had ik vrijwel direct een modern, werkend fundament op mijn scherm staan. Maar het was uiteraard nog wel een eerste poging. Het miste nog de finesse. Denk aan kloppende verhoudingen op de pagina (het ritme), een logische leesvolgorde (hiërarchie) en uiteraard het échte specifieke VanHuyse-merkgevoel. Het gaf me de perfecte startblokken, maar vereiste nog wel de nodige sturing.

3. Het design vastleggen in een geheugenbestand

Na een paar aanpassingen (iteraties) had ik een goede basisversie. Toen volgde een cruciale stap. Ik liet Claude alle ontwerpregels vastleggen in één document, genaamd CLAUDE.md. Dit document bevatte o.a. alle kleurcodes, de typografieschaal, knopvarianten en de systemen voor spatiëring en de hero-secties. Dit werd het geheugen van het project.

Het grote voordeel is dat Claude Code dit bestand automatisch inleest aan het begin van elke nieuwe sessie. Hierdoor hoefde ik niet elke keer alles opnieuw uit te leggen, want de AI kende de regels direct.

De hero-sectie van de nieuw homepagina

4. De validatie op vervolgpagina’s

Een spannend moment brak aan toen ik Claude de opdracht gaf een tweede pagina in dezelfde stijl te ontwerpen. Dit is de echte test van een ontwerpsysteem. Het draait er niet om of één homepage mooi is, maar of je succesvol meerdere pagina’s in exact dezelfde lijn kunt ontwikkelen.

Dit lukte feilloos en VanHuyse was erg enthousiast over het resultaat. De volgende stap was om te toetsen of we de webdeveloper uit de voeten kon met de bestanden.

5. De keuze voor de juiste overdracht

Webdevelopers werken over het algemeen graag met Figma. Ik vond een AI-tool die HTML naar Figma kon converteren, maar besloot hier geen gebruik van te maken. Ik ben zelf geen Figma-expert en ik wilde geen automatische vertaalslag toevoegen die ik niet zelf kon controleren.

Ik vroeg de developer of zij op basis van de HTML-bestanden konden werken. Dit bleek geen probleem te zijn en dus kon ik verder bouwen op mijn eigen werkwijze.

De belangrijkste les hieruit is dat je altijd een vorm van overdracht kiest waarvan je de uitkomst zelf kunt verifiëren en waar alle partijen mee overweg kunnen. Een prachtig Figma-bestand waar je zelf niet mee overweg kunt, levert uiteindelijk problemen op.

6. Werken met verschillende modellen

Ik begon het traject met Claude Sonnet 4.6. Later schakelde ik over naar Opus 4.7 met een hoge contextcapaciteit. Het verschil bleek direct merkbaar. Opus presteert beter bij grotere aanpassingen die betrekking hebben op het hele project. Ik gebruikte Sonnet voor kleine wijzigingen en Opus voor systeembrede beslissingen. Je kunt in Claude Code erg makkelijk van model wisselen en ook de nadenktijd instellen.

7. Git werd een goede vriend

Op een derde van het project kwam ik erachter dat de CSS-stijldefinities bij sommige pagina’s inline stonden, terwijl andere pagina’s deze opvroegen via één centraal bestand. Voor een webdeveloper is alleen dat laatste wenselijk. Centraal beheer vereist één bron van waarheid.

Ik liet Claude daarom alle stijlen centraliseren. Dit bleek een ramp. Verschillende pagina’s waren visueel kapot en de AI kon niet alles direct herstellen. Gelukkig had ik een eerdere projectkopie opgeslagen. Claude kwam met de tip om gebruik te gaan maken van Git en activeerde dat voor mij. Met Git kan je versiebeheer toepassen en wijzigingen bijhouden en terugdraaien. Hierdoor kon ik voor grote aanpassingen nu eerst een back-up maken, die ook weer terug te zetten is. Daarna begon ik stap voor stap opnieuw met centraliseren.

8. Een reviewteam van drie AI’s

Tijdens de ontwerpfase draaide ik twee aparte ChatGPT-sessies parallel aan Claude. Om echt gerichte feedback te krijgen, gaf ik beide modellen vooraf een zeer specifieke instructie over hun rol. Hierdoor wisten zij exact door welke bril ze naar het ontwerp moesten kijken:

• Een virtuele webdesigner voor visuele kritiek en de juiste compositie.
• Een expert in beïnvloeding en conversie-optimalisatie voor de micro-copy en sociale bewijslast.

Bij elke fase liet ik de designer-chat feedback geven op de ontwerpen. Deze feedback legde ik voor aan Claude om te brainstormen en om verbeteringen door te voeren. In de afrondende fase keek de beïnvloeding expert naar het verbeteren van conversie-elementen.

Eén AI fungeert als uitvoerder, maar meerdere AI’s met verschillende rollen vormen een ijzersterk reviewteam. Dit maakt de kwaliteit van het ontwerp aantoonbaar beter.

ChatGPT geeft feedback

9. Toegankelijkheid is geen bijzaak

Mijn eerste ontwerp voldeed niet aan de WCAG-toegankelijkheidseisen. De kleurcontrasten waren te laag, sommige teksten stonden te klein afgedrukt en belangrijke focus-statussen ontbraken. Ik moest dit in een latere fase door Claude laten controleren en repareren.

Zet toegankelijkheidseisen direct in de briefing. Achteraf problemen herstellen kost veel meer tijd dan vooraf duidelijke kaders bepalen.

10. Bepalen wanneer het klaar is

Een groot voordeel van werken met AI is ook direct een grote valkuil. Je kunt eindeloos blijven testen met nieuwe varianten. De AI raakt nooit vermoeid en zal nooit aangeven dat het ontwerp nu wel goed genoeg is. Dat is jouw taak.

Ik merkte meerdere keren dat het project groter werd door mijn eigen enthousiasme. Eén knop kon nog beter, de ruimte kon nog iets royalere afmetingen krijgen. Op een gegeven moment moet je het proces durven stoppen.

11. Het gevecht om consistentie

Toen ik 15 pagina’s had uitgewerkt, bleek de homepagina, die ik als eerste had gemaakt, niet meer 100% de vibe te hebben van de latere pagina’s. Het ontwerp was meegegroeid, de homepagina was achtergebleven.

Dit legde ik voor aan Claude, die vervolgens direct een sub-agent activeerde met de opdracht “vergelijk de homepage-styling met de andere pagina’s en rapporteer afwijkingen”. Een aparte AI-instantie die los van mijn hoofdsessie systematisch alle pagina’s naast elkaar legde en een lijst opleverde met concrete verschillen. Die heeft Claude in overleg met mij, stap voor stap rechtgetrokken.

Dat is een mooi voordeel van Claude Code: voor afgebakende controle-taken kan een sub-agent het werk doen zonder dat je hoofdsessie vervuilt met audit-logs. En bij dit soort vergelijkings-werk loont het om een lichter, snel model in te zetten (claude-haiku-4-5) want het is vooral lezen en samenvatten.

Les: Reserveer aan het einde van het project tijd om vroege pagina’s te checken tegen de actuele standaard en laat dat door een sub-agent doen. Het scheidt het werk en geeft je een schone rapportage.

12. Volwaardig prototype

Het eindresultaat bestond uit 17 volledig uitgewerkte HTML-pagina’s in de nieuwe consistente stijl. Elke pagina was geoptimaliseerd voor zowel desktop als mobiel en bevatte werkende filters en effecten. Het is dus een volledig prototype geworden.

Aan het einde van de rit schreef Claude voor mij een uitgebreid overdrachtsdocument voor de webdeveloper. Dit bevatte niet een droge opsomming van bestanden, maar specifieke details:

• De designfilosofie en de harde regels.
• Welke bestanden als referentie dienen.
• Welke componenten exact waar worden ingezet en opgebouwd.
• Welke externe diensten geregeld moeten worden, zoals Cookiebot of de Google Maps API.

Een goede overdracht legt de gemaakte keuzes minutieus uit, zodat een developer niet hoeft te raden. Daarnaast is er ook een “echt” moment ingepland om alles samen nog een keer door te nemen.

Wat heeft het gekost?

Wanneer een AI aan het werk gaat, reken je af in tokens. Voor dit project kom ik uit op de volgende grove inschatting voor het tokenverbruik:

• Initiële homepage inclusief iteraties: 1 tot 2 miljoen tokens
• Uitwerking van 16 extra webpagina’s: 3 tot 5 miljoen tokens
• Centralisatie en handmatig herstel van opmaak: 1 tot 2 miljoen tokens
• Responsieve oplossingen en optimalisaties: 1 tot 2 miljoen tokens
• Toevoeging van bibliotheken en badges: 1 tot 2 miljoen tokens
• De overdracht afronden in tekst: 1 tot 2 miljoen tokens

De totale ordegrootte bedraagt circa 8 tot 15 miljoen tokens. Met de prijzen van Claude Opus ten tijde van dit project, komt een lage schatting uit rond de 200 tot 250 dollar. Bij een hoge schatting is dit ongeveer 400 tot 500 dollar.

Beschik je over een (zwaar) Claude bedrijfsabonnement met een vaste prijs, dan valt dit waarschijnlijk binnen de gestelde marges van het verbruik. Bij een paar intensieve sessies moest ik een paar uur wachten, totdat ik weer verder kon.

De vergelijking met een traditioneel traject

Voor de volledige scope van dit project, inclusief een ontwerpsysteem en alle uitgewerkte componenten, ligt de traditionele designprijs bij een high-end bureau doorgaans tussen de 10.000 en 25.000 euro. Ook moet je rekening houden met een doorlooptijd van enkele weken of zelfs maanden. Daarnaast heb je in zo’n traject niet altijd de volledige ontwerpregie.

Aan software en pure rekenkracht kostte het AI-deel van dit project mij ruwweg 2 tot 5 procent van zo’n traditioneel budget. Geld is echter niet het enige betaalmiddel in dit verhaal. Je betaalt namelijk ook met de volgende middelen:

• Je eigen uren als regisseur. In mijn geval kostte dit zo’n 40 uur. Reken je met een gangbaar uurtarief van 120 euro, dan is dat een indirecte kostenpost van 4.800 euro.
• Tijd en energie voor een leercurve. Je moet wennen aan de workflow en een ijzersterke prompt-discipline opbouwen.
• Mentale belasting. Je draagt het hele project alleen en mist het klankbord van een professionele, menselijke collega.
• Vaste lasten. De maandelijkse kosten voor de verschillende abonnementen en tools lopen altijd door.

Tel je de indirecte kosten van je eigen uren op bij de directe softwarekosten, dan kom je uit op een reële investering van ruim 5.000 euro. Dat is nog steeds een flinke besparing ten opzichte van het traditionele traject, maar het toont wel aan dat AI-ontwikkeling een serieuze tijdsinvestering vereist van jou als ondernemer, of van een van je werknemers.

Wat is mijn belangrijkste conclusie?

Een compleet nieuw design maken voor een website met Claude Code is mogelijk en verloopt bijzonder soepel. Vooral de mogelijkheid om vrijwel onbeperkt aanpassingen te maken geeft een nieuwe dimensie aan het ontwerpproces.

De techniek verschuift de kostenstructuur. Er vloeit aanzienlijk minder geld naar het ontwerpen zelf, maar het vergt wel een flinke investering van je eigen tijd. Ben je bereid om op de stoel van de regisseur te gaan zitten en beschik je over voldoende kennis van webdesign? Dan is deze methode naar mijn mening bijzonder waardevol en effectief. Wil je liever je focus op het ondernemen houden? Dan blijft de weg via een bureau of freelancer de meest doeltreffende oplossing.

Het eindresultaat mag er zijn. VanHuyse is enthousiast en voor mij bewijst deze pilot dat je een compleet redesign uitstekend met AI in eigen beheer kunt uitvoeren. Ik kan dan ook niet wachten op de lancering van de nieuwe vanhuyse.nl.