Träff 1 · Grunderna
Från idé till skärm
Vad vibe coding är, hur Claude Code tänker och din första lilla sida.
Går du kursen på egen hand? Hoppa över rundan och demon. Läs genomgången, gör övningen och hemuppgiften – och visa någon vad du byggt. Fastnar du: klistra in felet till Claude, eller se om en ledd cirkel passar dig eller din arbetsplats.
Mål för träffen
- Förstå vad vibe coding är – och vad det inte är.
- Ha kört din första riktiga session i Claude Code.
- Ha en fungerande webbsida som körs på din egen dator.
Agenda (60 min)
| Tid | Vad |
|---|---|
| 0–10 | Runda: namn, roll och en sak du önskar att du kunde bygga själv |
| 10–20 | Demo: cirkelledaren bygger något litet live, från tom mapp |
| 20–50 | Bygg: din första sida |
| 50–60 | Visa varandra, hemuppgift |
Genomgång – vad är vibe coding?
Vibe coding betyder att du beskriver vad du vill ha på vanlig svenska, och låter en AI-agent skriva koden. Du styr med mål, krav och feedback – inte med syntax.
Det låter som något nytt, men för den som någon gång beställt, utvecklat eller förbättrat ett arbetssätt är det välbekant: du är beställaren, Claude är leveransteamet. Allt du kan om att beskriva behov, avgränsa, ge tydlig återkoppling och pröva om resultatet håller gör dig till en bättre vibe coder.
Claude Code är en agent, inte en chatt
I vanliga Claude-chatten får du kod som text. Claude Code arbetar däremot direkt i en mapp på din dator:
- skapar och ändrar filer,
- kör kommandon (installera, starta, testa),
- läser felmeddelanden och rättar sig själv.
Därför frågar den om lov innan den gör saker. Läs alltid vad du godkänner – det är din dator.
Vad det är bra för – och inte
| Passar bra | Passar sämre |
|---|---|
| Prototyper och demos | System som hanterar känsliga personuppgifter |
| Interna verktyg för dig eller teamet | Saker som kräver garanterad drift och support |
| Att testa en idé innan man beställer | Integration med organisationens verksamhetssystem |
| Att förstå vad utvecklare pratar om | Allt du inte förstår tillräckligt för att ta ansvar för |
Övning – din första sida
- Skapa mappen
vibe/forsta-sidanoch öppna den i Claude Code. - Kör prompt A1 – be om en enkel sida om dig själv och vad du jobbar med.
- När Claude säger att den är klar: be den starta sidan så att du kan se den i webbläsaren (prompt A2).
- Ändra något. Och något till. Prova att vara vag ("gör den snyggare") och sedan konkret ("byt till mörk bakgrund och lägg till tre saker jag jobbar med som kort"). Märker du skillnaden?
Tips: Du behöver inte förstå filerna Claude skapar. Men be gärna om en förklaring: "Förklara kort vilka filer du skapade och vad var och en gör."
Du är klar när
- Du ser din sida på
localhosti webbläsaren. - Du har gjort minst tre ändringar via prompts.
Hemuppgift (15–30 min)
- Bygg vidare på sidan, eller gör en ny: en enkel kalkylator för något du räknar på i jobbet (budget, tid, bemanning, kostnad per ärende).
- Fundera på en idé till ditt cirkelprojekt – kolla idébanken för inspiration.
Fastnat?
- Sidan syns inte – fråga Claude: "Sidan laddar inte i webbläsaren. Kolla att servern är igång och berätta vilken adress jag ska öppna."
- Claude gör något annat än du ville – tryck Esc för att avbryta, och förklara igen. Det är helt normalt.