Pencil AI - Solves the 'Vibe Designed' Layouts Problem

All right everybody, it's another day and another tool for the AI era of designers and builders and that is called Pencil. pencil. dev is the URL. It is 100% free. You can install it on your computer and this here is what it looks like. Now there's some cool things about this. We're seeing tools that are like this where it's AI infused via MCP where you can control it with claw code and you know cursor and all the other ones and it's birectional. Um, now there's some cool features about this like the kits features. So there's uh design components integrated already, but also style guides. So this will kind of direct and guide the flow of the UI and the aesthetics, the topography, the colors. I just, you know, how things are integrated. And so I'm going to show you how to exactly to use this. And then also there's a challenge as a part of my AI native designer series which is 100% free at designcourse. com. And there's going to be a pencil challenge. So stick around for at the end to see how to participate. So after you install it, one of the first things you want to do is make sure you go to agents and MCP. You can see I have Enthropic Claude code connected already. Um go ahead and just look at the documentation to see how to connect it to whatever you're using, whether that's codeex, Gemini, etc. And figure out how to get that uh integrated. Now you can just like the other tools you could start by designing manually you know from scratch or there's also right down here an area where you can design with cloud code here and you could just ask it to create different tables and dashboards or you know whatever your UI is. Um you can also do that initiate it from you know like cloud code itself like the terminal or the desktop app. So, what we're going to do though, um, is we're going to come here to the kit section, and we're going to go to the style guides, which is all these down here. Now, a lot of them look similar, like when you come past them, like maybe it's a part of the same style guide or something, but you just need to find something that kind of just it it matches the style that you're you want to go for essentially. So, I'm gonna choose this one right here. Now, all this does though is it just opens up a document and it just says right down here, use style guide with the name web2 editorial warm light. That's the only thing clicking on that thing that does. So, it just communicates with its own internal AI system and says, "Hey, use this style guide for what we're about to generate here. " And underneath it, all I specified is the following prompt. Create a desktop layout that includes the hero section and a small testimonial section for a fictional business that allows AI agents to hire humans. Uh include a fictional logo, navbar, and a hero section in the testimonial section. So, let's go ahead and send that over and we'll see what it ends up doing. Now, what's really cool is you get to see, you know, as this little fictional agent here is designing in real time. One things that can kind of throw you off when it's building is at pencil. dev, dev it the app itself adds this blue kind of aura animated overlay and it almost makes it look like it's a part of the design but it's not because you'll see once it's done uh that overlay will go away. I'm not sure if I really like that pattern because it kind of influences what you think it's going to be outputting but really it ends up looking a bit different. Okay, so this is what it produced. And what's cool is, yeah, this doesn't look like it was like, you know, a typical vibe design sort of cookie cutter layout. But having said that, there are issues. Uh the biggest issue I would say, um, and there's two issues that are very close in terms of being uh issues in my opinion, is like this over here for the hero section, human resources for machines. I mean, it's just uninspiring. I would expect maybe like an illustration or something like that or something that's animated SVG or something. something like that of some sort. So, you would want to fix this. And then also, it's very card heavy. And I would say even more importantly than that, we have bad color contrast right here. This blue against this kind of like dark gray beigeish sort of color is isn't really good contrast. And you know, that's one of the things that you're going to, at least right now, at this point in time in history of AI development, you're going to have to still have that eye for design and be able to fix things that the AI produces. Now, I don't even know if this thing is capable of doing what I'm about to request, but I'm going to go ahead and ask it to generate an illustration that fits with this concept. So, generate an SVG illustration that fits the concept of this app inside of the selected right column in the hero section. Okay, so it actually is creating an SVG graphic here. That's very cool. Okay, so this is what it came up with. There are definitely some issues right here. It added the mesh the damn mesh gradient back. Kind of annoying that it did that. Um, and I'm just not trying to play with around with all those colors

that's for sure. So, this is already a big improvement just by doing that. Um, of course, you'd want to fix all this stuff, which I'll do real quick. I'm happy with that. Making it, you know, a lot more simplistic than what it was. and I cleaned up some areas. For now, that's fine just to kind of demonstrate what I wanted there. It's definitely an improvement for what it wanted. Now, there this is very card heavy. So, the next thing I'm going to do is just make some quick adjustments to reduce the amount of cards and also reduce some of the color issues as well. Okay. So, I am happy with this. We made a number of different changes. Not everything's perfect, but yeah, we definitely simplified it from what it was. Cards all over the place. Now, let's say you're happy with this and you want to go ahead and port it over to code. How exactly do you do that? So, here I am in my terminal. I'm going to use cloud code CLI. I'm going to go cdcode. I'm going to make a directory for this new project called higher flesh and then cd into type in cloud as I have it installed already. You're going to need the cloud CLI if you're following along. and I trust this folder and now it's just an empty folder. Now you have to make sure that you've installed the MCP server for pencil. dev/mppc. We'll see I have P pencil right there connected. Okay. So now all I have to say is uh use the pencil MCP server to take the selected design. So we have to make sure before we send this prompt that we actually have that the entire layout selected as the frame um and convert it to HTML CSS JavaScript uh keeping everything intact with uh perfect translation uh vanilla HTML CSSJS is fine. Okay, I think that's fine. We'll give it a shot and see what it actually does. All right. Here's the big reveal. It's loading up. Oh, wow. Okay. Well, it decided to add borders around there. That's interesting. But everything else looks to be pretty accurate. Um, that's not bad at all. Not sure why it added that black border around there, but nonetheless, as you can see, it is working. Okay. So, I sent a couple follow-up prompts. Look at this. I asked it to animate these in like a cir circular path. It's a little bit too fast. Um, I also had it remove, you know, the black outline that it added for some reason. And this is actually, it doesn't look like it's been, you know, like a vibe design layout. And that's because of the style guides, which, you know, I think the future of templates, by the way, is going to be AI infused templates that models can use. That's going to be a huge market. Anyhow, so now I'm going to show you what your challenge is. Make sure to go to designcourse. com in the link right here and go to the AI native design challenge series and you can create a free account right there to participate and you could take all these different challenges right here. And for this challenge, download the Figma asset. So you can see the actual, you know, challenge requirements. And that looks like if I go over here, right here. So this is going to be the pencil challenge number six. and basically create an account at pencil. dev. It's free. Choose a pencil style guide of your choice. So the goal here for this challenge is to use a style guide to create something unique and something that doesn't look like it's vibe designed. Um have Pencil generate a UI with that style guide and make any necessary manual adjustments to fix it afterwards. So this is going to test your ability to see is there objectionally bad spots that you should fix. A lot of you without that design eye and the experience and the design sense are going to have a hard time with this, which is the purpose of the challenge because then I can go ahead and review what you did right or wrong. Um, and so yeah, the topic and the purpose of the UI is entirely up to you. So this is a very open-ended challenge. The goal is to create a UI that is unique and not vibe design looking but also executed well. And this shows you exactly how to submit your entry. Um, and yeah, and you'll see what everybody else uh entered as well. And it should be cool to see, you know, how good we can make these UIs that are, you know, AI natively designed but also augmented with our eyes. So, I hope you all check that out. Really cool tools coming out. Um, I have a course coming out within about a week or two and it's going to be super sick. Make sure to subscribe up here. I will see you all very soon and goodbye.