Lilly Tech Systems
Best Practices
Expert strategies for writing effective app descriptions, iterating strategically, knowing when to edit manually, managing complexity, and making the most of Lovable.
Writing Effective App Descriptions
Structure Your Prompt
List pages, features, and design preferences clearly. Use bullet points for features and mention specific components or libraries you want.
Describe the Design
Mention color schemes, layout preferences, and design inspiration. "Modern and minimal with lots of whitespace" guides the AI's aesthetic choices.
Define User Flows
Describe how users will interact with your app. "Users sign up, create a profile, then can browse and save listings" gives clear direction.
Specify Data Models
Describe what data your app manages. "Products have a name, price, category, image, and description" helps the AI structure the database.
Iterative Building Strategy
- Start with the UI: Get the look and feel right before adding functionality
- Add navigation: Set up routing and page structure
- Build core features: Implement the primary use case first
- Connect the backend: Add Supabase for data and auth
- Add secondary features: Build additional features one at a time
- Polish and deploy: Refine the design, add loading states, and deploy
Design Tips for AI
- Reference real apps: "Design it like Notion's sidebar" or "Use a layout similar to Linear's dashboard" helps the AI understand your vision
- Be specific about spacing: "Add more padding around sections" or "Use a max-width of 1200px for the content area"
- Request component libraries: "Use shadcn/ui cards with hover effects" gives precise component guidance
- Specify responsive behavior: "Stack the two-column layout into a single column on mobile"
When to Edit Code Manually vs AI
| Use AI When | Edit Manually When |
|---|---|
| Adding new features or pages | Fixing a specific CSS value (padding, color) |
| Restructuring the layout | Changing a single text string or label |
| Adding database integration | Adjusting a specific condition in logic |
| Creating new components | Adding a comment or fixing a typo |
| Setting up authentication | Tweaking an animation duration |
Managing Complexity
- Keep conversations focused: If your project grows large, start new conversations for major feature additions
- Use version history: Save checkpoints before major changes so you can revert if needed
- Break into modules: For very complex apps, consider building features as separate projects and combining them
- Document your architecture: Keep notes on which components exist and their responsibilities
Free vs Paid Plans
| Feature | Free | Paid |
|---|---|---|
| Projects | Limited | Unlimited |
| AI messages | Limited per month | Higher limits |
| Deployment | Lovable hosting | Custom domains + hosting |
| GitHub sync | Available | Available |
| Supabase integration | Available | Available |
| Priority support | Community | Priority access |
Limitations
- Tech stack: Lovable generates React/TypeScript with Tailwind CSS. Other frameworks (Vue, Angular, Svelte) are not supported.
- Backend: Backend logic relies on Supabase. Complex custom backend logic may require manual implementation.
- Complex state: Very complex state management patterns may need manual refinement.
- Third-party APIs: Integrating with external APIs may require manual configuration and code adjustments.
- Performance optimization: Generated code may need manual optimization for high-traffic production apps.
Frequently Asked Questions
Is Lovable free to use?
Lovable offers a free tier with limited projects and AI messages per month. Paid plans provide more messages, priority generation, custom domains, and additional features. Check lovable.dev for current pricing.
What happened to GPT Engineer?
GPT Engineer rebranded to Lovable in 2024. The product is the same — an AI-powered app builder. The rebrand reflects the company's focus on building software that people love to use. All existing GPT Engineer accounts were migrated to Lovable.
Can I export my code and leave Lovable?
Yes, you fully own the generated code. It syncs to GitHub automatically, so you always have a copy. You can clone the repository and continue development in any IDE without Lovable. The code is standard React/TypeScript with no vendor lock-in.
Do I need to know how to code?
No coding experience is needed to build basic apps. However, understanding HTML, CSS, and JavaScript basics helps you make better prompts and troubleshoot issues. For complex apps with custom backend logic, some coding knowledge is beneficial.
How does Lovable handle security?
Lovable generates secure code patterns and integrates with Supabase's Row Level Security for data protection. However, you should always review the generated security policies, especially RLS rules, before going to production. Enable HTTPS and keep API keys in environment variables.
Can multiple people work on the same project?
With GitHub sync, multiple developers can collaborate on the same codebase. While the Lovable workspace is primarily single-user, the GitHub repository supports standard collaboration workflows: branches, pull requests, and code reviews.