Vibe-coding i praksis: prøv vores virtuelle AI-workshop

Vibe-coding gør det muligt at bygge software ved først og fremmest at beskrive, hvad den skal gøre. Vores virtuelle AI-workshop er et konkret eksempel: et interaktivt 3D-lokale med seks stationer om generativ AI, prompthåndværk og ansvarlig brug. Lokalet er udviklet gennem en samtale med Claude Code, uden at vi selv har skrevet koden linje for linje.

Det betyder ikke, at et enkelt ønske blev til en færdig oplevelse. Arbejdet bestod af mange små omgange: formulér en ændring, afprøv resultatet, find fejlen, præcisér forventningen og prøv igen. Netop den proces er det interessante ved vibe-coding.

Hvad er vibe-coding?

Vibe-coding er en arbejdsform, hvor du bruger en coding-agent til at omsætte beskrivelser i almindeligt sprog til fungerende kode. Du sætter retningen og vurderer resultatet. Agenten kan læse projektets filer, foreslå en plan, ændre koden og køre kontroller inden for de rammer, den har fået.

En coding-agent er dermed en type AI-agent: en specialiseret sprogmodel med en grad af autonomi til at udføre handlinger. I dette tilfælde er handlingerne bl.a. at oprette filer, redigere JavaScript og undersøge fejl. Sprogmodellen “forstår” ikke produktet som et menneske. Den genererer forslag på baggrund af mønstre i kode og den kontekst, du giver den.

Derfor flytter opgaven sig. Du behøver ikke nødvendigvis selv at kunne skrive hver linje, men du skal stadig kunne beskrive målet, genkende et forkert resultat og beslutte, hvornår løsningen er god nok. Jo mindre kontekst du giver, jo mere skal modellen gætte.

Fra idé til et rum, man kan gå rundt i

Den virtuelle workshop er bygget som et selvstændigt website i almindelig HTML, CSS og JavaScript. Three.js står for 3D-scenen i browseren. Der er ikke et stort system bagved og ingen database; det er en afgrænset oplevelse, som kan åbnes direkte fra et link.

I lokalet kan du bevæge dig mellem seks stationer. De handler bl.a. om prompthåndværk, generativ AI, AI-forordningen, ChatGPT og Copilot. Når en station aktiveres, tændes et lysspor, og en ny tone føjes til rummets lyd. Tonen er placeret i 3D-rummet, så lydens retning og styrke ændrer sig, når du bevæger dig.

Det færdige resultat ser samlet ud, men et versionsstyringsværktøj som GitHub gør det muligt at følge projektets historik skridt for skridt. Den historik viser en mere nyttig fortælling end idéen om den perfekte prompt:

• Først blev selve rummet og stationerne bygget.
• Derefter kom aktivering, lys og rumlig lyd til.
• Lydfiler gav problemer med adresser og browserens sikkerhedsregler, så løsningen måtte ændres og testes igen.
• Lysstyrke, lydniveau og bevægelse blev justeret efter afprøvning.
• Mobilvisning, indlæsningsstatus og metadata blev tilføjet, da grundoplevelsen virkede.

Det er iterativ prompting anvendt på software. Hver omgang gav ny information, som kunne bruges i den næste. Vibe-coding fjerner ikke behovet for problemløsning; det gør det muligt at føre problemløsningen gennem beskrivelser, feedback og konkrete test.

Hvorfor dette projekt var egnet

Opgaven havde en tydelig ramme: Ét rum i browseren, seks stationer og en bestemt stemning. Resultatet kunne ses og høres med det samme. Hvis en lyskegle var for kraftig, eller en lyd ikke startede, var fejlen synlig uden en lang kravspecifikation.

Samtidig var konsekvensen af en fejl begrænset. Oplevelsen behandler ikke persondata, flytter ikke penge og træffer ikke beslutninger på vegne af andre. En mislykket version kunne blot rettes eller rulles tilbage. Det gjorde det forsvarligt at eksperimentere.

