Claude Design: een handleiding en vijf praktische scenario’s

Praktische informatie over werken met Ailoot vind je in de documentatie.

Wat is Claude Design en waarom kijkt iedereen naar 17 april?#

Vrijdag 17 april 2026. Anthropic brengt Claude Design uit: een tool die een tekstuele beschrijving omzet in een werkende landingspagina, een presentatie voor investeerders of een prototype van een mobiele app. Geen ‘zoveelste afbeeldingsgenerator’. Het is Anthropic’s eerste poging om de ontwerper uit de vroege fasen van productontwikkeling te halen.

Vierentwintig uur later kondigde Adobe een Firefly-Claude-connector aan en positioneerde het zichzelf als platformpartner. Het signaal: Anthropic won geen productoorlog, maar zette een paradigmaverschuiving in gang—design wordt nu gegenereerd en gevestigde spelers worden distributeurs.

Claude Design wordt bekeken vanuit het perspectief van een vibe coder: wat het doet, hoeveel het kost, hoe je het zonder designachtergrond gebruikt en voor welke praktische taken het nuttig is. Bouw je een product zonder interne ontwerper, dan is deze gids voor jou.

Wat Claude Design kan: 6 soorten resultaten#

Kort gezegd maakt Claude Design ontwerpen waarvoor een ontwerper vroeger 3–5 dagen nodig had. Volgens Anthropic zijn er zes soorten resultaten:

De interface heeft twee panelen. Links staat de chat met Claude en rechts een live voorbeeld op het canvas. Het proces bestaat uit vijf stappen: project instellen, beschrijving geven, beoordelen, itereren en exporteren. Als de prompt vaag is, stelt Claude vervolgvragen. Daardoor voelt het proces meer als samenwerken met een persoon dan met een generator.

Wat je als invoer kunt gebruiken:

1. Tekstprompts (de belangrijkste toepassing).
2. Screenshots, afbeeldingen en bestaande assets.
3. Documenten: DOCX, PPTX, XLSX.
4. Een codebase—via een repositorylink of door een lokale map te importeren.
5. Een opname van een bestaande website via URL.

Exportformaten:

1. PDF.
2. PPTX (PowerPoint).
3. Een zelfstandig HTML-bestand—je kunt het meteen als pagina uploaden.
4. Overdracht naar Canva—daar wordt het geopend als een volledig bewerkbaar project.
5. Een pakket voor Claude Code—met de volledige ontwerpintentie voor ontwikkeling.
6. Een link delen binnen je organisatie.

Wat Claude Design niet doet (goed om vooraf duidelijk te maken):

• Het bewerkt geen codebase en voert geen opdrachten uit—dat is de taak van Claude Code.
• Het importeert of exporteert geen .fig-bestanden—er is geen native Figma-integratie.
• Het vervangt Figma of Canva niet.
• Er is geen activiteitenlogboek of beheerdersrapportage, waardoor het niet geschikt is voor grote bedrijven met compliancevereisten.
• Er is geen ingebouwde video-export—animaties kun je alleen als schermopname vastleggen.

Hoe Claude Design verschilt van Figma, Lovable, v0 en Canva#

In de hier beschreven aanpak worden deze vijf tools voor verschillende taken gebruikt. Dit is een vergelijking per mei 2026:

Waar Claude Design beter is dan de rest:

1. Design system uit een codebase. Geen van de concurrenten haalt automatisch een componentenset uit een repository. v0 kan uit Figma importeren, maar niet uit code.
2. Gesloten lus met Claude Code. De ontwerpintentie blijft behouden. Lovable en Bolt doen dit in één tool, maar design is daar een bijproduct van code.
3. Meerdere resultaten vanuit één context. Eén merk—landingspagina, presentatie, e-mailcampagne en socialmedia-ontwerp. De andere tools doen slechts één van deze dingen.
4. Je hoeft geen interface te leren. Je hoeft geen interface te leren zoals bij Figma. Dit is belangrijk voor de doelgroep ‘oprichters en productmanagers zonder designachtergrond’—de officiële positionering van Anthropic.

Waar Claude Design tekortschiet:

