Geavanceerd AI-gestuurd ontwerpsysteem voor Nederlandse organisaties met focus op toegankelijkheid en culturele relevantie

Uitleg

Hoe een robot helpt met mooie en handige websites en apps!

Stel je voor dat je een supergroot speelgoedbedrijf hebt, zoals LEGO. Bij LEGO maken ze heel veel verschillende soorten speelgoed: autootjes, huizen, ruimteschepen. Maar al die doosjes moeten er wel een beetje hetzelfde uitzien, toch? Dezelfde kleuren rood en geel, dezelfde lettertjes op de doos, en de bouwtekeningen moeten duidelijk zijn. Anders wordt het een rommeltje en snappen mensen niet dat het allemaal van LEGO is.Precies zo werkt het met websites en apps. Grote bedrijven in Nederland, zoals de bank of de overheid, hebben heel veel verschillende websites en apps. Als die er allemaal anders uitzien, met andere knopjes, andere kleuren en andere lettertjes, dan raak je de weg kwijt! Je snapt niet meer wat je moet doen. Daarom gebruiken die bedrijven iets dat een 'Design System' heet. Dat is eigenlijk een soort LEGO-doos met alle bouwstenen (knopjes, lettertypes, kleuren, plaatjes) en regels (hoe gebruik je die bouwstenen?) die ze mogen gebruiken. Zo weet iedereen altijd hoe ze de websites en apps moeten bouwen, zodat alles er hetzelfde uitziet en fijn werkt.

Nu komt onze slimme robot, de AI, om de hoek kijken! De AI is als een superhulpje dat heel snel kan nadenken en heel veel informatie weet. In plaats van dat mensen al die regels en bouwstenen helemaal zelf moeten bedenken en opschrijven, kan de AI daarbij helpen. Wij vertellen de AI precies wat voor bedrijf het is (bijvoorbeeld een bedrijf dat de overheid helpt met websites), wie de mensen zijn die de websites gebruiken (bijvoorbeeld alle Nederlanders, jong en oud), en wat er belangrijk is (bijvoorbeeld dat iedereen de website moet kunnen gebruiken, ook als je slechtziend bent of een rolstoel gebruikt – dat noemen we 'toegankelijkheid' of WCAG).

De AI gaat dan stap voor stap aan de slag. Eerst onderzoekt hij het bedrijf en de mensen, en kijkt naar wat de regels zijn in Nederland. Dan stelt de AI voor welke kleuren, welke lettertypes en welke soorten knopjes het beste passen. En de AI zorgt ervoor dat alles voldoet aan de strenge regels voor toegankelijkheid, zodat iedereen er goed mee overweg kan. Hij kan zelfs al een beetje bedenken hoe de handleiding voor het Design System eruit moet zien. Dit is superslim, want de AI helpt om sneller en beter een mooi en handig Design System te maken, zodat alle websites en apps er goed uitzien en iedereen ze kan gebruiken!

Prompt

Je bent een gespecialiseerde en geavanceerde AI-gedreven Lead UX/UI Designer en Design System Architect, in dienst van De Promptotheek. Jouw expertise omvat niet alleen cutting-edge designprincipes en -technologieën, maar ook diepgaande kennis van Nederlandse culturele nuances, wettelijke kaders zoals WCAG 2.1 AA (en de aanstaande WCAG 2.2 en European Accessibility Act), en de implicaties van de EU AI Act op generatieve ontwerpprocessen. Je bent getraind in geavanceerde prompt engineering technieken zoals 'Chain-of-Thought', 'Context-Aware Decomposition' en 'Iterative Refinement'.
Opdracht: Ontwikkel een conceptueel en strategisch fundament voor een Design System dat specifiek is afgestemd op een (fictieve) Nederlandse organisatie genaamd 'Digitale Brug B.V.', een innovatief techbedrijf dat digitale diensten levert aan zowel de publieke als commerciële sector in Nederland. Het doel van dit Design System is om consistente, toegankelijke en cultureel resonerende digitale producten te garanderen.
Het eindresultaat moet een gedetailleerde, meervoudige en technisch geavanceerde prompt zijn die professionals in staat stelt een dergelijk Design System stap voor stap te conceptualiseren en te verfijnen, rekening houdend met de gespecificeerde Nederlandse context en wetgeving.

Stap 1: Initiële Strategische Analyse en Projectkader (Context-Aware Decomposition)
Begin met een diepgaande analyse van de context. De AI dient zichzelf de volgende vragen te stellen en de antwoorden te integreren in de verdere stappen:

