← Alle guider

Vibe Coding -- Byg Apps med AI

Din komplette guide til at bygge software ved hjælp af AI, uden at vaere uddannet programmør.

Indhold

  1. Hvad er vibe coding?
  2. Vaerktoejer
  3. Workflow: Fra idé til faerdig app
  4. Prompt engineering til kodning
  5. Fejlfinding med AI
  6. Bedste praksis
  7. Eksempler på projekter
  8. Begrænsninger og hvad AI ikke kan
  9. Fra vibe coding til rigtig udvikling

Hvad er vibe coding?

Vibe coding er et begreb der blev populært i 2024-2025, skabt af Andrej Karpathy (tidligere OpenAI). Det beskriver en ny maade at bygge software paa:

I stedet for at skrive kode selv, beskriver du hvad du vil bygge, og AI'en skriver koden for dig.

Hvordan adskiller det sig fra traditionel udvikling?

Traditionel udvikling Vibe coding
Du skriver kode fra bunden Du beskriver hvad du vil have
Timer/maaneder paa at laere syntax Minutter at komme i gang
Fejlfinding i documentation Fejlfinding med AI
Kraever teknisk viden Kraever tydelige beskrivelser
Langsomt Meget hurtigt

Hvem er vibe coding for?

Vibe coding er IKKE

Det er vigtigt at forstaa hvad vibe coding ikke er:

Vaerktoejer

Cursor

Hvad er det? En AI-drevet kodeeditor bygget paa VS Code.

Fordele:

Ulemper:

Pris:

Saaadan kommer du i gang:

`ash

1. Download Cursor fra cursor.com

2. Aabn en ny mappe

3. Tryk Ctrl+I (eller Cmd+I paa Mac) for at aabne AI-chatten

4. Skriv hvad du vil bygge

`

Eksempel-prompt:

` Opret en Next.js app med Tailwind CSS. Appen skal vaere en simpel opgave-manager (to-do liste) med:

Replit

Hvad er det? En cloud-baseret kodeeditor med indbygget AI.

Fordele:

Ulemper:

Pris:

Eksempel-prompt i Replit Agent:

` Byg en enkel e-commerce hjemmeside med:

v0 by Vercel

Hvad er det? AI-vaerktoej specielt til frontend/UI-udvikling.

Fordele:

Ulemper:

Pris:

Eksempel-prompt:

` Lav et moderne dashboard til en SaaS-app. Siden skal have:

Bolt.new

Hvad er det? Byg og deploy apps direkte i browseren.

Fordele:

Ulemper:

Pris:

Eksempel-prompt:

` Byg en simpel blog-platform med:

Lovable

Hvad er det? AI-app builder der fokuserer paa design og brugeroplevelse.

Fordele:

Ulemper:

Pris:

Sammenligning af vibe coding-vaerktoejer

Vaerktoej Bedst til Niveau Pris Platform
Cursor Helhedsudvikling Oeved /maaned Desktop app
Replit Komplette apps Begynder /maaned Browser
v0 Frontend/UI Begynder /maaned Browser
Bolt.new Hurtige prototyper Begynder /maaned Browser
Lovable SaaS-produkter Begynder /maaned Browser

Workflow: Fra idé til faerdig app

Trin 1: Definer din idé (15-30 min)

Foer du aabner et AI-vaerktoej, skal du have klart:

Spoergsmaal du skal besvare:

Skabelon til idé-beskrivelse:

` Jeg vil bygge en app der [loeser problem] for [maalgruppe].

Hovedfeatures:

  1. [Feature 1]
  2. [Feature 2]
  3. [Feature 3]

Appen skal:

Inspiration: [Eksisterende app/website der minder om] `

Trin 2: Vaelg den rigtige stack (5-10 min)

For simple projekter:

For projekter med data:

For SaaS-produkter:

Trin 3: Byg grundstrukturen (30-60 min)

Eksempel-prompt til grundstruktur:

` Opret et nyt Next.js projekt med Tailwind CSS.

Struktur:

Design:

Trin 4: Byg features én ad gangen (1-3 timer per feature)

Vigtigt: Byg én feature ad gangen. Lad vaere med at bede AI om at bygge alt paa én gang.

Eksempel-prompt til en feature:

` Tilfoej en opgave-manager feature til appen.

Features:

