designing with ai - Lessons Learned
I spent the summer designing a number of apps all with AI. This included a standalone web apps, an app that relies on APIs, one apps updated with AI Agents, and another that requires user authentication, stripe payments, and a database.
It covered a wide range of AI apps.
All built with Lovable while using other AI tools along the way: ChatGPT, MidJourney, Canva AI, Gemini, Suno, to name a few.
I learned a lot along the way. Here’s a quick rundown what I learned:
SIMPLE & CLEAR AI PROMPTS
Simple AND FOCUSED Prompts
Don’t throw the kitchen sink at the AI tool. It can work, but it does better when you provide simple prompts that are focused on a single feature or outcome.
That prompt can be lengthy. That’s ok as long as it is focused.
Define What You’re talking ABout
This applies to components and there’s two ways to think about it.
Know the design system components so you can refer to them. Is it a tab button, or a segmented controller. The AI understands it one way, make sure you know how the AI understands it and refer to it accordingly
Two: You’re going to create new components. Define them. If you’re creating a music app you’ll have some sort of waveform with an indicator of where the song is currently at. You’ll need to refer to that. What it is called? Indicator player thingy?
The beauty of AI is you can ask it and it’l give you a name: playhead_indicator in this case.
Get Specific
Avoid generic prompts with generic language. Instead of “can you summarize this?” try “the attached doc (aiAndUX.pdf) is an overview of the state of AI’s role in the UX process. Please summarize the attached doc, highlight three key points, and define the conclusion.”
Know What You Are Talking About, It’s Not Magic
AI is not magic, but it is magical. That being said, you need to know what you are talking about to get it to do the magical things.
This true the more complicated you get.
If you want it to spin up a recipe site, it can do that. You can leverage ChatGPT for recipes, MidJourney for images, and Lovable for the site. Most of the content will be decent b/c recipes are widely understood concept. It’s easy enough for the AIs to understand this and put something back out that’s decent.
If you want to spin up a site that tells you the optimal Fantasy Football plays for the week, you have to have some understanding of: football, fantasy football, math. You’ll need to create your own formulas or models, you’ll need to be able to understand the data to a certain extent. You’ll need to have some insights and smarts to understand where AI might have got things wrong.
AI tools won’t make up for the lack of knowledge, but it can help supplement and empower what you already know.
Think It Through
Use The Chat Feature
Lovable has a chat feature - not sure about any of the other AI development tools. It does use credits, but I find it quite valuable.
AI will make assumptions about questions. But if you go to the chat feature it will ask you questions and use your answers going forward. This also gives you an understanding of what it is thinking.
It’s like having a developer give you all the “well what about this and that” but in a clean, organized way and without the attitude (j/k devs!).
Typically it’ll spit out “Questions For You” - this is great. But if you dig through all the responses you’ll see other areas the AI is considering. This is a great place for you to add any guidance you may see fit.
Why This Is Important
The obvious is it helps you think through the problem more. The better your input, the better the AI output.
But also, AI tools like to be right. Or maybe they don’t want to ask you too many questions. Maybe they’re too nice. I don’t know exactly but what that means is they’ll make decisions for you. Many of this might not be what you would want.
So when you ask it questions, and it gives you a response, it exposes the decisions it has to make. You can then help/guide/tell it what to do specifically.
Don’t Be Fooled By The Chatty Patty
The caveat to all this is AI tools can feel friendly. A little social. Almost like a buddy. But - they’re not. It’s a program. You can vibe with a friend and he/she will get you. Not always the case with AI.
A good example.
You tell it you want to build a simple habit tracking app. It says something positive and encouraging “awesome idea, a simple habit tracking app with no frills only outcomes is much needed today, people will love this yada yada yada”
It then tells you “hey in order to do this and save data, we have to set up a database, cool with you?”
You say yes. It does it. Later you test the app and nothing saves. What’s up with that you ask. The AI says you have to set up the database to save the user data.
Wait? wasn’t that implied? The conversation makes it feel like we were all on the same page. But again, it’s a program and you have to be clear and specific.
Using Design Tools To Help With AI
User Story Maps and Slicing Are Your Friend
I’m a fan of mapping out flows in the story map way. And slicing to help define leaner and more focused products. The practice has been around long before AI. If you never used it, now is a great time.
It helps you narrow down a product’s set of features. In general this is good, but specifically for AI it helps you create leaner and more focused products.
Again, keeping this simple and focused is the best approach. You can layer on as you go.
Rough Wires and Sketches
You don’t need well designed Figma files to get started. Of course you can. But if you early in the process, rough wires and sketches work just fine.
Here’s an example os a basic wireframe I gave to Lovable (with a detailed prompt) and the output it gave me
a rough wireframe and the coded output from the AI tool Lovable
Know The Design System
Your AI is working off a design system. Get to know it. Or better yet, tell it what design system to use and you’ll have way more control over the outputs.
You May Not Need Figma Yet (…Or At All)
When I first started, I assumed I would be in Figma. I was looking forward to designing in Figma and hooking up an MCP with a design system and Lovable and getting after it.
Turns out I didn’t use Figma at all. And I’m starting to believe in many cases you can by pass it all together.
I almost always start with a sketch, maybe a rough wire, and then go to Figma. But now with AI, I go from sketch, skip Figma, and go straight to the text editor.
Yup, textEdit has replaced Figma.
Well sort of. in textEdit I describe the problem and solution in detail. Copy/paste that into Lovable along with the sketch and Lovable takes care of the rest.
I get a working app, well designed.
Sure I can go in Figma and spend hours tweaking a design so that it’s “better”. But in this early stage, it’s not worth it. I’m still building out a product, validating it, understanding more as I go.
It’s not worth tweaking table heights, and spacing at this point.
And tbh, I think in many cases it won’t be. Not all. But in many cases this will be enough.
I’m still thinking this through. For sure Figma will still have a place especially as designs get more custom, more features. But AI is definitely going to shake things up.
So i’m being a bit tongue-in-cheek when I say textEdit has replaced Figma. But, there’s definitely a shake up brewing.
Design Process
Plan To Redesign
This is especially true when you’re early in the design phase. You’re learning along the way and you’re going to shoehorn in some designs here and there. The editor will make some decisions for you. Somethings aren’t necessarily worth tackling early on and It’s ok to go back and do a bigger redesign.
For example, in one app, the AI tool created a header navigation. I didn’t ask for it, I only asked for one page and wasn’t thinking about navigation. I didn’t bother changing it until I felt I had a solid V1. Then I 1)thought through navigation options, 2) decided on a better one, and 3) had the AI tool update it.
BUILD AND DESTROY
Going beyond redesigning, at times it may be worth starting a new project. Often times - especially if you’re more vibe coding - you’ll learn so much on the way. You’ll try different things, lean on different methods, maybe use different databases. It’s a journey. You can lean on there restore function, but sometimes it may be better to just start a new project once you have clearer picture of what it is you want to build
The Techy Stuff
Console Comfort
Get comfortable with the console. Often, to help the AI tool debug issues you’ll have to provide it screenshots of the console. If you’re a designer who isn’t comfortable with this - no worries. It’s actually pretty simple. All you’re doing is opening up a new window that spits out some code. Screenshot the whole thing and drop it in the editor. It’ll make sense of it
USE AI TO HELP YOU AI
ChatGPT Can Help You WITH API’s
Working with APIs can be tricky especially if there isn’t a lot of documentation. Thankfully there’s ChatGPT. Point it in the right direction ask ask specific questions and it’ll help you out.
This comes in handy when you’re working in an AI development tool and you want to point it to the right place in the API. Ask ChatGPT where certain info is contained or how to reference it and it’ll give you the endpoints.
And this leads to the next point
ChatGPT Can Help Write Prompts
If you’re struggling with writing prompts or simply not clear on how to word something, ask ChatGPT to help you. This works well with APIs and you want to instruct your AI coding tool how exactly to go about doing something. Just ask ChatGPT to structure a prompt you can copy and paste. AI helping AI.
Understand The Limitations
You’re Not Training It
The tool is the tool, the model is what it is. It took a bunch of smart people, tons of time and money to define it from scratch. You’re not retraining a model throwing prompts from your phone.
It can learn from you and adapt. You can feed it external data use. You can give it rules around tone, styling, formatting responses.
You can fine-tune responses with a big enough data set. But this is a bit of an undertaking and isn’t a simple prompt. It’ll take hundred if not thousands of well thought out data points to help an AI fine-tune.
Use The Tool For What It Is Built For
I was using ChatGPT to help me with some Lovable / Supabase integrations. It’s super helpful but started telling me where I can update things in Supabase. Some of it was easy enough to do - navigate here and toggle this button on sort of things.
Then it’s given me code to run. Me being the doer I am started going into Supabase and updating code.
Then I stopped and realized I can ask Lovable to do this. In fact, I can ask ChatGPT to give me the exact prompt to ask Lovable.
So yes ChatGPT will give you code, but Lovable is built for it so lean on you AI coding tool.
THe subtext here is - for some of you (pointing at me)- it’s a bit of a paradigm shift. You have to think about using these tools a bit different.
Personally
It’s A Lot
I was talking with a friend a couple days ago. It was a Tuesday afternoon. We’ve both been deep in building apps with AI. He said it feels like a week’s gone by with how much work was done. I agreed.
You can get a lot done. It’s super easy to spin up new ideas. But with each new idea comes more mental workload.
And it becomes a lot to keep up with and process. It can wear on you mentally.
Pace yourself.
Be Disciplined With Your Focus
Often times you’ll give the AI tool a prompt and off it goes to do its things. You have a few moments, maybe minutes. Why not switch over and browse the web, hit Twitter/X/Insta/Youtbe/etc. Maybe do some Fantasy Football research.
You know where this is going - it’s easy to get distracted while you wait. Find what works for you. Personally I find the constant switching back and forth mentally draining.
Patience
These tools aren’t magic. They won’t one-shot your app or idea perfectly. They take time and patience. But you’ll get so far ahead with them than without.
Just be patient in the process. It’ll get things wrong, it’ll make mistakes, misinterpret what you prompted. It’ll make changes you didn’t ask for. It’ll remove things for seemingly no reason. Add things you didn’t ask for.
It’s working but it’s not perfect. But it’s working.
Money
It can get pricey. The more you prompt the more it cost. Be aware of the costs and proceed accordingly.
Building Apps With AI - What I Learned Summary
The biggest takeaway is AI is a tool that will help accelerate your workflow. Like any tool you have to know how to best use it. In this case, keep things simple, clear, and specific to get the most out of it.
