De 11 skills achter een goede AI-website: zo bouw je met Claude

Een website bouwen met AI lijkt simpel. Prompt erin, site eruit. Maar tussen een matige AI-site en een geweldige site zit een wereld van verschil. En dat verschil zit in de kennis die je Claude meegeeft.

Peter en ik hebben de afgelopen maanden al die kennis samengebracht in een serie skills. 11 gerichte prompts over elk kritiek onderdeel van een website, plus één grote AI Development Skill die alles combineert. In dit artikel neem ik je mee door elke skill. Wat doet hij, waarom is hij belangrijk, en hoe zet je hem in?

Waarom 11 skills en niet gewoon één prompt?

Je kunt Claude vragen om "een goede website te maken" en iets krijgen dat er op het eerste gezicht prima uitziet. Maar dan mis je dingen. Geen schema.org structured data voor lokale vindbaarheid. Een CTA die niet genoeg opvalt. Een heading-structuur die Google niet begrijpt. Een mobiel menu dat niet lekker werkt.

Elke skill dekt één specifiek onderdeel af, tot in detail. De AI Development Skill combineert ze tot één lang document dat Claude door het complete proces leidt. Zo mis je niks.

Skill 1. Landingspagina bouwen

De basis van bijna elke AI-website is een goede landingspagina. Deze skill leert Claude hoe je een overtuigende one-pager opbouwt. Hero-sectie met krachtige value proposition, duidelijke CTA boven de fold, diensten in scanbare blokken, testimonials voor vertrouwen, FAQ voor bezwaren wegnemen, en contactformulier om de lead te vangen.

Wat deze skill toevoegt: de psychologische opbouw van een pagina. Waarom een testimonial vóór de FAQ hoort en niet erna. Waarom je CTA boven én onder de fold moet staan. Dingen die conversie-optimalisatie specialisten jaren leren.

Skill 2. SEO-optimalisatie

Een mooie website die niet vindbaar is, is nutteloos. Deze skill zorgt dat Claude alle technische SEO-basics goed doet. title tag onder de 60 karakters, meta description met CTA onder 155 karakters, één H1 per pagina, logische H2- en H3-structuur, alt-teksten bij afbeeldingen, en schema.org structured data voor lokale vindbaarheid.

Extra slim: de skill laat Claude ook Open Graph-tags toevoegen, zodat je site er professioneel uitziet bij het delen op LinkedIn, WhatsApp en Facebook. Vaak vergeten, maar belangrijk voor social proof.

Skill 3. Conversie-optimalisatie (CRO)

