De Kit: bladeren, voorvertoningen en een module toevoegen

De Explorer heeft precies drie niveaus, en elk staat in het eigen adres van de pagina, niet alleen in de componentstatus: het categorieraster (/projects/kit of /projects/<id>/kit), de modulelijst van één categorie (voeg ?cat=<key> toe) en de volledige detailpagina van één module (voeg &module=<id> toe). Daardoor doet de Terugknop van je browser altijd het juiste, en is de detailpagina van een module een echte, deelbare link. Stuur iemand direct naar 'hier is precies wat het Offerte- of Schatting-aanvraagformulier oplevert' in plaats van uit te leggen waar hij moet klikken. Escape gaat één niveau terug, net als Terug.

Geopend vanuit een project (/projects/<id>/kit) weet de pagina welk project je bekijkt, zodat ze kan tonen wat er al op staat en je direct eraan kunt toevoegen. Geopend los (/projects/kit, via de link op het Kit-tabblad, of rechtstreeks), zijn het dezelfde drie niveaus zonder projectspecifieke informatie: handig om te bekijken voordat je beslist wat je gaat bouwen, of om iemand de catalogus te laten zien zonder een specifiek project te openen.

Bovenaan het categorieraster splitst dezelfde schakelknop als overal in aiKit de hele catalogus in twee: Sitekit zijn secties en functies die onderdeel worden van de website of app zelf (pagina's, formulieren, galerijen, winkel, boeken, SEO); Zakelijke toolkit zijn tools die naast het project draaien in plaats van erin (marketingautomatisering, facturatie, CRM, personeelstools, rapportages). Elke categorietegel toont hoeveel modules erin zitten, en een badge 'N nu beschikbaar' zodra minstens één ervan een module 'Nu beschikbaar' is (zie hieronder).

Het zoekveld boven de categorieën zoekt op modulenaam of beschrijving in de VOLLEDIGE catalogus tegelijk — zowel Sitekit als Zakelijke toolkit, ongeacht welke schakelknop is geselecteerd — dus zoeken naar 'factuur' vindt de module ook terwijl je Sitekit bekijkt.

Geopend vanuit een project, en alleen zolang je niet zoekt, verschijnt er boven het categorieraster een rij 'Aanbevolen voor dit project' wanneer aiKit echte suggesties heeft: eenvoudige, niet-AI-regels die overeenkomen met het type project (een website krijgt een offerteformulier, een contactformulier, een showcase met beoordelingen, lokale SEO en FAQ-pagina's voorgesteld; een online winkel krijgt winkelwagen en afrekenen, herstel van verlaten winkelwagens en productbeoordelingen; en zo verder voor landingspagina's, apps, beheersystemen, dashboards, klantenportalen, blogs en marketingautomatiseringsprojecten), plus een paar trefwoordovereenkomsten met de doeltekst van het project (als je 'offerte', 'boeking', 'beoordeling', 'e-mail', 'factuur' of 'online verkopen' noemt, verschijnt de bijpassende module met zijn eigen korte reden). Alles wat al op het project staat, wordt weggelaten en de lijst is beperkt tot zes.

Elke module heeft een van twee statuslabels, en de formulering is bewust letterlijk, geen marketingtaal. 'Nu beschikbaar' betekent dat de module een van de geteste modules van de bouwmotor is: echte code die een werkelijke pagina weergeeft met voorbeeldgegevens in plaats van jouw gegevens, precies dezelfde template die een live site krijgt. 'Op maat voor jou' betekent dat de module een echt, gepland onderdeel van de catalogus is dat nog nergens wordt weergegeven: als je het kiest, wordt het aan het plan toegevoegd en wordt er een echt werkitem aangemaakt, en de module wordt gebouwd in de eigen code van de site, in de eigen huisstijl en tekst, net zoals elke andere AI-wijziging — er ligt alleen vandaag nog geen geteste template klaar.

Geen van beide statussen betekent 'niet echt' of 'hypothetisch'. Beide zijn dingen die aiKit daadwerkelijk voor je zal bouwen. Het enige verschil dat het label aangeeft, is of je de afgewerkte vorm nu kunt zien of je die moet voorstellen aan de hand van een beschrijving en een schema.

Als je een categorie opent, zie je elke module erin als kaart: een miniatuur, de naam van de module, het statuslabel, een korte beschrijving van één regel, een rij chips 'Het best voor' (maximaal drie), en 'In dit project' als de module al is toegevoegd (wanneer je binnen een project bekijkt). De miniatuur van een module 'Nu beschikbaar' is een kleine live voorbeeld van de echte pagina, pas geladen wanneer hij in beeld scrolt en beperkt tot zes live miniaturen tegelijk op het scherm, zodat een lange categorie de pagina niet vertraagt; alles daarboven toont een eenvoudige laadplaceholder totdat het echt zichtbaar is. De miniatuur van een module 'Op maat voor jou' is hetzelfde illustratieve schema als hieronder beschreven, alleen kleiner — behalve bij modules met een werkend voorbeeld (zie hieronder), waarvan de kaart de echte voorbeeldsite verkleind toont, een badge 'Werkend voorbeeld · N variaties' en een knop 'Bekijk hoe het werkt' in plaats van 'Bekijk details'. 'Bekijk details' opent de eigen pagina van de module.

Bij een Direct beschikbaar-module is de voorbeeldweergave een echte iframe van de daadwerkelijk geteste pagina, op volledig formaat, in een klein browservenster met een Desktop/Telefoon-schakelaar die het venster echt verkleint, zodat je kunt zien hoe het eruitziet op een telefoon (op een echte telefoon wordt de schakelaar vervangen door een eenvoudig label "Telefoonvoorbeeld" en opent het venster gescrolld naar het formulier zelf, zodat je de velden ziet en niet alleen de bovenkant). Het venster vervaagt onderaan; "Volledig voorbeeld openen" eronder opent de hele pagina in een nieuw tabblad, en een bijschrift eronder noemt het voorbeeldbedrijf waarvan de gegevens worden gebruikt. Binnen een project past een schakelaar "Tonen in de kleuren van deze site" hetzelfde voorbeeld opnieuw aan met de merkkleuren van het project (gehaald uit de #hex-codes in de merknotities van het briefje) en de projectnaam, zodat je iets ziet dat dichter bij je echte site ligt en niet bij een algemeen voorbeeld.

Bij een Op maat gemaakt-module is er geen live iframe; je krijgt in plaats daarvan dezelfde illustratieve wireframe als in de categorielijst, groter getekend: een eenvoudig SVG-diagram met enkele lijnen van de vorm van de indeling (de velden van een formulier, het raster van een agenda, de tegels van een dashboard, welk type scherm bij die module past) met een paar korte labels uit de eigen voorbeeldgegevens van de module. Onder elk van deze staat altijd een bijschrift dat nooit wordt verwijderd: "Illustratie van de indeling. Jouw versie is ontworpen om bij je site te passen." Het staat er speciaal zodat een schets van de vorm nooit wordt verward met een af, op merk afgestemd voorbeeld.

Werkende voorbeelden (2026-10-04): een groeiend aantal Op maat gemaakt-modules slaat de schets over en opent in plaats daarvan een volledige, klikbare voorbeeldsite, volledige breedte boven de details. Alle twaalf E-commerce / Webwinkel-modules openen dezelfde voorbeeld-aardewerkwinkel, Juniper Kiln, elk op het onderdeel waar die module over gaat: de catalogus (filteren, sorteren, zoeken, een product openen en een glazuur en maat kiezen; de foto en de prijs veranderen), het winkelwagentje en de afrekening (aantallen wijzigen, artikelen verwijderen, WELCOME10, FREESHIP of GIFT-2580 invoeren, de bezorgtijd schatten op postcode en afrekenen naar een bevestigingspagina), betaalopties (kaart, Betaal in 4 en wallet-knoppen), verzendtarieven, kortingscodes en cadeaubonnen, productreviews (filteren op sterren of foto's, als nuttig markeren, er een schrijven), bundels en extra's, btw (wijzig de bezorgstaat en de btw-regel verandert), klantaccounts (inloggen, opnieuw kopen, een pakket volgen, een retour starten), bestelmails (de bevestiging-, verzonden- en bezorgd-mails, met een werkende volgpagina), retouren en ruilen (de bestelling zoeken, artikelen en een reden kiezen, een retourlabel krijgen) en voorraad (een Eigenaar-weergave waarin het wijzigen van de voorraad verandert wat klanten zien). Alle tien Online cursussen & digitale producten-modules openen een voorbeeld-broodschool, Rise & Crumb: een les afspelen (snelheid, ondertiteling), markeren als voltooid, zien hoe de voortgangsring zich vult, de quiz maken, inschrijven vanuit de gratis preview, het certificaat bekijken, een vraag stellen onder een les, een digitale download kopen, een cursusbundel kiezen of een extra bij het afrekenen aanvinken, en overschakelen naar de Eigenaar-weergave om lessen te hernoemen, te herordenen, toe te voegen of te depubliceren en in te stellen wanneer elke week opengaat. Bij de module voor de releaseplanning staat boven het venster een rij Tijd voorbeeld met Een week vooruit (en Terug naar vandaag), zodat je vergrendelde lessen op hun datum kunt zien openen.

Boven het venster: een rij keuzes per variant die de module biedt (bijvoorbeeld Winkelindeling: Raster, Lijst of Uitgelicht; Winkelwagen: Uitschuifbare winkelwagen of Winkelwagenpagina plus Afrekenen: Op één pagina of Stap voor stap; Vrijgaveregel: Op vaste data, Dagen na aanmelding of Na afronden van de laatste les). Een keuze tekent de voorbeeldsite direct opnieuw in die variant en wordt opgeslagen in het paginaadres (?v=…), zodat een link naar een bepaalde variant kan worden gedeeld. Desktop en Telefoon verkleinen het venster zodat de voorbeeldsite zich aanpast zoals op een telefoon (op een echte telefoon is dit een eenvoudig label "Telefoonweergave"). Reset zet de voorbeeldsite terug zoals hij begon. Een korte rij "Te doen" laat zien waarop je eerst kunt klikken, en de beschrijving van elke gekozen variant staat onder het venster. Binnen een project met merkkleuren in het briefje wisselt "Tonen in de kleuren van deze site" de hoofdkleur van de voorbeeldsite voor die van het project (alleen als die kleur donker genoeg is om witte knoptekst leesbaar te houden).

Niets in een werkend voorbeeld bereikt een server. Er is geen betaalverbinding: de afrekening is gemarkeerd als "Voorbeeld: er wordt niets in rekening gebracht en er wordt geen bestelling verstuurd", het kaartnummer is een vast, alleen-lezen voorbeeld, en wallet-knoppen (Apple Pay, Google Pay, PayPal) tonen alleen een opmerking. Er wordt geen e-mail verstuurd, geen review geplaatst en niets opgeslagen; wanneer je de pagina verlaat, is alles vergeten. De voorbeeldbedrijven, producten, personen en prijzen zijn verzonnen. Het bijschrift onder het venster zegt dat ook: "Werkend voorbeeld met voorbeeldgegevens van een verzonnen bedrijf. Jouw versie gebruikt je eigen producten, prijzen, teksten en merk. Hier wordt niets in rekening gebracht, opgeslagen of verzonden." Elke andere Op maat gemaakt-module toont nog steeds de illustratie van de indeling.

• Wat de bezoeker ziet: een genummerde, duidelijke uitleg stap voor stap van wat iemand die de module gebruikt daadwerkelijk ervaart.
• Wat je krijgt: wat de module aan de projecteigenaar oplevert (leads die ergens echt worden opgeslagen, een status die je kunt bijwerken, en meer).
• Kenmerken en, alleen voor een module met echte, in de catalogus gedefinieerde varianten, een set selecteerbare kaarten "Kies de variant" direct in dit gedeelte (de eerste is standaard geselecteerd, met een klein vinkje), zodat een echte keuze tussen twee opties hier wordt gemaakt in plaats van handmatig te worden ingetypt.
• Waarom het ertoe doet: de eerlijke reden waarom een bedrijf dit zou willen.
• Hoe het wordt aangepast (Direct beschikbaar) of Varianten om uit te kiezen (Op maat gemaakt): wat er echt anders aan kan worden gemaakt.
• Werkt het best voor: dezelfde chips met bedrijfstypes als op de kaart, volledig getoond.
• Hoe het wordt gebouwd — één eenvoudige zin die precies uitlegt hoe deze module tot stand komt (een geteste pagina die de engine nu weergeeft, of door de AI tijdens een bouwbeurt in de site ingebouwd), inclusief een opmerking als er een externe account nodig is, zoals voor betalingen of kaarten.

Onderaan staat "Toevoegen aan <projectnaam>" (of "je project" als je nog geen project hebt gekozen). Als er voor de module aanpassingsideeën zijn opgeslagen, verschijnen die eerst als checklist: met het label "Voorgestelde aanpassingen" voor een module die direct klaar is, of "Kies de varianten die je wilt" voor een module die voor jou is gemaakt. Als je er een aanvinkt, wordt precies die regel toegevoegd aan wat verzonden wordt, en niet alleen een stil vinkje.

Voor een module met een werkende voorbeeldweergave staat het paneel in de linkerkolom onder de voorbeeldweergave en begint het met "Jouw variant": de variant die je hebt gekozen in de keuzerijen van de voorbeeldweergave (bijvoorbeeld "Winkelwagen: Winkelwagenpagina · Afrekenen: Stap voor stap"). Wat er in de voorbeeldweergave staat op het moment dat je op Toevoegen drukt, wordt vastgelegd: het wordt opgeslagen in de briefing van het project bij die module, en het werkitem vermeldt "Variant: …", zodat degene die het bouwt precies die lay-out maakt. Heeft een module ook benoemde opties in het gedeelte Kenmerken, dan vraagt het daar "Wat is het belangrijkst voor jou?", zodat de twee keuzes niet door elkaar lopen.

"Wat moet er voor jou anders zijn?" is een vrij tekstveld met dezelfde spraakknop als overal in aiKit, plus een knop "Foto of PDF bijvoegen" (alleen afbeeldingen en PDF's, tot 2,5 MB per bestand) voor een logo, een referentiefoto of een specificatieblad. Bijgevoegde bestanden verschijnen daar als verwijderbare chips. Als de module echte, specifieke vragen heeft die beantwoord moeten worden voordat hij goed gebouwd kan worden, staan die onder "Wat we je gaan vragen", elk met een eigen optioneel tekstveld. Zo kun je ze vooraf beantwoorden in plaats van later te wachten tot je ernaar gevraagd wordt.

"Toevoegen aan plan" is altijd beschikbaar zodra je in een echt project zit: het legt je keuze vast in de briefing van het project (hetzelfde plan waar de pagina Sitemap en de projectpagina uit lezen) en maakt een echt werkitem aan in het tabblad Feedback, gemarkeerd als "Wachten op ons", precies zoals elk ander verzoek. "Toevoegen en nu bouwen" staat er naast, maar alleen zodra het project al echte bestanden heeft om te bewerken: de eerste bouwbeurt is klaar of de site staat al online. Het doet dezelfde twee dingen en laat dan direct dit werkitem verwerken door dezelfde AI-editor die Repareren met AI gebruikt, zonder aparte wachtrij. Een module die al in het project staat, wordt meteen geweigerd met de duidelijke melding "al in dit project", zodat er geen dubbele komt.

Zodra het is verstuurd, vervangt een bevestiging de knoppen en laat zien wat er echt is gebeurd: de eenvoudige melding "Toegevoegd aan het plan als werkitem" of, bij een verzoek om nu te bouwen, de werkelijke status (gestart, of de specifieke reden waarom het niet kon, zoals in de wacht staan voor goedkeuring vóór uitvoering). Daaronder staan twee links rechtstreeks naar "Plan openen" en "Verzoeken bekijken", zodat je nooit hoeft af te vragen waar het is gebleven.

Op /projects/kit, met dezelfde echte inlog als de rest van het dashboard voor gehoste projecten, zonder dat je een project nodig hebt, werkt alles precies hetzelfde totdat je iets probeert toe te voegen. Drukken op "Toevoegen aan een project" (de knop heet zo in plaats van "Toevoegen aan plan" als er geen project is geladen) opent "Aan welk project toevoegen?", een kleine kiezer met elk project op je account. Kies er een en je gaat direct naar de eigen Kit Explorer van dat project, met precies dezelfde module nog open, klaar om het toevoegen af te ronden. Heb je nog geen projecten, dan zegt de kiezer dat duidelijk en biedt hij een directe link "Start een project →" aan in plaats van je vast te laten zitten.