Intentional AI: The real value of AI wireframes is NOT the wireframes

VIRGIL 0:00
You know, you can use AI to build full wireframes with a single prompt, and at first it probably looks really impressive, but then you notice what it forgot, what it misunderstood, and what you now really have to fix. Let's look at where AI actually helps in the wireframing process and layouts as we start Discussing Stupid. Hey, everybody. Welcome back to the podcast. We got another great episode for you today. Today. Joining us is Chad and. And Cole, of course, and Cole, as I seem to do every time, and people are probably getting real sick of this, that I do the same thing every time, but I'm gonna turn it over to you and you can introduce the topic we're going to be talking about today.

COLE 0:53
I don't think people are sick if they're still listening to the podcast, you know.

VIRGIL 0:57
No, that's true, that's true. People are listening because they must be what subscribing and liking and following...

COLE 1:07
turning on those notifications.

VIRGIL 1:09
Yeah, yeah, that's. That's very true.

COLE 1:12
Anyways, well, yeah, today's episode is a bit different than the other episodes we've done so far in this series mostly revolved around, you know, content creation, content research, more along, like, the actual content side things. But today we are talking about how AI can assist you or not assist you very well in wireframing and layout. So, yeah, Virgil, I'll turn over to you real quick. So how would you describe that?

VIRGIL 1:44
Okay. Yep. Well, it's part of the content process. I mean, if you're building a piece of content, I mean, it doesn't just stop with that content. Now, it may be different people in your organization that do these different things, but it's still part of, you know, the entire content lifecycle is getting it out there in a published stage, which means, you know, you need to have a layout, you need to have a design, you need to optimize it for search. You got to do all these kinds of things like that. And that's really kind of where we wanted to explore stuff and we brought in Chad because, Chad, you do this stuff every once in a while.

CHAD 2:17
It is part of my job. Yes, I'd say a significant portion.

VIRGIL 2:22
A significant portion. And wireframing and layout is always kind of one of those really good but very difficult pieces because for a lot of people, especially on the business side, it's kind of a mental leap to be able to go there and to do wireframing. Well, because wireframes in general should be boxes and squares. I mean, that's really what it should be. And it's about structure. It's about where things sit on a page. It's where the different kind of content structure you'd use and all that kind of stuff without bringing a design in it, because we all know that design should really support that function. So the wireframes are really the functional piece of it and bring it in, and so it was interesting. I just thought it would be a fun exercise to see because, you know, obviously we use Figma, which has its own AI piece that's really big around being able to help you create wireframes and prototypes and all that kind of stuff. But that is kind of advertised. I mean the development side of AI engines is very much very well documented. I think one of the areas that they actually do better at than some of the more freeform content stuff.

CHAD 3:41
Yeah, absolutely. There's so much development code out there and structure that it's easy to bring that in. For AI to understand that and generate out some stuff, you still have to know what you're looking at just like anything else.

VIRGIL 3:55
But there's rules.

CHAD 3:59
Yes, there's rules. There's logic behind it and that's easy for a computer to understand and spit out.

VIRGIL 4:06
And so that's cool. So I, with this one, I actually decided to do something a little bit different with that and that was kind of fun, and Cole and I have had some good laughs about how far you could take this back. One of the things that I've seen and I actually went through this process around doing some strategic planning at High Monkey, and a friend of mine had told me about how I could use AI to kind of create prompts that can walk me through a guided situation to kind of come up with some of this stuff. Obviously you guys have seen some of the stuff that came out of that, so I decided to do the same. I mean, I've been kind of told here that that is something you can do so instead of creating a prompt to create a wireframe, I created a prompt to create the prompt to create the wireframe. So we probably could have taken it, I could have created a prompt, tell me how to create the prompt, create the prompt for the wireframe to create the wireframe in that.

COLE 5:18
No, I think this is kind of, I'm sorry.

CHAD 5:19
I was pretty sure this is how AI becomes sentient in the first place.

VIRGIL 5:24
Right, exactly.

