Atoms
Project chat

Guide för promptning

Bestäm innan du skriver, bygg i delar, använd verkligt innehåll och lägg varje förfrågan framför rätt Agent. Dessa vanor förvandlar idéer på en rad till färdiga resultat.

Bestäm innan du skriver, bygg i delar, använd verkligt innehåll och lägg varje förfrågan framför rätt Agent. Dessa vanor förvandlar idéer på en rad till färdiga resultat.

Börja i projektchatten. Öppna chatten för projektet du vill ändra och välj eller adressera sedan den Agent vars roll matchar arbetet. Om du är osäker på vilken Agent som passar, be teamet att förtydliga innan du bygger.

Den här guiden samlar teknikerna som konsekvent ger bättre resultat från ditt Agent-team. Ingen av dem kräver någon särskild förmåga. De handlar om vad du säger, inte hur du formaterar det. Oavsett om du skriver din allra första förfrågan eller förfinar ett moget projekt gäller samma principer: tydligt tänkande in, tydliga resultat ut.

Låt teamet ställa frågor innan det bygger

Ett av de mest effektiva sätten att få ett bättre resultat: när en förfrågan är stor eller otydlig, bjud in till frågor i stället för att hoppas att teamet gissar rätt. Beskriv vad du vill ha och lägg sedan till en rad i slutet:

Fråga mig om allt du behöver för att helt förstå vad jag vill innan du börjar.

Du får ofta frågor som du inte själv skulle ha tänkt på att besvara, oavsett om det gäller gränsfall, målgrupper eller avvägningar. Att reda ut dem i förväg kostar en minut; att upptäcka dem efter att något har byggts kostar omarbete. Resultatet hamnar mycket närmare din avsikt redan i första försöket.

Steg 1: Bestäm innan du skriver

Vet vad du bygger

Några minuters eftertanke i början kan spara mycket ompromptning senare. Innan du börjar, se till att du kan svara på fyra enkla frågor: vad bygger du, vem är det för, varför skulle de använda det och vilken är den viktigaste handlingen du vill att de ska utföra.

Den viktigaste handlingen kallas ofta CTA, en förkortning för call to action. Det är knappen, länken eller nästa steg som du helst vill att användarna ska välja, till exempel Sign Up, Book a Demo, Start Free eller Buy Now.

Du behöver inte skriva en fullständig specifikation. Målet är helt enkelt att ge projektet en tydlig riktning. Ju mer specifik din utgångspunkt är, desto lättare är det att skapa ett resultat som matchar det du har i åtanke.

Bygg en webbplats på en sida för en budgeteringsapp riktad till frilansare. Den huvudsakliga CTA:n är “Start Saving Smarter.” Använd ett djärvt, uttrycksfullt utseende med stor typografi och kraftfulla färger.

Skissa resan, inte bara skärmarna

Bra design lever lika mycket mellan skärmarna som på dem. Gå igenom vägen som användaren tar: vad ser de först, vad bygger förtroende, vad ger dem trygghet att agera och vart leder den handlingen? Till och med en skiss i tre steg, hero, bevis, call to action, gör dina förfrågningar dramatiskt mycket effektivare, eftersom varje sektion nu har en anledning att finnas och en anledning att leda till nästa.

Sätt den visuella riktningen tidigt

Stil är mycket lättare att etablera än att eftermontera. Välj en riktning: lugn och elegant, djärv och omstörtande, premium och strömlinjeformad, och ange den i din första förfrågan med tonord som teamet kan agera på: minimalistisk, lekfull, filmisk, utvecklarfokuserad. Dessa ord är mer än dekoration: de formar typografi, mellanrum, färg, skugga och hörnradie redan från den allra första komponenten. Återanvänd samma stilrad i senare förfrågningar för att hålla allt sammanhållet.

Använd en lugn, wellness-inspirerad design: mjuka gradienter, dämpade jordtoner, rundade hörn, generös padding. Övergripande ton mjuk och trygg.

Steg 2: Skriv förfrågningar som träffar rätt

Beskriv resultat, inte implementationer

Beskriv resultatet du vill ha, inte stegen för att bygga det. Till exempel är “Lägg till en prissektion med tre alternativ och få den i mitten att sticka ut” mer användbart än att förklara exakt hur sidan ska konstrueras. Fokusera på vad som ska visas och varför det spelar roll; teamet kan avgöra hur det ska byggas.

