"Vibe coding" for begyndere
Jeg har i diverse foredrag og artikler talt om "Vibe coding" og de muligheder det giver for ikke-udviklere at skabe små personaliserede værktøjer og apps ved hjælp af AI. Jeg har allerede skrevet en mere teknisk artikel om emnet, som du kan finde her: Kom i gang med "Vibe" coding - men jeg føler der mangler en mere begyndervenlig introduktion til emnet. Så her er hvordan du kan komme i gang med "Vibe coding", selvom du ikke er udvikler.
Udviklingsmiljø
Først og fremmest skal du have et udviklingsmiljø, hvor AI (og du) kan skrive og køre kode. Der findes mange forskellige muligheder, men for at komme så hurtigt og nemt i gang som muligt, anbefaler jeg at bruge Google Antigravity, som er et gratis og open source udviklingsmiljø fra Google (klon af Visual Studio Code fra Microsoft). Det er tilgængeligt på Windows, Mac og Linux - og har indbygget support for AI-værktøjer som eksempelvis Google's egen Gemini AI og andre populære modeller. Man kan komme langt med den gratis version, men der findes også en betalt version med flere funktioner.
Når den er installeret, skal du åbne den og åbne en tom folder til dit projekt (File -> Open Folder). Så ser det ud som ovenstående (folderen er /test).
AI-assistenten (agent)
Til højre i vinduet ser du AI-assistenten, som du kan bruge til at skrive kode og hjælpe dig med at bygge dine værktøjer. For bare at prøve det af, kan du skifte til Fast-mode og vælge en model som eksempelvis Claude Sonnet 4.5.
Her kan du skrive en prompt til AI'en, som den skal hjælpe dig med. Prøv eksempelvis at skrive:
Lav en HTML-side med alt i én fil (HTML, CSS og JavaScript), og brug CSS animationer eller JavaScript canvas i det omfang det er nødvendigt. Brug responsive design der fungerer på alle skærmstørrelser.
Her er hvad siden skal indeholde:
En animeret visualisering af solsystemet med følgende funktioner:
- Solen i centrum med realistiske størrelser og afstande (skaleret passende)
- Alle 8 planeter der kredser om solen med forskellige hastigheder
- Hver planet skal have sin korrekte farve (Merkur: grå, Venus: gulbrun, Jorden: blå, Mars: rød, Jupiter: orange med striber, Saturn: gul med ringe, Uranus: lyseblå, Neptun: mørkeblå)
- Planeternes baner skal vises som svage streger
- Saturn skal have synlige ringe
- Mørk baggrund med stjerner-
- Titel "Solsystemet" øverst på siden
Gør det visuelt flot og astronomisk nogenlunde korrekt med hensyn til relative størrelser og omløbstider (dog skaleret for at være synligt).
Tryk på send, og AI'en vil begynde at generere koden til dig. Det kan tage et øjeblik. Men når den er færdig, burde der dukke en HTML-fil op i din folder med koden til solsystem-visualiseringen. Filen finder du i en stifinder (filen lægger sig under /test), og hedder noget i retning af "solsystem.html". Dobbeltklik på den for at åbne den i din browser, og du burde se en flot animeret visualisering af solsystemet!
Mere skal der ikke til. Spørg din ynglings-AI-model om, hvad du kan bruge en HTML-side til, og du vil få masser af ideer til hvordan du kan bruge det. Eksempelvis hvordan du kan lægge filen på nettet, eller hvordan du kan pakke den som en app til din telefon eller computer.
Din egen "Vibe" kode
Nu hvor du har prøvet at lave en simpel HTML-side med AI-assistentens hjælp, kan du prøve at lave dine egne "Vibe" kode-projekter. Hvis du ser på min prompt ovenfor, kan du se at jeg bad AI'en om at lave en HTML-side med alt i én fil (HTML, CSS og JavaScript). Det er netop det der gør "Vibe coding" så kraftfuldt - du kan lave små værktøjer og apps uden at skulle bekymre dig om komplekse opsætninger eller flere filer. Alt er samlet i én enkelt fil, som du nemt kan dele og bruge. Så du skal blot beholde min start som skabelon, og ændre den til dine egne ideer og projekter. Eksempelvis:
Lav en HTML-side med alt i én fil (HTML, CSS og JavaScript), og brug CSS animationer eller JavaScript canvas i det omfang det er nødvendigt. Brug responsive design der fungerer på alle skærmstørrelser.
Her er hvad siden skal indeholde:
En sekvenshukommelses-test inspireret af Simon Says-spillet:
Design:
- 4 store farvede knapper i 2x2 grid (rød, grøn, blå, gul)
- Hver knap skal have en distinkt lyd når den aktiveres
- Moderne, rent design med afrundede hjørner og shadows
- Responsiv layout der fungerer på tablet og desktop
- Stor, tydelig overskrift "Hukommelsestest"
Funktionalitet:
- Start-knap der initierer spillet
- Computeren viser en tilfældig sekvens af farver (lysere farve + lyd)
- Spilleren skal gentage sekvensen ved at klikke på knapperne
- Hvis korrekt: tilføj én farve mere til sekvensen og fortsæt
- Hvis forkert: vis "Game Over" med score og "Prøv igen" knap
- Score-tæller der viser nuværende niveau/sekvens-længde
- Best score der gemmes i localStorage
Visuelle effekter:
- Smooth fade-in/fade-out når knapper lyser op
- Kort pause mellem hver farve i sekvensen
- Grøn feedback ved korrekt svar
- Rød feedback ved forkert svar
- Animations når spillet starter/slutter
Tilgængelighed:
- Store, nemme at ramme knapper (mindst 150x150px)
- Tydelig kontrast
- Klare instruktioner på skærmen
- "Hvordan spiller man" sektion med kort forklaring
Gør det professionelt, intuitivt og nemt at bruge for ældre brugere.
Læg mærke til at jeg igen beder om en HTML-side med alt i én fil, og så beskriver jeg hvad siden skal indeholde. Du kan bruge denne tilgang til at lave alle mulige slags værktøjer og apps - lige fra simple spil til produktivitetsværktøjer eller visualiseringer. Det er kun fantasien der sætter grænser!
Meta prompting
En kraftfuld teknik i al AI-kommunikation er meta prompting. Det betyder at du kan bede AI'en om at hjælpe dig med at skrive bedre prompts til sig selv. Så hvis jeg nu skulle skabe et PONG-spil i stedet for en hukommelsestest, kunne jeg starte med at bede AI'en om at hjælpe med at skrive en god prompt til det.
Jeg ville skrive noget i retning af:
Du er en dygtig prompting ekspert der skal hjælpe mig med at skrive en prompt til en AI-model der kan generere kode til et PONG-spil. Det er vigtigt at prompten er detaljeret og præcis, så spillet bliver sjovt og funktionelt - og at den starter med følgende sætning:
-----
Lav en HTML-side med alt i én fil (HTML, CSS og JavaScript), og brug CSS animationer eller JavaScript canvas i det omfang det er nødvendigt. Brug responsive design der fungerer på alle skærmstørrelser.
Her er hvad siden skal indeholde:
-----
Her efter kommer beskrivelsen af PONG-spillet. Du skal stille mig de nødvendige spørgsmål for at få alle detaljer med, og så skrive en komplet prompt til mig baseret på mine svar.
På den måde kan du få AI'en til at hjælpe dig med at skrive bedre prompts, som du så kan bruge til at skabe dine egne "Vibe" kode-projekter. Det gør det nemmere at få præcis det resultat du ønsker, uden at skulle tænke på alle detaljerne selv.
Her er det svar jeg fik tilbage fra AI'en (ChatGPT-5 men det kan være andre modeller), og nu kan konstruktionen af prompten gå i gang ved at svare på de stillede spørgsmål:
Okay. Jeg starter med at stille alle de spørgsmål vi har brug for – når du har svaret, laver jeg én samlet, færdig prompt til dig.
Svar så kort eller langt du vil – bare hold samme nummerering, så jeg kan matche svarene.
1. Spillere og styring
1.1. Skal det være:
* A) 2 spillere på samme tastatur
* B) 1 spiller mod AI
* C) Begge muligheder?
1.2. Hvilke taster skal bruges på desktop? (fx W/S til venstre, ↑/↓ til højre)
1.3. Skal der være touch-styring på mobil/tablet (fx træk på skærmen, knapper, eller automatisk følge fingeren)?
2. Banestørrelse og responsivitet
2.1. Skal spilområdet:
* Fylde næsten hele skærmen, eller
* Ligger i en “ramme” med margin omkring?
2.2. Må vi gerne låse højden (fx 16:9 forhold) og skalere i bredden på små skærme?
3. Hastighed og sværhedsgrad
3.1. Cirka tempo: langsomt, medium eller hurtigt som standard?
3.2. Skal sværhedsgraden stige over tid (fx bolden bliver hurtigere efter hvert slag eller hvert point)?
3.3. Hvis der er AI: hvor svær skal den være (nem, medium, svær), og skal sværhedsgrad evt. kunne vælges?
4. Pointsystem og kampregler
4.1. Spiller man til et bestemt antal point (fx først til 5, 10, 21), eller bare uendeligt med “reset”?
4.2. Skal der være:
* Startskærm / “Press Start”
* Pausefunktion
* Game over-skærm med vindertekst og “Spil igen”-knap?
5. Grafik og stil
5.1. Foretrukken stil:
* Klassisk retro (sort baggrund, hvide paddles/bold),
* Farverig moderne stil, eller
* Noget specifikt (beskriv kort)?
5.2. Ønsker du specielle effekter (fx glow, skygger, trail på bolden, simple animationer ved point)?
5.3. Skal font og UI være meget simple (standard webfont), eller lidt mere “spil-agtige” websafe/font-stack?
6. Lyd
6.1. Skal der være lydeffekter (bounce, point, start/game over)?
6.2. Må der bruges meget simple “beep”-lyde genereret i JS, eller vil du hellere helt uden lyd?
6.3. Skal der være en mute-knap?
7. UI-elementer
7.1. Hvad skal vises på skærmen ud over selve banen? Fx:
* Score for begge spillere
* Aktuel spil-status (“Klar”, “Pause”, “Game Over”)
* Kontrol-vejledning (taster / touch)
7.2. Skal der være en lille menu eller knapper (Start, Pause/Fortsæt, Reset)?
8. Teknisk stil og krav til koden
8.1. Skal koden være:
* Meget pædagogisk, med mange kommentarer (til undervisning), eller
* Mere kompakt/”produktionsagtig” med få kommentarer?
8.2. Skal den være skrevet i “ren” JavaScript (ingen frameworks, ingen bundlere) – går jeg ud fra, men bekræft.
8.3. Har du præferencer for struktur? (fx én `<script>` nederst i HTML’en, brug af ES6-klasser, eller bare funktioner/objekter).
9. Sprog og tekst
9.1. Skal al UI-tekst (knapper, beskeder) være på dansk eller engelsk?
9.2. Skal spillet have en kort instruktionstekst øverst/nederst (fx “Brug W/S og ↑/↓ for at styre battet”)?
10. Begrænsninger og ekstra features
10.1. Må der bruges eksterne assets (fonte fra Google Fonts, små lyde-filer), eller skal alt være 100 % uden netværkskald?
10.2. Ønsker du nogle “bonus-features”, fx:
* Highscore (kun i current session)
* Valg af farvetema
* “Slow motion” ved point
* Enkel settings-menu (hastighed, sværhedsgrad)?
Når du har svaret på disse, skriver jeg en samlet, færdig prompt, som starter præcis med:
“Lav en HTML-side med alt i én fil (HTML, CSS og JavaScript), og brug CSS animationer eller JavaScript canvas i det omfang det er nødvendigt. Brug responsive design der fungerer på alle skærmstørrelser.
Her er hvad siden skal indeholde:”
…og derefter en fuld, detaljeret specifikation baseret på dine svar.
Prøv selv - det er en sjov og lærerig øvelse i at skabe præcise prompts, som giver dig de resultater du ønsker.