Claude Design: wat is het en hoe ontwerp je er je website mee

Claude Design is een ontwerpfunctie van Anthropic waarmee je ontwerpen, klikbare prototypes, presentaties en one-pagers maakt door met Claude te praten. Je beschrijft wat je nodig hebt en Claude maakt een eerste versie op een canvas naast het gesprek. Die verfijn je met nieuwe instructies, opmerkingen op een onderdeel of door zelf te slepen en aan te passen. Een ontwerp voor een website geef je daarna door aan Claude Code om het te laten bouwen.

Ik werk sinds 2012 als online marketeer en zie sinds de komst van AI-tools één patroon steeds terugkomen: een website is in een middag gemaakt, maar lijkt precies op die van de buren. In deze blog lees je wat Claude Design is, wat je ermee maakt, welke abonnementen toegang geven en hoe je een ontwerp krijgt dat bij jouw bedrijf past.

Dit lees je in deze blog:

• Wat is Claude Design?
• Voor wie is Claude Design?
• Wat maak je met Claude Design?
• Hoe werkt Claude Design?
• Welke abonnementen geven toegang?
• Van ontwerp naar website: doorgeven aan Claude Code
• Zo voorkom je een ontwerp dat naar AI ruikt
• Praktijkvoorbeeld: een hovenier ontwerpt zijn website
• Beperkingen van Claude Design
• Veelgestelde vragen over Claude Design
• De volgende stap

Wat is Claude Design?

Anthropic, het bedrijf achter Claude, lanceerde Claude Design op 17 april 2026 als product van Anthropic Labs. Het begon als losse website op claude.ai/design. Inmiddels zit Claude Design in Claude zelf: je kunt het vanuit elk gesprek met Claude gebruiken, vanuit het overzicht met je artifacts en in Claude Code met het commando /design.

Gebruik je nog de losse versie op claude.ai/design? Die sluit op 14 december 2026. Tot die datum kun je er gewoon in werken. Daarna kun je er alleen nog in kijken en geen nieuwe projecten meer starten. Anthropic heeft een stappenplan om je projecten en design systems naar Claude te verhuizen. Download in elk geval een kopie van je projecten voordat de losse versie sluit.

Het verschil met een gewone chat is het canvas: je krijgt geen beschrijving van een ontwerp, maar een werkend ontwerp dat je kunt bekijken, aanklikken en aanpassen. Claude werkt daarbij met een design system: een vaste set kleuren, lettertypes en onderdelen zoals knoppen en kaarten. Heb je dat eenmaal ingesteld, dan gebruikt Claude het in elk nieuw ontwerp.

Voor wie is Claude Design?

Anthropic noemt twee groepen. Ontwerpers gebruiken het om snel meerdere richtingen te verkennen. Mensen zonder ontwerpachtergrond gebruiken het om toch verzorgd beeldmateriaal te maken. Die tweede groep is voor deze blog het interessantst:

• Ondernemers en zzp'ers die hun website zelf willen ontwerpen voordat ze hem laten bouwen of zelf bouwen.
• Marketeers die snel een landingspagina, een social post of een flyer willen uitwerken zonder op een ontwerper te wachten.
• Teams die willen dat iedereen in dezelfde huisstijl werkt, ook mensen die geen ontwerpprogramma kunnen bedienen.

Je hoeft dus geen ontwerper te zijn. Je moet wel weten wat je wilt uitstralen. Daar kom ik verderop op terug, want daar gaat het bij de meeste AI-ontwerpen mis.

Wat maak je met Claude Design?

Volgens de officiële pagina's van Anthropic maak je onder meer:

• Ontwerpen en mockups van pagina's, zoals een homepage of landingspagina.
• Klikbare prototypes: ontwerpen waarin je door schermen kunt klikken, bijvoorbeeld een aanmeldflow.
• Presentaties en pitch decks. Voor slides heeft Claude sinds de update van september ook een eigen startpunt, Claude Slides.
• One-pagers en marketingmateriaal, zoals social posts en flyers.
• Wireframes: kale schetsen van een pagina-opbouw.
• Een design system met je kleuren, letters en onderdelen. Claude bouwt dat op basis van wat je aanlevert, zoals bestaande ontwerpbestanden of de code van je website. Zie het als het visuele deel van je brandbook in een vorm die Claude bij elk ontwerp gebruikt.

Hoe werkt Claude Design?

Het helpcentrum van Claude beschrijft een vaste werkwijze. In gewone taal komt die hierop neer:

