High-Fidelity prototyping med A.I.

This post is also available in an English translation

Inspireret af sommerferielæsning i 2024, “How to Create Tech Products Customers Love” af Marty Cagan, blev jeg bekræftet i min egen erfaring med at bruge prototypeer til at udvikle, vise og bevise en idé. Marty Cagan bruger konceptet en High-Fidelity prototype om en prototype, der i høj grad føles som det endelige produkt og kan være med til at skabe funding og tilslutning til et produkt, inden det bliver udviklet.

Anvendelse af High-Fidelity prototyper til produktudvikling forudsætter, at udviklingsteamet opbygger kompetencer og værktøjer til at lave dem relativt hurtigt – gerne på under en 1/10 af tiden, det vil kræve at lave en tilsvarende MVP af et produkt. Jo hurtigere en High-Fidelity prototype kan testes af potentielle brugere, jo flere ideer kan afprøves på samme tid, som det ville kræve at lave en MVP. Jo mere realistysk en prototype man er i stand til at bygge jo bedre kan arbejdet med at lave den til en applikation estimeres og laves rigtigt første gang.

I denne artikel beskriver jeg nogle af mine erfaringer og metoder, som andre måske kan bruge. Bemærk, at jeg ikke er softwareudvikler. Jeg er produktudvikler og hobby-koder. Målgruppen for artiklen er derfor også kreative og lidt tekniske typer, der kunne have behov for at lave en hurtig simpel app eller en prototype.

Et godt udgangspunkt for at lave en prototype realistisk er at bruge nogle af de samme værktøjer som vil blive brugt i produktet.

I mit nuværende produktteam udvikler vi webapplikationer med front-end i Next.js og Shadcn/UI. Jeg har en del erfaring med både back-end kode og front-end, men ingen af disse. Mine evner til at lave en prototype, der mindede om vores endelige produkt, var derfor begrænsede.

I frustrationen over min manglende mulighed for at anskueliggøre mine ideer og mangel på tid, kastede jeg mig derfor over at få hjælp fra AI.

How can I help you today?

Jeg er helt blank omkring next.js front-end udvikling og afviking af node.js.

Jeg har en ny installeret Linux server jeg vil bruge til at udvikle en applikation.

Forklar mig helt fra bunden, hvordan jeg kommer igang.

Og så var jeg i gang. Efter en dag med trial og error og en passende mængde copy-paste af kode, som jeg godt kunne genkende som JavaScript og CSS, havde jeg min første app i luften. Det har siden udviklet sig til en værktøjskasse, samtidig med at jeg har fået lært en masse om Node.js, React, conditional rendering, routes og Shadcn/UI styles og komponenter.

Din nye AI-kodeassistent

De tilgængelige AI-assistenter er ganske fortræffelige til at lave kode. Især next.js da træningsmaterialet tilgængeligt på internettet er massivt. Jeg har prøvet flere, og de fleste laver udmærket kode. De har dog alle lidt pros og cons.

Generelt gælder det for alle serverbaserede AI-assistenter, at man skal prompte med forsigtighed. Man har ingen sikkerhed for, hvor data havner, eller om der bliver trænet på data. For prompt der indeholder fortrolig data eller kode må man holde sig til assistenter der er passende godkendt til formålet. For prototyper og små applikationer, der ikke indeholder fortrolig data eller egentlig intellectual property, kan man med fordel holde navngivning lidt anonym bare for en sikkerheds skyld. For fortrolig data er det også muligt at bruge lokale LLM modeller. Min erfaring er at de virker bedst med afgrænsede opgaver.

Copilot

Microsoft Copilot er god til at skrive kode og komme med forslag til at løse opgaver. Min arbejdsgang, da jeg til dels arbejder med kode, som jeg ikke forstår den fulde sammenhæng af, giver dog Copilot udfordringer. Den kan ikke arbejde med så lange prompts. Jeg paster typisk mange hundrede linjer og beder AI om at lave nogle ændringer og give mig en komplet opdateret applikation. Ikke bare beskrive hvad jeg skal lave om. Der kommer Copilot til kort.

Mistral

