Claude Design gebruiken: complete handleiding voor visueel werk

Claude Design is geen losse knop in Claude, maar een verzamelnaam voor alles wat je met Anthropic’s Claude AI kunt maken op het gebied van visueel en grafisch werk: SVG-illustraties, UI-mockups in HTML/CSS, React-componenten, Mermaid-diagrammen, wireframes, logo-concepten, infographics en complete designsystemen. Je opent Claude.ai, schakelt Artifacts in, beschrijft wat je wilt zien, en Claude levert live-renderbare code die je direct in je browser ziet. In deze handleiding leggen we uit hoe je Claude inzet voor design-taken, welke formaten werken, hoe je stap-voor-stap een mockup of illustratie maakt, en waarin Claude verschilt van de beeldgeneratoren van ChatGPT en Gemini.

Wat is Claude Design eigenlijk?

Anthropic heeft (anders dan OpenAI of Google) geen pixelgebaseerde beeldgenerator zoals DALL-E of Imagen. Claude maakt geen fotorealistische afbeeldingen uit prompts. Wat Claude wél uitzonderlijk goed kan, is ontwerpen in code: vectoren, webpagina’s, componenten en diagrammen. Omdat code schaalbaar, bewerkbaar en exact is, noemen veel gebruikers en designbureaus dit in 2026 gewoon “Claude Design” — ontwerpen met taal, gerenderd als code.

De spil is de Artifacts-functie (beschikbaar in Claude.ai sinds 2024, flink uitgebreid in 2025 en 2026). Artifacts is een apart paneel naast het chatvenster waarin Claude code live rendert. Typ “maak een landingpage voor een koffiebar” en je ziet direct een werkende HTML/CSS-pagina — niet als schermafbeelding, maar als echte code die je kunt aanpassen, kopiëren of publiceren.

Claude kan binnen Artifacts onder andere produceren:

• SVG-illustraties en iconen — logo-concepten, iconsets, vectorafbeeldingen
• HTML/CSS-websites — landingpages, e-mailtemplates, formulieren, hero-secties
• React-componenten — dashboards, kaarten, navigatie, formulieren met Tailwind CSS
• Mermaid-diagrammen — flowcharts, organigrammen, user-journey’s, ERD’s
• Wireframes en mockups — low-fidelity ontwerpen in HTML of SVG
• Infographics — data-visualisatie via Recharts of D3.js
• Designsystem-bouwstenen — kleurenpaletten, type-schalen, componenten-libraries

Hoe krijg je toegang tot Claude Design?

Je hebt geen apart abonnement of aparte app nodig. Wel heb je Artifacts aan moeten staan:

1. Ga naar claude.ai en log in (gratis account volstaat voor de basis; Pro €18/maand geeft meer context en snellere responses).
2. Klik linksboven op je profielicoon → Settings → tabblad Feature Preview.
3. Zet Artifacts aan (staat sinds 2025 standaard aan, check het alleen als je het paneel niet ziet).
4. Begin een nieuw gesprek en stel een design-verzoek. Zodra Claude code van meer dan ~15 regels produceert, opent rechts automatisch het Artifacts-paneel met de live-preview.

Werk je liever in de API of via een editor? Ook dan kun je Claude voor design inzetten. In VS Code gebruik je extensies als Claude Code of Continue, en via de API roep je het Sonnet-model aan met een design-prompt. Voor snelle experimenten is claude.ai echter veruit het makkelijkst. Kijk voor een bredere introductie van het platform ook in onze Claude AI-handleiding.

Stap-voor-stap: een UI-mockup maken

Hieronder een concreet voorbeeld. We laten Claude een dashboard voor een webshop ontwerpen.

1. Open Claude.ai en klik op New chat.
2. Selecteer rechtsboven het model Claude Sonnet 4.7 (sterkste model voor design-output, per april 2026).
3. Plak een prompt met context, doel, stijl en technische stack. Bijvoorbeeld: “Maak een admin-dashboard voor een webshop in React met Tailwind CSS. Toon omzet vandaag, aantal bestellingen, top-5 producten en een lijntje van de omzet van de afgelopen 30 dagen. Stijl: minimalistisch, licht thema, afgeronde hoeken, indigo accenten.”
4. Claude opent het Artifacts-paneel en rendert het dashboard live. Je kunt erop klikken, hoveren en interactie testen alsof het een echte app is.
5. Vraag om aanpassingen: “Maak de sidebar collapsable en vervang het lijntje door een staafdiagram.” Claude werkt hetzelfde artifact bij — geen nieuwe losse codeblokken.
6. Klik op Copy om de code naar je project te halen, of op Publish om er een deelbare URL van te maken (sinds 2025 beschikbaar).

Binnen vijf minuten heb je een werkbaar prototype dat je designer of developer verder kan brengen.

Stap-voor-stap: een SVG-logo of illustratie

Claude is verrassend sterk in vector-werk, omdat SVG pure XML is — iets wat taalmodellen goed begrijpen.

