Ja, je kunt een website maken met Claude Design, en met Opus 5.5 is de eerste versie vaak al bruikbaar. Wij ontwierpen er de homepage van Het AI Lokaal opnieuw mee, vanaf één screenshot van een voorbeeldsite. Het resultaat hangt vooral af van wat je Claude vooraf geeft: een stijlvoorbeeld, je huisstijl en een briefing zonder gaten.

👉 Onderaan deze pagina kan je de volledige gids vinden, met onze prompt voor Claude Design.

Wat is Claude Design en wat verandert er met Opus 5.5?

Claude Design is de ontwerpomgeving van Anthropic waarin je visueel werk maakt door te praten in plaats van te tekenen. Je beschrijft wat je wilt, Claude bouwt het als echte code (HTML en CSS) en je ziet het direct op een canvas. Denk aan websites, landingspagina's, one-pagers, presentaties en prototypes. Sinds 22 september 2026 kun je er Opus 5.5 kiezen, het nieuwe model van Anthropic.

Wat testers vooral opvalt: Opus 5.5 is sterker in beweging en animaties, en hij controleert zijn eigen werk. Hij maakt screenshots van zijn ontwerp en ziet zo zelf wanneer iets op mobiel scheef staat. Een zwak punt noemen testers ook: het model maakt makkelijk iets moois dat niet bij je merk past. Het werkt dus pas echt goed als je je eigen stijl meegeeft. Wat Claude Design allemaal kan maken, lees je in onze eerdere gids Wat kun je maken met Claude Design?.

Hoe begin je een website in Claude Design?

Je begint niet met een prompt, maar met de stijl. Upload eerst een screenshot van een website die je mooi vindt, en vertel precies wat je ervan wilt overnemen: de stijl, de opbouw, de bewegingen, de effecten. Stuur daarna je brandboek en je logo's mee, zodat Claude je eigen kleuren en letters gebruikt in plaats van die van het voorbeeld.

Voor onze homepage namen we de homepage van Asana als voorbeeld. We hebben geen band met Asana; het was puur een voorbeeld van een rustige, strakke stijl met bewegende elementen. In de briefing schreven we wat we wilden overnemen: de stijl, de bewegingen en de effecten. Wees daarin net zo precies over wat je níét wilt, zoals de kleuren, teksten en het logo van het voorbeeld.

Een belangrijke tip hierbij: maak een voorbeeld nooit 1-op-1 na. Het ontwerp van een ander is beschermd. Gebruik het als richting voor stijl en gevoel, en laat Claude er iets eigens van maken met jouw inhoud en huisstijl.

Welke instelling geeft de beste output?

De beste output krijg je met Opus 5.5 op de hoogste stand, max. Die instelling vergeet je snel, en dan is je ontwerp merkbaar minder. Controleer dus vóór je eerste bericht welk model er aan staat en op welke stand.

Opus 5.5 kent vijf standen: low, medium, high, xhigh en max. Anthropic zet hem standaard op medium en raadt de hoogste standen aan voor werk waar kwaliteit het verschil maakt. Een homepage is precies zo'n klus: je bouwt hem één keer en je wilt dat hij in één keer goed staat. Max kost meer tijd en meer van je gebruikslimiet, maar in onze test gaf het de beste output.

Nog een tip uit de praktijk: schrijf je briefing niet in Claude Design zelf. Doe het voorwerk in een aparte chat met Claude. Laat daar het voorbeeld analyseren, je doelgroep en inhoud op een rij zetten en er een volledige prompt van maken. Die plak je daarna in Claude Design. Zo gaat je gebruik in Claude Design naar het ontwerp, niet naar het uitzoeken.

Wat gaat er mis als je te weinig context geeft?

Geef je te weinig context, dan vult Claude de gaten zelf in, en daar ontstaan de fouten. Vertel dus alles wat erin moet: voor wie de site is, welke secties je wilt, welke knoppen, welke teksten en welke sfeer. Wat je niet noemt, verzint Claude, of hij laat er een lege plek voor achter.

Dat laatste zagen we zelf. In onze eerste versie stond onder de hero een blok met "170+ MKB-bedrijven werken al slimmer met Het AI Lokaal" en daarnaast zes grijze vakjes met de tekst "Klantlogo 1" tot en met "Klantlogo 6". Claude wist niet welke klanten hij mocht tonen, dus zette hij er netjes een placeholder neer. Dat is beter dan verzonnen logo's, maar het laat zien waar je briefing gaten had.

Onze homepage uit Claude Design, met placeholders waar de briefing iets open liet.

Hoe pas je het ontwerp aan zonder opnieuw te beginnen?

Je past het ontwerp aan met Edit, rechtsboven in Claude Design. Dan klik je een onderdeel aan en pas je het zelf aan, zonder een nieuw bericht aan Claude. Links zie je de lagen van je pagina (header, secties, groepen) en daaronder de eigenschappen van wat je hebt geselecteerd.

Onder Appearance stel je de achtergrond, de afgeronde hoeken en de doorzichtigheid in. Onder Sizing kies je of een blok zijn inhoud volgt (Hug), een vaste maat heeft (Fixed) of de ruimte vult (Fill). Daarnaast zijn er Position, Padding, Margin en Border, en met Export selection haal je één onderdeel los uit je ontwerp. Bovenaan wissel je tussen de tabbladen Simple, Pro, Code en Tweaks. Klaar met aanpassen? Dan klik je op Save, of op Discard om terug te gaan.

Edit in Claude Design: links de lagen en de eigenschappen, rechts het ontwerp.

Voor grote wijzigingen blijft de chat handiger: "maak de hero rustiger" of "voeg een sectie met prijzen toe". Voor kleine dingen, zoals een marge of een kleur, is Edit sneller. Met Comment zet je een opmerking op een plek in het ontwerp, en die pakt Claude daarna op.

Hoe exporteer en deel je je ontwerp?

Je exporteert en deelt je ontwerp via Share, rechtsboven. Bovenaan kies je wie het mag zien: bijvoorbeeld je workspace, met Copy link om de link te delen. Zolang je niets kiest, zie alleen jij het ontwerp. Met Publish as artifact maak je er een openbare pagina van.

Delen en exporteren in Claude Design.

Onder Export staan de formaten:

• PDF: direct, of eerst opnieuw opgemaakt door Claude.

• Project HTML: als zip of als los bestand, handig voor je developer of je websitebouwer.

• PowerPoint: met tekst en vormen die je nog kunt bewerken.

• More formats and apps: de overige formaten en koppelingen.

Voor een website is Project HTML de logische keuze. Daarmee heb je een werkend ontwerp dat je developer kan overnemen, of dat je als basis gebruikt in je eigen websitebouwer.

De complete werkwijze, met onze prompt om het voorwerk in een aparte Claude-chat te doen, staat in de gids Hoe schrijf je een goede Claude Design-prompt?. Wil je dit soort tools met je hele team leren gebruiken? Dat doen we in de GenAI Academy.