Franske Mistral har i en periode været min faste “kollega”. Jeg kan godt lide deres produkt, deres etik, og jeg vil gerne støtte op om europæisk teknologi. Den har fungeret ganske fint og lavet masser af god kode for mig. Den har til tider haft svingende svartid, og der kan også være prompts, der timer ud. Den er måske heller ikke helt lige så skarp som f.eks. Claude til at ramme plet med løsningerne og lave gode antagelser til punkter, jeg ikke har beskrevet så tydeligt.

Claude

Claude er i øjeblikket min foretrukne AI-assistent. Den forstår i de fleste tilfælde, hvad jeg beder om, og laver løsninger der virker. Som en ekstra bonus har Claude et online kodeafviklingsmodul, så den kode den laver, kan testes i browseren. Det er super praktisk. Jeg har brugt den gratis udgave i en periode, hvor jeg ikke har haft så meget brug for den. Det fungerer til husbehov. Man har ikke så mange prompts om dagen, og man kan ikke i den samme prompt arbejde videre med koden. Det vil sige, at man må starte en ny prompt og formulere hele opgaven igen. Hvis du for alvor skal få noget ud af Claude, vil jeg anbefale at finde kreditkortet frem. Det gør jeg, når jeg har aktive projekter.

OpenAI

Jeg startede processen med OpenAI, først gratis og siden mod betaling. Jeg er dog gladere for Claude og i øvrigt også tilfreds med at støtte noget andet end den åbenlyse mastodont!

Deepseek

Jeg har før Deepseek blev talk of town også brugt den ret intensivt i en uges tid. Den laver ganske fortræffelig kode. Man bør selvfølgelig være (ekstra) påpasselig med, hvad man deler på en kinesisk applikation. Det meste af, hvad jeg laver, er dog ganske primitivt og indeholder ingen fortroligheder. Efter at Deepseek har fået stor opmærksomhed, er performance faldet betydeligt. Det er, som om den første prompt bliver behandlet hurtigt, og så går svartiden langsomt ned.

LM Studio

Jeg har også været rundt om diverse sprogmodeller, man kan downloade og køre på sin egen maskine. Jeg bruger programmet LM Studio til at arbejde i. Det kan varmt anbefales. Det er ganske imponerende, hvad man kan lokalt, men jeg er endnu ikke lykkedes med at køre mit lidt intensive prompt-koncept lokalt med succes.

Teknisk setup

For at komme i gang med next.js prototyping skal du have et grundlæggende teknisk setup på plads. Bare rolig – det er nemmere end man skulle tro, selv for en hobby-koder eller product owner uden dybdegående udviklingserfaring.

Node.js – Fundamentet

Node.js er det grundlæggende runtime-miljø, som resten af vores setup bygger på. Det er basalt set et program, der lader dig køre JavaScript på din server eller computer – ikke bare i en browser.

For at komme i gang skal du installere Node.js på din maskine eller server. Der er masser af guides på nettet, og det er så simpelt som at downloade et installationsprogram fra deres website og følge anvisningerne.

Jeg var selv lidt forvirret i starten omkring, hvor ting blev installeret. Selve Node.js bliver installeret globalt på din maskine. Når du starter et projekt, bliver der oprettet en grundkonfiguration i den mappe, hvor du står. Efterfølgende moduler og pakker, du installerer, bliver en del af det specifikke projekt. Det betyder, at du kan have forskellige projekter med forskellige versioner af de samme pakker.

Node kan køres både på din egen computer eller på en server. Hvis du vil vise prototypen til andre, er en lille Linux-server med offentlig adgang en perfekt løsning.

Next.js – React-frameworket der gør livet lettere

Next.js er et framework bygget ovenpå React, der håndterer mange komplekse aspekter af moderne webapplikationer. For os er det den perfekte platform til hurtig prototyping, da det kommer med:

• En færdig projektstruktur
• Automatisk routing baseret på mappestruktur
• Enkel opdeling mellem klientside- og serverside-kode

For at starte et Next.js-projekt, kører du blot:

npx create-next-app@latest min-prototype
cd min-prototype

Følg installationsguiden og vælg de default-indstillinger, der foreslås. Når installationen er færdig, har du et funktionelt website med hot-reloading (automatisk opdatering når du ændrer koden).

React – Byggestenene

