Blokken genereren met een Custom GPT van Chat-GPT

Met een Custom GPT kun je sneller een eerste versie van een blok maken voor Mach3Blocks. Denk aan een hero, FAQ, call-to-action, kaartenrij of een ander maatwerkblok.

De GPT helpt je met de technische basis: HTML, LESS en alleen als het nodig is JavaScript. Die code plak je daarna niet zomaar blind in je website, maar controleer je eerst in Mach3Blocks en werk je waar nodig verder bij.

In dit artikel lees je hoe je de GPT-bestanden gebruikt, hoe je de GPT instelt en hoe je de gegenereerde code daarna 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 helemaal zelf wilt uitschrijven
• een technische basis wilt laten maken 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 heb je nodig?

Voor deze werkwijze heb je het volgende nodig:

• toegang tot Mach3Blocks
• code-toegang in Mach3Blocks
• toegang tot een omgeving waarin je een Custom GPT kunt aanmaken
• het zipbestand met de meegeleverde GPT-bestanden
• optioneel: eigen website-code of theme CSS, zodat de output beter aansluit op je bestaande website

Stap 1: Download het zipbestand

Download eerst het zipbestand met de GPT-bestanden en pak dit uit op je computer.

Download:
Zip met GPT files

• Na het uitpakken zie je onder andere een instructions-bestand en meerdere knowledge-bestanden.

Instructions-bestand

• t2c-gpt-instructions.md

Knowledge-bestanden

• 01-conversation-flow.md
• 02-output-contract.md
• 03-html-constraints.md
• 04-less-constraints.md
• 05-theme-integration.md
• 06-vanilla-js-policy.md
• 07-validation-checklist.md
• standard-website-theme.css
• v5-schema.json
• m3b-allowed-elements.json
• m3b-allowed-css-properties.json
• m3b-element-css-map.json

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. Maak daar een nieuwe Custom GPT aan.
• Je vindt dit meestal via Explore GPTs of het GPT-overzicht. Kies daarna voor Create.
• Daarmee open je het scherm waarin je de GPT kunt configureren.

Stap 3: Geef je GPT een duidelijke naam

• Geef de GPT een naam waaraan je later meteen ziet waarvoor je hem gebruikt.

Bijvoorbeeld:

• Naam: Mach3Blocks Blokken Generator
• Beschrijving: Genereert Mach3Blocks HTML, LESS en optionele JavaScript voor blokken.

De naam hoeft niet ingewikkeld te zijn. Zolang voor jou duidelijk is dat deze GPT bedoeld is voor Mach3Blocks, is het goed.

Stap 4: Plaats de instructions

• Open het bestand t2c-gpt-instructions.md op je computer in een tekst-editor.

• Kopieer de volledige inhoud van dit bestand en plak die in het veld Instructions van je Custom GPT.

In dit bestand staat onder andere:

• hoe de GPT zich moet gedragen
• in welke volgorde de output moet komen
• welke Mach3Blocks-structuur aangehouden moet worden
• wanneer JavaScript wel of niet gebruikt mag worden

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

Stap 5: Upload de knowledge-bestanden

Upload daarna de knowledge-bestanden naar het onderdeel Knowledge van je GPT.

Upload deze bestanden:

• 01-conversation-flow.md
• 02-output-contract.md
• 03-html-constraints.md
• 04-less-constraints.md
• 05-theme-integration.md
• 06-vanilla-js-policy.md
• 07-validation-checklist.md
• standard-website-theme.css
• v5-schema.json
• m3b-allowed-elements.json
• m3b-allowed-css-properties.json
• m3b-element-css-map.json

Deze bestanden geven de GPT extra context over Mach3Blocks, de toegestane structuur en de manier waarop 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:

Wil je de standaard website-code gebruiken, of wil je je eigen website-code toevoegen?

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

Stap 7: Kies standaard code of eigen website-code

• Daarna geef je aan of je met de standaard website-code wilt werken of dat je eigen website-code wilt toevoegen.
• Kies voor standaard website-code als je snel een eerste versie wilt laten maken.
• Kies voor eigen website-code als je wilt dat het blok beter aansluit op de bestaande stijl van je website. Denk aan kleuren, spacing, knoppen, typografie of andere visuele details.
• Wil je eigen website-code gebruiken, dan heb je mogelijk hulp nodig van je websitebeheerder of iemand met code-toegang tot de website.

Stap 8: Beschrijf het blok dat je wilt maken

Beschrijf daarna 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
• gewenste stijl
• eventuele 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

Als alles goed staat, geeft de GPT normaal gesproken output in deze volgorde:

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

Stap 9: Zet de code in Mach3Blocks

• De gegenereerde code plaats je daarna in Mach3Blocks.
• 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.

Plaats de code op de juiste tabbladen:

• HTML in het tabblad HTML
• LESS in het tabblad LESS
• 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.

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?
• ziet het blok er ook goed uit op mobiel?
• is JavaScript echt nodig?
• werkt eventuele JavaScript zonder foutmeldingen?

Een GPT kan je veel werk uit handen nemen, 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.

Voorbeelden van 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.

Veelvoorkomende problemen

De GPT geeft meteen code zonder eerst iets te vragen

• Controleer of je de volledige inhoud van t2c-gpt-instructions.md goed hebt geplakt in Instructions.
• Als een deel ontbreekt, kan de GPT de gewenste gespreksflow overslaan.

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.

De code past niet goed bij mijn website

• Gebruik dan niet alleen de standaard website-code, maar kies voor eigen website-code toevoegen.
• Geef relevante stylingcontext mee, zoals kleuren, knopstijlen, typografie of bestaande theme CSS.

Het blok werkt, maar is lastig bewerkbaar in de editor

• Controleer dan of de HTML-structuur netjes binnen de Mach3Blocks-structuur blijft.

Ik weet niet of ik een gewoon blok of 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 controle niet.
• Gebruik JavaScript alleen als het echt nodig is.
• Laat de bestandsnamen uit het pakket ongewijzigd.
• Beschrijf je blok zo concreet mogelijk.
• Test altijd eerst in de editor voordat je een pagina publiceert.