Steg 1: Använd AI för att forma grunden
Börja med att strukturera dina tankar i ChatGPT eller Claude innan du ens öppnar Lovable. Använd AI som sparringpartner för att forma grunden.
Punkter som man vara hjälpsamt att diskutera:
- Vad ska byggas? (En feature, hel app, prototyp?)
- För vem?
- Hur komplext ska det vara?
- Behövs API-integrationer? Vilka?
Be om:
- Ett första utkast på struktur
- Lista på huvudsidor och funktioner
- Förslag på hur olika flöden kan byggas upp
Det här steget är viktigt för att Lovable är så snabbt att du frestas att börja bygga direkt. Men ju klarare du tänkt innan, desto mindre risk att du börjar bygga på fel saker.
Steg 2: Öppna ett projekt i Lovable
Du kan se Lovable som motsvarigheten till en Figma-fil. Här skapas koden, designmiljön och grunden för allt du ska bygga vidare på. Lovable genererar initial struktur baserat på första prompten – den som du fått hjälp med av Chat-gpt eller Claude.
Så här startar du:
- Skapa ett nytt projekt
- Koppla till GitHub för versionshantering
- Skriv din första prompt baserat på strukturen från steg 1
Lovable genererar en initial version direkt baserat på din första prompt. Sen bygger du vidare därifrån.
Steg 3: Skapa en knowledge-fil
Knowledgefilen fungerar som en kunskapsbank i projektet. Där lägger du in information som är viktig, som alltid ska gälla och som AI:n inte får frångå.
T.ex:
- Syfte: Vad löser detta och för vem?
- Användare: Målgrupp och deras behov
- Teknik: Kodspråk, komponentbibliotek, ramverk
- Design: Brand guidelines, färger, typografi
- Domänkunskap: Branschspecifika termer eller koncept
- Regler och krav: Do’s and don’ts
Det här steget är kritiskt. Om du bygger ett stort projekt minns Lovable inte alltid tidigare sessioner. Information som knowledgefilen innehåller skickas med till vid varje prompt.
Steg 4: Bygg med hjälp av chat mode, edit mode eller visual edits
När du ska börja bygga din design finns det tre olika lägen (modes) att välja mellan och vilket du väljer beror på vad du vill göra.
Chat mode använder du för planering, samarbete, brainstorming och felsökning
Använd när du vill:
- Diskutera arkitektur och designbeslut.
- Få hjälp med felsökning och identifiera problem.
- Planera och strukturera nya funktioner.
- Förbättra eller omformulera dina prompter.
Exempel på användning:
“Jag vill bygga [feature], ge mig tre lösningsförslag och en rekommendation.”
Edit mode använder du för att implementera och generera kodändringar.
Använd när du vill:
- Generera och implementera kod baserat på dina instruktioner.
- Få AI:n att göra ändringar i din kodbas.
- Utföra uppgifter som att lägga till funktioner eller fixa buggar.
Exempel på användning:
“Skapa en inloggningsfunktion med validering.”
Visual edits använder du för att snabbt och enkelt justera design och layout utan att skriva kod.
Använd när du vill:
- Ändra statisk text, färger eller typsnitt.
- Justera layout och visuella element direkt i gränssnittet.
- Använda inline-redigering eller prompts för att modifiera specifika element.
Exempel på användning:
“Gör denna rubrik fet och ändra färgen till mörkgrön.”
Steg 6: Prompta lugnt!
Lovable är bara så bra som dina instruktioner. Ta dig tid. Inkludera kontext (varför och för vem), beskriv funktionalitet och design-detaljer. Dela upp arbetet och dina prompter i små testbara block och bygg en sak i taget.
Och glöm inte bort det viktigaste, användaren.
Lycka till!
