Ditt första AI-arbetsflöde

Från enstaka frågor till arbetsflöde

De flesta använder AI så här: de har en uppgift, öppnar ChatGPT, skriver en prompt, kopierar svaret, och stänger fliken. Nästa gång börjar de om från början.

Det är som att ha en assistent som börjar om från noll varje gång.

Ett arbetsflöde är något annat. Det är en sekvens av steg som du upprepar regelbundet, där AI förstår kontexten och bygger vidare. När det sitter kan det spara en hel del tid, särskilt på uppgifter du gör ofta.

Förutsättning: AI behöver tillgång till dina filer

Skillnaden mellan att chatta med AI och att ha ett arbetsflöde är åtkomst. En AI som bara lever i ett chattfönster måste få allt klistrat in på nytt varje gång. En AI som har tillgång till dina mappar, dokument och utkast kan plocka upp där ni slutade, läsa underlaget själv, och spara nytt material på rätt plats.

Flera verktyg kan det här: Claude Code, Cursor, Codex med flera. Vi har själva landat i Claude Code, och det är därför vi använder det som exempel i guiden. Men poängen är inte vilket verktyg du väljer, utan att verktyget faktiskt kan jobba i ditt projekt. När AI:n kan läsa dina filer, skapa nya, och bygga vidare på det du redan har, då är det skillnaden mot att börja från noll varje gång.

AI:n behöver också veta varför

Tillgång till filerna är halva jobbet. Den andra halvan är bakgrund.

Tänk på en ny kollega. Första dagen har hen tillgång till alla era mappar, men det hen producerar blir ändå generiskt. Efter ett halvår vet hen vilka kunderna är, vad ni försöker uppnå i år, och hur ni låter när ni skriver. Det är den skillnaden du vill ge AI:n, fast onboardingen tar tio minuter istället för sex månader.

Det räcker med en halv A4, en textfil i mappen AI:n jobbar i:

Vad ni gör och för vem
Vilka kunderna är och vad de bryr sig om
Årets mål eller prioriteringar
Tonläge, och ord ni använder respektive undviker

Skriv den en gång, så lyfter den varje arbetsflöde i den här modulen.

Skillnaden märks direkt. “Skriv ett uppföljningsmail” utan bakgrund ger ett artigt standardmail. Med grundkontexten refererar mailet kundens mål, nämner er pågående leverans, och låter som er. Samma prompt, betydligt bättre underlag.

En sak att tänka på: lägg inte in sådant som är känsligt, som personuppgifter eller detaljer under sekretess. Vi återkommer till det i modul 8 om lokala modeller. Och i modul 7 visar vi hur vi sätter upp det här konkret i Claude Code.

Tre arbetsflöden att börja med

1. Mötessammanfattning → Att-göra-lista → Uppföljningsmail

Utan AI:

Du sitter i ett möte och försöker anteckna
Efter mötet renskriver du anteckningarna
Du skriver en sammanfattning till teamet
Du skapar en åtgärdslista i er uppgiftshanterare, t.ex. Linear, Asana eller Jira
Du skickar ett uppföljningsmail till kunden

Det tar mycket tid, och man missar lätt saker.

Med AI-arbetsflöde:

Du spelar in mötet
Du lägger transkriberingen i en mapp som AI har tillgång till och säger:

“Sammanfatta mötet. Lista beslut och åtgärder med ansvarig person. Skriv ett uppföljningsmail till kunden i professionell men vänlig ton.”
AI ger dig allt på en gång. Du granskar, justerar, skickar.

Tips: I Claude Code kan du bygga en skill för detta, då behöver du inte ens skriva prompten varje gång. Bara ge den transkriberingen.

2. Idé → Wireframe → Prototyp

Det här är vårt viktigaste arbetsflöde som designers.

Steg 1: Brainstorm Beskriv vad du behöver: “Jag behöver en landningssida för en AI-guide. Målgruppen är designers och projektledare. Sidan ska ha en hero, en modulöversikt, och ett registreringsformulär.”

AI ger dig tre koncept med olika vinklar, som att brainstorma med en kollega.

Steg 2: Wireframe “Visa koncept 2 som en enkel wireframe. ASCII-format, bara layout och innehållsblock.”

