Wat je gaat leren

Wat is Claude
Design?

Claude Design is een aparte tool van Anthropic, het bedrijf achter Claude. Het staat los van de gewone Claude-chat: het is een volledige creatieve werkomgeving waarmee je visuele output maakt op basis van tekst.

Wat dat in de praktijk betekent: je beschrijft wat je wil, en Claude bouwt het. Een presentatie, een klikbaar prototype, een website, een one-pager. Geen Figma-kennis vereist. Geen designer nodig. Geen code schrijven.

Voor beginners: wat je nodig hebt om te starten

Je hebt geen designachtergrond nodig. Je hoeft geen code te kennen. Het enige wat je nodig hebt is een betaald Claude-abonnement (Pro, Max, Team of Enterprise) en toegang tot claude.ai/design.

Zodra je daar bent, kies je een van de vier modi, typ je wat je wil maken, en Claude doet de rest. Als het resultaat niet helemaal klopt, typ je wat er anders moet en Claude past het aan. Zo simpel is het.

Denk aan Claude Design als een designer die nooit slaapt, geen briefing-sessie van een uur nodig heeft, en altijd direct begint. Jij geeft richting, Claude voert uit.

Voor gevorderden: wat het echt kan

Wat kun je er concreet mee maken?

De interface en
je eerste project

Als je Claude Design opent op claude.ai/design, zie je direct vier tabbladen: Prototype, Slide deck, From template en Other. Elk tabblad is een andere werkwijze. Kies er één, geef je project een naam, klik op Create, en Claude gaat aan de slag.

Prototype tabblad

Kies tussen Wireframe (kale structuur) en High Fidelity (volledig uitgewerkt met kleuren en typografie)

Bij Prototype kies je tussen twee stijlen. Wireframe geeft je een kale structuur in grijs — ideaal om de flow te bespreken zonder dat visuele keuzes afleiden. High Fidelity is volledig uitgewerkt — gebruik dit voor klanten of stakeholders.

Slide deck tabblad

Met Speaker notes schrijft Claude naast elke slide ook de spreektekst

Eén extra optie: Speaker notes. Zet je die aan, dan schrijft Claude naast elke slide ook de spreektekst erbij. Handig als je de presentatie zelf gaat geven.

From template tabblad

Jouw eigen Design System templates verschijnen hier zodra je die hebt ingesteld (zie hoofdstuk 4)

Werkt pas goed als je eerst een Design System hebt aangemaakt (zie hoofdstuk 4). Daarna verschijnen jouw templates hier automatisch — alles in jouw huisstijl zonder dat je het hoeft te beschrijven.

Other tabblad

Voor alles buiten de standaardcategorieën: landingspagina's, one-pagers, HTML exports

Voor alles wat niet in de andere categorieën past: landingspagina's, one-pagers, HTML exports, infographics, custom deliverables. Twijfel je? Begin hier.

Context toevoegen voor betere output

Na het aanmaken van een project zie je in de chat vier opties om context toe te voegen. Dit is een van de krachtigste functies van Claude Design — hoe meer Claude weet over jouw stijl en doel, hoe beter de eerste output.

Presentaties
maken

Presentaties zijn waar Claude Design voor de meeste professionals het meeste oplevert. Je geeft Claude een bestaand template als referentie, vertelt wat de presentatie moet bevatten, en Claude bouwt het volledige deck — slide voor slide, on-brand, in jouw stijl.

Het resultaat is geen generieke PowerPoint-look. Claude analyseert jouw merkidentiteit en past die toe op elke slide, van de cover tot de afsluiting.

Stap 1: Template uploaden als referentie

Sleep een PDF van je huidige presentatietemplate naar het chatvenster. Claude leest je logo, kleuren, typografie en componentstijl eruit. Wat Claude uit een template haalt: logo-positie, primaire en accentkleuren, koppen- en bodyfont, componentstijl, en de algehele toon van het design.

Sleep een PDF-template naar het chatvenster: Claude analyseert de merkidentiteit en gebruikt die als basis voor de volledige deck

Stap 2: Claude stelt gerichte vragen

Na het uploaden analyseert Claude de stijl en stelt een reeks vragen — voordat het ook maar begint met bouwen. Dit is een bewuste keuze: een paar gerichte vragen upfront bespaart je grote aanpassingen achteraf. De vragen gaan over publiek, doel, aantal slides, toon, en of je al concrete teksten hebt.

