Hoppa till huvudinnehåll
NexarAcademy
/ academy
Logga inSkapa kontoMentorskap
←Grunderna — Claude Code

Vad är vibe coding?

Playbook · 25 min
7:42 · Titta först — jobba sen igenom innehållet nedan
📖Teori·1 / 13

Vad är vibecoding – och varför förändrar det allt?

Vibecoding är ett begrepp myntat av AI-forskaren Andrej Karpathy i början av 2025. Definitionen är enkel men kraftfull:

Du bygger mjukvara genom att beskriva vad du vill ha – på vanlig svenska eller engelska – och låter AI skriva koden.

Karpathy beskrev det så här:

"There is a new kind of coding I call vibecoding, where you fully give in to the vibes, embrace exponentials and forget that the code even exists."

Du behöver alltså inte förstå ett enda kodspråk. Du är inte utvecklaren – du är visionären. Din uppgift är att beskriva idéer, testa resultatet och ge feedback tills produkten är precis som du vill ha den.

Hur ser flödet ut i praktiken?

Tänk dig att du vill bygga en enkel webbapp för att spåra dina utgifter. Så här ser vibecoding-flödet ut:

Exempel på en tydlig vibecoding-prompt i ett AI-verktyg

  1. Du beskriver vad du vill: "Bygg en webbapp där jag kan skriva in utgifter, dela upp dem i kategorier och se en graf över månaden. Spara datan så jag inte tappar bort något."
  2. AI skriver koden och sätter ihop en fungerande app.
  3. Du testar – ser du något som behöver ändras? Fel färger, fel font, saknar en sektion?
  4. Du ger feedback direkt i AI-verktyget: "Ändra bakgrundsfärgen till mörkblå och lägg till en knapp för att exportera till CSV."
  5. AI uppdaterar koden – du testar igen.
  6. Loopen fortsätter tills du är nöjd.

Detta kallas en feedback-loop och är kärnan i vibecoding. Du itererar snabbt mot ett färdigt resultat utan att någonsin behöva öppna en kodfil och förstå vad som står där.

Varför är detta en revolution för e-handlare?

För dig som bygger en e-handelsbutik innebär vibecoding att du kan:

  • Bygga interna verktyg (t.ex. ett dashboard för att följa upp ordrar och marginaler)
  • Skapa automatiseringar (t.ex. skicka en Slack-notis när ett lager är lågt)
  • Prototypa nya funktioner på din butik utan att betala en utvecklare
  • Lösa custom-problem som annars kostat tusentals kronor och flera dagars väntan

Tidigare kunde en liten ändring i en Shopify-butiks kod ta flera dagar och kosta tusenlappar. Med vibecoding kan du göra samma sak på en timme – själv.

❓Quiz·2 / 13
Vad är den mest korrekta beskrivningen av vibecoding?
📖Teori·3 / 13

Vibecoding vs. traditionell kodning – vad är egentligen skillnaden?

Det är lätt att tro att vibecoding bara är 'kodning fast snabbare'. Men skillnaden är mer fundamental än så – det handlar om vem som kan bygga och hur lång tid det tar.

Jämförelse: traditionell kodning vs. vibecoding i praktiken

⚖️Jämförelse·4 / 13
Vibecoding vs. traditionell kodning
Traditionell kodning
  • ›Kräver år av utbildning och övning
  • ›Du skriver varje rad kod manuellt
  • ›En enkel hemsida tar dagar till veckor
  • ›En liten ändring kan kosta tusentals kronor om du anlitar hjälp
  • ›Hög tröskel – de flesta e-handlare kan inte göra det själva
  • ›Fel i koden kräver djup felsökningskompetens
Vibecoding
  • ›Ingen kodkunskap krävs – du behöver bara kunna beskriva vad du vill
  • ›AI skriver all kod – du testar och ger feedback
  • ›En enkel hemsida eller app kan byggas på en timme
  • ›Ändringar kostar ingenting extra – du gör dem själv
  • ›Låg tröskel – alla med en dator och nyfikenhet kan börja
  • ›Fel fixas genom att beskriva problemet för AI
📖Teori·5 / 13

Din roll som vibecoder

Den viktigaste insikten är att din roll förändras fundamentalt. Du är inte längre en kodare – du är en produktchef och visionär som kommunicerar med en extremt kompetent AI-utvecklare.

Detta kräver tre saker av dig:

1. Förmågan att beskriva tydligt (promptning)

Din viktigaste färdighet är att formulera vad du vill ha på ett sätt som AI förstår. Vaga instruktioner ger vaga resultat – skräp in, skräp ut. Ju tydligare du är, desto bättre blir koden.

Svag prompt: "Gör en app för utgifter"

Stark prompt: "Bygg en webbapp där jag kan lägga till utgifter med belopp, datum och kategori (mat, transport, nöje). Visa en stapelgraf per månad. Spara all data lokalt i webbläsaren så inget försvinner vid sidladdning."

2. Tålamod att iterera

AI tolkar ibland saker fel – det är ingen människa och saknar din implicita kontext. Räkna med att behöva ge 3–10 feedback-rundor innan resultatet är precis rätt. Det är normalt och ingår i processen.

3. Nyfikenhet

De som lyckas bäst med vibecoding är de som vågar experimentera. Testa saker. Fråga AI vad som är möjligt. Du kommer att bli förvånad över hur mycket du faktiskt kan bygga.

Vibecoding-flödet: beskriva, testa, ge feedback, iterera

❓Quiz·6 / 13
Vilket av följande är den viktigaste färdigheten för en vibecoder?
📖Teori·7 / 13

