NÄSTA NIVÅ

DU ÄR HÄR NU

Du har gjort det de flesta aldrig gör

Du har byggt något, sett det fungera i en webbläsare och kanske till och med delat en länk med någon. Det låter litet — men det är exakt det steg de flesta aldrig tar. De läser, planerar och tänker. Du byggde.

Nu börjar nästa fas. Det handlar inte längre om att få något att funka — det handlar om att bygga saker som faktiskt används. Av dig, eller av andra.

Den här guiden täcker det som händer direkt efter grunderna: hur du bygger mer användbara saker, hur du håller ordning när projektet växer, och vilka vanor som skiljer någon som byggt en sak från någon som bygger kontinuerligt.

NIVÅ 1: FÅ NÅGOT ATT FUNKA ✓
NIVÅ 2: BYGGA SAKER SOM ANVÄNDS ←

BÄTTRE PROMPTS

Hur du får mer av AI

I del ett lärde du dig att vara konkret. Nu tar du det ett steg längre. Ju mer du vet om vad du vill ha, desto mer exakt kan du beskriva det — och desto bättre blir resultatet.

Det finns ett mönster som fungerar för nästan allt:

"Jag bygger [typ av projekt].
Det ska fungera så här: [beskriv flödet steg för steg].
Det ska se ut så här: [beskriv design och känsla].
Tekniska krav: [en HTML-fil / inga externa bibliotek / etc].
Bygg bara [specifik del] just nu, inte hela projektet."

Den sista raden är viktig. Nybörjare ber om allt på en gång. Det ger ett stort, svårhanterligt svar som är svårt att justera. Bygg i delar — en funktion i taget.

PRECISION

EXEMPEL

En prompt som ger exakt vad du vill

Jämför de här två prompterna för exakt samma projekt:

DÅLIG:
"Bygg en anteckningsapp"

BRA:
"Jag bygger en enkel anteckningsapp i en enda HTML-fil.

Flödet:
1. Användaren skriver text i ett stort textfält
2. Klickar på 'Spara'-knappen
3. Anteckningen läggs till i en lista under fältet
4. Varje anteckning har ett datum och en 'Ta bort'-knapp
5. Listan ska finnas kvar om sidan laddas om