Hoe specifieker je antwoorden, hoe beter het eindresultaat. "Professioneel maar toegankelijk, voor HR-managers bij bedrijven van 50-500 medewerkers" geeft Claude veel meer houvast dan "zakelijk".

Claude stelt gerichte vragen over publiek, doel, aantal slides en toon — beantwoord ze volledig voor de beste output

Stap 3: Het resultaat beoordelen

Claude bouwt de volledige deck. Je ziet alle slides in een rasteroverzicht. Klik op een individuele slide om hem aan te passen via de chat of de Edit-modus. Verwacht een eerste versie die 70-80% goed is — de laatste 20% stuur je bij via de chat.

De voltooide Het AI Lokaal presentatie: 12 slides, volledig on-brand, direct exporteerbaar als PDF of PPTX

Stap 4: Snel aanpassen met Tweaks en Edit

Staat de structuur goed maar wil je nog visueel sleutelen? Schakel het Tweaks panel in rechtsboven. Hiermee pas je zonder te prompten de accentkleur, het font, de hoekstijl en de footer aan — de aanpassing geldt direct op alle slides tegelijk. Geen handmatig slide-voor-slide doorlopen.

De volledige pagina in edit-modus met bewerkingspanelen rechts: typography, layout, kleuren per element

Voor precieze aanpassingen per element schakel je naar Edit modus — daarin selecteer je individuele tekst, blokken of knoppen en pas je die handmatig aan. Gebruik Draw om snel een schets te maken en Claude te vragen die te implementeren.

De Edit-modus: selecteer individuele elementen en pas typography, grootte, kleur en layout handmatig aan

Interactieve
prototypes

Een prototype in Claude Design is meer dan een statische mockup. Het is een volledig klikbaar, deelbaar interface dat je direct kunt demonstreren aan klanten of collega's — zonder dat een developer er ook maar een regel code voor hoeft te schrijven.

Dit is de modus die het meest indruk maakt op mensen die het voor het eerst zien. Je typt een beschrijving, en minuten later heb je iets wat aanvoelt als een echt product.

Wireframe vs. High Fidelity: wanneer gebruik je wat?

Wat je kunt bouwen

Design System
instellen

Een Design System is de slimste investering die je kunt doen in Claude Design. Je vult het eenmalig in en daarna past Claude jouw stijl automatisch toe op alles wat je maakt — zonder dat je kleuren, fonts of toon nog hoeft te beschrijven in elke prompt.

Het verschil is merkbaar. Zonder Design System moet je elke keer in de prompt uitleggen hoe jouw merk eruit ziet, en is het resultaat per project net anders. Met een Design System weet Claude dat al — en is alles wat je maakt consistent on-brand.

Het Design System setup scherm: voer hier alles in wat Claude moet weten over jouw visuele identiteit — eenmalig, daarna automatisch

Websites en
landingspagina's

Dit is waar Claude Design echt indruk maakt. Je geeft Claude een prompt, stuurt een paar referentiescreenshots mee, en je krijgt een volledige, functionele landingspagina terug — als één HTML-bestand dat je direct kunt openen in een browser, doorsturen naar een developer, of omzetten naar PDF.

Geen Webflow-abonnement. Geen developer die een week wacht. Geen designbureau dat je brieft. Jij + Claude = werkende pagina.

Om dit concreet te maken laten we je precies zien hoe wij een volledige landingspagina voor Het AI Lokaal hebben gebouwd in Claude Design — wat we stuurden als input, en wat eruit kwam.

De input: prompt + referentie + branding

De sleutel tot een goede landingspagina in Claude Design is de kwaliteit van je input. Je geeft Claude drie dingen mee: een duidelijke prompt met de structuur die je wil, screenshots van een referentiesite die je als stijlinspiratie wil gebruiken, en je eigen logo en merkkleuren.

Je hoeft de referentiesite niet 1-op-1 te kopiëren — Claude gebruikt het als structuurinspiratie en bouwt iets origineels in jouw stijl. In dit geval gebruikten we screenshots van de Notion homepage als referentie, omdat Notion een strakke SaaS-structuur heeft die goed werkt voor B2B-diensten.

De invoer: je typt de opdracht in het chatvenster, stuurt Notion-screenshots mee als structuurreferentie, en voegt je eigen logo en merkkleuren toe

Het resultaat: wat Claude Design teruggeeft

Op basis van die ene prompt en de referentiescreenshots bouwt Claude een volledige landingspagina, sectie voor sectie. Hieronder zie je precies wat er uit is gekomen — en waarom elke sectie zo is opgebouwd.