1. Start een ontwerp vanuit een gesprek met Claude of vanuit een ontwerpsjabloon bij je artifacts.
2. Koppel een design system of laat Claude er een maken. Je kunt een design system ophalen uit een GitHub-repository, uit ontwerpbestanden of uit losse uploads.
3. Geef context: screenshots, documenten (Word, PowerPoint en Excel worden genoemd) of de code van je huidige website.
4. Beschrijf wat je wilt maken. Hoe concreter, hoe beter.
5. Bekijk de eerste versie op het canvas.
6. Verfijn het ontwerp. Gebruik het gesprek voor grote wijzigingen, een opmerking op een onderdeel voor gerichte aanpassingen en direct bewerken voor kleine visuele dingen zoals verschuiven en uitlijnen.
7. Exporteer of deel het ontwerp.

Ontwerpen zijn standaard privé. Via een link deel je ze met anderen, die kunnen kijken, reageren of meewerken. Exporteren kan onder meer als PDF, PowerPoint, HTML of zip-bestand. Je kunt een ontwerp ook doorsturen naar andere tools, zoals Canva.

Kort samengevat: Claude Design maakt van een beschrijving een werkend ontwerp op een canvas. Je stuurt bij met gesprek, opmerkingen en directe aanpassingen. Met een design system houdt Claude zich aan jouw kleuren en letters.

Welke abonnementen geven toegang?

Volgens de productpagina en het helpcentrum zit Claude Design in alle abonnementen van Claude: Free, Pro, Max, Ultra, Team en Enterprise. Bij Enterprise bepaalt de beheerder van de organisatie of de functie aanstaat.

Let wel op je gebruikslimiet. Ontwerpwerk telt mee voor dezelfde limiet als de rest van je werk met Claude, ook Claude Code. Grote codebases en veel ontwerprondes kosten meer. Zit je aan je limiet, dan kun je pas weer ontwerpen na de reset, tenzij je extra gebruik hebt ingeschakeld. Actuele prijzen en limieten per abonnement vind je op claude.com/pricing.

Van ontwerp naar website: doorgeven aan Claude Code

Een ontwerp in Claude Design is nog geen website. Daarvoor moet het gebouwd worden. Anthropic heeft daar een vaste route voor: Claude verpakt het ontwerp in een overdrachtspakket dat je met één instructie aan Claude Code geeft. Claude Code bouwt verder op wat er al ligt, zodat je niet opnieuw hoeft uit te leggen hoe het eruit moet zien.

Je kunt ook vanuit Claude Code beginnen. Met /design haal je een ontwerp binnen of maak je een nieuw ontwerp. Met /design-sync haal je je design system op. Bouw je je website met de desktop-app van Claude, dan werk je in het onderdeel Code van die app. Wat Claude Code precies is en hoe je er veilig mee werkt lees je in de blog over Claude Code.

Wil je niet met Claude Code bouwen? Het helpcentrum noemt ook koppelingen met andere tools, waaronder Lovable, Vercel, Wix en Netlify. Welke route het beste past hangt af van hoeveel controle je wilt. Op de pagina website maken met AI zet ik de opties naast elkaar.

Zo voorkom je een ontwerp dat naar AI ruikt

Vraag je Claude om "een moderne website voor mijn bedrijf", dan krijg je het gemiddelde van alle moderne websites. Dat herken je aan dezelfde kleurverlopen, dezelfde rij met drie iconen, stockachtige illustraties en koppen die niets zeggen. Claude vult alles wat jij niet vertelt in met het meest voorspelbare antwoord. Zo voorkom je dat:

1. Begin met een brandbook

Leg eerst vast wie je klant is, wat je belooft, hoe je klinkt en hoe je eruitziet. Dat is je brandbook. Pas daarna ga je ontwerpen. Zonder brandbook kiest Claude voor jou en dat wordt het gemiddelde. In de blog brandbook maken lees je hoe je dat aanpakt. Je stem leg je vast met een tone of voice.

2. Maak een design system met je eigen kleuren en letters

Geef Claude je exacte kleurcodes, je lettertypes en voorbeelden van materiaal dat je al hebt, zoals je logo, een offerte of je huidige website. Laat Claude daar een design system van maken en controleer het voordat je pagina's gaat ontwerpen.

3. Schrijf ontwerpregels op

Regels zijn concreter dan sfeerwoorden. "Strak en modern" zegt Claude weinig. Dit werkt beter:

• Geen kleurverlopen en geen iconen in gekleurde rondjes.
• Maximaal twee accentkleuren per pagina.
• Elke dienst krijgt een echte foto van ons werk, geen illustratie.
• Koppen zeggen wat de klant krijgt, niet wat wij zijn.

4. Gebruik je eigen foto's

Niets maakt een website zo herkenbaar als echte foto's van jou, je team en je werk. Upload ze en vraag Claude om het ontwerp daaromheen te bouwen.

5. Laat meerdere richtingen zien en kies zelf

Vraag om twee of drie verschillende opzetten van dezelfde pagina. Vergelijk ze met je brandbook en kies de opzet die het best past. Jij bent de regisseur. Claude is de uitvoerder.

Praktijkvoorbeeld: een hovenier ontwerpt zijn website

Stel: Tuinatelier Linde (een verzonnen voorbeeld) wil een nieuwe website die meer offerteaanvragen oplevert. De eigenaar ontwerpt hem zelf in Claude Design. Zo pakt hij het aan:

1. Brandbook eerst. Zijn ideale klant is een gezin met een tuin die al jaren niet af is. Zijn belofte: een tuin die het hele jaar mooi is en weinig onderhoud vraagt. Hij kiest een diepgroen en een warme terracotta als kleuren.
2. Design system. Hij uploadt zijn logo, de kleurcodes, het lettertype van zijn bedrijfsbus en tien foto's van opgeleverde tuinen. Claude maakt er een design system van.
3. Ontwerpregels. Geen illustraties, alleen eigen foto's. Op elke pagina staat een knop naar de offerteaanvraag. Prijsindicaties staan gewoon op de site.
4. Homepage. Zijn opdracht: "Ontwerp een homepage voor een hovenier in Utrecht. Bovenaan een foto van een opgeleverde tuin met de belofte en een knop naar de offerte. Daaronder drie diensten met een foto en een vanafprijs, drie reviews en een blok over hoe een project verloopt." Hij vraagt om twee varianten en kiest de rustigste.
5. Bijsturen. Met opmerkingen op onderdelen laat hij de reviews hoger zetten en de tekst onder de foto korter maken. Op zijn telefoon controleert hij of de knop goed zichtbaar is.
6. Bouwen. Hij geeft het ontwerp door aan Claude Code en laat de website bouwen. Voordat hij live gaat laat hij titels, snelheid en vindbaarheid nalopen.

Het resultaat is een website die eruitziet als Tuinatelier Linde en niet als een sjabloon. Dat komt niet door een slimme opdracht, maar door het werk vooraf: brandbook, design system en ontwerpregels.

Beperkingen van Claude Design

Claude Design is krachtig, maar niet af. Het helpcentrum noemt zelf een aantal beperkingen:

• Geen versiegeschiedenis. Je kunt niet terug naar een eerdere versie van je ontwerp. Exporteer daarom tussendoor een kopie als je tevreden bent.
• Samenwerken is basaal. Met meerdere mensen tegelijk in één ontwerp werken gaat nog niet altijd goed.
• Opmerkingen verdwijnen soms. Komt een opmerking niet door, plak je feedback dan in het gesprek.
• Grote codebases maken het traag. Het advies is om grote projecten via Claude Code te koppelen.
• Een design system is zo goed als de bron. Lever je rommelige bestanden aan, dan krijg je een rommelig design system.

Daarnaast geldt wat voor elke AI-tool geldt: Claude maakt keuzes die er goed uitzien, maar daarmee is een pagina nog niet overtuigend of vindbaar. Teksten, opbouw en SEO blijven jouw verantwoordelijkheid. Lees de blog over AI SEO als je wilt weten waar Google en AI-zoekmachines op letten.

De volgende stap

Claude Design maakt ontwerpen toegankelijk voor iedereen die kan beschrijven wat hij wil. Dat is precies de valkuil: wie niets vastlegt krijgt het gemiddelde. Begin daarom met je brandbook, maak een design system met je eigen kleuren en foto's en schrijf ontwerpregels op. Dan wordt Claude Design een ontwerper die jouw stijl volgt.

Wil je je website van ontwerp tot livegang zelf maken? In de training Website bouwen met Claude maak je eerst je brandbook en je marketingplan, ontwerp je je pagina's in Claude Design en bouw je ze met de desktop-app van Claude. Je krijgt een eigen beheersysteem en een uur persoonlijke sessie voordat je live gaat. De training kost € 495 excl. btw.

Twijfel je nog of je zelf wilt bouwen? Lees dan zelf een website maken of vergelijk de mogelijkheden op website maken met AI.