1. Geen volledige database- en serverintegratie. Lovable en Bolt leveren een werkende app met database, autorisatie en publicatie. Claude Design levert alleen de frontend. Voor hetzelfde resultaat: Claude Design → Claude Code → Vercel of een andere host → handmatig een betaalsysteem. Drie tools in plaats van één.
2. Geen .fig-bestanden. Ontwerpers kunnen de uitvoer niet naar Figma meenemen—alleen via een screenshot of door het ontwerp opnieuw te maken.
3. Geen gratis abonnement. Alle concurrenten hebben een gratis abonnement. Claude Design is beschikbaar vanaf Pro.
4. Afwerking. Figma blijft dominant voor productierijpe afwerking. Claude Design is bedoeld voor de eerste versie.
5. Snelheid voor een kaal prototype. Bolt is sneller voor een eenvoudig prototype—het draait binnen enkele seconden in een browser.

Claude Design is een tool voor een andere taak: de eerste versie maken zonder ontwerper, waarna die in handen van iemand anders komt.

Wat Claude Design kost en hoe je de toegang controleert#

Abonnementen en toegang:

Het starttegoed wordt eenmalig verstrekt—een pakket van 20 gebruikelijke prompts, geldig tot 17 juli 2026. Dat is genoeg om 2–3 volledige projecten te maken en te bepalen of Claude Design geschikt voor je is.

De knoppen in de interface zijn alleen in het Engels.

Een design system uit je codebase koppelen#

Het belangrijkste concurrentievoordeel van Claude Design is voor mensen die al iets hebben gebouwd. Geen enkele andere tool haalt automatisch een design system uit een repository. Het lijkt op de aanpak van Second Brain: je legt je merk niet uit aan Claude, maar geeft een link naar de bron en laat Claude het zelf uitzoeken.

5 stappen voor de installatie:

1. Open Claude Design op claude.ai/design en maak een nieuw project.
2. Kies tijdens de eerste configuratie een bron voor het design system. Beschikbare opties: merkrichtlijnen, frontendcodebase, oude presentaties en stijlgidsen, een live website via URL, Figma-bestanden.
3. Kies je een repository—geef dan een GitHub-link op. Claude downloadt de frontendmap en analyseert thema-instellingen, stijlvariabelen, bestaande componenten en typografie.
4. Kies je een live website—geef dan de URL op. Claude legt de paginastructuur vast en haalt kleuren, lettertypen en patronen voor knoppen en kaarten eruit.
5. Bevestig de geëxtraheerde componentenset. Claude toont het geëxtraheerde palet, de lettertypen en de basiscomponenten. Je kunt deze bewerken voordat je ze opslaat.

Daarna neemt elk nieuw project in Claude Design automatisch je design system over. Dat betekent dat de landingspagina die je vandaag genereert er hetzelfde uitziet als je huidige website.

Prompt om het design system opnieuw te controleren:

Toon mijn actieve design system in dit project: kleurenpalet, typografie,
basiscomponenten, afstandspatronen en hoekradius. Vergelijk het met mijn live
website [URL] en geef alles aan wat afwijkt.

In de hier beschreven werkwijze wordt deze controle binnen een project elke 3–4 iteraties herhaald. Anthropic waarschuwt in de aankondiging openlijk dat Claude na meerdere iteraties het design system kan vergeten en kan terugvallen op standaardpatronen. De oplossing is om het met een prompt geregeld terug te brengen naar je componentenset. In wezen is dit dezelfde context engineering als in Claude Code: je beheert de context expliciet, niet stilzwijgend.

Scenario 1: Landingspagina voor een productlancering#

In de ervaring die hier wordt beschreven, is het eerste resultaat van een nieuw experiment in Claude Design een landingspagina. Eerder: een dag briefing aan de ontwerper, gevolgd door een week iteraties. Nu: één prompt, een uur aanpassingen en klaar HTML.

Prompttemplate:

Maak een landingspagina voor [PRODUCTNAAM, beschrijving in één zin].
Visuele richting: [referentiemerk 1] gecombineerd met [referentiemerk 2],
met een [bijvoeglijk naamwoord] en [bijvoeglijk naamwoord] karakter. Structuur: hero met één
waardepropositie, drie voordelenblokken, een formulier om je aan te melden voor vroege toegang,
een FAQ met 5 vragen, footer. Gebruik mijn design system.

Wat je krijgt: Een zelfstandig HTML-bestand met ingebedde stijlen. Je kunt het als pagina op je website uploaden of als afzonderlijk project op een willekeurige host plaatsen.

