{ FJS26 }

Workshop:
vibekodning

Bygg en webshop i team, med ett verktyg ni väljer själva

[ 10 september 2026 · 13.00–16.30 · på plats ]

UPPLÄGG

Eftermiddagen

  • 13.00 · genomgång, verktygsval och planering i grupp.
  • 13.30 · ni bygger. Jag går runt.
  • 15.30 · återsamling: showcase och gemensam reflektion.

 

WORKSHOP · VIBEKODNING2 / 15

Vibe coding

Ett kreativt och intuitivt sätt att programmera där man följer sin känsla snarare än en strikt plan: man promptar en AI, testar idéer direkt i koden och låter nyfikenhet och flow styra processen.

  • Utmärkt för att utforska, prototypa och komma igång snabbt.
  • Riskabelt när ingen förstår koden som blev kvar.
  • Idag använder vi det för att se vad som är möjligt, inte för att slippa förstå.

WORKSHOP · VIBEKODNING3 / 15

UPPGIFTEN

En webshop, ni väljer vad ni säljer

Samma ramar för alla. Innehållet är ert.

  • Bestäm först vad ni säljer. Något ni tycker är kul går snabbare att bygga.
  • Minst: produktlista, produktsida, varukorg.
  • Hinner ni mer: checkout, inloggning, databas, sökning, filter.
  • Målet är inte en färdig butik. Målet är att se var verktyget bär och var det tar slut.

WORKSHOP · VIBEKODNING4 / 15

VERKTYG

Välj ett i gruppen

Ni ska ha diskuterat detta redan. Välj ett och håll er till det, byte mitt i kostar tid.

Lovable

lovable.dev · fullstack med databas och inloggning. Bäst om ni vill ha backend.

v0

v0.app · från Vercel. Starkast på gränssnitt i React.

Bolt

bolt.new · kör projektet i webbläsaren. Generösast gratisnivå.

Figma Make

figma.com/make · nytt i år. Bra om ni börjar från en design.

WORKSHOP · VIBEKODNING5 / 15

STEG 1

Planera innan ni promptar

Trettio minuter här sparar en timme sen. Det här är workshopens viktigaste slide.

  • Skissa sidorna på papper. Vilka sidor finns, vad ska synas på var och en?
  • Lista vad ni säljer och vilka fält en produkt har: namn, pris, bild, lager.
  • Bestäm vem som promptar. En person i taget, resten läser och diskuterar.
  • Skriv ner ordningen ni ska bygga i. Att prompta huller om buller kostar krediter.
  • Planering kostar noll krediter. Det gör inget annat idag.

WORKSHOP · VIBEKODNING6 / 15

Krediter och tokens

Verktygen tar betalt per meddelande, och priset följer hur mycket modellen behöver läsa och skriva. Ett stort bygge kostar mer än en färgändring.

  • Ni har en daglig gräns, inte en gräns per uppgift. Är den slut är den slut till imorgon.
  • Ungefär i skrivande stund: Lovable några få krediter per dag, Figma Make ett par hundra, Bolt mest generös.
  • Kolla er egen gräns innan ni börjar: lovable.dev/pricing · v0.app/pricing · figma.com/make
  • Räkna med att gruppen har ungefär en handfull riktiga försök. Planera därefter.

WORKSHOP · VIBEKODNING7 / 15

STEG 2

Så hushållar ni

  • Skriv prompten någon annanstans först. Formulera den i Claude, ChatGPT eller Gemini, som är gratis, och klistra in den färdiga.
  • En genomtänkt prompt slår fem små. Varje meddelande kostar, oavsett hur kort det är.
  • Gå inte i "försök igen"-loop. Fastnar den: läs felet, ändra prompten. Att trycka om kostar lika mycket som en ny idé.
  • Börja från en mall om verktyget har en. Det är gratis kod.
  • Synka till GitHub tidigt. Då överlever bygget när krediterna tar slut, och kan flyttas till nästa persons konto.

WORKSHOP · VIBEKODNING8 / 15

STEG 3

Förslag på promptar

Utgå från dessa, men skriv om dem så de handlar om er butik.

  • Gränssnitt: responsiv sida med navigation och footer · produktkatalog i grid · varukorg med lägg till och ta bort · produktsida med bildgalleri.
  • Backend och databas: datamodell för produkter, kunder och ordrar · beställningsflöde · inloggning.
  • SEO och prestanda: metataggar och URL-struktur · sitemap och robots.txt · bildoptimering med lazy loading.

WORKSHOP · VIBEKODNING9 / 15

MEDAN NI VÄNTAR

Läs koden som kommer ut

Genereringen tar tid. Använd den till något.

  • Öppna filerna. Vad heter komponenterna, hur hänger de ihop?
  • Slå upp begreppen som dyker upp: design system, grid, databasschema, REST, CRUD, autentisering, lazy loading.
  • Hitta något ni inte förstår och ta med det till återsamlingen.
  • Kan ingen i gruppen förklara vad en fil gör, är det den filen ni ska titta på.

WORKSHOP · VIBEKODNING10 / 15

”

Ni kommer att bygga något på två timmar som hade tagit veckor. Frågan är vad ni kan när ni går härifrån.

KRITISKT FÖRHÅLLNINGSSÄTT

Två saker att bära med sig

Det som går fort

Ett gränssnitt som ser färdigt ut. En demo som imponerar. Känslan av att ha förstått, för att det fungerade.

Det som inte går fort

Att kunna läsa koden, avgöra om den är rätt, felsöka den och förklara den för någon annan. Det byggs bara genom att göra det själv.

WORKSHOP · VIBEKODNING12 / 15

15.30 · REFLEKTION

EPA i grupp

Enskilt först, sedan i Par eller grupp, sedan Alla tillsammans.

  • Vad kunde verktyget göra som överraskade dig? Vad kunde det inte?
  • Var i bygget slutade du / ni förstå vad som hände?
  • Vilken strategi bör en junior fullstackutvecklare ha i användandet av AI-verktyg?

WORKSHOP · VIBEKODNING13 / 15

15.30 · ÅTERSAMLING

Showcase

  • Visa vad ni byggde. Fem minuter per grupp, inga slides.
  • Berätta vad som gick lätt, vad som tog stopp, och vad ni gjorde åt det.
  • Visa en kodbit ni faktiskt förstod, och en ni inte förstod.
  • Glöm inte: examinationsuppgiften ska in innan söndag.

WORKSHOP · VIBEKODNING14 / 15

”

Verktyget bygger appen. Ni bygger kompetensen. Bara det ena följer med härifrån.