ChatGPT för lärare
Allt du behöver veta om ChatGPT som vibekodningsverktyg — från konto till första projektet.
Du har förmodligen redan hört talas om ChatGPT. Kanske har du använt det för att skriva ett brev eller sammanfatta en text. Men ChatGPT är också ett av de mest tillgängliga verktygen för att vibekoda undervisningsresurser — och den här guiden visar dig hur du faktiskt kommer igång med det.
Varför ChatGPT?
Av alla AI-verktyg som lämpar sig för vibekodning är ChatGPT det som flest lärare redan känner till. Det sänker tröskeeln: det finns en gratisnivå, det kräver inget tekniskt kunnande för att starta, och GPT-4o — modellen som ingår i gratisversionen — är riktigt duktig på att generera komplett HTML-kod.
Det finns också ett praktiskt skäl: ChatGPT producerar gärna hela HTML-filer i ett enda svar. Det är precis det format vi vill ha för vibekodade resurser — en fil som du kan öppna direkt i webbläsaren och dela med dina elever utan extra installation.
Vad är GPT-4o?
GPT-4o är namnet på en av OpenAIs senaste AI-modeller. Du behöver inte förstå hur den fungerar tekniskt — det viktiga är att den är bra på att förstå dina instruktioner och skapa fungerande kod. "4o" uttalas "four-oh" på engelska.
Skapa ett konto
Att komma igång med ChatGPT tar ungefär tre minuter. Du behöver en e-postadress eller ett Google-konto.
Gå till chat.openai.com
Öppna din webbläsare och navigera till chat.openai.com. Du kan också söka på "ChatGPT" i Google — den officiella sidan från OpenAI är det du letar efter.
Klicka på 'Sign up'
Välj "Sign up" (inte "Log in" — det är om du redan har ett konto). Du kan registrera dig med din e-postadress eller med ett befintligt Google- eller Microsoft-konto. Välj det som är smidigast för dig.
Bekräfta din e-postadress
Om du registrerar dig med e-post får du ett bekräftelsemejl. Klicka på länken i mejlet för att aktivera ditt konto.
Logga in och prova
Nu är du inne. Du möts av en chattgränssnitt där du kan börja skriva direkt. Det finns ingen lång introduktionsprocess — du kan sätta igång med din första prompt omedelbart.
Skolkonto eller privatkonto?
Registrera dig gärna med din privata e-postadress för att komma igång snabbt. Fråga sedan din IT-ansvarige om skolan har någon organisation med ChatGPT — en del kommuner har avtal med OpenAI som ger tillgång till bättre modeller via skolans konto.
Gratis vs Plus
ChatGPT finns i en gratis version och i en betald version som heter Plus och kostar 20 dollar i månaden (ungefär 210 kronor). Vad får du egentligen för pengarna?
Gratisversionen ger dig:
- Tillgång till GPT-4o-mini — en snabb och kapabel modell
- Begränsad tillgång till GPT-4o (fullt kapabel, men med en daglig gräns)
- Möjlighet att ladda upp bilder och filer
- Tillgång till webben (ChatGPT kan söka på internet)
Plus-versionen ger dig dessutom:
- Obegränsad tillgång till GPT-4o
- Canvas-läget — ett redigeringsläge speciellt byggt för kod och text (mer om det nedan)
- DALL-E för att generera bilder direkt i chatten
- Tillgång till nyare modeller när de släpps
För vibekodning av undervisningsresurser räcker gratisversionen för de flesta projekt. Dagsgränsen för GPT-4o är generös, och de flesta lärare nöjer sig väl med det. Vill du iterera snabbt på ett komplext projekt utan att stanna upp är Plus ett rimligt alternativ — men börja med det gratis och se om du behöver mer.
Din första vibekodning-prompt
Nu till det roliga. Låt oss skapa något konkret. I det här exemplet skapar vi ett enkelt ordövningsspel för spanska i åk 8 — elever ska matcha spanska ord med deras svenska översättningar.
Här är en prompt du kan kopiera och klistra in direkt i ChatGPT:
Skapa ett matchningsspel i HTML för åk 8 i spanska. Eleverna ska koppla ihop 10 spanska ord med deras svenska översättningar. Använd vardagliga ord som hus, skola, mat, vatten, vän, dag, natt, bok, tid och familj. Gör det som ett drag-och-släpp-spel där eleverna drar det spanska ordet till rätt svenska ord. Lägg till ett poängräknare och ett meddelande när alla par är rätt matchade. Designen ska vara enkel och fräsch med pastellfärger. Allt ska vara i en enda HTML-fil med all CSS och JavaScript inkluderat direkt i filen. Mobilanpassad design.
Lägg märke till vad som gör den här prompten effektiv:
- "en enda HTML-fil med all CSS och JavaScript inkluderat direkt i filen" — det här är den viktigaste meningen. Den säger åt ChatGPT att leverera allt i ett enda dokument som fungerar utan internetuppkoppling eller extra filer.
- Konkret ämnesinnehåll — du anger exakt vilka ord som ska ingå, så du slipper redigera generiskt innehåll i efterhand.
- Tydliga krav — drag-och-släpp, poängräknare, avslutsmeddelande. Ju mer specifik du är, desto bättre resultat.
- Målgrupp — "åk 8" hjälper AI:n att bedöma rätt svårighetsnivå och språk i instruktionerna.
När ChatGPT svarar får du ett kodblock med HTML. Kopiera allt mellan html och , klistra in det i en tom textfil, spara den som spanska-matchning.html och öppna den i din webbläsare. Det är allt.
Tips för bättre resultat
ChatGPT kan producera riktigt bra vibekodade resurser — men du kommer att märka att resultaten varierar beroende på hur du formulerar dig. Här är de tips som gör störst skillnad:
Be alltid om en enda HTML-fil
Det vanligaste misstaget är att ChatGPT ger dig kod uppdelad i separata filer (en HTML-fil, en CSS-fil, en JavaScript-fil). Det är svårare att hantera. Specificera alltid: "Allt i en enda HTML-fil med all CSS och JavaScript inline." Det är den formuleringen som fungerar bäst.
Beskriv det visuella. "Fräscht och modernt utseende" ger ett bättre resultat än ingenting alls. Vill du ha en specifik färg, ett visst typsnitt eller en viss känsla — skriv det.
Begär responsiv design. Lägg alltid till "mobilanpassad design" eller "fungerar på mobil och surfplatta" i din prompt. Det säkerställer att resursen fungerar oavsett vilken enhet dina elever använder.
Ange språk på gränssnitt. Skriv "all text i spelet ska vara på svenska" om du vill undvika att knappar och meddelanden dyker upp på engelska.
Iterera i samma chatt. Om resultatet inte är vad du ville — fortsätt i samma konversation. Skriv bara vad som behöver ändras: "Gör bakgrunden mörkblå istället", "Lägg till en restart-knapp", "Minska antalet frågor till 5." ChatGPT minns vad det redan skapat i samma chatt.
Be om felsökning om det går fel. Ibland genereras kod som inte fungerar som det ska. Klistra då tillbaka problemet i chatten och skriv: "Det här fungerar inte — gör om det." Det löser sig nästan alltid inom ett par försök.
Klistra aldrig in elevdata i prompten
När du skriver prompter i ChatGPT skickas texten till OpenAIs servrar. Skriv aldrig in elevnamn, personnummer eller annan personlig information i dina prompter. Skapa resurser med generellt innehåll — och anpassa till dina elever utanför AI-verktyget.
Canvas-läget
Om du uppgraderar till Plus får du tillgång till Canvas — ett redigeringsläge som är speciellt utformat för att arbeta med kod och längre texter. Istället för att koden visas i chatt-bubblor öppnas den i ett separat panel där du kan markera delar av koden och be ChatGPT ändra just den delen.
Det är som att ha en programmerare sittande bredvid dig. Du kan peka på en knapp i koden och skriva "gör den här knappen rund och grön" — utan att behöva beskriva var i koden knappen finns. Canvas hittar det åt dig.
För iterativt arbete med komplexa resurser är Canvas en märkbar förbättring. För ett enkelt quiz eller memory-spel behöver du det inte — gratisversionen och en vanlig chatt fungerar utmärkt.
Begränsningar
ChatGPT är ett kraftfullt verktyg, men det är inte perfekt. Det är bra att känna till var gränserna går så att du inte blir förvånad.
Komplex kod kan bli trasig. För enkla till medelkomplexa resurser fungerar ChatGPT väldigt bra. Men ju fler funktioner du stoppar in i en och samma prompt, desto större är risken att något inte fungerar som det ska. Lösningen: bygg upp resursen steg för steg, ett lager i taget, och testa mellan varje steg.
Fakta kan vara felaktiga. ChatGPT kan ibland hitta på fakta som låter trovärdiga men är fel — ett fenomen som kallas hallucination. Det spelar särskilt stor roll om du ber den generera frågor och svar om historiska händelser, vetenskapliga fakta eller liknande. Granska alltid det pedagogiska innehållet med ämneskritiska ögon innan du delar resursen med elever.
Minnet nollställs mellan chattar. Varje ny chatt börjar från noll. ChatGPT minns inte resurser du skapat i tidigare sessioner. Spara alltid din HTML-fil lokalt — och om du vill fortsätta arbeta med en resurs, börja chatten med att klistra in den befintliga koden.
Inte byggt för komplexa flerfilsprojekt. Om du vill skapa något som kräver en databas, inloggning eller ett mer avancerat gränssnitt — då är ChatGPT ensamt inte rätt verktyg. Då är Lovable eller Cursor bättre alternativ.
ChatGPT är ett utmärkt första verktyg för vibekodning: tillgängligt, välkänt och duktigt på att generera kompletta HTML-filer. Kom ihåg att alltid be om "en enda HTML-fil med all CSS och JavaScript inline", iterera i samma chatt, och granska alltid fakta i det genererade innehållet innan det möter dina elever.
Nästa steg
Nu vet du hur ChatGPT fungerar som vibekodningsverktyg. Nästa steg är att prova Claudes motsvarighet — och se hur de skiljer sig åt när det gäller att skapa undervisningsresurser.
Claude för lärare
Anthropics Claude är ett starkt alternativ till ChatGPT — med några unika fördelar för vibekodning. Lär dig hur det skiljer sig och när du ska välja Claude.