How to Create a Design System to Add as Knowledge to AI App Builders | #93
Improve your AI app builder designs by feeding a design system into the builder. Here’s the prompt I used to create one from scratch.
If you're experimenting with AI app builders like Lovable, Bolt, v0, or Replit, here’s a tip I was given that made a big difference:
Add a design system to the knowledge of the tool you’re building in.
It significantly improves the quality of the outputs. I’ve seen this first-hand after doing it myself.
When I was told this, I didn’t actually know how to create a design system (or what even goes into one).
I'm building something based on a spreadsheet I use for capacity planning, so I used the prompt below to help generate one:
I'm creating an XYZ app in <lovable/bolt/v0/replit> that consists of all the functionality that can be found in the attached spreadsheet, and I'd like to create a design system to help me build the app.
Can you keep asking me questions about the app I'm trying to build that will help inform you of the design system?
Ask me questions in such a manner so you can create a low fidelity system first, I'll revise your low fidelity, then ask me more questions to get to what you consider medium fidelity, I'll revise again, and then continue asking questions until you have a high fidelity design system.
Simply answer the questions it asks you, and you’ll get great stuff to use for building.
Below is the very first response I got - the questions that helped generate the low-fidelity version of the design system.
Is this accurate for what a design system actually is?
Can you let me know?
Using AI is great, but this is one of the things I often debate with myself -how much trust are we putting in tools like this, assuming what they’re giving us is “truth”?
That’s a debate for another day.
In this case, I’m not really looking for the truth.
I’m looking for something that helps me build better stuff - and these steps definitely help.
For all my other AI posts, click below