Skip to main content

Prompt Engineering 2

1, Introductie

We hebben in prompt engineering 1 geleerd waaraan een goede prompt moest voldoen.

Dit zijn de basis kenmerken van een goede prompt. De eerste drie kenmerken moet je prompt altijd aan voldoen!

    1. Context - een goede prompt heeft voldoende contexrt.
    2. Details/Specifiek - een goed prompt heeft voldoende details en is zo specifiek mogelijk.
    3. Duidelijkheid - een goed eprompt is duidelijk.
    4. Doelgericht - een goede prompt is doelgericht.
    5. Vorm - in een goede prompt kan je de output in een bepalade vorm vragen.
    6. Toon -door in de prompt de toon op te nemen, bepaal je de vorm van het antwoord.

In deze module gaan we 13 advanched prompt-technieken leren. Deze technieken heb je niet altijd nodig maar het is handig om deze technieken te kennen.

Bovendien zijn de meeste techniekken ook toepasbaar in als 'problem solving' technieken.

 

📘 Prompting technieken 1

(laagdrempelig, direct toepasbaar)

  1. Isolate the problem
    Focus alleen op het onderdeel dat opgelost moet worden.
    Laat overbodige context of code weg, zodat de AI zich op het juiste richt.

  2. Provide lists in bullet points
    Structuur helpt de AI om overzichtelijke en duidelijke antwoorden te geven.

  3. Provide the order if you ask for multiple tasks
    Geef een logische volgorde bij samengestelde opdrachten.

  4. Geef voorbeelden (few-shot prompting)
    Laat zien wat je bedoelt met een input/output-voorbeeld.

🧠 Intermediate prompting technieken

(voor betere controle en outputkwaliteit)

  1. Stel voorwaarden of beperkingen
    Geef grenzen aan zoals "gebruik max. 100 woorden" of "geen disclaimers".

  2. Werk in stappen (chain-of-thought prompting)
    Vraag de AI om stap voor stap te redeneren of eerst een plan te maken.

  3. Gebruik een rol (role prompting)
    Laat de AI een specifieke rol of expertise aannemen (bijv. leraar, programmeur, leerling).

  4. Vraag om alternatieven of variaties
    Stimuleer de AI om meerdere ideeën of invalshoeken te geven.

🔬 Geavanceerde prompting technieken

(voor reflectie en optimalisatie)

  1. Iteratief verbeteren
    Vraag de AI om haar eigen antwoord te verbeteren of herschrijven.

  2. Gebruik prompt templates
    Werk met vaste structuren zoals: context, doel, outputvorm, toon.

  3. Vraag om zelfvragen (self-questioning)
    Laat de AI zelf bedenken welke vragen nodig zijn om het probleem goed op te lossen.

  4. Gebruik kritiek als leermoment (prompt debugging)
    Laat de AI uitleggen waarom een prompt niet goed werkte en hoe je die kunt verbeteren.

1. Isolate the problem

Uitleg

Richt je prompt op het exacte probleem. In plaats van een hele codepagina te geven, geef alleen het stuk code of de situatie waar het om draait. Hoe minder ruis, hoe beter de AI kan helpen.

Je ziet dus dat je voor een goede prompt de code goed moet kunnen lezen.

Opdracht

Je hebt een PHP-pagina met een formulier dat soms geen gegevens doorstuurt.

👉 Maak een prompt voor ChatGPT waarin je alleen het relevante deel van de code opneemt en waarin je de AI vraagt om te helpen bij het vinden van de fout.

Houd nog steeds rekening met de context, details en duidelijkheid.

In dit voorbeeld zou je makkelijk de hele code kunnen verturen, maar in de echte wereld heb je veel meer code en daarom is dit een goede oefening in het isoleren van code die relevant is.

Tip: je kan ook andersom redeneren en alle code waarvan je zeker weet die goed is of niets met het formulier te maken heeft weghaald.

<?php
$bericht = "";
$success = false;

if ($_SERVER["REQUEST_METHOD"] === "POST") {
    if (!empty($_POST["naam"])) {
        $naam = $_POST["naam"];
        $bericht = "Hallo, " . htmlspecialchars($naam) . "!";
        $success = true;
    } else {
        $bericht = "Je moet je naam invullen.";
    }
}
?>