React er biblioteket, der gør det muligt at bygge brugergrænseflader med komponenter – genbrugelige byggeklodser til dit UI.

Som begynder behøver du ikke forstå alle React-koncepter på forhånd. Du kan starte med at kopiere og tilpasse koden, som AI’en genererer, og gradvist lære koncepterne undervejs.

Shadcn/UI – Det smukke lag

Shadcn/UI er ikke et traditionelt komponentbibliotek, men snarere en samling af genbrugbare komponenter bygget med Radix UI og stylet med Tailwind CSS. Det giver:

• Professionelt udseende komponenter som knapper, dialoger, formularer
• Tilgængelighed og brugervenlighed ud af boksen
• Nem tilpasning gennem Tailwind CSS-klasser

For at installere Shadcn/UI i dit Next.js-projekt:

npx shadcn@latest init

Herefter kan du installere specifikke komponenter efter behov:

npx shadcn@latest add button
npx shadcn@latest add dialog
npx shadcn@latest add dropdown-menu

Dette er en af de store fordele ved Shadcn/UI – du installerer kun de komponenter, du faktisk bruger.

npm run dev – Din nye bedste ven

Når du har dit projekt sat op, starter du udviklingsserveren med:

npm run dev

Dette starter din app i udviklingstilstand på http://localhost:3000 (eller en anden port hvis 3000 er optaget). Det magiske ved denne kommando er, at den aktiverer “hot reloading” – din app opdateres automatisk, hver gang du ændrer en fil, uden at du behøver at genindlæse browseren.

Denne næsten øjeblikkelige feedback-loop er afgørende for hurtig prototyping. Du kan ændre noget, se resultatet med det samme, og hurtigt iterere. Hvis der opstår en fejl, får du den med det samme – fail fast! Det har gjort det muligt for mig at lære meget hurtigere, end hvis jeg skulle gennemgå en langsom build-proces hver gang.

“use client” – Det lille direktiv med stor betydning

Hvis du kopierer kode fra AI’en og oplever fejl som “You’re importing a component that needs useState”, skal du tilføje "use client"; øverst i din fil.

Dette direktiv er specifikt for Next.js 13+ og fortæller systemet, at din komponent skal køre på klientsiden (i browseren), hvor hooks som useState fungerer. Det er nødvendigt, fordi Next.js som standard kører komponenter på serveren, hvor disse hooks ikke er tilgængelige.

Dette tekniske setup giver dig et robust fundament til at omsætte AI-genereret kode til funktionelle prototyper. Selvom det kan virke overvældende i starten, vil du hurtigt opdage, at det meste af kompleksiteten er skjult for dig, og at du kan fokusere på det, der betyder noget: at visualisere og teste dine ideer gennem prototyper.

Kunsten at prompte din AI-assistent

AI-assistenter som Claude er exceptionelt gode til at bygge front-end kode. Men at få præcis det, du ønsker, afhænger af din evne til at kommunikere effektivt med dem. Lad os dykke ned i, hvordan du kan skabe et produktivt samarbejde med din digitale udvikler.

Etablér et fælles sprog

Nøglen til succesfuld AI-assisteret udvikling ligger i at etablere et fælles sprog med din assistent. Du behøver ikke være ekspert i tekniske termer, men en grundlæggende forståelse af de komponenter og koncepter, du ønsker at implementere, er uvurderlig.

For eksempel:
– Forstå forskellen på en “modal”, en “dialog” og en “popover”
– Kend de grundlæggende layoutstrukturer som “card”, “container” og “grid”
– Lær at referere til interaktionsmønstre som “drag-and-drop” eller “infinite scroll”

Introducer dine egne termer for specifikke elementer i din applikation. Som jeg demonstrerede i eksemplerne, definerede jeg “… menuen” som et koncept, og Claude forstod og anvendte det konsekvent derefter.

Skriv på dit modersmål

En fordel, der ofte overses, er, at moderne AI-assistenter forstår de fleste sprog fremragende. Jeg foretrækker at skrive mine prompts på dansk, da det giver mig mulighed for at udtrykke mine tanker mere præcist og nuanceret. Dette reducerer misforståelser og giver bedre resultater.

Tænk på AI som en junior udvikler med encyklopædisk viden

