6 Insane Trending GitHub AI Design Repos You Need to Use

Video authored by the channel shown, not by IANIA; all rights belong to the creator. Transcript and summary generated automatically; the original-language content is preserved.

Original language: English

Original video: 6 Insane Trending GitHub AI Design Repos You Need to Use · Channel: AI LABS · 09:50 · Watch on YouTube

Topics: AI agents, Software engineering with AI, AI content generation, Markets and economy

Summary

The video reviews six GitHub repositories that help AI agents design, build, check, and promote websites and apps. Awards MCP provides real-site inspiration, Responsively helps check responsive layouts, Genjutsu offers design skills and a multi-agent workflow, and Dem Brand extracts a site’s design details. App Store Screenshots turns app screenshots into store-ready images, while Brag creates launch videos from a project. The presenters demonstrate the tools and note that results vary by style and model, and that Brag’s videos should be checked for accuracy.

Key points

Awards MCP lets an agent search real websites for visual references, inspect their design details, and use selected elements as inspiration.
The Awards MCP setup requires choosing specific options because some tools are not enabled by default.
Responsively displays a site at multiple screen sizes, and its MCP server lets an agent inspect screenshots and fix layout problems.
Genjutsu includes Cast for changing part of a page, Paint for planning and building a page, and Bunshin for coordinating sub-agents across pages.
Bunshin performed well with an illustrative, colorful style in the demo, but the minimal-style result felt closer to a typical AI design.
Dem Brand scans a website’s styles and can save them in a design.md file for an agent to follow or compare against later.
App Store Screenshots uses real app screenshots and an icon to create editable images for app store listings, including iOS and Android formats.
Brag creates launch videos in Full or Slim mode, and can also produce a short post to accompany the video.
Brag may recreate app scenes and add interactions that did not actually happen, so its videos need to be checked against the real product.
In the presenters’ testing, Slim mode produced a more creative result than Full mode, but it did better with larger models.

Chapters

Start	Chapter	Summary
00:00	Why design tools matter and Awards MCP	The video introduces six design-focused GitHub repos and demonstrates how Awards MCP helps an agent find real websites to use as inspiration.
02:05	Awards MCP results and Responsively	The presenters compare a landing page built with and without Awards references, then show how Responsively helps agents check and fix layouts at different screen sizes.
03:38	Responsively and Genjutsu	After showing agent-assisted responsive checks, the video introduces Genjutsu’s design skills and Bunshin’s multi-agent approach, with examples in colorful and minimal styles.
05:41	Dem Brand and App Store Screenshots	Dem Brand extracts a site’s visual details for an agent to reuse, while App Store Screenshots turns app screenshots into store listing images.
08:18	Brag launch videos	The video explains Brag’s Full and Slim modes, compares their demo videos, and warns that generated scenes and interactions may not match the real app.

Quotes

The model is really important, but what’s more important are the tools that we give it to work. — 00:00

The app sends back a screenshot of each view. — 03:38

We can also ask it to save them in a design.md file — 06:13

Brag aims for a video of about 20 seconds. — 08:48

It adds its own creative ideas, and this is why it turned out way better in our testing. — 09:19

Concepts and entities

Awards MCP, Responsively, Genjutsu, Bunshin, Dem Brand, App Store Screenshots, Brag, HyperFrames, Opus 5.5, Klein

Full transcript (original language)

00:00 We 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,

00:30 we’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

01:01 site 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 use the repos in this video with any AI

01:34 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 use the defaults. Don’t use the defaults

02:05 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 one by one, but we didn’t really like

02:35 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 access to a lot of the OpenWeight

03:06 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 choose the screen sizes we want to see next to each other. So, this is what the

03:38 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 sends 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

04:08 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 to 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

04:39 one, cast, to change just one part of the 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 still look like parts of the same site. Other agents then check the results and send the problems back for fixes. Those

05:10 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 the 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

05:41 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 didn’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

06:13 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 the 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

06:44 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 page, 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

07:15 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 choose 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

07:46 the store. And the project also stays on our computer. This means we can edit the images 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 for you. >> [snorts] >> Building a product with AI can actually be easier than getting people to buy it.

08:18 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 modes, 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

08:48 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 upload 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

09:19 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 Skillb 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

09:50 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 turned 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 I’ll see you in the next one.