Guide · Avancerad

Skapa med kod — gör ett underlag till en interaktiv sida

Copilot kan skriva en färdig webbsida åt dig — en enda html-fil med all design och interaktivitet inbyggd — utifrån ett underlag du ger den. Du behöver inte kunna koda: du beskriver vad du vill ha, Copilot skriver koden.

Exempel: en 225-sidig proposition om ämnesbetyg blir en interaktiv dashboard för skolledare — med flikar, sökning och en åtgärdslista — på några minuter. Det här kallas att vibekoda, och det är något av det AI är allra bäst på just nu.

Microsoft 365 Copilot

Varför?

Som skolledare ska du ofta göra något överskådligt och levande av tungt material: en proposition, ett kvalitetsunderlag, en ny rutin. En PDF eller PowerPoint räcker inte alltid — men en liten webbsida kan låta mottagaren klicka sig fram, jämföra, testa och förstå i sin egen takt.

Du kommer förvånansvärt långt i Copilot — längre än man tror. Det finns specialverktyg för det här, men för en dashboard, en quiz eller en interaktiv sammanfattning räcker Copilot gott. Och allt hamnar i en enda fil som funkar offline och går att dela.

Välj en tänkande modell — inte "Automatiskt"
Det här är det viktigaste valet. Uppe i högra hörnet byter du modell. Välj en tänkande modell — t.ex. GPT-5.5 (Think) eller en annan reasoning-variant — i stället för Automatiskt.

Att skriva kod är en tankekrävande uppgift. En tänkande modell planerar, håller ihop en längre fil och gör färre fel. "Automatiskt" kan välja en snabbare, lättare modell som ger ett sämre resultat för just det här.
Hittar du inte väljaren? Den sitter oftast vid modellens namn högst upp i chatten. Står det "Automatiskt" — byt innan du skickar prompten.
Ge Copilot ditt underlag och beskriv resultatet
Bifoga din fil (t.ex. en PDF eller ett Word-dokument) eller klistra in texten, och beskriv vad du vill ha och för vem. Tre saker gör prompten bra:
- Underlaget — bifoga PDF:en eller dokumentet.
- Resultatet — "en interaktiv dashboard", "en quiz", "en överskådlig sammanfattning med flikar".
- Målgruppen — "för skolledare", "för vårdnadshavare".
Sammanfatta den bifogade propositionen som en interaktiv dashboard. Målgrupp: skolledare. Lägg all CSS och JavaScript i en enda html-fil som jag kan ladda ned och öppna offline. Gör den överskådlig med flikar, och lyft de viktigaste förändringarna, tidslinjen och vad jag som huvudman behöver göra.
Ju tydligare du är med vilka delar som är viktigast, desto mer användbar blir sidan. Säg t.ex. "lyft besluten och tidslinjen" i stället för "ta med allt".
Be om allt i en enda fil
Säg uttryckligen: all CSS och JavaScript i samma html-fil. Då får du en fil att hålla reda på — ingen mappstruktur, inga beroenden.

Fördelarna är stora:
- Funkar offline — öppnas med ett dubbelklick, ingen uppkoppling behövs.
- Lätt att dela — mejla den, lägg den i Teams eller på en USB-sticka.
- Inget program krävs — den öppnas i webbläsaren alla redan har.
Be gärna också om "inga externa bibliotek eller länkar" — då fungerar sidan garanterat även utan internet.
Se resultatet — och bygg vidare
Ladda ned filen och öppna den. Är något inte rätt? Du behöver inte koda om — beskriv ändringen i vanliga ord, så skriver Copilot om sidan:
- "Lägg till en flik med en ordlista."
- "Gör en liten quiz på slutet."
- "Byt färgerna till kommunens profil."
- "Förstora texten och öka kontrasten."
Nedan ser du en riktig sida skapad så här — klicka runt i den, eller öppna den i helskärm.
Iterera i små steg. En ändring i taget gör det lätt att se vad som blev bättre — precis som när du putsar en text.
Resultatet — en enda html-fil, öppen direkt i webbläsaren:
amnesbetyg-dashboard.htmlÖppna
Hela sidan — text, layout, flikar och interaktivitet — ligger i en enda html-fil på 27 kB. Den funkar offline, går att mejla eller lägga på en USB, och öppnas med ett dubbelklick. Skapad i Copilot utifrån propositionen.
Det här kallas att vibekoda
Att beskriva i ord och låta AI skriva koden kallas att vibekoda. Det är något av det AI är allra bäst på just nu, och du kommer längre i Copilot än du tror.

