Bråkpizzan — iterera innan du bygger

Börja med en lös idé, iterera med en chattbot, och bygg sedan med Lovable. Resultatet: ett komplett läromedel om bråk.

Lovable har en kostnadsfri plan med begränsat dagligt antal tokens. Spara tokens genom att ha en detaljerad prompt från start — iterera i Claude/ChatGPT, bygg i Lovable.

GDPR: Klistra aldrig in elevuppgifter eller namn i Lovable eller någon chattbot. Ämnesinnehåll (bråk, matematik) är helt OK.

AI kan ha fel: Kontrollera alltid att matematiken i appen stämmer innan du visar den för eleverna.

Stanna upp — hur kom vi hit?

Alla exempel du sett hittills har kommit från korta prompter, skrivna i ett steg. Det ser enkelt ut. Men bakom de bästa resultaten finns nästan alltid något mer: en tankeprocess, ett par frågor, ett utkast som förkastades.

Det här exemplet börjar annorlunda. Det börjar med frågan: hur bygger man något bra?

Iterera innan du bygger

Det finns ett vanligt misstag när man börjar vibekoda: man kastar en vag idé på ett AI-verktyg och hoppas på det bästa. Resultatet brukar bli... okej. Men inte riktigt bra.

Det som verkligen lyfter resultatet är att iterera innan man öppnar byggverktyget. Alltså: använda en vanlig chattbot för att tänka igenom vad man vill ha, ställa frågor, och bygga en detaljerad prompt — och sedan köra den.

Vad är Lovable?

Lovable är en svensk AI-startup som låter dig skriva en prompt och få en komplett webbapp — hosting, länk och allt. Du behöver inte kunna koda.

Du öppnar lovable.dev, skriver vad du vill ha, och Lovable bygger och publicerar appen med en delbar länk direkt. Det är ett av de mest imponerande verktygen i kategorin just nu.

Det finns dock en begränsning: den kostnadsfria planen ger ett begränsat antal "tokens" per dag. Varje gång appen ändras eller byggs om kostar det tokens.

Därför är det extra viktigt att ha en genomtänkt prompt innan du börjar. Och det är precis vad konversationen nedan visar.

Konversationen som ledde fram till promoten

Nedan ser du hur en lärare chattar med Claude för att iterera fram promoten. Startpunkten är en lös idé. Tre frågor och svar senare — en detaljerad specifikation redo att klistras in i Lovable.

Lägg märke till hur varje fråga från chattboten skärper fokus och lägger till pedagogiskt värde som kanske inte var tänkt från början.

Prompten

Prompt

Jag vill bygga en interaktiv app för att lära sig bråk — 'Bråkpizzan'. Den ska vara riktad mot elever i åk 4–7 och bygga djup förståelse genom att visa bråk i flera representationer samtidigt.
Kärnan: Eleven väljer eller matar in ett bråk (t.ex. 3/4). Tre visualiseringar uppdateras i realtid:
• En pizza/cirkel som delas i delar, med rätt antal bitar markerade
• En stapel/rektangel som fylls proportionellt
• En tallinje där bråket placeras som en punkt
Eleven ska kunna manipulera bråket på ALLA tre sätten — dra i pizzabitar, dra i stapeln, eller flytta punkten på tallinjen — och de andra uppdateras. Tvåvägs-koppling.
Jämförelseläge: Eleven kan lägga till ett andra bråk och se båda sida vid sida i alla tre representationer. "Vilket är störst — 3/4 eller 5/8?" blir visuellt.
Operationsläge: Eleven kan addera, subtrahera eller multiplicera två bråk och SE vad som händer visuellt. "3/4 + 1/2" — pizzan visar hur bitarna slås ihop, stapeln växer, punkten på tallinjen förflyttas. Visa mellansteget med likvärdiga bråk — "vi behöver göra om till samma nämnare" — animerat.
Ekvivalens-utforskaren: Eleven drar i ett reglage som visar alla ekvivalenta bråk till det aktuella: 1/2 = 2/4 = 3/6 = 4/8... Alla representationer uppdateras men eleven SER att storleken inte förändras, bara antalet delar. Aha-upplevelse.
Blandad form-växlare: Toggla mellan bråkform och blandad form. 7/4 ↔ 1 3/4. Se visuellt vad "en hel och tre fjärdedelar" betyder — pizzan visar en hel pizza plus tre bitar av nästa.
Stöd och tillgänglighet:
• Varje interaktion har en kort textruta som beskriver vad som händer i ord: "Du har tre av fyra delar. Det är mer än hälften."
• Färgerna ska vara tydliga och kontrastrika, med möjlighet att byta färgschema (inkl. färgblindhetsläge)
• Storleken på allt ska vara justerbar
• Valfri uppläsning av beskrivningstexten (Web Speech API)
• Animationerna ska kunna stängas av för elever som distraheras
Övningsläge: Slumpmässiga utmaningar i tre nivåer:
• Nivå 1: "Klicka på rätt pizza som visar 2/3" (identifiera)
• Nivå 2: "Vilket bråk är störst? Placera i ordning" (jämföra)
• Nivå 3: "Vad blir 2/3 + 1/4? Visa med pizzan" (operationer)
Varje fel ger visuell hjälp, inte bara "fel" — utan "titta, 2/3 ser ut så HÄR, jämför med vad du valde."