Arbejdsdelingen var også klar:

Vi stod for	Coding-agenten blev brugt til
Idé, indhold, lyd og visuel retning	At omsætte beskrivelser til HTML, CSS og JavaScript
At afprøve oplevelsen og beskrive fejl	At finde relevante steder i koden og foreslå rettelser
At vælge, hvad der skulle ændres eller bevares	At gennemføre afgrænsede ændringer på tværs af filerne
At godkende resultatet	At køre tekniske kontroller og dokumentere ændringerne

Den opdeling er vigtig. Coding-agenten forkorter vejen fra idé til noget, man kan afprøve. Den afgør ikke, om oplevelsen er relevant, behagelig eller fagligt korrekt.

Vibe-coding er ikke det rigtige til alt

Metoden bliver mere krævende, når konsekvensen af fejl stiger. Et internt prototypeværktøj er noget andet end et system, der håndterer persondata, beregner løn eller ændrer kunders rettigheder. I de tilfælde er faglig udviklerkompetence, sikkerhedsarbejde, test og dokumentation ikke valgfrie.

Genereret kode kan også indeholde fejl, unødvendige gentagelser eller løsninger, der virker nu, men er svære at vedligeholde. Vores 3D-lokale krævede fx flere omgange alene for at få lyd til at fungere stabilt på tværs af den eksterne hosting og browseren. Et flot første resultat siger ikke noget sikkert om kvaliteten under overfladen.

En brugbar tommelfingerregel er derfor at begynde med en opgave, hvor:

• formålet kan forklares i få sætninger
• resultatet kan afprøves direkte
• fejl er nemme at opdage og billige at rette
• et menneske med den nødvendige faglighed kan godkende løsningen

Derfor ligger 3D-oplevelsen adskilt fra bloggen

Artiklen, du læser nu, er en almindelig del af Momentum AI’s website. Den kan findes af søgemaskiner, læses på mobil og forbinde oplevelsen med vores øvrige materiale. Selve 3D-rummet ligger fortsat som et lille selvstændigt projekt på GitHub Pages.

Når du åbner workshoppen, viser vi projektet i en fuldskærmsramme på den oprindelige adresse. Den opdeling har nogle praktiske fordele: 3D-koden indlæses kun for dem, der vælger oplevelsen, projektet kan opdateres uden at blande det sammen med hjemmesidens kode, og en fejl i eksperimentet påvirker ikke resten af sitet.

Det samme princip er ofte nyttigt i vibe-coding: Hold det første eksperiment afgrænset. Det gør det lettere at teste, lettere at kassere og lettere at forstå, hvem der har ansvar for det.

Fra vibe-coding til arbejdsgange med agenter

Den virtuelle workshop viser den mest synlige side af coding-agenter: Du beskriver en ændring og får noget nyt på skærmen. På arbejdspladsen er potentialet ofte mindre visuelt. En agent kan fx hjælpe med at samle information, klargøre et udkast eller gennemføre en række standardiserede trin, når den har fået de nødvendige værktøjer og regler.

Hvis I vil lære arbejdsformen omkring Claude og bygge et afgrænset eksempel sammen, tager vores Claude-workshop udgangspunkt i jeres egne idéer og opgaver. Hvis spørgsmålet i stedet er, hvilke arbejdsgange en agent bør have adgang til, og hvor meget autonomi der er forsvarligt, er det emnet for vores agent-workshop.

Det konkrete første skridt er lille: Vælg noget, der må være en prototype, og beskriv det med mål, kontekst og forventninger.

Mål: Byg én oplevelse eller funktion, som en kollega kan afprøve.
Kontekst: Forklar, hvem den er til, hvilke materialer der findes, og hvad den ikke må gøre.
Forventninger: Beskriv, hvordan I vil teste resultatet, og hvad der skal være opfyldt, før I går videre.

Så bliver vibe-coding ikke et løfte om, at AI kan bygge alt. Det bliver en konkret måde at undersøge, hvad I selv kan bygge og lære af.