Toggle sidebar

Blokken genereren met een Custom GPT

Met een Custom GPT in ChatGPT laat je sneller een eerste versie van een Mach3Blocks-blok maken: een hero, FAQ, call-to-action, kaartenrij of een ander blok. De GPT heet Mach3Blocks Generator en levert de technische basis: HTML en LESS, en alleen waar nodig JavaScript. Die code blijft standaard volledig binnen de Mach3Blocks-bouwstenen.

Die code plak je niet blind in je website. Je plaatst hem in de Blok code editor in Mach3Blocks, controleert het resultaat en werkt waar nodig zelf bij.

In dit artikel lees je hoe je het zippakket met GPT-bestanden gebruikt, hoe je de GPT instelt en hoe je de gegenereerde code op de juiste plek in Mach3Blocks zet.

Wanneer is dit handig?

Deze werkwijze is vooral handig als je:

  • sneller een nieuw blok wilt opzetten
  • al weet wat voor blok je nodig hebt, maar de code niet zelf wilt uitschrijven
  • een bestaand blok wilt aanpassen, een screenshot of data wilt omzetten, of bestaande code wilt laten ombouwen
  • een technische basis wilt die je daarna zelf controleert
  • werkt met eigen HTML, LESS en eventueel JavaScript in Mach3Blocks

Je gebruikt de GPT dus vooral als startpunt. De uiteindelijke controle en afwerking doe je altijd zelf in Mach3Blocks.

Wat kan de GPT?

De GPT kent vijf workflows:

  1. Nieuw blok vanaf een tekstprompt — je beschrijft het blok, de GPT bouwt het op.
  2. Bestaand blok aanpassen — je levert de huidige code aan, de GPT wijzigt gericht en houdt de structuur gelijk.
  3. Screenshot of afbeelding omzetten — de GPT bouwt de dichtstbijzijnde Mach3Blocks-structuur na.
  4. Data of CSV omzetten — de GPT leidt een structuur af en zet de gegevens om naar een blok.
  5. Bestaande code analyseren en ombouwen — de GPT bekijkt code en bouwt die waar mogelijk om naar Mach3Blocks-code.

Voor elke workflow is er een apart artikel met een uitgewerkt voorbeeld. Dit artikel legt de basis uit die voor alle vijf geldt.

Naast deze workflows kun je op elk moment om een Canvas-preview vragen: een live weergave van het blok in ChatGPT zelf, zodat je het resultaat ziet voordat je de code naar Mach3Blocks kopieert. Een Canvas-preview is een visuele controle en geen vervanging voor de controle in Mach3Blocks.

Wat heb je nodig?

Voor deze werkwijze heb je het volgende nodig:

  • toegang tot Mach3Blocks
  • code-toegang in Mach3Blocks (de Blok code editor)
  • toegang tot een omgeving waarin je een Custom GPT kunt aanmaken (ChatGPT)
  • het meegeleverde zippakket met GPT-bestanden
  • optioneel: je eigen thema-code (de CSS van je website), zodat de output beter aansluit op je bestaande stijl
ChatGPT-schermen kunnen wijzigen

De knoppen, namen en volgorde in ChatGPT kunnen later anders zijn dan in dit artikel. Gebruik dit artikel daarom vooral als werkwijze. Controleer bij twijfel ook de actuele uitleg van OpenAI: Creating and editing GPTs.

Stap 1: Pak het zippakket uit

Download het meegeleverde zippakket met GPT-bestanden en pak het uit op je computer. Na het uitpakken zie je een instructiebestand en meerdere knowledge-bestanden.

Download: Zip met GPT-bestanden

Instructiebestand

  • instructions.md

Knowledge-bestanden

  • 01-workflows-and-context.md
  • 02-output-contract.md
  • 03-structure-and-elements.md
  • 04-less-and-theme.md
  • 05-data-attributes.md
  • 06-images-icons-assets.md
  • 07-javascript-and-components.md
  • 08-forms-and-complex-components.md
  • 09-maatwerk-and-custom-code.md
  • 10-validation-checklist.md
  • 11-preview-and-canvas.md
  • reference-elements.json
  • reference-properties.json
  • standard-theme.css