1. Open een nieuw gesprek.
2. Prompt bijvoorbeeld: “Maak een SVG-logo voor een koffieverbrander genaamd ‘Zwart & Witlof’. Woordbeeld + een minimalistisch koffieboon-icoon, monochroom zwart, vriendelijke serif-letter, viewbox 200×60.”
3. Claude genereert een artifact met de SVG én toont de preview.
4. Itereer met instructies als: “Maak de boon iets kleiner en links van de tekst. Verander de kleur in #2B1810.”
5. Klik op Download of kopieer de SVG-code naar je designtool (Figma, Illustrator, Inkscape).

Voor iconsets geef je één overkoepelende prompt: “Ontwerp 8 consistente line-icons (stroke 2px, 24×24, viewBox aligned): thuis, gebruiker, instellingen, winkelwagen, favoriet, zoeken, menu, afsluiten. Alles in één SVG-sprite.” Claude levert dan een bruikbare set in één keer.

Stap-voor-stap: diagrammen met Mermaid

Mermaid is een tekst-gebaseerde diagrammeertaal die Claude native rendert in Artifacts.

1. Vraag: “Maak een flowchart voor het bestelproces van een webshop, van winkelwagen tot levering, inclusief betalings-fail pad.”
2. Claude geeft Mermaid-code en toont het diagram direct als afbeelding.
3. Aanpassingen gaan met natuurlijke taal: “Voeg een stap toe voor voorraadcheck tussen winkelwagen en betaling.”
4. Exporteer via het Artifact-menu als PNG of SVG, of kopieer de Mermaid-code voor gebruik in Notion, GitLab of documentatie.

Dit werkt niet alleen voor flowcharts maar ook voor sequence-diagrammen, klassendiagrammen, gantt-charts, entity-relationship-diagrammen en state-machines. Ideaal voor technische documentatie en user-journey-mapping.

Voorbeelden en use-cases

In de praktijk zien we Claude Design terugkomen bij uiteenlopende doelgroepen:

• Ondernemers zonder designer: snel een landingpage, hero-banner of pitch-deck maken om een idee te testen.
• Frontend-developers: componenten prototypen met Tailwind, dan verfijnen in de codebase.
• Product-managers: wireframes en user-flows tekenen voor stakeholder-meetings.
• Marketeers: e-mailtemplates, Open Graph-hero’s, social-cards in SVG of HTML.
• Docenten en trainers: infographics en interactieve quizzes met ingebouwde logica.
• UX-designers: snelle variaties op een layout-idee of kleurschema om te toetsen vóór het definitieve Figma-werk.
• Freelancers: onboardingsdocumenten, factuursjablonen en branding-kits voor klanten.

Een concreet voorbeeld: een eenmanszaak vraagt Claude om een complete branding-kit: logo-SVG, kleurenpalet met hex-codes, type-schaal (H1 t/m caption) en vier Instagram-template-variaties in 1080×1080. Dat krijg je in een handvol prompts geleverd, klaar om te exporteren of te verfijnen.

Claude vergeleken met ChatGPT en Gemini

Het verschil tussen Claude en de andere grote AI-assistenten is fundamenteel: pixels versus code.

ChatGPT (OpenAI)

ChatGPT heeft GPT-Image-1 en DALL-E voor pixelgebaseerde beelden: fotorealistische plaatjes, illustraties in elke stijl, productfoto’s. Dat is iets wat Claude niet kan. ChatGPT heeft ook Canvas (vergelijkbaar met Artifacts) voor HTML en code, maar de design-output is meestal iets minder gepolijst dan bij Claude Sonnet 4.7. Voor echt visueel werk — pixels — is ChatGPT vaak beter; voor code-gebaseerd design is Claude meestal beter. Zie onze ChatGPT-afbeeldingen handleiding voor de pixel-route.

Google Gemini

Gemini heeft Imagen 3 (sinds 2025 ook Imagen 4) voor foto-achtige beelden en sterke integratie met Google Workspace. Voor presentaties in Slides of illustraties in Docs is Gemini handig. Voor UI-code en live-renderende prototypes is het paneel minder matuur dan Artifacts. Meer daarover in onze Google Gemini-handleiding.

Samengevat

• Echt een foto of illustratie nodig? → ChatGPT of Gemini
• UI-mockup, logo-SVG, dashboard of diagram? → Claude
• Presentatie in Slides of Docs? → Gemini
• Werkende webpagina of React-component? → Claude
• Productfoto met je eigen product erin? → ChatGPT

Veel professionals combineren: Claude voor ontwerp in code, ChatGPT of Gemini voor de bitmap-beelden die in dat ontwerp komen. Zie ook onze ChatGPT-handleiding voor hoe je die workflow opzet.

Tips voor betere design-output

Claude levert pas echt goede design-output als je je prompts scherp formuleert. Een paar tips die in de praktijk het meeste verschil maken:

