Rapport
Veel AI-sites herken je van een afstand: een standaardlettertype, een paars kleurverloop, knoppen die niets doen. Dat ligt niet aan de AI, maar aan waar hij zijn ontwerp vandaan haalt. In dit rapport lees je hoe je Claude Code koppelt aan 21st.dev, een bibliotheek met componenten van designers, en daarmee een site bouwt die er professioneel uitziet.
In het kort
Wat je leert
Een AI die zonder houvast een website ontwerpt, kiest het gemiddelde van alles wat hij heeft gezien. Anthropic, het bedrijf achter Claude, noemt dat zelf de reden dat AI-sites op elkaar lijken.
De oplossing is de AI laten putten uit werk van designers. 21st.dev is een bibliotheek met ruim twaalfduizend componenten, templates en thema's. Met een koppeling zoekt Claude Code daar zelf in en bouwt het gekozen component in je project.
In het rapport lees je hoe je dat in vijf stappen opzet, hoe je zoekt zodat je niet bij dezelfde ontwerpen uitkomt als de rest, en hoe je elk component afmaakt en laat passen bij je eigen stijl.
Uitgeprobeerd in september 2026
We koppelden Claude Code aan 21st.dev en probeerden het uit op de code van deze website: zoeken, een component ophalen en nagaan wat er nodig is om het goed te laten werken. De feiten over 21st.dev komen uit de eigen documentatie van 21st.dev, de uitleg over generieke AI-ontwerpen uit een artikel van Anthropic.
Wat er in het rapport staat
Waarom je een AI-site van een afstand herkent
Zonder houvast verzint de AI het ontwerp zelf, en kiest dan het gemiddelde.
Wat 21st.dev is
Een bibliotheek met onderdelen voor websites, gemaakt door designers.
Hoe Claude Code en 21st.dev samenwerken
Jij beschrijft wat je wilt, Claude Code zoekt het op en bouwt het in.
Zo zet je het op
Vijf stappen, ook als je geen programmeur bent.
Zo vraag je het goed
Zoek op het effect dat je wilt, en zeg wat je wel wilt.
Wat er meekomt als je een component overneemt
Een component staat zelden op zichzelf, en daarna is het jouw code.
Van mooi naar af
Een component levert het uiterlijk. Het gedrag en je kleuren maak je zelf af.
Maak er één geheel van
Leg je stijl vast, zodat elk component bij de rest past.
De checklist
Wat je nakijkt voordat je site live gaat.
Lees het rapport
Negen korte hoofdstukken in gewone taal: waarom AI-sites op elkaar lijken, wat 21st.dev is, hoe je de koppeling met Claude Code opzet en hoe je er een site van hoog niveau mee bouwt. Het rapport opent direct in je browser.
Wie dit schreef
Dit rapport is geschreven door Pilex. We helpen organisaties AI verantwoord in te zetten, en willen daarbij weten wat er onder de motorkap gebeurt. Deze site is er zelf een voorbeeld van.