Use AI Like a Senior Designer (3 Workflows)

0:00I spoke with senior designers at Meta, Google, and other top companies, and the way in which they're using AI in their design processes actually very different than what designers are used to. So, today we're going to break down some of these workflows and how you can apply them to your own design work. Let's dive in. And before we begin, check out our website, link in the video description, where I'm teaching AI workflows, design topics, and a whole lot more. And come

0:18follow me on X, link also down below. The first concept that I want to cover is the idea of building the pieces before you actually build the page. One thing we might want to start moving away from as designers is this traditional approach here, which is we start off our AI design generation process by actually building out an entire page. Whether we're working with Claude design or another tool, "Hey, build me a dashboard for this startup. Build me a landing page for this fintech company." And then when we don't like the result, we regenerated a couple times till we land on a concept that's semi-decent. And

0:53then we spend hours and hundreds of thousands of tokens prompting to refine until we get the look that we're ultimately going for. We want to start moving away from this here. And instead, what we want to start transitioning to, and I'm going to demo this, so bear with me, is this approach. And this is a common theme across a lot of like the big senior designers who I'm chatting with. Where what they're doing is they're not starting off with page generation. They're starting off with widget generation. And whatever that most important widget is on the page, that's where they start. And they produce dozens and dozens of different

1:29layouts and designs based off that widget before they even think about the rest of the page. And then once they've settled on the widget that has the right look and feel, the right layouts, communicates what they want to communicate to the user, that's when they start building out the rest of the design around it and prompt to refine. Whereas before we were starting off with an entire page, now we're starting off with one widget. And I'm going to demo this as a workflow very shortly, but just in case you're not too sure what I'm talking about, in the past what we might do, and again, I just took the

1:58screenshot from Mobbin, link to Mobbin is down below, is try to build this entire page in one prompt. But what these designers who I've chatted with are doing is they're starting off with the most important widget on the page. So, once they've settled on the layout, the design, the styling for this widget, they're then working backwards and thinking, "Okay, what should go above this widget? What should go below this widget?" And then applying the look and feel of this widget, sorry I'm saying widget a bunch, uh to everything else that's actually on the page. And to demo this then, we'll go over some next steps and look over

2:30the options in just a second, but I ran this prompt inside of Claude Design. You can use whatever AI tool that you want to use, Grok, Claude Code, Codex, doesn't really matter. So, we ran this. I'm designing a banking dashboard where net worth is the primary widget. Create eight distinctively different versions of this widget exploring different layouts, chart styles, functionality, controls, insights, and ways of visualizing growth over time. Do not design the full dashboard, focus only on the full width net worth widget. Each concept should have a clearly different format, visual approach, and color scheme alternating clean, modern, light mode, and not overly busy. And to look at the results

3:03now, you can see that the options and variations are all a little bit different. So, different formats of data, different ways of grouping data, different ways of presenting data. And if you think about it here, if I had asked, and this is the whole value of this workflow, if I had asked Claude Design to build me a dashboard, it might

3:23have given me this. But personally, this option here I really like. I think it's clean. I think there's a lot of good options for interactions, potential for interactions. I like this uh alert summarizing what's going on in plain language at the bottom. Can you imagine the amount of prompting that you would have to do to go from this that it might have given

3:44you originally to something like this? And you're probably thinking, "What's that next step after you've identified the widget that you really like?" And one of the designers who I had chatted with says, he doesn't just keep prompting inside claw design for the next widget. What he does is he takes a screenshot of whatever widget he identified that he likes the most. So, in this case, let's choose with this option right here. He then brings that screenshot into Figma, has Figma agents recreate it. So, now he has an editable Figma widget that he can customize as much as he wants to, apply his own design system, make tweaks, and now he

4:19has a really good starting point for whatever page he's designing. So, then he just fills in gaps with the rest. He doesn't go back to whatever AI tool that he's using. This is where he does some of that critical thinking, where he thinks, "Okay, if we have our net worth as our main widget, what might come up above it? Do we just want a basic greeting? Are there other metrics that would go along the top here? What would go beneath the card?" So, he does that critical thinking part. He doesn't rely on AI to build the rest of the dashboard for him. Because when you're working in