• Beschrijf stijl expliciet: “minimalistisch, neobrutalistisch, glassmorphism, Bauhaus” — vage termen leveren vage output.
• Geef een stack op: vraag specifiek “React met Tailwind CSS” of “pure HTML met Flexbox”. Zonder richting kiest Claude zelf, en niet altijd wat je project gebruikt.
• Noem kleuren met hex-codes: “#1a1a2e voor achtergrond, #e94560 accent”. “Blauw” is te breed.
• Geef dimensies: viewBox voor SVG, breedte voor banners, aspect-ratio voor cards.
• Itereer in kleine stappen: één verandering per prompt werkt beter dan alles tegelijk.
• Voeg een referentie toe: “lijkend op de stijl van Linear / Stripe / Notion” — Claude kent die ontwerpen en herkent de stijl.
• Vraag om responsiviteit: zeg expliciet “mobile-first, breakpoints bij 768px en 1024px”.
• Gebruik Projects (Pro-feature): upload je brandguide of Tailwind-config als context, zodat alle design-artifacts consistent blijven.

Voor wie Claude naast Gemini gebruikt als dagelijkse assistent: onze Gemini-assistent-handleiding legt uit hoe je beide modellen naast elkaar inzet.

Limitaties en aandachtspunten

Claude is geen wondermiddel. Een paar zaken om rekening mee te houden:

• Geen pixel-beeld: Claude genereert (nog) geen fotorealistische afbeeldingen. Voor een productfoto of portret moet je elders terecht.
• Stock-afbeeldingen: als je “afbeelding hier” nodig hebt, gebruikt Claude placeholders (zoals placehold.co-URL’s). Echte beelden moet je zelf invullen.
• Complexe animaties: simpele CSS-transitions en framer-motion gaan goed; geavanceerde WebGL- of Three.js-scenes zijn soms te ambitieus voor één artifact.
• Pixel-perfect brand-match: zonder brandguide als context zal Claude bij grote projecten niet meteen je huisstijl raken. Upload je stijlgids in een Project voor consistentie.
• Toegankelijkheid: controleer altijd contrast-ratios en alt-teksten. Claude doet dit steeds beter, maar je blijft zelf verantwoordelijk voor WCAG-compliance.
• Lange bestanden: artifacts worden groter moeilijker. Splits grote designs op in componenten.
• Gebruiksrecht: output uit Claude mag je commercieel gebruiken volgens Anthropic’s voorwaarden, maar dubbelcheck logo’s en iconen op onbedoelde gelijkenis met bestaande merken.

Veelgestelde vragen

Kan Claude echt afbeeldingen maken?

Claude maakt geen pixelafbeeldingen zoals DALL-E of Imagen. Wel genereert het SVG-illustraties, HTML/CSS-pagina’s, React-componenten en Mermaid-diagrammen die Artifacts live rendert. Voor bitmaps gebruik je ChatGPT of Gemini, en je combineert die beelden in Claude’s designs.

Wat kost Claude voor design-werk?

Claude.ai is gratis voor basisgebruik met een dagelijkse berichtenlimit. Claude Pro kost €18 per maand en geeft ongeveer 5× hoger gebruik, toegang tot Sonnet 4.7 en Opus, grotere context en de Projects-feature. Voor teams en developers zijn Team-abonnementen en API-toegang beschikbaar.

Welk Claude-model is het beste voor design?

Claude Sonnet 4.7 (april 2026) levert de beste balans tussen snelheid en kwaliteit voor UI- en design-taken. Claude Opus 4.5 is dieper voor complexe designsystemen en redeneringen, maar trager en duurder per prompt. Haiku 4 is sneller maar levert eenvoudiger designs.

Kan ik Claude’s output direct naar Figma exporteren?

Niet direct. Wel kun je SVG’s downloaden en in Figma importeren (Figma leest SVG native). Voor React-code zijn er community-plugins zoals “HTML to Figma” die een HTML-artifact naar Figma-frames converteren. Omgekeerd werkt ook: plak een Figma-screenshot en laat Claude dat omzetten naar code.

Mag ik Claude’s designs commercieel gebruiken?

Ja. Volgens Anthropic’s voorwaarden mag je output commercieel gebruiken. Je bent zelf verantwoordelijk voor het controleren op inbreuk op handelsmerken of auteursrechten — vooral bij logo’s die toevallig lijken op bestaande merken. Voor productie-logo’s wordt altijd een juridische trademark-check aanbevolen.

Werkt Claude Design ook op mijn telefoon?

De Claude-app op iOS en Android ondersteunt Artifacts sinds 2025. De preview is kleiner dan op desktop, maar alle functies werken: code-artifacts, SVG’s, Mermaid en React-componenten renderen gewoon. Voor uitgebreid design-werk is desktop praktischer, voor snel itereren onderweg is de app prima.

Kan Claude bestaande screenshots of Figma-bestanden lezen?

Ja. Je kunt afbeeldingen (PNG, JPG, WebP) uploaden en Claude analyseert de inhoud. Typisch gebruik: upload een screenshot van een concurrent-pagina en vraag “maak een vergelijkbaar component in React + Tailwind”. Figma-bestanden zelf (.fig) worden niet gelezen, maar geexporteerde PNG’s of SVG’s wél.