Blogg / Design

Vibe Coding för designers: Varför dina designkunskaper är den riktiga superkraften

Varför designers har en orättvis fördel med vibe coding, och hur att formulera designbeslut precist är den riktiga superkraften.

4 min läsningDesignIn English

Varför designers har en orättvis fördel med vibe coding, och hur att formulera designbeslut precist är den riktiga superkraften.

Det händer något intressant i vår bransch just nu. Vibe coding för designers har blivit en riktig konversation, och som någon som har tillbringat år på båda sidor av design och utveckling har jag tankar om det. Gränsen mellan att designa något och att bygga något blir tunnare för varje månad. Och som någon som har spenderat år på båda sidor av den linjen, som designer och frontendutvecklare, har jag tankar.

Jag är inte här för att säga att designers måste lära sig koda. Den debatten är uttröttad. Det jag vill prata om är något mer intressant: vad som händer när du kan beskriva din designintention tillräckligt tydligt för att AI ska bygga åt dig, och varför designers faktiskt kan vara bättre på vibe coding än utvecklare.

Vad är vibe coding?

Om du inte har hört termen än så handlar vibe coding om att bygga mjukvara genom att beskriva vad du vill ha på naturligt språk istället för att skriva kod rad för rad. Du använder AI-drivna verktyg som Claude Code, Cursor eller v0 och förklarar vad du försöker bygga. AI:n skriver koden.

Låter enkelt. Det är det inte, men vibe coding för designers handlar inte om teknisk kunskap, fast inte av de skäl du kanske tror.

Varför vibe coding för designers är en naturlig matchning

Här är vad jag har märkt som ingen verkar prata om: den färdighet som får vibe coding att fungera är inte teknisk kunskap. Det är förmågan att formulera designbeslut precist.

Tänk på vad vi gör varje dag som designers. Vi fattar hundratals mikrobeslut, om avstånd, färgrelationer, hierarki, hur en interaktion ska kännas, och vi förstår varför vi fattar dem. Vi vet att 2px border radius kommunicerar något annat än 8px. Vi vet varför en dämpad blåton bygger förtroende i en fintechapp. Vi tänker i system.

Det är precis vad AI behöver höra. Inte ”gör det modernt.” Det är vagt och du får vaga resultat. Men ”lägg till en 2px border med 8px radie i den här specifika färgen”, det är en designer som pratar, och AI:n levererar. Vibe coding för designers fungerar just på grund av det designtänkandet.

Utvecklarna jag har sett kämpa med vibe coding närmar sig det ofta som att de skriver pseudokod. Designerna jag har sett lyckas närmar sig det som att de förklarar sin vision för en kollega. Samma verktyg, helt olika resultat.

Lagertänk: designprocess tillämpad på AI-promptning

Tekniken som gjort störst skillnad för mig är att bygga i lager, precis som att designa.

Du öppnar inte Figma och försöker spika slutdesignen i en frame. Du börjar med struktur, sedan lager av typografi, sedan färg, sedan detaljer, sedan interaktioner. Vibe coding fungerar på samma sätt.

Börja med: ”Skapa ett kalenderrutnät med sju kolumner och sex rader.” Sedan: ”Gör varje datumcell 48 pixlar bred med numret uppe till vänster.” Sedan: ”Lägg till vår profilfärg på dagens datum.” Sedan: ”Vid hover över ett datum, lyft det lätt med en subtil skugga.”

Varje prompt bygger på den förra. Varje en är specifik och genomförbar. Att försöka beskriva allt detta i en enda prompt är som att försöka designa en hel skärm i en enda Figmasession utan utforskning, det fungerar sällan.

Vad det här betyder för design och utvecklingsflöden

Jag tror inte att vibe coding ersätter traditionell utveckling. Komplex affärslogik, säkerhet, autentisering, prestandaoptimering, det kräver fortfarande riktig ingenjörskonst. Och ärligt talat, koden som AI genererar kan vara rörig, särskilt efter flera iterationsrundor.

Men för prototyper? För att bygga ut visuella komponenter precis som du designade dem? För att skapa fungerande demos istället för statiska mockups? Det är ett genuint skifte i hur designers och utvecklare kan samarbeta.

När jag kan ta en Figmadesign och ha en fungerande prototyp på timmar istället för dagar, en som rör sig, reagerar och känns verklig, förändrar det samtalet med kunder helt. Det hänger också ihop med vad en designer som kodar faktiskt kan erbjuda. De föreställer sig inte hur något kommer att fungera. De upplever det.

Bra design spelar fortfarande störst roll

Här är det jag alltid kommer tillbaka till: verktygen förändras, men grunderna gör det inte. Bra design är fortfarande bra design. Tydlig kommunikation är fortfarande tydlig kommunikation. Att förstå hierarki, användarpsykologi, visuella system, skillnaden mellan UI och UX-tänkande, inget av det blir mindre viktigt för att AI kan skriva CSS.

Om något blir det viktigare. För nu är flaskhalsen inte implementering, det är vision. Personen som tydligt kan se vad som borde finnas och formulera varför det borde se ut på ett visst sätt har mer kraft än någonsin.

Jag tror att den personen ofta är en designer.

Mitt ärliga råd

Bör du prova vibe coding? Ja. Inte för att du behöver bli utvecklare, utan för att övningen att beskriva dina designs precist, varje avståndsbeslut, varje interaktion, varje visuell relation, gör dig till en bättre designer oavsett om du någonsin levererar koden.

Som Nielsen Norman Group beskriver designtänkande är processen att förstå användare och lösa problem medvetet precis det som gör att det här fungerar. Börja smått. Ta en komponent du redan har designat och försök beskriva den för AI tillräckligt tydligt för att den ska bygga den korrekt. Du lär dig snabbt vilka av dina designbeslut som var medvetna och vilka som var godtyckliga. Den medvetenheten ensam är värd experimentet.

Designers som kan överbrygga gapet mellan design och utveckling ersätter ingen. De blir bara svårare att konkurrera med.

Läs också

Det här caset är lösenordsskyddat

Det innehåller kunddetaljer som inte får visas publikt. Har du fått ett lösenord av mig skriver du in det här, så låses alla case du har tillgång till upp.

Saknar du lösenord? Skriv till sarajohannaelin@live.se så skickar jag en länk.