Efter måneders tæt samarbejde med Claude og Mistral’s LeChat har jeg udviklet en mental model, der hjælper mig: Tænk på AI-assistenten som en superdygtig, nyuddannet softwareudvikler. Den har:

• Omfattende teoretisk viden om næsten alle programmeringssprog og frameworks
• Evnen til at implementere komplekse designs hurtigt
• Manglende kontekstforståelse for din specifikke virksomhed eller domæne
• Tendens til at antage, hvad du ønsker, uden altid at spørge om præciseringer

Ligesom med en menneskelig kollega forbedres kommunikationen over tid, efterhånden som I opbygger en fælles forståelse.

Praktiske tips til effektive prompts

1. Vær specifik, men ikke overspecifik
   Beskriv, hvad du ønsker at opnå, frem for præcist hvordan det skal implementeres. Giv AI rum til at anvende best practices.

2. Iterér gradvist
   Start med en grundlæggende version og byg ovenpå. Det er lettere at justere og forfine end at skabe den perfekte løsning i første forsøg.

3. Tilbyd eksempler
   Hvis du har referencer eller eksisterende kode, del dem for at give AI en klar idé om, hvad du forventer.

4. Bed om alternativer
   Hvis du er usikker, bed om 2-3 forskellige måder at løse et problem på. Dette udvider din forståelse og giver dig valgmuligheder.

5. Omdirigér, når det er nødvendigt
   Hvis AI bevæger sig for langt ud ad en tangent eller overkomplicerer tingene, tøv ikke med at bede om en simplere tilgang eller redirect fokus.

6. Fejlhåndtering som læringsproces
   Når du støder på fejl, del dem med AI’en og bed om en forklaring. Dette hjælper dig med at opbygge en dybere forståelse af teknologien og forbedrer dine fremtidige prompts.

7. Byg videre på tidligere succesfuld kode
   Bed AI’en om at tilpasse eller udvide kode, der allerede virker, i stedet for at starte forfra med hver iteration.

8. Lær undervejs
   Du kommer ikke hele vejen til en større High-Fidelity protorype uden selv at kunne rette lidt til og bede om meget konkrete ændringer og metode valg fra AI. Benyt chanchen til at lære lidt javascript, next.js, chadcn/ui og front-end termonologi undervejs.

   
   

Det smukke ved at arbejde med AI er, at du kan stille spørgsmål, bede om ændringer, og skifte retning uden menneskelige frustrationer. Udnyt denne frihed til at eksperimentere og udvikle både din applikation og dine prompt-færdigheder samtidig.

Fra teori til praksis: Praktiske eksempler

Nu hvor vi har dækket det teoretiske grundlag, er det tid til at se, hvordan det fungerer i praksis. I de følgende eksempler vil jeg vise, hvordan du kan bygge progressivt mere avancerede applikationer ved hjælp af AI-assisteret udvikling. Hvert eksempel bygger oven på det forrige og demonstrerer, hvordan du kan kommunikere effektivt med din AI-assistent for at opnå de ønskede resultater.

Disse eksempler er designet til at være enkle nok til at forstå, men samtidig vise vigtige principper i moderne webapplikationsudvikling. Du vil se, hvordan jeg formulerer mine prompts, hvordan jeg håndterer fejl og iterationer, og hvordan jeg gradvist opbygger mere kompleksitet.

Eksempel 1: Adresseliste

Lad os starte med at lave en ganske simpel adresseliste-applikation.

How can I help you today?

Lav en side i React og brug komponenter fra Shadcn/UI.
Den skal hedde Adresseliste.
Den skal vise en adresseliste med disse kolonner:
Navn, e-mail og telefonnummer.
I øverste venstre hjørne skal der være en knap, der hedder Tilføj.
For hver linje i adressebogen skal der være et … ikon, hvor der er en lille menu. Den kalder jeg … menuen.
Når man trykker på Tilføj eller i … menuen trykker Edit, skal der komme en add/edit modal op, hvor man kan skrive navn, e-mail og telefonnummer.
I … menuen skal der også være en Slet funktion.

Resultatet bliver denne app – uden nogen yderligere tilretning. Passende ikoner og eksempeldata har Claude selv fundet på.