Brug shadcn/ui komponenter. `

Trin 5: Test og fejlfinding (loebende)

Trin 6: Deploy (30-60 min)

Gratis hosting-muligheder:

Platform Bedst til Pris
Vercel Next.js/React Gratis
Netlify Statisk/hybrid Gratis
GitHub Pages Statisk Gratis
Cloudflare Pages Statisk Gratis
Railway Backend/database /maaned

Deploy til Vercel:

`ash

Installer Vercel CLI

npm i -g vercel

Deploy

vercel

Foelg instruktionerne paa skaermen

`

Prompt engineering til kodning

Grundlaeggende principper

1. Vaer specifik

2. Angiv teknologier

3. Beskriv layout

4. Angiv tilstande

Prompt-monstre

Byg en hel app fra bunden:

` Byg en [type app] ved navn [navn].

Teknologier: [framework], [CSS], [database]

Features:

  1. [Feature 1] -- [beskrivelse]
  2. [Feature 2] -- [beskrivelse]
  3. [Feature 3] -- [beskrivelse]

Design:

Start med grundstrukturen og lad mig vide naar den er klar. `

Tilfoej en feature:

` Tilfoej [feature navn] til den eksisterende app.

Featuren skal:

Eksisterende teknologier: [liste] Brug samme design-stil som resten af appen. `

Ret en fejl:

` Foelgende fejl opstaar naar jeg [beskriv handling]:

[Fejlmeddelelse fra konsollen]

Hvad er aarsagen, og hvordan fikser jeg det? `

Optimer kode:

` Optimer denne kode for [performance/brugervenlighed/laesbarhed]:

[Koden]

Forklar hvad du aendrede og hvorfor. `

Avancerede prompt-teknikker

Chain of Thought (Tænk skridt for skridt):

` Byg en login-funktion. Tænk skridt for skridt:

  1. Foerst: Opret formular med email og adgangskode
  2. Derefter: Valider input
  3. Derefter: Send til backend
  4. Derefter: Haandter svar (succes/fejl)
  5. Til sidst: Omdiriger efter login `

Few-shot eksempler:

` Her er et eksempel paa en feature-card komponent:

jsx function FeatureCard({ title, description, icon }) { return ( <div className="p-6 rounded-xl bg-gray-800"> <div className="text-3xl mb-4">{icon}</div> <h3 className="text-xl font-bold mb-2">{title}</h3> <p className="text-gray-400">{description}</p> </div> ); }

Lav lignende komponenter til: TestimonialCard, PricingCard, StatCard `

Fejlfinding med AI

Typiske fejl og hvordan du loeser dem

1. "Module not found"

` Fejl: Module not found: Can't resolve 'next/image'

Aarsag: Du bruger Next.js billedkomponent uden at have installeret dependencies.

Loesning: Kør i terminalen: npm install `

2. "Hydration mismatch"

` Fejl: Hydration failed because the initial UI does not match what was rendered on the server

Aarsag: SSR og klient-side rendering stemmer ikke overens.

Loesning: Brug useEffect til at haandtere klient-specifik kode: jsx const [mounted, setMounted] = useState(false); useEffect(() => setMounted(true), []); if (!mounted) return null;

3. "Type error"

` Fejl: Type 'string' is not assignable to type 'number'

Aarsag: Forkert datatype i TypeScript.

Loesning: Konverter datatypen: sx const num = parseInt(stringValue, 10);

Saaadan bruger du AI til debugging

Trin 1: Kopiér hele fejlmeddelelsen Trin 2: Beskriv hvad du forsøgte at goere Trin 3: Send til AI med denne prompt:

` Jeg får denne fejl naar jeg [beskriv handling]:

[Ful fejlmeddelelse]

Her er den relevante kode: [Koden]

Hvad er aarsagen, og hvordan fikser jeg det? `

Brug browser-konsollen

  1. Aabn din app i browseren
  2. Tryk F12 (eller højreklik -> Inspect)
  3. Gaa til Console-fanen
  4. Kopiér alleroe de fejlmeddelelser
  5. Send dem til AI'en

Bedste praksis

1. Byg i iterations

2. Opret et projekt-kort

Gem dette i din projekts root-mappe som README.md:

`markdown

[App-navn]

Beskrivelse

Kort beskrivelse af appen.

Tech Stack

