Att få ett meddelande som “Kan du göra en mockup på en tårta till Sarahs födelsedag?” låter enkelt, tills du drunknar i fram och tillbaka, otydliga önskemål och svar som “Kan vi få se en version till?”.
Bageriägare känner det i kassan. Eventplanerare känner det när kunder ändrar sig i sista minuten. Och marknadsförare som försöker hålla sociala kanaler uppdaterade kör in i samma vägg. Den här automatiseringen för tårtmockups förvandlar en kort förfrågan till en delningsbar bild snabbt, utan att du behöver sitta och vakta processen.
Du får lära dig vad arbetsflödet gör, vad du behöver för att köra det i n8n och hur du ska tänka kring att anpassa det till din egen pipeline för “omedelbara visuals”.
Så fungerar automatiseringen
Här är det kompletta arbetsflödet som du kommer att sätta upp:
n8n Workflow Template: OpenAI + Replicate: snabba tårtmockups
flowchart LR
subgraph sg0["Prompt Generator Flow"]
direction LR
n0@{ icon: "mdi:brain", form: "rounded", label: "OpenAI Chat Model", pos: "b", h: 48 }
n1["<div style='background:#f5f5f5;padding:10px;border-radius:8px;display:inline-block;border:1px solid #e0e0e0'><img src='https://flowpast.com/wp-content/uploads/n8n-workflow-icons/httprequest.dark.svg' width='40' height='40' /></div><br/>Generate Image"]
n2@{ icon: "mdi:robot", form: "rounded", label: "Prompt Generator", pos: "b", h: 48 }
n3["<div style='background:#f5f5f5;padding:10px;border-radius:8px;display:inline-block;border:1px solid #e0e0e0'><img src='https://flowpast.com/wp-content/uploads/n8n-workflow-icons/webhook.dark.svg' width='40' height='40' /></div><br/>User Sends Request"]
n4["<div style='background:#f5f5f5;padding:10px;border-radius:8px;display:inline-block;border:1px solid #e0e0e0'><img src='https://flowpast.com/wp-content/uploads/n8n-workflow-icons/httprequest.dark.svg' width='40' height='40' /></div><br/>Download Image"]
n5["<div style='background:#f5f5f5;padding:10px;border-radius:8px;display:inline-block;border:1px solid #e0e0e0'><img src='https://flowpast.com/wp-content/uploads/n8n-workflow-icons/webhook.dark.svg' width='40' height='40' /></div><br/>Respond to Requests"]
n4 --> n5
n1 --> n4
n2 --> n1
n0 -.-> n2
n3 --> n2
end
%% Styling
classDef trigger fill:#e8f5e9,stroke:#388e3c,stroke-width:2px
classDef ai fill:#e3f2fd,stroke:#1976d2,stroke-width:2px
classDef aiModel fill:#e8eaf6,stroke:#3f51b5,stroke-width:2px
classDef decision fill:#fff8e1,stroke:#f9a825,stroke-width:2px
classDef database fill:#fce4ec,stroke:#c2185b,stroke-width:2px
classDef api fill:#fff3e0,stroke:#e65100,stroke-width:2px
classDef code fill:#f3e5f5,stroke:#7b1fa2,stroke-width:2px
classDef disabled stroke-dasharray: 5 5,opacity: 0.5
class n2 ai
class n0 aiModel
class n1,n3,n4,n5 api
classDef customIcon fill:none,stroke:none
class n1,n3,n4,n5 customIcon
Varför det här spelar roll: tårtmockups tar för lång tid att få godkända
De flesta “designgodkännanden” för tårtor är egentligen inte designarbete. Det är översättningsarbete. En kund skriver fem ord, du tolkar det, skissar en mockup, skickar den, och gör om den eftersom första versionen inte var vad de föreställde sig. Multiplicera det med hektiska helger, bröllopssäsong eller en varumärkeskampanj som behöver en ny festlig visual varannan dag, så blir det ett konstant sänke för teamet. Det värsta är den mentala belastningen. Du kan inte batcha det snyggt, eftersom förfrågningar kommer slumpmässigt och kunder förväntar sig snabba svar.
Det blir mycket snabbt. Här brukar det ofta fallera.
- Du lägger runt 30 minuter per förfrågan bara på att reda ut vad “enkel” och “elegant” betyder.
- Designreferenser försvinner i DM:ar och mejltrådar, så du bygger upp samma idé från noll igen.
- Revideringarna exploderar eftersom det inte finns ett konsekvent första utkast att reagera på.
- Även när du kan designa snabbt tar det fortfarande tid att skicka något som är “tillräckligt bra att godkänna” — tid du inte har.
Det du bygger: en generator som gör tårtmockups från förfrågan till bild
Det här arbetsflödet tar en kort tårtförfrågan (som “Sarahs födelsedag, rosa och guld, modern stil”) och gör om den till en färdigpolerad mockup-bild som du kan dela direkt. Det startar när en formulärinskickning träffar din n8n-webhook, vilket passar perfekt för en enkel frontend som Bolt eller vilket verktyg som helst som kan POST:a data. Därifrån bygger OpenAI ut den korta texten till en detaljerad bildprompt som inkluderar stiltrådar, dekorationer, färger och en tydlig beskrivning av vad som ska synas i bild. Den förbättrade prompten skickas till Replicate för att generera tårtbilden. Till sist hämtar arbetsflödet den färdiga bildfilen och returnerar den till ursprungsförfrågan som ett strukturerat webhook-svar, så att din frontend kan visa eller ladda ner den.
Arbetsflödet börjar med användarinput som fångas via en webhook. OpenAI gör om den inputen till en prompt på “designer-nivå”, sedan genererar Replicate bilden och n8n returnerar filen till den som frågade. Ingen copy-paste av prompts. Ingen nedladdning, uppladdning igen och sedan leta efter rätt version senare.
Det du bygger
| Vad som automatiseras | Det du uppnår |
|---|---|
|
|
Förväntade resultat
Säg att du hanterar 10 förfrågningar om specialtårtor en stressig dag. Manuell hantering: om du lägger cirka 20 minuter per förfrågan på att hitta inspiration, skriva en tydligare beskrivning och sätta ihop något presentabelt, är det ungefär 3 timmar borta. Med det här arbetsflödet är din “mänskliga tid” närmare 1 minut för att skicka in eller klistra in förfrågan, och sedan väntar du ett par minuter på generering. Du granskar fortfarande bilden, så klart, men du reagerar på ett utkast istället för att börja från noll.
Innan du börjar
- n8n-instans (testa n8n Cloud gratis)
- Alternativ för egen hosting om du föredrar det (Hostinger fungerar bra)
- OpenAI för att generera den detaljerade tårtprompten
- Replicate för att generera tårtmockup-bilden
- OpenAI API-nyckel + Replicate API-token (hämta dem från dina OpenAI- och Replicate-dashboards)
Kunskapsnivå: Nybörjare. Du kopplar in credentials, klistrar in en webhook-URL i ditt formulär och testar med några exempel.
Vill du att någon bygger detta åt dig? Prata med en automationsexpert (gratis 15-minuters konsultation).
Steg för steg
En kundförfrågan träffar din webhook. Ditt frontend-formulär (Bolt eller vilket enkelt formulärverktyg som helst) skickar en POST-förfrågan till n8n. Inskicket innehåller den korta text som folk naturligt skriver, som namn, tillfälle, färger och kanske en känsla.
OpenAI gör om kort text till en stark bildprompt. Arbetsflödet använder en OpenAI-chattmodell plus ett prompt-“kompositör”-steg som formar förfrågan till något en bildmodell kan använda pålitligt. Här bakar du in varumärkespreferenser som fotovinkel, bakgrund, frostingens textur eller hur bokstavlig modellen ska vara.
Replicate genererar bilden. n8n skickar prompten till Replicate (Flux Schnell i den här mallen), väntar på resultatet och hämtar bildfilen när den är klar. Om du har varit med om att genereringar först returnerar en länk och sedan en fil senare, så är det här “hämta slutfilen”-steget det som gör att upplevelsen känns smidig.
Bilden returneras till den som frågade. n8n svarar via “Respond to Webhook” med den färdiga bildpayloaden, så att din formulärsida kan visa en förhandsvisning, spara den eller skicka vidare till nästa steg (som att mejla den eller logga den).
Du kan enkelt ändra reglerna för tårtstilen så att de matchar ditt varumärke (eller byta ut “tårta” mot en annan produkt) utifrån dina behov. Se hela implementationsguiden nedan för anpassningsalternativ.
Steg-för-steg-guide för implementering
Steg 1: konfigurera webhook-triggern
Det här arbetsflödet startar när ett externt system skickar en POST-begäran till en webhook och förväntar sig ett svar från en response-nod.
- Lägg till noden Incoming User Hook och ställ in HTTP Method på
POST. - Ställ in Path på
5cfa7429-5637-4c1a-a81c-a53dfb154a5d. - Ställ in Response Mode på
responseNodeså att arbetsflödet svarar via Return Webhook Reply.
Steg 2: konfigurera generering av AI-prompt
AI-agenten skapar en detaljerad prompt för en tårtbild baserat på inkommande webhook-payload.
- Lägg till noden Compose Cake Prompt och ställ in Prompt Type på
define. - Ställ in fältet Text till den exakta mallen inklusive uttryck, som
={{ $json.body.name }}, för att anpassa tårtans namn. - Anslut OpenAI Chat Engine som språkmodell för Compose Cake Prompt.
- Inloggningsuppgifter krävs: anslut era
openAiApi-inloggningsuppgifter i OpenAI Chat Engine (inloggningsuppgifter läggs till i den överordnade modellnoden, inte i agentnoden).
body.name blir prompten ofullständig. Säkerställ att er POST-body innehåller ett name-fält.Steg 3: konfigurera begäran för bildskapande
Det här steget skickar den AI-genererade prompten till Replicate för att skapa bilden.
- Lägg till Create Image Output och ställ in URL på
https://api.replicate.com/v1/models/black-forest-labs/flux-schnell/predictions. - Ställ in Method på
POSToch Send Body påtrue. - Ställ in Specify Body på
jsonoch använd följande värde i JSON Body:={ "version": "latest", "input": { "prompt": "{{$json['prompt']}}" } }. - Ställ in Authentication på
genericCredentialTypeoch Generic Auth Type påhttpHeaderAuth. - Inloggningsuppgifter krävs: anslut era
httpHeaderAuth-inloggningsuppgifter i Create Image Output.
Steg 4: hämta bilden och returnera webhook-svaret
När bildgenereringen är klar hämtar arbetsflödet bildfilen och returnerar den till den som gjorde anropet.
- Lägg till Fetch Image File och ställ in URL på
={{ $json.output[0] }}för att hämta den genererade bilden. - Lägg till Return Webhook Reply och anslut den efter Fetch Image File.
- Säkerställ att körordningen är: Incoming User Hook → Compose Cake Prompt → Create Image Output → Fetch Image File → Return Webhook Reply.
Steg 5: testa och aktivera ert arbetsflöde
Validera hela flödet innan ni slår på det för produktionsanvändning.
- Klicka på Execute Workflow och skicka en test-POST-begäran till Incoming User Hook-URL:en med JSON som
{"name":"FLUX SCHNELL"}. - Bekräfta att Compose Cake Prompt returnerar en prompt i klartext och att Create Image Output returnerar en prediction med en
output-array. - Verifiera att Fetch Image File hämtar bilden och att Return Webhook Reply svarar den som anropar.
- Växla arbetsflödet till Active när testet lyckas.
Felsökningstips
- OpenAI-credentials kan gå ut eller vara kopplade till fel projekt. Om det skapar fel, kontrollera OpenAI-credential i n8n och bekräfta att API-nyckeln är aktiv.
- Om du använder Wait-noder eller extern rendering varierar processtiderna. Öka väntetiden om efterföljande noder fallerar på tomma svar.
- Replicate-auth ska vara inställd som en credential av typen HTTP Header Auth, inte klistras in i noden. Om du får “unauthorized”-fel, dubbelkolla Replicate-token och header-namnet som används i HTTP Request-noden.
Snabba svar
Cirka 30 minuter om du redan har dina OpenAI- och Replicate-nycklar.
Nej. Du klistrar in credentials, kopplar webhooken till ditt formulär och testar några inskick.
Ja. n8n har ett gratis alternativ för egen hosting och en gratis provperiod på n8n Cloud. Cloud-planer börjar på 20 USD/månad för högre volym. Du behöver också räkna med kostnader för OpenAI och Replicate, som vanligtvis är små per bild men blir betydande om du genererar många variationer.
Två alternativ: n8n Cloud (hanterat, enklast att komma igång) eller egen hosting på en VPS. För egen hosting är Hostinger VPS prisvärt och hanterar n8n bra. Egen hosting ger dig obegränsade körningar men kräver grundläggande serveradministration.
Ja, och det är ärligt talat det bästa. Du kan ändra instruktionerna i “Compose Cake Prompt” så att de matchar din varumärkesstil (till exempel “minimalistisk studiofoto” vs “stökig festdukning”). Du kan också byta Replicate-bildmodell i HTTP-förfrågan “Create Image Output” om du föredrar ett annat uttryck. Vanliga justeringar är att tvinga fram konsekventa bakgrundsfärger, lägga till “lämna plats för text” för annonser eller byta ut “tårta” mot muggar, gratulationskort eller T‑shirts.
Oftast är det ett problem med auth-headern. Se till att din Replicate API-token är sparad i en n8n-credential (HTTP Header Auth) och att HTTP Request-noden använder den credentialn. Om det fungerade en gång och sedan slutade, generera en ny token i Replicate och uppdatera den i n8n. Rate limits kan också ställa till det när du kör många genereringar back-to-back.
På en typisk n8n Cloud-plan kan du hantera många dagliga förfrågningar, och om du kör egen hosting finns ingen gräns för antal körningar utöver din serverkapacitet. I praktiken är flaskhalsen bildgenereringstiden hos Replicate, så tänk i termer av “några bilder per minut”, inte hundratals på en gång.
Ofta, ja. n8n är mer flexibelt när du behöver flera HTTP-anrop (generera, sedan hämta filen), och du kan köra egen hosting för hög volym utan att betala per litet steg. Det är också enklare att versionshantera och återanvända arbetsflöden när du har flera “prompt till bild”-pipelines. Zapier eller Make kan fortfarande vara bra för enklare kedjor med två appar, särskilt om du vill ha snabbast möjliga “ingen-tänk”-setup. Om du är osäker, prata med en automationsexpert så gör vi en rimlighetscheck av ditt användningsfall.
När det här väl rullar slutar du lägga dina bästa timmar på första utkast. Arbetsflödet producerar snabba mockups på beställning, och du fokuserar på besluten som faktiskt kräver ett mänskligt öga.
Kontakta oss
Hör av dig, så diskuterar vi hur just din verksamhet kan dra nytta av alla fantastiska möjligheter som AI skapar.