Steg-för-steg i olika verktyg

Skapa med Lovable

1Öppna lovable.dev och skapa ett gratis konto
2Klicka 'New project' och klistra in promoten ovan
3Lovable bygger appen och visar en förhandsgranskning direkt
4Om något saknas: skriv en kort följdfråga, t.ex. 'Lägg till färgblindhetsläge'
5Testa appen noggrant — kontrollera att tvåvägs-kopplingen och ekvivalenserna stämmer

Dela med eleverna

1Lovable publicerar appen automatiskt med en unik URL
2Klicka på 'Publish' eller 'Share' i Lovable-gränssnittet
3Kopiera länken och dela med eleverna — de behöver inget konto

Exempelkonversation

LärarenOm jag skulle bygga detta... "Bråkpizzan" — en sida där jag kan manipulera bråk visuellt. Se 3/4 som pizzabitar, som en stapel, som en punkt på tallinjen — samtidigt. Ändra bråket, alla tre representationerna uppdateras. Forskning visar att elever som ser bråk i multipla representationer bygger djupare förståelse. Vad mer skulle jag kunna bygga in så att det verkligen blir ett stöd, något som jag har nytta av? Formulera detta som en prompt som börjar med "Jag vill bygga..."

ClaudeDet låter som ett genomtänkt pedagogiskt verktyg — multipla representationer är välbeprövat i matematikdidaktik. Innan jag skriver promoten: tänker du att interaktionen ska vara tvåvägs? Alltså att eleven kan dra i pizzabitarna och tallinjen uppdateras automatiskt — och tvärtom? Det gör stor skillnad i pedagogiskt värde.

LärarenJa, precis — tvåvägs-koppling! Och gärna något extra för elever som behöver mer stöd.

ClaudePerfekt. Jag föreslår vi lägger till: en ekvivalens-utforskare (visa att 1/2 = 2/4 = 3/6 visuellt med reglage), ett jämförelseläge med två bråk sida vid sida, och operationer med animation som visar mellanstegen. För tillgänglighet: beskrivande text per interaktion, färgblindhetsläge, justerbar storlek och möjlighet att stänga av animationer. Ska det också finnas ett övningsläge med uppgifter på olika nivåer?

LärarenJa, övningsläge gärna! Och att eleven får visuell hjälp vid fel — inte bara "fel", utan att appen visar hur det rätta svaret faktiskt ser ut.

ClaudeUtmärkt — "titta, 2/3 ser ut SÅ HÄR, jämför med vad du valde" är mycket mer lärorikt än ett rött kryss. Här är din färdiga prompt — klistra in den i Lovable och du är redo att bygga:

Relaterade idéer

Solsystemet – styr med händerna Medeltidslärande — bygga en hel portal