Laat de bestandsnamen exact zoals ze zijn. Hernoem de bestanden niet voordat je ze uploadt naar je GPT.

Stap 2: Maak een nieuwe Custom GPT aan

  • Open ChatGPT op het web en ga naar het overzicht van GPTs. Je vindt dit meestal via Explore GPTs.
  • Kies daar voor Create. Daarmee open je het scherm waarin je de GPT configureert.

Stap 3: Geef je GPT een duidelijke naam

Geef de GPT een naam en beschrijving waaraan je later meteen ziet waarvoor je hem gebruikt. Bijvoorbeeld:

  • Naam: Mach3Blocks Generator
  • Beschrijving: Genereert, bewerkt en analyseert Mach3Blocks-blokken. Standaard 100% Mach3Blocks-compliant; maatwerk blijft minimaal en wordt altijd gelabeld.

Zolang voor jou duidelijk is dat deze GPT bedoeld is voor Mach3Blocks, is de naam goed.

Stap 4: Plaats de instructions

Open het bestand instructions.md op je computer in een tekst-editor. Kopieer de volledige inhoud en plak die in het veld Instructions van je Custom GPT.

In dit bestand staat onder andere:

  • hoe de GPT zich moet gedragen
  • welke output geleverd wordt (HTML en LESS, en alleen waar nodig JavaScript)
  • welke Mach3Blocks-structuur en kleurmodus aangehouden worden
  • wanneer JavaScript wel of niet gebruikt wordt

Zorg dat je echt de volledige inhoud kopieert. Als een deel ontbreekt, kan de GPT ander gedrag gaan vertonen dan bedoeld.

Stap 5: Upload de knowledge-bestanden

Upload daarna alle overige bestanden naar het onderdeel Knowledge van je GPT: de bestanden 01-workflows-and-context.md tot en met 11-preview-and-canvas.md, plus reference-elements.json, reference-properties.json en standard-theme.css.

Deze bestanden geven de GPT de toegestane elementen, classes en properties van Mach3Blocks en de standaard thema-styling. Daarmee weet de GPT welke bouwstenen wél mogen en hoe de code opgebouwd moet worden.

Stap 6: Test of de GPT goed start

Voordat je echte blokken laat maken, is het verstandig om de GPT kort te testen. Open de preview van je GPT en geef bijvoorbeeld deze opdracht:

Maak een hero-sectie voor een lokale bakkerij.

De GPT hoort dan niet meteen code te geven. Als de setup goed staat, vraagt de GPT eerst naar de stylingcontext, bijvoorbeeld:

Wil je het standaardthema gebruiken, of wil je je eigen thema-code toevoegen?

Krijg je direct HTML, LESS of JavaScript terug? Dan is de setup waarschijnlijk niet goed overgenomen. Controleer dan of de volledige inhoud van instructions.md in het veld Instructions staat.

Stap 7: Kies standaardthema of eigen thema-code

Daarna geef je aan of je met het standaardthema wilt werken of dat je je eigen thema-code wilt toevoegen.

  • Kies standaardthema als je snel een eerste versie wilt laten maken.
  • Kies eigen thema-code als het blok beter moet aansluiten op de bestaande stijl van je website: kleuren, spacing, knoppen, typografie of andere visuele details. Je plakt of uploadt dan je eigen thema-CSS.
  • Wil je eigen thema-code gebruiken, dan heb je mogelijk hulp nodig van je websitebeheerder of iemand met code-toegang tot de website.

De thema-code bepaalt welke styling al bestaat, en dus wat de GPT in de blok-LESS nog moet toevoegen of overschrijven.

Stap 8: Beschrijf het blok dat je wilt maken

Beschrijf zo concreet mogelijk wat je nodig hebt. Hoe duidelijker je opdracht, hoe bruikbaarder de eerste versie meestal is. Een goede prompt bevat bijvoorbeeld:

  • het type blok
  • de teksten die erin moeten komen
  • knoppen of links
  • de gewenste stijl
  • onderdelen zoals USP's, kaarten, iconen of afbeeldingen

