[{"data":1,"prerenderedAt":957},["ShallowReactive",2],{"read-ontwerpen":3},{"id":4,"title":5,"begrippen":6,"body":49,"date":947,"description":55,"excerpt":948,"extension":949,"meta":950,"navigation":361,"nr":951,"path":952,"seo":953,"stem":954,"thema":955,"__hash__":956},"read\u002Fread\u002Fontwerpen.md","UI\u002FUX: ontwerpafspraken maken en Claude Design inzetten",[7,10,13,16,19,22,25,28,31,34,37,40,43,46],{"begrip":8,"uitleg":9},"UI (user interface)","Hoe een app of website eruitziet: kleuren, letters, knoppen, de indeling van een scherm.",{"begrip":11,"uitleg":12},"UX (user experience)","Hoe een app of website werkt en aanvoelt: wat er gebeurt als je op een knop drukt, waar een foutmelding verschijnt, hoe snel je bereikt wat je wilt.",{"begrip":14,"uitleg":15},"Ontwerpafspraken","Het document waarin je vastlegt hoe schermen eruitzien en werken: kleuren, componenten en gedrag. Een uitgebreide versie heet bij ontwerpers een designsysteem.",{"begrip":17,"uitleg":18},"Designsysteem (design system)","De ontwerpafspraken van een organisatie op één plek. In Claude Design is het de plek waar je afspraken staan; Claude past ze toe op elk nieuw ontwerp.",{"begrip":20,"uitleg":21},"Component","Een vaste bouwsteen van een scherm, zoals een knop, een invoerveld, een kaart of een melding. Eén keer ontworpen, overal hetzelfde gebruikt.",{"begrip":23,"uitleg":24},"Kleurcode","De code waarmee een kleur exact wordt vastgelegd, zoals #1F4E79. Zo weet iedereen, mens of AI, precies welk blauw er bedoeld wordt.",{"begrip":26,"uitleg":27},"px (pixel)","De kleinste punt op een scherm, en de gebruikelijke maat voor afstanden en lettergroottes in ontwerpen.",{"begrip":29,"uitleg":30},"Claude Design","Het ontwerpgereedschap van Anthropic: je beschrijft wat je nodig hebt, en Claude maakt schermen, klikbare prototypes, presentaties en one-pagers op een canvas naast het gesprek. Te vinden op claude.ai\u002Fdesign.",{"begrip":32,"uitleg":33},"Canvas","Het werkvlak naast het gesprek waarop Claude Design het ontwerp laat zien. Je kunt er direct in klikken, schuiven en opmerkingen bij zetten.",{"begrip":35,"uitleg":36},"Prototype","Een klikbaar voorbeeld van een app of website. Het ziet er echt uit en je kunt erdoorheen klikken, maar er zit nog geen werkend systeem achter.",{"begrip":38,"uitleg":39},"Overdracht (handoff)","Het doorgeven van een af ontwerp aan wie het gaat bouwen. Claude Design kan een ontwerp in één keer doorgeven aan Claude Code.",{"begrip":41,"uitleg":42},"Toegankelijkheid","Of iedereen je app kan gebruiken, ook mensen die slechter zien of alleen een toetsenbord gebruiken. Voldoende contrast en grote klikvlakken horen er standaard bij.",{"begrip":44,"uitleg":45},"Claude-apps","Claude via claude.ai, de desktop-app of de telefoon-app. Claude Design zit daarin; bewerken gaat op de computer, via de website of de desktop-app.",{"begrip":47,"uitleg":48},"Claude Code","Claude in de terminal of code-editor. Ondanks de naam ook bruikbaar voor ander werk dan code: het is Claude met toegang tot je bestanden en gereedschap.",{"type":50,"value":51,"toc":919},"minimark",[52,56,72,77,105,108,114,118,132,136,139,142,154,159,162,166,169,176,184,188,248,252,272,276,279,283,286,291,298,302,308,312,315,329,332,336,339,563,566,569,572,575,590,594,597,600,607,611,614,619,622,626,629,643,647,655,658,662,665,761,765,775,779,787,791,804,808,816,820,823,856,873,877,885,888,898,906,910,915],[53,54,55],"p",{},"Leg één keer vast hoe je schermen eruitzien en werken, en elk nieuw ontwerp past vanzelf bij de rest. Dit is les vijf van Read: een korte, praktische les over ontwerpen, van je eerste ontwerpafspraken tot een nieuw scherm in Claude Design dat eruitziet alsof het er altijd al bij hoorde.",[57,58,59],"blockquote",{},[53,60,61,65,66,71],{},[62,63,64],"strong",{},"Zeg wat je ervan vindt."," Dit is les vijf van de reeks, en ik hoor graag of je er iets aan hebt gehad. Goed of niet goed, allebei even welkom, en je hoeft niet te wachten tot het einde. Twee zinnen zijn genoeg: ",[67,68,70],"a",{"href":69},"\u002Fread\u002Ffeedback?over=ontwerpen","geef feedback",". Anoniem mag; laat je je e-mailadres achter, dan kunnen we er eventueel over sparren. Je feedback wordt nergens publiek getoond.",[73,74,76],"h2",{"id":75},"wat-je-hierna-kunt","Wat je hierna kunt",[78,79,80,87,93,99],"ul",{},[81,82,83,86],"li",{},[62,84,85],{},"Ontwerpafspraken vastleggen",": kleuren, componenten en gedrag op één plek, in maten en woorden die een AI (en een collega) kan uitvoeren.",[81,88,89,92],{},[62,90,91],{},"Claude Design gericht inzetten",": met jouw afspraken als basis, van eerste schets tot bijgewerkt ontwerp.",[81,94,95,98],{},[62,96,97],{},"Gedrag ontwerpen, niet alleen uiterlijk",": wat er gebeurt bij een fout, tijdens het laden en bij een leeg scherm.",[81,100,101,104],{},[62,102,103],{},"Consistentie bewaken"," over schermen en pagina's heen, ook als het ontwerp overgaat naar de bouw.",[53,106,107],{},"En misschien wel het belangrijkste: je herkent hierna het moment waarop een nieuw scherm er mooi uitziet maar net niet bij de rest past, en denkt: dit had uit onze afspraken moeten komen.",[53,109,110,113],{},[62,111,112],{},"Waarom niet gewoon een goede prompt?"," Een prompt als \"modern, strak en gebruiksvriendelijk\" levert elke keer een ander mooi scherm op. Precies dat is het probleem: mooi is niet genoeg, het moet familie zijn van de rest. De ontwerper die Claude Design heeft gebouwd, zegt het zelf: vertel Claude hoe het eruit moet zien, anders kiest hij een van zijn eigen favoriete stijlen. Ontwerpafspraken zijn die uitleg, één keer goed opgeschreven in plaats van elke keer half in een prompt.",[73,115,117],{"id":116},"wat-je-nodig-hebt","Wat je nodig hebt",[78,119,120,123,126,129],{},[81,121,122],{},"Een Claude-account met Claude Design. In de betaalde abonnementen zit het erbij; op een Enterprise-account zet de beheerder het eerst aan. Je vindt het op claude.ai\u002Fdesign, en in een gewoon gesprek kun je ook om een ontwerp vragen.",[81,124,125],{},"Drie schermen of pagina's waar je tevreden over bent, van je app, je website of je klantportaal. Heb je nog niets gebouwd, neem dan je huisstijl: logo, kleuren, een presentatie in jullie stijl.",[81,127,128],{},"Geen ontwerpkennis. De vaktermen worden onderweg uitgelegd, en de begrippenlijst onderaan doet de rest.",[81,130,131],{},"Een uur. Lezen alleen kan in een kwartier, maar de opzet is dat je meteen meedoet met je eigen schermen.",[73,133,135],{"id":134},"de-denkwijze","De denkwijze",[53,137,138],{},"Het probleem is niet dat je AI het niet kan. Het probleem is dat elk scherm opnieuw wordt bedacht.",[53,140,141],{},"Herken je dit? Je vraagt een AI om een nieuw scherm voor je app, en het resultaat ziet er goed uit. Alleen is het blauw net een ander blauw, zijn de knoppen rond waar ze bij jou hoekig zijn, en verschijnt de foutmelding in een pop-up terwijl die op alle andere schermen onder het veld staat. Elk scherm apart is prima; samen lijken ze van vijf verschillende ontwerpers te komen. Je gebruikers merken dat, ook als ze niet kunnen zeggen wat er schuurt.",[53,143,144,145,148,149,153],{},"De oplossing: ",[62,146,147],{},"leg je ontwerpafspraken één keer vast, van kleuren tot gedrag, en laat elk nieuw ontwerp daaruit opbouwen."," Ontwerpers noemen dat een designsysteem. Voor deze les is een kleiner woord genoeg: afspraken. Het is dezelfde gedachte als de skill uit ",[67,150,152],{"href":151},"\u002Fread\u002Fskills-bouwen","les 01",", toegepast op hoe iets eruitziet en werkt.",[155,156,158],"h3",{"id":157},"ui-en-ux-uiterlijk-en-gedrag","UI en UX: uiterlijk en gedrag",[53,160,161],{},"Twee afkortingen die je vaak tegenkomt. UI (user interface) gaat over hoe het eruitziet: kleuren, letters, knoppen. UX (user experience) gaat over hoe het werkt: wat er gebeurt als je op opslaan drukt, waar een foutmelding verschijnt, wat je ziet als er nog niets is. De meeste ontwerpafspraken gaan alleen over het eerste. Het tweede is minstens zo belangrijk, want daar haken gebruikers af.",[155,163,165],{"id":164},"wat-claude-design-precies-is","Wat Claude Design precies is",[53,167,168],{},"Claude Design is het ontwerpgereedschap van Anthropic. Je beschrijft wat je nodig hebt, en Claude maakt een ontwerp op een canvas naast het gesprek: een scherm, een klikbaar prototype, een presentatie of een one-pager. Daarna stuur je bij: in het gesprek, met een opmerking bij een onderdeel op het canvas, of door zelf te schuiven en te slepen. Is het ontwerp af, dan exporteer je het (onder meer als pdf, PowerPoint of losse webpagina), of geef je het in één keer door aan Claude Code om het te bouwen.",[53,170,171,172,175],{},"Het belangrijkste onderdeel voor deze les is het ",[62,173,174],{},"designsysteem",": de plek in Claude Design waar je ontwerpafspraken staan. Claude past het toe op elk nieuw ontwerp, en in een Team- of Enterprise-account kan de hele organisatie hetzelfde designsysteem gebruiken. Claude Design is nog in bèta, dus menu's en mogelijkheden veranderen snel. De werkwijze in deze les blijft hetzelfde.",[53,177,178,179,183],{},"Werk je in Claude Code? Daar laat je met ",[180,181,182],"code",{},"\u002Fdesign"," ook ontwerpen maken, en leest Claude je ontwerpafspraken gewoon uit een bestand in je projectmap. Stap 7 laat zien hoe.",[155,185,187],{"id":186},"de-anatomie-vier-onderdelen","De anatomie: vier onderdelen",[189,190,191,204],"table",{},[192,193,194],"thead",{},[195,196,197,201],"tr",{},[198,199,200],"th",{},"Onderdeel",[198,202,203],{},"Wat het doet",[205,206,207,218,228,238],"tbody",{},[195,208,209,215],{},[210,211,212],"td",{},[62,213,214],{},"Basis",[210,216,217],{},"De vaste waarden: kleuren met hun rol (hoofdkleur, tekst, achtergrond, fout), lettertype en lettergroottes, afstanden, afronding van hoeken. Altijd met exacte maten.",[195,219,220,225],{},[210,221,222],{},[62,223,224],{},"Componenten",[210,226,227],{},"De vaste bouwstenen: knoppen, invoervelden, kaarten, meldingen. Per component hoe hij eruitziet en wanneer je hem gebruikt.",[195,229,230,235],{},[210,231,232],{},[62,233,234],{},"Gedrag",[210,236,237],{},"Wat er gebeurt bij een fout, na opslaan, tijdens het laden, bij een leeg scherm. Dit is het UX-deel, en het deel dat het vaakst ontbreekt.",[195,239,240,245],{},[210,241,242],{},[62,243,244],{},"IJkschermen",[210,246,247],{},"Twee of drie goedgekeurde schermen als voorbeeld. Net als bij skills: één goed voorbeeld zegt meer dan tien regels.",[155,249,251],{"id":250},"wanneer-je-afspraken-maakt-en-wanneer-niet","Wanneer je afspraken maakt, en wanneer niet",[78,253,254,260,266],{},[81,255,256,259],{},[62,257,258],{},"Eén losse flyer: gewoon vragen."," Voor een eenmalig ontwerp dat nergens bij hoeft te passen, is een goede beschrijving genoeg.",[81,261,262,265],{},[62,263,264],{},"Vanaf het tweede scherm: afspraken."," Zodra iets bij iets anders moet passen (een tweede scherm, een tweede presentatie, een tweede pagina), lonen afspraken zich.",[81,267,268,271],{},[62,269,270],{},"Begin bij wat er al is."," Afspraken leid je af uit wat al werkt, net zoals de skill uit les 01 uit drie goedgekeurde voorbeelden kwam. Een designsysteem vanaf nul bedenken is een ander, veel groter project.",[73,273,275],{"id":274},"het-voorbeeld-een-nieuw-scherm-voor-het-klantportaal","Het voorbeeld: een nieuw scherm voor het klantportaal",[53,277,278],{},"We maken nu samen ontwerpafspraken en ontwerpen er een nieuw scherm mee. Pak er zelf een app, website of intern systeem bij met een paar bestaande schermen. De stappen werken voor allemaal; ik gebruik het klantportaal van een installatiebedrijf. Klanten kunnen er al inloggen, hun afspraken zien en hun facturen downloaden. Het nieuwe scherm: een onderhoudsafspraak verzetten.",[155,280,282],{"id":281},"stap-1-verzamel-drie-schermen-waar-je-tevreden-over-bent","Stap 1: verzamel drie schermen waar je tevreden over bent",[53,284,285],{},"Maak schermafbeeldingen van drie bestaande schermen die goed zijn: bij het klantportaal het inlogscherm, het afsprakenoverzicht en de facturenpagina. Echte schermen, niet hoe het ooit zou moeten. Heb je nog geen app, neem dan drie dingen in je huisstijl: je website, een presentatie, een brochure. Zorg dat er voorbeeldgegevens op staan in plaats van echte klantgegevens; meer daarover bij de gouden regels.",[287,288,290],"h4",{"id":289},"op-windows","Op Windows",[53,292,293,294,297],{},"Druk op Windows-toets + Shift + S en sleep een kader om het deel van het scherm dat je wilt. Windows 11 bewaart de afbeelding vanzelf in de map Afbeeldingen → Schermafbeeldingen; klik anders op de melding die verschijnt en sla hem daar op. Zet de drie afbeeldingen samen in één map, bijvoorbeeld ",[180,295,296],{},"ontwerp\\ijkschermen",".",[287,299,301],{"id":300},"op-een-mac","Op een Mac",[53,303,304,305,297],{},"Druk op Command + Shift + 4 en sleep een kader om het deel van het scherm dat je wilt. De afbeelding komt op je bureaublad. Zet de drie afbeeldingen samen in één map, bijvoorbeeld ",[180,306,307],{},"ontwerp\u002Fijkschermen",[155,309,311],{"id":310},"stap-2-benoem-wat-ze-gemeen-hebben","Stap 2: benoem wat ze gemeen hebben",[53,313,314],{},"Leg de drie naast elkaar en schrijf op wat je ziet, per onderdeel van de anatomie. Laat je AI daarbij helpen: upload de drie schermafbeeldingen in een gesprek en vraag \"welke kleuren, lettergroottes, afstanden en componenten komen op alle drie terug? Geef exacte waarden waar je ze kunt aflezen.\" Controleer het resultaat zelf, want een AI schat kleurcodes uit een afbeelding soms net verkeerd. Staan de exacte codes in je huisstijlgids of in de code van je app, neem ze daaruit over. Bij het klantportaal kwam er zoiets uit:",[78,316,317,320,323,326],{},[81,318,319],{},"Eén hoofdkleur (donkerblauw) voor knoppen en koppen, verder vooral wit en lichtgrijs.",[81,321,322],{},"Knoppen met licht afgeronde hoeken, met altijd een werkwoord erop: \"Opslaan\", \"Downloaden\".",[81,324,325],{},"Foutmeldingen in rood, direct onder het veld waar het om gaat.",[81,327,328],{},"Na opslaan een groene balk bovenin met wat er gebeurd is.",[53,330,331],{},"Dit lijstje ís je afspraken, op de maten na. Daarmee is het moeilijkste deel gedaan.",[155,333,335],{"id":334},"stap-3-schrijf-de-afspraken-op","Stap 3: schrijf de afspraken op",[53,337,338],{},"Zet het lijstje om in afspraken, met exacte waarden in plaats van bijvoeglijke naamwoorden: \"#1F4E79\" in plaats van \"donkerblauw\", \"8 px\" in plaats van \"licht afgerond\". Formuleer elke afspraak positief, net als bij skills: hoe het wél moet. En vergeet het gedrag niet; daar staat in de meeste afspraken het minst, terwijl gebruikers er het meest van merken. Het complete bestand:",[340,341,346],"pre",{"className":342,"code":343,"language":344,"meta":345,"style":345},"language-markdown shiki shiki-themes github-light github-dark","# Ontwerpafspraken klantportaal\n\nBijgewerkt: 29 september 2026\n\n## Basis\n- Hoofdkleur #1F4E79 (donkerblauw): knoppen, koppen, links.\n- Tekst #1A1A1A, achtergrond #FFFFFF, vlakken #F3F5F8.\n- Fout #B42318, gelukt #1E7B34. Kleur is altijd een extra\n  signaal: er staat ook tekst of een icoon bij.\n- Lettertype Inter; gewone tekst 16 px, koppen 24 en 20 px.\n- Afstanden in stappen van 8 px; hoeken 8 px afgerond.\n\n## Componenten\n- Hoofdknop: gevuld in de hoofdkleur, witte tekst. Eén per\n  scherm, voor de belangrijkste handeling.\n- Tweede knop: witte achtergrond, rand in de hoofdkleur.\n- Knopteksten zijn werkwoorden: \"Afspraak verzetten\",\n  \"Opslaan\", \"Factuur downloaden\".\n- Invoervelden: label boven het veld, minstens 44 px hoog.\n- Kaarten: plat, in de vlakkleur, met 16 px binnenruimte.\n\n## Gedrag\n- Foutmeldingen staan direct onder het veld, in de foutkleur,\n  en zeggen hoe het wél kan: \"Kies een datum na vandaag.\"\n- Na opslaan verschijnt bovenin een groene balk met wat er\n  gebeurd is: \"Je afspraak is verzet naar 14 oktober.\"\n- Tijdens het laden blijft de knop staan, met de tekst\n  \"Even geduld…\" erop.\n- Een leeg overzicht legt uit wat hier komt en biedt de\n  eerstvolgende stap aan: \"Nog geen afspraken. Plan je\n  eerste onderhoud.\"\n- Alles is met het toetsenbord te bedienen.\n\n## IJkschermen\n- Inlogscherm, afsprakenoverzicht en facturenpagina, als\n  schermafbeelding in de map ontwerp\u002Fijkschermen\u002F.\n","markdown","",[180,347,348,356,363,369,374,380,386,392,398,404,410,416,421,427,433,439,445,451,457,463,469,474,480,486,492,498,504,510,516,522,528,534,540,545,551,557],{"__ignoreMap":345},[349,350,353],"span",{"class":351,"line":352},"line",1,[349,354,355],{},"# Ontwerpafspraken klantportaal\n",[349,357,359],{"class":351,"line":358},2,[349,360,362],{"emptyLinePlaceholder":361},true,"\n",[349,364,366],{"class":351,"line":365},3,[349,367,368],{},"Bijgewerkt: 29 september 2026\n",[349,370,372],{"class":351,"line":371},4,[349,373,362],{"emptyLinePlaceholder":361},[349,375,377],{"class":351,"line":376},5,[349,378,379],{},"## Basis\n",[349,381,383],{"class":351,"line":382},6,[349,384,385],{},"- Hoofdkleur #1F4E79 (donkerblauw): knoppen, koppen, links.\n",[349,387,389],{"class":351,"line":388},7,[349,390,391],{},"- Tekst #1A1A1A, achtergrond #FFFFFF, vlakken #F3F5F8.\n",[349,393,395],{"class":351,"line":394},8,[349,396,397],{},"- Fout #B42318, gelukt #1E7B34. Kleur is altijd een extra\n",[349,399,401],{"class":351,"line":400},9,[349,402,403],{},"  signaal: er staat ook tekst of een icoon bij.\n",[349,405,407],{"class":351,"line":406},10,[349,408,409],{},"- Lettertype Inter; gewone tekst 16 px, koppen 24 en 20 px.\n",[349,411,413],{"class":351,"line":412},11,[349,414,415],{},"- Afstanden in stappen van 8 px; hoeken 8 px afgerond.\n",[349,417,419],{"class":351,"line":418},12,[349,420,362],{"emptyLinePlaceholder":361},[349,422,424],{"class":351,"line":423},13,[349,425,426],{},"## Componenten\n",[349,428,430],{"class":351,"line":429},14,[349,431,432],{},"- Hoofdknop: gevuld in de hoofdkleur, witte tekst. Eén per\n",[349,434,436],{"class":351,"line":435},15,[349,437,438],{},"  scherm, voor de belangrijkste handeling.\n",[349,440,442],{"class":351,"line":441},16,[349,443,444],{},"- Tweede knop: witte achtergrond, rand in de hoofdkleur.\n",[349,446,448],{"class":351,"line":447},17,[349,449,450],{},"- Knopteksten zijn werkwoorden: \"Afspraak verzetten\",\n",[349,452,454],{"class":351,"line":453},18,[349,455,456],{},"  \"Opslaan\", \"Factuur downloaden\".\n",[349,458,460],{"class":351,"line":459},19,[349,461,462],{},"- Invoervelden: label boven het veld, minstens 44 px hoog.\n",[349,464,466],{"class":351,"line":465},20,[349,467,468],{},"- Kaarten: plat, in de vlakkleur, met 16 px binnenruimte.\n",[349,470,472],{"class":351,"line":471},21,[349,473,362],{"emptyLinePlaceholder":361},[349,475,477],{"class":351,"line":476},22,[349,478,479],{},"## Gedrag\n",[349,481,483],{"class":351,"line":482},23,[349,484,485],{},"- Foutmeldingen staan direct onder het veld, in de foutkleur,\n",[349,487,489],{"class":351,"line":488},24,[349,490,491],{},"  en zeggen hoe het wél kan: \"Kies een datum na vandaag.\"\n",[349,493,495],{"class":351,"line":494},25,[349,496,497],{},"- Na opslaan verschijnt bovenin een groene balk met wat er\n",[349,499,501],{"class":351,"line":500},26,[349,502,503],{},"  gebeurd is: \"Je afspraak is verzet naar 14 oktober.\"\n",[349,505,507],{"class":351,"line":506},27,[349,508,509],{},"- Tijdens het laden blijft de knop staan, met de tekst\n",[349,511,513],{"class":351,"line":512},28,[349,514,515],{},"  \"Even geduld…\" erop.\n",[349,517,519],{"class":351,"line":518},29,[349,520,521],{},"- Een leeg overzicht legt uit wat hier komt en biedt de\n",[349,523,525],{"class":351,"line":524},30,[349,526,527],{},"  eerstvolgende stap aan: \"Nog geen afspraken. Plan je\n",[349,529,531],{"class":351,"line":530},31,[349,532,533],{},"  eerste onderhoud.\"\n",[349,535,537],{"class":351,"line":536},32,[349,538,539],{},"- Alles is met het toetsenbord te bedienen.\n",[349,541,543],{"class":351,"line":542},33,[349,544,362],{"emptyLinePlaceholder":361},[349,546,548],{"class":351,"line":547},34,[349,549,550],{},"## IJkschermen\n",[349,552,554],{"class":351,"line":553},35,[349,555,556],{},"- Inlogscherm, afsprakenoverzicht en facturenpagina, als\n",[349,558,560],{"class":351,"line":559},36,[349,561,562],{},"  schermafbeelding in de map ontwerp\u002Fijkschermen\u002F.\n",[53,564,565],{},"Bewaar het als ontwerpafspraken.md in de map van je project. Zo maak je dat bestand:",[287,567,290],{"id":568},"op-windows-1",[53,570,571],{},"Open Kladblok en plak je afspraken erin. Kies Bestand → Opslaan als, zet onderin \"Opslaan als type\" op \"Alle bestanden (*.*)\" en noem het bestand ontwerpafspraken.md. Zo wordt het een .md-bestand in plaats van een .txt-bestand.",[287,573,301],{"id":574},"op-een-mac-1",[53,576,577,578,581,582,585,586,589],{},"De snelste route is via Terminal (Programma's → Hulpprogramma's). Typ ",[180,579,580],{},"cd "," (met een spatie erachter), sleep de map van je project het Terminalvenster in en druk op Enter. Plak dan ",[180,583,584],{},"touch ontwerpafspraken.md"," en druk op Enter. Het bestand staat er; openen in TextEdit gaat met ",[180,587,588],{},"open -e ontwerpafspraken.md",". Plak je afspraken erin en bewaar.",[155,591,593],{"id":592},"stap-4-zet-de-afspraken-in-claude-design","Stap 4: zet de afspraken in Claude Design",[53,595,596],{},"Open Claude Design (claude.ai\u002Fdesign) en ga naar de instellingen voor designsystemen (Design systems). Maak een nieuw designsysteem en geef Claude drie dingen mee: je ontwerpafspraken.md, de drie schermafbeeldingen uit stap 1, en je logo als je dat hebt. Die schermafbeeldingen zijn geen overbodige luxe: Anthropic raadt zelf aan om echte voorbeelden mee te geven in plaats van alleen specificaties. Het is hetzelfde principe als het ijkvoorbeeld in je skill.",[53,598,599],{},"Claude zet er een designsysteem van in elkaar. Kijk het kritisch na: kloppen de kleurcodes, staan de knoppen erin zoals jij ze kent, is het gedrag overgenomen? Aanpassen doe je via de knop Remix, gewoon in gesprek: \"de foutkleur is #B42318, niet oranje.\" Is het goed, zet het designsysteem dan op gepubliceerd (Published). Nieuwe ontwerpen gebruiken het dan vanzelf, en in een Team- of Enterprise-account geldt dat voor iedereen in de organisatie.",[53,601,602,603,606],{},"Heeft je app een eigen verzameling componenten in code? Dan kan Claude Design het designsysteem ook uit die code opbouwen; voor projecten in React gaat dat in Claude Code met ",[180,604,605],{},"\u002Fdesign-sync",". Voor de meeste lezers is de route hierboven eenvoudiger. Menu's verschuiven weleens; zoek anders op \"design systems\" in de instellingen van Claude Design.",[155,608,610],{"id":609},"stap-5-ontwerp-het-nieuwe-scherm","Stap 5: ontwerp het nieuwe scherm",[53,612,613],{},"Nu het nieuwe scherm. Beschrijf wat de gebruiker wil bereiken, en noem de componenten en het gedrag bij naam; zo sluit je vraag aan op de afspraken:",[57,615,616],{},[53,617,618],{},"\"Ontwerp voor het klantportaal het scherm 'Afspraak verzetten'. Bovenin staat de huidige afspraak op een kaart. De klant kiest een nieuwe datum en een tijdvak (ochtend of middag) en bevestigt met de hoofdknop 'Afspraak verzetten'. Laat ook zien: de foutmelding als er geen tijdvak vrij is, de groene balk na het verzetten, en de knop tijdens het laden. Maak drie varianten van de indeling.\"",[53,620,621],{},"Waarom drie varianten? Een eerste ontwerp is zelden het beste, en kiezen is makkelijker dan beschrijven. De afspraken zorgen dat alle drie bij de rest passen; jij kiest de indeling die het best werkt. Stuur daarna bij met opmerkingen op het canvas: klik op een onderdeel en schrijf erbij wat er anders moet, zo specifiek mogelijk. \"Ruimte tussen de tijdvakken naar 16 px\" werkt beter dan \"iets luchtiger\".",[155,623,625],{"id":624},"stap-6-neem-de-proef-op-de-som-mét-en-zónder","Stap 6: neem de proef op de som, mét en zónder",[53,627,628],{},"Wil je het verschil echt zien, vraag hetzelfde scherm dan ook eens in een los gesprek, zonder afspraken en zonder designsysteem.",[57,630,631,637],{},[53,632,633,636],{},[62,634,635],{},"Zonder afspraken:"," een verzorgd scherm in een fris paars, met ronde knoppen, een kalender in een pop-up en de melding \"Oeps! Er ging iets mis 😕\". Mooi, en het past nergens bij.",[53,638,639,642],{},[62,640,641],{},"Met afspraken:"," hetzelfde donkerblauw, dezelfde knoppen, de foutmelding onder het veld met wat de klant wél kan doen (\"Deze week is alles vol. Kies een datum vanaf 12 oktober.\"), en de groene balk na het verzetten. Het scherm ziet eruit alsof het er altijd al bij hoorde.",[155,644,646],{"id":645},"stap-7-van-ontwerp-naar-bouw-en-houd-de-afspraken-bij","Stap 7: van ontwerp naar bouw, en houd de afspraken bij",[53,648,649,650,654],{},"Een ontwerp is pas af als het gebouwd is zoals het ontworpen is. Claude Design kan een af ontwerp in één keer doorgeven aan Claude Code, met alles wat nodig is om het te bouwen. Zorg dat de afspraken daar ook liggen: zet ontwerpafspraken.md in de projectmap en voeg aan je projectgeheugen (CLAUDE.md, zie ",[67,651,653],{"href":652},"\u002Fread\u002Fprojectgeheugen","les 03",") één regel toe: \"Elk scherm volgt de afspraken in ontwerpafspraken.md.\" Dan bouwt Claude Code ook de schermen die nooit langs Claude Design zijn gegaan in dezelfde stijl. In de ontwikkelwereld zie je voor zo'n bestand ook de naam DESIGN.md; kies wat in je team gebruikelijk is.",[53,656,657],{},"En houd de afspraken bij. Het verzetscherm bracht een nieuwe bouwsteen mee: de tijdvakkiezer. Die hoort nu in de afspraken, onder Componenten, en in het designsysteem in Claude Design. Zo wordt het volgende scherm weer familie van dit scherm. Laat af en toe je AI alle schermen langs de afspraken lopen, met de vraag: \"waar wijkt een scherm af van de ontwerpafspraken?\" Dat is je consistentiecheck; de controlelijst-skill uit les 01 (starter 3) is er precies voor gemaakt.",[73,659,661],{"id":660},"zelf-doen-sjabloon-en-drie-starters","Zelf doen: sjabloon en drie starters",[53,663,664],{},"Hetzelfde recept werkt voor elk product en elke huisstijl. Hier is het lege sjabloon, plus de drie toepassingen waarmee ik iedereen laat beginnen.",[340,666,668],{"className":342,"code":667,"language":344,"meta":345,"style":345},"# Ontwerpafspraken [product of merk]\n\nBijgewerkt: [datum]\n\n## Basis\n- Kleuren: [kleurcode] voor [rol], per kleur één regel.\n- Letters: [lettertype], [groottes voor tekst en koppen].\n- Afstanden en hoeken: [maten in px].\n\n## Componenten\n- [Component]: [hoe hij eruitziet]. [Wanneer je hem gebruikt.]\n\n## Gedrag\n- Bij een fout: [waar de melding staat en wat erin staat].\n- Na opslaan of versturen: [wat de gebruiker ziet].\n- Tijdens het laden: [wat er gebeurt].\n- Leeg scherm: [wat er staat, en welke stap je aanbiedt].\n\n## IJkschermen\n- [Twee of drie goedgekeurde schermen, en waar ze staan.]\n",[180,669,670,675,679,684,688,692,697,702,707,711,715,720,724,728,733,738,743,748,752,756],{"__ignoreMap":345},[349,671,672],{"class":351,"line":352},[349,673,674],{},"# Ontwerpafspraken [product of merk]\n",[349,676,677],{"class":351,"line":358},[349,678,362],{"emptyLinePlaceholder":361},[349,680,681],{"class":351,"line":365},[349,682,683],{},"Bijgewerkt: [datum]\n",[349,685,686],{"class":351,"line":371},[349,687,362],{"emptyLinePlaceholder":361},[349,689,690],{"class":351,"line":376},[349,691,379],{},[349,693,694],{"class":351,"line":382},[349,695,696],{},"- Kleuren: [kleurcode] voor [rol], per kleur één regel.\n",[349,698,699],{"class":351,"line":388},[349,700,701],{},"- Letters: [lettertype], [groottes voor tekst en koppen].\n",[349,703,704],{"class":351,"line":394},[349,705,706],{},"- Afstanden en hoeken: [maten in px].\n",[349,708,709],{"class":351,"line":400},[349,710,362],{"emptyLinePlaceholder":361},[349,712,713],{"class":351,"line":406},[349,714,426],{},[349,716,717],{"class":351,"line":412},[349,718,719],{},"- [Component]: [hoe hij eruitziet]. [Wanneer je hem gebruikt.]\n",[349,721,722],{"class":351,"line":418},[349,723,362],{"emptyLinePlaceholder":361},[349,725,726],{"class":351,"line":423},[349,727,479],{},[349,729,730],{"class":351,"line":429},[349,731,732],{},"- Bij een fout: [waar de melding staat en wat erin staat].\n",[349,734,735],{"class":351,"line":435},[349,736,737],{},"- Na opslaan of versturen: [wat de gebruiker ziet].\n",[349,739,740],{"class":351,"line":441},[349,741,742],{},"- Tijdens het laden: [wat er gebeurt].\n",[349,744,745],{"class":351,"line":447},[349,746,747],{},"- Leeg scherm: [wat er staat, en welke stap je aanbiedt].\n",[349,749,750],{"class":351,"line":453},[349,751,362],{"emptyLinePlaceholder":361},[349,753,754],{"class":351,"line":459},[349,755,550],{},[349,757,758],{"class":351,"line":465},[349,759,760],{},"- [Twee of drie goedgekeurde schermen, en waar ze staan.]\n",[155,762,764],{"id":763},"starter-1-je-huisstijl-voor-presentaties-en-documenten","Starter 1: je huisstijl voor presentaties en documenten",[53,766,767,770,771,774],{},[62,768,769],{},"Wanneer:"," je maakt presentaties, one-pagers of offertes die er elke keer net anders uitzien. ",[62,772,773],{},"Afspraken:"," kleuren, lettertypen, de plek van het logo, en per soort dia een vaste opbouw (titeldia, inhoud, afsluiting). Claude Design maakt ook presentaties en one-pagers en exporteert naar PowerPoint en pdf; met je huisstijl als designsysteem past elke nieuwe presentatie bij de vorige.",[155,776,778],{"id":777},"starter-2-de-app-of-website-die-groeit","Starter 2: de app of website die groeit",[53,780,781,783,784,786],{},[62,782,769],{}," er komen regelmatig schermen of pagina's bij, soms door verschillende mensen. ",[62,785,773],{}," het voorbeeld hierboven, met extra aandacht voor de componenten. Vaste regel: een nieuwe bouwsteen gaat eerst in de afspraken en dan pas in het ontwerp. Zo blijft de familie compleet.",[155,788,790],{"id":789},"starter-3-de-ux-controlelijst","Starter 3: de UX-controlelijst",[53,792,793,795,796,799,800,803],{},[62,794,769],{}," vlak voordat een ontwerp naar de bouw gaat. ",[62,797,798],{},"Skill:"," een controlelijst in de opbouw van les 01 die elk scherm langs vaste punten legt. Zegt elke foutmelding hoe het wél kan? Wat ziet de gebruiker tijdens het laden en bij een leeg scherm? Is het contrast voldoende, zijn de klikvlakken groot genoeg, werkt alles met het toetsenbord? Per punt: in orde, bevinding, of niet te beoordelen. ",[62,801,802],{},"Winst:"," het UX-deel dat het vaakst vergeten wordt, wordt standaard gecontroleerd.",[155,805,807],{"id":806},"vijf-lessen-één-geheel","Vijf lessen, één geheel",[53,809,810,811,815],{},"Ontwerpafspraken zijn een skill voor hoe iets eruitziet en werkt. Ze stapelen dus net zo: je huisstijl als basislaag, met per product een laag erbovenop. Het projectgeheugen (les 03) verwijst ernaar, zodat elke sessie in het project ze kent, en een subagent (les 02) kan de UX-controlelijst uitvoeren op elk nieuw scherm. In ",[67,812,814],{"href":813},"\u002Fread\u002Ftest-het-plan","les 08"," komt hetzelfde klantportaal terug, dan niet om te ontwerpen maar om de userstories erachter te toetsen.",[73,817,819],{"id":818},"valkuilen-en-gouden-regels","Valkuilen en gouden regels",[53,821,822],{},"Vijf dingen die ik bij anderen zie misgaan, plus de twee regels die je nooit loslaat.",[824,825,826,832,838,844,850],"ol",{},[81,827,828,831],{},[62,829,830],{},"Afspraken in bijvoeglijke naamwoorden."," \"Modern, fris en strak\" betekent voor elke ontwerper, en elke AI, iets anders. Schrijf exacte waarden op: kleurcodes, maten in px, het lettertype bij naam. Dan is er maar één uitkomst mogelijk.",[81,833,834,837],{},[62,835,836],{},"Alleen het uiterlijk vastleggen."," Kleuren en knoppen kloppen, maar elke foutmelding, elke laadtoestand en elk leeg scherm wordt opnieuw bedacht. Leg ook het gedrag vast; daar zit de UX, en daar haken gebruikers af.",[81,839,840,843],{},[62,841,842],{},"Een designsysteem vanaf nul."," Honderd componenten bedenken voordat er één scherm staat, is een project van maanden. Leid je afspraken af uit drie schermen die al werken, en laat ze groeien met elk nieuw scherm.",[81,845,846,849],{},[62,847,848],{},"Het prototype aanzien voor de app."," Een ontwerp uit Claude Design ziet er af uit en je kunt erdoorheen klikken, maar er zit nog geen werkend systeem achter. Plan de bouw en het testen als apart werk; de overdracht naar Claude Code is daar het begin van.",[81,851,852,855],{},[62,853,854],{},"Afspraken die achterlopen."," Elk nieuw scherm brengt nieuwe bouwstenen mee. Werk de afspraken bij zodra er een bouwsteen bijkomt, en neem ze mee in het vaste onderhoudsmoment met je skills, rollen en geheugens (eerste maandag van de maand is populair): klopt het designsysteem nog met de afspraken, en de afspraken nog met de schermen?",[57,857,858],{},[53,859,860,861,864,865,868,869,872],{},"⚠️ ",[62,862,863],{},"Twee gouden regels."," Eén: ",[62,866,867],{},"ontwerp met voorbeeldgegevens."," Schermafbeeldingen en prototypes reizen: naar Claude Design, naar collega's, soms naar een klant. Gebruik verzonnen namen, adressen en bedragen, en haal echte klantgegevens van je schermafbeeldingen voordat je ze uploadt. Upload daarnaast alleen logo's, lettertypen en beelden die je mag gebruiken. Twee: ",[62,870,871],{},"laat echte mensen het proberen voordat je bouwt."," Een AI-ontwerp ziet er af uit voordat iemand het gebruikt heeft. Laat drie gebruikers in het prototype de belangrijkste taak doen, zoals een afspraak verzetten, en kijk zonder te helpen waar ze aarzelen. En ontwerp voor iedereen: voldoende contrast, grote klikvlakken en bediening met het toetsenbord horen in je afspraken, niet op een lijstje voor later. Voor veel webwinkels en andere digitale diensten is toegankelijkheid sinds juni 2025 ook wettelijk verplicht, via de Europese toegankelijkheidswet (European Accessibility Act).",[73,874,876],{"id":875},"je-volgende-stap","Je volgende stap",[53,878,879,880,884],{},"Ontwerpen is de vijfde stap naar herhaalbaar werken met AI. Op het ",[67,881,883],{"href":882},"\u002Fai-lab\u002Fai-groeipad","AI-groeipad"," hoort ook dit bij de sprong van fase 2 naar fase 3: de stijl van je product zit niet langer in het hoofd van één ontwerper of in één goede prompt, maar in afspraken waar iedereen bij kan. Een nieuwe collega, of een nieuwe AI-sessie, ontwerpt vanaf dag één in dezelfde stijl.",[53,886,887],{},"Doe deze week één ding: schrijf de ontwerpafspraken voor één app, website of huisstijl, met minstens drie afspraken over gedrag. Zet ze in Claude Design en ontwerp één nieuw scherm of één presentatie. Leg het resultaat naast een bestaand scherm: ziet het eruit als familie?",[53,889,890,891,897],{},"De volgende les staat klaar: ",[62,892,893],{},[67,894,896],{"href":895},"\u002Fread\u002Fautomatiseren","les 06 · Automatiseren, taken die vanzelf starten",". Je weet nu hoe je werk eruit moet zien; de volgende stap is dat terugkerend werk vanzelf begint, zodat het concept er al ligt voordat jij eraan denkt.",[53,899,900,901,905],{},"Benieuwd hoe je ontwerpafspraken inricht voor jouw product of team? Een uurtje praten of een korte quickscan van je processen maakt dat meestal snel helder. ",[67,902,904],{"href":903},"\u002Fconnect","Plan een kennismaking",": een half uur, eerlijke aanbeveling, ook als die \"gewoon zelf beginnen\" is.",[73,907,909],{"id":908},"wat-vond-je-ervan","Wat vond je ervan?",[53,911,912,913,71],{},"Je bent er doorheen. Vertel me wat werkte, wat je miste en wat onduidelijk bleef. Twee zinnen zijn genoeg, en elke reactie maakt les zes beter: ",[67,914,70],{"href":69},[916,917,918],"style",{},"html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":345,"searchDepth":358,"depth":358,"links":920},[921,922,923,929,938,944,945,946],{"id":75,"depth":358,"text":76},{"id":116,"depth":358,"text":117},{"id":134,"depth":358,"text":135,"children":924},[925,926,927,928],{"id":157,"depth":365,"text":158},{"id":164,"depth":365,"text":165},{"id":186,"depth":365,"text":187},{"id":250,"depth":365,"text":251},{"id":274,"depth":358,"text":275,"children":930},[931,932,933,934,935,936,937],{"id":281,"depth":365,"text":282},{"id":310,"depth":365,"text":311},{"id":334,"depth":365,"text":335},{"id":592,"depth":365,"text":593},{"id":609,"depth":365,"text":610},{"id":624,"depth":365,"text":625},{"id":645,"depth":365,"text":646},{"id":660,"depth":358,"text":661,"children":939},[940,941,942,943],{"id":763,"depth":365,"text":764},{"id":777,"depth":365,"text":778},{"id":789,"depth":365,"text":790},{"id":806,"depth":365,"text":807},{"id":818,"depth":358,"text":819},{"id":875,"depth":358,"text":876},{"id":908,"depth":358,"text":909},"2026-09-29",null,"md",{},"05","\u002Fread\u002Fontwerpen",{"title":5,"description":55},"read\u002Fontwerpen","Ontwerpen","OsQ9l2tPzGYMAl2fvcoGzJEC8R12qctYNbu4WYhmpfc",1790711943071]