6 Insane Trending GitHub AI Design Repos You Need to Use

0:00We can keep switching models and still end up with sites that look AI generated. The model is really important, but what's more important are the tools that we give it to work. These six GitHub repos give our agents more help with design, and we've tried them to see what they actually change. One of them goes beyond just giving our agent design rules and changes how it handles the whole build, and another one takes what we've built and helps us show people why they'd actually want to use it. If this is your first time here, we're a software company, and this is our channel AI Labs. And in this video,

0:30we'll go through each of these repos and the results we got. If we just [snorts] leave the design to our agent, we can end up with the same styles we've seen across other AI built sites. That's why we really need to give it the right references and inspiration. Our first repo, the Awards MCP, lets us choose real sites for it to study before the build. Awards is basically a site that gives awards for web design, so we can look through its picks for a style that fits our project. We can set up the MCP so that our agent can start using its tools. Then we just describe the kind of

1:01site we want, and the agent searches Awards for examples. It gets screenshots with links to the sites. This means we can choose a look based on the pages themselves. The repo also has a skill, which is basically a set of steps for studying the sites before the build. Once we've picked a site, our agent can read the design details listed on its Awards page. With the browser tools set up, our agent can take a screenshot of the whole page and actually record how it moves. Then, we can just ask our agent to build our page using the parts we like from those sites. Also, we can

1:31use the repos in this video with any AI agent that supports their tools. But in this video, we're using Klein, which is sponsoring this video. Klein is available in multiple forms. It's available as a desktop app and as a VS Code extension, but we're going to be using the Klein CLI, which runs in the terminal just like Claude Code. Now, there was another thing that we found while using the Awards MCP, which was that we couldn't use a single site for inspiration, and we'll talk more on that after a little while. To start, we're going to use the Awards setup command, which asks us to choose our settings or

2:03use the defaults. Don't use the defaults here because a lot of the tools we just talked about aren't enabled by default. You need to choose these specific options. And if you want, you can pause the screen to get them. We'd already asked our agent to build a demo landing page for a site that sells agent skills, and this is the first result without the Awards MCP. It doesn't look bad, but a lot of the animations and visual effects we wanted are actually missing. So, we use the Awards inspiration command, which asks us some questions before giving us this list of sites for software products. We went through them

2:34one by one, but we didn't really like anything from the first list, so we asked for another one. This time, it gave us some really good options. We told our agent which parts we liked from the sites we picked. We used the Whisper flow landing page for how it used the product itself on the page, and for the animation inspiration, we gave it the butter.video site. And this is the site we get at the end with animations that look way better than they did in the first version. You might have noticed that we weren't using Claude or OpenAI models. That's because we were using Client Pass, which basically gives us

3:04access to a lot of the OpenWeight models. And these models have gotten really good at design and offer good value for money. And using the link in our description, you'll be able to get Client Pass at a discounted price for the first month. So, our second repo helps with something AI agents can miss. We can spend a lot of time making our site look great on a laptop, only to find that it doesn't actually look right on a phone or a tablet. Responsively is basically a Mac app that fixes that problem for your AI agents. We can just open our site's link in the app and

3:34choose the screen sizes we want to see next to each other. So, this is what the app looks like. We have our landing page open in three separate views, and we can scroll through them to check how the page looks at each size. But, won't adding another app just to check how our site looks on different screens slow us down? Not really, because we can connect Responsively's MCP server to our agent, so it can check the page and fix what doesn't fit after the build. The app

3:58sends back a screenshot of each view. This means our agent can look for the parts that don't fit. It can also open a menu to check how the page looks with that menu open. Once our agent has made a fix in the site, it can take new screenshots to check that fix at each size. Before we move on to our next repo, it would be great if you subscribe

4:16to the channel and hit the hype button. This small gesture of support really goes a long way for us. After [snorts] a while, even a new models designs start to look like AI slop. That's why we use skills, which basically give our agent a human's design taste to follow. We've already covered the taste skill and hallmark on this channel, and Genjutsu is another one we found. Genjutsu has three skills, and we can use the first one, cast, to change just one part of

4:41the page with the skills design taste. Paint is basically for planning and building a whole page. The Bunshin skill, on the other hand, is actually a full agent system packed into just one skill. Bunshin has our agent give each page to a separate sub agent, which is basically a helper agent. This means several pages can be built at the same time. Our main agent leads the team and sets a shared style, so those pages