Voorbeeld:

Maak een Mach3Blocks hero-sectie voor een lokale bakkerij.

Inhoud:

  • Titel: Ambachtelijk brood uit Gouda
  • Tekst: Dagelijks vers gebakken met lokale ingrediënten.
  • Primaire knop: Bekijk assortiment
  • Secundaire knop: Neem contact op
  • Drie USP's: Vers gebakken, Lokale ingrediënten, Bestellen voor morgen

Stijl: warm maar modern, rustige achtergrond, duidelijke call-to-actions.

De GPT levert de output normaal gesproken in deze volgorde:

  1. HTML
  2. LESS
  3. JavaScript, maar alleen als dat nodig is

Wat je verder terugkrijgt:

  • Afbeeldingen en iconen staan in de code als Mach3Blocks-notatie, bijvoorbeeld src='file:ID' of src='lib:ID'. De GPT vraagt je dus niet om afbeeldingen te uploaden en gebruikt geen {{ image }}- of {{ icon }}-flags. De juiste afbeeldingen koppel je later in Mach3Blocks.
  • Vraag je om een formulier, dan krijg je de opmaak van het formulier terug.
Formulieren verzenden niet vanzelf

De GPT levert alleen de opmaak van een formulier. Verzenden, opslaan en spam-bescherming werken pas nadat je het formulier in het CMS hebt geconfigureerd. Ga er dus niet vanuit dat een gegenereerd formulier meteen e-mails verstuurt.

Stap 9: Zet de code in Mach3Blocks

De gegenereerde code plaats je daarna in de Blok code editor.

  • Ga in de editor naar de pagina waarop je het blok wilt gebruiken. Voeg een geschikt blok toe of open een maatwerkblok, bijvoorbeeld van het type Sectie.
  • Selecteer het blok en open via de rechter werkbalk de knop </>. Kies daarna voor Blok code. Je opent zo de Blok code editor met de tabbladen HTML, LESS en JavaScript.
  • Plaats de HTML in het tabblad HTML en de LESS in het tabblad LESS. Plaats JavaScript alleen in het tabblad JavaScript als de GPT dit ook echt heeft meegegeven.
  • Klik daarna op Opslaan.

Stap 10: Controleer het blok

Controleer het blok altijd in de editor en in de preview van de pagina. Gebruik Test publiceren om het resultaat te bekijken voordat je op Publiceren klikt.

Let in ieder geval op:

  • staat alle inhoud op de juiste plek?
  • klopt de volgorde van de onderdelen?
  • werken de knoppen en links?
  • ziet de spacing er goed uit op desktop én op mobiel?
  • blijft de structuur netjes binnen de Mach3Blocks-opbouw: Sectie, Container, Rij, Kolom en Element?
  • is JavaScript echt nodig, en werkt eventuele JavaScript zonder foutmeldingen?

Een GPT neemt je veel werk uit handen, maar de output blijft een eerste versie. Controle in Mach3Blocks blijft daarom belangrijk.

Stap 11: Werk gericht bij

Is het blok nog niet helemaal goed? Dan hoef je meestal niet opnieuw te beginnen. Geef de GPT een gerichte vervolgvraag of pas de code zelf verder aan. Je kunt ook eerst om een Canvas-preview vragen om een aanpassing live te zien.

Voorbeelden van een gerichte vervolgvraag:

  • "Maak de knoppen rustiger en geef de tekst meer ruimte."
  • "Gebruik minder hoogte in de hero op mobiel."
  • "Laat de JavaScript weg en houd het blok volledig statisch."
  • "Houd dezelfde inhoud, maar maak de layout compacter."

Werk liever gericht bij dan dat je steeds opnieuw een heel blok laat genereren. Dat geeft meestal sneller een beter resultaat.

Voorbeelden