Projektstruktur

Køre lokalt

ash npm install npm run dev

Nuværende status

3. Brug versionskontrol

`ash

Initialiser Git

git init

Foerste commit

git add . git commit -m "Initial commit: grundstruktur"

Efter hver feature

git add . git commit -m "Tilfoej [feature navn]" `

4. Dokumentér dine prompts

Gem de prompts der virker i en fil:

`markdown

Mine bedste prompts

Oprettelse af grundstruktur

[Prompt]

Fejlfinding

[Prompt]

Feature-udvikling

[Prompt] `

5. Lad AI gennemgaa din kode

` Gennemgaa min kode for potentielle problemer:

Koden: [Koden] `

Eksempler på projekter

Eksempel 1: Portfolio-hjemmeside

Idé: En personlig portfolio for en grafisk designer.

Prompt til Cursor/v0:

` Byg en moderne portfolio-hjemmeside for en grafisk designer.

Sider:

Features:

Teknologier: Next.js, Tailwind CSS, Framer Motion `

Tid at bygge: 2-3 timer

Eksempel 2: SaaS Dashboard

Idé: Et dashboard til at spore abonnementer og udgifter.

Prompt:

` Byg et abonnementstracker-dashboard.

Features:

Design:

Teknologier: Next.js, Tailwind CSS, Supabase, Recharts `

Tid at bygge: 4-6 timer

Eksempel 3: Booking-system

Idé: Et simpelt booking-system til en froesoersalon.

Prompt:

` Byg et booking-system for en froesoersalon.

Brugere kan:

Admin kan:

Teknologier: Next.js, Tailwind CSS, Supabase, Resend (e-mail) `

Tid at bygge: 6-8 timer

Eksempel 4: E-commerce landing page

Idé: En enkel product page til et enkelt produkt.

Prompt:

` Byg en landing page til et produkt: [Produktnavn]

Siden skal have:

Design:

Teknologier: Next.js, Tailwind CSS `

Tid at bygge: 1-2 timer

Begrænsninger og hvad AI ikke kan

Hvad vibe coding er godt til

Hvad vibe coding IKKE er godt til

Kvaliteten af AI-genereret kode

Typiske problemer:

  1. Duplikeret kode -- AI glemmer at genbruge komponenter
  2. Manglende error handling -- kode fungerer kun i ideelle tilfaelde
  3. Sikkerhedsproblemer -- SQL injection, XSS, etc.
  4. Performance-problemer -- unødvendige genrenderinger, store billeder
  5. Manglende test -- AI laver sjældent automatiserede tests

Hvornår du skal stoppe med vibe coding

Fra vibe coding til rigtig udvikling

Laeringsvej

  1. Begynd med vibe coding -- byg simple projekter
  2. Laer grundlaeggende HTML/CSS/JS -- forstaa hvad AI laver
  3. Laer et framework -- Next.js er et godt valg
  4. Laer om databaser -- SQL og NoSQL
  5. Laer om authentication -- sikker login og brugerstyring
  6. Laer om deployment -- sætte apps i produktion

Anbefalede laeringsressourcer

Gratis:

Betalte:

Fra prototyper til production

Naar du er klar til at goere dine projekter mere alvorlige:

  1. Tilføj test -- skriv automatiserede tests for din kode
  2. Brug TypeScript -- faa type-sikkerhed og bedre IDE-støtte
  3. Implementer CI/CD -- automatiser test og deployment
  4. Laer om sikkerhed -- OWASP Top 10, data-kryptering
  5. Optimer performance -- caching, lazy loading, billedoptimering
  6. Overvaag din app -- logging, fejlrapportering, analytics

Naar du skal hyre en programmør

Vibe coding er fantastisk til prototyper, men naar dit projekt vokser:

Naeste skridt

  1. Vaelg et vaerktoej -- proev Cursor, Replit eller v0 i dag
  2. Byg dit foerste projekt -- start med en simpel landing page
  3. Del dit projekt -- vis det til venner eller læg det paa GitHub
  4. Lær af fejl -- hver fejl er en laeringsmulighed
  5. Byg videre -- tilfoej features og forbedringer løbende

Denne guide er skrivet i juni 2026. AI-vaerktoejer udvikler sig hurtigt, saa nye vaerktoejer og funktioner kan have meldt sig paa banen.