Wat mensen na Claude meestal controleren en aanpassen:

• De specifieke tekst in de hero—Claude is goed in structuur, maar begrijpt de betekenis van een product minder goed.
• Afbeeldingen—Claude plaatst tijdelijke afbeeldingen. Ik vervang ze door mijn eigen afbeeldingen of genereer ze met een aparte tool.
• Statistieken en cijfers—ik gebruik altijd echte cijfers. Verzin nooit ‘80% van onze klanten’.

Tijdsbesparing: 6–8 uur ontwerpwerk plus een dag frontendontwikkeling voor een gebruikelijke landingspagina voor een lancering. Claude Design maakt de eerste versie in 40–60 minuten, gevolgd door een uur itereren.

Scenario 2: Presentatie voor investeerders of partners#

Een presentatie is het tweede belangrijke scenario: materiaal voor investeerders, een aanvraag voor een accelerator of een gesprek met een partner.

Prompttemplate:

Maak een Series A-presentatie van 10 dia’s voor [Company],
dat [wat] bouwt voor [wie] en [belangrijkste statistiek] heeft. Doelgroep:
investeerders in vroege B2B SaaS-bedrijven. Toon: zelfverzekerd,
warm, zonder hype. Volgorde van de dia’s: titel, probleem,
oplossing, tractie (licht de statistiek duidelijk uit), productdemo,
marktomvang, bedrijfsmodel, concurrenten, team, verzoek.

Wat je krijgt: Een PPTX-bestand en overdracht naar Canva. In Canva wordt het bestand geopend als een volledig bewerkbaar samenwerkingsproject.

Tijd: Bespaar 6–10 uur ten opzichte van handmatig bouwen. De meeste tijd bespaar je op dia’s die op typografie zijn gericht—grote koppen, weinig visuele rommel, allemaal volgens je design system.

Valkuil: Claude Design maakt statische dia’s. Heb je animaties nodig, breng ze dan naar Canva om ze daar te animeren, of gebruik Figma.

Scenario 3: Klikbaar prototype van een mobiele app#

Een praktisch scenario: test een hypothese over een mobiele app voordat je een ontwikkelaar betaalt.

Prompttemplate:

Bouw een interactief onboardingprototype voor de mobiele app [product]
met drie scenario’s: lege staat, de eerste actie van de gebruiker en het moment
van inzicht. Maak de elementen klikbaar voor een gebruikerstest zonder moderator
via Maze of Useberry.

Wat je krijgt: Een link naar het prototype. Je kunt het rechtstreeks naar Maze sturen voor een test met 5–10 gebruikers.

Wat je moet controleren:

• Schermafmetingen—controleer of Claude de juiste beeldverhouding voor iOS/Android heeft gebruikt.
• Diepgang van scenario’s—Claude voegt complexe vertakkingen soms samen op één scherm. De prompt ‘toon elke vertakking als een apart scherm’ lost dit op.
• Statussen—leeg, fout, laden. Claude maakt ze niet tenzij je erom vraagt.

Tijdsbesparing: 1–2 sprints vergeleken met handmatig bouwen in Figma + ProtoPie.

Scenario 4: Marketingcampagne met 5 websites van één pagina#

Een scenario voor mensen die met betaald verkeer werken: vergelijk vijf waardeproposities met hetzelfde formulier en een consistente meetmethode.

Prompttemplate:

Genereer 5 websites van één pagina in mijn merkstijl om verschillende waardeproposities te testen:
[optie 1, optie 2, optie 3, optie 4, optie 5].
Elke site heeft een hero met een unieke kop, een afbeelding en een call-to-actionknop
naar [DEZELFDE ECHTE FORMULIER-URL]. Exporteer elke site als zelfstandige HTML.
Exporteer ook PDF-voorbeelden en een Canva-map voor ontwerpbeoordeling.
Houd de CTA-bestemming en meetgebeurtenissen op alle vijf pagina’s gelijk.

Wat je krijgt: vijf HTML-conceptpagina’s, vijf PDF-voorbeelden en een Canva-projectmap. De voorbeelden helpen bij het goedkeuren van ontwerpen; ze bewijzen geen werkende landingspagina’s of conversiemeting.

Voordat je verkeer stuurt:

1. Publiceer elke HTML-pagina op een eigen URL bij de gekozen host, of laat Claude Code haar in je site implementeren.
2. Vervang tijdelijke aanduidingen en controleer elke CTA. Verstuur een onschuldige testinzending via het gedeelde formulier en controleer of die op de bedoelde bestemming aankomt.
3. Geef elke pagina een eigen campagne- of variantlabel. Registreer paginabezoeken, CTA-klikken en geslaagde formulierinzendingen afzonderlijk, zodat je bij elke variant dezelfde bezoekersactie vergelijkt.
4. Open de gepubliceerde URL’s op desktop en mobiel, controleer de geregistreerde testgebeurtenissen en start daarna pas het geplande verkeersexperiment.

Gebruik: betaald verkeer, e-mailcampagnes en tests op sociale media. Vergelijk CTA-klikken per paginabezoek voor de doorklikratio en geslaagde inzendingen per bezoek voor de conversie. Alleen PDF of Canva bekijken is ontwerpbeoordeling, geen live test.

Valkuil: Claude Design kiest automatisch afbeeldingen uit zijn assets. Heb je specifieke foto’s nodig, upload die dan vooraf.

Scenario 5: E-mailcampagne voor Resend, Mailchimp of Sendsay#

Elke massale e-mailcampagne heeft een HTML-sjabloon met ingebedde stijlen nodig. Voor een marketeer zonder frontendontwikkelaar is dit een technische hoofdpijn.

Prompttemplate:

Maak een HTML-e-mailsjabloon voor [campagneonderwerp]. Ontwerp: donker thema,
de primaire accentkleur van je merk, merklettertypen. Structuur: subtitel,
titel, 3 alinea’s, call-to-actionknop, handtekening. Exporteer als
zelfstandig HTML-bestand met ingebedde stijlen en zonder externe afhankelijkheden.

Wat je krijgt: Een HTML-bestand dat klaar is om in Resend, Mailchimp, Sendsay of Unisender te plakken.

Wat mensen meestal controleren en aanpassen:

• Breedte—e-mailclients geven de voorkeur aan een vaste breedte van 600px.
• Afbeeldingen—ik vervang de links door links naar mijn eigen assets die online gehost zijn.
• Tekstversie—Claude Design genereert die niet; ik schrijf hem zelf.

Tijdsbesparing: 2–3 uur opmaakwerk per sjabloon.

Overdracht aan Claude Code: de gesloten lus#

In de hier beschreven aanpak rechtvaardigt deze functie de keuze voor Claude Design, zelfs als je Figma hebt. Elk ander ontwerpprogramma draagt een afbeelding of Figma-bestand over. De ontwikkelaar bekijkt het vervolgens en vertaalt het ‘zoals die het begrijpt’. Daarbij gaat 30–40% van de ontwerpintentie verloren.

Claude Design levert een pakket met niet alleen visuals, maar ook:

• De componentstructuur (hoe de onderdelen logisch samenhangen).
• De logica achter ontwerpbeslissingen (waarom de afstand zo is, waarom deze hoekradius, waarom deze hiërarchie).
• Responsive ankerpunten—waar een blok bij verschillende schermformaten ‘vastzit’.
• Benoemde stijlwaarden in plaats van magische getallen.

Claude Code opent dit pakket rechtstreeks en schrijft code die de intentie behoudt. Het maakt een afbeelding niet alleen na in een lay-out, maar voert de ontwerp logica uit. Dit werkt samen met het CLAUDE.md-bestand van je project: hoe preciezer de regels in CLAUDE.md, hoe minder Claude Code van de oorspronkelijke intentie ‘afwijkt’.

Workflow:

1. In Claude Design—rond het ontwerp af → klik op ‘Export to Claude Code’.
2. In Claude Code—open het project → plak de pakket-ID → prompt: ‘Implementeer dit ontwerp in src/components/.’
3. Claude Code—leest het pakket, begrijpt de patronen en schrijft componenten met je huidige stack (Next.js + Tailwind, Vue, Svelte—wat je ook gebruikt).
4. Daarna—pas dingen aan in de code via Claude Code, of in Claude Design (een nieuwe ontwerpiteratie) en draag het opnieuw over.