COLE 5:26
I think this is kind of a good approach because I think AI's feelings get hurt when it's asked a simple question and asked to do a lot, but you kind of were like, hey, what do you want to be asked when I ask you to make this thing?

VIRGIL 5:44
So, yeah, I mean, it is, because, you know, and it's kind of like wireframing or design or anything. I mean, you know one of the things that is always the struggle is kind of figuring out how to start. So, it's one of the things, I don't use AI a lot outside of what we're doing for the podcast, but I'm using it a little bit more to help me get those creative juices going and kind of get started with stuff. So when the prompt is like, well, really, what information do you need? If I want you to build me a wireframe, what do you really need from me to be able to do that?

COLE 6:23
Right.

VIRGIL 6:24
And obviously I did that. And it created. Not a prompt, it created a PROMPT. It was like four pages long. But one of the really cool parts about it was it created a prompt where it told me, like, yeah, you know, I had said that I wanted a prompt that basically kind of created a wireframe around this article that I was attaching and, you know, called out things, looked for things, and kind of use style around it. And it really took a lot out of it where, you know, it showed how you could configure call outs, you know, definitions for glossary type terms and different things like that, highlighted things, highlighted quotes, all that kind of stuff. And it gave me very much a structure. Now, if you're listening to this and you're like, I really want to see that structure, go to the episode on discussingstupid.com and you can download the prompt and actually see what it did and how we got that prompt and all that there. But it was really, as far as this entire process, this was 100% successful because it gave you basically fill in the blanks in a Word document. Where. Then I went in, I said, what the title is, here's the abstract, here's the content, here's the color scheme I want you to use, here's the fonts I want you to use that kind of stuff. I mean, it went down a rabbit hole. That would take some people to doing it. But the really cool thing was, is that from a basic level, when we use that, and took it into actually having the different tools tested out it worked really well.

COLE 8:08
Yeah.

CHAD 8:09
It gives you something to react to instead of having to make up in the first place. It's hard to react to your own work when you pour so much into it.

COLE 8:24
Brains probably shot at that point.

CHAD 8:26
Yeah. And you've stared at the same thing. You've poured over it. You've moved this box here and there. So once you have an initial wireframe that you've generated from scratch, there's little to react to because you've already been staring at it for so long. So having that initial broad strokes kind of layout in front of you generated by AI is something that you can react to and say, yes, no, yes, no, so forth.

VIRGIL 8:59
Fill in the blanks is just good. I mean, you, you know, you know, it's. It kind of gets it there. And the nice thing is, is it's. It's really a structure you could use over and over. I mean, it's. There is some uniqueness to being to the blog post, but at the same time, you could use that kind of structure. And it was interesting to see how it structured the document. And I didn't only. So I used Claude and it's, which is anthropic and it's new Opus model for this. But I was able. it actually was able to also, you know, work with the other tools that I used as well. I mean, they didn't sit there and say, I don't understand this format. So it was a generic format for machine language, I guess that all of them understood what to do from that. They all did them a little different, but overall they understood it. And that in and of itself is there. And I do love that ability to, you know, to kind of look at how it was and to be able to look at what's happening there and read the article, understand the article, give suggestions on how that format would be. So, I mean, there's a lot of time saving there. But again, as we've kind of pointed out time and time again, that doesn't stop your role. You still have to play a role. I mean, I still had to fill in the blanks and figure that all out. It still took me 10, 15 minutes to do it. But compared to doing everything else from scratch, I mean, that in and of itself is a huge time saver.

COLE 10:33
Yeah, 100%. I mean, I think one of the biggest risks here is, like, someone who's not as knowledgeable about, like, wireframing, someone who doesn't know about, you know, the ins and outs of like, layout, design, stuff like that. They might see what AI gives you in this scenario and be like, oh, man, this is awesome. And then, like, who knows what happens from there? I mean, I just think that there is kind of a can of worms of risk that has opened up here when you're. When you're talking about wireframing with AI. Chad, as someone who is no stranger to wireframing, does. Does this whole topic kind of excite you more or kind of what I was talking about seem a little bit risky?