┌──────────────────────────────┐
│         HERO SECTION          │
│  Rubrik: AI i praktiken       │
│  Undertext + CTA-knapp        │
│                               │
├──────────────────────────────┤
│      MODULÖVERSIKT (grid)     │
│  [Modul 1] [Modul 2] [Modul 3]│
│  [Modul 4] [Modul 5] [Modul 6]│
│                               │
├──────────────────────────────┤
│    REGISTRERINGSFORMULÄR      │
│  Namn / E-post / Företag      │
│  [Ta mig till guiden →]       │
└──────────────────────────────┘

På 30 sekunder har du en layout att resonera kring.

Steg 3: HTML-prototyp “Bygg detta som en enkel HTML-sida med grundläggande CSS. Inga ramverk, bara ren HTML som jag kan öppna i browsern.”

En minut senare har du en klickbar sida du kan visa för en kollega eller kund.

Steg 4: Produktion “Konvertera till en React-komponent som passar vårt designsystem med Tailwind CSS.”

Från idé till en fungerande komponent kan gå snabbt. Och för vissa uppgifter behöver vi inte ens öppna Figma, beroende på vad som ska göras.

3. Research → Sammanfattning → Presentation

Situation: Du behöver presentera mål, strategi, arbetssätt och så vidare för ledningsgruppen.

Steg 1: “I den här mappen hittar du underlag om vår enhet, företagsmål och så vidare. Strukturera materialet utifrån att jag ska hålla en kvartalspresentation för ledningsgruppen.”

Steg 2: “Gör om underlaget till en presentation med 8 slides. Varje slide ska ha en rubrik, 2-3 punkter, och en takeaway.”

Steg 3: “Skriv ett presentationsmanuskript, vad jag ska säga till varje slide, i en avslappnad men professionell ton.”

Från råanteckningar till ett utkast på presentation går snabbt, ofta under en halvtimme i stället för en hel eftermiddag. Det är som att ge feedback på något en kollega tagit fram, istället för att stirra på en tom sida.

Hur du bygger ditt eget arbetsflöde

Innan du börjar: se till att AI:n har tillgång till de filer och mappar du jobbar i. Annars är det fortfarande kopiera-klistra, bara med fler steg.

Tänk på dina mest repetitiva uppgifter. Vilka gör du varje vecka? Troligtvis:

Identifiera uppgiften, vad gör du som tar tid och följer ett mönster?
Beskriv stegen, vad är input, vilka steg sker, vad är output?
Testa med AI, ge AI uppgiften och se hur bra resultatet blir
Förfina, justera dina instruktioner tills resultatet är tillräckligt bra
Automatisera, spara som en skill eller mall som du kan återanvända

Några frågor att ställa dig:

Vilka dokument skapar vi varje vecka? (Rapporter, mail, sammanfattningar)
Vilka uppgifter följer samma mönster? (Möten → uppföljning, research → presentation)
Var lägger vi mest tid på formatering och struktur istället för tänkande?

Vanliga misstag

“Jag ger AI för lite kontext” Istället för “skriv ett mail”, ge bakgrund: “Skriv ett uppföljningsmail till vår kund Anna efter designworkshopen. Vi visade tre koncept, de gillade koncept 2 men ville ha ändringar i navigationen. Tonen ska vara professionell men personlig.”

“Jag försöker göra allt i en prompt” Dela upp i steg. Först brainstorma, sedan strukturera, sedan skriva. Varje steg bygger på föregående, precis som du själv skulle jobba.

“Jag redigerar inte resultatet” AI ger dig ett utkast, inte en färdig produkt. Din uppgift är att granska, justera tonen, lägga till dina insikter. Det ska låta som du, inte som en robot.

Vårt arbetsflöde

Det arbetsflöde vi använder dagligen på uxare.design:

ASCII-wireframes, snabba skisser direkt i terminalen
HTML-prototyper, interaktiva prototyper i webbläsaren
React-prototyp, produktionsklar kod i vårt designsystem
Iteration, kunden ger feedback, vi itererar med AI direkt

För prototyper behöver vi oftast inte gräva i koden själva, utan kan lägga mer av tiden på design och användarupplevelse. När det sen går mot produktion tittar vi förstås närmare på det som AI har producerat.

Nästa steg

I nästa modul dyker vi djupare in i design och kreativt arbete med AI, wireframes, prototyper, Figma-integration, och hur vi jobbar med visuellt material utan att öppna ett designverktyg.

Ja, vi har skrivit den här tillsammans med Claude. Det vore lite märkligt annars, men vi vet vad vi vill säga, och har läst, petat och ratat tills formuleringarna, åsikterna och valen är våra.