How to Design Without Figma ｜ AI Design Crash Course

I have over 50 videos about Figma, and for the last month, I haven't used Figma once. Not because Figma is bad, but because I've found better and more efficient ways to design. And in the next 10 minutes, I'll show you exactly how I'm doing it with different approaches and workflows from start to finish. Real quick, before we begin, check out our website, link in the video description. Right now, I've got about 34 great courses with more on the way on AI and design workflows, design systems, UX, accessibility, career and freelancing, and a whole bunch of other things too. Members also get access to some really great perks and downloads, so be sure to check it out, link in the video description. And right away, the different workflows and methods that you might follow might change depending on what tools that you have access to. We're going to start off here in Claude Code because it has a little bit more of a unique value prop, and then look at some other tools. Now, we're going to run this prompt, and what I did here is I invoked this slash design skill. This here is unique to Claude Code and unique to Anthropic, and we're just going to run this very simple prompt, build me a couple mobile dashboards for a fitness app. Let's run. And then I'm going to run that exact same prompt inside of ChatGPT Codex. It's included in your ChatGPT subscription, but it's another popular AI tool that's out there. Let's run. And inside of Claude Code, because we invoke that design skill, and even if you don't invoke the design skill, this is still going to happen anyway, is what we get is this Claude Design type canvas inside of Claude Code. So that answers a couple of questions here. You really don't need Claude Design anymore because Claude Code can do everything. And at the same time. Here we have this canvas type functionality where we can move things around, we can drag things around, we can make tweaks to things as we see that we need fit, we can change the color, we can change the radius. This is more the canvas type functionality that designers are used to. And the result that we get in Codex, first off, it looks pretty good, but this here is ran locally. This is just an HTML file. So I can't move things around with that canvas type functionality, like what we just saw in Claude Code. It's a little bit less ideal. And if you don't have access... To Claude Code with that canvas type functionality is a tool like Paper can really come in handy. And I'll link this down below. What Paper is, is essentially a design interface for your AI agents. So you can connect the Paper MCP and what your agents will do is actually send the designs to the Paper canvas so you can iterate from there. And to connect your different AI tools, download the Paper desktop app, and you'll see prompts in order to, or instructions on how to connect your agent. So I'm gonna go ahead and choose to add this to Codex. And with Paper connected inside of Codex, whatever AI tool, I'm just gonna run this simple prompt, inside Paper, build me a mobile dashboard for a health application, something like that. Let's run. And what we now have inside of Paper. is those designs that Codex produced, but in that canvas type functionality. So we can come in here, we can change tokens, we can move things around, we can change text, very similar to what we saw that Claude Code had. In that canvas type functionality, it's just in a different application. Moving back to the output that we got with Claude Code, is there's a fundamental difference between designing for mobile and designing for desktop. Regardless of whatever AI tool that you're using, the results that you get for mobile always tend to be a little bit better. Like there's less space for AI to overthink. What I want to go through now is a specific workflow that I like to use. And earlier in the summer, I chatted with a bunch of senior designers at top companies. And what I'm about to show you is a workflow that they use as well when it comes to building a desktop design for the AI to keep AI on track and avoid a lot of sloppy AI designs that happen when you tell AI to build a desktop design right out of the gates. And where that difference is, is instead of focusing on the entire page like we did with mobile, because again, as you saw, we got pretty good results. We're going to focus on widget by widget, ideally starting off with the most important widget that a user might see on the page. So we're going to run this prompt, design four distinct variations of a full width, your fitness score widget for a desktop app. Explore different layouts, visual styles, and ways to present the score and supporting fitness metrics. Let's run. And what we get back are four very different styles and treatments of whatever that. main widget is on a particular dashboard. So we have the segmented ring. I don't like this one. This one feels very AI generated. This one here looks a little bit better. I like this trend story one with the big metric. And then we have your fitness score one. Now. This really comes in handy if we don't know what it is that we're looking for. Because instead of having to burn a bunch of time and a bunch of our valuable AI tokens on generating entire page designs, if we don't even know if we're going to like the treatment that it comes up with, by focusing on the main widget to start, what you can do is then you can then build the rest of the page around the widget that you like and start to tweak these widgets. Until you land on something that you're really happy with before you generate the full entire page. And you can do this inside of any AI tool. You just might not have that canvas type functionality as we looked at. It might just generate these options locally. But let's say I've gone through, I've made some tweaks to option C here. And now I'm ready to proceed for the entire page. We can then have it build a page based on the styling that we settled. See the value in this workflow now? We're not having to spend a ton of time and a ton of tokens generating a bunch of different page designs. We're focusing on the main widget, narrowing down the styling, the look, the feel, the treatments that we like, and then building that page to support it. I want to talk about dealing with AI slop now. If you don't know what AI slop is, it's a term for treatments that are very obviously AI generated and just standard AI treatments that every tool, regardless of platform, produces. And... You can't escape it. You really can't. AI slop is always going to be there and something that's AI generated. Even with some of those good looking mobile versions that we looked at earlier. Like, If you've been in the space for a while, you're able to quickly identify what is an AI-generated treatment and what is not. And I've seen cases where clients don't pay for someone's work because they see AI-generated treatments in there. So you can't escape it. The only way to escape it is if you just design everything by hand. And even if you design everything by hand, someone's still going to say that it's AI-slopped. But there are certain ways that we can try to There's two open source skills. The taste skill and impeccable, I'll link these down below, which help us reduce a lot of AI generated treatments and to look at impeccable just as examples. They kind of operate the same, whereas before you might have this very clearly AI generated cards like this is the definition of AI slop right here with the rounded corners, the border on the left, the difference, you know, the italicized font that's a different color. And when you call impeccable or you call the taste skill, what it will do is it will reduce those AI treatments to restore a lot of the originality and designs that AI tends to drift away from. And now there's a bunch of open source skills like these out here. So the taste skill and impeccable, these are arguably the most popular. And the other way I like to reduce AI slop is using Mobbin's MCP connector to give me access to over 600,000. real world screens. What Mobbin is essentially a massive repository of every app, screen, flow, UI elements that's out there. As I said, it's about 600,000. What we can do is we can connect AI to all of these different screens and have it reference what's here in their library to help inform the treatments that it produces. So as an example, if I really like, let's say, what Airbnb does for their designs, I can connect Mobbin MCP. And have it reference Airbnb's visual style to build something relatively similar. And if you've never used Mobin before, I'll link that in the video description as well. And one thing that's nice too is Mobin has connectors and plugins and all of these popular AI tools, whether using Grok, Claude, Codex, they have a native plugin or a connector. So it's really easy to set up. What we're going to do is we're going to run this prompt. Browse Mobin MCP. We don't need MCP there. Browse Mobin and generate me a mobile app dashboard for a weight loss app that follows Airbnb's treatments. Let's go ahead and run. And while it's generating, you can see what it's doing. So what it did is it pulled up the Airbnb app screens to understand the visual style. But then it also looked up designs inside of Mobin. for weight loss app dashboards to understand the type of information that tends to be displayed and how things tend to be laid out on these particular dashboards so it builds something realistic while still understanding and applying the Airbnb styling on the right hand side here is what it came back with first glance looks great so we can see we have this chart here week's goals our next milestone recipes under specific calories lessons the bottom nav looks pretty good So you can see how valuable this is because leveraging that specific Mobin MCP, we're able to inject AI with particular tastes. And then what you can do is it's very rare to get something, honestly, as good as this first try. It doesn't always happen like that. And what you can then do is when you install either the impeccable or the front end design skill, you can run that skill to then audit the particular design that AI comes up with. To reduce a lot of that AI slops, that's where those two different approaches, using the open source skills, using Mob and MCP, can go hand in hand. There's another open source skill that was just released by the head of design at X and also SpaceX AI. AI and. What this skill allows you to do is come up with better UI stills, animated product shots, and sort of this bento grid style format that you see right here. What we're going to do, we're going to copy this command and then open up our favorite AI tool. And before I installed this skill, what I had Claude do, so we can compare before and after, just come up with this basic. Uh card with a mock UI inside of it. So we just get this we're gonna go ahead We're going to install this skill now, but then we're going to run a prompt So using the stage show skill we installed update this card format as we can compare the before and after here You can now see the before and after And to get this kind of appearance here, both in like the UI visual and also the text treatment, it's not something AI would be able to do just with a prompt or just basic instructions. So you can see with the before, the icon, the way the text on different rows, the way the image is in like the way the image is treated. After, it's just more of a much more elevated look and more premium appearance on something that you might see on like a really high quality SaaS site, just as an example. So when you're building your marketing pages or product demos, using this type of skill can really go a long way. Hey, thanks for watching this one. We have a lot more content coming, so be sure to drop a subscribe. Also too, check out our website, link in the video description for UI Collective Academy. Thank Yeah, I never know where to go with these outros. So if you want to watch a video that I highly recommend, click on the top left. you so If you want to watch another one I also recommend, click on the top right. much for having me.