Het bouwpalet: onderdelen bij hun naam

Als je een tool bouwt met AI, kun je niet met je vinger op het scherm wijzen. Je kunt alleen typen. Typ je 'verander dat ding daar', dan moet de AI gokken wat je bedoelt — en vaak gokt hij verkeerd, of verandert hij te veel tegelijk. Ken je de naam van elk onderdeel, dan kun je precies één ding aanwijzen: 'maak de bewerken-knop groen' verandert alleen die knop, en verder niets.

Elk scherm is opgebouwd uit vaste onderdelen met vaste namen. Een knop bestaat in drie soorten: de primaire knop voor de hoofdactie (opvallend, met een volle kleur), de secundaire knop voor bijzaken (rustig, vaak alleen een randje) en de tekstknop die eruitziet als een link. De vuistregel: maak per scherm maar één knop primair. Voor het tonen van meerdere items kies je tussen een card (een blok met een beetje informatie en een eigen knop), een lijst (één regel per item) en een tabel (rijen en kolommen, om te vergelijken).

Laat je de gebruiker kiezen, dan hangt het juiste onderdeel af van de situatie: radioknoppen bij weinig opties waaruit je er één kiest, een dropdown bij veel opties, checkboxes als er meerdere tegelijk mogen, een toggle voor aan of uit, en een schuifregelaar voor een waarde binnen een bereik. Formulieren bestaan uit invoervelden met een label (de vaste naam erboven) en soms een hint (een lichtgrijs voorbeeld in het veld).

Daarnaast zijn er onderdelen voor indeling en feedback: tabs om binnen één scherm te wisselen, een navigatiebalk om naar een ander scherm te gaan, een modal om iets te laten bevestigen voordat het gebeurt, een toast als korte melding die vanzelf verdwijnt, en een badge om een status als 'Betaald' of 'Open' te tonen. Ook de toestanden van een onderdeel hebben namen, zoals hover (de muis hangt erboven) en uitgeschakeld (grijs, nog niet klikbaar).

In deze module leer je al deze onderdelen kennen, elk met een afbeelding en herkenbare voorbeelden. Daarna pas je ze meteen toe: eerst verbouw je een kaal oefenscherm, daarna verbeter je het eigen product waarmee je in module 1 begon.

Na afloop kun je elk van deze leerdoelen aantonen — elk behaald doel komt op je certificaat te staan.

• Je geeft aan waar je vooral beter op wilt kunnen sturen, zodat de voorbeelden daarbij aansluiten.
• Je begrijpt waarom je gerichtere wijzigingen krijgt als je een onderdeel bij zijn naam noemt.
• Je kent het verschil tussen een primaire, secundaire en tekstknop.
• Je weet dat een scherm maar één primaire knop nodig heeft en past dat toe.
• Je weet wanneer je bij elkaar horende informatie in een card groepeert.
• Je kiest bewust tussen een lijst en een tabel, op basis van hoeveel gegevens elk item heeft.
• Je kent formulieren, invoervelden, labels en hints en weet waar ze voor dienen.
• Je kent dropdowns, radioknoppen, checkboxes, toggles en schuifregelaars en herkent ze aan hun werking.
• Je kiest radioknoppen als er weinig opties zijn waaruit je er één kiest.
• Je kiest een dropdown als er veel opties zijn die niet allemaal zichtbaar hoeven.
• Je weet wanneer je tabs, een navigatiebalk of een accordion vraagt.
• Je weet wanneer je een modal, tooltip of toast inzet, bijvoorbeeld voor een bevestiging.
• Je weet wanneer je een badge of een voortgangsbalk gebruikt.
• Je kent de toestanden van een onderdeel (hover, actief, uitgeschakeld, focus) en wijst ze bij naam aan.
• Je weet dat veelgebruikte functies zoals een zoekbalk met één opdracht te bouwen zijn en kiest de passende.
• Je laat losse tekst ombouwen tot een nette card met passende knoppen.
• Je voegt een statuslabel (badge) toe aan je scherm.
• Je laat een bevestigingsvenster (modal) verschijnen bij verwijderen.
• Je past een interactie-toestand aan door hem bij naam te noemen.
• Je verbetert twee onderdelen van je eigen product en benoemt ze bij naam.
• Je past een interactie-toestand toe op je eigen product en bewaart het resultaat.

Ongeveer 60 minuten · 13 onderdelen

Deze module is onderdeel van Vibe coding: de complete lijn waarin je met AI je eigen tools bouwt, met twaalf maanden toegang en een certificaat per module. Bekijk Vibe coding.

Inclusief certificaat met behaalde leerdoelen en verificatienummer.

Deze module is voor iedereen die al een eerste tool met AI heeft gebouwd — bijvoorbeeld in module 1 — en merkt dat de AI niet altijd doet wat je bedoelt. Je hebt geen ontwerp- of programmeerervaring nodig; je leert alleen de woorden waarmee je precies kunt sturen.

Na deze module benoem je elk onderdeel van een scherm bij zijn naam en geef je opdrachten als 'maak de opslaan-knop primair' of 'zet de klanten in een tabel in plaats van een lijst'. Je hebt het oefenscherm verbouwd en twee onderdelen van je eigen product verbeterd, dat je opnieuw hebt bewaard.

• De AI verandert het verkeerde als ik iets vraag aan te passen — Noem het onderdeel bij zijn naam en zeg precies wat er moet veranderen: 'maak de tekst op de verwijderknop kleiner' in plaats van 'maak dat ding netter'. Dan hoeft de AI niets te raden en raakt hij niets anders aan.
• Dropdown of radioknoppen, wat kies ik? — Bij weinig opties (ongeveer twee tot vijf) waaruit de gebruiker er één kiest: radioknoppen, want alles blijft zichtbaar. Bij veel opties: een dropdown, anders staat het scherm vol. Mogen er meerdere tegelijk: checkboxes.
• Lijst of tabel voor mijn gegevens? — Toon je één of twee dingen per item, dan volstaat een lijst. Wil je per item meer gegevens naast elkaar vergelijken, zoals naam, bedrag en datum, dan kies je een tabel. Losse items met elk een eigen knop passen in cards.
• Mijn scherm staat vol even opvallende knoppen — Maak per scherm maar één knop primair: de hoofdactie, zoals 'opslaan'. De rest maak je secundair (rustig randje) of een tekstknop. Zo ziet de gebruiker in één oogopslag wat de bedoeling is.