Bezoekers omzetten in klanten. Daar gaat het uiteindelijk om. Deze skill leert Claude de principes van conversie-optimalisatie toepassen. duidelijke primaire CTA, herhaling van die CTA op strategische plekken, vertrouwenssignalen (reviews, logo's, contactgegevens), urgentie zonder pushy te worden, en klikbare telefoonnummers voor mobiel.

Concrete dingen die deze skill toevoegt: knoppen die de kleuren van je branding gebruiken, maar dan omgedraaid (contrast is alles). Formulieren met het minimale aantal velden voor maximale conversie. Social proof direct na de hero, voor de diensten (belangrijk voor vertrouwen opbouwen).

Skill 4. Responsive design

Meer dan 60% van het webverkeer komt van mobiel. Als je site daar niet lekker werkt, ben je klaar. Deze skill zorgt dat Claude mobile-first denkt. flexbox en grid voor layouts, viewport meta tag, hamburger menu, klikbare telefoonnummers, en voldoende grote touch-targets.

Wat ik aan deze skill goed vind: hij forceert Claude om ook tussen-formaten te testen. Niet alleen mobiel en desktop, maar ook tablet-afmetingen (768px, 1024px). Daar gaat het vaak mis bij AI-sites die alleen getest zijn op mobiel en laptop.

Skill 5. Website snelheid

Google Core Web Vitals bepalen mede je positie in zoekresultaten. Een trage site kost je bezoekers én rankings. Deze skill leert Claude om snelheid in de architectuur mee te nemen. inline CSS voor critical path, lazy loading voor afbeeldingen onder de fold, gecomprimeerde assets, minimaal JavaScript, en geen zware libraries waar het niet hoeft.

Het resultaat: AI-gegenereerde sites halen standaard 90+ op PageSpeed Insights. Zonder dat je er iets voor hoeft te doen.

Skill 6. Contactformulieren

Een formulier lijkt simpel, maar bijna iedereen maakt fouten. Te veel velden (kost conversie). Geen validatie (frustreert gebruikers). Geen bevestiging na submit (laat bezoekers in onzekerheid). Deze skill leert Claude formulieren die werken.

Specifieke toevoegingen: HTML5-validatie voor e-mail en telefoon, een success-state na submit, honeypot-velden tegen spam, en een fallback mailto-link voor als het formulier niet werkt. Het formulier vangt leads. Klaar voor productie.

Skill 7. Social proof

Mensen kopen niet van websites die ze niet vertrouwen. Deze skill draait om het op de juiste manier inzetten van vertrouwenssignalen. testimonials met naam en bedrijf (liefst ook foto), logo's van klanten of partners in een "gewerkt voor"-strip, review-sterren waar relevant, case studies bij diensten, en aantallen die indruk maken ("500+ klanten", "10 jaar ervaring").

Belangrijk is dat de skill Claude leert om eerlijk te zijn. Je verzint geen testimonials. Je gebruikt echte reviews, echte namen, echte data. Als je net begint, heb je misschien weinig social proof. De skill leert Claude dan alternatieve vertrouwenssignalen inzetten (certificeringen, lidmaatschappen, garanties).

Skill 8. Branding en styling

Het verschil tussen een generieke AI-site en een site die voelt als jouw bedrijf. Deze skill gaat over kleuren (60-30-10 regel, accent op CTA), typografie (één heading-font, één body-font, max twee), whitespace (ademruimte geeft luxe), en consistentie (dezelfde radius, dezelfde schaduw, overal).

Wat deze skill uniek maakt: hij leert Claude om je designkeuzes af te stemmen op je branche. Een advocatenkantoor ziet er anders uit dan een kinderdagverblijf. En dat zit niet alleen in de kleuren, maar ook in de border-radius, de toon van de micro-animaties, de stijl van de iconen.

Skill 9. Webteksten schrijven

Misschien wel de belangrijkste skill. Goede copy is het verschil tussen een bezoeker die wegklikt en een bezoeker die converteert. Deze skill leert Claude om niet vanuit jezelf te schrijven, maar vanuit de klant. "What's in it for me" als constante vraag.

Concrete regels: kort en scanbaar (max 7 regels per alinea), heldere taal zonder jargon, actieve werkwoorden, specifieke voordelen in plaats van algemeenheden, en altijd de pijn van de klant eerst benoemen voordat je de oplossing presenteert.

Ook slim: de skill leert Claude om micro-copy te gebruiken op knoppen en formulieren. Niet "Verstuur", maar "Stuur mijn aanvraag". Niet "Klik hier", maar "Plan een kennismaking". Kleine dingen die conversie flink tillen.

Skill 10. Analytics en tracking

Je kunt een site niet verbeteren als je niet meet wat er gebeurt. Deze skill zorgt dat Claude de basics van tracking ingebouwd heeft. GA4-code in de head, Search Console-verificatietag, sitemap.xml (statisch), robots.txt, en canonical URLs.

Slim extra: de skill laat Claude ook event-tracking toevoegen voor belangrijke acties. Klikken op het telefoonnummer. Submit van het contactformulier. Scrolldiepte. Zodat je in GA4 echt ziet wat bezoekers doen, niet alleen dat ze er waren.

Skill 11. Frontend development

De technische onderkant. Deze skill gaat over code-kwaliteit. semantische HTML (article, section, nav, aside in plaats van overal divs), accessibility (alt-teksten, aria-labels, focus-states), cross-browser compatibility (werkt ook in Safari en Firefox), en graceful degradation (als JavaScript faalt, werkt de site nog).

Deze skill lijkt saai, maar is cruciaal. Hij voorkomt dat je site er mooi uitziet, maar onbruikbaar is voor 10% van je bezoekers. Denk aan screenreader-gebruikers, mensen met oudere browsers, situaties met een trage internetverbinding.

De AI Development Skill: alles in één

Elk van die 11 skills is los te gebruiken. Handig als je één specifiek onderdeel wilt verbeteren aan een bestaande site. Maar voor een nieuwe site van scratch gebruik je de AI Development Skill. Dat is één groot document dat alle 11 skills combineert, plus een intake-gesprek van 45+ vragen.

Hoe werkt het? Je plakt het bestand in Claude. Claude gaat je interviewen. Over je bedrijf, je doelgroep, je concurrenten, je branding, je doelen. Op basis van je antwoorden bouwt hij een complete website die alle 11 skills toepast.

Het verschil met een losse prompt? De skill vergeet niks. Hij vraagt door over je USP's, je bezwaren van klanten, je transformatie-verhaal. Dingen waar je zelf niet aan denkt, maar die het verschil maken tussen een site die "er is" en een site die klanten oplevert.

Hoe je de skills combineert in je workflow

Zo gebruik ik ze in de praktijk:

1. Starten: AI Development Skill plakken en de intake doorlopen. Claude bouwt v1
2. Reviewen: je site op desktop én mobiel testen. Wat valt op?
3. Losse skills inzetten: als de conversie-elementen tekortschieten, plak je Skill 3 (CRO) erbij en vraag je Claude om dat onderdeel te verbeteren
4. Itereren: tot je tevreden bent
5. Publiceren: via Webnexus Sites

Belangrijk: je hoeft niet alle skills tegelijk te gebruiken. De AI Development Skill dekt 95% van de gevallen af. De losse skills zijn voor als je een specifiek onderdeel wilt verdiepen.

Gratis te downloaden

Alle skills staan gratis op onze skills-pagina. Download ze als .txt bestand, plak ze in Claude, klaar. Geen account nodig om de skills te gebruiken, geen betaalmuur.

Waarom gratis? Omdat we geloven dat goede websites toegankelijk moeten zijn voor iedereen. We verdienen aan het hostingplatform (Webnexus Sites) en aan ons bureau (Webnexus). De skills zijn onze manier om bij te dragen aan de community.

Probeer ze. Feedback is welkom op boyd@webnexus.nl. En als je er een mooie site mee bouwt, voeg hem toe aan onze showcase. Ik ben benieuwd wat je ermee maakt.