5:03still look like parts of the same site. Other agents then check the results and send the problems back for fixes. Those rounds stop when only small issues are left or when they hit the limit we set. They also stop if a round doesn't fix anything. But, does it work this well with every style? We used Bunshin with

5:20the same app idea from the earlier demo. When it asked which design style we wanted, we chose the illustrative and colorful style to see how it would handle that. And this is what it built with small animations across the page. But, the illustrations are what really give it a look that doesn't feel like a typical AI site, which was our main aim here. We also tested it with a minimal style, and this is the result. Some parts, like how the text is laid out, actually look different, but the page still feels closer to a typical AI design. So, it does do really well with some of the styles, but for others it

5:51didn't really produce a meaningful result. A screenshot can show our agent the look we want, but it still has to guess the small details like the spacing. Our fourth repo, Dem Brand, basically pulls those design details straight from the site. It opens the page in a browser and reads the styles used there. This means our agent can use them in our own build. Using its skill, we can just give our agent the site's link and ask it to get the design details. We can also ask it to save them in a design.md file, which saves a style guide for it to follow when it builds our page. But what if our agent changes

6:23the design by mistake during a later edit? We can save the design details before the edit, then ask Dem Brand to compare them with a new scan afterward to see which details actually changed. We use the skill to get the design details from Gumroad, which has a really distinct style. It saved those details in the design.md and we used that file to have our agent build this landing page. The page doesn't look exactly like Gumroad, but the style feels really familiar. We also asked our agent to add creative HTML animations, and this is what it came up with. The animations follow the same style as the rest of the

6:56page, and they look really amazing. We also have our own workflows and skills like these in AI Labs Pro, which is our community. It also has the systems we've built throughout our videos. So, if you want access to those and want to support the channel, the link's in the description. People on [snorts] an app store really need to see what our app does and why they'd want to use it. With our fifth repo, App Store Screenshots, we can turn real screenshots into images for our app's store page. With the skill set up, we can just give our agent real screenshots and our app's icon, then tell it what the app does. We can also

7:28choose the store and the style we want. Our agent then sets up an editor on our computer, which is basically a small app where it designs the store images around our screenshots. Once we're happy with the design, we can choose a device and download the images in the sizes built into the editor. It puts them all in a zip file, so we can just upload it to the store. And the project also stays on our computer. This means we can edit the

7:50images again whenever our app changes. So, take this demo habit tracker app as an example. We have a mobile app here, and our agent turned its screenshots into these App Store images. Right now, it's only filled in the images for iOS, but it can actually fill them in for Android, too. And if our app is available on Mac, it can make those as well. All of this can be done through our agent. So, if you need anything changed, you can just ask it to do that

8:13for you. [snorts] Building a product with AI can actually be easier than getting people to buy it. So, we still need a way to show why it's useful. Our sixth repo, Brag, basically turns our project into a launch video. The skill has our agent read the project and use the app's design and text to plan the video. This means we don't have to plan it all ourselves. Brag has two

8:32modes, and the first one is full mode. It uses a video-making tool called HyperFrames and gives our agent a set of steps to follow when it builds the video. The second one, slim mode, was built for Opus 5.5 and gives our agent more room to choose its own tools and how to build the video. In either mode, we can ask for a video about the whole product or focus on just one feature. We can also choose how we want it to feel, then check a preview and ask for changes before our agent saves the finished video. Brag aims for a video of about 20 seconds. We get an MP4 file that we can

9:05upload along with a cover image. It also writes a short post to go with the video. But is that video actually a recording of our app? Not always, and that's something we need to watch out for. Brag can rebuild parts of the app as scenes and add clicks that didn't really happen. So, we do need to check that what it shows matches what our app can actually do. So, we gave our agent the GitHub link and told it to install the skills in our folder. After it installed them, we used the Brag command and told it to build a video for this landing page at this link. This is the

9:35Skillb landing page we showed you earlier. Now, this is the video made by Full Mode, and we can see that it's reusing parts of the landing page. Since we didn't have an actual product, the landing page was all it had to work with. Overall, it just goes through the sections one by one, and that's it. And this is the video made by Slim Mode. It starts with a hook and then goes through the rest of the sections, just like Full Mode did. But this time, it doesn't just copy those sections. It adds its own creative ideas, and this is why it

10:02turned out way better in our testing. But Slim only does better when we use bigger models with it. That brings us to the end of this video. If you'd like to support the channel and help us keep making videos like this, you can do so by using the Super Thanks button below. As always, thank you for watching, and

10:17I'll see you in the next one.