Creative AI
Een goede Claude Design-prompt schrijf je in een aparte Claude-chat: stijlvoorbeeld, interview en briefing. Met vier prompts, een sjabloon en Opus 5.5 op max.
Een goede Claude Design-prompt schrijf je niet in Claude Design zelf, maar in een aparte chat met Claude. Daar laat je eerst een voorbeeldsite analyseren, beantwoord je de vragen die in een briefing horen en laat je er één volledige prompt van maken. Die plak je in Claude Design, samen met het stijlvoorbeeld, je brandboek en je logo's, met Opus 5.5 op de hoogste stand. De prompts en het sjabloon staan in deze gids en in de download onderaan.
Wat haal je uit deze gids?
Je krijgt de werkwijze waarmee wij de homepage van Het AI Lokaal opnieuw ontwierpen in Claude Design, vanaf één screenshot van een voorbeeldsite. Het verhaal daarachter, en wat er misging toen onze briefing gaten had, lees je in Kun je een website maken met Claude Design? Deze gids is de praktische kant: wat je voorbereidt, welke prompts je gebruikt en hoe je bijstuurt. Menu's en functies in Claude Design veranderen nog en hangen af van je abonnement; de namen in deze gids zijn de stand van eind september 2026.
Een stijlvoorbeeld dat werkt: hoe je een voorbeeldsite kiest en precies zegt wat je wel en niet overneemt.
Drie prompts voor het voorwerk in een aparte Claude-chat: voorbeeld analyseren, jou laten interviewen en de briefing schrijven.
Een sjabloon voor je Claude Design-prompt, sectie voor sectie, zodat Claude geen gaten zelf hoeft in te vullen.
Een vaste manier van bijsturen: wanneer je de chat, Edit of Comment gebruikt, en hoe je exporteert voor je website.
In 20 minuten naar je eerste ontwerp
Maak een screenshot van een website waarvan je de stijl mooi vindt, en pak je brandboek en logo's erbij.
Open een nieuwe chat met Claude en werk prompt 1, 2 en 3 af.
Zet in Claude Design Opus 5.5 op max en plak de briefing, met het voorbeeld en je bestanden erbij.
Kijk de eerste versie na op placeholders en stuur bij met prompt 4, Edit of Comment.
Voor wie is dit? Ondernemers, marketeers en designers die een homepage, landingspagina of one-pager willen ontwerpen zonder bureau, of sneller tot een eerste ontwerp willen komen. Je hebt een Claude-abonnement nodig waarin Claude Design zit. Designervaring of code is niet nodig.
Wie doet wat?
Wie | Wat | Klaar als |
|---|---|---|
Jij | Stijlvoorbeeld kiezen, brandboek en logo's verzamelen, de vragen van Claude beantwoorden, het ontwerp beoordelen | Elke sectie van je pagina heeft echte inhoud en een doel |
Claude in een aparte chat | Het voorbeeld analyseren, doorvragen en de briefing schrijven | De briefing laat niets open wat Claude zelf zou moeten verzinnen |
Claude Design met Opus 5.5 | Het ontwerp bouwen, zichzelf controleren en jouw aanpassingen verwerken | Het ontwerp klopt met je merk, op desktop en op mobiel |
Waarom begint een goede Claude Design-prompt buiten Claude Design?
Een goede Claude Design-prompt begint buiten Claude Design, omdat het uitzoeken van wat je wilt veel heen-en-weer kost. Dat denkwerk doe je beter in een gewone chat met Claude, waar je vrij kunt doorvragen. In Claude Design gaat je gebruik dan naar het ontwerpen zelf, en begint Claude met een briefing zonder gaten.
De werkwijze van stijlvoorbeeld tot export. Schematische weergave; labels kunnen per versie afwijken.
De grootste fout bij Claude Design is te weinig context. Wat je niet noemt, vult Claude zelf in. Soms verzint hij iets, soms laat hij een lege plek achter. In onze eerste versie stond onder de hero een rij grijze vakjes met "Klantlogo 1" tot en met "Klantlogo 6", omdat de briefing niet zei welke klanten erin mochten. Netjes opgelost, maar het laat zien waar je briefing tekortschoot.
Daarom werkt de volgorde in deze gids zo:
Stijl bepalen: je kiest een voorbeeldsite en beschrijft wat je ervan wilt overnemen.
Voorwerk: in een aparte chat laat je Claude het voorbeeld analyseren, jou interviewen en de briefing schrijven.
Ontwerpen: je plakt de briefing in Claude Design, met het voorbeeld, je brandboek en je logo's, en stuurt bij tot het klopt.
Wat Claude Design verder allemaal kan, van presentaties tot prototypes, lees je in onze gids Wat kun je maken met Claude Design?
Welke instelling zet je vooraf goed?
Zet vóór je eerste bericht in Claude Design het model op Opus 5.5 en de stand op max. Die instelling vergeet je snel, en dan is je ontwerp merkbaar minder goed. In onze test gaf max de beste output.
Opus 5.5 heeft vijf standen: low, medium, high, xhigh en max. Hoe hoger de stand, hoe langer het model nadenkt en controleert. Anthropic zet hem standaard op medium en raadt de hoogste standen aan voor werk waar kwaliteit het verschil maakt. Een homepage is zo'n klus: je bouwt hem één keer en je wilt dat de basis meteen staat. Max kost wel meer tijd en meer van je gebruikslimiet. Voor kleine aanpassingen later kun je een lagere stand kiezen.
Wat Opus 5.5 in Claude Design sterker maakt, volgens de eerste testers: hij is beter in beweging en animaties, en hij controleert zijn eigen werk met screenshots, ook van de mobiele weergave. Zijn zwakke punt: hij maakt makkelijk iets moois dat niet bij je merk past. Dat los je op met je eigen stijl en een volledige briefing, precies wat de volgende stappen doen.
Checklist vóór je eerste bericht
Model: Opus 5.5, niet een ouder of kleiner model.
Stand: max voor het eerste ontwerp.
Bestanden klaar: screenshot van het voorbeeld, brandboek, logo's.
Briefing klaar: de volledige prompt uit je aparte chat (stap 2).
Hoe kies je een goed stijlvoorbeeld?
Kies een website waarvan je de stijl, de opbouw of de bewegingen mooi vindt, en maak er een screenshot van. Het voorbeeld hoeft niet uit je eigen branche te komen: het gaat om de sfeer en de vorm, niet om de inhoud. Schrijf er meteen bij wat je wilt overnemen en wat niet, want een screenshot zonder uitleg laat Claude raden.
Voor onze homepage namen we de homepage van Asana als voorbeeld. We hebben geen band met Asana; het was puur een voorbeeld van een rustige, strakke stijl met bewegende elementen. We schreven erbij dat we de stijl, de bewegingen en de effecten wilden overnemen, en niet de kleuren, teksten of het logo.
Waar let je op bij het kiezen?
Kijk naar | Vraag jezelf |
|---|---|
Opbouw | Welke secties staan er, in welke volgorde? Past dat bij wat jouw bezoeker moet weten? |
Ruimte en rust | Veel witruimte of juist vol? Hoe groot zijn de koppen? |
Beweging | Wat beweegt er bij scrollen of bij de muis? Voegt het iets toe of leidt het af? |
Effecten | Schaduwen, verlopen, kaartjes, lijnen die dingen verbinden? |
Knoppen | Hoeveel knoppen staan bovenin, en wat is de hoofdactie? |
Invulblok: neem over / neem niet over
Stijlvoorbeeld: [naam van de site, screenshot bijgevoegd]Neem over:- Stijl: [bijvoorbeeld: rustig, veel witruimte, grote koppen]- Opbouw: [bijvoorbeeld: hero met twee knoppen, daaronder een rij logo's]- Beweging: [bijvoorbeeld: kaartjes die zacht in beeld schuiven]- Effecten: [bijvoorbeeld: dunne lijnen die de kaartjes verbinden]Neem niet over:- De kleuren, lettertypes, teksten, beelden en het logo van het voorbeeld- [wat je verder niet wilt]
Maak liever een screenshot van de hele pagina dan alleen van de hero. Dan ziet Claude ook hoe de secties op elkaar volgen.
Mag je een bestaande website namaken?
Nee, maak een voorbeeld nooit 1-op-1 na. Het ontwerp, de teksten en de beelden van een ander zijn beschermd. Gebruik het voorbeeld als richting voor stijl en gevoel, en laat Claude er iets eigens van maken met jouw inhoud en huisstijl.
In de praktijk betekent dat drie dingen. Je zegt in je briefing uitdrukkelijk dat het voorbeeld alleen een stijlreferentie is. Je laat alle inhoud uit je eigen materiaal komen. En je kijkt het resultaat na: lijkt een onderdeel verdacht veel op het voorbeeld, dan vraag je Claude het anders op te lossen.
Zet dit altijd in je briefing: "Gebruik het voorbeeld alleen als referentie voor stijl, ritme en beweging. Neem geen teksten, beelden, logo's of herkenbare onderdelen over. Het ontwerp moet eigen zijn."
Wat stuur je mee naast het voorbeeld?
Stuur naast het voorbeeld je brandboek en je logo's mee, liefst in hetzelfde bericht. Dan gebruikt Claude jouw kleuren en lettertypes in plaats van die van het voorbeeld. Zonder brandboek krijg je een mooi ontwerp dat op het voorbeeld lijkt, maar niet op jou.
Heb je geen brandboek, zet dan de basis op een rij: je kleuren met hun kleurcodes, je lettertypes en een paar beelden die bij je merk passen. Ook bestaande teksten helpen: je huidige homepage, een pitch of een folder. Hoe meer echte inhoud, hoe minder Claude hoeft te verzinnen.
Uploadlijst
Screenshot van het stijlvoorbeeld, bij voorkeur de hele pagina.
Brandboek, of een lijst met kleurcodes en lettertypes.
Logo's: de volledige versie en het losse beeldmerk.
Echte inhoud: je diensten, je doelgroep, je belangrijkste knoppen, en klantlogo's of reviews als je die mag tonen.
Mag je geen klantnamen tonen, zeg dat dan ook. Anders krijg je vakjes met "Klantlogo 1" zoals wij, of erger: logo's die er niet horen.
Welke prompts gebruik je voor het voorwerk?
Voor het voorwerk gebruik je drie prompts achter elkaar in één nieuwe chat met Claude, dus niet in Claude Design. De eerste laat Claude je stijlvoorbeeld analyseren, de tweede laat Claude jou interviewen over wat er op de pagina moet, en de derde maakt van alles één volledige Claude Design-prompt. Reken op een kwartier tot een half uur, afhankelijk van hoeveel je al weet.
Open een nieuwe chat met Claude. Upload het screenshot van je voorbeeld, je brandboek en je logo's, en plak prompt 1.
Prompt 1: het stijlvoorbeeld analyseren
Ik ga een nieuwe [homepage / landingspagina] ontwerpen in Claude Design. Bijgevoegd:
- een screenshot van een website waarvan ik de stijl mooi vind: [naam van de site]
- mijn brandboek en logo's
Analyseer het voorbeeld als ontwerper. Beschrijf:
1. De opbouw: welke secties, in welke volgorde, en wat elke sectie doet.
2. De stijl: witruimte, grootte van de koppen, vormen, schaduwen, lijnen.
3. De beweging en effecten die je verwacht of ziet.
4. Wat dit voorbeeld sterk maakt en wat minder goed bij mijn merk past.
Vergelijk het daarna met mijn brandboek: welke kleuren, lettertypes en vormen van mij vervangen die van het voorbeeld?
Het voorbeeld is alleen een stijlreferentie. We nemen geen teksten, beelden, logo's of herkenbare onderdelen over.
Lees de analyse na. Klopt iets niet, of wil je iets juist wel of niet overnemen, zeg het nu. Dat is goedkoper dan het later in het ontwerp te repareren. Plak daarna prompt 2.
Prompt 2: laat Claude jou interviewen
Interview mij nu voor de briefing. Stel je vragen in rondes van maximaal vijf, genummerd, en wacht op mijn antwoord.
Vraag in elk geval naar:
- voor wie de pagina is en wat die bezoeker moet doen (de hoofdactie)
- welke secties erop moeten, en wat er in elke sectie staat
- de knoppen: welke tekst, en waar ze naartoe gaan
- de echte teksten die ik al heb, en welke Claude mag voorstellen
- klantlogo's, reviews, cijfers: wat mag erop, en wat niet
- de sfeer in drie woorden, en wat ik absoluut niet wil
- desktop en mobiel: moet er iets anders op mobiel
Vul niets zelf in. Weet ik iets niet, noteer het dan als open punt in plaats van het te verzinnen.
Stop met vragen zodra je genoeg weet om de pagina sectie voor sectie te beschrijven.
Beantwoord de vragen zo concreet als je kunt. "Een knop naar de Academy" is beter dan "een knop", en "Bekijk de Academy, naar /genai-academy" is nog beter. Zijn de vragen op, plak dan prompt 3.
Prompt 3: de Claude Design-prompt schrijven
Schrijf nu één volledige prompt die ik in Claude Design plak. Volg deze opbouw:
1. Doel en doelgroep van de pagina, in twee zinnen.
2. Stijl: wat we van het voorbeeld overnemen en wat niet, en mijn kleuren, lettertypes en logo's.
3. De pagina sectie voor sectie: kop, tekst, beelden, knoppen (tekst en bestemming), beweging.
4. Wat niet mag: geen teksten, beelden of logo's van het voorbeeld, geen verzonnen cijfers, klanten of reviews.
5. Open punten: waar ik nog niets heb, zet je een duidelijke placeholder in plaats van iets te verzinnen.
6. Controle: laat Claude Design het ontwerp zelf nakijken op desktop en mobiel voordat het klaar is.
Schrijf de prompt in het Nederlands, zakelijk en volledig. Geen uitleg eromheen, alleen de prompt.
Kopieer de prompt die Claude schrijft. Die gaat, samen met dezelfde bestanden, naar Claude Design.
Hoe ziet een goede Claude Design-prompt eruit?
Een goede Claude Design-prompt beschrijft de pagina sectie voor sectie, met echte inhoud, en zegt ook wat er niet mag. Hij noemt het stijlvoorbeeld als referentie en je eigen huisstijl als basis. Wat nog open is, staat er als open punt in, zodat Claude er een placeholder zet en niets verzint.
Wil je zonder de drie prompts werken, of de prompt van Claude controleren? Gebruik dan dit sjabloon. Het staat ook in de download onderaan de pagina.
Sjabloon: de Claude Design-prompt
Ontwerp een [homepage / landingspagina] voor [bedrijf], voor [doelgroep].
Het doel: bezoekers [hoofdactie, bijvoorbeeld: bekijken de Academy of plannen een kennismaking].
STIJL
- Referentie: het bijgevoegde screenshot van [site]. Neem over: [stijl, opbouw, beweging, effecten]. Neem niet over: teksten, beelden, logo's, kleuren.
- Huisstijl: zie het bijgevoegde brandboek. Kleuren: [codes]. Lettertypes: [namen]. Logo: bijgevoegd.
- Sfeer: [drie woorden]. Niet: [wat je niet wilt].
PAGINA, VAN BOVEN NAAR BENEDEN
1. Menu: [onderdelen], knoppen: [tekst → bestemming].
2. Hero: kop "[kop]", subtekst "[tekst]", knoppen: [tekst → bestemming]. Beweging: [wat].
3. [Sectie]: [kop, tekst, beelden, knoppen].
4. [Sectie]: …
5. Footer: [onderdelen].
WAT NIET MAG
- Geen verzonnen cijfers, klanten, reviews of logo's.
- Geen teksten of herkenbare onderdelen uit het voorbeeld.
OPEN PUNTEN
- [bijvoorbeeld: klantlogo's volgen later, zet een duidelijke placeholder]
CONTROLE
Kijk het ontwerp na op desktop en mobiel voordat je klaar bent. Meld wat je niet zeker weet.
Waarom die open punten? Een placeholder is geen fout, maar een eerlijk gat. Je ziet meteen wat je nog moet aanleveren, in plaats van later een verzonnen cijfer of logo te moeten terugvinden.
Wat doe je met de eerste versie?
De eerste versie kijk je eerst na voordat je gaat bijsturen. Zoek naar placeholders, verzonnen inhoud en onderdelen die op het voorbeeld lijken. Kijk ook naar de mobiele weergave. Pas als je weet wat er mis is, stuur je gericht bij.
Zo start je het ontwerp: open Claude Design, controleer dat Opus 5.5 op max staat, upload hetzelfde screenshot, je brandboek en je logo's, en plak de prompt uit stap 2. Daarna bouwt Claude de pagina als echte code op het canvas.
Onze eerste versie uit Claude Design: sterk in stijl en beweging, met placeholders waar de briefing iets open liet.
Nakijklijst voor de eerste versie
Placeholders: waar staan grijze vakjes of teksten als "Klantlogo 1"? Dat zijn gaten in je briefing.
Verzonnen inhoud: cijfers, klantnamen of reviews die jij niet hebt aangeleverd.
Merk: kloppen kleuren, lettertypes en logo met je brandboek?
Voorbeeld: lijkt een onderdeel te veel op de voorbeeldsite?
Knoppen: kloppen de teksten en de bestemmingen?
Mobiel: staat er iets scheef of te klein?
Wanneer stuur je bij via de chat, Edit of Comment?
Grote wijzigingen stuur je bij via de chat, kleine dingen pas je zelf aan met Edit, en een opmerking op één plek zet je met Comment. De chat is voor alles wat Claude moet bedenken, zoals een nieuwe sectie of een andere sfeer. Edit is sneller voor een marge, een kleur of een maat, omdat je dan geen bericht hoeft te sturen.
Wat wil je? | Gebruik | Voorbeeld |
|---|---|---|
Iets nieuws of een andere richting | Chat | "Voeg een sectie met prijzen toe" of "maak de hero rustiger" |
Iets kleins zelf aanpassen | Edit | Marge, afgeronde hoeken, achtergrond, maat van een blok |
Een opmerking op één plek | Comment | "Deze knop moet naar de Academy"; Claude pakt hem daarna op |
Wat kun je met Edit?
Met Edit, rechtsboven in Claude Design, klik je een onderdeel aan en pas je het zelf aan. Links zie je de lagen van je pagina (header, secties, groepen) en daaronder de eigenschappen van wat je hebt geselecteerd:
Appearance: achtergrond, afgeronde hoeken en doorzichtigheid.
Sizing: een blok volgt zijn inhoud (Hug), heeft een vaste maat (Fixed) of vult de ruimte (Fill).
Position, Padding, Margin en Border: plek, binnen- en buitenruimte en rand.
Export selection: haal één onderdeel los uit je ontwerp.
Bovenaan wissel je tussen de tabbladen Simple, Pro, Code en Tweaks. Klaar? Klik op Save, of op Discard om terug te gaan.
Edit in Claude Design: links de lagen en de eigenschappen, rechts het ontwerp.
Voor bijsturen via de chat werkt één wijziging per bericht het best, met erbij wat hetzelfde moet blijven. Anders past Claude soms meer aan dan je vroeg.
Prompt 4: bijsturen in Claude Design
Pas alleen dit aan: [bijvoorbeeld: de rij met klantlogo's onder de hero].
Wat er moet komen: [bijvoorbeeld: de bijgevoegde logo's van deze zes klanten, in grijs, even groot].
Laat alles anders precies zoals het is: stijl, teksten, beweging en de andere secties.
Kijk daarna de pagina na op desktop en mobiel en meld wat je hebt veranderd.
Hoe exporteer je je website uit Claude Design?
Je exporteert je website via Share, rechtsboven in Claude Design, en dan onder Export de keuze Project HTML. Daarmee krijg je een werkend ontwerp, als zip of als los bestand, dat je developer kan overnemen of dat je als basis gebruikt in je eigen websitebouwer. Delen kan ook zonder export, met een link.
Delen en exporteren in Claude Design.
Keuze in Share | Wat het doet | Wanneer |
|---|---|---|
Who can access | Wie het ontwerp mag zien, bijvoorbeeld je workspace, met Copy link | Feedback van je team vragen |
Publish as artifact | Maakt er een openbare pagina van | Een ontwerp laten zien aan iemand buiten je workspace |
Export: PDF | Direct, of eerst opnieuw opgemaakt door Claude | Een ontwerp voorleggen of printen |
Export: Project HTML | Het ontwerp als code, als zip of als los bestand | Je website bouwen of laten bouwen |
Export: PowerPoint | Met tekst en vormen die je nog kunt bewerken | Het ontwerp in een presentatie gebruiken |
Zolang je bij Who can access niets kiest, ziet alleen jij het ontwerp. Controleer vóór je een openbare link deelt of er geen placeholders of interne teksten meer in staan.
Wat is je volgende stap?
Je volgende stap is deze week één pagina ontwerpen met deze werkwijze. Begin met de pagina die het meest oplevert, meestal je homepage of de landingspagina van je belangrijkste dienst. De prompts en het sjabloon staan in de download hieronder.
Vandaag: kies je stijlvoorbeeld, maak het screenshot en zet je brandboek en logo's klaar.
Morgen: doe het voorwerk in een aparte Claude-chat met prompt 1, 2 en 3.
Deze week: plak de briefing in Claude Design met Opus 5.5 op max, kijk de eerste versie na en exporteer als Project HTML.
Het verhaal achter onze eigen homepage, met wat er goed en minder goed ging, lees je in Kun je een website maken met Claude Design?
Win 10 uur per week terug met je eerste AI-medewerker.
De GenAI Academy is de AI-opleiding van Het AI Lokaal voor ondernemers en professionals die hun werk willen automatiseren met AI.
Geen cursus over AI, maar een systeem dat je bouwt.
#1 in Nederland & België
CIC Rotterdam, maandelijkse co-build sessie
Door
Mede-oprichter van Het AI Lokaal. Traint dagelijks teams in AI en creative AI, van eerste prompt tot werkende workflow.
Deel artikel
Veelgestelde vragen
Hoe schrijf je een Claude Design-prompt?
Een goede Claude Design-prompt schrijf je niet in Claude Design zelf, maar in een aparte chat met Claude. Daar laat je eerst een voorbeeldsite analyseren, beantwoord je de vragen die in een briefing horen en laat je er één volledige prompt van maken. Die plak je in Claude Design, samen met het stijlvoorbeeld, je brandboek en je logo's, met Opus 5.5 op de hoogste stand. De prompts en het sjabloon staan in deze gids en in de download onderaan.
Welke instelling zet je vooraf goed?
Zet vóór je eerste bericht in Claude Design het model op Opus 5.5 en de stand op max. Die instelling vergeet je snel, en dan is je ontwerp merkbaar minder goed. In onze test gaf max de beste output.
Mag je een bestaande website namaken?
Nee, maak een voorbeeld nooit 1-op-1 na. Het ontwerp, de teksten en de beelden van een ander zijn beschermd. Gebruik het voorbeeld als richting voor stijl en gevoel, en laat Claude er iets eigens van maken met jouw inhoud en huisstijl.