Claude Design

In les 2.4 leerde je artifacts kennen: vraag Claude om een grafiek, een one-page site, of een klein tooltje, en hij bouwt het ding in een zijpaneel in plaats van het te beschrijven. Claude Design is datzelfde idee, maar dan volwassen geworden. Een aparte ruimte om dingen te maken die je écht kan zien: prototypes, slides, one-pagers, dashboards, landingspagina's. Jij praat, en een echt ontwerp krijgt vorm op een canvas naast de chat.

Deze les is voor iedereen die ooit naar een lege slide heeft zitten staren, met een layout heeft geworsteld in een tool die voor designers is gemaakt, of een designer briefde en dan drie dagen op een eerste versie wachtte. Je hoeft zelf geen designer te zijn om hem te gebruiken. Dat is nu net het punt.

Laatst gecheckt: juli 2026. Claude Design lanceerde als een research preview van Anthropic Labs en zit nu in beta. Het beweegt snel, dus prijzen, commando's en features kunnen verschoven zijn. Zie de details hier als een momentopname en check de gelinkte docs voor wat nu klopt.

Wat Claude Design eigenlijk is

Met Claude Design ontwerp je door gewoon een gesprek te voeren. Jij zegt wat je wil, en Claude genereert een werkende versie op een canvas. Vanaf daar verfijn je: door te chatten, door comments achter te laten, of door dingen zelf te verschuiven, tot het klopt.

Twee dingen tillen het boven een chat die plaatjes uitspuwt:

• Het heeft twee panelen. Een chat links, waar je praat, en een canvas rechts, waar het ontwerp verschijnt. Je ziet het opgebouwd worden, en je past het ter plekke aan. Minder een tekening bestellen, meer naast een designer zitten en naar het scherm wijzen.
• De output is echt, geen plat plaatje. Wat op de canvas landt is een levend ontwerp dat je kan doorklikken en testen: een klikbaar prototype, niet een foto ervan. Ben je klaar, dan exporteer je het, of geef je het aan een developer om het echt te bouwen.

Onder de motorkap draait Claude Opus 4.7, het sterkste vision model van Anthropic. Daarom kan hij naar een screenshot kijken van een app die jij mooi vindt en meteen iets in dezelfde geest bouwen.

Waarvoor het is, en waarvoor niet

Claude Design mikt op dat moment tussen een idee en een afgewerkt ding, precies waar de meesten van ons vastlopen. Waar hij in uitblinkt:

• Prototypes. Een klikbare versie van een app-scherm, een onboarding flow, een intern tooltje: echt genoeg om aan mensen te tonen en feedback op te halen nog voor iemand code schrijft.
• Slides en one-pagers. Een deck of één scherpe pagina, opgebouwd vanuit een briefing in plaats van pixel per pixel bevochten.
• Webpagina's en dashboards. Een landingspagina, een prijzenpagina, een dashboard-mockup met de grafieken en filters ongeveer waar ze horen.

Hij is geen vervanging voor een professionele designer op belangrijk, merk-bepalend werk, en hij probeert ook geen volledige design-tool te zijn met elke knop die een specialist wil. Zie hem als de kortste weg van "ik heb een ruw idee" naar "kijk, hier staat iets waar we samen naar kunnen kijken en op reageren." Die eerste versie, in minuten, daar zit de waarde. Het polijsten en de smaak, dat blijft van jou.

De vuistregel: grijp naar Claude Design wanneer een versie zien beter werkt dan er een beschrijven. Een plaatje waar de hele kamer naar kan wijzen, sluit meer discussies af dan een paragraaf ooit zal doen.

Waar je het vindt, en wat het kost

Claude Design zit op de plannen Pro, Max, Team en Enterprise (bij Enterprise staat het standaard uit, dus daar zet een admin het aan). Op het Free-plan vind je het niet. Het draait op het web via claude.ai/design en vanuit de sidebar in de Claude desktop-app. Een aparte app installeren hoeft niet.

Over de kosten is er goed en nuchter nieuws: er valt niks nieuws bij te houden. Claude Design put uit dezelfde gebruikspool als de rest van Claude, dezelfde die je al deelt met chat, Cowork en Claude Code. Grote projecten met grote codebases of veel verfijnrondes vreten meer, een snelle one-pager amper iets. Loop je tegen je limiet aan, dan pauzeert Design tot de limiet reset, net als al de rest. En zoals altijd staan de actuele cijfers op de gelinkte pagina's.

De kernlus: beschrijven, genereren, verfijnen

De hele tool draait op één simpel ritme, en er goed in worden komt vooral neer op goed worden in de tweede helft.

Eerst zeg je wat je wil. Designtaal heb je niet nodig. Een sterke briefing noemt vier dingen: het doel (wat je bouwt), de layout (ruwweg hoe het geschikt staat), de content (welke info erop komt), en het publiek (voor wie het is). Laat je iets weg, dan vraagt Claude er vanzelf naar. Een goede openingszin ziet er zo uit:

Bouw een landingspagina voor ons nieuwe API-product. Bovenaan een hero-sectie met een korte headline en een sign-up-knop, dan een rij van drie feature cards, dan een eenvoudige prijstabel met drie tiers. Publiek is developers, dus hou het clean en zet er één codevoorbeeld bij.

Dan zet Claude een eerste versie op de canvas. Zie het als een vertrekpunt, nooit als het afgewerkte stuk. De magie zit niet in die eerste versie, maar in hoe snel je hem kan veranderen.