Wat belangrijk is: dit betekent niet ‘AI schrijft frontend’. Het betekent ‘design en code worden één document’. Wanneer ik de afstand tussen secties in Claude Design wijzig, begrijpt Claude Code bij de volgende iteratie dat dit een nieuw patroon is en geen eenmalige aanpassing.

Waar concurrenten hierin tekortschieten:

• Lovable / Bolt—design is een bijproduct van code. Wil je het design system wijzigen, dan herschrijf je de volledige prompt.
• v0—levert React-componenten, maar geen pakket met de ontwerpintentie. Daarna werk je met code, niet met design.
• Figma + Cursor—er zijn plugins, maar die dragen niet de logica achter beslissingen over, alleen de visuals.

Een exclusieve integratie die Claude Design onderdeel maakt van Anthropic’s ‘agent plus canvas’-strategie.

Wat niet werkt: architecturale zwakke punten#

Anthropic is er open over: dit is een preview. Sommige functies werken nog niet goed.

Architecturale zwakke punten:

• Geen activiteitenlogboek—een probleem voor grote bedrijven met compliancevereisten.
• Geen vereisten voor gegevensretentie—je kunt het niet met gereguleerde gegevens gebruiken.
• Experimenteel ontwerp (spraak, video, 3D) is als experimenteel gemarkeerd en kan stukgaan.
• Geen ingebouwde video-export—animaties kun je alleen als schermopname vastleggen.

Gedragsmatige eigenaardigheden van Claude (komen bij alle tools voor, niet alleen bij Design):

• Na meerdere iteraties vergeet het vereisten en valt het terug op standaardpatronen.
• Het is goed in duidelijk gestructureerde taken (een patroon herhalen), maar minder goed in open taken (een nieuwe richting bedenken).
• Het kan aan zijn gewoonten ‘vasthouden’ in plaats van de genoemde doelen te volgen.

De oplossing is een herinneringsprompt die Claude elke 3–4 iteraties terugbrengt naar het design system. Het is geen blokkade, maar het vraagt wel om een vaste gewoonte.

Wanneer je beter Figma, Lovable of Canva gebruikt#

In de hier beschreven aanpak worden deze vijf tools voor verschillende taken gebruikt. Een eerlijk overzicht van wanneer je welke tool gebruikt:

Gebruik Claude Design als:

• Je een oprichter, productmanager of marketeer zonder designachtergrond bent.
• Je binnen een uur een eerste versie van een presentatie, landingspagina of mock-up nodig hebt, niet pas na een dag.
• Je al een codebase of merkrichtlijnen hebt die Claude kan gebruiken.
• Je het resultaat voor de afwerking aan een ontwerper of ontwikkelaar wilt overdragen.
• Je met Claude Code programmeert en een gesloten ‘design → ontwikkeling’-lus wilt.

Gebruik Figma als:

• Je ontwerper bent en de laatste afwerking doet.
• Je in teamverband wilt werken met nadruk op overdracht aan ontwikkelaars.
• Je plugins, developer mode of serieuze versiebeheerfuncties nodig hebt.
• Je een definitief productierijp ontwerp nodig hebt.

Gebruik Lovable of Bolt als:

• Je met één prompt een werkend product met database, autorisatie en publicatie nodig hebt.
• Je bereid bent ontwerpkwaliteit in te ruilen voor snelheid.
• Een gratis abonnement belangrijk is.

Gebruik Canva als:

• Je marketingmateriaal op basis van kant-en-klare templates nodig hebt.
• De ontwerptaak bestaat uit het samenstellen van items uit een bibliotheek, niet uit creatieve generatie.
• Je drukwerk, sociale media en video allemaal in één product nodig hebt.

Gebruik v0 als:

• Je frontend bouwt en kant-en-klare componenten wilt kopiëren en plakken.
• Je al in het Next.js / Vercel-ecosysteem werkt.
• Je rechtstreeks uit Figma wilt importeren.

De gebruikelijke workflow in de hier beschreven aanpak: Claude Design maakt de eerste versie van de landingspagina → Claude Code zet die over naar src/app/ → aanpassingen in de code → voor typografische afwerking ga ik naar Figma → voor animatie op sociale media ga ik naar Canva.

Claude Design beweert niet alles te kunnen. Het wil de eerste stap zijn, waarna je begrijpt wat je vervolgens moet doen.

Open Ailoot.