Claude Design: van idee naar werkend prototype in minuten
AI / GenAI·5 min·28 juli 2026·Ontwerpen met Claude — Deel 1 van 3

Claude Design: van idee naar werkend prototype in minuten

Je hebt een idee voor een pagina in je hoofd, maar tussen dat idee en iets wat je kunt laten zien zit meestal een hele middag gedoe. Je opent Figma, je zoekt een template, je sleept kaders recht, en aan het eind heb je een plaatje dat nog steeds geen website is. Claude Design pakt dat anders aan. Je beschrijft wat je wilt, en je krijgt een werkend prototype terug: echte HTML, CSS en JavaScript, geen mockup.

Anthropic bracht het op 17 april 2026 uit als research preview onder Anthropic Labs, en zette het op 17 juni breder open in beta op alle betaalde plannen. Het draait op Claude Opus 4.7, het model dat ook plaatjes kan lezen. Je vindt het op claude.ai/design en het zit in de Pro-, Max-, Team- en Enterprise-abonnementen.

Wat het doet

De kern is simpel. Je typt wat je nodig hebt, in gewone taal, en Claude Design bouwt het. Een landingspagina voor je nieuwe dienst, een one-pager voor een klant, een setje slides, een mockup om af te stemmen. De output is direct bruikbare code, dus wat je op het scherm ziet is ook wat er straks in een browser draait.

Verbeteren doe je in gesprek. Je zegt “maak de knop groter en zet het contactblok bovenaan”, en het past het aan. Geen menu’s, geen lagen die je moet snappen, je zegt alleen wat er anders moet. Dat maakt het bruikbaar voor mensen die nooit een designprogramma hebben opengehad.

Wat me het meest opviel is de manier waarop het je eigen huisstijl oppikt. Claude Design leest je codebase en je Figma-bestanden en herkent daaruit je designsysteem: je kleuren, je lettertypes, je knopstijlen. Werk je aan een bestaand project, dan komt het resultaat er niet uit als een willekeurige template maar als iets wat bij de rest past. Anthropic noemt dat Design System Recognition, en het is precies het stuk dat de meeste snelle tools missen.

Waarin het verschilt van Figma of Canva

Canva is er voor mensen die een mooie post of flyer willen zonder na te denken over code. Dat werkt prima, maar je krijgt een plaatje of een PDF, geen pagina die je kunt publiceren. Figma zit een niveau dieper: het is het gereedschap van ontwerpers, krachtig en precies, maar ook een programma waar je je eerst in moet inwerken. En ook Figma levert in de basis een ontwerp op, geen werkende code. De vertaalslag naar de site doet daarna iemand anders.

Claude Design zit daar tussenin, maar dan met een verschil dat telt: de code is het eindproduct, niet een tussenstap. Je beschrijft, het bouwt, en wat eruit komt kan een ontwikkelaar oppakken of je zet het zelf online. Voor iemand zonder designachtergrond is dat de kortste weg van “ik wil zoiets” naar “hier staat het”.

Wat je ermee doet als kleine ondernemer

Een paar dingen waar het meteen van pas komt:

  • Een landingspagina voor een nieuwe dienst of een actie, zonder eerst een ontwerper in te huren voor de eerste versie.
  • Een one-pager die je naar een klant stuurt: strak, op je eigen huisstijl, klaar om te delen.
  • Een presentatie waarvoor je anders in PowerPoint had zitten schuiven, nu in dezelfde flow.
  • Snelle varianten om te kiezen. Vraag om drie versies van dezelfde pagina en vergelijk ze naast elkaar, in plaats van er één moeizaam uit te tekenen.

Het punt is niet dat het werk van een ontwerper overbodig wordt. Het punt is dat je zonder ontwerper al veel verder komt dan vroeger, en dat je met een ontwerper sneller schakelt omdat je de eerste versie zelf al op tafel legt.

Hoe je begint

  1. Ga naar claude.ai/design. Je hebt een betaald abonnement nodig (Pro, Max, Team of Enterprise).
  2. Beschrijf in één of twee zinnen wat je wilt maken. Wees concreet: waar gaat het over, wat moet er op, wat is de bedoeling.
  3. Bekijk wat het terugstuurt en verfijn in gesprek. “Korter”, “andere kleur”, “voeg een prijstabel toe”.
  4. Werk je aan een bestaand project, verwijs dan naar je codebase of Figma-bestand zodat het je eigen stijl aanhoudt.
  5. Tevreden? Dan pak je de code, of je stuurt hem door naar Claude Code om er een werkende pagina van te maken.

De kanttekening

Het is een research preview, en dat merk je. Een preview is een eerste versie die Anthropic nog aan het bijschaven is, dus reken op dingen die soms nog niet lekker lopen. En de eerlijkheid gebiedt: snel een pagina genereren is niet hetzelfde als een goed doordacht ontwerp. Claude Design geeft je een vliegende start, maar de vragen die ertoe doen (klopt de boodschap, is de opbouw logisch, werkt het voor iemand die slecht ziet) beantwoordt het niet vanzelf. Daar begint het denkwerk, en dat blijft van jou.

Er zit ook een afhankelijkheidskant aan. Als je ontwerp, je code en je tools allemaal in één omgeving van één leverancier samenkomen, is dat comfortabel tot het moment dat je weg wilt. Handig gereedschap, maar houd in de gaten hoeveel van je eigen grip je eraan overlaat.

Dat gezegd hebbende: voor de eerste versie, de snelle proef, de pagina die er gisteren al had moeten staan, is dit een van de nuttigste dingen die ik dit jaar ben tegengekomen.

Dit is deel 1 van een serie over ontwerpen met Claude. In deel 2 lees je over de zeven design skills in Claude Code, waarmee je elk ontwerp laat reviewen en verbeteren. Eerder schreef ik al over de dag dat Claude Design in beta ging.