CHAD 11:19
It's funny. It's a little bit of both. I think it's a good tool and it's a good way to start. But I think the underlying thing in my brain to point Cole is it doesn't excuse you from having, you know, some expertise in that area to fill in blanks, to make adjustments, to make sure best practices are being applied, to make sure that what's being wireframed is something we've run across a few times, can actually be developed within your, within your timeline, your budget. So it's a great tool, but at the same time, if somebody just took a prompt, generated the wireframes, and then took it to their department said, build this exactly how it is, that might lead to kind of a whole can of worms.

VIRGIL 12:21
Yeah, I mean, it's the 80/20 rule. And all of a sudden I'm sitting here listening to you going, my God, am I becoming like the AI cheerleader all of a sudden? And I'm like, but, but, but here's another thing, to your point, Cole, I think it's a great point, is that I kind of know what I'm doing in that. And I also had article, you know, the blog post that we created, and I said, do it based off this. So it was looking at that, and then it was pulling information from it. Let's say you were starting from scratch how you could do it? Well, that's one of the things, you know, kind of going back to why I brought up that example of doing some strategic planning with this is instead of, like, giving it instructions, I said, you know, basically, I want to do this. What questions can you ask me to help me get there? And that is one thing that I had never really thought of using AI for myself that people have shown me. But we also know the negative side of that in the world that, you know, people are having conversations with them and AI are taking them down. So you still have to have some knowledge. But, you know, for this, you could literally say, I want your help creating a wireframe. What's information? I can give you to get started. Because the important thing about the prompt itself is that it was nothing about how many boxes or squares you wanted it, where do you want things placed on the page, all that kind of stuff. There was no questions like that. It kind of, you know, made some assumptions on that, what you wanted. But overall I think it's that if we can get you 60% of the way started, especially if you're somebody who just doesn't that comfortable with it, it's a great start.

COLE 14:03
So do you think that the next step up when it comes to prompting here in this instance would be like adding in like constraints to the prompt? So let's say like, you know, accessibility, keeping that 4 to 5 to 1 contrast ratio. And then maybe you have specific spacing requirements like putting these types of things in the wireframe that, you know, you might not think to add off the first jump.

VIRGIL 14:31
Yes. Yep. Yeah I think a lot of people, when they do this kind of stuff, they're going to do it once and they're going to do it again, they're going to do it again because they're going to kind of learn from it. And you know, one of the things I like to do a lot of times is I'll sit there and I'll ask a prompt and then when I don't quite get what I want, instead of writing a whole new prompt, I just say, using the information you just provided me in the last prompt, constrain this by this, do this with it, change it like this, exclude this, stuff like that. So you're basically using know, like multiple, like, you know, I'm doing schemas for our website and that has been happening constantly, you know, from, from that side that I'm like, okay, based off what you just did here, also do it for these pages in there.

COLE 15:23
Yeah, well, I think it would be a good, good time now to look into how each of the tools before we give our thoughts on them. What do you guys think?