Voorbeeld 1: FAQ-blok vanaf tekst

  • Start: je hebt een lege Sectie onderaan de servicepagina en wilt een FAQ met vijf vragen.
  • Actie: je kiest het standaardthema en vraagt: "Maak een FAQ-blok met vijf vragen en antwoorden over levertijden, retourneren, betaalmethoden, garantie en contact." De GPT levert HTML en LESS en voegt géén eigen JavaScript toe, omdat het open- en dichtklappen door Mach3Blocks zelf wordt geregeld. Je plakt de HTML in het tabblad HTML, de LESS in het tabblad LESS en klikt op Opslaan.
  • Resultaat: het FAQ-blok staat op de pagina. Met Test publiceren zie je dat de vragen open- en dichtklappen. Klopt alles, dan klik je op Publiceren.

Voorbeeld 2: Bestaande kaartenrij aanpassen

  • Start: je hebt een kaartenrij met drie kaarten, maar op mobiel staan de kaarten te dicht op elkaar.
  • Actie: je kiest de workflow "bestaand blok aanpassen", plakt de huidige HTML en LESS uit de Blok code editor en vraagt: "Houd dezelfde inhoud, maar geef de kaarten meer ruimte op mobiel." De GPT past alleen de LESS aan en houdt de structuur en teksten gelijk.
  • Resultaat: je vervangt de inhoud van het tabblad LESS, klikt op Opslaan en controleert met Test publiceren dat de kaarten op mobiel meer ruimte hebben.

Veelvoorkomende problemen

De GPT geeft meteen code zonder eerst iets te vragen

  • Controleer of je de volledige inhoud van instructions.md in het veld Instructions hebt geplakt.
  • Als een deel ontbreekt, slaat de GPT de vraag naar de stylingcontext over. Plak de volledige inhoud opnieuw.

De GPT geeft JSON of extra technische metadata terug

  • Controleer of de instructions volledig zijn overgenomen.
  • De output hoort te beginnen met HTML, daarna LESS, en alleen daarna JavaScript als dat nodig is. Klopt dit niet, plak de instructions dan opnieuw.

De code past niet goed bij mijn website

  • Controleer of je het standaardthema of je eigen thema-code hebt gekozen.
  • Kies eigen thema-code en plak je thema-CSS, zodat kleuren, knopstijlen en typografie aansluiten op je bestaande website.

In de output staan file:- of lib:-verwijzingen in plaats van afbeeldingen

  • Dit is verwacht gedrag: de GPT gebruikt de Mach3Blocks-notatie voor afbeeldingen en iconen en vraagt bewust niet om uploads.
  • Koppel in Mach3Blocks je eigen afbeeldingen of iconen op de plek van deze verwijzingen.

Het blok werkt, maar is lastig bewerkbaar in de editor

  • Controleer of de HTML-structuur netjes binnen de Mach3Blocks-opbouw (Sectie, Container, Rij, Kolom, Element) blijft.
  • Heeft de GPT maatwerk gebruikt, dan geeft de GPT dat expliciet aan. Maatwerk is meestal niet via de visuele editor instelbaar; laat het weg of houd het klein als je het blok goed bewerkbaar wilt houden.

Ik weet niet of ik een gewoon blok of een maatwerkblok moet gebruiken

  • Gebruik een gewoon blok als je het blok maar op één plek nodig hebt.
  • Gebruik een maatwerkblok als je hetzelfde blok op meerdere pagina's binnen dezelfde website wilt hergebruiken.

Goed om te onthouden

  • De GPT helpt je sneller op weg, maar vervangt je eigen controle niet.
  • De GPT werkt standaard volledig binnen de Mach3Blocks-bouwstenen; maatwerk blijft minimaal en wordt altijd gelabeld.
  • Gebruik JavaScript alleen als het nodig is. Veel gedrag, zoals een slider, carousel, accordion of formulier, regelt Mach3Blocks zelf.
  • Afbeeldingen en iconen komen als file:- of lib:-notatie; je uploadt niets in ChatGPT.
  • Laat de bestandsnamen uit het pakket ongewijzigd.
  • Beschrijf je blok zo concreet mogelijk.
  • Test altijd eerst met Test publiceren voordat je een pagina met Publiceren live zet.