Wat is Claude Design? Van ontwerp naar echte site, met een voor en na.

Claude Design is een onderdeel van Claude, van Anthropic. Je maakt er een ontwerp mee door te praten. Jij beschrijft wat je wilt, Claude zet een eerste versie op een canvas, en jij schaaft bij. Ik maak er het eerste ontwerp van een site mee. En na de bouw schaaf ik het ontwerp ermee bij, als dat nodig is.

Een designer ben ik niet. Ik ben vakman: mijn dagen gaan op aan gietvloeren, mijn avonden aan bouwen. Mijn sites maak ik met Claude Code. Claude Design pak ik erbij als het ontwerp nog beter kan. Meer over mij en mijn werk staat op mijn over-pagina.

Wat is Claude Design, in gewone taal

Claude Design maakt ontwerpen. Geen losse plaatjes, maar de vorm van iets wat je wilt maken: een pagina van je website, een scherm van een app, een one-pager voor je zaak of een presentatie. Het kan ook een prototype worden. Dat is een proefversie waar je al doorheen klikt, terwijl er nog niets gebouwd is.

Zie het als de tekening vóór de verbouwing. Op tekening verzet je een muur in een minuut. Ligt het beton er eenmaal, dan niet meer. Met een ontwerp is het net zo: schuiven is goedkoop zolang het nog een ontwerp is.

Anthropic bracht Claude Design uit op 17 april 2026, als losse plek op claude.ai/design. Sinds 16 september 2026 zit het in elk gesprek met Claude. Je hoeft dus niets apart te openen: je vraagt gewoon om een ontwerp. Op die dag begon Anthropic ook chat en Cowork samen te voegen tot één Claude. Eerst bij Pro en Max, daarna bij de rest. Wat Cowork doet, lees je bij wat is Claude Cowork.

Hoe werkt Claude Design?

In vier stappen. Elke stap brengt hooguit één nieuw woord mee, en dat leg ik meteen uit.

1. 01

   Je beschrijft wat je wilt

   In gewone taal. Je mag meegeven wat je al hebt: tekst, foto's, een Word-, Excel- of PowerPoint-bestand, of de code van je site.

   Nieuw woord design system: je huisstijl op een rij: kleuren, letters, knoppen. Zit die erin, dan oogt het ontwerp als jouw zaak en niet als een sjabloon.

2. 02

   Claude zet een eerste versie neer

   Je krijgt meteen iets te zien, niet alleen een lap tekst. Reken er wel op dat het een begin is, geen eindstuk.

   Nieuw woord canvas: het werkvlak waarop je ontwerp staat. Een tekentafel op je scherm.

3. 03

   Jij schaaft bij

   Op drie manieren. Je zegt in de chat wat anders moet. Je zet een opmerking op de plek zelf. Of je past het zelf aan, bijvoorbeeld met schuifjes.

4. 04

   Je neemt het mee of geeft het door

   Bewaren kan als PDF, PowerPoint, losse HTML of zip-bestand. Doorsturen kan onder meer naar Canva, Adobe, Miro en Vercel. Moet het een echte site worden, dan gaat het naar Claude Code.

   Nieuw woord handoff: het overdragen van je ontwerp aan Claude Code, dat er werkende bestanden van maakt.

Claude Design app, in je chat of in Claude Code

Een aparte app hoef je niet te zoeken. Er zijn drie ingangen:

• Elk gesprek met Claude. Vraag om een ontwerp, of open de Artifacts-tab en kies Design.
• Los, op claude.ai/design. Die plek bestaat nog. Je oudere projecten vind je in de Design-tab, onderin de zijbalk.
• Claude Code, met /design. Dan begin je in de map van je eigen site.

Voor die laatste heb je Claude Code versie 2.1.265 of nieuwer nodig. Welke versie je hebt, zie je als je claude --version in de Terminal typt. Staat je site in een map mijn-site op je bureaublad, dan gaat het zo:

$ cd ~/Desktop/mijn-site$ claude> /design een rustiger ontwerp voor de bovenkant van mijn homepage

Eerlijk: deze regels zijn nagelopen in de handleiding van Anthropic. Ik heb ze niet in deze vorm zelf uitgevoerd. Wat er daarna op je scherm verschijnt, laat ik dus niet zien. Liever niets dan een verzonnen scherm.

Zo gebruik ik Claude Design: vóór en na de bouw

Anthropic ziet Claude Design vooral als iets voor het begin: ideeën uitproberen voordat iemand gaat bouwen, en daarna door naar Claude Code. Ik gebruik het op allebei de plekken: aan het begin, en na de bouw. Orbis is mijn eigen gereedschap om sites te verbouwen. In mijn eigen woorden:

“Als ik een website heb gebouwd uit Orbis, dan ga ik met Claude Design fine-tunen om zo tot een beter design te komen indien nodig.”

