Vad du ska ha när du är klar
Du kommer ha låtit AI skriva kod till dig för första gången, godkänt ändringen, och sett den faktiskt hamna i en riktig fil på din dator. Det är första gången "AI som medbyggare" går från buzzword till verklighet.
Inga förkunskaper. Du behöver inte kunna programmera. Men efter den här lektionen ser du varför det har blivit en ny kategori av jobb — och varför Karpathy kallade det "vibe coding".
Vad är vibe coding?
Begreppet myntades av Andrej Karpathy (tidigare OpenAI) i februari 2025 när han twittrade:
"I am now vibe coding the home automation master command center, the potential is 🔥."
Kortast möjliga definition: du beskriver vad du vill i vanligt språk, AI:n skriver koden, du granskar och godkänner. Du behöver inte kunna syntax, men du behöver kunna läsa och säga "ja, det där ser rätt ut" eller "nej, fixa det där istället".
Simon Willison (en av de mest lästa utvecklarbloggarna just nu) beskriver det så här:
"An LLM agent runs tools in a loop to achieve a goal."
På svenska: du ger ett mål, AI:n loopar — läser filer, skriver kod, kör kommandon, läser resultatet, fixar, upprepar — tills jobbet är gjort.
Tre vägar att prova — vi kör den enklaste
Det finns tre stora verktyg som dominerar vibe coding 2026:
| Verktyg | Var körs det | Bäst för | |---------|--------------|----------| | Replit Agent | Webbläsare | Absolut nybörjare — allt i molnet | | Claude Code | Terminal på din dator | Riktiga projekt, max kontroll | | Cursor | Deras egen editor | Visuell kod-redigering |
Den här lektionen kör Replit Agent. Anledning: 0 installation, 0 terminal, 0 auth-krångel. Du loggar in i webbläsaren och är igång på 3 minuter. När du fattat principen kan du prova Claude Code (nästa lektion) eller Cursor.
Steg 1: Skapa Replit-konto
Gå till replit.com och klicka Sign up. Du kan logga in med Google eller GitHub — snabbast.
När du är inne:
- Välj Starter-planen (gratis, räcker för den här lektionen)
- Landa på dashboarden
Om du ser "create team" eller "workspace-setup" — hoppa över, välj "personal account".
Steg 2: Starta en ny Agent-session
På dashboarden klickar du + Create App. Du får ett val-menu.
Välj Agent. (Inte "Import from GitHub", inte "Template".)
Du kommer till ett fönster med en chat-ruta. Det är här du pratar med Agenten.
Steg 3: Din första prompt
Klistra in denna prompt i chatten:
Bygg en enkel webbsida som visar dagens datum i stort format. Använd svart bakgrund och vit text. Centrera allt. Lägg till en knapp som byter färg varje gång man klickar.
Tryck Send eller Enter.
Vad du kommer se härnäst:
- Agenten "tänker" i några sekunder — du ser en plan skrivas ut (typ "Jag ska skapa HTML-fil, CSS-fil, JS-fil...")
- Den börjar skapa filer —
index.html,style.css,script.js - Varje fil visas i editorn till vänster
- När den är klar ser du förhandsgranskning i ett fönster till höger
Det tar ungefär 1-2 minuter. Inte rör något under tiden.
Steg 4: Se resultatet
När Agenten är klar klickar du Run längst upp (eller trycker F5).
Webbsidan laddas i preview-fönstret. Du ser datum + knapp. Klicka på knappen — färgen ska byta.
Grattis — du har precis vibe coda:t din första webbsida. Tog ~5 minuter. Du skrev inte en rad kod.
Steg 5: Be om en ändring (detta är poängen)
Nu kommer det intressanta. Skriv till Agenten:
Byt ut dagens datum mot klockslag som uppdateras varje sekund. Och gör så knappen ändrar font istället för färg.
Skicka.
Agenten läser dina existerande filer, ändrar bara det som behövs, och applicerar ändringarna. Du behöver inte säga vilka filer. Du behöver inte säga var ändringen ska göras. Du säger bara vad du vill.
Det är det här som skiljer vibe coding från ChatGPT. ChatGPT genererar kod som du kopierar. Agenten redigerar dina filer direkt och loopar tills det fungerar.
Saker som kommer kännas konstigt (normalt)
"Varför ser det ut som den 'tänker' så länge?" Agenten läser hela ditt projekt, planerar ändringar, och kollar ofta syntax innan den sparar. Första gången tar längst — den bygger upp kontext.
"Den gjorde något jag inte bad om!" Mycket vanligt. Agenter gör ibland mer än du frågade (typ "jag lade också till en footer med copyright"). Om du inte gillar det: säg "ta bort footer-sektionen" i nästa prompt. Iterera.
"Jag fattar inte koden den skrev."
Du behöver inte. Du behöver läsa vad den säger att den gjort i chatten ("I added a setInterval that updates the clock every second...") och se att resultatet stämmer. Detta är det nya workflow:t — du granskar intent, inte syntax.
"Det funkade inte som jag ville." Byt prompt. Var specifikare: "Klockan ska visas i formatet HH:MM:SS, inte 12-timmars AM/PM. Och den ska vara 4x större än just nu." Ju mer konkret, desto bättre.
Saker som verkligen kan gå fel
Agent kraschar mitt i en ändring. Replit har kvotsystem — Starter-planen ger ~100 credits/månad. Första sessionen bränner ~5. Om du ser "insufficient credits", kolla replit.com/usage.
Preview laddar inte. Klicka Run igen. Eller stop + start. Ibland cachar browsern gammal version — håll Shift + Ctrl/Cmd + R.
Agent börjar om från noll istället för att ändra. Händer om prompten är för vag. "Gör den finare" kan tolkas som "bygg om allt". Säg istället "Lägg till X utan att ändra Y".
Wow-momentet
När du inser att du precis byggde en fungerande webbsida på 10 minuter utan att skriva kod — och när du säger "gör den mobilresponsiv" i nästa prompt och den bara fungerar.
Det här är samma princip som driver Claude Code, Cursor, OpenAI Codex, Replit Agent, Bolt.new, Lovable, v0. Alla är samma agent-loop med olika UI. När du fattar den ena fattar du alla.
Varning om begränsningarna
Var realistisk med vad vibe coding är nu, 2026:
- First attempt är ofta ~95% skräp. Sanity skrev en populär bloggpost 2025 om just detta — "First attempt will be 95% garbage". Du itererar tills det blir bra.
- Agenten kan skada mer än den lagar. Citat från r/ClaudeAI: "AI is still just soooooo stupid and it will fix one thing but destroy 10 other things." Granska diff innan du accepterar.
- "AI skriver hela appen" är en lögn. Det finns ett 70%-problem — de sista 30 procenten (edge cases, riktig säkerhet, prestanda) kräver fortfarande förståelse.
Men det du precis såg är på riktigt — och ribban höjs varje månad.
Vad du gör nu
- Lek 30 min till i samma session. Be om fler ändringar: "Lägg till en mörkt/ljust-läge-knapp", "Gör om det till en pomodoro-timer", "Lägg till ljudeffekt vid klick". Se vad som går och vad som bryter.
- Dela sidan. Replit ger dig en publik URL — skicka till någon. Din första "deploy" utan att veta vad deploy är.
- Kolla denna tutorial nästa gång: Peter Yangs "Build a Movie App in 15 Minutes" — går från Replit-nivå till Claude Code i terminalen.
Nästa lektion i spåret: Claude Code på din egen dator — steg för steg. Vi går från browser till terminal och du får din första agent som kan röra vid dina riktiga filer.
Källor som är värda att läsa
- Simon Willison — "Agents are models using tools in a loop"
- Armin Ronacher — "A year of vibes" (en erfaren dev reflekterar efter 1 år av Claude Code)
- Anthropic — Claude Code Quickstart (officiella dokumentationen)