Hur jag promptar när jag vibe-kodar: en designers approach till att få AI rätt

De flesta guider för vibe coding-prompts är för utvecklare. Det här är designerns version. Lagerbaserad, visuell, byggd på designtänkande.

De flesta guider för vibe coding-prompts är för utvecklare. Det här är designerns version. Lagerbaserad, visuell, byggd på designtänkande.

Det finns hundratals guider för vibe coding-prompts på internet. Nästan alla är skrivna av och för utvecklare: rolltilldelning, chain of thought-promptning, specifikationer för teknikstack. Användbart material, men det missar det som faktiskt får vibe coding-prompts att fungera för design: visuell intention. Jag promptar annorlunda för att jag tänker annorlunda. Och efter ett år av att bygga på det här sättet har jag en metod som konsekvent producerar resultat som känns designat, inte genererat.

Det här är ingen lista med mallar att kopiera och klistra in. Det är tankeprocessen bakom mina prompts, designlogiken som får AI att producera gränssnitt med intention istället för gradient-till-ingenstans-standardestetiken.

Kärnprincipen: prompta som du briefar

Om du någonsin briefat en utvecklare eller presenterat en visuell riktning för en kund vet du redan hur du promptar bra. Färdigheterna är identiska. Tydlighet, specificitet och en klar hierarki över vad som spelar mest roll. Problemet de flesta stöter på är inte att de är dåliga på att prompta. Det är att de hoppar över tänkandet de normalt skulle göra innan de öppnar Figma.

En designer sätter sig inte ner och börjar rita utan att ha fattat beslut om färg, typ, avstånd och stämning. Men det är exakt vad de flesta gör med vibe coding-prompts. De skriver ”bygg mig en landningssida” och undrar sen varför resultatet ser ut som varje annan AI-landningssida. Klart det gör. Du gav AI:n inget att arbeta med förutom en kategori. Jag skrev om varför det producerar sameness-problemet i mitt inlägg om vibe coding-designkvalitet.

Vibe coding-prompts för design: den lagerbaserade metoden

Jag introducerade den lagerbaserade approachen i mitt ursprungliga vibe coding-inlägg. Här är den fullständiga genomgången av hur den fungerar i praktiken. Varje lager bygger på det förra. Vart och ett är en separat prompt eller en separat fas av samma samtal.

Lager 1: Struktur

Börja med skelettet. Inga färger, ingen styling, bara vad som finns på sidan och hur det är organiserat. ”Skapa en sida med en hero-sektion, ett funktionsraster med tre kolumner, ett testimonial-block och en footer. Hero tar upp hela viewport-höjden. Funktionsrastret har lika breda kolumner med 24px mellanrum.” Det här är wireframe-prompten. Du löser layout innan något annat. Om strukturen är fel kommer ingen mängd visuell polering fixa det.

Lager 2: Typografi och hierarki

När strukturen ser rätt ut, lägg till typsystemet. ”Rubriken är 48px, semi bold, med radhöjd 1.1. Brödtext är 16px, vanlig vikt, radhöjd 1.6. Underrubriken sitter 8px under rubriken och använder samma typsnitt vid 20px i en dämpad ton.” Notera hur specifikt det här är. Du säger inte ”gör det läsbart”. Du definierar en typskala som du skulle göra i ett designsystem. AI:n exekverar skalan. Du sätter den.

Lager 3: Färg och personlighet

Nu lager in den visuella identiteten. ”Bakgrunden är varm off-white, hex F8F5F0. Primäraccent är en djup terrakotta, hex C45A3C. Text är nära svart, hex 1A1A1A. Den övergripande känslan ska vara varm, jordnära och självsäker. Inga gradienter. Ingen neon. Ingen standardblå.” Ju mer åsiktsfull du är här, desto mer distinkt blir resultatet. Som Nielsen Norman Group beskriver den estetiska användbarhetseffekten, uppfattar användare estetiskt tilltalande gränssnitt som mer användbara. Ditt färg- och personlighetslager gör riktigt UX-arbete, inte bara dekoration.