Design:
Mörk bakgrund (#0e0e0f), vit text, cyan accent (#00f0ff).
Minimalistisk — inga ikoner, inga animeringar.

Tekniskt:
En enda HTML-fil. Spara data i localStorage.
Inga externa bibliotek.

Bygg bara grundfunktionen nu — listan och spara-knappen.
Inget annat."

Den dåliga prompten ger dig något generiskt som du sedan lägger en timme på att försöka forma om. Den bra prompten ger dig exakt rätt grund att iterera vidare på.

FLERA FILER

När en fil inte längre räcker

Din första sida var troligen en enda index.html. Det är perfekt för enkla projekt. Men när projektet växer — fler funktioner, mer design, mer logik — börjar en enda fil bli svår att hantera.

Det naturliga nästa steget är att dela upp projektet i tre filer:

• index.html — strukturen. Vad som finns på sidan.
• style.css — utseendet. Färger, typsnitt, layout.
• script.js — beteendet. Vad som händer när användaren gör något.

Du behöver inte förstå skillnaden djupare än så. Det som är viktigt är att du ber Claude organisera projektet på det här sättet från start — det gör det enklare att justera en del utan att röra de andra.

"Dela upp projektet i tre filer:
index.html, style.css och script.js.
Länka ihop dem i HTML-filen."

STRUKTUR

VIKTIGT ATT FÖRSTÅ

Claude minns ingenting mellan sessioner

Det här är den vanligaste källan till frustration när man gått förbi nybörjarstadiet. Du har jobbat på ett projekt i flera dagar. Du öppnar Claude igen, skriver "fortsätt där vi slutade" — och Claude har ingen aning om vad du pratar om.

Varje ny konversation börjar helt från noll. Claude har inget minne av tidigare sessioner. Du är den som bär all kontext.

Lösningen: starta varje session med en kort brief. Tre meningar räcker. Klistra sedan in den kod eller fil du ska jobba med.

MALL FÖR SESSIONSTART:

"Jag bygger en anteckningsapp i HTML/CSS/JS.
Den sparar anteckningar i localStorage.
Nu vill jag lägga till en sökfunktion.
Här är min nuvarande kod: [klistra in]"

Det tar trettio sekunder och sparar timmar av förvirring.

RUTIN

PROJEKTFILEN

Skapa ett dokument som håller reda på allt

När projektet växer räcker inte en brief i huvudet. Skapa en enkel textfil i din projektmapp — kalla den PROJEKT.md eller anteckningar.txt — och håll den uppdaterad.

Den ska innehålla:

• Vad projektet gör (en mening)
• Vilka filer som finns och vad de gör
• Beslut du tagit och varför
• Vad som fungerar och vad som återstår

Klistra in den här filen i starten av varje ny Claude-session. Nu vet Claude allt du vet — utan att du behöver förklara om det.

PROJEKTFIL = PROJEKTETS MINNE
DU UPPDATERAR DEN → CLAUDE FÖRSTÅR DEN

ITERERA SMARTARE

En sak i taget — alltid

I del ett itererade du på utseendet: flytta knappen, byt färg, gör texten större. Nu itererar du på funktionalitet — du lägger till saker som faktiskt förändrar vad projektet gör.

Regeln är densamma men viktigare: en sak i taget. Be inte om fem förbättringar i en prompt. Be om en. Testa att den fungerar. Gå sedan vidare.

Anledningen är enkel: om du ber om fem saker och något går sönder, vet du inte vilket av de fem som orsakade problemet. Om du ber om en sak och något går sönder, vet du exakt var felet är.

FEL VÄG:
"Lägg till sökfunktion, redigeringsläge,
exportknapp och kategorier"

RÄTT VÄG:
"Lägg till en sökfunktion som filtrerar
listan i realtid när jag skriver"

FOKUS

SPARA VERSIONER

Den vana som räddar dig gång på gång

I del ett lärde du dig att kopiera mappen med datum. Nu när du bygger mer komplexa saker är det ännu viktigare — och det finns ett bättre system.

Kopieringsmetoden fungerar, men den är manuell och lätt att glömma. Det professionella sättet är Git — ett verktyg som automatiskt sparar snapshots av ditt projekt varje gång du ber det.

Du behöver bara fyra kommandon. Öppna terminalen i VS Code (Ctrl+Ö / Ctrl+`) och kör dem i din projektmapp:

git init           → KÖR EN GÅNG I NYA PROJEKT
git add .          → MARKERA ALLA ÄNDRINGAR
git commit -m "text" → SPARA EN CHECKPOINT
git log           → SE DIN HISTORIK

Vet du inte vad terminalen är? Be Claude förklara hur du öppnar den i VS Code och kör ditt första git init. Det är enklare än det låter.

Spara en checkpoint varje gång något fungerar — innan du ber Claude om nästa ändring.

NÅGOT FUNKAR → git add . → git commit -m "vad du gjorde"
BE OM NÄSTA ÄNDRING

CHECKPOINT

FELSÖKNING PÅ NÄSTA NIVÅ

När varje fix skapar ett nytt problem

Det händer när projektet blivit lite större: Claude fixar det du bad om, men något annat slutar fungera. Du rapporterar det nya felet. Claude fixar det. En tredje sak går sönder. Du har nu spenderat en timme och är längre ifrån målet än när du startade.

Det är inte ett tecken på att du gjort fel. Det är ett tecken på att koden blivit lappad för många gånger i rad utan att Claude har sett helheten.

Tre steg ut ur loopen:

1. Sluta lappa. Fler fixes i samma konversation löser inte problemet — de döljer det.
2. Gå tillbaka. Öppna din senaste version där allt fungerade — antingen från din mapp-backup eller från en Git-commit.
3. Starta ny session. Klistra in hela den fungerande koden, beskriv projektet och berätta exakt vad du vill lägga till — men nämn också att det förra försöket gick sönder och varför.

TRASIG LOOP → GÅ TILLBAKA → NY SESSION → BÖRJA RENT

ÅTERSTÄLL

VERKTYG

Claude fungerar — men det finns bättre alternativ för vissa saker

Claude via webbläsaren är ett utmärkt sätt att börja. Men när projektet växer uppstår ett problem: du kopierar och klistrar kod fram och tillbaka hela tiden. Det tar tid och det är lätt att göra fel.

Nästa steg är ett verktyg där AI är inbyggt direkt i editorn. Det vanligaste alternativet är Cursor — ladda ner det på cursor.com.

Cursor ser ut precis som VS Code (det är faktiskt baserat på VS Code) men du kan markera en del av koden, trycka på en tangent och skriva vad du vill ändra — direkt i filen, utan att kopiera något. AI ser hela projektet och kan göra ändringar i rätt fil automatiskt.

• Claude.ai — bäst för att tänka, planera och bygga från scratch
• Cursor — bäst för att jobba i befintliga projekt med flera filer

Du behöver inte byta direkt. Men när kopierings-och-klistrandet börjar kännas som det tar mer tid än själva byggandet — då är det dags.

CLAUDE.AI → BRA FÖR ATT STARTA
CURSOR   → BRA FÖR ATT VÄXA

NÄSTA PROJEKT

Bygg för ett riktigt behov

Den tydligaste skillnaden mellan nybörjare och någon som faktiskt kommit igång är den här: nybörjaren bygger för att öva. Den som kommit igång bygger för att lösa ett problem.

Det behöver inte vara ett stort problem. Det kan vara:

• En sida du behöver för att presentera dig själv
• Ett verktyg som sparar dig tio minuter om dagen
• Något du annars hade betalat för
• En idé du velat testa men inte vetat hur

När du bygger för ett riktigt behov vet du direkt om det fungerar eller inte. Du använder det. Du märker vad som saknas. Du lägger till det. Det är en feedback-loop du inte kan få av att bygga övningsprojekt.

ÖVNINGSPROJEKT → DU TESTAR
RIKTIGT PROJEKT  → DU ANVÄNDER
SKILLNADEN     → ALLT

BYGG PÅ RIKTIGT

VAD DU KAN BYGGA NU

Projekt på din nivå

Du är inte längre begränsad till en knapp och ett textfält. Här är projekt som är realistiska för någon som precis kommit förbi grunderna:

• Personlig sida — en sida om dig, ditt arbete eller ditt projekt. Enkel att bygga, faktiskt användbar.
• Anteckningsverktyg — sparar text lokalt i webbläsaren. Bra övning i localStorage och listhantering.
• Länksamlare — klistra in URL och beskrivning, se en organiserad lista. Enkelt men direkt användbart.
• Väntelista — en sida med ett e-postfält och ett formulär som samlar intressenter till en idé. Publicera på Netlify, dela länken.
• AI-verktyg — ett gränssnitt som tar din input och skickar den till ett AI-API. Mejlomskrivare, sammanfattare, namngenerator. Kräver ett API-konto men är enklare än det låter.

VÄLJ ETT → BYGG DET → ANVÄND DET → BYGG NÄSTA

GRÄNSER

Vad som börjar bli svårt

Det finns saker du nu kan bygga smidigt — och saker som fortfarande är svåra att underhålla utan att förstå koden. Det är viktigt att veta skillnaden innan du investerar tid.

Fungerar bra med vibe coding:

• Statiska sidor och landningssidor
• Verktyg som sparar data i webbläsaren (localStorage)
• Formulär som skickar till enkla tjänster som Formspree
• AI-gränssnitt mot externa API:er
• Prototyper för att testa idéer snabbt

Börjar bli svårt:

• Inloggning och användarkonton
• Betalningar
• Data som ska sparas permanent för flera användare
• System med många delar som påverkar varandra

Det är inte att AI inte kan skriva sådan kod. Det är att du inte kan underhålla och felsöka den utan att förstå vad som händer.

AI KAN SKRIVA DET →
DU KAN INTE ÄGA DET (ÄNNU)

VARNING

SAMMANFATTNING

Vad du tar med dig från den här guiden

1. KONKRETARE PROMPTS → BÄTTRE KOD DIREKT
2. DELA UPP I HTML + CSS + JS → LÄTTARE ATT HANTERA
3. STARTA VARJE SESSION MED EN BRIEF + KOD
4. HA EN PROJEKTFIL DU HÅLLER UPPDATERAD
5. EN SAK I TAGET — ALLTID
6. SPARA VERSIONER INNAN DU ÄNDRAR
7. TRASIG LOOP → GÅ TILLBAKA → BÖRJA RENT
8. BYGG FÖR ETT RIKTIGT BEHOV, INTE FÖR ATT ÖVAS
9. NÄR KOPIERING TAR TID — TESTA CURSOR

Du behöver inte göra allt på en gång. Välj en sak härifrån som känns relevant just nu och börja med den.

LOOP ACTIVE