Arbeta i delar, inte sidor

Förfrågningar som avgränsas till en komponent — en hero, ett funktionsrutnät, en rad med omdömen, en pristabell — ger dig tydlighet och kontroll. Om en del inte träffar rätt justerar du den delen i stället för att generera om allt runt omkring. Bygg ett block, granska det, förfina det och gå sedan vidare till nästa. En förfrågan om en hel sida skapar brus; en förfrågan om en komponent skapar signal.

Skapa en funktionssektion: centrerad rubrik, sedan tre kort sida vid sida, vart och ett med en ikon, en titel och en rad beskrivning. Mjuka skuggor, lätt lyft vid hovring.

Använd riktiga ord

Platshållartext döljer problem; riktig text avslöjar dem. En riktig rubrik kan behöva två rader; en riktig CTA kan fungera bättre som ett verb. Skriv det en användare faktiskt skulle läsa, även om det är ett utkast, layouter, mellanrum och designbeslut blir alla bättre när innehållet är verkligt.

Hero-rubrik: “Design Calmly.” Undertext: “Turn stress into structure.” CTA: “Start Building Free.” Layout med fokus på text och generöst vertikalt mellanrum.

Namnge verkliga element

Använd tydliga, specifika ord för att beskriva vad du vill ha på sidan. Du behöver inte kunna designterminologi — namnge bara de saker som användarna ska se eller interagera med, till exempel ett profilkort, en knapp eller ett formulär.

Specifika förfrågningar är lättare att bygga än breda. Börja med det grundläggande element du behöver och lägg sedan till detaljer en i taget.

Skapa ett profilkort med ett foto, namn och en följ-knapp. Lägg till en liten etikett med “Verified” bredvid namnet och visa en kort förklaring när någon hovrar över den.

Steg 3: Ändra med precision

Avgränsa varje ändring: vad som flyttas, vad som stannar

När du justerar befintligt arbete, var uttrycklig åt båda hållen, vad som ska ändras och vad som inte får ändras. Använd riktningsord som “ersätt”, “uppdatera” och “justera” i stället för “gör detta bättre”, och ringa in de delar du gillar. Precision här är det som hindrar iteration från att bli regression.

Ändra CTA-texten till “Get Started” och öka dess horisontella padding. Behåll nuvarande färger, typsnitt och allt annat i den här sektionen oförändrat.

En meningsfull ändring i taget

Uppdatera texten, sedan layouten, sedan interaktionerna och kontrollera varje resultat före nästa förfrågan. Små, medvetna steg byggs upp till en polerad produkt; tio ändringar i ett meddelande byggs upp till tvetydighet, och när något går fel vet du inte vilken ändring som orsakade det.

Korrigeringar mitt i uppgiften sker i chatten. När Prompt Queue är tillgänglig i din chatt och Agent-arbete är aktivt, köas uppföljningsmeddelanden bakom det pågående arbetet. Bekräfta att ditt meddelande visas i kön innan du skickar en kopia till. Om kökontroller inte är synliga ska du inte skicka igen: vänta tills det aktuella arbetet är klart, eller använd en avbrottskontroll om din chatt erbjuder en sådan, och bekräfta sedan uppgiftsstatusen innan du skickar en uppföljning. Se Projektchatt för detaljer.

Tänk ett steg före UI:t

Om ditt projekt behöver göra mer än att se polerat ut, definiera beteende tillsammans med utseende. Ange vad användarna ser när de är inloggade eller utloggade, var dynamiskt innehåll kommer ifrån och hur gränssnittet hanterar tomma lägen, laddningslägen och fellägen. Du behöver inte ha en fungerande backend för att designa kring dessa scenarier — att planera för dem tidigt hjälper till att förhindra större omarbetningar av UI senare.

Om användaren är inloggad, visa deras avatar och namn uppe till höger. Om inte, visa en “Log In”-knapp som leder till auth-skärmen.

Vanliga frågor

Hur skriver jag en effektiv prompt för AI-agenten?

Strukturera din prompt med dessa nyckelelement:

1. Kontext — Sätt scenen. Förklara vad du bygger och var saker står just nu.

