Claude Code vs vibe coding — varför strukturerad AI-utveckling vinner

Det surrar om vibe coding — idén att du skriver en enda prompt och får en hel app tillbaka. Inga manuella beslut, ingen filstruktur att tänka på. AI:n fixar allt. Det låter som en dröm, och för enkla prototyper kan det fungera. Men när du bygger något som ska leva i produktion, vara säkert och gå att underhålla, faller modellen ihop.

Vi på itrab arbetar med Claude Code — Anthropics CLI-verktyg för AI-assisterad utveckling. Men vi promptar inte fram hela appar på en gång. Istället styr vi processen med tydlig arkitektur, medvetna teknikval och steg-för-steg-instruktioner. Skillnaden i resultat är enorm.

Vad är vibe coding?

Begreppet myntades av Andrej Karpathy (tidigare OpenAI/Tesla) i februari 2025 och beskriver en arbetsmetod där du ger en AI-modell en enda övergripande prompt — till exempel "Bygg en SaaS-app för fakturahantering med användarinloggning, dashboard och Stripe-betalning" — och låter modellen generera hela kodbasen.

Lockelsen är uppenbar: du behöver inte kunna programmera. Du "vibar" med AI:n, accepterar den kod som kommer tillbaka och deployar. Men det finns ett grundläggande problem: du förstår inte koden du kör. Du vet inte vilka beslut AI:n tog, vilka beroenden den drog in, eller vilka säkerhetshål som gömmer sig under ytan.

Problemet med en enda prompt

Ingen genomtänkt filstruktur

När en AI-modell får fria händer att generera ett helt projekt skapar den ofta en struktur som ser rimlig ut vid första anblicken — men som saknar konsekvens. Filer hamnar på fel ställen, logik blandas med presentation och det finns ingen tydlig separation of concerns. Resultatet är spagettkod som blir allt svårare att ändra ju längre projektet lever. Du bygger upp en teknisk skuld som förr eller senare måste betalas — med ränta.

Fel teknikval

Be en AI bygga en webbapp och du får nästan garanterat ett projekt baserat på React, Next.js eller liknande JavaScript-ramverk — med hundratals npm-beroenden. För en enkel företagssida eller blogg är det som att ta en långtradare till mataffären. Du får ett projekt som är svårt att förstå, tungt att underhålla och omöjligt att flytta utan att ta med hela ekosystemet.

Valet av teknik borde styras av behov, inte av vad som är populärast i AI:ns träningsdata.

Dold kod för sökmotorer

JavaScript-tunga ramverk renderar innehåll på klientsidan. Det innebär att Googlebot — som indexerar din sida — ser en tom <div id="root"></div> istället för ditt faktiska innehåll. Ja, det finns lösningar som SSR (server-side rendering), men de lägger till ytterligare komplexitet. Med ren server-renderad HTML levereras innehållet direkt — inga extra steg, inga hydration-problem, ingen fördröjning.

Säkerhet och kvalitet

Vibe-kodad output tar sällan hänsyn till säkerhet. SQL-injection, XSS (cross-site scripting) och avsaknad av CSRF-skydd är vanligt i AI-genererad kod som inte fått explicita instruktioner. Det handlar inte om att AI:n inte kan skriva säker kod — den kan — men den gör det inte automatiskt om du inte ber om det.

Så använder vi Claude Code — med struktur och regler

Vår metod handlar inte om att undvika AI — den handlar om att styra AI:n. Claude Code låter oss definiera regler, struktur och begränsningar innan vi skriver en enda rad kod. Så här ser processen ut:

Steg 1 — Definiera filstruktur och arkitektur

Innan vi börjar koda skapar vi en CLAUDE.md-fil i projektets rot. Denna fil fungerar som AI:ns "regelbok" och läses automatiskt vid varje session. Här definierar vi mappstruktur, namnkonventioner och hur projektet ska organiseras. AI:n följer dessa regler genom hela utvecklingsprocessen.

Steg 2 — Ange plattform och språk

Vi väljer teknikstack medvetet. För de flesta webbprojekt innebär det ren PHP utan ramverk, minimal JavaScript, och server-renderad HTML. Inget React, inget Node.js, inga hundratals beroenden. Bara kod som gör det den ska — snabbt, enkelt och flyttbart.

Steg 3 — Instruktioner i CLAUDE.md

I regelfilen specificerar vi konkreta krav:

• Prepared statements för alla databasfrågor — inga SQL-injections
• CSRF-tokens på alla formulär
• Content Security Policy-headers
• Semantisk HTML — rätt element för rätt syfte
• Inga externa beroenden om det inte finns en tydlig anledning
• Kommentering och tydlig kodstruktur

Claude Code följer dessa regler konsekvent genom hela projektet, vilket ger en kodbas som ser ut som om samma utvecklare skrev varje rad.

Steg 4 — Iterativ utveckling

Istället för att generera allt på en gång bygger vi funktion för funktion. Vi granskar varje steg, testar, justerar och går vidare. Claude Code har kontext från hela projektet och bygger vidare på tidigare beslut — men vi behåller kontrollen.

Resultatet — kod som faktiskt fungerar

Med strukturerad AI-utveckling får du:

• Felfri kod från start — prepared statements, escaping, CSRF-skydd
• Blixtsnabb laddtid — server-renderad HTML utan tunga ramverk
• Bästa praxis — semantisk HTML, tillgänglighet, SEO-optimering
• Noll beroenden — ingen npm, inga paket som kan bli sårbara
• Full äganderätt — du äger koden och kan flytta den vart du vill

Det här är inte teori. Sajten du läser just nu — itrab.se — är byggd exakt på det här sättet. Ren PHP, ingen ramverks-overhead, snabb och säker.

Vibe coding vs strukturerad AI — en jämförelse

När passar vibe coding?

Rättvisan kräver att vi erkänner: vibe coding har sin plats. Det kan fungera utmärkt för:

• Snabba prototyper — när du vill testa en idé utan att investera tid i arkitektur
• Engångsskript — verktyg du kör en gång och sedan slänger
• Lärande — att se hur AI strukturerar kod kan ge insikter, så länge du inte deployar resultatet rakt av

Men för allt som ska leva i produktion — din företagssida, din kundportal, din e-handel — behöver du struktur. AI:n är verktyget, men du måste vara arkitekten.