Drie manieren om te verfijnen

Je stuurt het ontwerp op drie manieren bij, en de juiste kiezen voor de juiste wijziging, dat is de kernvaardigheid.

• Chat, voor de grote bewegingen. Structurele wijzigingen, hele nieuwe secties, alles wat wat uitleg vraagt. "Herschik het dashboard zodat de metrics bovenaan staan en de grafiek eronder." "Toon me twee of drie alternatieve layouts." Je kan Claude zelfs vragen om het ontwerp na te kijken op toegankelijkheid, of om uit te leggen waarom hij voor een bepaalde layout koos.
• Inline comments, voor de precieze tweaks. Klik een plek op de canvas aan en laat een notitie achter die aan dat ene element hangt. "Maak de padding van deze knop groter." "Maak hier een dropdown van in plaats van radio buttons." Veel sneller dan in een zin uitleggen waar precies.
• Directe edits, voor de snelle visuele duwtjes. Sleep, verschaal en lijn dingen uit op de canvas met je muis, wanneer je gewoon een blok een tikje wil verschuiven.

De gewoonte om aan te kweken: chat voor structuur, comments voor één element, directe edits voor een duwtje. En wees concreet. "Dit ziet er niet goed uit" daar kan Claude weinig mee. "Maak de tussenruimte tussen de formuliervelden strakker" geeft hem iets om beet te pakken. Wil je een gedurfde nieuwe richting proberen zonder te verliezen wat je al hebt? Zeg het gewoon: "Bewaar wat we hebben en probeer een compleet andere aanpak." Je huidige versie blijft staan, dus verkennen kost je niks.

Voed het met context, en met je merk

Alles wat je in Part 2 over context leerde, betaalt zich hier terug. Hoe meer je Claude geeft om van te vertrekken, hoe dichter die eerste versie landt.

• Toon voorbeelden. Upload een screenshot van de pagina van een concurrent, een wireframe, een deck waarvan je de stijl mooi vindt, en zeg "maak het zoals dit." Een vision model is heel sterk in het vangen van de sfeer van een referentie.
• Richt het op een codebase. Link een code repository, en Claude leest je bestaande componenten en styling, zodat een prototype dichter komt bij iets dat je engineers echt zouden kunnen shippen.

De grootste troef voor een team is echter het design system. Zet er één keer een op (een klus voor een design lead), en elk project dat je start gebruikt automatisch de kleuren, type en componenten van je merk. Geen fonts meer zitten fixen op elke versie: de output ziet er vanaf de eerste generatie uit als jouw bedrijf. Op Team en Enterprise kan een admin het systeem zelfs vastzetten, zodat het werk van iedereen on-brand blijft. Dat is het verschil tussen een leuk speeltje en iets waar een heel team op kan bouwen.

Als het klaar is: exporteren en doorgeven

Een ontwerp is pas nuttig als het van de canvas af raakt. Ben je tevreden, dan biedt de knop Export je volop uitgangen: download als PDF, exporteer als PPTX om in een deck te droppen, stuur het naar Canva of andere tools die je al gebruikt, of bewaar het als een losse webpagina.

De krachtigste uitgang bindt heel dit deel samen. Is een ontwerp klaar om echte, werkende software te worden, dan kan je het doorgeven aan Claude Code, de terminal-coding-agent uit les 5.1. En dit is nu net het stuk dat telt: Claude Code gaat verder vanuit je échte ontwerp, niet vanuit een screenshot ervan, dus het bouwen start vanuit echte structuur in plaats van een gok. Ontwerp het ding door te praten, en laat de coding agent het daarna echt bouwen. Zo werken de twee lessen van Part 5 samen als één pijplijn.

Waar het past: artifact, Claude Design of Claude Code

Je hebt nu drie manieren om Claude iets visueels te laten bouwen, en samen klimmen ze een ladder van ambitie op.

Grijp naar een artifact wanneer je één snelle visual wil binnen een gewone chat en je er verder niet over gaat pielen. Grijp naar Claude Design wanneer de visual het werk zelf is: een prototype, een deck, een pagina die je op een canvas verfijnt en deelt. Grijp naar Claude Code wanneer het ontwerp echte, draaiende software moet worden. En onthou dat ze aan elkaar hangen: Claude Design geeft recht door aan Claude Code, dus de ladder is één vloeiende klim, geen drie losse tools.

Aan het stuur blijven

De meeste veiligheidsgewoontes uit de rest van de cursus gelden hier nog, al is de toon wat lichter, want Design maakt vooral nieuwe dingen in plaats van je bestaande bestanden te veranderen.

• Let op wat je uploadt. De privacyregel uit les 1.4 gaat hier niet op vakantie. Een screenshot of een codebase die je linkt is nog steeds materiaal dat je uit handen geeft, dus hou echt gevoelige dingen buiten een preview-product.
• Jij bent eigenaar van de smaak. Claude geeft je een snelle, competente versie. Of ze goed is, on-brand, helder en juist voor het publiek: dat blijft jouw oordeel. De tool tilt de bodem op, hij vervangt je oordeel niet.
• Onthou dat het nog vroeg is. Als preview heeft het ruwe kantjes: inline comments kunnen af en toe verdwijnen, heel grote codebases kunnen traag worden, en het werkt alleen op web en desktop. Geen van die dingen is een dealbreaker, maar reken op een hobbel hier en daar, en check de docs als iets raar doet.