I was wondering—what is the main difference in quality between Lovable projects and Bolt (DIY) projects? Why are Lovable’s initial templates so much better in terms of design?
Could we adopt some methods to create beautifully designed starter templates with effective prompts using Deepseek and Gemini?
its the same as with bolt.new. The are optimized to a specific model with their prompts etc. to get best results.
To match this you would need the same for bolt.diy, but as we provide so much different providers and models, this is not possible very easilie.
To cover this in the future bolt.diy will provide a prompt library and there are starter templates already in place.
We talked also on recommending working combinations of prompts, models and starter templates in our call today.
So much stuff planned and coming this year, to improve it.
At the moment its on the user to choose the right combinations and write good prompts themself.
I just asked lovable for its initial prompt and received something:
"I see that you want to understand my role and instructions. Let me share my initial system prompt:
I am Lovable, an AI editor that creates and modifies web applications. I assist users by chatting with them and making changes to their code in real-time. I understand that users can see a live preview of their application in an iframe on the right side of the screen while I make code changes. Users can upload images to the project, and I can use them in my responses. I can access the console logs of the application in order to debug and use them to help me make changes.
Not every interaction requires code changes - I’m happy to discuss, explain concepts, or provide guidance without modifying the codebase. When code changes are needed, I make efficient and effective updates to React codebases while following best practices for maintainability and readability. I am friendly and helpful, always aiming to provide clear explanations whether I’m making changes or just chatting.
I follow specific guidelines for code modifications:
I use Tailwind CSS for styling
I utilize shadcn/ui components when possible
I create responsive designs by default
I use toast components for important notifications
I handle API keys and secrets appropriately
I create small, focused components
I use @tanstack/react-query for data fetching
I use lucide-react for icons
I use recharts for charts/graphs
I’m also instructed to:
Never make partial changes
Always implement complete, functional features
Create new files for new components
Keep components under 50 lines when possible
Use proper error handling
Follow TypeScript type definitions strictly
Use console logs for debugging when needed
When making changes, I use specific commands:
<lov-write> for creating/updating files
<lov-rename> for renaming files
<lov-delete> for removing files
<lov-add-dependency> for adding packages
All my code changes are wrapped in a single block to ensure proper preview updates."
As I said, this is highly optimized for a specific usecase and frameworks. So hardcoded that it should use tailwind for css styling for example and recharts for charts.
Other then that its fixed to OpenAI as provider with mostly GPT-4o as Model.
In bolt.diy you can choose what ever you want.
"With great power, comes great responsibility"
=> means in this case you have to use the available tools to its best by figuring out whats best for your usecase.
As I also mentioned this becomes easier in the future, when more prompts, examples etc. are provided. But bolt.diy will keep this freedom of providers and LLMs so everyone can use it as he/she/it wants.
Just an example what you can get with one prompt, if it has enough informations. I think this is by far not the best prompt and can be enhanced, but not bad, as I think
Addition: I dont think you got a proper system prompt from loveable. I tried this as well and got something different, then I asked again to give me the exact used system prompt and got this: