Steg 1: Använd AI för att forma grunden
Använd t.ex. ChatGPT eller Claude för att forma grunden och strukturen. Bolla kring vad det är som ska byggas – en feature, en hel app, en prototyp? För vem? Hur komplext? Behövs API-integrationer och i så fall vilka? Be om ett första utkast på struktur, en lista på vilka huvudsidor och funktioner som behövs eller hur ett flöde kan byggas upp.
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å den första prompten – den som du fått hjälp med av ChatGPT eller Claude.
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
- Användare
- Kodspråk, komponentbibliotek
- Domänkunskap
- Regler och krav
Steg 4: Använd GitHub för versionshantering
GitHub har primärt varit ett verktyg för utvecklare där man hanterar och samarbetar kring kod men nu är det dags att ge sig in där. Det kan vara fördelaktigt att använda sig av versionshantering, framförallt om det är ett större projekt där hela eller flera delar ska byggas under en längre tid.
Steg 5: Börja bygg med chat mode, edit mode eller visiual edits
När du ska börja bygga din design finns det tre olika lägen 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:
- 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.
Edit mode använder du för att implementera och generera kodändringar:
- 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.
Visual edits använder du för att snabbt och enkelt justera design och layout utan att skriva kod:
- Ä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.
Steg 6: Feature toggles
Feature toggles fungerar som en slags av- och på-knapp för olika funktioner i projektet. För dig som designer innebär det att du kan styra vilka delar av systemet som är redo att visas, testas eller skickas vidare till utveckling. När du jobbar i Lovable bygger du ofta flera saker parallellt, men allt är inte redo för överlämning till utveckling samtidigt.
Med feature toggles kan du “gömma” ofärdiga funktioner tills de är klara – och istället bara aktivera det som ska testas eller levereras.
Och så några sista viktiga tips! Ta dig tid med dina prompter. Ju bättre input desto bättre output. Och dela upp arbetet i små testbara block.
Lycka till!
