Vibe Coding · Lektion

Dela upp stora uppgifter i steg

Dela upp en funktion i promptbara delar.

Lektion 3 av 413 steg

Dela upp stora uppgifter i steg är en gratis lektion i Vibe Coding på CoddyKit. Detta är lektion 3 av 4. Du kan läsa vilka 3 lektioner som helst i den här lärvägen kostnadsfritt i sin helhet – därefter låser CoddyKit PRO upp alla lektioner, plus praktisk övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Den ingår i lärvägen för Vibe Coding, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i Vibe Coding innehåller totalt 4 lektioner.

Stora uppgifter knäcker AI:n

Om Ni ber AI:n att "bygga en todo-app med inloggning, databas och mörkt läge" i en enda prompt får Ni ofta en trasslig röra — halvfärdig, full av fel och omöjlig att granska. AI:n, precis som människor, arbetar bäst med en tydlig sak i taget.

Färdigheten i den här lektionen är dekomposition: att dela upp en stor funktion i små, promptbara delar som Ni bygger och verifierar en i taget.

Varför små steg vinner

Att bygga i små steg med AI ger stora fördelar:

Granskningsbart — Ni kan faktiskt läsa 20 rader, inte 500.
Testbart — kör varje del och bekräfta att den fungerar innan Ni går vidare.
Återställningsbart — om steg 3 går sönder är steg 1–2 fortfarande säkra.
Styrbart — Ni korrigerar kursen tidigt, inte efter en jättelik röra.

Små steg är hur proffs levererar tillförlitliga appar med AI.

Planera först, skapa sedan en prompt

Innan Ni skriver kod kan Ni låta AI:n hjälpa Er att planera. Be den dela upp funktionen i en numrerad lista med steg. Ni bygger inte ännu — Ni tar fram en färdplan som Ni kan följa och ordna om.

Den här planeringsprompten kostar ett meddelande och besparar Er arbetet med att bygga fel sak.

You are a senior engineer. Don't write code yet. I want to build a 'save favorite articles' feature for my web app. Break this into a numbered list of small, buildable steps, from simplest to most complete. Keep each step to one clear task.

En bra uppdelning

En stabil plan förvandlar en skrämmande funktion till en checklista. För funktionen "favoriter" kan AI:n till exempel svara:

1. Lägg till en stjärnknapp på varje artikelkort.
2. Växla stjärnans fyllda/tomma tillstånd vid klick.
3. Lagra ID:n för favoritmarkerade artiklar i webbläsaren.
4. Läs in sparade favoriter när sidan öppnas.
5. Lägg till vyn "Mina favoriter" som filtrerar listan.

Nu är varje rad en egen liten prompt.

Skapa en prompt för ett steg i taget

Med planen klar bygger Ni endast steg 1. Säg uttryckligen till AI:n att stanna där. Då blir resultatet litet och fokuserat.

Observera begränsningen: endast det här steget. Det hindrar AI:n från att rusa vidare och skriva hela funktionen i ett enda block som inte går att granska.

We're following our plan. Build ONLY step 1: add a star button to each article card. Use vanilla JS and HTML. Don't implement saving or toggling yet — just render the button. Return only the code for this step.

Verifiera innan Ni fortsätter

Efter varje steg ska Ni köra det och kontrollera. Syns knappen? Bra — gå vidare. Fungerar det inte? Rätta steget innan Ni lägger till mer. Att stapla ny kod på en trasig grund är så vibekodade appar faller samman.

Här är en liten, fristående del av logiken i steg 2 — att växla ett sparat tillstånd — som Ni kan verifiera separat.

// Step 2 logic, tested in isolation
function toggleFavorite(savedIds, id) {
  if (savedIds.includes(id)) {
    return savedIds.filter((x) => x !== id);
  }
  return [...savedIds, id];
}

let ids = [];
ids = toggleFavorite(ids, 7);
console.log(ids);
ids = toggleFavorite(ids, 7);
console.log(ids);

För vidare kontext mellan stegen

Varje nytt steg beror på det föregående. När Ni skapar en prompt för steg 2 bör Ni påminna AI:n om vad steg 1 gav — klistra in relevant kod eller beskriv den. I agentbaserade verktyg som Claude Code eller Cursor kan AI:n se Era filer, så peka bara ut dem.

Utan denna kontext kan AI:n hitta på andra namn och bryta kopplingen mellan stegen.

Now build step 2: toggle the star when clicked. Here is the button from step 1 so you match its class and structure:

<button class="star-btn" data-id="42">☆</button>

Write the click handler that switches between ☆ and ★. Return only the JS for this step.

Metoden med vertikala delar

Ett annat sätt att dela upp arbetet är att först bygga en liten del från början till slut och sedan bredda den. I stället för att bygga hela gränssnittet och därefter hela backend-delen gör Ni EN funktion komplett — och lägger sedan till resten.

Del 1: favoritmarkera en enda hårdkodad artikel, spara den och läs in den igen.
Sedan: använd det fungerande flödet för alla artiklar.

En tunn, fungerande del är bättre än många halvbyggda lager.

Let's build the thinnest working version first. Make ONLY this work end-to-end: clicking a star on one article saves its id to localStorage and re-reading localStorage shows it's saved. Skip the UI polish and the favorites page for now.

Dela upp arbetet i appbyggare

Även i prompt-till-app-verktyg som Bolt, v0 och Lovable lönar sig små steg. Generera den första skärmen, förhandsgranska den och be sedan om nästa ändring. Begär inte hela appen i den första prompten.

Prompt 1: "En landningssida med en hero-sektion och en registreringsknapp."
Prompt 2: "Lägg nu till en prissektion under hero-sektionen."
Prompt 3: "Gör så att registreringsknappen öppnar en modal."

Ni bygger en riktig app genom en konversation, inte genom en enda jättelik begäran.

Håll en löpande checklista

Följ Era steg så att Ni och AI:n håller samma kurs. Ha en enkel checklista i prompten eller i en anteckningsfil och markera framstegen. Den blir det gemensamma minnet för bygget.

I Claude Code fungerar en TODO.md- eller CLAUDE.md-fil utmärkt — agenten läser den och vet vad som är klart och vad som står näst på tur.

Here is our progress. Continue from the first unchecked item.

[x] 1. Star button on each card
[x] 2. Toggle star on click
[ ] 3. Save favorited IDs to localStorage
[ ] 4. Load favorites on page open
[ ] 5. 'My Favorites' filter view

Build step 3 only.

Veta när Ni ska dela upp mer

Om AI:ns resultat för ett enda "steg" fortfarande är stort eller fullt av fel var steget för stort — dela upp det igen. Tecken på att ett steg behöver delas upp:

Svaret består av hundratals rader.
Det berör många filer samtidigt.
Ni kan inte avgöra om det fungerar genom att läsa det.

Det är ingen skam i att ta små steg. Ju mindre steget är, desto mer kontroll behåller Ni.

Snabbtest

Ni ber AI:n bygga en hel funktion på en gång och får 400 rader som Ni inte kan följa. Vad är nästa bästa steg?

Besvara frågan i den interaktiva lektionen

Sammanfattning: Bygg stegvis

Dekomposition är sättet att tämja stora byggen med AI:

Låt först AI:n planera funktionen som en numrerad lista.
Skapa en prompt för ett steg i taget och säg åt den att stanna där.
Kör och verifiera varje steg innan Ni går vidare.
För vidare kontexten och håll en checklista.
Föredra en tunn del från början till slut och dela upp ytterligare när ett steg blir för stort.

Nästa steg: att låsa fast den exakta teknikstacken och stilen så att AI:n bygger på Ert sätt.

Gratis att börja

Lär dig JavaScript med en AI-lärare – gratis

Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.

Kurser: 25
Lektioner: 100

Börja lära dig gratis Visa hela kursen

Vanliga frågor

Är lektionen ”Dela upp stora uppgifter i steg” gratis?

Ja – du kan läsa vilka 3 lektioner som helst i lärvägen Vibe Coding, inklusive ”Dela upp stora uppgifter i steg”, kostnadsfritt i sin helhet här på webben. Därefter låser CoddyKit PRO upp alla lektioner, plus interaktiv övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Kursen i Vibe Coding innehåller totalt 4 lektioner.

Vad lär jag mig i ”Dela upp stora uppgifter i steg”?

Dela upp en funktion i promptbara delar. Ni övar på Vibe Coding med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.

Behöver jag någon erfarenhet för att börja lära mig Vibe Coding?

Du behöver inga förkunskaper. Utbildningen i Vibe Coding på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 3 av 4.

Hur lång tid tar lektionen ”Dela upp stora uppgifter i steg”?

De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.

Kan jag skriva och köra kod i den här Vibe Coding-lektionen?

Ja. Varje Vibe Coding-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.

Alla lektioner i den här kursen

← Tillbaka till Vibe Coding