Updated
SaaS-pocalypse is real!
When you run a business, you will need a set of software tools that make your life easier. Typically, you would use a SaaS product that gives you what you need, but never quite to the extent you need it. Probably you get 3 features that are important for a set fee, but a 4th feature you need costs you double or hasn't been created yet.
That was the typical situation before AI. Not anymore 😌
Now you can create the tools you need, with the features you actually need and the user experience that fits you. In this blog, we'll explore how you can create your own CRM application, showcasing a workflow that takes you from first prompt to production-ready product.
We will use:
- Lovable to create the interface of our CRM
- Cursor to create a full-stack Laravel app using the interface created by Lovable
- Diploi to host our entire app
This guide will give you a general blueprint that you could follow for replacing (almost) any SaaS tool you currently use.
Table of contents
- Workflow overview
- Step 2: Hosting and adding a working backend
- Step 3: setting up context files for Cursor and general advice to prompt safely
- Step 4: the migration workflow inside Cursor
- Step 5: Debugging the final app
- The economics of building over subscribing
- Conclusion: replacing any SaaS tools is possible, but be cautious
- References
Workflow overview
The workflow we'll follow starts with the prompt to create the UI for our CRM on Lovable, then export it to Diploi for hosting, add Laravel, and finally use Cursor's AI agent with context files to transform a prototype into production software.
Step 1: Prompting a CRM into existence with Lovable
Using Lovable, we'll generate a prototype, and it will use React to create it. We'll use the following prompt:
Full prompt for Lovable
## **1) Product principles for a modern CRM (to guide design decisions)**
* **Fast to operate with one hand**: left nav + main canvas, minimal modals, keyboard shortcuts.
* **One global search** (contacts, leads, opportunities, quotes, orders, products).
* **Everything is an "entity page"** with a consistent layout: header + tabs + right-side activity timeline.
* **Activity-first**: reminders/notes are the same UI component across Leads, Opportunities, Quotations, Sales Orders.
* **Personal + team views**: users can create their own pipeline layouts while still working inside team pipelines.
---
## **2) Information architecture (screens)**
### **Primary modules**
1. **Dashboard**
2. **Leads** (list view, qualification, convert to opportunity)
3. **Pipeline** (kanban for opportunities)
4. **Contacts** (list + contact detail)
5. **Products** (list + product detail)
6. **Quotations** (list + quotation builder)
7. **Sales Orders** (list + order detail)
8. **Activities** (my reminders, overdue, due today, etc.)
9. **Settings** (teams, stages, fields, roles, templates)
---
## **3) App shell layout (global UI)**
### **Top bar (sticky)**
* **Left**: hamburger (collapse sidebar), logo/app name.
* **Center**: **Global Search** input
* Placeholder: "Search contacts, leads, opps, quotes…"
* Results grouped by entity type, with keyboard navigation.
* **Right**:
* "+ Create" button (dropdown): Lead, Opportunity, Contact, Quotation, Product, Activity
* Notification bell (optional)
* User avatar menu (profile, preferences, sign out)
### **Left sidebar (collapsible)**
* Dashboard
* Leads
* Pipeline
* Contacts
* Products
* Quotations
* Sales Orders
* Activities
* Settings (visible by role)
When collapsed: icons only, tooltips on hover.
### **Page structure (common)**
* **Page header row**:
* Title (e.g., "Pipeline")
* Context switchers (team, view, filters)
* Primary action button
* **Subheader**:
* Filter chips (Owner: Me, Team: Nordics, Stage: Qualified…)
* Saved views dropdown
* **Main content**:
* List/Kanban/Builder
* **Right panel** (optional on list pages, always on entity pages):
* Activity timeline and quick add note/reminder
---
## **4) Detailed layouts by feature**
## **A) Sales pipeline (Opportunities Kanban)**
### **Pipeline page layout**
**Header controls**
* **Team selector** (dropdown): "My Personal Pipeline", plus "Team: X" pipelines available to user
* **View selector**: Kanban (default), List, Forecast (optional)
* **Saved views** dropdown (personal/team)
* **Filter bar**:
* Owner (Me / Any / specific user)
* Team
* Stage
* Expected close (date range)
* Tags
* Value range
* **Primary buttons**:
* "+ Opportunity"
* "Customize view" (personal) / "Customize team board" (if permission)
### **Kanban board design**
* Horizontal columns = stages.
* Each column has:
* Stage name + count
* Sum of amounts (optional)
* "…" menu (stage settings if allowed)
* Cards show (compact but informative):
* Opportunity name (bold)
* Company/Contact (secondary)
* Amount + currency
* Expected close date (pill)
* Priority indicator (optional)
* Owner avatar
* Next activity due (small icon + date; red if overdue)
* Tags (1-2 visible + "+n")
**Interactions**
* Drag & drop between stages (updates stage + stage change timestamp)
* Card click opens **Opportunity Drawer** (right-side sliding drawer) OR navigates to detail page (designer choice)
* Quick inline actions on hover:
* Add activity
* Add note
* Set close date
* Change owner
### **"Customize pipeline" (key requirement: each user has custom kanban + team kanbans)**
You'll support **board configurations**:
* **Personal board**: user chooses:
* Which stages appear
* Column order
* WIP limits (optional)
* Card fields shown (toggle: amount, close date, tags, company, next activity)
* Default filters (e.g., Owner=Me)
* **Team board**: similar, but applies to team pipeline and requires permission.
* Personal boards can be created **per team** too (e.g., "My view of Team A pipeline").
UX:
* A "Customize view" panel with:
* "Columns" (drag order, toggle visible)
* "Card fields" (checkboxes)
* "Defaults" (filters, sort)
* "Save as…" (Personal / Team if allowed)
---
## **B) Lead management (List view → move to pipeline)**
### **Leads page (list)**
**Header controls**
* Saved views dropdown (e.g., "New inbound", "My unqualified", "All leads")
* Filters: status, source, owner, team, created date, tag
* Buttons: "+ Lead", "Import" (optional)
**Table columns** (suggested)
* Lead name
* Company
* Email / phone
* Source
* Owner
* Status (New/Contacted/Qualified/Disqualified)
* Last activity
* Next activity
* Created
**Row actions**
* "Qualify" / "Convert to opportunity"
* "Schedule activity"
* "Disqualify"
* "Assign owner"
### **Lead detail page (very important)**
Two-column layout:
**Left main**
* Header: Lead name + status pill + owner + team
* Quick actions: Convert, Disqualify, Create quotation (optional)
* Tabs:
1. Overview (default)
2. Notes & Activity (or this can be on right timeline)
3. Related (contacts, opportunities created from lead)
4. Audit (optional)
**Overview section blocks**
* Contact info (name, company, email, phone)
* Lead details (source, tags, estimated value, interest/product)
* Qualification checklist (optional)
* Custom fields section (configurable)
**Right side panel**
* **Activity timeline** (notes + reminders + system events)
* "Add note" input (supports @mentions optional)
* "Add reminder" quick form:
* Type: Call / Email / Follow-up / Meeting / Task
* Due date/time
* Assign to (default owner)
* Linked entity auto set to current lead
### **Convert lead → opportunity flow**
A light modal or drawer:
* Opportunity name (default from lead)
* Link/create contact + company
* Choose pipeline/team + initial stage
* Expected amount + close date
* Owner
* Option: mark lead as converted + keep reference
After convert:
* User lands in opportunity detail (or pipeline with highlight)
---
## **C) Contacts list + contact detail**
### **Contacts list page**
* Table with:
* Name
* Company (if person)
* Type (Person/Company)
* Email
* Phone
* Owner
* Tags
* Last activity / Next activity
* Row click opens Contact detail.
### **Contact detail page**
Two-column layout like others.
**Header**
* Name + type badge
* Primary actions: New opportunity, New quotation, Add activity
* Secondary: Merge (admin), Export (optional)
**Left main tabs**
* Overview: contact fields, addresses, VAT/ID (optional), owner/team
* Opportunities: list of related opportunities
* Quotations / Orders: related docs
* Products (optional "interests" or purchased items)
**Right panel**
* Activity timeline + add note/reminder
---
## **D) Products list + product detail**
### **Products list page**
* Table columns:
* SKU
* Name
* Sales price
* Cost (restricted by role)
* Active
* Category
* Actions: New product (permission)
### **Product detail page**
* Header: product name + SKU
* Tabs: Overview, Pricing, Metadata
* Keep it simple unless you're building inventory later.
---
## **E) Quotation builder (Odoo-like rows)**
### **Quotations list page**
* Table:
* Quote number
* Customer
* Opportunity (optional link)
* Status (Draft/Sent/Accepted/Rejected/Expired)
* Total
* Created / Valid until
* Owner
* Actions: New quotation
### **Quotation detail (builder) page layout**
This is the most "app-like" page; minimize scrolling.
**Top header**
* Quote number + status pill
* Customer (searchable dropdown)
* Linked opportunity (optional)
* Valid until date
* Currency
* Owner/team
* Buttons:
* Save
* Send (changes status to Sent)
* Mark accepted (→ optionally create Sales Order)
* PDF preview (optional)
**Main canvas split**
* **Left (70%)**: line items grid
* **Right (30%)**: totals + settings + activity
#### **Line items grid (Odoo-like)**
Row columns:
* Drag handle (reorder)
* Product (searchable)
* Description (editable textarea-like)
* Qty
* Unit
* Unit price
* Discount %
* Tax % (optional)
* Line total
* Trash icon
Features:
* "Add line" button
* Inline product search (typeahead)
* Keyboard friendly: Enter to next cell, Cmd/Ctrl+Enter add row
* Optional row types:
* Section header row
* Note row
(If you want Odoo parity, keep these—they're extremely useful.)
#### **Totals card (right)**
* Subtotal
* Discount total (optional)
* Tax total (optional)
* Total
* "Optional: deposit / payment terms" (later)
* "Internal note" (for sales team)
**Right panel below totals**
* Activity timeline + add note/reminder
### **Create Sales Order from quotation**
* "Confirm" / "Mark accepted" creates Sales Order snapshot of quote lines.
* Sales Order becomes locked-ish (editable by role).
---
## **F) Sales orders**
### **Sales Orders list**
* Order number
* Customer
* Status (Draft/Confirmed/Delivered/Invoiced/Cancelled — or simpler)
* Total
* Linked quotation
* Owner
* Dates
### **Sales Order detail**
* Similar to quotation, but fewer editable controls.
* Tabs: Overview, Lines, Activity, Documents (optional)
---
## **G) Reminders/notes (unified Activity system)**
You want reminders/notes for Leads, Opportunities, Quotations, Sales Orders.
### **Activity types**
* **Note** (free text)
* **Reminder/Task** (due date/time, status open/done, assigned user)
* Optional: Call, Email, Meeting as "task categories"
### **UI component (consistent)**
In the right panel:
* Quick add "Note"
* Quick add "Reminder"
* Timeline list:
* Overdue reminders at top (red)
* Upcoming reminders
* Notes
* System events (stage changed, status changed, amount updated)
On list pages:
* Show "Next activity" column, clickable to open quick complete/reschedule.
---
## **5) Roles (simple but enough)**
Keep roles small, add permissions gradually.
1. **Admin**
* Full access, settings, roles, delete records, manage pipelines/stages, manage teams.
2. **Sales Manager**
* Manage team pipelines/boards, reassign owners, view all team records, approve discounts (optional), see revenue reports.
3. **Sales Rep**
* Work on own leads/opportunities/quotes/orders, create/edit within permitted scope, personal views.
4. **Read-only / Finance**
* Read access to contacts, quotes, orders; can export; can mark orders invoiced (if you need).
5. **Support (optional)**
* Can view customers and notes, add activities, but cannot change pipeline financial fields.
Implementation-wise: role-based permissions + record-level rules:
* Reps can see their own + team's depending on settings.
* Managers can see all in their teams.
* Admin sees all.
Each section of this prompt has a function and it will help you write prompts like this for any app you want to build, not just a CRM.
Anatomy of the prompt
When vibe-coding, you must think of your initial prompt as both an instruction and a blueprint with layers.
The instruction part of your prompt is the easy part, which basically tells the AI what you want to get done.
The blueprint part of your prompt tells the AI how you want it done. Any details skipped when you define your blueprint will be either made up by the AI or skipped entirely.
In general, a prompt to generate a business application should have the following layers:
- Product principles, which define how the app should feel.
- Information architecture, defines what pages/modules must exist.
- App layout, defines the general UI of everything.
- Feature layouts, specifies how users interact and view each feature.
- User roles, which determines the types of users and what they can or cannot do.
1. Product principles
summary
## **1) Product principles for a modern CRM (to guide design decisions)**
* **Fast to operate with one hand**: left nav + main canvas, minimal modals, keyboard shortcuts.
* **One global search** (contacts, leads, opportunities, quotes, orders, products).
* **Everything is an "entity page"** with a consistent layout: header + tabs + right-side activity timeline.
* **Activity-first**: reminders/notes are the same UI component across Leads, Opportunities, Quotations, Sales Orders.
* **Personal + team views**: users can create their own pipeline layouts while still working inside team pipelines.
The prompt opens with 5 design values: fast one-hand operation, global search, consistent entity pages, activity-first design, and personal + team views.
Without these, AI builders make arbitrary UX decisions. Each principle constrains hundreds of micro-choices, "fast to operate with one hand" tells the AI to prefer inline actions over modals, sidebars over popups, and keyboard shortcuts over mouse-only flows.
Adapt it: Write 3-5 principles about how your app feels to use, not what it does. For a project management tool, for example, might say "everything is a timeline" and "drag-and-drop is the primary interaction."
2. Information architecture:
summary
## **2) Information architecture (screens)**
### **Primary modules**
1. **Dashboard**
2. **Leads** (list view, qualification, convert to opportunity)
3. **Pipeline** (kanban for opportunities)
4. **Contacts** (list + contact detail)
5. **Products** (list + product detail)
6. **Quotations** (list + quotation builder)
7. **Sales Orders** (list + order detail)
8. **Activities** (my reminders, overdue, due today, etc.)
9. **Settings** (teams, stages, fields, roles, templates)
A flat list of 9 modules (Dashboard, Leads, Pipeline, Contacts, Products, Quotations, Sales Orders, Activities, Settings) acting as the app's sitemap. This determines the navigation structure, routing, and how many page components get generated, so you don't need to spend credits on features your app won't need.
Adapt it: Include a behavior hint after each module name, like "list view, qualification, convert to opportunity" for Leads. These hints tell the AI which UI pattern to use (table, kanban, builder, form, etc).
3. App layout:
summary
## **3) App shell layout (global UI)**
### **Top bar (sticky)**
* **Left**: hamburger (collapse sidebar), logo/app name.
* **Center**: **Global Search** input
* Placeholder: "Search contacts, leads, opps, quotes…"
* Results grouped by entity type, with keyboard navigation.
* **Right**:
* "+ Create" button (dropdown): Lead, Opportunity, Contact, Quotation, Product, Activity
* Notification bell (optional)
* User avatar menu (profile, preferences, sign out)
### **Left sidebar (collapsible)**
* Dashboard
* Leads
* Pipeline
* Contacts
* Products
* Quotations
* Sales Orders
* Activities
* Settings (visible by role)
When collapsed: icons only, tooltips on hover.
### **Page structure (common)**
* **Page header row**:
* Title (e.g., "Pipeline")
* Context switchers (team, view, filters)
* Primary action button
* **Subheader**:
* Filter chips (Owner: Me, Team: Nordics, Stage: Qualified…)
* Saved views dropdown
* **Main content**:
* List/Kanban/Builder
* **Right panel** (optional on list pages, always on entity pages):
* Activity timeline and quick add note/reminder
This describes the UI for the app and available actions for each page. This is important because every page inherits this structure, so getting it right means every page stays consistent. Although, as with anything AI, it is not perfect and you still need to make sure it is actually consistent.
Adapt it: We recommend that you define three core details for your application using this section: (1) what's always visible (top bar, sidebar), (2) what varies per page (the content area), and (3) what interaction patterns repeat (filters, saved views, right panel settings).
4. Detailed layouts by feature:
summary
## **4) Detailed layouts by feature**
## **A) Sales pipeline (Opportunities Kanban)**
### **Pipeline page layout**
**Header controls**
* **Team selector** (dropdown): "My Personal Pipeline", plus "Team: X" pipelines available to user
* **View selector**: Kanban (default), List, Forecast (optional)
* **Saved views** dropdown (personal/team)
* **Filter bar**:
* Owner (Me / Any / specific user)
* Team
* Stage
* Expected close (date range)
* Tags
* Value range
* **Primary buttons**:
* "+ Opportunity"
* "Customize view" (personal) / "Customize team board" (if permission)
### **Kanban board design**
* Horizontal columns = stages.
* Each column has:
* Stage name + count
* Sum of amounts (optional)
* "…" menu (stage settings if allowed)
* Cards show (compact but informative):
* Opportunity name (bold)
* Company/Contact (secondary)
* Amount + currency
* Expected close date (pill)
* Priority indicator (optional)
* Owner avatar
* Next activity due (small icon + date; red if overdue)
* Tags (1-2 visible + "+n")
**Interactions**
* Drag & drop between stages (updates stage + stage change timestamp)
* Card click opens **Opportunity Drawer** (right-side sliding drawer) OR navigates to detail page (designer choice)
* Quick inline actions on hover:
* Add activity
* Add note
* Set close date
* Change owner
### **"Customize pipeline" (key requirement: each user has custom kanban + team kanbans)**
You'll support **board configurations**:
* **Personal board**: user chooses:
* Which stages appear
* Column order
* WIP limits (optional)
* Card fields shown (toggle: amount, close date, tags, company, next activity)
* Default filters (e.g., Owner=Me)
* **Team board**: similar, but applies to team pipeline and requires permission.
* Personal boards can be created **per team** too (e.g., "My view of Team A pipeline").
UX:
* A "Customize view" panel with:
* "Columns" (drag order, toggle visible)
* "Card fields" (checkboxes)
* "Defaults" (filters, sort)
* "Save as…" (Personal / Team if allowed)
---
## **B) Lead management (List view → move to pipeline)**
### **Leads page (list)**
**Header controls**
* Saved views dropdown (e.g., "New inbound", "My unqualified", "All leads")
* Filters: status, source, owner, team, created date, tag
* Buttons: "+ Lead", "Import" (optional)
**Table columns** (suggested)
* Lead name
* Company
* Email / phone
* Source
* Owner
* Status (New/Contacted/Qualified/Disqualified)
* Last activity
* Next activity
* Created
**Row actions**
* "Qualify" / "Convert to opportunity"
* "Schedule activity"
* "Disqualify"
* "Assign owner"
### **Lead detail page (very important)**
Two-column layout:
**Left main**
* Header: Lead name + status pill + owner + team
* Quick actions: Convert, Disqualify, Create quotation (optional)
* Tabs:
1. Overview (default)
2. Notes & Activity (or this can be on right timeline)
3. Related (contacts, opportunities created from lead)
4. Audit (optional)
**Overview section blocks**
* Contact info (name, company, email, phone)
* Lead details (source, tags, estimated value, interest/product)
* Qualification checklist (optional)
* Custom fields section (configurable)
**Right side panel**
* **Activity timeline** (notes + reminders + system events)
* "Add note" input (supports @mentions optional)
* "Add reminder" quick form:
* Type: Call / Email / Follow-up / Meeting / Task
* Due date/time
* Assign to (default owner)
* Linked entity auto set to current lead
### **Convert lead → opportunity flow**
A light modal or drawer:
* Opportunity name (default from lead)
* Link/create contact + company
* Choose pipeline/team + initial stage
* Expected amount + close date
* Owner
* Option: mark lead as converted + keep reference
After convert:
* User lands in opportunity detail (or pipeline with highlight)
---
## **C) Contacts list + contact detail**
### **Contacts list page**
* Table with:
* Name
* Company (if person)
* Type (Person/Company)
* Email
* Phone
* Owner
* Tags
* Last activity / Next activity
* Row click opens Contact detail.
### **Contact detail page**
Two-column layout like others.
**Header**
* Name + type badge
* Primary actions: New opportunity, New quotation, Add activity
* Secondary: Merge (admin), Export (optional)
**Left main tabs**
* Overview: contact fields, addresses, VAT/ID (optional), owner/team
* Opportunities: list of related opportunities
* Quotations / Orders: related docs
* Products (optional "interests" or purchased items)
**Right panel**
* Activity timeline + add note/reminder
---
## **D) Products list + product detail**
### **Products list page**
* Table columns:
* SKU
* Name
* Sales price
* Cost (restricted by role)
* Active
* Category
* Actions: New product (permission)
### **Product detail page**
* Header: product name + SKU
* Tabs: Overview, Pricing, Metadata
* Keep it simple unless you're building inventory later.
---
## **E) Quotation builder (Odoo-like rows)**
### **Quotations list page**
* Table:
* Quote number
* Customer
* Opportunity (optional link)
* Status (Draft/Sent/Accepted/Rejected/Expired)
* Total
* Created / Valid until
* Owner
* Actions: New quotation
### **Quotation detail (builder) page layout**
This is the most "app-like" page; minimize scrolling.
**Top header**
* Quote number + status pill
* Customer (searchable dropdown)
* Linked opportunity (optional)
* Valid until date
* Currency
* Owner/team
* Buttons:
* Save
* Send (changes status to Sent)
* Mark accepted (→ optionally create Sales Order)
* PDF preview (optional)
**Main canvas split**
* **Left (70%)**: line items grid
* **Right (30%)**: totals + settings + activity
#### **Line items grid (Odoo-like)**
Row columns:
* Drag handle (reorder)
* Product (searchable)
* Description (editable textarea-like)
* Qty
* Unit
* Unit price
* Discount %
* Tax % (optional)
* Line total
* Trash icon
Features:
* "Add line" button
* Inline product search (typeahead)
* Keyboard friendly: Enter to next cell, Cmd/Ctrl+Enter add row
* Optional row types:
* Section header row
* Note row
(If you want Odoo parity, keep these—they're extremely useful.)
#### **Totals card (right)**
* Subtotal
* Discount total (optional)
* Tax total (optional)
* Total
* "Optional: deposit / payment terms" (later)
* "Internal note" (for sales team)
**Right panel below totals**
* Activity timeline + add note/reminder
### **Create Sales Order from quotation**
* "Confirm" / "Mark accepted" creates Sales Order snapshot of quote lines.
* Sales Order becomes locked-ish (editable by role).
---
## **F) Sales orders**
### **Sales Orders list**
* Order number
* Customer
* Status (Draft/Confirmed/Delivered/Invoiced/Cancelled — or simpler)
* Total
* Linked quotation
* Owner
* Dates
### **Sales Order detail**
* Similar to quotation, but fewer editable controls.
* Tabs: Overview, Lines, Activity, Documents (optional)
---
## **G) Reminders/notes (unified Activity system)**
You want reminders/notes for Leads, Opportunities, Quotations, Sales Orders.
### **Activity types**
* **Note** (free text)
* **Reminder/Task** (due date/time, status open/done, assigned user)
* Optional: Call, Email, Meeting as "task categories"
### **UI component (consistent)**
In the right panel:
* Quick add "Note"
* Quick add "Reminder"
* Timeline list:
* Overdue reminders at top (red)
* Upcoming reminders
* Notes
* System events (stage changed, status changed, amount updated)
On list pages:
* Show "Next activity" column, clickable to open quick complete/reschedule.
This is the longest section for the prompt, and includes detailed specs for the different views of the app. For the case of our CRM, we define:
- Pipeline kanban with drag-and-drop and card field priorities
- Lead management with a conversion flow
- Quotation builder with Odoo-like line items and inline product search
- Unified activity/reminder system
- Lists and detail page layouts, for products, contacts and other views that display data using tables
Adapt it: Prioritize describing interactions (drag, inline edit, typeahead search), because interactions are where AI tools tend to make the worst assumptions. For features that could be considered as "typical", like a contact form, you don't need detailed specs, which will help you create prompts that are more precise and consume less tokens.
5. Defining user Roles:
summary
## **5) Roles (simple but enough)**
Keep roles small, add permissions gradually.
1. **Admin**
* Full access, settings, roles, delete records, manage pipelines/stages, manage teams.
2. **Sales Manager**
* Manage team pipelines/boards, reassign owners, view all team records, approve discounts (optional), see revenue reports.
3. **Sales Rep**
* Work on own leads/opportunities/quotes/orders, create/edit within permitted scope, personal views.
4. **Read-only / Finance**
* Read access to contacts, quotes, orders; can export; can mark orders invoiced (if you need).
5. **Support (optional)**
* Can view customers and notes, add activities, but cannot change pipeline financial fields.
Implementation-wise: role-based permissions + record-level rules:
* Reps can see their own + team's depending on settings.
* Managers can see all in their teams.
* Admin sees all.
We set five different user roles:
- Admin
- Sales Manager
- Sales Rep
- Read-only/Finance
- Support
Each with their set of permissions and UI modifiers, so the user experience would have a dynamic feel, based on the role of each user. If you have a single type of user, you should still define it here, because if it's skipped, the AI might either generate a default user experience for all users or create user categories and boundaries that it assumes are typical for the type of app being generated, which would be out of our control.
Adapt it: Define roles even if there's only one user. It helps shape the db schema, data models, and access patterns you'll need when adding a real backend later.
With these five sections, the prompt gives Lovable enough structure to generate a complete and opinionated frontend rather than a generic template. Here's what it produced:
We got a working navigation, responsive layouts, and interconnected views. The generated code uses React+Vite and has the following project structure:
src/
├── components/
│ └── layout/ # Core app layout
│ └── shared/ # Components used across multiple views/pages
│ └── ui/ # shadcn/ui primitives (Button, Card, Dialog, Table...)
├── pages/ # Route components (Dashboard, Leads, Pipeline...)
├── hooks/ # Custom React hooks
├── lib/ # Utility functions and data mocks
├── App.tsx # Main app with React Router
└── main.tsx # Entry point
At this point, we have only the frontend code, but the data layer is missing. So the next stage is to transform our application into a fullstack solution with Laravel.
Top comments (0)