powered by Advanced iFrame

Kildekoden

Bemærk at der er nogle begreber i spil. En liste og linjer i en liste, det forstår AI uden videre. Jeg kan også uden videre omtale en add/edit modal og så fikser Claude det uden problemer.
“… menuen” er mit eget navn for den menu, der kommer i hver linje. Den starter jeg derfor med at definere, inden jeg skriver, hvad der skal være i den.

For at køre den fra den helt standard next install, opret en mappe i app-mappen der hedder example1 og læg filen ind som page.tsx.

Åbn din browser til http://ip:3000/example1

Du vil højest sandsynligt se en eller flere fejl i browseren. Kopier dem og spørg AI, hvad det mon er. I første omgang er der formentligt brug for at tilføje

"use client";

Dernæst har AI sikkert brugt nogle moduler, der ikke er installeret i dit next project. Se bare på fejlmeddelelsen i browseren, hvad der mangler, og gå så til serveren og installér dem.

som den øverste linje i koden

Den version Claude lavede til mig krævede disse install-linjer på min server:

npx shadcn@latest add dropdown-menu
npx shadcn@latest add label
npx shadcn@latest add dialog
npx shadcn@latest add alert-dialog

Bare kopier fejlmeddelelsen og spørg:
“Forklar mig hvad jeg skal skrive for at installere det der mangler” og paste din fejl…

Eksempel 2: Persistent data

I eksempel 1 kan man slette og oprette adresser, men så snart man reloader siden, er man tilbage til Anders, Bente og Carsten. For at få oplevelsen af at det er gemt i applikationen, kan man bruge en funktion, der er bredt understøttet i de fleste browsere: localStorage. Tænk på det som en lille key/value database i din browser. Det vil opleves som om du gemmer på en server, men det er i virkeligheden kun i din egen browser.

Opfølgende prompt til eksempel 1:

How can I help you today?

“Tilret min app så den gemmer adresserne i localStorage med key navn der hedder myAppAddresser.
Giv mig en komplet opdateret app.”

Kopier den nye kode AI har lavet og overskriv den gamle.

Igen kommer der en lille fejl – Claude har ikke ramt den helt spot on med localStorage – det er vist noget med rettigheder. Jeg kopierer fejlen og skriver til Claude “Jeg fik denne fejl …”

powered by Advanced iFrame

Kildekoden

Eksempel 3: Event tilmelding – Persistent data på tværs af applikationer

Lad os sige, at vi gerne vil lave en ny applikation, hvor man kan notere, hvem der har meldt til og fra til et event. Ud fra personer i adresselisten.

Hvis man fortsætter i samme tråd, kan man lave en ny side og bruge data fra adresselisten uden videre. AI kender jo selv lige datastrukturen, da den selv har lavet den. På et tidspunkt er tråden måske løbet fuld, eller man skal arbejde videre med en anden AI-assistent. Så skal man lige have styr på begreberne. Vi starter derfor lidt fra begyndelsen i dette eksempel. På samme måde som eksempel 1.

How can I help you today?

“Lav en side i React og brug komponenter fra Shadcn/UI.
Brug skelettet fra denne app (paste example2)

Den skal hedde R.S.V.P.
Den skal vise en liste over til- og frameldinger til et event med disse kolonner:
Navn og svar.
I øverste venstre hjørne skal der være en knap, der hedder “Tilføj svar”.
For hver linje i listen skal der være et … ikon, hvor der er en lille menu. Den kalder jeg … menuen.
Når man trykker på “Tilføj svar” eller i … menuen trykker Edit, skal der komme en add/edit modal op, hvor man kan vælge navn i en søgbar dropdown og en radiobutton med Ja eller Nej.
I … menuen skal der også være en Slet funktion.

Indholdet i Navn drop-down i add/edit modalen skal hentes fra localStorage key myAppAddresser.

Her er et eksempel på formatet:
[{“id”:1,”navn”:”Anders Andersen”,”email”:”anders@example.com”,”telefon”:”+45 12 34 56 78″},{“id”:2,”navn”:”Birgitte Bertelsen”,”email”:”birgitte@example.com”,”telefon”:”+45 23 45 67 89″}]
gem listen i localStorage key myAppRSVP”

