Vraag Claude Code om een website en je krijgt bijna altijd hetzelfde: een paarse gradient, een gecentreerde kop en drie kaartjes met icoontjes. Het werkt, maar iedereen ziet dat het door AI gebouwd is. Met vijf extra tools voor Claude Code design verandert dat, zonder dat je eindeloos aan je prompt hoeft te schaven.

👉 Onderaan deze pagina kan je de volledige gids vinden, met alle 5 tools bij naam en hoe je ze installeert.

Wat is Claude Code design?

Met Claude Code design bedoelen we het bouwen van websites en interfaces in Claude Code, de terminalversie van Claude die zelf bestanden schrijft en commando's uitvoert. Standaard heeft hij geen eigen smaak: hij kiest de veiligste lay-out die hij kent. Met skills, een designsysteem en een browser die hij zelf bedient, krijgt hij die smaak wel, en controleert hij zijn eigen werk.

Let op het verschil met Claude Design. Dat is een los product van Anthropic waarin je met prompts ontwerpen maakt, zonder code. Hoe dat werkt, lees je in Kun je een website maken met Claude Design? Deze pagina gaat over Claude Code, waarin je de echte code van je site bouwt en bijhoudt.

Waarom ziet een website van AI er vaak hetzelfde uit?

Een taalmodel kiest standaard wat het vaakst voorkomt in zijn trainingsdata, en dat zijn duizenden vergelijkbare startpagina's. Zonder richting krijg je dus het gemiddelde: veilige kleuren, standaard lettertypes en dezelfde blokken in dezelfde volgorde. Claude ziet bovendien niet wat hij bouwt. Hij schrijft code, maar opent geen browser om te kijken of de knop goed staat.

Daar zitten twee problemen in. Hij mist smaak, en hij mist ogen. De vijf tools lossen allebei op: drie geven hem richting voordat hij begint, twee laten hem controleren wat hij gemaakt heeft.

Welke 5 tools maken Claude Code beter in design?

Elke tool heeft een eigen taak in het bouwproces, van de eerste schets tot de laatste controle. Je hoeft ze niet allemaal te gebruiken: kies wat past bij hoe jij bouwt.

• De Smaakmaker. Een skill die Claude leert wat goed design is. Hij stuurt op lay-out, typografie, beweging en witruimte, met knoppen voor hoe gewaagd, hoe druk en hoeveel animatie je wilt. Het resultaat ziet er niet meer uit als een sjabloon.

• De Keurmeester. Een skill van Vercel die je code naast hun richtlijnen voor webinterfaces legt. Hij kijkt naar toegankelijkheid, focus, formulieren, beelden, prestaties en mobiel gebruik, en wijst aan wat beter kan voordat je live gaat.

• Het Stijlboek. Een verzameling designsystemen in de stijl van bekende websites, elk in één tekstbestand. Kleuren, typografie, knoppen, witruimte en schaduwen staan erin uitgeschreven, zodat Claude één consistente stijl volgt in plaats van per pagina iets te verzinnen.

• De Overtekenaar. Een tool die van een screenshot, een mockup of een Figma-ontwerp werkende code maakt, bijvoorbeeld HTML met Tailwind, React of Vue. Zie je een site die je mooi vindt, dan heb je zo een startpunt om op verder te bouwen.

• De Testpiloot. Een koppeling waarmee Claude zelf een browser opent, door je site klikt en screenshots maakt. Zo ziet hij een kapotte knop of een tekst die over een beeld loopt, voordat jij hem tegenkomt.

Welke tools het precies zijn, met de installatie per stuk, staat in de gids om de Claude Code design skills te installeren.

Wat levert het op in de praktijk?

Bij ons is het grootste verschil de snelheid. Je kunt nu veel sneller een website live zetten, zonder eerst eindeloos je prompts en designs te verbeteren. Vroeger ging de meeste tijd naar bijsturen: nog een keer uitleggen welke kleuren, welke witruimte en waarom die knop anders moet. Met een designsysteem in je project en een skill die smaak meegeeft, staat de eerste versie al dichter bij wat je wilt.

De Testpiloot scheelt vooral heen-en-weer werk. Claude kijkt zelf naar wat hij bouwde, dus jij hoeft niet na elke wijziging een screenshot te maken en uit te leggen wat er mis is.

Een tip die je pas merkt als je het doet: begin met het Stijlboek. Kies één designsysteem dat bij je merk past en zet dat in je project voordat je Claude iets laat bouwen. Een skill voor smaak werkt het best als hij weet binnen welke stijl hij moet blijven. Zonder vaste stijl krijg je wel mooiere pagina's, maar die passen niet bij elkaar.

Waar let je op voordat je begint?

Deze tools versnellen je werk, maar ze vervangen je eigen oordeel niet. Kijk elke pagina zelf na op je telefoon, en lees mee wat Claude aanpast voordat je iets live zet. Drie aandachtspunten:

• Kopieer geen merk. Een designsysteem in de stijl van een bekende site is een startpunt. Pas kleuren en lettertypes aan op je eigen huisstijl, anders lijkt je site op die van een ander.

• Extra kosten. De Overtekenaar draait met een eigen API-sleutel van een AI-aanbieder, en elke conversie kost tegoed. De andere tools werken binnen Claude Code.

• Wat je installeert. Een skill of koppeling draait met jouw rechten op jouw computer. Installeer alleen wat je vertrouwt en lees eerst wat hij doet.

Nog niet zo thuis in hoe Claude en Claude Code samenhangen? Lees dan eerst Hoe werkt Claude? De zes niveaus uitgelegd.

Hoe begin je met Claude Code design?

Je begint met een leeg project of je bestaande site in Claude Code. Installeer eerst het Stijlboek en de Smaakmaker, laat Claude een eerste pagina bouwen, en zet daarna de Testpiloot aan om hem zijn eigen werk te laten controleren. De Keurmeester draai je als laatste, vlak voordat je live gaat.

Wil je zulke workflows voor je eigen bedrijf laten bouwen, kijk dan bij AI-automatisering.

Alle 5 tools bij naam, met per stuk wat het is, hoe je hem installeert en in welke volgorde je ze inzet, staan in onze gratis gids voor Claude Code design.