Fine-tunen is bijschaven: kleine dingen beter maken, zoals een kop die te druk oogt of blokken die te dicht op elkaar staan. En let op die laatste twee woorden, indien nodig. Staat het ontwerp na de bouw al goed, dan sla ik deze stap over.

Je hoeft daarbij niet bij nul te beginnen. Je kunt Claude Design je codebase aanwijzen: de map met alle code van je site. Of je pakt met de web-capture onderdelen rechtstreeks van je eigen website. Dan lijkt het ontwerp op je echte site. Ben je tevreden, dan geef je het terug aan Claude Code, en dat verwerkt het in de site.

Claude Design voorbeelden: een homepage voor en na

Het duidelijkste voorbeeld is de site van Rik Peels, een performance coach die met bloedwaarden werkt. Hij is een echte klant, en hij vond het goed dat ik dit laat zien. Hoe zijn hele site live kwam, met eigen domein en mail, lees je in de klantcase van Rik.

Zijn site stond er al. Op 23 juli 2026 bouwde Claude Code in ruim twee uur een eerste versie van elf pagina’s. Terwijl dat liep, schreef ik in Cowork:

“nu wil ik deze na het bouwen gaan finetunen”

Die avond stond de eerste versie op een testadres. Hij deed het, maar hij voelde koud en statisch. Niet als de site van een premium performance coach. De volgende ochtend ontwierp ik zijn homepage opnieuw, in Claude Design.

Daar werd het één doorlopende homepage van dertien blokken, met vaste kleuren (warm zwart en goud), twee lettertypes en hoe elk blok beweegt. Om kwart over negen downloadde ik het ontwerp als zip-bestand. Dat zette ik in Cowork, dat op dezelfde motor draait als Claude Code. Twintig minuten later was de homepage nagebouwd. Daarna gold één regel voor de rest van de site:

“homepage is key for every page is that simple”

Oftewel: de homepage is de maat voor elke pagina. Binnen 24 minuten hadden de negen andere pagina’s dezelfde stijl.

Voor

Na

Zie je het verschil? Het ontwerp gaf de richting: zwart met goud, de kop links, de foto rechts, één knop die opvalt. Bij het bouwen kwamen de echte foto, Riks eigen woorden en de nieuwe stijl voor de rest van de site erbij. Rik zelf kun je vinden op rperformancecoach.nl.

Eerlijk is eerlijk: de meeste teksten in het ontwerp had ik zelf meegegeven, uit de eerste versie. Wat Claude Design toevoegde, was de vorm. De kleuren, de letters, de opbouw, de iconen en de beweging. En de vier punten onder de bovenkant werden een eigen blok: de vier pijlers van Riks aanpak.

Alle blokken van Riks homepage: ontwerp en echte site

Hieronder elk blok van zijn homepage, van boven naar beneden. Links het ontwerp uit Claude Design, rechts hoe het nu op zijn site staat. Twee blokken kwamen er later bij: één uit een derde ronde in Claude Design, één tijdens het bouwen. Cijfers die ik niet zelf heb nagemeten, de woorden van een klant van Rik en zijn contactgegevens laat ik vervaagd. Tik een scherm aan om het groot te zien.

1. 01 De bovenkant

   

   

   De opbouw, de gouden gloed en het kaartje "12 weken" bleven. Het lege fotokader kreeg een echte foto van Rik, en de kop staat sinds 19 augustus in Riks eigen woorden.

2. + Het meetprobleem

   Niet in het ontwerp

   

   Kwam erbij uit een derde ronde in Claude Design, op 25 juli: wat er meestal misgaat, naast hoe Rik het oplost.

3. 02 Vier pijlers

   

   

   Bijna gelijk aan het ontwerp. De staafjes werden 3D en één zinnetje werd korter.

4. 03 De cijfers

   

   

   De vorm bleef: vier grote cijfers, die nu optellen als je scrolt. Het vierde cijfer is later vervangen, omdat Rik geen plafond wilde. Beide versies laat ik vervaagd: die heb ik niet zelf nagemeten.

5. 04 Het aanbod

   

   

   Dezelfde drie kaarten. Er kwam een blok "Aanvullend" bij, ook uit de derde ronde. In dat ontwerp stond één prijs verkeerd; die is op de site gecorrigeerd.

6. 05 Welk traject past bij jou?

   

   

   Gelijk, op één aanpassing na voor de toegankelijkheid.

7. 06 Zo werkt het

   

   

   In het ontwerp liep een hartslaglijn langs de vier stappen. Die is eerst precies nagebouwd. Drie uur later vond ik een beeld bij elke stap sterker. In twee andere blokken zit de hartslaglijn nog wel.

8. 07 Herken je dit?

   

   

   Gelijk aan het ontwerp, tot de hartslaglijn van week 0 naar week 12 toe.

9. 08 De belofte

   

   

   Zelfde grote kop. Waar het ontwerp een lege beeldplek had, staat nu een echte foto van Rik.

