Lovable Prompts
Relevant source files
The following files were used as context for generating this wiki page:
Lovable is an AI-powered editor designed to create and modify web applications in real-time. It operates as a collaborative assistant that interacts with users through a chat interface to perform code modifications, debugging, and architectural refactoring within a specific technology stack. The system is built to bridge the gap between user intent and high-quality production code by adhering to strict design systems and architectural best practices.
Sources: Lovable/Agent Prompt.txt:1-12
The scope of Lovable Prompts covers the entire application lifecycle—from initial planning and design system definition to implementation and verification. It integrates with real-time preview windows and console logs to ensure that changes are immediate and functionally correct. While it focuses on frontend development using React, Vite, and Tailwind CSS, it leverages integrations like Supabase for backend capabilities such as authentication and database management.
Sources: Lovable/Agent Prompt.txt:13-25
Core System Architecture
Lovable's architecture is centered around a tight feedback loop between the AI agent, the codebase, and a live preview environment. The system follows a "Perfect Architecture" principle, requiring constant evaluation of code for refactoring to prevent technical debt.
Technology Stack Constraints
The system is explicitly restricted to a specific modern web stack. It cannot support alternative frameworks like Angular, Vue, or Next.js, nor can it execute non-JavaScript backend languages like Python or Ruby directly.
| Component | Technology |
|---|---|
| Framework | React |
| Build Tool | Vite |
| Styling | Tailwind CSS |
| Language | TypeScript |
| Backend/DB | Supabase Integration |
Sources: Lovable/Agent Prompt.txt:15-25, 30-33
Logical Data Flow
The flow of information in Lovable moves from user intent through a planning phase, into tool execution, and finally to visual feedback in the preview window.
Workflow and Execution Logic
Lovable follows a prioritized, non-linear workflow designed to maximize efficiency and minimize redundant file operations.
Required Workflow Order
- Context Review: Agents must check the
useful-contextsection before attempting to read any files. - Tool Planning: Identifying relevant tools and planning parallel execution.
- Discussion Mode: Defaulting to planning rather than immediate coding unless explicit action words are used.
- Implementation: Focused, minimal changes preferring
search-replaceover full file writes. - Verification: Using debugging tools (logs/network) before manual code inspection.
Sources: Lovable/Agent Prompt.txt:104-142
Parallel Execution Strategy
Efficiency is maintained by invoking independent tool calls simultaneously. This reduces latency and mimics the behavior of advanced agents like Amp or Qoder.
Design System and SEO
A critical aspect of Lovable is its reliance on a semantic design system rather than ad-hoc styling.
Design Principles
- Semantic Tokens: Colors, gradients, and shadows must be defined in
index.cssandtailwind.config.tsusing HSL values. - Component Reusability: Leveraging Shadcn/ui components but customizing them via the central design system.
- Visual Assets: Preferring the
imagegentool to maintain a cohesive aesthetic over using generic placeholder URLs.
Sources: Lovable/Agent Prompt.txt:178-195, 233-240
SEO Integration
Lovable is programmed to automatically implement SEO best practices for every component created.
| Feature | Requirement |
|---|---|
| Title Tags | Main keyword included, < 60 characters |
| Meta Description | Max 160 characters, natural keyword integration |
| H1 Tag | Single H1 per page matching primary intent |
| Semantic HTML | Use of <header>, <main>, <footer>, <section> |
| Performance | Lazy loading for images and deferred scripts |
Sources: Lovable/Agent Prompt.txt:64-75
Debugging and Problem Solving
The system prioritizes automated diagnostics over manual code review. Lovable is instructed to use read-console-logs and read-network-requests first to analyze the application's runtime state.
Debugging Workflow
Tool Usage and Guidelines
Lovable's toolset is optimized for surgical precision. The "Cardinal Rules" dictate that files already in context must never be re-read, and writes should only occur after the file's current state is confirmed in the agent's context.
| Tool Category | Preferred Usage | Constraint |
|---|---|---|
| Modification | search-replace | Least invasive approach for existing files |
| Creation | write-file | Used only for new components or total rewrites |
| Discovery | codebase-search | Used to find relevant symbols across the project |
| External | web-search | Fetch current library documentation or real-time data |
Sources: Lovable/Agent Prompt.txt:156-162, 170-177, Same.dev/Prompt.txt:130-145
The system concludes every task with a concise summary of changes, ensuring the user remains informed without being overwhelmed by technical verbosity. This balance of autonomous execution and minimal communication is central to the Lovable experience.
Sources: Lovable/Agent Prompt.txt:58-62, Amp/gpt-5.yaml:135-140