Her rendte Claude og jeg ind i noget det sker af og til. Claude var ekstra ambittiøs og tog et nyt komplekst modul i brug. Og efter flere forsøge med “Det virker ikke jeg får denne fejl…” kom jeg ikke videre. I stedet valgte jeg tilgangen “kan du finde på en simplere app løsning der arbejder rundt om problemet?”. Det kunne Claude godt. Nu fungerer eksempel 3. Med data hentet fra eksempel 2.
Eksempel 3 på min sandbox
Kildekoden

powered by Advanced iFrame

localStorage Browser

Når man kommer videre ind i at bruge localStorage på tværs af sider, kan det være en hjælp at kunne se og manipulere med data. Dels når man skal “vise” noget data til AI, som den skal bruge som udgangspunkt, men også for at kunne arbejde og dele mock-up data. Til det har jeg (altså jeg og Claude) lavet en simpel localStorage Browser.

powered by Advanced iFrame

Kildekoden

High-Fidelity prototyping i praksis

De grundlæggende principper beskrevet ovenfor danner fundamentet for mit prototyping-workflow. I min erfaring udvikler processen sig organisk, efterhånden som man opdager nye designmønstre og komponenter.

Når jeg udforsker nye løsningsmuligheder, indsamler jeg inspiration fra eksisterende applikationer og identificerer, hvad disse designmønstre formelt kaldes – ofte gennem dialog med AI. Eksempelvis vidste jeg ikke, at en komponent med to lister, hvor elementer kan flyttes fra den ene til den anden, kaldes en “dual-list”. Efter at have etableret terminologien, kunne jeg nemt få genereret sådan en komponent.

For at skabe effektive prototyper har jeg gradvist opbygget et komponentbibliotek, der afspejler vores produktionssystem:

• En sidebar-menu med samme ikonbibliotek som vores rigtige applikation
• En mockup-brugerdatabase til at simulere rolletildeling
• Genbrugelige datastrukturer og interaktionsmønstre

Dette bibliotek giver os mulighed for hurtigt at skabe prototyper, der føles som det færdige produkt – præcis hvad Marty Cagan beskriver som High-Fidelity prototyper.

Efterhånden som du udvikler prototyper, opbygger du både teknisk forståelse og et bibliotek af komponenter til fremtidige projekter. Selv uden dybdegående kendskab til React eller Node.js, lærer du gradvist at modificere elementer, hvilket accelererer udviklingsprocessen.

Er du blevet inspireret af konceptet med AI-assisteret prototyping, er du velkommen til at række ud med spørgsmål eller for at dele erfaringer.

Konklusion

Kombinationen af Node.js, Next.js, Shadcn/UI og AI-assistenter som Claude giver en effektiv metode til at skabe High-Fidelity prototyper med et moderne look på kort tid. Dette setup er særligt værdifuldt for product owners og hobby-kodere, der vil omsætte ideer til testbare produkter uden at være front-end eksperter.

At etablere et “fælles sprog” med AI’en er nøglen til succesfulde resultater. Ved at være tydelig omkring koncepter og datastrukturer i dine prompts, kan du bygge komplekse funktionaliteter gradvist og med stadig større præcision.

Processen kræver en portion gå-på-mod og accept af trial-and-error tilgangen. Fejlmeddelelser bliver faktisk en værdifuld hjælp i denne proces, og det dynamiske udviklingsmiljø i Next.js accelererer læringskurven betydeligt.

For product owners giver dette værktøj mulighed for at udtrykke præcist hvad du ønsker og eksperimentere med forskellige tilgange uden at belaste udviklingsressourcer. Den væsentlige reduktion i tiden fra idé til test giver hurtigere feedback-loops med potentielle brugere.

Selvom løsningerne måske ikke altid er produktionsklare, tjener de perfekt som prototyper der kan demonstrere ideer, indsamle feedback og validere koncepter før større investeringer. Dette er kernen i Marty Cagans tilgang – at skabe produkter kunderne elsker begynder med prototyper, der kan testes og forfines tidligt i processen.

Har du gjort erfaringer inden for området, er blevet nysgerrig eller har spørgsmål så kommenter gerne på artiklen.