Claude Code för icke-tekniska.
Hela vägen från första prompten till live-sajt på webben. Plan-mode, modellval, MCPs, GitHub och Vercel, helt utan att skriva en rad kod själv.
Vad du lär dig
Bygga, iterera, deploya.
Idén i huvudet på morgonen, fungerande prototyp innan lunch, live på en domän till kvällen. Samma loop oavsett om det är ett spel, en landningssida, ett internt verktyg eller en mobilapp.
Vad är Claude Code och hur du börjar.
Det här är verktyget, det här är de tre sätten att köra det, och det här är vad du behöver för att komma igång samma kväll.
Claude Code är ett agentiskt kodningsverktyg som hanterar hela utvecklingsflöden via vanliga meningar. Du beskriver vad du vill ha. En sajt, ett spel, en mobilapp, en dashboard, en webbskrapa. Det gör en plan, genererar kod, testar den, felsöker, och levererar.
Skillnaden mot att bygga inne i en chatt är var det körs. Claude Code arbetar direkt på din dator. Det skapar filer, redigerar dem, och bygger lokalt. Du får mer kraft, mer kontroll, och billigare drift när det skalar.
Tre sätt att köra det
Desktop-appen
Du laddar ner den som vilken app som helst. Tre flikar i vänsterkanten, chatt, co-work, och kod. Vi jobbar i kod-fliken. Snabbaste vägen igång och det vi använder genom hela kursen.
Terminalen
Det textbaserade gränssnittet som faktiskt kör Claude Code under huven oavsett vilket alternativ du väljer. Vissa föredrar att jobba direkt här, ofta de med teknisk bakgrund.
En IDE
Ser tekniskt ut, men fördelen är att varje fil Claude skapar dyker upp i en panel. Du ser exakt vad som byggs och vad som ändras. Bra mellanläge när du vuxit ur desktop-appen.
Abonnemang och usage-fönster
Claude Code kräver ett betalt Claude-abonnemang. Free-planen räcker inte. Är du ny så är Pro på 20 USD i månaden det jag rekommenderar. Du har det kanske redan. Kör en period, uppgradera om det behövs.
- Pro räcker långt för lärande, experiment och personliga verktyg.
- Max på 100 eller 200 USD i månaden är värt det när du bygger frekvent och tungt.
- Användningen återställs var femte timme. Slår du i taket mitt i ett projekt är du inte avstängd länge.
- Det finns ett veckotak ovanpå. Det kan förvirra. Kolla under inställningar och usage för att se var du står.
Tumregel
Sätt inte upp en budget innan du har provat. Pro är så billigt att det är dyrare att fundera på det än att betala det.
Första bygget. Prompt, plan, iterera.
Hela hantverket ligger i den här loopen. Lär dig den ordentligt en gång, och resten av kursen blir varianter på samma tema.
En projektmapp per bygge
Varje projekt behöver en egen mapp på din dator. Det är där Claude jobbar, skapar filer, och redigerar. Skapa en ny undermapp varje gång du startar något. Allt blir prydligare, och du kan deploya varje projekt för sig senare.
Plan-mode först, alltid
Innan du skickar din första prompt, växla till plan-mode. Istället för att Claude rusar iväg och börjar koda kartlägger det först hur det ska implementera allt. Det ställer klargörande frågor om det behövs, och du får läsa hela planen innan något byggs.
Princip
För varje första prompt i ett nytt projekt, börja i plan-mode. När du är inne i ett bygge och bara ändrar grejer kan du växla till accept-edit. Plan-mode finns kvar att gå tillbaka till när du gör en stor förändring.
Loopen, fem steg
- Beskriv vad du vill ha. Idén och några regler räcker. Det behöver inte vara perfekt.
- Plan-mode och skicka. Trust the workspace, alltså godkänn mappen. Claude börjar planera.
- Svara på frågorna. Vill du inte ha något av alternativen, skriv det i "annat". Vill du ha förslaget, ta det.
- Läs planen, justera, godkänn. Lägg anteckningar direkt på planen om något är fel. Acceptera när du är nöjd.
- Det bygger på egen hand. Skapar filer, kör verktyg, testar i preview, fixar buggar, kommer tillbaka när det är klart. Du kan göra annat under tiden.
Iterera ett steg i taget
När prototypen är på plats är jobbet att hitta vad som funkar och inte funkar funktionellt, vad du gillar och inte gillar estetiskt, och förfina det tills det är exakt vad du vill ha. Allt görs via prompts.
Nyckelinsikt
Gör en ändring i taget. Slänger du in flera ändringar samtidigt är det mindre troligt att Claude träffar rätt på alla. Ändringarna interagerar med varandra på sätt du inte förutsåg. En i taget betyder att om något går sönder, så vet du vad som orsakade det.
Bra prompt vs dålig prompt
"Fixa knappen och gör spelet bättre. Lägg också till en AI och ändra färgerna."
"Det går inte att se vilken layer som ska rotera innan jag trycker på en knapp. När jag hovrar över en knapp, lägg en glow på motsvarande layer och pilar som visar rotationsriktningen."
Beskriv problemet, beskriv vad du vill ha. Det räcker. När det är klart, testa, hitta nästa sak, fortsätt. Det här är hela processen.
Tips
När det är lättare att visa än att beskriva, ta en skärmbild och släpp in den i chatten. Claude ser allt du laddar upp, och felfixarna går mycket fortare.
Modeller, tokens och context.
Tre val som styr hur snabbt du kommer fram, hur mycket det kostar, och hur smart Claude är när du återvänder nästa morgon.
Tre modeller, ett enkelt val
Claude Code ger dig tre huvudmodeller, Haiku, Sonnet, och Opus. Siffran på slutet förändras över tid, namnen kanske också. De har olika kapacitet, men mer kapacitet betyder mer tokens. Matcha modellen till uppgiften.
| Modell | Använd för | Kostnad |
|---|---|---|
| Haiku snabb | Snabba, lätta uppgifter. Inte tillräckligt kraftfull för seriöst byggande. | Lågt token-tryck |
| Sonnet balanserad | Iterativa redigeringar när projektet redan är på plats. Klarar mycket. | Klart effektivare än Opus |
| Opus bäst | Initial plan och första bygget av varje projekt. Tänker bättre, gör färre misstag tidigt. | Högt, men sparar tid |
Tumregel. Planera och bygg med Opus, iterera med Sonnet. Är du på Max-planen och inte vaktar dina limits hårt, kör Opus rakt igenom och tänk inte mer på det.
Token-budget per uppgift
Du ser också inställningar för low, medium, high och max. De styr hur många tokens Claude får använda för att lösa en uppgift. Sätt nivån efter hur tung uppgiften är, inte efter hur viktig den känns.
Context-fönstret och varför du startar om
Efter några turer i samma chatt har Claude en lång historik att hålla i huvudet. Du kan hovra över context-fönstret för att se hur fullt det är. När det börjar bli fullt kan Claude komprimera, alltså sammanfatta historiken för att fortsätta. Det funkar, men det är inte perfekt. Detaljer trillar bort. Nyans försvinner. Över tid driver kvaliteten på Claudes förståelse.
Bättre rörelse
Starta en fresh session. Nackdelen är att Claude inte har konversationshistoriken. Det vet bara vad som ligger i projektmappen. Två steg gör överlämningen smidig.
Steg ett, claude.md
En permanent referensfil i projektroten med allt Claude behöver veta långsiktigt om projektet. Reglerna, tech stack, arkitektur, API-referenser, preferenser du vill att det följer konsekvent.
För att skapa den, tryck snedstreck. Det öppnar listan med slash-commands. Hitta /init. Claude går igenom projektmappen och genererar filen åt dig automatiskt. När något stort förändras, be det uppdatera filen.
Steg två, summan av var du är
claude.md fångar allt permanent men en sak till. Var du slutade. Innan du startar en ny session, skicka den här prompten i den gamla.
# Överlämningsprompt
Sammanfatta allt viktigt om det här projektet,
arkitekturen, beslut vi tagit, nuvarande status,
och vad som är kvar att göra,
så att jag kan klistra in det i en ny session.
Sen, ny session, peka på samma mapp, klistra in summan. claude.md läses automatiskt vid varje session-start. Tillsammans har Claude allt det behöver för att fortsätta utan att tappa takt.
Parallella sessioner och vardagstips.
När basen sitter blir det här de små vanorna som gör en kväll med Claude Code dubbelt så produktiv som den behöver vara.
Bygg flera projekt samtidigt
Bygg tar tid. Initiala bygget tar 5 till 15 minuter beroende på komplexitet, ibland mer. Istället för att sitta och titta på det kan du köra flera sessioner parallellt och bygga olika projekt samtidigt.
- Börja inte med det. Bli bekväm med basen först.
- Status-panelen visar varje session. Gul prick betyder att den behöver din input.
- Hoppa runt allt eftersom. Godkänn planer, svara på frågor, varje session går i sin egen takt.
- Stötta din egen koncentration. Två sessioner är ett bra första steg, tre är ofta gränsen innan det blir kaos.
Fyra små vanor som ger mest tillbaka
Skärmbild när det är lättare att visa
Fel i UI:t, en knapp på fel ställe, en bugg i flödet. Skärmbild, släpp in, tre ord om vad som är fel. Snabbaste felsökningen som finns.
Tillgångar in i mappen
Bilder, logotyper, produktbilder, befintliga texter. Släpp filerna direkt i projektmappen istället för att klistra in i chatten. Claude hittar dem.
En extra Claude-chatt vid sidan
För klargörande frågor om tech stack, förslag eller idéer. Då slipper du fylla projektets context-fönster med småprat.
Be Claude ställa frågor först
Innan du ens skickar den första prompten, berätta idén för Claude och be det ställa följdfrågor. Nu landar din riktiga prompt mycket vassare.
Återkommande mönster
Bygg, hitta nästa sak att fixa, skärmbild om det är lättare än ord, en ändring i taget. Det här är 80 procent av det dagliga jobbet.
När det blir buggigt
Preview-panelen kan haka upp sig efter uppdateringar. Klickar du "open file" och väljer HTML-filen manuellt brukar det lösa sig. Den här typen av småfix hör till. Vänj dig vid att jobba runt dem istället för att bli irriterad.
MCPs och connectors.
Det är här Claude Code slutar vara ett kodverktyg och börjar vara en automation. Det går från att bygga sajter till att jobba med dina riktiga verktyg.
MCP är ett sätt att koppla Claude Code, eller vilken AI-agent som helst, till externa verktyg och tjänster. Tänk på MCPs som en USB-C för mjukvara. Ett universellt protokoll som låter olika verktyg plugga in i varandra.
Du kan bygga egna MCPs för vad som helst, men Claude har redan ett stort bibliotek färdigt. De kallas connectors. Du hittar dem under customize. Stora knappen "connect your apps" låter dig bläddra hela listan. Eller, klicka direkt på connectors för att se det du redan kopplat och dess inställningar.
Stora listan, det vanliga finns där
- Google Calendar, Google Drive, Gmail
- Notion, Canva
- Asana, Linear, Jira för projekt
- Stripe för betalningar
- Granola för mötesanteckningar
- Och många fler, listan växer hela tiden
Två connectors värda att koppla på direkt
Context7
Hämtar in färsk dokumentation för 50+ ramverk som React, Expo, Tailwind, Vercel. Verktygen ändras, Claude kan ha tränats på äldre versioner. Context7 ser till att det alltid jobbar mot aktuell dokumentation. Koppla på en gång och glöm bort den.
Stripe
Bygger du något som ska ta betalt går processen mycket smidigare. Du beskriver det du vill bygga, Claude använder Stripe-MCPn för att sätta upp produkter, priser och länkar. Du slipper hoppa fram och tillbaka.
Behörigheter per connector
När en connector är tillagd kan du styra exakt vad den får göra. Blocka vissa actions, kräv godkännande för andra, eller tillåt automatiskt. Sätt det stramt i början, lossa när du litar på flödet.
Mindset
Slutar du tänka "vad kan Claude bygga åt mig" och börjar tänka "vilket av mina verktyg vill jag prata med via Claude" så öppnas möjligheterna upp.
Ett konkret exempel
Bygget gjordes med Granola för mötesanteckningar plus Asana för projekt. Prompten var ungefär: bygg ett kanban-gränssnitt som hämtar in mötesanteckningarna från Granola, extraherar action items, lägger varje item på en bräda, hämtar teammedlemmar från Asana till sidan, och låter mig dra-och-släppa människor på uppgifter. När jag är klar trycker jag på en knapp som pushar tillbaka till Asana.
Hela det flödet, från möte till tilldelade uppgifter i ditt riktiga projektverktyg, byggdes på en eftermiddag.
API-nycklar och säkerhet.
Två nycklar att hålla isär, ett par vanor att lägga sig till med, och en check du kör innan du delar ut adressen till andra.
API-nyckel vs abonnemang
Vill du bygga in en AI-modell direkt i din app, så att appen analyserar bilder, genererar text, eller gör vision på sina egna villkor, behöver du en API-nyckel. En API-nyckel är en unik teckensträng, ett digitalt ID-bricka som säger åt en tjänst att du har rätt att använda den, och som spårar användning för fakturering.
Din Claude API-nyckel är separat från ditt Claude-abonnemang. Du laddar den med pengar oberoende, via Anthropic-konsolen. Sen drar appen från det saldot varje gång den anropar. För personligt bruk räcker några dollar långt. Samma princip gäller för andra modeller, ChatGPT, Gemini, vilken det än är.
Steg för att skaffa en nyckel
- Gå till konsolen. För Claude är det
console.anthropic.com. Logga in med samma konto. - Lägg till medel. Några dollar räcker för att börja experimentera.
- API keys, create new key. Ge den ett namn så att du kan spåra vad den används till.
- Kopiera nyckeln när den visas. Du ser den bara en gång. Tappar du bort den får du skapa en ny.
Aldrig
Klistra inte in API-nyckeln i Claude-chatten. Chattarna går via webben och kan, beroende på inställningar, användas för modellträning. Den som får tag på din nyckel kan dränera saldot. Stäng av träning på din data också, men säkrare vana är att lägga in nycklar manuellt på rätt ställe.
Rätt ställe är .env.local
Variabler av den här typen läggs i en fil som heter .env.local. env står för environment variables, local betyder att den bara finns på din maskin. Du behöver inte gå dit själv, men i filstrukturen är den i .gitignore. Det betyder att om du pushar projektet till GitHub, så följer den filen aldrig med.
- Be Claude skapa
.env.localåt dig och inkludera.env*i.gitignore. - Öppna filen i högerpanelen, ersätt placeholdern med din riktiga nyckel.
- Spara, gå tillbaka till Claude och säg att nyckeln är inlagd och att det får testa.
Säkerhetsskill innan du går live
Innan du delar ett bygge med andra, kör en säkerhetscheck. Den finns inbyggd som skill. Du kan skriva "kör en säkerhetscheck" och den triggas automatiskt, eller använda slash-kommandot under skills.
Claude går igenom hela kodbasen och letar efter sårbarheter. Resultatet är en analys, ofta med en ren slutsats och åtgärdslista om något hittas. Är projektet enkelt och hanterar inga API-nycklar eller användardata blir det ofta tomt, och det är poängen. Vanan är värd att lägga sig till med.
Bonus-prompt
Be också Claude: "Är det något annat jag borde tänka på innan jag gör det här tillgängligt för andra?" Det fångar icke-säkerhetsmässiga saker du missat. Browser-stöd, mobil-touch, edge cases du inte testat, sånt som inte är buggar men ändå skaver.
Git, GitHub och deploy med Vercel.
Engångsjobb. Du sätter upp det här en gång, sen är det en mening per nytt projekt för att få något live på webben.
Tre lager, en gång
Det här ser stort ut första gången. Det är det inte. Du gör tre kopplingar en gång, och sen är det inkluderat i Claudes verktygslåda för alla framtida projekt.
- Git på din dator. Versionshantering. På nyare Mac brukar det redan finnas. Be Claude kolla, och installera om det behövs. Windows-användare kan få en PowerShell-prompt, följ vad det säger.
- GitHub-konto kopplat. Kostar inget. Claude kan skapa repon, klona, pusha kod, öppna PRs när det är inloggat på dina vägnar.
- Vercel-konto kopplat till GitHub. Importera ett repo, en knapptryckning, så är sajten live. Auto-redeploy varje gång du pushar.
Installations-flödet, vad som händer i terminalen
När Claude installerar Homebrew och GitHub CLI ber det dig kopiera ett kommando in i terminalen och trycka enter. Du behöver inte öppna terminalen separat, det finns en panel-knapp i Claude Code som öppnar en terminal direkt.
Vana att lära sig
När du skriver lösenordet till din dator i terminalen syns ingenting. Markören rör sig inte. Inga prickar. Det ser ut som att inget händer. Det är så lösenord göms. Skriv hela ditt lösenord och tryck enter. Vänta en minut tills inputrutan är tillbaka. Klart.
Pusha första repot
När GitHub är kopplat går du tillbaka till projektet och säger: "skapa ett nytt GitHub-repo för det här projektet och pusha all befintlig kod." Ett par godkännanden, och du får en direktlänk till repot. Öppna, alla filer ligger där.
Från och med nu är det en mening per projekt. "Skapa ett repo och pusha koden." Klart.
Vercel, från repo till live-domän
- Skapa Vercel-konto med samma GitHub-konto. En klick.
- Continue with GitHub, install. Välj alla repon, det blir mindre friktion senare.
- Import på det repo du vill deploya. Du behöver inte ändra något på import-sidan. Bara Deploy.
- Klart. Sajten är live på en domän. Vercel ger dig en gratis URL direkt, custom-domän kopplas in efteråt om du vill.
Det stora med Vercel
Varje gång du pushar ny kod till GitHub via Claude Code, plockar Vercel upp ändringen och deployar om automatiskt. Inga extra steg. Du fortsätter bara prompta, och versionerna skiftar live i bakgrunden.
Komplexare projekt, två fler steg
Har projektet en API-nyckel eller behöver lagring kommer det inte att fungera direkt. Du har inte gjort något fel, det är förväntat.
- Environment variables i Vercel.
.env.localpushas aldrig till GitHub, så Vercel saknar dina nycklar. Lägg in dem manuellt i Vercel under settings, environment variables. Säg till Claude om du fastnar. - Storage via fliken Storage i Vercel. För databas, sätt upp Neon eller motsvarande. För filer, blob storage. Skapa, koppla till projektet, klart.
- När något brakar, screenshot loggen och ge till Claude. Det jobbar sig igenom dem en i taget.
Skills, plugins och mobilen.
Två sätt att förlänga Claude. Och hur du får din nya sajt att kännas som en riktig app i fickan.
Skills är receptkort för repeterbara uppgifter
Skills är återanvändbara workflows som du bygger in i Claude. De ligger under customize, samma plats som connectors. Du har inbyggda skills som default, en stor community-bibliotek på GitHub, och så kan du bygga egna.
Inbyggda skills
Default-installerade. Säkerhetscheck är ett exempel, debug ett annat. Bläddra listan en gång så att du vet vad som finns när du behöver det.
Community-skills
Open-source-databaser på GitHub. Du laddar in en, och den triggas automatiskt när Claude tolkar din prompt som relevant.
Egna skills
Det här är guldet. Har du gjort en multistegs-process manuellt två gånger, packa den som skill nästa gång.
Receptet
Gör processen en gång med Claude, prata igenom alla beslut. När det funkar, säg "packa det här som en skill". Från och med nu triggas det automatiskt nästa gång du beskriver samma typ av uppgift, utan att du behöver upprepa instruktionerna.
Plugins
Liknande koncept, bredare skopa. Skills täcker en uppgift, plugins täcker en hel roll eller workflow. Också möjliga att hitta i community på GitHub. Gå med när du har konkreta repetitiva flöden, hoppa över första veckan.
Mobil-responsiv webbapp som känns som en app
Bygger du något du vill använda i fickan finns två vägar. Mobil-responsiv webbapp eller riktig native-app. Native är många fler steg, andra verktyg, ofta överkill för personligt bruk. Webbapp tar dig till 95 procent av samma känsla, mycket snabbare.
- Bygg som mobil-responsiv webbapp. När Claude frågar om tech stack vid plan-mode, välj alternativet som funkar mot Vercel.
- Deploya till Vercel. Som vi gick igenom i förra modulen.
- Öppna sajten i mobilens webbläsare. Tryck Dela, sen "Lägg till på hemskärm".
- Den ligger på hemskärmen som vilken app som helst. Ikon, fullskärm, allt sparat data följer med. Du tar bilder med kameran, allt fungerar.
När det är värt att gå hela vägen till native
Native-app ger dig App Store-distribution, push-notiser med fullt OS-stöd, och tightare integration med kamera, kontakter, hälsodata. Det kostar i komplexitet. Andra verktyg, andra deploy-flöden, mer kod. Frågan är inte om du kan det, utan om någon annan än du behöver det. För personligt bruk är webbapp på hemskärmen oftast nog. För något du tar betalt för, eller som ska distribueras brett, börjar native vara värt det.
Bygg din egen skill från första försöket
Nästa gång du gör en multistegs-process manuellt, anteckna stegen i klartext medan du jobbar. När du är klar säg åt Claude: "läs det jag just gjorde, packa det som en skill, döp den till X". Skill-receptet är då redan testat på riktigt, inte teoretiskt.
Avslutande tanke
Det enda som faktiskt får dig framåt är att gå igenom första, andra, tredje projektet. Varje nästa blir lättare. Det första är alltid det svåraste. Här har du gått igenom åtta moduler. Det finns nog mer än tillräckligt för att starta i kväll.
Tre frågor, sen är du klar.
Tre principer som kommer tillbaka i varje bygge. Får du dessa rätt har du basen.
När ska du köra plan-mode?
Vad är bästa praktiken när du itererar på ett bygge?
Varför läggs API-nycklar i en .env.local-fil istället för att klistras in i chatten?
Klar
Bra jobbat. Du tog dig igenom hela mini-kursen.
Nästa steg är inte att läsa mer. Det är att öppna en ny mapp, skriva en första prompt, och låta plan-mode föreslå hur den ska bygga något du faktiskt vill ha.
Veckobrev
Vill du tänka mer kring att bygga med AI och Claude?
Onsdagar, kort, lågmält, på svenska. Tre delar varje vecka.
- En personlig reflektion, om AI och om att vara människa samtidigt
- En konkret AI-insikt, något testat i veckan, ofta i Claude Code
- En 10-minuters mikroövning du kan göra direkt