Lager 4: Interaktioner och polish

Det sista lagret är mikrointeraktionerna, sakerna som får ett gränssnitt att kännas levande snarare än statiskt. ”Vid hover lyfter funktionskorten 2px med en subtil box shadow. CTA-knappen har en 200ms ease-övergång på bakgrundsfärg. Att scrolla in i testimonial-sektionen triggar en försiktig fade in från 20px nedanför.” Det är här de flesta vibe coding-prompts stannar innan de börjar. De flesta kommer aldrig till det här lagret för att de försökte göra allt i en enda prompt och AI:n gav dem något acceptabelt nog att skeppa. Acceptabelt är fiendens minnesvärt.

Vad designtänkande tillför promptningen

Guider för utvecklarpromptning talar om rolltilldelning: ”Agera som en senior React-utvecklare.” Det är okej för kodstruktur. Men det gör inget för visuell kvalitet. När jag behöver designkvalitetsresultat lägger jag till en annan sorts kontext. ”Den visuella riktningen refererar skandinavisk editorial design. Rent, generöst tomrum, asymmetriska layouter, återhållet användande av färg med en stark accent. Tänk Kinfolk magazine, inte Silicon Valley-startup.”

Den sortens referens ger AI:n en ledstjärna som går bortom komponentbibliotek och standardmallar. Du beskriver inte vad som ska byggas. Du beskriver hur det ska kännas. Och ”känsla” är det som skiljer ett designat gränssnitt från ett genererat.

Det kopplar till hur jag kör min designprocess. Den visuella riktningsfasen, där jag samlar referenser, bygger moodboards och presenterar distinkta estetiska alternativ för kunden, exakt det arbetet gör vibe coding-prompts dramatiskt bättre. Designern som redan bestämt sig för en visuell riktning skriver prompts som producerar distinkt resultat. Personen som hoppar över det steget skriver prompts som producerar standardval.

Vanliga misstag jag ser

Mega-prompten. Att försöka beskriva en hel applikation i ett meddelande. Även den mest kapabla AI förlorar sammanhang när du dumpar en 500-ordsspec i en enda prompt. Bryt upp det. Ett lager i taget. En sektion i taget. Resultaten blir bättre och du fångar problem tidigare.

Vagt estetiskt språk. ”Gör det modernt” betyder ingenting. ”Gör det premium” betyder ingenting. ”Gör det rent” betyder ingenting. Det är ord som låter som riktning men innehåller noll information. Ersätt dem med specifika beslut. Vad är bastextens storlek? Vad är färgpaletten? Vad är avståndsskalan? Precision är inte rigiditet. Det är tydlighet.

Att acceptera första resultatet. Första genereringen är en skiss, inte ett slutresultat. Behandla den så. Titta på den kritiskt. Vad fungerar? Vad känns fel? Prompta nästa iteration med vad som behöver ändras. Det iterativa samtalet är själva hantverket. Prompten är bara startpunkten.

Färdigheten bakom färdigheten

De bästa vibe coding-prompts för design skrivs av personer som redan gjort designtänkandet. Promptningen är bara översättningen. Om du vet hur bra ser ut kan du beskriva det. Om du kan beskriva det kan AI bygga det. Hela kedjan vilar på den första delen. Att veta hur bra ser ut.

Det är ingen prompt engineering-färdighet. Det är en designfärdighet. Och det är den enda färdigheten som ingen mängd AI-framsteg kommer automatisera. Verktygen blir bättre på exekvering. Modellerna förstår mer nyans. Men någon måste fortfarande sitta i början av processen och bestämma vad som spelar roll, hur varumärket ska kännas, hur användaren ska röra sig genom upplevelsen, var uppmärksamheten ska landa och var den ska vila.

Den någon är en designer. Och om du undrat om dina färdigheter fortfarande är relevanta i AI-åldern hoppas jag att det här svarar på det. De är inte bara relevanta. De är hela poängen.