TL;DR: AI-generated wireframes let you rapidly visualize and iterate your concepts. Initial wireframes won't be perfect, but they clearly indicate what needs refinement.
Tips:
- Use AI for validated color palettes and aesthetic suggestions.
- Expect many iterations. Only use a new chat if you want to completely start with a fresh concept–the new application won’t look like your last one. Once you get a working prototype that is close to what you want, stay in the same chat and use small adjustments to perfect your vision incrementally.
The first step for wireframing with AI, is to take the AI document from your previous user discovery and persona research, plus any additional features you’ve decided to include, and dump it all into an initial chat in your AI wireframe tool of choice. For this app I used Claude, but I think I'd start with Loveable or go straight to v0.dev in future.
The first wireframe you get won’t be one that you like. That’s ok. There’s nothing like seeing what you don’t want to become much more clear about what you do want.
Below you can see what my initial wireframe looked like for my breathing app. Also note the top images are cut off. I’ve consistently noticed that the AIs have difficulty assessing and placing objects correctly to avoid overlapping objects and objects going off screen. You’ll also see that this wireframe is missing all of the breathing session features beyond the session timer and start/end button.
I next reminded the AI to add in the different timer types: 4-7-8, box breath, custom. A third iteration added a yin-yang symbol in the middle with a little indicator for when to breath in/out. At this point it was getting closer and you can start to see some elements that made it into the final product.
Next I began playing with having the yin-yang symbol rotate in the middle and change color. I spent a lot of iterations getting the breathing labels (inhale/exhale/hold) to update and be properly visible. After around three iterations the chat would start to fail, and I’d have to start over. After going around like that for a while, I decided it was time to start fresh. I took the best parts of what I liked in the current wireframe, and fed that as a set of feature requirements into a new chat. And got this version. Closer and closer.
The app now felt far enough along in terms of feature design that I decided it was time to pick a color palette. Again, not wanting to simply trust the AI to pick something that wasn’t a replica of an already existing app, I went to Gemini where I could confirm sources. I asked Gemini Deep, what is an ideal 6 color pallet for a relaxation breath meditation app?
It came back with its usual dense text, but also a very helpful set of recommended color schemes that included a table that described for each color the mood, rationale, hex codes, and use case description and accessibility notes. I was able to copy and paste my favorite palette into the AI wireframe chat and it updated the entire app color scheme.
Tweaking colors is an inevitable part of iterating with these tools. To make color changes, you’ll need to be able to feed into the chat the hex code color you want and where you want it applied to make changes. I found https://imagecolorpicker.com/ to be helpful for identifying hex code colors. Make sure to be specific about what you want changed and what you don't when requesting color changes or it will sometime change colors you didn't intend. You can use the chat framework 'change x component to color to z, and keep all other component colors the same' if you find it is making unintended changes.
I then began iterating a lot to try to get the different wireframe elements to function properly. This is where I wasted a lot of time because I didn’t understand the technical limitations of how the different AI apps work. I had set up the initial Claude chat to ask for a wireframe, which meant the chat had built a design framework not deployable code.
This iterative cycle highlighted both AI's strengths—rapid visualization—and its current limitations, such as correctly positioning visual elements, reminding you that human oversight remains essential. Treat AI wireframes the same as you would working with a human designer. You’re testing out the look and feel and UX workflows, not building the final functionality.