4:48these big corporate enterprise settings, if you're relying AI to do the thinking for you, you're not going to make it very far. And then once he has this initial idea as to how the rest of the page should be structured, then he repeats that process as much as he feels that he needs to. He doesn't do it for every widget, because not every widget on the page is going to need that level of iteration. Only where he's stuck on different treatments, where he's not too sure what the art of the possible is in certain places of that page. The next concept I want to cover is experiencing

5:18a UI through a persona's particular lens, and using AI to do that. Now, the idea of AI being able to navigate prototypes is something I've covered in the past. It's not something that's that new. But with one of the designers that I spoke to, I didn't realize how prevalent that was in their day-to-day work, and also the method in which they're like initiating some of these AI reviews. And we're going to look at that. And before we move into the AI review process, is we're going to need what one of those designers called me is like a flow home base, where you have all the different flows

5:56on some starting page like this, where an AI can click through the one particular flow, then when it's done, move to the next flow, and then to the next flow to compare and contrast between flows. And he told me specifically that sometimes what he sees happen is AI goes through one flow, it moves to the next flow, and then it realizes it needs to clarify something so that it exits that flow, and then moves back to the first flow in order to make sure that it captured what it needed to. So, that's the

6:25benefit of some sort of page like this. I spun this up in Claude design, but you can use any AI tool that you want to. It's basically a home page for all the flows that you're going to want to test. The next step here is then to test both those flows using AI. The person who I chatted to, they do this inside of Claude code, but I'm using Google antigravity. What Google antigravity is is essentially Google's version of Claude code. Why am I using it? Because it's really good at navigating the web. You can watch it do it in real time. It's quite a cool experience. Anyways,

6:54so I just opened up Google antigravity, and I'll put a link to that in the video description. If you know how to work with Claude code, you'll know how to work with Google antigravity. It's the same thing. Um and what I had it do what I did is I opened up that file that we had exported from Claude design, and I opened it up here, had it run the

7:09experience locally. What I then did is I then invoked the browser and pasted a link to that specific URL. We're going to run this prompt. Browse both flows. Let me move my video bar out of the way. Sorry. Browse both flows from the perspective of this persona on the URL above. The persona is a senior financial advisor managing a large book of high net worth clients, highly experienced with wealth platforms, time constrained, and focused on quickly finding great information, identifying risks, and has no incentive on switching tools. So, what I'm doing here is I'm defining the viewpoint that the AI should browse both those flows based on. And then we're

7:44giving it instructions. Review each flow independently before comparing them at every step. Explain what you believe is happening, what you expect to happen next, where you hesitate, what feels unclear, and your confidence on one to five. Ignore visual aesthetics unless they directly affect usability. Once complete, compare both flows and recommend which better supports the persona's goal citing specific moments

8:03from the experience. In the interest of time, we're keeping the prompts a little bit more brief, but depending on the details that you have on your persona, you can really make this prompt much, much longer and much, much more detailed. So, what we're going to do, we're going to go ahead and run this. Because the agent going through it happens so quickly, I wasn't able to get a recording of it. But, if you go through this process, you'll be able to see what I mean, how it opens up Chrome, again ideally, and goes through like the UI. You'll be able to watch it do its tasks. But, what we got back is

8:32the core recommendation summary here. So, it's recommending flow B and gave some reasons why. And then we have this more in-depth UX evaluation analysis where it sort of talks about flow A, all the steps, what's happening in that step, what it expected next, where the persona might hesitate. So, it did that for all the steps in flow A and then also for flow B as well. Some pushback that you might be thinking with this is, "Oh, why don't

8:55you just ask users instead?" You don't always have instant access to users, especially if your design practice isn't super mature or you have access to users, but by the time you need to make a decision on a flow, you don't have time to go through source those users, interview those users, come up with a synthesis based on the data that you like identify. So, design isn't so linear. Yes, in an ideal world we would like to ask users, but we don't always have that luxury. Also, too, in the real world design setting, sometimes an executive just wants you to experiment

