Lovable Prompt Tekniker - Bygg Bättre Appar med AI

Skapa en modern landningssida för [produkt/tjänst] som riktar sig till [målgrupp]. Designen ska: • Ha en kraftfull hero-sektion med tydlig värdeproposition • Inkludera social proof (testimonials, logotyper, siffror) • Visa produktfördelar med ikoner och kort text • Ha en FAQ-sektion som hanterar vanliga invändningar • Innehålla minst 3 call-to-action buttons strategiskt placerade • Vara optimerad för konvertering med trustbuilding-element • Använda [färgtema] och vara helt responsiv • Inkludera kontaktformulär med validering Använd moderna designprinciper med mycket whitespace och tydlig hierarki.

Bygg en interaktiv dashboard för [bransch/användningsområde] med dessa funktioner: • Översiktskort med nyckeltal (KPI:er) som uppdateras live • Interaktiva grafer och charts för trendanalys • Filtreringsmöjligheter för datum, kategorier och regioner • Responsiv layout som funkar på mobil och desktop • Möjlighet att exportera data som PDF/Excel • Användarvänlig navigation med breadcrumbs • Dark/light mode toggle • Notifikationssystem för viktiga händelser Använd moderna färger och typography som passar [bransch]. Prioritera laddningstid och användarupplevelse.

Utveckla en komplett e-handelslösning med dessa funktioner: • Produktkatalog med kategorier, sök och filter • Kundvagn med add/remove och quantity-ändringar • Checkout-process med formulärvalidering • Användarkonton med orderhistorik och profiler • Betalningsintegration (Stripe) med säker hantering • Inventariehantering med stock-status • Admin-panel för produkthantering • Email-notifikationer för order-bekräftelser • Responsive design för alla enheter • SEO-optimering för produktsidor Inkludera error handling och loading states. Använd modern UI-komponenter och säkerställ bra UX genom hela köpprocessen.

Skapa ett bokningssystem för [typ av tjänst] med: • Interaktiv kalendervy som visar tillgängliga tider • Formulär för bokning med kundinfo och specialönskemål • Email-bekräftelser och påminnelser automatiskt • Admin-interface för att hantera bokningar och scheman • Möjlighet att avboka och omboka med regler • Integration med externa kalendrar (Google Calendar) • Betalningshantering för förskottsbetalning • SMS-notifikationer för påminnelser • Rapporter för bokningsstatistik • Multi-timezone support för internationella kunder Bygg med modern UI och säkerställ att systemet är skalbart och användarvänligt.

Designa en databasstruktur för [applikationstyp] med dessa tabeller och relationer: • Users-tabell med autentisering och profiler • [Huvud-entitet] med alla relevanta fält • Kategori-system med hierarkiska strukturer • Kommentarer/Reviews med ratings och moderering • Transaktioner/Orders med komplett historik • Relationer med foreign keys och constraints • Indexering för optimala queries • Soft deletes för audittrail • Timestamps för alla ändringar • Permission-system med roller Inkludera seed data med realistiska exempel. Implementera CRUD-operationer med error handling och validation för alla entiteter.

Bygg en säker API för [applikation] med: • JWT-baserad autentisering med refresh tokens • Role-based access control (RBAC) • Rate limiting för att förhindra abuse • Input validation och sanitization • Error handling med standardiserade responses • Logging och monitoring av API-calls • Pagination för stora datasets • Caching för bättre performance • API-dokumentation med exempel • CORS-konfiguration för säker cross-origin access • Miljövariabler för känsliga konfigurationer Säkerställ att alla endpoints följer RESTful conventions och returnerar konsistenta data-format.

Utveckla en mobile-optimerad app för [användningsområde] med: • Mobile-first responsive design som ser native ut • PWA-funktioner (service worker, offline capability) • Touch-optimerade interaktioner och gestures • Mobile navigation med hamburger menu • Optimerad performance för långsamma nätverk • Push notifications för viktiga uppdateringar • Kameraintegration för fotouppladdning • Geolocation för platsbaserade funktioner • Installbar som app på hemskärmen • Offline-mode med lokal datalagring Prioritera snabbhet, användarvänlighet och native känsla. Testa på olika enhetsstorlekar och webbläsare.

Skapa en helt responsiv layout för [applikationstyp] som: • Använder CSS Grid och Flexbox för flexibla layouter • Har breakpoints för mobile, tablet och desktop • Anpassar navigation för olika skärmstorlekar • Optimerar bildstorlekar och laddningstider • Använder typografi som skalas bra på alla enheter • Har touch-targets som är minst 44px stora • Implementerar hover states bara för desktop • Justerar content hierarchy för small screens • Använder progressive disclosure för komplex information • Testar accessibility på alla enhetsstorlekar Säkerställ att applikationen ser professionell ut och fungerar smidigt på alla vanliga enheter.

Optimera min applikation för maximala prestanda genom att: • Analysera och förbättra laddningstider för alla sidor • Implementera lazy loading för bilder och komponenter • Optimera bundle-storlek med code splitting • Lägga till loading states och skeleton screens • Implementera caching strategies för API-calls • Komprimera och optimera alla bilder automatiskt • Minifiera CSS och JavaScript • Implementera service worker för offline-caching • Använda CDN för statiska resurser • Optimera databas-queries och indexering • Lägga till performance monitoring och metrics Mål: Uppnå en Lighthouse-score på 90+ för alla kategorier. Prioritera Core Web Vitals och användarupplevelse.

Implementera robust error handling genom att: • Lägga till try-catch blocks för alla API-calls • Skapa user-friendly error messages istället för tekniska meddelanden • Implementera loading states för alla asynkrona operationer • Lägga till form validation med realtid feedback • Skapa fallback UI för när komponenter failar • Implementera offline-detection och meddelanden • Lägga till toast notifications för success/error states • Skapa 404 och error pages med helpful information • Implementera logging av errors för debugging • Lägga till retry-functionality för failed requests • Skapa graceful degradation för äldre webbläsare Säkerställ att användare alltid förstår vad som händer och vad de kan göra härnäst.

Integrera AI-funktionalitet i min app genom att: • Lägga till ChatGPT-integration för intelligent chatbot • Implementera bildanalys och automatisk tagging • Skapa smart content-rekommendationer baserat på användarbeteende • Lägga till automatisk text-översättning • Implementera voice-to-text för tillgänglighet • Skapa AI-driven sökfunktion med natural language • Lägga till sentiment analysis för användarfeedback • Implementera predictive text och auto-complete • Skapa smart formulär som anpassar sig efter input • Lägga till AI-assisterad content-generering Säkerställ att AI-funktionerna förbättrar användarupplevelsen utan att vara överväldigande. Inkludera loading states och fallbacks.

Integrera externa tjänster i min applikation: • Betalningar: Stripe för säkra transaktioner • Email: SendGrid för transaktionsmejl och newsletters • Autentisering: Google/Facebook login med OAuth • Maps: Google Maps för platsvisning och geokodning • Analytics: Google Analytics för användarbeteende • Storage: Cloudinary för bildhantering och optimering • Push notifications: OneSignal för cross-platform meddelanden • SMS: Twilio för SMS-verifikation och notifikationer • Social media: Instagram/Twitter API för content integration • CRM: HubSpot/Salesforce för lead management Implementera error handling för alla integrationer och säkerställ att appen fungerar även om externa tjänster är nere.