En gemensam bild
Alla klickar i samma prototyp – och den kan uppdateras i realtid, nästan medan ni pratar.
AI och vibe coding i produktutveckling
Med AI arbetar hela teamet runt en gemensam bild
AI och vibe coding förändrar själva förutsättningarna för produkt- och affärsutveckling. När idéer blir körbara prototyper på timmar kan verksamhet, UX och utveckling samlas kring samma bild – med snabba feedbackcykler och i flow.
Nya förutsättningar
Slut på överlämningar
Även en iterativ process blir en vattenfallsprocess om delarna tar för lång tid.
UX måste upplevas. User stories och skisser beskriver en upplevelse – men den behöver kännas. När prototypen är körbar kod kortas feedbackcyklerna från veckor till dagar.
Det ni vinner
Det här förändras
Kunskapen kommer fram
En körbar prototyp drar ut krav, affärsregler och idéer som finns i organisationen och i kollegors huvuden.
Ett pågående samtal
I stället för långa specifikationer får ni ett levande samtal kring konkreta målbilder.
Utforskandet blir billigt
Ansträngningen för att testa en idé minskar dramatiskt. Fler alternativ hinner prövas innan något byggs på riktigt.
Tillgänglighet från början
WCAG-krav som är omöjliga att hantera i Figma – fokus, semantik, skärmläsare – går att bygga in och granska direkt i koden.
Fallstudie · januari–september 2026
Ny webbfrontend för ett stort B2B-bolag
~50 personerdirekt involverade – UX, produktledning, utvecklingsteam, pilotkunder och referensgrupper
Varannan veckademo för hela organisationen
Ett stort B2B-bolag på en komplex marknad i Skandinavien skulle ersätta en Windows-applikation med en ny webbfrontend: modernare gränssnitt, enklare för användaren och tillgänglig enligt WCAG.
Storleken och komplexiteten var större än våra befintliga verktyg klarade, och feedbackcyklerna i Figma tog för lång tid. Vi gick därför stegvis från Figma, via promptning, till instruktioner och AI-agenter – och byggde prototypen i samma stack som appen: Angular, Angular Material och Material Design 3 med design tokens, i ett gemensamt repo med ett delat komponentbibliotek.
Tre agenter bär en stor del av arbetet:
- prototype-coder – bygger vyer och flöden enligt projektets komponenter och regler
- semantics-auditor – granskar semantik och tillgänglighet i koden
- req-drafter – tar fram kravunderlag med Given/When/Then direkt ur prototypen
”Arbetssättet drar ut kraven från stakeholders.”
”Ett strålande exempel på hur vi kortat från tanken till handling.”
”Vi skulle aldrig kommit så här långt.”
Röster från projektet
Arbetssätt
Så går det till
-
Miljö och uppsättning
Prototypen byggs i er teknikstack, med ert komponentbibliotek och designsystem – så lik produktionsmiljön som möjligt, med verklighetsnära mockdata.
-
Agenter och instruktioner
Jag sätter upp AI-agenter, instruktioner och kommandon anpassade efter er arkitektur, så att prototypen följer era regler och komponenter.
-
Prototypa i flow
En fast veckorytm med produktledning, utvecklare och referensgrupper. Prototypen publiceras löpande så att alla kan prova och tycka till.
-
Från prototyp till krav
Ur den färdiga prototypen tas strukturerade krav fram – user stories, affärsregler och acceptanskriterier – som utvecklingsteamen kan arbeta direkt från.
Lärdomar
Sex byggstenar för UX med AI
- Lik produktionsmiljönUtvecklingsmiljön för prototypen ska vara så lik produktionen som möjligt.
- Git för allaGrundläggande förståelse för versionshantering skapar en trygg miljö där inget går förlorat – själva arbetet kan AI utföra.
- Styra agenterInstruktioner, skills och kommandon. Området rör sig snabbt, så det kräver kontinuerligt lärande.
- Kunna sina verktygVerktygen ska ligga väl i handen. Det lönar sig att lära sig dem på djupet.
- Tillgång till dataVerklighetsnära data ger bättre prototyper och en djupare förståelse av affärsreglerna.
- Enkelt att publiceraAndra måste kunna öppna prototypen – annars dör samtalet.
Tjänster
Så kan jag hjälpa dig
Prototyputveckling med AI
Jag arbetar i ert team och driver prototyparbetet i kod – från första målbild till underlag för utveckling.
Uppsättning och coachning
Jag hjälper ert UX-team att komma igång: miljö, repo, agenter, Git och arbetssätt, så att ni kan fortsätta själva.
Föredrag och workshop
Ett föredrag eller en workshop för ledning och team om hur vibe coding förändrar samarbetet mellan UX, utveckling och verksamhet.
Vanliga frågor
Frågor om AI, vibe coding och flow
Vad är vibe coding?
Vibe coding betyder att man bygger mjukvara genom att beskriva vad man vill ha för en AI, som skriver koden. För UX innebär det att idéer kan bli körbara prototyper på timmar i stället för veckor – utan att designern behöver vara utvecklare.
Vad betyder flow i produktutveckling?
Flow är tillståndet där utmaningen är stor men hanterbar: "det här är svårt, men jag kan hantera det". För ett team betyder det att feedbackcyklerna är så korta att man håller farten – utan att tappa styrfarten eller bli fartblind.
Ersätter det Figma?
Inte helt. Figma fungerar bra för tidiga skisser och visuell utforskning. Men i stora och komplexa projekt räcker inte klickbara skisser: data, logik, tillstånd och tillgänglighet behöver upplevas i riktig kod för att bli rätt.
Blir prototypen produktionskod?
Prototypen är inte produkten, men den kan bo i samma repo och använda samma komponentbibliotek. Då blir glappet mellan prototyp och app litet, och utvecklarna får både ett körbart exempel och ett kravunderlag att bygga från.
Behöver UX-designers kunna programmera?
Nej, men några saker behövs: en grundläggande förståelse för Git, för begrepp som routes och mockdata, och för hur man styr AI-agenter. Det är just det jag hjälper team att komma igång med.
Fungerar det i stora organisationer?
Ja – det är där det gör störst skillnad. De flesta guider handlar om en person som bygger en egen app. Fallstudien ovan handlar om många team, många system och en marknad med flera parter.
Samtal framför specifikationer.
Teknik är fantastiskt – men affärer görs mellan människor. Hör av dig så pratar vi om hur ert team kan arbeta i flow.