Why Every New Vibe Coder Needs UI and UX Skills (Copy this workflow)

Hey there, I'm Parker Rex. Welcome back to the channel. Today we're going to be covering one important topic that every vibe coder should be thinking about because you probably haven't spent a lot of time thinking about design and you're wondering why does every single app look the same. So, I'm going to cover that a little later in the video. We're keeping this at 15 minutes. We're 17 seconds in now. So, let's jump into the daily kind of stuff that we do. We go through quick questions and answers so people can get value directly from me. We go into any AI news if it's relevant only if it's relevant because there's a lot of stuff that's just noise and then we go through some of the strategy that I'm doing to grow to $100,000 a month in profit. So, first of all, we had a question. Is Whisper free? Yeah, it is. Learn to use the tools, man. Type it in perplexity. It would save you a lot of time, but yeah, it is free if you're running it locally. Shane asked, "What file icon library you using?" It's called catpine. That's what it's called. If you looked at my cursor, you would see they look nice. And uh yeah, it's Cad Pacheen icons. Enthropic article blew my mind. Yeah, it is crazy. What he's talking about here is something that I'm aspiring to be able to do, which is multi-agentic orchestration. Meaning when you're coding, instead of just having one branch that you're running, you have like four branches. And you're literally it would look something like this where each one of these would represent a different taskmaster or cloud code. In my case, taskmaster because cloud code just lights the cache on fire. Although I think it's relevant to the person orchestrating it. So I'm going to cut myself off there. It's probably a skill issue. Now if you know your codebase really well and you understand what's going on and you're really good at writing PRDs, a lot of ifs there. But if that's you, then you're a candidate for running multi orchestration agentic flows. So that's what I'm trying to get to. Um videos on that on the main channel coming soon where again you'll literally have four branches, four different feature sets all running kind of bananas. That's what they do at Anthropic. That's what this whole article is about. So yeah, shout out to I think it's Dan who said something along those lines. Yeah, Dan. What's up, dude? Came after a few days of backlog. Now, daily Parker Rex. It's Rex X. Okay, sir. It's Rex. Yeah. Uh, we're gonna go through more questions in another video because, well, I guess I could do a couple more. Uh, Nick Save Vid looking good Rex. This is a funny one because I watched a bunch of his stuff and that's why I do the uh like I have this pen thing and so I tried to YouTube about I don't know a jillion different times and the format matters a lot. the packaging, like how do you make it easy for you to make the videos? And I came across his videos. He's in the make.com and automation niche and I loved the format where I'm like, whoa, whoa, whoa. This is it because it makes it easy. It has the pen. So, shout out to him for for the comment. Uh, hi, great video. Just subbed. I have very loaded coding experience. I have built two working apps on PC. I'm now building a mobile app and sourcing out the heavy lifting. First to the gate, first to the finish line. Cool. That's awesome. Would advise you to slow things down. Things on my screen was moving too fast. What's so good for you is there's a little button. It's going to be right over here. I can't show you it because I'm not on your computer, but you can slow it down. And that way, if you can't hang, if you think I go too fast, you can slow it down. If you think I go too slow, you can speed it up. Just so many choices. It's bananas. So, on to some of the news where Okay, I just thought this is crazy. Apple moves their iPhone production to India. That's kind of kind of crazy. Uh I'm not, you know, some armchair global political commentator, bro. But it is kind of a a crazy thing because Elon can say something like this. Elon can be like, "Hey, we're going to launch rockets. I'm going to be on Mars in 18 months." And everyone's like, "Okay, Elon, like sure." But when Tim Cup comes out and says something like this, you know, he's much more polished. He's much more uh, you know, when he says something, it kind of he's got to hold it. So that's crazy. I also didn't know that the labor costs in India are 1/5if of the labor costs in China, which are 1/5if of the labor costs in the US. So yeah, 125th the cost of US labor in India. Kind of crazy. Also, one of the comments on the other video was, I believe, from Dan where he had said something along the lines of like, "Hey, I disagree with this roll thing, just like fine-tuning leads to worse general output. I sense that giving a role just gives the AI the ability to hallucinate some stuff." He's basically like, "I don't believe you, and you don't have to believe me. Just stop believing all the docs from like Anthropic and OpenAI and Google cuz that's where I get it. like I'm not just making it up. I go and I find this and um this might not even be the right doc, but there's a bunch of Arvix papers as well that kind of go into this. So maybe they're outdated, maybe I'm wrong, but I just follow the best practices from the model companies themselves because they know better than I. So that's on the roll stuff. It's like why would you give it a roll? Well, when using cloud, you can dramatically improve its performance by using the system parameter to give it a roll. And then if you read beyond just the system one below it, it actually in the user examples, it has it there as well. Why would you do roll prompting, enhance accuracy, tailored tone, improve focus? So I want all those things, don't you? Up next, Google may be forced to sell Chrome. That's kind of crazy. If Yahoo buys it, goodbye, internet. It's just going to be brutal. And then Veo 2 got unveiled when I opened Gemini this morning. They're starting to promote it in there. If you're unfamiliar with Veo, it is Google's video model and it is, I believe, like 11 cents per image. Kind of crazy. I think it's 3 cents per image on three, but free if you just open up Vertex. And Vertex is the goat. If you're not familiar, you need to get familiar. So, I can go into vertex and I can click pass key. And you guys can totally not dox me because pass keys are great. I'll go into the media studio if I want to look at previous stuff. If I wanted to make something new, then let's see. Yeah, I go into media studio and then I can click on video and video will pull up Veo 2. So, I can just type in some stuff and say, yo, I want this video. I can have an output directory which is my Google Cloud bucket. I can also train things on video in there. So, AI video coming to you soon where it's going to be a clone of Parker. So, when he goes to the Keys for a wedding, he doesn't have to do nine videos before he goes, which was like kind of ridiculous. But yeah, so let's get into the beef of the video. I'm gonna put this setting up gems into a different video. I want to talk about the UX and the UI stuff and then I want to talk about kind of just a reminder that I had of being with a bunch of people who don't work on AI stuff this weekend. So, let's talk about this one. And I'll put this meme below so I just remember to hit some of the points. So, the UI verse UX and then we'll do tool comp. Cool. So, when to use what tool? So, this is just a reminder, a PSA, if you will, that 99% of the Earth hasn't woken up to what's going on in AI. What do I mean by that? I was with probably a 100 people this weekend. And when I'm having fun and I'm out at a wedding, I talk about the stuff that I'm interested in, just like you. And what I'm interested in is AI. This isn't a job for me. like this is what I spend my full time on. To be very abundantly clear, I don't have a nineto-5. I don't have other stuff. I do client work. I do my community and I build SAS products. So, if you're going to learn from someone, I'm very qualified. But what I mean by this is like I like talking about this stuff. So, when I'm out, this is what I talk about. And when we get on to the topic, it is alarming to me. It's actually really good. It's a litness test for like how far along we are in this tech wave cuz no one knows what's going on. It is crazy. So to you, the listener, you're watching this video, you're already ahead. That's awesome. To everyone that's in our community that was just dumping just value bombs on the Discord over the weekend. That was awesome, too, because the community is starting to pick up. And it was as the creator of it really awesome to see that like I didn't have to be there to like see the platform for every single message. People are just sharing so much awesome information. And I'm just like so happy that we're all in this position that we could be like ahead on something really helpful. And then also not only just for making money like you money is just an exchange of value. So you're going to make money by helping people with AI. But like it's just we're blessed. That's what I'm trying to get across because when I talk to people and they think that like Siri is the peak of AI, I'm like like bombs are going off in my brain cuz I'm like, "Oh my gosh, they know nothing." It's crazy. And even when I'm like communicating with people and I can tell when they're using AI to chat, I'm just like, "Oh gosh." Like you see like the double dash or the M dash, you see the word delve being used. Um it's just kind of crazy. It's a reminder that no one knows what's going on. There's also lots of people that are really good at business that make way more money than all of us combined that have yachts that have private islands and they have no idea what's going on and then they get sold on maybe a software solution that is from yester year but they just don't know. So, I just wanted to call that out because like it's so so important that we stay dialed in that we realize we're, you know, 6 months behind the people that are like leading in this. Like if you look at like the biggest brands, the biggest uh creators in this space, if you're thinking about making content, like that's rare. Like if you try to break through in a different niche right now, if you're trying to break through in like fitness, there's a lot more people that are talking about it and it's of course very important, but like not going to be as high impact on the global economy and the way that the world is shaped than learning how to leverage AI across media, coding, business, all the things. So just wanted to call that out. Now on to UI versus UX. I get this question a lot. This is what the title of the video is going to be is things that vibe coders need to know. new developers. Really, that's like when I hear Vibe Code, I hear just new dev. Vibe Code was obviously the trend that like popped this thing off that got people to open the door to what's possible, but it's really just new developers. So, let's look at where Vibe Coding is at as a phrase compared to Yeah. So, it's popping, right? And then if we just crank it down to like let's do maybe like the last 90 days and let's see Vibe Marketing. I know it's kind of making a pull. Yeah, that had a little pop. Let's remove this. Let's see it. Vibe marketing just a new shift in the way that we market, right? It's marketing orchestration. It's the stuff that I talk about on this channel with like GCP and the ability to personalize your AI at scale, not just have like slop, but a lot of people don't realize that there are just ways of building product. I've done this for pretty much my entire life. I'm 32 years old and I started designing when I was 14 for a game called Counter Strike. Now, you're probably like, "Oh, I know what Counterstrike is." But we're talking about like CS 1.6. And in CS 1.6, this applies to Ui UIUX because you'd have I was a modder. And so UI would be in our mod, it would be like the look of like what the actual mod looked like. So in our case, we played this game called hideand seek. and you jump on these little blocks and you jump from block to block and it was just a cool little mod. But the UI in this case was like how does the actual block like look like is it green? Is it blue? But the UX is actually the more important thing. It's like how does the block operate? Why are there blocks to begin with? What is the name of the mod? All these fundamental things that's UX. And I think a lot of people are getting confused about the two. So UX, it stands for user experience, right? And it's the emotion, it's the feeling, it's the value, it's it's the thing that the person originally came to the product to to solve. It's like the in the case of Twitter, you had their aha moment. the UX they were trying to get their users to was 13 follows because they knew if they got the person to 13 follows of other people's content that they get that aha moment they come back they had a good user experience now the UI would be the look right so this would be more the emotion and you're like why are we talking about emotions well they operate the whole world you are an emotional human being this is the the kind of the core for use case. Whereas UI is the look, it's the colors, it's the shadows, it's all these things. And so you need to combine these two, right? And so there's a common meme that I Googled earlier, but let's just do UI verse UX meme path. And this one really explained it for I used to give talks about this stuff. So I definitely am qualified to talk about it. But like this is a perfect example of UX versus UI. So forget the word design. This is just UI UX, right? It's oh I don't want to walk around this corner and you see this cattle path that's been created by people just walking the faster path. Now you could think of well is it you know Pythagorean theorem says that it's going to be the same or whatever. No, this is just the way that people go because it's easier because they want to cut the corner, get to the thing. There's a common thing uh saying in the design of everyday things which is a book that everyone should read and you're like why I came here for AI stuff. Why is he talking about this? Well, because you're trying to get better at every single step in the product development path and design is going to be at the ultimate premium as everything starts to look the same because we have these libraries that everything is built upon, right? So, everyone's like, "Oo, Shadienne, the guy's the goat. He made awesome primitives which are the building blocks for building stuff and he shared them with the world. Nex.js ultimately bought him. He now works there and a lot of stuff is going to start looking more and more like this so that every time a new Shad CN version comes out everyone's stuff looks like Shad Cenne or you have a different flavor of Shad Cienne where if you go to fay.com this is really cool design you can see okay they used framer to pull open the thing if you hit the button T now you've open this they've got these fades going on but I can look at this site and as I'm scrolling I can see and kind of recognize what are the things that they're using. You can also use something called Wapalizer. So Wapalizer is a really good free plugin that'll show you what are they using. So it looks like they have styled components. They're using Nex 15.2. They use Plaid for their payment processors. You can start seeing under the hood and you can start to understand what's going on. So those are the differences between the two. Now I just quickly want to touch on how you should approach this in your code. So I always say that just get better at the skills required, right? So that way when you use AI you can get much more leverage on it. So when you're doing any sort of new idea right you start in the problem space and I have a whole course on this. Yeah, course bro. I have a whole uh course inside of I5 with AI, which is our school community. But I basically go into extreme depth on starting in the problem space because as a product manager, your role is to connect designers and developers. And this is why everyone loved jobs so much. Steve Jobs was able to get both designers and developers to row in the same cadence. And I talk about this in here. It's the product strategy path. There's like 23 videos that goes into depth on it, but I'll give you the TLDDR if you don't want to pay for anything. Is you start in the problem space. And so this is where you're thinking up like why are we doing this? You're figuring out like what is it that we're building and then you're figuring out the how. The how actually comes last. This is the technical part and this is what everyone thinks of when they hear the word like PRD. They just think it's this like magical key. But if you're spending an hour working on something new, I always say this, but like at least spend half the time just using your own brain, use some research. So this would be like the first step. And then you're like, okay, cool. Like what what do I do next? Well, then you need to actually do some wireframing. And people are going to hear that and be like, what's that? I don't even do wireframing. I do a different flavor of it. It's called breadboarding. So breadboarding is a mechanical engineering term for laying out where the things on the circuit board go. So you can use these interchangeably. Wireframing is the one that you hear a lot more. Breadboarding is what I do where let's say I'm building ivibewithai.com to replace school which will be coming soon. I'm doing half off right now for iviwithai because it is on school. It's much less featurerich but the content's all there but it's half off until we launch the new version in May. But let's say I'm building out I vibe with AI. And what I do to breadboard this is I just write the name of the route. I'd write the name of the page, right? So I vibe with ai.com and I'd underline it. This is going to dictate the name of the route and then I'm going to write out the actions that you can do on the page. So I'm going to have oh well you can see prompts. That's one job to be done which is the Chris Christensen book I think it's called. jobs to be done. JBD, but yeah, you can see prompts. You can copy prompts. I need some sort of CTA about call to action about the community. So, I'd go and I'd write all these things out and I'd hopefully spell everything right. And then each time that there is something that is a button, then you do an arrow to the next affordance. This is an affordance, meaning it affords you the capability to do something else. So, the affordance here is okay. Well, the CTA is then going to take them to likely uh sign up page. So, we'd have under sign up. Sign up needs CC. So, that's Stripe. Probably have a freebie on there, like some piece of content to get folks more uh aware of the level of content that's in there. Probably have a member directory because a big part of it is like you're hanging out with smart people, so you want to know who's in it. And then that member directory would probably take you to for/members. And I'm just putting the slashes here so you guys get that they are routes. And then the members would have the profiles. Yeah. So you'd go through this, right? You've come up with the why, the what, the how. This is going to be narrowing down the problem, coming up with the solution, constraining it to time internally. You don't tell an AI time, by the way. Big no. Because it's just a rabbit hole. you personally set a time and that constrains the solution. So you have the problem, the time constraint, the solution. When you're going through the solution, you're actually figuring it out next, which is this breadboarding thing. And then finally, you'd go and in my case, what I typically do is I jump straight into cursor. And if I'm jumping straight into cursor, that will be like basically have a split in the road where after you've done this, is this going to be something complex or is this easy? I just split the two. If it's easy, I go straight into cursor and I start ripping. That's when I'm using Taskmaster. That's when I'm writing the PRDs and shaping them up even more. If it's complex, then I'm actually going into Figma. Figma. That's the design tool, right? That's where I'm going to be bringing in all the different assets. You guys can check out these resources in the school. But I basically have like, let's see, let me open 29 tabs and see if my computer doesn't break. If I did this and then I pasted in the name of the site, it's going to go and it's actually going to rip all the CSS. And then I can take that CSS, clean it up in a pertifier, drop it into any LLM, be like, "Yo, turn this into Tailwind." And then I can get all the styles from it. So it's a mixture of like finding the inspiration and then jumping into Figma and circling the stuff on Figma where it's like, "Oo, I really like the way that they did this header or this uh navbar." And then I'd yank the navbar code and then I'd remix it because you don't want to copy people straight up, right? Like you you basically like everyone's just remixing their idea versus someone else. You see this the same thing in music where it's like, oh, when someone's getting their feet wet in music production, they go and they rip a bunch of Avichi songs and they lay them out on the board and they see like, oh, 16 bars, 16 bars, 32 bars, all that. You're doing the same thing here. You jump into the mobile view. So you'd right click, you'd click here. Now you're in mobile. But yeah, that's ultimately like the rough flow where okay, cool. If it's going to be complex, I go into Figma. I want to get way more detailed on the different things and then I'm back into cursor and then I'm using Taskmaster over and over and over again. The goated stack for me is I'm using Taskmaster and I'm using augment. Like I said earlier in the video, I'm trying to get to the point where I can have like a bunch of these just ripping. And I'm not there yet, but probably later this week. And that only would be possible if I had all this stuff figured out and dialed in because the more knowledgeable you are on any given topic, the more leverage you're going to get out of the AI. If this was helpful at all, make sure you like the video. You can drop a comment, write down uh breadboard below and I'll reply within a day with an article on breadboarding. I think it's like in my opinion it's the best way to kind of flush out ideas even further. And then again, if you want to join the community, it's half off right now. It's 50 bucks a month. Everyone's saying how they got their value in the first five minutes, which is like the sickest thing ever. But yeah, it's going to be 100 bucks a month when we launch in May with the new site. The new site's going to have all the AI stuff that I want inside of a community which is like cool take all the content that Parker Yaffs about train on it so that we can have GPTs train on certain areas. You can have personalized paths for people. I think that similar to how I spoke about a lot of people are behind on knowing what's going on with AI. I think frankly a lot of the educational tools out there just aren't AI first. They weren't born in the darkness. They weren't born in the AI era. So, I'm boring one. I'm I'm I'm giving birth to a new one. Oh god, that's rough. All right, like the video, subscribe to the channel, and I'll see you tomorrow. Peace.