Vibecoding för designers – snabbare koncept utan att tumma på kvaliteten

Det finns nu många AI-verktyg där ute som blivit en naturlig del av utvecklingsprocessen. Ett arbetssätt som växer fram är vibecoding, där man använder prompts för att snabbt generera visuella koncept och interaktiva gränssnitt. Det här kan användas redan i designfasen för att skapa bättre dialog med kunder och team.

Med hjälp av dessa AI-verktyg kan designern snabbt ta fram klickbara förslag direkt och därigenom kunna fånga känslan, testa olika förslag för att snabbt skapa ett klickbart underlag att diskutera ifrån. Samtidigt blir designerns roll ännu viktigare, både i förarbetet för att formulera kundens önskemål, varumärket och vision inför att skapa prototyper men även efteråt när idéerna ska omvandlas till faktisk produkt. AI kan ta fram ett gränssnitt men det behövs mänsklig input för att säkerställa att lösning är anpassad till målgrupp, löser rätt problem och att det finns en genomtänkt röd tråd.

I ett internt test använde vi samma prompt i tre vibecoding-verktyg: Lovable, Replit och Vercel. Prompten utgick från att ta fram ett koncept på en B2B-produktsida för en skruv med ett antal detaljer som behövde finnas på sidan. Målet är inte att få en färdig design, utan att snabbt skapa ett visuellt underlag att kunna använda i diskussion med kund och team.

Prompten som användes löd såhär i utgångsläget:

Create a product page for a b2b and where the product is a screw.
It must contain product info, product data, and the product can have instruction videos.
The product has between 2-14 documents.
There should be related products that are links to other product pages
There should be accessories that can be added to cart. Some of the accessories can be marked as recommended. There can be over 30 accessories.
The brand colors are #2C666E, #90DDF0 and #F0EDEE

Verktygen vi testade:

Lovable

Lätt att komma i gång med
Har ett designläge där designjusteringar för varje komponent kan göras i ett gränssnitt
Fungerar bra som ett första steg för att fånga känslan innan designen styrs upp i ett designsystem

Replit

Vid uppstart kan man välja att bygga designmockup som kostar färre credits
Snabbare generering tack vara designläget
Möjlighet att importera Figma-filer för att skapa applikationer

V0 by Vercel

Passar bra när vibecoding används nära ett verkligt utvecklingsflöde
Design från Figma kan importeras och användas som komponenter
Skapar snygg struktur i koden

Skärmdump av produktsida för en bult skapad med v0

Effektiv transport från tankar till designdiskussion

Redan på några vändor med verktyget så kunde vi få fram ett snyggt exempel på produktsida för att jämföra lösningar, identifiera UX-hinder och snabbare komma fram till vad som skulle behöva mer djupgående arbete. Samtidigt blev det tydligt att verktygen inte ersätter designerns kompetens - särskilt inte när det gäller tillgänglighet, informationshierarki, interaktionsmönster och hur lösningen passar in i ett befintligt designsystem och varumärke. Designers roll i framtagandet av idéer och analys blir än mer viktig för att göra det som AI genererat användbart och anpassat till syftet.

Använt rätt blir vibecoding ett sätt att komma snabbare från idé till diskussion och skapa bättre samsyn mellan kund, design och utveckling. Det handlar inte om att hoppa över designprocessen, utan om att tekniken kan bidra med en snabbare och mer visuell start. Det är fortfarande designerns analys, förståelse för målgruppen och strategiska tänkande som avgör kvaliteten i slutresultatet.