Författare
Johan Eliasson
Loading content...
Gå med på vår plattform idag och koppla ihop med topptalanger inom tech.
Att testa nya digitala produktidéer har aldrig varit enklare. Med AI kan du bygga din första webbaserade prototyp – även om du inte är utvecklare. Jag har använt Lovable.dev i flera månader nu för att snabbt prova nya användargränssnitt, funktioner och produktidéer. Jag vill dela med mig av några tips om hur du också kan komma igång.
AI-prototypning kommer att vara en katalysator för att möjliggöra verklig affärsagilitet, som hjälper dig att bygga deträtta.
Du skulle kunna ha din första prototyp redo för användartester på 10 minuter!
Om ditt mål är att utforska och bli inspirerad, kan du använda lösa, kreativa prompter. Prova bara att skapa flera små projekt för olika idéer och fortsätt med den bästa. Och ha kul! I så fall,scrolla ner till avsnittet "Börja bygga!" och sätt igång!
Men om du redan har en konkret idé och vill förvandla den till en riktig MVP, behöver du vara mer strukturerad och arbeta i iterationer. Det är vad den här artikeln handlar om, och ger några tips för att den resan ska börja på rätt sätt!
Som i alla projekt och när du samarbetar med någon, behöver du förklara din idé tydligt så att AI:n förstår dig – och så att du håller fokus också.Skriv ner ditt mål.Vad bygger du? Varför? För vem?
Fortsätt nu med din favorit-AI-chatt för att bryta ner ditt projekt och generera idéer, till exempel:
Hjälp mig att definiera funktioner för denna idé: Ett 'Airbnb för verktyg'. Folk köper verktyg som ofta bara ligger i förrådet. I vilket grannskap som helst har någon redan det verktyg du behöver.Förenkla resultatet och se till att:
Fokusera endast på kärnfunktioner, utelämna extrafunktioner i början eftersom det tenderar att förvirra AI:n om för mycket ges samtidigt.
Berätta för AI:n omstrukturen, som "flersidig webbplats", "SEO-vänlig"
Ta bort allt som inte är nödvändigt för den allra första versionen, samtidigt som du behåller saker som bidrar till känslan av webbplatsen.
Använd nu dessa funktioner när du bygger din prompt. Du kan också ge AI:n vägledning om hur din produkt ska se ut och kännas. Du kan använda referenser till stilar eller utseendet och känslan av en specifik känd webbplats:
Jag vill att designen ska kännas som Airbnb, ren och nordisk, med många bilder. Använd Midnight Blue som primärfärg, Calibri-typsnitt. Texterna ska vara vänliga och informella. Betona miljövänlighet, att spara pengar och goda grannrelationer. Bygg förtroende med försäkring och BankID-verifiering.Processen att påbörja prototypning är superenkel:
Gå tilllovable.devoch skapa ett konto. – Jag rekommenderar att du skaffar planen för 25 dollar/månad – eftersom gratisversionen tar slut snabbt, och den tillåter endast offentliga projekt som vem som helst kan se och kopiera.
Klistra in din prompt (och välj privat) och se den bygga din första version.
En bra resurs för Lovable-promptning är promptbiblioteket på deras egen webbplats. Här är ett exempel på hur de föreslår att du skapar startprompten.
Jag behöver en uppgiftshanteringsapplikation med:- Teknikstack: Next.js frontend, Tailwind CSS för styling, Supabase för autentisering och databas.
- Kärnfunktioner: Projekt- och uppgiftsskapande, tilldela uppgifter till användare, påminnelser om förfallodatum och en översiktlig instrumentpanel.
- En sidhuvud med navigering,
- En lista över projekt med deras status, - och en knapp för att skapa ett nytt projekt.
Tillhandahåll dummydata för nu, och se till att designen är ren och responsiv.I deras exempel gillar jag att de betonar att man bara bygger det första steget och använder dummydata. De är också tydliga med den exakta funktionalitet du vill ha i det första steget. Min erfarenhet är att tekniksektionen är onödig eftersom Lovable alltid verkar använda React och TailwindCSS, och den enda databas jag har sett automatiskt integrerad är Supabase.
Exempel på hur man skapar en app för verktygsdelning
Här är ett exempel på en enkel prompt och vad Lovable genererade.
Jag använde denna prompt:
En peer-to-peer-plattform för grannar att låna verktyg. Målgrupp: lägenhetsägare och nyblivna husägare. Många verktyg används en gång om året – dyrt och dåligt för miljön. Att dela sparar pengar och bygger gemenskap.
Jag vill att tjänsten ska kännas som en gör-det-själv-tidning – ren, ljus nordisk design med många bilder och tips. Använd midnattsblått som huvudfärg och Calibri-typsnitt. Texten ska vara vänlig och informell. Framhäv miljömässiga, sociala och ekonomiska fördelar. Bygg förtroende med försäkring och BankID-verifiering.
Den Lovable-genererade webbplatsen
Vad du snart kommer att märka är att de flesta genererade webbplatserna har ett liknande utseende och känsla. Så du skulle behöva ändra det för att skapa din egen identitet, men den kommer snabbt att se tillräckligt bra ut för att testa tjänstekonceptet med användare.Den genererade en startsida med ett hero-avsnitt och en call-to-action. Ursprungligen blå, men jag bad den lägga till en bild i bakgrunden. En knapp har fortfarande vit text på vit bakgrund, och skulle behöva ändras.
Verktygslistan ger oss en bra uppfattning om vad webbplatsen skulle kunna vara, och vi får chansen att granska specifika idéer, som om det är användbart för användare att omedelbart veta när verktyget är tillgängligt och om det har lånats tidigare.Vanligtvis genererar Lovable automatiskt några avsnitt som "hur man gör", vittnesmål och andra avsnitt som är typiska för en modern webbplats landningssida.
Verktygssidan ser ganska snygg och komplett ut från början.Bokningssidan ser fin ut, och kan troligen användas i MVP:n.
Verklighetskoll
Det är väldigt lätt att fastna i det roliga med att förbättra det du redan har. Jag föreslår att du efter 1 timme (eller kanske 1 dag) – pausar och reflekterar:
Löser det det verkliga problemet?
Om inte, prova en annan vinkel eller idé.
Hur är den övergripande designen och UX:en?Datamodell – kritisk!
Detta är svårt att fixa senare, så planera det tidigt.Denna webbplats skyddas av reCAPTCHA och Googles Integritetspolicy och Användarvillkor gäller.
CTO (Fractional)