Github #1 Trending Design Skill's Author Just Fixed Al Design Again
AAI LABS
Computing/SoftwareInternet Technology
Transcript
00:00:00If you've ever designed a site with AI, you'll know how generic the designs these models generate
00:00:04can look. There are a lot of tools and skills out there that try to fix that problem, and some of
00:00:09them do give pretty solid designs. But there's one gap that every single one of them has, and that's
00:00:14why their designs still feel generated. To fill that gap, there's a tool called Inspo, and it was
00:00:19made by the same person behind Hallmark, which has been one of the top trending design skills on
00:00:23GitHub for a long time. And Inspo solves the problem in a way that not only makes your agent
00:00:28design better, but also gives it a better taste for design. And while the other tools that do this
00:00:33for your agent are paid, this one is absolutely free. So if this is your first time here, we're a
00:00:38software company, and this is our channel AI Labs. And in this video, we're going to show you exactly
00:00:43how Inspo fixes your agent's design problem. But before we get into what the tool does, you need
00:00:48to understand why models actually build sites that look generic. A model is actually trained on a huge
00:00:54amount of data, and when it is being trained, it learns the patterns that show up the most in the
00:00:59designs it sees during training. Since they appear so many times, the model thinks that that design is
00:01:05the safest. That's why when you don't provide much design direction in your prompt, it just chooses the
00:01:10patterns it has seen most often, because that is what the model thinks of as safe. Those choices
00:01:14might look good at first, but once you've seen them across a lot of sites, they get recognized as the
00:01:19model's own style. Each model has its own pattern that shows up in all its sites. For some models,
00:01:25it was the color choice of purple or blue on white backgrounds. For other models, it became the warm
00:01:30orange and cream colors. That's why you need something so that you can guide the model away from
00:01:35this generic look in order to make your site stand out from the others. Now, there are plenty of design
00:01:40skills that already fix this problem, and we have also covered a lot of them on our channel. They all do
00:01:45work really well, each helping in its own way by giving the models design direction so that they can
00:01:50generate a good design. One of them is the one we mentioned earlier, Hallmark, which we already have
00:01:55a video on. It is one of the skills that we also use a lot, because it gives the model a design direction
00:02:00and checks the page against the patterns that models fall into. We also use other design skills,
00:02:06and the ones we use in our workflows are in our AI Labs Pro design system, which we have provided to you
00:02:11in our community as well. All these skills give the model instructions on what it should do and tell it
00:02:16which common patterns to avoid. Some of these skills, like Hallmark, also have references from
00:02:21popular sites that worked, so that the model can get inspiration from them as well when it's working
00:02:26on the design, because these are the ones that have worked previously. But most of those references
00:02:30and instructions are described in markdown files, which are the text from which the agent has to work
00:02:36out what the finished page should look like. It can read which fonts to use and how to arrange the page,
00:02:41but that description doesn't help the model figure out how the site should look when all the components
00:02:46work together. Models also don't understand the kind of design the site needs, and they just design
00:02:51whatever is listed in their instructions. That's exactly why Inspo was needed, because it gives the
00:02:56models much more than the design instructions. But before we move on to the tool, it would be great if you
00:03:01subscribe to the channel and hit the hype button. This small gesture of support goes a long way for us.
00:03:07Inspo is actually an MCP server that solves the problem we talked about by giving your coding agent
00:03:13access to real websites instead of just design instructions. This helps because now with this
00:03:18tool, the agent knows which design has worked for the type of site you are designing and can actually
00:03:23study the design. And from that, it creates a new one for you. It contains 832 sites with
00:03:292320 captured pages in the form of images. It also has screenshots of those sites captured on both
00:03:36desktop and mobile, so your agent can see how the design changes to fit a smaller screen and design
00:03:42for all screen types. It also has references for individual parts of a page, like the navigation menu
00:03:47or the pricing section. So when the agent is working on a specific part of your site, it can look through
00:03:53examples of that part. The agent can also get the code for the one it wants to use. But most importantly,
00:03:58every site in it also comes with a design.md file, which describes the design in a structured way that
00:04:04the agents can understand better. It contains the color palette with the exact color values along with
00:04:09the exact fonts and the measurements it captured for things like text sizes and spacing. The agent can
00:04:15use this file to understand the design components rather than figuring out the fonts and styles from
00:04:20just the image and references. You can check out the sites on their landing page where you'll find a
00:04:25bunch of different sites, each with its own design style. And you can also visit their original sites
00:04:30and it is actually free to use and you don't need an account or an API key to connect your agent.
00:04:35But before we actually install Inspo, you need to understand how it actually works underneath. When you
00:04:40give your agent a prompt, the agent sends a description of what you want to build to Inspo through a tool
00:04:46called recommend. Inspo then searches the captured pages for matches and checks how the pages in the
00:04:51closest results are arranged. It then chooses the layout that appears most often among those top
00:04:56results and returns up to five examples that use it. So the agent gets several references that follow
00:05:01a similar arrangement, which it compares before deciding how to design your page. Along with those
00:05:06examples, Inspo also returns matching component references and a suggested color palette. And the
00:05:12response includes up to three screenshots. So the agent actually looks at the pages and sees how those
00:05:17design choices work together. All of them are combined and sent to the agent, which then uses them to
00:05:22decide how to build what you're asking for. Inspo has search filters for different industries and
00:05:27different page layouts, along with options for whether the design uses a light or dark theme. So you can tell
00:05:33the agent in your prompt what direction you want specifically, and it then narrows down the results
00:05:37using those filters to get more suitable references. Once the agent has found references that fit, it
00:05:43requests more detail on those pages and their design.md files before it starts building. And Inspo also
00:05:49tells it to study only a few of those in detail before building. This is because every additional search
00:05:54adds more results to the conversation, which gives the model a lot to look at and can make it unsure about
00:06:00which style to pick. So the agent doesn't need to keep searching once it has enough references to work from.
00:06:04But before we install it, let's have a word by our sponsor, Manid.
00:06:09Every real build eventually needs data it doesn't have yet. And getting it means signing up for yet
00:06:13another API and wiring in another key by hand. Manid is the open router for agent tools. So one key
00:06:19reaches every API and you skip all that setup. We drop its skill into cloud code, then ask for exactly what
00:06:25the build needs, say the search volume on a keyword or the contact behind a profile, and it finds the right
00:06:30endpoint fires the call and the data lands back in our session in seconds. No server to stand up,
00:06:36no config. That same key covers 1,900 more tools. Scraping, contact lookup, search data, video
00:06:43generation for whatever comes next. Stripe just bought open router for $7 billion and Manid is that
00:06:48same idea for agent tools. One key, every API. There's no subscription either. You pay per call,
00:06:54so cost scales as you grow and you get free credits the moment you sign up. Grab your key and make your
00:06:59first call today. The link's in the description. Now in order to install inspo, you just need to copy
00:07:04this installation command available on its website, which will be linked in the description and then
00:07:09paste it in your terminal. When you run the command, the installer automatically detects which coding
00:07:14agents you already have installed and asks whether you want to add inspo to all of them. You can install
00:07:19it for all of them if you want. But if you only want it in a specific agent, the installation path
00:07:24doesn't let you choose for now. When you type no, it straight up cancels the installation completely.
00:07:29So if you want to install it only for a specific coding agent, you need to run the installation command
00:07:34with a client flag and then mention your coding agent's name. It actually installs in user scope,
00:07:39which means inspo is available whenever you open your agent in any folder and won't be just
00:07:44limited to the project you've installed it in. Once the installation is done, you need to reopen
00:07:49whichever agent you're using and run the MCP command. And then you'll see inspo listed alongside
00:07:54your other MCP servers that you've installed with all 15 tools available for the agent to use.
00:08:00So in order to use inspo, you just need to give your agent a prompt for the site you want to build.
00:08:05We tested it on a demo fashion landing page. In our prompt, we also asked the agent to give us a few
00:08:11styles to choose from before it started building. You don't have to ask for alternatives, but asking
00:08:15it first before it starts designing lets you stop before it has built the complete site and ask for
00:08:20a different direction. So when we gave our prompt, even though we hadn't asked it explicitly to use
00:08:25inspo, the agent called the inspo MCP we'd connected earlier. Instead of directly sending the prompt you
00:08:31give it, the agent first adds in more keywords related to the style you've asked for in the prompt.
00:08:36This helps especially when you give it a prompt that is not very descriptive of the site you want,
00:08:40so that the search can be narrowed properly to exactly what you want and the MCP can find exact
00:08:46references that fit what you're asking for. It then studies the references that come back and
00:08:50compares the patterns they have in common, so it works out which design choices belong to that style.
00:08:55In our case, the agent studied around 24 sites and used those references to make its design decisions.
00:09:01For our site, the agent gave us three design directions and described each one so we could choose.
00:09:06Once we picked a direction, it started building the page, and when it was done building the site,
00:09:11the result looked different from the designs we'd been getting from models on their own, even with a design skill.
00:09:16The first section of the page uses images instead of putting huge text across the entire width, which is something models tend to do.
00:09:23The agent used bold fonts and neutral colors, matching the theme we asked for.
00:09:27Now, if you've ever given the agent a site to use as a reference, you would know that it most of the time ends up copying that site's design exactly, instead of using it as inspiration.
00:09:37So, we wanted to see whether our page had done the same thing or whether it had actually followed the style across the references.
00:09:43For that, we asked the agent which sites it had referenced, and it gave us the links to all the sites it used.
00:09:49When we checked those sites, they all looked different from each other, and our page hadn't copied any of them exactly.
00:09:54It borrowed the hero section's style from one site, the buttons from another one, and the way the products were arranged from a third.
00:10:00So, the agent combined parts of those references into a design that didn't look like any of them.
00:10:05The agent also referenced the mobile layouts, so it had examples of how those sites arranged their content on a smaller screen.
00:10:12That's why the design also worked well when we checked it on a smaller screen.
00:10:16But even though the design was closer to what we'd asked for, the page was still static and didn't have any animations.
00:10:22That is one thing that makes the site complete, and Inspo doesn't handle that bit.
00:10:26For that, we used the UISkills MCP server.
00:10:29This MCP gives the agent access to a library of design skills from different authors,
00:10:34so you can ask the agent to find a skill for the site you're working on,
00:10:38and it will look through its library and narrow it down to the skills that match your request.
00:10:42We have also covered this MCP in our previous video.
00:10:46So for our site, we prompted the agent to add in animations on the site using the MCP.
00:10:51So when we gave the prompt, it loaded Emil Kowalski's animation skill and Mengto's scroll animation skill.
00:10:57And the agent then added the animations and they were timed properly together.
00:11:01We tested Inspo on several other sites too, and the results worked well most of the time for us across those builds.
00:11:07Now even though this tool designed the site pretty well for us, it's still new so there were a few problems.
00:11:12When we were testing, on two occasions it got the wrong references, even though our prompt had explicitly stated the kind of site we wanted.
00:11:19The references Inspo returned were from other types of sites that were completely unrelated.
00:11:24In one test, our prompt asked for a coffee subscription site, but we got references from health and business sites.
00:11:30When we searched again with the food and beverage industry filter selected, we got references from coffee sites.
00:11:36And there are some issues in the screenshots it gives.
00:11:38Some of them have parts of the design covered by the pop-up that appears when you open the site.
00:11:43In our earlier test, one of the screenshots had a privacy pop-up in the middle of the page, so the agent couldn't see the design behind it,
00:11:50and it just used its own thinking to build that part of the design instead, which is exactly what you installed the tool to avoid.
00:11:57That's why, just like we mentioned earlier, you need to ask for design directions first, just like how we did when we were testing,
00:12:03so that you can catch it if it's drifting in the wrong direction and then re-prompt so that it can fix these issues.
00:12:09Now, the design system we showed you here, along with other resources, are all available in AI Labs Pro, which is our community.
00:12:16So if you've found value in what we do and want to support the channel, this is the best way to do it.
00:12:20The link's in the description.
00:12:22That brings us to the end of this video.
00:12:24If 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.
00:12:30As always, thank you for watching and I'll see you in the next one.
Community Posts
No posts yet. Be the first to write about this video!
Write about this video