När funkar vibecoding – och när ska du vara försiktig?

Vibecoding är inte en universallösning. Det finns situationer där det fungerar utmärkt och situationer där du behöver vara mer noggrann.

Vibecoding funkar utmärkt för:

  • Prototyper och MVP:er – testa en idé snabbt utan att investera mycket tid
  • Interna verktyg – dashboards, rapporter, enkla admin-verktyg för din butik
  • Webbappar och sidoprojekt – kalkylatorer, formulär, enkla SaaS-verktyg
  • Automatiseringar – koppla ihop tjänster, skicka notiser, synka data
  • Lärande – be AI förklara koden den skriver, så lär du dig medan du bygger

Var extra noggrann när du:

  • Hanterar betalningar – kod som processar kortbetalningar måste följa PCI DSS-standarder. Vibecoda inte betalningslogik från scratch – använd etablerade tjänster som Stripe och låt AI hjälpa dig integrera dem korrekt.
  • Lagrar kunddata – GDPR ställer krav på hur data hanteras, lagras och raderas. Se till att du förstår vad koden faktiskt gör med dina kunders uppgifter.
  • Bygger databassäkerhet – begrepp som Row Level Security (RLS) i Supabase/PostgreSQL är viktiga när olika användare ska ha tillgång till olika data. AI kan hjälpa dig sätta upp det, men du behöver förstå varför det behövs.
  • Hanterar komplexa system – ju fler komponenter och API-kopplingar, desto viktigare är det att vara extremt tydlig i dina prompts och att förstå arkitekturen på en övergripande nivå.

Tumregeln:

Om ett fel i koden kan kosta dig pengar eller skada dina kunder – ta dig tid att förstå vad koden gör, inte bara att den verkar fungera.

❓Quiz·8 / 13
Du vibecoder en ny funktion till din butik som låter kunder spara sina adresser för snabbare checkout. Vad bör du vara extra noga med?
❓Quiz·9 / 13
Vad är den primära anledningen till att Claude Code rekommenderas framför webbaserade verktyg som Lovable för mer komplexa projekt?
🎯Reflektion·10 / 13

Identifiera ett konkret problem eller en funktion du skulle vilja bygga för din butik med vibecoding

Nu när du förstår vad vibecoding är och hur feedback-loopen fungerar är det dags att tänka på vad du faktiskt vill bygga. Det kan vara ett internt verktyg, en automatisering, en enkel webbapp eller en funktion till din butik. Tänk på något som du idag antingen saknar, betalar för, eller löser manuellt.

🎬Scenario·11 / 13
Situation

Du driver en Shopify-butik och säljer handgjorda smycken. Du spårar just nu din lagerstatus i ett Excel-ark som du uppdaterar manuellt. Det tar tid och du missar ibland att en produkt är slut på lager. Du vill vibecoda ett enkelt internt verktyg för att lösa detta.

Din uppgift

Skriv en tydlig vibecoding-prompt som du skulle ge till Claude Code eller Lovable för att bygga detta verktyg. Tänk på: Vad ska verktyget kunna göra? Hur ska data sparas? Vad ska visas på skärmen? Vilka varningar behöver du?

🃏Steg·12 / 13
Feedback-loopen – 5 steg till ett färdigt vibecoding-projekt
1
Beskriv vad du vill bygga
Skriv en tydlig, specifik prompt. Inkludera syfte, funktioner, hur data ska sparas och hur det ska se ut. Ju mer kontext, desto bättre resultat.
2
Låt AI generera koden
AI skriver all kod och sätter ihop en fungerande version. Din uppgift här är att vänta – inte att skriva en enda rad kod.
3
Testa resultatet
Öppna appen eller sidan och testa den noggrant. Fungerar allt? Ser det ut som du ville? Notera allt som behöver ändras.
4
Ge specifik feedback
Beskriv exakt vad som ska ändras: 'Knappen är för liten och hamnar under folden på mobil – flytta den till toppen och gör den 20% större.' Var konkret.
5
Iterera tills du är nöjd
Upprepa steg 3–4 tills produkten är precis som du vill ha den. Räkna med 3–10 iterationer för ett enkelt projekt – det är normalt och ingår i processen.
🏆Prov·13 / 13
Kunskapsprov – Vad är Vibecoding
Testa att du har förstått de viktigaste koncepten från den här lektionen. Frågorna täcker definition, skillnader mot traditionell kodning, när vibecoding funkar, verktyg och din roll som vibecoder.
01
Vem myntade begreppet 'vibecoding' och när?
Från: Vad är vibecoding
02
Vad är din primära uppgift som vibecoder?
Från: Din roll som vibecoder
03
Vad menas med 'skräp in, skräp ut' i vibecoding-sammanhang?
Från: Din roll som vibecoder
04
I vilken situation bör du vara EXTRA försiktig med vibecoding?
Från: När funkar vibecoding – och när ska du vara försiktig?
05
Vilket av dessa projekt är BÄST lämpat för vibecoding?
Från: När funkar vibecoding – och när ska du vara försiktig?
06
Vilket verktyg rekommenderas i kursen som förstahandsval för vibecoding?
Från: Vilka verktyg används för vibecoding?
07
Hur lång tid kan det ta att bygga en enkel hemsida med vibecoding?
Från: Vibecoding vs. traditionell kodning
08
Vad är den korrekta beskrivningen av feedback-loopen i vibecoding?
Från: Vad är vibecoding – och varför förändrar det allt?
Vilket verktyg? Varför Claude Code →