10. 09 Bewijs

    

    

    De opbouw bleef. De kop en de uitleg zijn later duidelijker gemaakt, en op Riks verzoek kwam er een garantie bij. Sterren, klantaantallen en de check-in van een klant laat ik vervaagd.

11. + In de gym

    Niet in het ontwerp

    

    Kwam erbij tijdens het bouwen: een rij foto's om doorheen te vegen.

12. 10 Over Rik

    

    

    Zelfde tekst. In plaats van een portret stelt Rik zich nu voor in een korte video.

13. 11 Vragen

    

    

    Dezelfde vijf vragen. Eén antwoord is herschreven na Riks wensenlijst.

14. 12 De afsluiter

    

    

    Gelijk. De knop opent nu WhatsApp, omdat Rik online werkt.

15. 13 De onderkant

    

    

    Eerst precies het ontwerp. Een dag later anders ingedeeld, omdat de rij links te lang werd. Telefoon en KvK laat ik vervaagd.

Tel je het op: vijf blokken bleven zo goed als gelijk. Zeven zijn aangepast, met echte foto’s, een video, Riks eigen woorden of een andere indeling. Eén blok is vervangen, en twee kwamen erbij. Het ontwerp gaf de vorm. De echte foto’s, de video en de eigen woorden kwamen van Rik.

Van eerste bouw tot live: de tijdlijn

Wat er misging bij Rik

Vijf dingen, en wat ik ervan leerde:

1. Claude kende Claude Design nog niet. Toen ik vroeg hoe ik het moest aanpakken, zei Claude dat er geen apart Claude Design bestond. Pas na mijn schermafbeelding zocht het op: “dat is een echt, nieuw product”. Weet je AI iets niet, laat dan zien waar je het over hebt.
2. Het ontwerp vulde zelf cijfers in. Sterren, aantallen klanten, plekken die nog vrij waren. In de opdrachten die Claude voor me klaarzette, stond juist: niets verzinnen. Lees een ontwerp na zoals je een offerte naleest: elk getal moet ergens vandaan komen.
3. Nagebouwd is niet meteen gelijk. Het blok “Zo werkt het” week af van het ontwerp. Daarna liet ik Cowork ontwerp en site blok voor blok naast elkaar leggen, tot de iconen toe.
4. De verkeerde zip. Bij de derde ronde pakte Cowork eerst de oude zip van de ronde ervoor. Bijna dezelfde naam, ander bestand. Geef elke download een eigen naam.
5. Een verkeerde prijs. In de derde ronde stond bij één abonnement een prijs die niet klopte. Op de site staat de goede. Ook hier: nalezen.

En de snelheid? Op 24 juli 2026, vóór het ontwerp, haalde de eerste versie in Lighthouse 100 op snelheid, op de telefoon en op de computer. Op 25 juli 2026, met het nieuwe ontwerp, was dat op de telefoon nog steeds 100. Daarna kwamen er onder meer echte foto’s en een video bij. Op 2 oktober 2026 haalt de homepage in Lighthouse 98 op de telefoon en 100 op de computer, met 100 voor toegankelijkheid. Meten doe ik dus niet één keer, maar na elke grote ronde opnieuw.

Of een ronde schaven echt iets oplevert, zie je pas als je vóór en na naast elkaar legt. Maak daarom eerst een schermafbeelding van je pagina zoals hij nu is. Dan vergelijk je straks eerlijk, en zie je ook wanneer het oude ontwerp beter was. Hoe ik een site vanaf de eerste avond opbouw, lees je bij website maken met AI.

Wat maak je met Claude Design, en wat niet?

Eerlijk antwoord: het is gereedschap om te ontwerpen. Geen fotostudio, en geen bouwer.

Dat laatste is het grootste verschil. Claude Design maakt het ontwerp. Claude Code maakt er een werkende site van, met echte bestanden op je computer. Hoe dat gaat, lees je in wat is Claude Code. Weet ook dat Claude Design nog een beta is: een versie die nog niet af is. Opmerkingen kunnen bijvoorbeeld nog verdwijnen.

Claude Design kosten: wat betaal je?

Geen los bedrag. Claude Design zit in je Claude-abonnement en telt mee in dezelfde gebruikslimiet als de rest van Claude. Er is geen apart tegoed voor ontwerpen.

Claude Design werkt ook met het gratis abonnement: zo staat het op de prijspagina van Anthropic (9 oktober 2026). Wil je meer ruimte, dan betaal je voor Pro: 20 dollar per maand zonder btw. Wat elk abonnement kost en geeft, staat bij Claude Pro of Max.

Liever dat ik het voor je doe? Ik bouw je site en schaaf het ontwerp bij waar dat nodig is. Zo werkt website laten maken bij mij. Wil je eerst zelf verder lezen? Dan staat alle Claude Code-uitleg op één plek.