2. Mål — Var specifik med det exakta resultat eller den funktion du vill ha.

3. Krav & Begränsningar — Lista tydligt vad som ska ändras och vad som måste förbli orört.

4. Förväntat resultat — Definiera hur framgång ser ut (t.ex. UI-beteende, felhantering, tillståndsbeständighet).

5. Referenser — Bifoga skärmbilder, länkar, arbetsflödessteg eller kodexempel när det är möjligt. Ta bort lösenord, verifieringskoder, API-nycklar, cookies, personuppgifter och betalningsuppgifter innan du delar.

Exempel: "Jag bygger en dashboard med en sidopanel. Lägg till en utloggningsknapp längst ned i sidopanelen. Den ska rensa sessionen och omdirigera till /login. Ändra inte sidopanelens layout eller navigeringslänkar. Efter klick ska användaren se inloggningssidan inom 1 sekund."

Hur ska jag hantera komplexa förfrågningar som involverar flera funktioner?

För komplexa förfrågningar, dela upp dem i mindre uppgifter:

1. Ange det nuvarande problemet och det slutliga målet.

2. Lista varje deluppgift separat (uppgift 1, uppgift 2, uppgift 3).

3. Verifiera varje uppgift innan du går vidare till nästa.

4. Testa hela flödet i slutet.

Detta tillvägagångssätt minskar oväntade ändringar som uppstår när du ber Agent att göra för mycket på en gång. Varje prompt bör fokusera på ett enda, verifierbart resultat.

Hur skriver jag en prompt för att fixa en bugg?

En användbar prompt för buggfix bör innehålla:

  • Sidan, funktionen, miljön och de berörda användarna
  • Exakta steg för att återskapa problemet
  • Faktiskt beteende och förväntat beteende
  • Den fullständiga feltexten och när den inträffade
  • Relevanta skärmbilder eller loggar, med lösenord, tokenvärden, cookies, personuppgifter och betalningsuppgifter borttagna
  • Vad som måste förbli oförändrat
  • Hur fixen ska verifieras och vilka regressionstester som ska köras

Exempel: “På checkout-sidan i Preview ger valet Submit ett 500-fel. Förväntat: beställningen bekräftas och användaren kommer till tack-sidan. Återskapande: [steg]. Åtgärda orsaken utan att ändra varukorgssummor eller betalningsflödet, och verifiera sedan ett lyckat fall och ett fall med nekad betalning. Jag har tagit bort alla hemliga värden från den bifogade loggen.”

Hur skriver jag en prompt för att ändra sidlayout eller styling?

När du begär sidändringar, inkludera:

1. Den specifika sidan, modulen och elementet som ska ändras.

2. Nuvarande tillstånd och målresultat.

3. Referenslänkar eller skärmbilder.

4. Funktioner som måste förbli oförändrade.

5. Acceptanskriterier (t.ex. måste fungera på både dator och mobil).

Exempel: "På sidan /pricing, ändra rutnätet för plankorten från 2 kolumner till 3 kolumner på dator. Behåll mobillayouten som en enda kolumn. Referera till denna skärmbild [bifoga]. Ändra inte kortinnehållet eller knappstilarna."

Vad ska jag göra när agenten fortsätter att göra fel ändringar trots korrigeringar?

När Agent upprepade gånger missar målet kan fler instruktioner ibland skapa ännu mer förvirring. I stället:

1. Bevara det nuvarande tillståndet — Sluta skicka överlappande korrigeringar. Om din chatt visar en Revert-kontroll, läs dess bekräftelsetext innan du använder den, notera eventuella senare ändringar som du behöver behålla och verifiera projektet efteråt. Om omfattningen är oklar, fortsätt inte; använd vägledningen för Project chat eller kontakta Support med en maskerad Chat Link och skärmbild.

2. Rensa bruset — I stället för att lägga till extra instruktioner ovanpå, formulera om kärnproblemet tydligt från grunden.

3. En uppgift i taget — Fokusera på att lösa ett enda problem innan du går vidare.

Att ta ett steg tillbaka och hantera ändringar stegvis löser vanligtvis problem mycket snabbare än att försöka fixa flera överlappande problem i en prompt.

Var den här sidan hjälpsam?

Relaterade artiklar