9:29with a flow that you know won't work. So, you don't even want to put it in front of users. But, by running one of these AI tests, you're able to get some of the data and be able to share that with the executive around what someone in that persona might actually be thinking. Now, also, too, this is really just about identifying blind spots, opening up your thinking. I don't think you should ever take an AI suggestion and take it wholeheartedly. You should always double-check everything that it says. If you have access to users, you can use like what AI gives you as sort of this initial foundation to sort of

10:00tweak some of your designs based on the initial output and then share it with users. So, I want to like really emphasize that, that you should never just take an AI suggestion and take it 100% as the full truth. The last concept that I want to talk about here is supporting in developer handoff. I had been using AI to do this in my design my design process in the past. So, chatting with some of those designers is great to get that level of validation. Now, they're not using it for every element in developer handoff. There's one specific one that they're really using it for, which was reading order over something

10:31like tab order and other items. So, we're going to use reading order as an example. There's a lot that can go into developer handoff. I'll link a video to a developer handoff video down below where I cover some of these concepts if you're not sure. Now, the assumption that designers make is that the reading order is the logical order, and that's just not always the case. So, when designers are marking off reading order, they generally go left to right and then down because that's what makes sense in their mind and that's what ultimately they're generally trained to do. But, that is not always the case. So, bringing AI into this

11:01equation can really help get out some of those errors before you actually ship off the reading order to your development team. We're going to start out here in Figma. Now, this design I just generated it from Cloud Design. I had Figma agents let's recreate it. And because it's not crazy complex, the reading order might be a little bit more

11:21obvious. Um but, again, this is for the purposes of this exercise. So, what I want to do is I'm going to take a copy of link uh to this design inside of Figma. And then with within whatever AI tool you have access to, run this basic prompt. So, identify the reading order based on this design. Make sure you have Figma MCP connected. If you don't have Figma MCP or your company hasn't enabled Figma MCP, a screenshot also just works. All right, something I want to call out. So, identify the reading order based on this design, enter in the link to that Figma page, let's run. What AI did then is

11:54then provided this document. If it didn't provide you the document, ask for the document on the sequence of the reading order. So, it separated things out so we can see the navbar, the reading order associated with it, the hero, the summary card. And when you have cards with a lot of different elements, that's where reading order can actually start to drift and

12:11start to change. So, we have the reading order for here, the reading order for the for band four, which is the purchasing goals. You can see it's all numbered accordingly. And then for asset allocation as well. It looks like it flagged some things here. So, let's go ahead. What I'm going to do is I'm going to take a screenshot of like some of these, and then we're going to bring that into Figma. And to mark things off like reading order, this is something that I use. I don't know what

12:35anyone else. I didn't chat with the designers I spoke to about this, but it's it's a great resource. It's the web accessibility annotation kit by CVS Health. It's on the Figma community. What this does, it has a lot of annotations here that you can see where it's easy to mark off what the reading order is as an example so

12:51developers are pretty easy to follow. So, we're going to go ahead and install this or open this up and then publish it as a design system so we can pull in some of those elements. What you would want to do then is take the annotations from the web accessibility annotation kit. So, you can see here is the reading order stamp. And based off the number that AI gave us, you can see here purchasing goals is number 27. We have add a goal. This would be number 28. So, we can come in here, mark this off as number 28. Oops, sorry. I should just be positioned

13:19right there we go. Mark this off as number 28. And then we can apply send this to our developers. One thing that's important to note is I lost a good dialogue with this around the designers that we spoke to is never ever ever just take the output that AI gives you, have AI add all the annotations, and then send it off to your developers. That's

13:38where mistakes can happen. We still do want to do this part manually, but AI can help us with what that initial order might look like, especially when it comes to more complex widgets, more complex components. Um but yeah, that is another way in which these designers are using AI in their design process. Hey, thanks for watching this one. Going to have a lot

13:57more content coming on working with AI. I have some really long videos on some great on some great topics in the pipeline, so be sure to subscribe for that. Also too, be sure to check out our website, link in the video description, for UI Collective Academy, where I'm teaching AI workflows and a whole lot

14:10more. If you want to watch a video where I build an entire design system, click in the top left. You want to watch another video that I highly recommend, click in the top right. See you soon.