Back to Home

Lovable Integration

4-step process: AI-generated prompts, build in Lovable, export, and auto-wire into Next.js.

PropelKit integrates with Lovable (lovable.dev) for AI-generated frontend designs. The integration is a 4-step process.

Step 1: AI PM Generates a Tailored Prompt

During /propelkit:new-project (Phase 10.5), after the AI PM has deeply understood your project, detected all features, researched your domain, and created a full roadmap, it generates an intelligent Lovable prompt that includes:

  • Every page derived from the roadmap (not generic screens)
  • Industry-specific design style (FinTech → Stripe style, SaaS → Linear style, etc.)
  • Your brand colors and voice
  • Anti-patterns to avoid (no generic purple gradients, no stock photos)
  • Specific component requirements per page

Step 2: You Build in Lovable

Take the generated prompt, paste it into lovable.dev, and generate your UI. Lovable creates a complete React app with components, pages, and styling.

Step 3: Export to lovable-designs/

Download or export your Lovable project and place it in the lovable-designs/ folder at your project root.

Step 4: Auto-Wire with /propelkit:wire-ui

This command runs the full integration pipeline:

  • Validates — Checks lovable-designs/ has files
  • Analyzes — Identifies components, pages, router type, UI library
  • Imports — Copies to src/imported/
  • Translates — Converts React Router to Next.js App Router, adds 'use client' directives, transforms navigation and imports
  • Wires — Connects to your PropelKit backend: Auth (replaces Lovable auth with Supabase auth hooks), Payments (wires pricing page to real checkout), Brand (replaces hardcoded colors/names with brand.ts references), Multi-tenancy (adds org switcher if enabled), Credits (adds usage meter if enabled)
  • Reports — Generates INTEGRATION.md with any manual TODOs

Design Style Recommendations

The AI PM recommends design styles based on your industry:

  • FinTech → Stripe style: Trust, professional, calm gradients, deep indigo
  • Healthcare → Stripe style: Professional, accessible, clinical precision
  • Education → Notion style: Content-focused, approachable, warm grays
  • E-commerce → Airbnb style: Warm, inviting, photography-forward
  • SaaS / Dev Tools → Linear style: Minimal, precise geometry, glass morphism
  • Creative → Airbnb style: Human, flexible, authentic
  • Generic → Linear style: Professional default

2026 Design Anti-Patterns

Generated prompts specifically avoid:

  • Generic purple-to-blue gradients (the "AI aesthetic")
  • Stock photo placeholder images
  • Overly rounded everything
  • Generic "Get Started" hero sections with floating mockups
  • Same-y corporate filler aesthetics