VIRGIL 15:34
Yeah, no, I agree. So for here I use three different tools. I wanted to use Claude again because obviously it created the prompt. So I also wanted to see not only how Claude did it, but also how it responded to its own prompt and then also how other tools did as well. Claude did a really good job from a layout and again, everybody will be able to download and, and view the, the wireframes themselves from our website at discussingstupid.com so you can go there on that. It by far, I think you and I both agree Cole had the best layout in the way that it laid out the page, just the way it did call outs, the way it did the the glossary definitions as kind of, you know, collapsible panels and that kind of stuff. It did a lot of great things. It added a sticky menu at the top. Its structure was very solid. You could see where it wasn't ideal. You could see from a layout standpoint actually just plugging this in and using it and it'd be quite a good design from that side. One of the things that I liked, and this was actually something that the prompt created, was you had a, you know, we asked for a desktop wireframe, a mobile wireframe, and then a list of the components that we wanted in there. And you could easily switch from that on there. And it also had a little call out down at the bottom where you could, you could look at all the settings that it did and that kind of stuff. So there were some really great things. So overall it did a great job from that side. Now there were some things that it failed miserably and some of them are ultimately ironic. And they weren't the only one. They all failed miserably at this. The first one being accessibility. So one of the things we had is in the prompt we had information about the things that needed to do from an accessibility standpoint, including color contrast. We know that our own color scheme for our website, which is the colors that we used, we know the color combinations that work in the color combinations. And it failed miserably. I would say 60% of it is non accessible. And we even gave it, it needs to be a 4 to 5 to 1 ratio minimum. And it didn't test that at all. It was very obvious from there. There were a lot of examples of the images, the images that it used. It kind of just used a lot of random images. I mean, they all kind of did this. And again, it's a wireframe. But we did ask it to create an image based off of stuff. Claude was really the only one that actually tried to create an image that was relatively related to the thing. So that was there, but it wasn't really that impressive. But the most interesting thing beside that was. And Claude did this and Google Gemini did this, is it removed most of the text from the article. I mean, it used about 50% of the text in the article and just got rid of the rest. And I had the full text of the article in there. It was so weird why it did that.

COLE 18:42
Yeah, it's interesting to see what it like prioritizes and what it doesn't. And clearly, apparently the content of our article wasn't important enough for this wireframe, so.

VIRGIL 18:54
Well, and another piece there that that is kind of challenging from using something like that is that it exported it as React JavaScript and then I had it converted to HTML. But the reality is from the standpoint of somebody, unless you have a good front end dev or somebody, they're just not going to be able to work with it. The other thing is it's using all inline styles. It does a lot of things there. So from the standpoint of creating the wireframe, it did a pretty good job. From the standpoint of using a wireframe that you could do something with, it didn't do a very good job at all. I mean it would basically, it'd lock you into needing somebody with a lot of experience and understanding of how to do this stuff to be able to make it work.

COLE 19:41
Yeah. And your experience with Gemini was fairly similar, right?

VIRGIL 19:46
Gemini was very much so. I use Gemini, they just released Gemini 3, which is Google, their new model, and it worked very well. Kind of similar thing. What was really weird about it as well is that it also, it even used less text. I mean, I want to say it used about 25% of the text from the article. So it was really short. But overall the look and feel was relatively the same. It had a little bit, you know, you know, you know where, where, where Claude used dark colors, it sometimes used light colors, all that kind of stuff in there. Its call outs were actually the most accessible. They didn't have as many accessibility issues as the other ones. But it also was the simplest wireframe, I think from that side. But it still failed on accessibility issues. A lot of the images remember it had text in it and then that. But it was just a generic placeholder. It actually didn't create any of the images, it just created placeholders from it and that sort of. But overall relatively similar in that. And overall, you know, again, it exported as HTML. So again, but it had to use a lot of complex styles. It take that thing and you always have to think about that.

COLE 21:05
Yeah, but I think the. So kind of the real magic when it comes to the AI wireframing is with Figma Make, in my opinion, because of how easy it is to put into your workflow, you know.

VIRGIL 21:19
Right.

COLE 21:19
Because everyone's using Figma wireframes and then when you can use that same AI tool to then like be able to make edits on the components that it makes versus just kind of seeing it in like an HTML file Like, I think that was.

