---
id: claude-design
lang: nl
title: "Claude Design"
seoTitle: "Wat is Claude Design? Een praktische gids"
description: "Claude Design is Anthropic's tool om prototypes, slides en one-pagers te maken door met Claude te praten: beschrijf, zie het op een canvas, verfijn, exporteer."
part: gevorderd
partTitle: "Gevorderd"
partOrder: 5
order: 2
level: Advanced
durationMinutes: 10
outcome: "Begrijp wat Claude Design is, hoe de beschrijf-en-verfijn-loop werkt, en maak van een ruw idee een layout die je kan bekijken, verfijnen en exporteren."
summary: "Claude Design maakt van een beschreven idee slides, prototypes en one-pagers op een canvas. Beschrijf het, zie het verschijnen, verfijn, exporteer."
draft: false
updated: "2026-07-26"
keywords:
- Claude Design
- wat is Claude Design
- AI design tool
- AI prototypes
- AI slides
- ontwerpen met Claude
- Anthropic Labs
furtherReading:
- title: "Introducing Claude Design by Anthropic Labs"
url: "https://www.anthropic.com/news/claude-design-anthropic-labs"
note: "De lanceringspost: wat het is en waarom ze het bouwden."
- title: "Get started with Claude Design (Help)"
url: "https://support.claude.com/en/articles/14604416-get-started-with-claude-design"
note: "De volledige how-to: maken, verfijnen, exporteren, en de grenzen."
- title: "Claude Design (productpagina)"
url: "https://claude.com/product/design"
note: "Het overzicht, de plannen en waar het past."
- title: "Set up your design system in Claude Design (Help)"
url: "https://support.claude.com/en/articles/14604397-set-up-your-design-system-in-claude-design"
note: "Voor design leads: laat alles bij je merk passen."
quiz:
intro: "Vijf vragen over wat Claude Design is en hoe je het goed gebruikt. Alle vijf juist en je bent één les van het einde van de cursus."
passScore: 5
questions:
- q: "Wat maakt Claude Design eigenlijk?"
options:
- "Een geschreven beschrijving van een ontwerp dat iemand anders bouwt"
- "Een werkend ontwerp op een canvas dat je kan klikken, bewerken en exporteren"
- "Één platte afbeelding die je niet kan veranderen"
answer: 1
explain: "Het bouwt een levend ontwerp op een canvas naast de chat. Je verfijnt het en exporteert het, in plaats van er alleen over te lezen."
- q: "Hoe krijg je je eerste ontwerp in Claude Design?"
options:
- "Je tekent het zelf en Claude poetst het op"
- "Je beschrijft in de chat wat je wil, en Claude genereert het op de canvas"
- "Je moet eerst een afgewerkt bestand uploaden"
answer: 1
explain: "Je beschrijft het doel in gewone taal. Claude zet een eerste versie op de canvas, en het echte werk is het verfijnen daarna."
- q: "Wat is de snelste manier om één kleine, specifieke wijziging te doen, zoals de padding van deze knop?"
options:
- "De hele prompt van nul herschrijven"
- "Op de plek klikken en een inline comment achterlaten"
- "Het exporteren en in een andere app fixen"
answer: 1
explain: "Inline comments mikken op één element. Gebruik chat voor grote structurele wijzigingen, comments voor precieze tweaks, en directe edits voor snelle visuele duwtjes."
- q: "Waarom zou je een design system opzetten in Claude Design?"
options:
- "Zodat elk ontwerp automatisch de kleuren, type en componenten van je merk gebruikt"
- "Zodat Claude je minder aanrekent per ontwerp"
- "Het is verplicht voor je iets kan typen"
answer: 0
explain: "Een design system betekent dat de output standaard bij je merk past, zodat je niet op elk project fonts en kleuren zit te fixen."
- q: "Als een ontwerp klaar is om echte software te worden, wat kan je dan doen?"
options:
- "Niets, je begint met de hand opnieuw in een code-tool"
- "Het doorgeven aan Claude Code, dat verdergaat vanuit je werk en niet vanuit een screenshot"
- "Het alleen exporteren als een platte PDF"
answer: 1
explain: "Claude Design geeft door aan Claude Code (uit les 5.1), dat bouwt op het echte ontwerp in plaats van te gokken vanuit een plaatje."
pass:
badge: "Alles juist"
title: "Je kan nu ontwerpen door te praten."
body: "Alles goed. Je weet wat Claude Design is, hoe de beschrijf-en-verfijn-loop werkt, en wanneer je ernaar grijpt in plaats van een snelle artifact of Claude Code."
retry: "Check de gemarkeerde antwoorden en probeer opnieuw. Een tweede lezing laat deze vallen."
---
> **Niveau:** Advanced · **Leestijd:** ~10 min
>
> **Wat je hierna kan:** uitleggen wat Claude Design is, de beschrijf-en-verfijn-loop begrijpen, en van een ruw idee een layout maken die je kan bekijken, verfijnen en exporteren.
In les 2.4 leerde je [artifacts](/glossary#artifact) 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](/glossary#cowork) en [Claude Code](/glossary#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](/glossary#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](/glossary#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.
## Probeer het
Tien minuten, als je op een betaald plan zit. Zo niet, lees het gewoon als een doorloop, zodat de vorm vertrouwd aanvoelt.
1. Open Claude Design op **claude.ai/design** of vanuit de desktop-sidebar, en start een nieuw project.
2. Beschrijf iets kleins en echt, bijvoorbeeld: *"Bouw een one-page uitnodiging voor een team-offsite. Een vette titel, de datum en plaats, een korte agenda, en een grote RSVP-knop."* Laat Claude het genereren.
3. Verfijn het op drie manieren, zodat je ze alle drie eens voelt: verander de hele sfeer via **chat** (*"maak het warmer en speelser"*), fix één element met een **inline comment** (klik de knop aan, *"maak deze groter"*), en **sleep** een blok naar een nieuwe plek op de canvas.
4. Vraag Claude om *"twee alternatieve layouts te tonen."* Vergelijk ze. Voel hoeveel sneller dit gaat dan het in je hoofd uit te dokteren.
5. Klik op **Export** en stuur het naar buiten als een PDF of een PPTX.
Het gaat niet om die uitnodiging. Het gaat om het ritme voelen: beschrijf, zie het verschijnen, en stuur het bij met woorden en klikken tot het klopt. Eens dat ritme vanzelf gaat, stopt een lege slide met eng te zijn.
*(Algemene oefening. Rol- en sectorversies komen zodra accounts er zijn.)*
## Kernbegrippen
[Claude Design](/glossary#claude-design), [Artifact](/glossary#artifact), [Claude Code](/glossary#claude-code), [Cowork](/glossary#cowork), [Context](/glossary#context)