VIBE CODING
Du behöver inte kunna koda
Det här är inte en kurs i programmering. Du kommer inte lära dig vad variabler är, hur loopar fungerar eller vad ett API är.
Du kommer lära dig hur du pratar med AI på ett sätt som ger dig fungerande mjukvara — utan att förstå hur den fungerar på insidan.
Det enda du behöver är en dator, en webbläsare och en idé om vad du vill bygga.
Vad är det här egentligen?
Traditionell programmering innebär att du skriver instruktioner för en dator på ett speciellt språk — JavaScript, Python och så vidare. Det tar år att lära sig ordentligt.
Vibe coding fungerar annorlunda. Istället för att skriva kod beskriver du på vanlig svenska (eller engelska) vad du vill att något ska göra. AI skriver koden åt dig. Du testar. Du justerar.
Tänk på det som att ha en programmerare som sitter bredvid dig och skriver allt du ber om — och du är den som bestämmer vad som ska byggas.
Tre saker att sätta upp — tar tio minuter
Innan du kan börja bygga behöver du tre saker på plats. Allt är gratis att börja med.
- Ett AI-verktyg. Gå till claude.ai och skapa ett gratis konto. Det är här du skriver dina instruktioner och får kod tillbaka.
- En textredigerare. Ladda ner VS Code på code.visualstudio.com. Det är programmet där du öppnar och redigerar dina filer. Gratis, används av miljontals utvecklare.
- En mapp på din dator. Skapa en ny mapp någonstans — kalla den till exempel mitt-projekt. Alla dina filer hamnar här.
Be AI om kod
Öppna claude.ai i din webbläsare. Du ser ett textfält längst ner på sidan — precis som ett chattfönster.
Skriv in vad du vill bygga. Var konkret. Kopiera det här som ett första test:
Tryck enter. Claude svarar med ett kodblock — ett grått fält fyllt med text. Det är din kod. Klicka på kopiera-ikonen i hörnet av kodblocket, eller markera alltihop och kopiera manuellt.
STEG 1Skapa en fil och klistra in koden
Öppna VS Code. Gå till Fil → Öppna mapp och välj mappen du skapade. Du ser nu mappen i panelen till vänster.
Skapa en ny fil: klicka på ikonen för "ny fil" i panelen till vänster, eller gå till Fil → Ny fil. Döp filen till exakt index.html — det är viktigt att den slutar på .html.
Klicka in i den tomma filen. Klistra in koden du kopierade från Claude. Spara med Ctrl+S på Windows eller Cmd+S på Mac.
Filen ska nu synas i panelen till vänster och innehålla en massa text. Om den är tom — gå tillbaka och klistra in igen.
STEG 2Öppna filen i webbläsaren
Nu ska du se vad du byggt.
Öppna Utforskaren på Windows eller Finder på Mac. Navigera till din projektmapp och hitta filen index.html. Dubbelklicka på den. Den öppnas direkt i din standardwebbläsare.
Du borde se en mörk sida med rubriken "Hej världen" och en knapp. Klicka på knappen — texten "Det fungerar!" ska dyka upp.
Funkar det? Bra. Du har precis byggt din första webbsida.
Funkar det inte? Hoppa till avsnittet om fel längre ner.
STEG 3Justera tills det känns rätt
Troligen ser sidan inte exakt ut som du ville. Det är meningen. Nu itererar du — du ändrar en sak i taget tills det stämmer.
Gå tillbaka till Claude. Fortsätt i samma konversation. Beskriv vad du vill ändra:
Claude svarar med uppdaterad kod. Kopiera den. Gå till VS Code, markera all gammal kod med Ctrl+A / Cmd+A, klistra in den nya och spara. Ladda om sidan i webbläsaren med F5 eller Cmd+R.
Upprepa tills det ser rätt ut. Det är hela arbetsflödet.
STEG 4Publicera — gör det synligt för alla
Just nu finns sidan bara på din dator. Ingen annan kan se den. Att publicera innebär att lägga upp den på internet så att vem som helst kan öppna den via en länk.
Gör så här:
- Gå till netlify.com
- Scrolla ner tills du ser en ruta där det står "drag and drop"
- Öppna din projektmapp i Utforskaren eller Finder
- Dra hela mappen och släpp den i Netlify-rutan
- Vänta några sekunder — du får en länk
Länken fungerar direkt. Dela den med vem du vill. Ingen registrering krävs för att testa — men om du skapar ett gratis konto kan du uppdatera sidan och behålla länken.
STEG 5Fel är inte stopp — de är information
Förr eller senare händer något av det här:
- Sidan är helt tom när du öppnar den
- Knappen gör ingenting när du klickar
- Något ser konstigt ut — fel färg, fel position, text som saknas
- Webbläsaren visar ett felmeddelande
Det är normalt. Det händer hela tiden, även för erfarna programmerare. Skillnaden är att du vet hur du löser det: du beskriver felet för Claude.
Beskriv alltid tre saker:
- Vad som faktiskt händer (eller exakt vad felmeddelandet säger)
- Vad du förväntade dig att skulle hända
- Koden — markera all text i VS Code med Ctrl+A / Cmd+A och klistra in
Börja om konversationen
Ibland fastnar Claude i en återvändsgränd. Varje fix skapar ett nytt problem. Du har försökt tre gånger och det är fortfarande fel.
Starta en ny konversation. Klistra in koden och beskriv projektet och problemet rent — utan historiken av misslyckade försök. En fräsch start ger ofta rätt svar på tio sekunder.
Det viktigaste du kan lära dig
Kvaliteten på det du får beror helt på hur du frågar. Det finns ingen annan skill som är viktigare i vibe coding.
En bra prompt innehåller alltid:
- Vad det ska göra
- Hur det ska se ut
- Vad som händer när användaren klickar eller skriver
- Begränsningar — "en enda HTML-fil", "inga externa bibliotek"
Om något är fel — du vet exakt vilket krav som inte uppfylldes och kan be Claude fixa just det.
PRECISIONSkydda det du byggt
Det händer förr eller senare: du ber Claude om en ändring, klistrar in den nya koden — och märker att något som fungerade nu är trasigt. Du vill gå tillbaka, men den gamla koden är borta.
Det enklaste skyddet: kopiera hela din projektmapp varje gång något funkar. Döp kopian med dagens datum.
Nu kan du alltid gå tillbaka till en version som fungerade. Det tar tio sekunder och räddar timmar.
När du är bekväm med det här är nästa steg att lära sig Git — ett verktyg som gör samma sak automatiskt och mer kraftfullt. Men det kan vänta.
RUTINSaker folk undrar om i början
Måste jag förstå koden Claude ger mig?
Nej. Du behöver förstå vad den gör — inte hur den gör det.
"Den här knappen sparar text i webbläsarens minne" är tillräckligt.
Kan Claude göra fel?
Ja, ofta. Det är inte ett problem — det är en del av processen.
Du testar, märker vad som är fel, beskriver det, får en fix.
Vad är skillnaden mellan HTML, CSS och JavaScript?
HTML är strukturen (vad som finns på sidan),
CSS är utseendet (hur det ser ut),
JavaScript är beteendet (vad som händer när du interagerar).
Du behöver inte förstå dem separat — Claude hanterar allt i en fil.
Kan jag bygga vad som helst?
Mer än du tror — men inte allt. Enkla verktyg, sidor och AI-gränssnitt
fungerar utmärkt. Komplexa system med inloggning och betalningar är svårare
att förstå och underhålla.
Vad gör jag när Claude inte förstår vad jag menar?
Dela upp det i mindre delar. Be om en sak i taget.
"Bygg bara rubriken och bakgrunden, inget annat än så länge."
Det är allt du behöver veta
Hela vibe coding sammanfattas i ett flöde:
Det finns ingenting mer. Du lär dig allt annat på vägen.
LOOP ACTIVE