VIRGIL 21:32
Yeah, I mean, Figma Make. So that, that's, that's Figma's AI component. Obviously Figma's entire existence is about creating prototypes and layouts and everything like that. And it did a great job. I mean, I'm going to still say I liked what Claude produced the best, but obviously Figma Make, you could actually copy it into a Figma design and then use it just like you would any other thing. So you can literally work with the wireframe at that point and all that. And that in and of itself is just a huge thing. So you could think of using Figma make not only to kind of create an entire wireframe, but just create a component, some type of interactive component that you spend hours trying to make work yourself and now get it to make it in there. It was the only one to use all the text of the article. So it was literally the entire article in there, which I thought was hilarious. It did a good job with its call outs. One of the things that I liked is that it gave a good description about each of the components underneath, like the constraints and all that kind of stuff for desktop versus mobile. And that I thought that was very handy. It gave a lot of annotations in line in that, which obviously if you're going to show a customer, you might end up removing. But overall it was really good to understand the things from that. It still failed in the color contrast. It still did all that really badly. Its example images were hilarious. I mean, it used images that had nothing to do with anything. So it basically showed that it has no ability for image creation or anything because, like, you know, like what was the one on like the cost of accessibility and it put two tables sitting side by side. What does that have to do with anything? I definitely could tell Chad that it used bootstrap because it used a lot of the standard bootstrap colors in it and that. So that was there. And it had some repeats of things like it had related articles in, in two places, but basically the same thing. It did some things there, but overall, again, I'd probably get you 60% there. You now have an actual model that you can bring into Figma design and you can work with. So for me to update it and kind of make the changes that I needed to would take me a fraction of the time than having to do it from the start. And that probably makes sense. Now, Figma is not the only wireframe tool out there. There's several others that do it as well. But this is obviously the One that we use in our own workflow. So this was the one that we decided to use from that side. So I think in the end it has some great uses, but it's kind of with the caveats, you know, it could very easily take you down a rabbit hole that you can't get back out of. One of the things I was pleasantly surprised with and one of the things that when I first made it in Figma Make is I worried about, you know, was it going to like nest components inside components inside components and you know, make it kind of messy. Almost like Chad and I were talking about from a development side, how you can buy somebody's third party software and spend four times as much trying to change it as it is to do it yourself and that. So but overall it actually did pretty clean structure. So I was impressed by that.

COLE 24:56
Yeah, overall it seems like a nice, you know, nice tool for like jump starting this process. And I think the excitement for me anyways is you can use more of your brain power to make like smaller edits and be more specific with your design versus like all that time it takes to make several pages a wireframe. But like with any of these AI tools, that doesn't mean you can just kind of like, all right, AI took care of it. You know, you gotta, you gotta really think about those constraints that I mentioned earlier. You gotta make sure that you're still adhering to your own design systems. And I think AI can definitely be a tool in that process, but not necessarily like the authority figure.

VIRGIL 25:47
Yeah, I think one of the things that Figma Make does, it is very interesting that I'd like to try at some point is you can, you can reference a design and it could be interesting because you might create the first one or kind of what you want and you could ask it to maybe help you improve it. You could ask it to. Now that I've created the homepage, can you create me all these subpages and use these parameters for them? And there, there's some definite time saving thing and I think that's the thing. I mean when we ask AI to do kind of original creative stuff, it tends to not do well and it tends to struggle unless you give it extremely specific examples, you know, and understanding and that kind of stuff. But when you ask it to do logical stuff like okay, take this and make it into a logical order and suggest things, it seems to do very well from that side and, and I think that's, that's very important to understand.

COLE 26:49
Well, man, kind of lost my train of thought there, but I was gonna say something super important. Oh, shoot.

VIRGIL 27:05
Well, it's, it's late in the episode, so maybe it's that, that, that time to wrap it up and we'll add yours as a social post later.

COLE 27:15
Yeah, sounds good.

VIRGIL 27:16
Yeah. And that so. Well, thanks guys for joining. Great episode. We got some more things and I think next time after this, we're going to talk about design and kind of bringing it from the design standpoint, which again, should be a very interesting testing process.

COLE 27:35
Thanks everyone for tuning in.

VIRGIL 27:40
Just a reminder, we'll be dropping new episodes every two weeks. If you enjoyed the discussion today, we would appreciate it if you hit the like button and leave us a review or comment below. And to listen to past episodes or be notified when future episodes are released, visit our website at www.discussingstupid.com
and sign up for our e-mail updates. Not only will we share when each new episode drops, but also we'll be including a ton of good content to help you in discussing stupid in your own organization. Of course, you can also follow us on YouTube, Apple Podcasts, Spotify, or SoundCloud, or really any of the other favorite podcast platforms we might use. Thanks again for joining, and we'll see you next time.

‍