En webbsida slår ofta en PDF eller PowerPoint när du vill ha:
- överskådlighet — flera sidor eller flikar i stället för en lång rulle
- interaktivitet — sökning, filter, en quiz eller ett litet spel
- simuleringar — skjutreglage som räknar om nyckeltal live
- ett paket — text, bilder och film samlade i ett format
Och ingen behöver öppna ett särskilt program — bara webbläsaren.
Tänk bortom dokumentet: en interaktiv budgetsimulator, en klickbar lärstig, ett quiz till en studiedag. Mycket som känns avancerat är en prompt bort.
Granska, ladda ned och dela — ansvarsfullt
Två saker innan du delar:
1. Granska innehållet. En sammanfattning av 225 sidor kan förenkla eller missa något. Stäm av de viktigaste siffrorna och påståendena mot källan — du äger innehållet.
2. Datatumregeln och AI-märkning. Bygg sidor av öppen eller intern icke-känslig information, aldrig av elev- eller personuppgifter. Är sidan AI-skapad och ska delas, märk det.
När du öppnar den nedladdade filen körs allt lokalt i din webbläsare — inget skickas iväg.
Spara prompten tillsammans med filen. Nästa termin gör du en ny version genom att byta underlag, i stället för att börja om.

Färdiga prompter att prova

Kopiera, klistra in i Copilot och anpassa till din verksamhet.

Sammanfatta den bifogade pdf:en som en interaktiv dashboard för skolledare. All CSS och JavaScript i en enda html-fil jag kan ladda ned och öppna offline. Flikar, sökning och en åtgärdslista.

Gör en interaktiv quiz med tio frågor om vår likabehandlingsplan, i en enda html-fil. Visa rätt eller fel direkt och en sammanställd poäng på slutet.

Bygg en enkel budgetsimulator för en grundskola som en html-sida: skjutreglage för elevpeng och personaltäthet som räknar om nyckeltalen live. Allt i en fil, inga externa bibliotek.

Gör en överskådlig sida med flikar som sammanfattar läsårets tre fokusområden för personalen, med en kort beskrivning och en checklista per flik. En enda html-fil.

Tips

Välj en tänkande modell (Think/reasoning) uppe till höger — inte Automatiskt. Det är den enskilt största skillnaden för kodresultatet.
Be alltid om en enda fil med all CSS och JavaScript inbyggd — då funkar sidan offline och går att dela som vilken fil som helst.
Iterera i vanliga ord: 'lägg till en flik', 'gör knapparna större', 'kommunens färger'. Du behöver aldrig röra koden själv.
Utgå från ett underlag (PDF, Word) för fakta — eller beskriv helt fritt när du bygger något nytt som en quiz eller en simulator.
Granska alltid en sammanfattning mot källan. En snygg sida övertygar även när en siffra blivit fel.
Det finns specialverktyg för att vibekoda, men Copilot räcker förvånansvärt långt för dashboards, quiz och interaktiva sammanfattningar.

Säkerhet & datatumregeln

Datatumregeln gäller även när du bygger sidor med kod. ÖPPEN information — propositioner, offentlig statistik, allmänt material — kan du arbeta med fritt i Copilot inom kommunens Microsoft 365-system. INTERN, icke-känslig information hanteras bara i Copilot inuti kommunens egen miljö. KÄNSLIG information, personuppgifter och sekretessbelagda uppgifter ska aldrig matas in — varken som bifogad fil eller text. När du väl öppnar den nedladdade html-filen körs allt lokalt i din webbläsare, men det du matar in i Copilot medan du bygger lyder under tumregeln. Granska alltid resultatet: AI kan både förenkla fakta och skriva kod som ser rätt ut men beter sig fel — testa sidan och stäm av innehållet mot källan. AI-skapat material som delas ska märkas. Enligt EU:s AI-förordning (AI Act) artikel 4, som gäller sedan februari 2025, ska alla som använder AI i sin yrkesroll ha grundläggande AI-kompetens.