Sectie 1: De hero — eerste indruk telt

Claude begint altijd met de navbar en de hero, want dit is de sectie die een bezoeker binnen drie seconden overtuigt om verder te scrollen — of weg te klikken. De hero bevat altijd drie elementen: een sterke headline die het probleem of de belofte benoemt, een subline die context geeft, en twee CTA-knoppen (primair en secundair). Claude heeft hier bovenop ook een interactieve mock-up van de trainingsomgeving gebouwd — zodat bezoekers direct zien wat ze kunnen verwachten.

De hero: grote headline ("AI op de werkvloer? Wij leren het je."), twee CTA-knoppen, en een interactieve mock-up van de trainingsomgeving als social proof

Sectie 2: Social proof — vertrouwen opbouwen

Bezoekers die voor het eerst op een pagina komen hebben één vraag: "kan ik dit bedrijf vertrouwen?" Social proof beantwoordt die vraag. Claude heeft hier een logo-strip gebouwd met bekende klanten (KPN, Rabobank, NS, Achmea, Bol.), gevolgd door een uitgelichte klantquote van Gemeente Utrecht, en zes klantcases in een grid. Dit patroon — logo's + quote + cases — is de sterkste combinatie voor B2B-diensten.

Logo-strip met bekende klanten, een uitgelichte testimonial van Gemeente Utrecht, en zes klantcases in een grid — de standaard B2B-structuur voor vertrouwen

Sectie 3: Features — wat je aanbiedt

De features-sectie legt uit wat je precies levert. Claude heeft hier vier kaarten gebouwd — één per pijler van het aanbod — elk met een eigen kleuraccent, een korte beschrijving, en een interface-mock die het product illustreert. Het kleurgebruik per kaart is bewust: het helpt bezoekers snel te begrijpen welk aanbod bij hen past.

Vier kaarten voor de vier pijlers: In-company, AI-coach, Agents bouwen, en Open inschrijving — elk met eigen kleur en interface-mock

Sectie 4: De business case — calculator en agents

Dit is de sectie die het verschil maakt bij beslissers. Een interactieve ROI-calculator laat bezoekers zelf berekenen hoeveel tijd hun team bespaart als ze AI structureel inzetten. Claude heeft de calculator volledig functioneel gebouwd met JavaScript — bezoekers kunnen hun teamgrootte aanpassen en zien live de tijdwinst en jaarlijkse besparing. Eronder staat de agents-sectie: wat deelnemers zelf gaan bouwen.

Links: werkende ROI-calculator — teamgrootte aanpassen geeft live tijdwinst en besparing. Rechts: agents-grid met voorbeelden van wat teams zelf bouwen

Sectie 5: CTA en footer — de afsluiting

Elke goede landingspagina sluit af met een duidelijke call-to-action die de belangrijkste actie herhaalt. Claude heeft hier een grote navy CTA-sectie gebouwd met twee knoppen ("Boek kennismaking" en "Vraag het programmaboek aan"), gevolgd door een volledige vierkolomsfooter met navigatielinks, social media en contactgegevens. De pagina is één HTML-bestand — geen externe dependencies, direct inzetbaar.

Navy CTA-sectie met twee knoppen, gevolgd door een vierkolomsfooter — de complete pagina in één zelfstandig HTML-bestand

Bewerken na het bouwen

Zodra Claude de pagina heeft gebouwd, verschijnt die in de edit-modus. Je kunt elk element selecteren via het rechterpaneel en aanpassen: typography, kleuren, padding, layout. Of je typt een instructie in de chat en Claude past het aan. Zo kun je de pagina precies afstellen zonder ook maar één regel code te schrijven.

De pagina in edit-modus: selecteer elk element en pas het aan via de panels rechts — typography, box-instellingen, layout en meer

Exporteren
en delen

Wat je in Claude Design maakt is niet opgesloten in de tool. Je exporteert het naar het formaat dat jij nodig hebt — en de opties zijn breed. Klik rechtsboven op Share om het exportmenu te openen.

Het Share-menu met alle exportopties: link delen, PDF, PPTX, Canva, standalone HTML of handoff naar Claude Code

PDF met klikbare links exporteren

De directe "Export as PDF" knop maakt een goede PDF, maar klikbare links werken daarin niet. Voor een digitale saleskit of presentatie met werkende links, gebruik je deze methode:

Veelgemaakte
fouten