Farvel Copy-Pasta : Velkommen Vibe Coding - Min Erfaring med AI-drevet Webudvikling
Jeg har netop opdateret min hjemmeside ved brug af AI (se resultatet på kilbergmedia.com). Det var ikke helt så plug and play, som man kunne håbe eller drømme om. Det blev i stedet et iterativt arbejde, der gav mig nogle indsigter i, hvordan man kan arbejde med AI, og hvad der er godt at være opmærksom på.
🧭 Fra Brainstorm til Kodning
De sidste par dage har stået i 'Vibe Coding'-ens tegn, og jeg har arbejdet med generativ AI for at give min hjemmeside et tiltrængt løft. Vibe Coding er, helt kort, et relativt nyt begreb, der beskriver et workflow, hvor brugeren/udvikleren beskriver et ønsket design og følelse ("viben"), og AI'en derefter producerer kode hertil. Metoden kan bruges af såvel erfarne som let erfarne udviklere. Og, det er så den tilgang, som jeg benyttede til mit praksis-baserede projekt her.
At undersøge hvorden det er muligt, at benytte AI-teknologi til at arbejde med og udvikle indhold og design af min hjemmeside - og samtidig afdække hvilke OBS! punkter der opstår, ved at lade GenAI være en del af denne proces.
Det startede startede med ChatGPT, som var god til den indledende fase – jeg brugte den til at brainstorme indhold og til at skærpe min profil udefra min målsætning. Specielt til at få en tydeligere profil til at stå frem, viste det sig at være en god beslutning. Men da koden skulle opdateres og have ny funktionalitet med opdatering af HTML, JS og CSS, introducerede ChatGPT desværre konstant nye fejl, der i praksis gjorde arbejdet med den nært umulig at arbejde med. Et skridt frem – 2 tilbage!
Vendepunktet kom, da jeg skiftede til Gemini (pro). Den hurtigt kunne skabe overblik over koden, strukturere og give mig overblik, rette fejl og tilføje nye features, uden at noget andet gik i stykker -umiddelbart...
🛠️ De Største Knaster: Hallucinationer og Konflikter
Det betød nemlig ikke, at jeg blot kunne læne mig tilbage og lade Gemini om resten. Jeg rendte ind i to kritiske udfordringer, som understregede vigtigheden af menneskelig intervention og retning.
1. Kampen mod topbaren: En af de største knaster var at få topbaren på plads. Jeg byggede nemlig videre på en 1-page template, som jeg i udgangspunktet var glad for. Layoutet røg dog fløjten, og jeg måtte med vedholdenhed lede Gemini på rette vej – bl.a. ved at foreslå, om problemet mon lå i CSS'en eller om der var konflikter i stylesheetet, eller andet. Det tog længere tid end først håbet, og med en anden skabelon til at starte med havde udfordringen måske været undgået (men nok udløst andre).
2. Hallunicationer i Stylesheetet: En anden frustration var samtidig de tilbagevendende hallucinationer Gemini havde. Der blev sent i processen pludseligt placeret arbitrære bogstaver (W, C, G, D, S) i mit stylesheet, som fik koden til at fejle. Når jeg bad AI'en om at fjerne disse fejlagtige elementer, bekræftede den, at det var gjort – og den præsenterede nu en "fejlfri kode", hvor der så var placeret nye artefakter! Heldigvis kunne jeg se og rette fejlene manuelt selv. Uden nærmere kendskab til koden, kunne man alternativt have bedt AIén om at udpege fejlene den selv havde lavet, for derefter at rette dem manuelt. For en almen bruger er det lidt et paradoks, at AI'en på den ene side leverer ”fejlfri kode” og på den anden side godt kan finde fejl heri bagefter, når man beder den om det.
🎯 Succes gennem Iteration og Interaktive Knapper
Min strategi for at håndtere disse udfordringer var at tilpasse elementerne på siden skridt for skridt. Denne iterative tilgang viste sig at være god, fordi den:
- hjalp mig med at beholde overblikket over koden.
- sikrede, at jeg forstod ændringerne foretaget af AI'en, og kunne bede den om at lave det om, hvis det ikke matchede mit behov.
- gjorde det muligt at tilpasse linjer manuelt undervejs.
Et af de elementer, jeg er blevet mest glad for, er de interaktive knapper, der animerer. Det var en simpel 'knap-klasse', men som en person der ikke selv kodet en hjemmeside fra bunden før, var det et super tilfredsstillende resultat at få hurtigt klappet sammen. (Hvad skal jeg sige - jeg er bare fascineret af små knapper der animerer...).
🧠 Den Vigtigste Læring: Du er Piloten!
Hvad er så mit takeaway fra 'Vibe Coding' med AI?
Det var en kæmpe hjælp, som gav mig mulighed for at producere et resultat, jeg er glad for. Uden dette havde jeg nok ikke fået opdateret min hjemmeside lige nu. Men den ærlige sandhed er: Uden indsigt i HTML, JavaScript og CSS havde jeg ikke kunnet guide AI’en på vej.
AI er en fremragende co-pilot, men du er stadig piloten. Jeg kunne kun guide og korrigere AI’en, fordi jeg forstod hvad jeg ville have, og hvad den skulle kigge efter.
Min erfaring bekræfter, at den menneskelige forståelse af teknologien er vigtigere end nogensinde – vi skal lære at kommunikere med nye værktøjer, vi skal vide, hvor vores egne styrker og svagheder ligger, så vi kan forholde os kritisk til de ting vi bliver tilbudt!
Jeg håber, I værdsætter, at jeg deler processen - selvom I måske finder en ting eller ro, der fortsat kan optimeres her på siden 😉
Hvad tænker du om fremtidens udviklingsproces? Har du også forsøgt dig med et "Vibe Coding"-projekt, eller har tænker du at kaste dig ud i det?
(Tools benyttet: ChatGPT, Gemini, Notepad++, Filezilla)
Hvis du selv vil igang med Vibe Coding:
- Introduktion til Vibe Coding - Microsoft, dansk.
- - Vibe Coding for Non-Engineers: How to Get Started Joe Shamon @ LinkedIn.