Vibe Coding med skoleGPT

Forløbet lægger sig i krydsfeltet mellem teknologiforståelse, computationel tankegang og entreprenørskab. Fokus flyttes fra traditionel syntaksindlæring (at skrive fejlfri kode manuelt) til systemisk tænkning, prompt design og iteration:

• Eleven som arkitekt, AI som håndværker: Eleverne skal forstå, at sprogmodellen ikke tænker selv; den kræver præcis styring, logisk strukturering og kritiske valg for at skabe et brugbart produkt.

• Fejlfinding som vilkår (Debugging): Vibe coding er sjældent “one-shot”. Undervisningen rammesætter fejlbeskeder og uventet kodeadfærd som naturlige trin, hvor eleven skal beskrive problemet for assistenten for at udbedre det.

• Datasikkerhed og gennemsigtighed: Ved at benytte SkoleGPT arbejder eleverne i et GDPR-sikkert miljø, der ikke lagrer eller træner på deres data, hvilket giver et trygt rum for digital skabelse.

Før eleverne åbner en browser, skal idéen rodfæstes analogt. Målet er at skabe en lille, afgrænset webapplikation – for eksempel et simpelt spil (f.eks. sten-saks-papir eller en klikker), en interaktiv quiz, en personlig lommeregner eller en fanklubside med funktionelle elementer.

• Fra problem til idé: Eleverne vælger et emne eller et lille problem, som kan løses på én webside.

• Papir-wireframing: Eleverne tegner deres layout på papir (low-fidelity prototype):

  • Hvor skal overskrifter og tekst placeres?

  • Hvilke interaktive elementer skal der være (knapper, inputfelter, billeder)?

  • Hvad sker der, når brugeren klikker på knappen?

• Funktionsliste: Eleverne formulerer 3-5 konkrete krav til siden i punktopstilling, som senere skal bruges i deres dialog med modellen.

For at kvalificere idéen inden kodningen benytter forløbet Feedbackbrillerne til skoleGPT fra Fonden for Entreprenørskab (FFE). Eleverne arbejder i makkerpar og skifter mellem faste perspektiver for at give konstruktiv kritik

Brug brillerne fra https://ffefonden.dk/grundskolen/feedbackbriller/

Efter feedbackrunden bruger eleven 5-10 minutter på at justere sin papirskitse og funktionsliste, så udgangspunktet for kodningen er knivskarpt.

Eleverne logger ind på SkoleGPT og tilgår den skræddersyede assistent via forudindstillet prompt-link:

Direkte link til assistenten:

Åbn Kodeassistenten på SkoleGPT

Arbejdsprocessen forløber i tre trin:

1. Dialog før kode: Eleven præsenterer sin idé og sine krav. Kodeassistenten er instrueret til først at stille afklarende spørgsmål (om farver, funktioner og opbygning), hvilket tvinger eleven til at reflektere over detaljerne, før koden genereres.

2. Lokal test: Når assistenten leverer HTML/CSS/JavaScript i én samlet kodeblok, vejleder den eleven i at:

   • Kopiere koden over i et simpelt tekstprogram (f.eks. Kladdeblok på Windows eller TextEdit/Noter på Mac – sat til ren tekst).

   • Gemme filen med filendelsen .html (f.eks. index.html).

   • Dobbeltklikke på filen for at åbne den direkte i en webbrowser.

3. Iterativ vibe coding: Eleven afprøver siden og prompter rettelser tilbage til assistenten: “Knappen flytter sig ikke, når jeg trykker”, “Gør baggrunden mørkegrøn” eller “Tilføj en pointtæller”

Forløbet afsluttes med en interaktiv test- og delingsfase, hvor klasserummet fungerer som et testlaboratorium:

• Fernisering med rotation: Alle elever lader deres HTML-side køre på skærmen i browseren. Eleverne cirkulerer rundt to og to og tester hinandens løsninger.

• “Tænk højt”-test: Testeren sætter sig ved computeren og tænker højt undervejs (“Nu trykker jeg her, fordi jeg tror, der sker X…”), mens skaberen observerer uden at gribe ind eller forklare.

• Fælles opsamling i plenum:

  • Hvor opstod der misforståelser mellem elevens intention og SkoleGPT’s kode?

  • Hvad krævede det af sproget og præcisionen at få assistenten til at ændre specifikke detaljer?

  • Hvilke fordele og faldgruber er der ved at lade en sprogmodel skrive koden frem for at gøre det i hånden?