<!DOCTYPE html>
<html lang="nl">
<head>
    <meta charset="UTF-8">
    <title>Contactpagina</title>
    <style>
        body { font-family: Arial; background-color: #f0f0f0; margin: 2rem; }
        .container { background: white; padding: 2rem; border-radius: 8px; max-width: 600px; margin: auto; }
        .error { color: red; }
        .success { color: green; }
        footer { margin-top: 4rem; font-size: 0.8em; text-align: center; color: #666; }
    </style>
    <script>
        function checkForm() {
            const naam = document.getElementById("naam").value;
            if (naam.trim() === "") {
                alert("Naam is verplicht!");
                return false;
            }
            return true;
        }
    </script>
</head>
<body>

<div class="container">
    <h1>Neem contact met ons op</h1>

    <form method="get" action="" onsubmit="return checkForm();">
        <label for="naam">Naam:</label><br>
        <input type="text" id="naam" name="naam" placeholder="Vul je naam in"><br><br>
        <label for="email">E-mail:</label><br>
        <input type="email" id="email" name="email" placeholder="voorbeeld@domein.nl"><br><br>
        <label for="vraag">Je vraag:</label><br>
        <textarea id="vraag" name="vraag"></textarea><br><br>
        <button type="submit">Verzenden</button>
    </form>

    <?php if ($bericht): ?>
        <p class="<?= $success ? 'success' : 'error' ?>"><?= $bericht ?></p>
    <?php endif; ?>
</div>

<footer>
    &copy; 2025 Webdev Company | <a href="#">Privacybeleid</a>
</footer>

</body>
</html>

Inleveren

De prompt die het probleem uiteindelijk vond en waain alleen de relevante code staat.

De prompt voldoet tevens minimaal aan de basis kenmerken van een prompt: context, details en duidelijkheid.

2, Provide lists in bullet points

Uitleg


Als je meerdere dingen van een AI vraagt, is het belangrijk om structuur aan te brengen in je prompt. Door bullet points of genummerde lijsten te gebruiken:

  • Maak je je prompt overzichtelijk.

  • Zorg je ervoor dat de AI geen onderdelen vergeet.

  • Help je jezelf om duidelijk te verwoorden wat je wilt.

Bullet points zijn dus niet alleen netjes — ze zijn slim.

Opdracht

Hieronder zie je een afbeelding van een eenvoudige webpagina met meerdere onderdelen.

Het plaatje kan je hirr downloaden: Berglandschap.png.

image.png

  1. Bestudeer de afbeelding goed. Wat zie je allemaal op de pagina?

  2. Bedenk wat je aan de AI zou vragen om precies deze pagina te laten maken.

  3. Noteer minstens 4 onderdelen van de pagina als bullet points in je prompt.

Inleveren

  1. Prompt
  2. Resultaat in code
  3. Schermafdruk van resultaat

3. Provide the order if you ask for multiple tasks

Uitleg

Als je aan de AI vraagt om meerdere dingen tegelijk te doen, dan is het belangrijk dat je duidelijk maakt in welke volgorde dat moet gebeuren.

AI volgt jouw instructies letterlijk — dus als de volgorde onduidelijk is, krijg je soms een rommelig of onvolledig resultaat.

Door een logische nummering of expliciete volgorde te geven, help je de AI om stapsgewijs te werken.

Voorbeeld (vaag):
Maak een contactpagina met HTML en verwerk de gegevens met PHP.

Voorbeeld (duidelijk):

  1. Maak eerst een HTML-pagina met een formulier (naam + e-mail)
  2. Voeg daarna de PHP-code toe die de ingevulde gegevens toont

Opdracht

Je wilt de AI vragen om je te helpen met het maken van een eenvoudige contactpagina.

Die moet bestaan uit:

  • Een HTML-formulier waarin je je naam en e-mailadres kunt invullen
  • Een PHP-script dat de gegevens verwerkt en netjes op het scherm toont
  1. Schrijf een prompt waarin je deze twee onderdelen vraagt in de juiste volgorde.
  2. Gebruik een genummerde lijst of maak duidelijk met woorden wat “eerst” en “daarna” moet gebeuren.
  3. Houd rekening met de context, details en duidelijkheid.

Inleveren

  1. Je volledige prompt
  2. De gegenereerde HTML + PHP code
  3. Een screenshot van het resultaat in de browser