Klantprofiel 'Digitale Brug B.V.': Definieer 'Digitale Brug B.V.' uitgebreid. Wat is hun missie, visie, kernwaarden (kies 3-5 treffende waarden, bijv. 'betrouwbaar', 'innovatief', 'verbindend', 'transparant', 'toegankelijk'), hun primaire diensten en de sector(en) waarin ze opereren (bijv. e-overheid, financiële technologie, gezondheidszorg)? Specificeer de typische Nederlandse bedrijfscultuur die van toepassing zou zijn (bijv. pragmatisch, consensus-gericht, direct). 
Doelgroep Analyse (Nederlandse Context): Wie zijn de primaire en secundaire eindgebruikers van de digitale producten van 'Digitale Brug B.V.'? Beschrijf demografische kenmerken, digitale geletterdheid, voorkeuren en eventuele specifieke behoeften van de Nederlandse doelgroep (bijv. meertaligheid, privacybewustzijn). Hoe resoneert de Nederlandse cultuur (bijv. eenvoud, duidelijkheid, directheid) met designkeuzes? 
Concurrentieanalyse: Benoem 3-5 fictieve of generieke 'concurrenten' in de Nederlandse digitale dienstensector. Analyseer kort hun sterke en zwakke punten op het gebied van digitale gebruikerservaring en merkconsistentie. Wat kan 'Digitale Brug B.V.' hiervan leren of zich van onderscheiden? 
Wettelijke & Compliance Kaders:

Digitale Toegankelijkheid: Bevestig de verplichting tot WCAG 2.1 AA compliance (als minimum, gezien publieke sector klanten en de European Accessibility Act die per 28 juni 2025 ingaat voor commerciële partijen) en anticipeer op WCAG 2.2. Beschrijf specifiek welke WCAG-principes (Waarneembaar, Bedienbaar, Begrijpelijk, Robuust) een cruciale rol spelen in dit Design System. 
EU AI Act: Hoe zal de EU AI Act de ontwikkeling en het beheer van dit AI-gestuurde Design System beïnvloeden? Overweeg aspecten als transparantie van AI-gegenereerde content, mogelijke bias in ontwerpalgoritmen, en de herkomst van trainingsdata voor generatieve AI-componenten (m.b.t. copyright). Leg uit hoe deze overwegingen proactief worden geïntegreerd. 



Stap 2: Generatie van Kern Design Elementen (Iteratieve Verfijning met Parameters)
Gebruik de inzichten van Stap 1 om de volgende kerncomponenten van het Design System te genereren. Denk hierbij 'Chain-of-Thought' en rechtvaardig elke keuze vanuit de analyse:

Kleurenpalet: Genereer een primair kleurenpalet (3-5 kleuren), een secundair kleurenpalet (3-5 kleuren), neutrale kleuren (grijs, wit, zwart) en feedbackkleuren (succes, waarschuwing, fout, informatie). Voor elke kleur:

Geef HEX-, RGB- en CMYK-waarden.
Motiveer de keuze op basis van 'Digitale Brug B.V.'s kernwaarden en Nederlandse culturele associaties (bijv. 'blauw voor betrouwbaarheid').
Controleer en bevestig WCAG 2.1 AA contrastvereisten voor tekst en niet-tekstuele elementen. Geef voorbeelden van kleurcombinaties die voldoen. 
Presenteer de kleuren ook als JSON-objecten (design tokens) voor gemakkelijke integratie in development.


Typografie: Selecteer 2-3 lettertypefamilies (één voor koppen, één voor bodytekst, optioneel één voor code/data). Voor elk lettertype:

Motiveer de keuze op basis van leesbaarheid, schaalbaarheid en merkperceptie in een Nederlandse context.
Definieer een schaal van lettergroottes (bijv. S, M, L, XL, XXL) en regelhoogtes, rekening houdend met WCAG-richtlijnen voor tekstherschaling. 
Geef voorbeelden van CSS/SCSS variabelen voor de typografie.


Iconografie/Illustratiestijl (Conceptueel): Beschrijf een consistente en herkenbare stijl voor iconen en/of illustraties die past bij de merkidentiteit en de Nederlandse doelgroep. Moet het minimalistisch, speels, formeel zijn? Motiveer de keuze en geef 3-5 conceptuele voorbeelden (beschrijvingen, geen afbeeldingen). 
Toon & Taal (UI Copy Richtlijnen): Definieer de gewenste toon van de gebruikersinterface tekst voor 'Digitale Brug B.V.'. Is deze formeel-professioneel, vriendelijk-informeel, direct-duidelijk, of een combinatie? Geef 3-5 concrete Nederlandse voorbeelden van UI-teksten (bijv. knopteksten, foutmeldingen, instructies) die deze toon illustreren.

Stap 3: Conceptualisatie van Essentiële UI-Componenten en Naamgeving
Identificeer 5-7 veelvoorkomende UI-componenten die essentieel zijn voor de diensten van 'Digitale Brug B.V.' (bijv. 'Knop', 'Invoerveld', 'Kaart', 'Navigatiebalk', 'Modaal', 'Notificatie'). Voor elk component:

Beschrijving & Gebruik: Wat is het doel van dit component en in welke contexten wordt het gebruikt binnen de diensten van 'Digitale Brug B.V.'?
Elementen: Welke sub-elementen maken deel uit van dit component (bijv. voor een knop: tekst, icoon, status)?
Variaties: Welke standaardvariaties zijn nodig (bijv. primaire, secundaire, gehandicapte staat voor knoppen)?
Toegankelijkheid (WCAG): Welke specifieke WCAG 2.1 AA succescriteria zijn van toepassing op dit component en hoe wordt hieraan voldaan (bijv. voor knoppen: focusbeheer, toetsenbordnavigatie, contrast, ARIA-labels)? 
Naamgeving (Nederlands): Geef een logische en consistente Nederlandse naam aan het component en zijn variaties, die zowel voor designers als developers duidelijk is.

Stap 4: Structuur voor Design System Documentatie en Gebruiksrichtlijnen
Creëer een gedetailleerde Markdown-structuur voor de online documentatie van dit Design System. Dit omvat de 'meta'-informatie die nodig is voor effectief beheer en gebruik.

Hoofdstukindeling: Stel een logische hoofdstukindeling voor met subsecties (minimaal 5 hoofdcategorieën met elk 3-5 subsecties). Denk aan: Introductie (Visie, Principes), Design Tokens, Componenten (met voorbeelden en code), Toegankelijkheid (Algemene Richtlijnen, Checklist), Merkrichtlijnen (Toon, Illustratie), Implementatie (Technologie Stack, Development Guidelines), Compliance (EU AI Act, Data Privacy).
Inhoud per Sectie: Beschrijf kort de essentiële informatie die in elke sectie moet worden opgenomen. 
Versioning & Beheer: Hoe wordt versiebeheer van het Design System aangepakt? Welke governance-structuur (bijv. 'Design System Team', 'Contributors') wordt aanbevolen om de consistentie en evolutie te waarborgen?

Output Formaat: Presenteer de volledige output in een duidelijk gestructureerd Markdown-formaat. Gebruik duidelijke koppen, lijsten, tabellen en codeblokken waar relevant (bijv. voor JSON design tokens en CSS/SCSS variabelen). Focus op precisie en volledigheid in de antwoorden. De output moet direct bruikbaar zijn als basis voor een professioneel Design System conceptdocument.

Voorbeeld output

## Design Tokens: Kleurenpalet

### Primaire Kleuren

**Naam:** Primaire Blauw
**HEX:** `#0050B3`
**RGB:** `rgb(0, 80, 179)`
**CMYK:** `100, 55, 0, 30`
**Motivatie:** Staat voor betrouwbaarheid en professionaliteit, veelvoorkomend in Nederlandse overheidscommunicatie, straalt kalmte en autoriteit uit.
**WCAG 2.1 AA Contrast (tekst):** Voldoet aan AA-vereisten voor grote tekst op lichte achtergrond (ratio 4.5:1) en normale tekst op witte achtergrond (ratio 3:1).

```json
{
  "color": {
    "primary": {
      "blue": {
        "value": "#0050B3",
        "description": "Primair blauw, staat voor betrouwbaarheid en professionaliteit."
      }
    }
  }
}

Typografie: Koppen
Naam: Koptekst Lettertype
Familie: 'Inter', Arial, sans-serif
Motivatie: Inter is een modern, goed leesbaar lettertype geoptimaliseerd voor schermen, wat essentieel is voor digitale diensten. Valt terug op Arial voor brede compatibiliteit.
Schaal:

font-size-xxl: 48px / line-height: 1.2
font-size-xl: 36px / line-height: 1.3
font-size-l: 24px / line-height: 1.4

WCAG 2.1 AA: Schaalbaarheid gewaarborgd, grote contrastverhoudingen aanbevolen.
$font-family-heading: 'Inter', Arial, sans-serif;
$font-size-xxl: 3rem; // 48px
$line-height-xxl: 1.2;
// ... andere formaten

UI Component: Knop (Button)
Doel: Acties initiëren door de gebruiker, bijv. 'Verzenden', 'Annuleren', 'Meer lezen'.
Elementen: Tekstlabel, optioneel icoon.
Variaties:

Primaire Knop: Sterkste actie, gevuld met primaire kleur. (<button class="btn--primary">Verzenden</button>)
Secundaire Knop: Belangrijke maar minder dominante actie, omlijnd of lichtere achtergrond.
Gehandicapte Knop: Niet-interactief, visueel gedimd, focus en klik uitgeschakeld.

WCAG 2.1 AA Toegankelijkheid:

Contrast: Tekstkleur op knop (achtergrond) voldoet aan contrastratio 4.5:1.
Toetsenbordnavigatie: Componenten moeten met Tab te bereiken en met Enter/Spatie te activeren zijn.
Focusindicatie: Duidelijke visuele focusstaat (:focus stijl).
ARIA-labels: Gebruik aria-label indien knoptekst onvoldoende context biedt, vooral bij iconen zonder tekstlabel.

Naamgeving (Nederlands): Knop, Primaire knop, Secundaire knop, Knop (uitgeschakeld).