Esta nova ferramenta de design resolveu o problema de design do Claude Code

Vídeo de autoria do canal indicado, não da IANIA; todos os direitos pertencem ao criador. Transcrição, resumo e tradução gerados automaticamente; o conteúdo no idioma original é preservado na versão em idioma original.

Idioma original: inglês

Vídeo original: This New Design Tool Just Fixed Claude Code’s Design Problem · Canal: AI LABS · 12:23 · Assistir no YouTube

Tópicos: Agentes de IA, Claude Code, Engenharia de software com IA, Ferramentas de desenvolvimento com IA

Resumo

O vídeo apresenta Inspo, um MCP gratuito que dá a agentes de programação acesso a referências visuais de sites reais, incluindo capturas de tela e arquivos estruturados com detalhes de design. A ferramenta ajuda o agent a escolher uma direção visual adequada e combinar elementos de diferentes referências, em vez de reproduzir um único site ou recorrer a padrões genéricos. O vídeo demonstra a instalação e o uso de Inspo em uma página de moda, além de mostrar como outra ferramenta pode acrescentar animações. Também aponta limitações, como referências inadequadas e capturas de tela parcialmente cobertas por pop-ups.

Pontos-chave

Modelos tendem a repetir padrões de design comuns quando recebem pouca orientação visual.
Inspo é um MCP gratuito que fornece referências de sites reais a agentes de programação.
A biblioteca inclui 832 sites e 2.320 páginas capturadas, com imagens para desktop e dispositivos móveis.
Os arquivos design.md descrevem paletas, fontes, tamanhos de texto e espaçamentos.
Inspo retorna exemplos, referências de componentes, uma paleta sugerida e até três capturas de tela.
O agente pode combinar elementos de diferentes sites sem copiar fielmente uma única referência.
Pedir opções de direção visual antes da construção ajuda a identificar resultados inadequados e ajustar o prompt.
Inspo pode retornar referências irrelevantes, e pop-ups nas capturas podem esconder partes do design.
O vídeo usa UI skills MCP para adicionar animações, uma tarefa que Inspo não realiza.

Capítulos

Início	Capítulo	Resumo
00:00	Por que os designs de IA parecem genéricos	O vídeo explica que modelos tendem a repetir os padrões visuais mais frequentes e apresenta Inspo como uma forma de ampliar as referências de design.
03:03	Como Inspo fornece referências visuais	Inspo dá ao agent acesso a sites, capturas de tela, referências de componentes e arquivos design.md com detalhes estruturados.
06:11	Patrocínio e instalação de Inspo	Após o anúncio de Manifold, o vídeo explica como instalar Inspo para agentes de programação e disponibilizar suas ferramentas MCP.
08:16	Demonstração de design com referências	O agent analisa sites de referência, propõe direções visuais e combina elementos para criar uma página de moda responsiva.
10:21	Animações e limitações encontradas	O vídeo mostra o uso de UI skills MCP para adicionar animações e relata problemas com referências irrelevantes e pop-ups nas capturas.
11:53	Encerramento e recursos da comunidade	O canal menciona os recursos disponíveis em AI Labs Pro e encerra o vídeo agradecendo aos espectadores.

Citações

É por isso que os designs ainda parecem gerados. — 00:00

Inspo é, na verdade, um servidor MCP que resolve o problema dando ao seu agente de programação acesso a sites reais, em vez de apenas instruções de design. — 03:03

O agente combinou partes dessas referências em um design que não se parecia com nenhum deles. — 09:50

Você precisa pedir direções de design primeiro, para perceber se o resultado está indo na direção errada. — 11:53

Conceitos e entidades

Inspo (ferramenta): MCP gratuito que permite a agentes de programação consultar referências visuais e informações estruturadas de sites reais.
Hallmark (ferramenta): skill de design citada no vídeo, que orienta a criação de páginas e ajuda a evitar padrões comuns de modelos.
MCP (conceito): Protocolo usado por Inspo e outras ferramentas mencionadas para disponibilizar recursos a agentes.
design.md (conceito): Arquivo estruturado que reúne informações como paleta de cores, fontes e medidas de elementos de design.
Claude Code (ferramenta): Agente de programação mencionado no anúncio de Manifold como exemplo de integração com uma skill.
Manifold (empresa): Serviço apresentado no patrocínio do vídeo como uma forma de acessar APIs e ferramentas para agentes usando uma chave.
UI skills MCP (ferramenta): MCP descrito no vídeo como uma biblioteca de design skills, usada no exemplo para encontrar recursos de animação.
Emil Kowalski (pessoa): Autor da skill de animação que o agente carregou durante a demonstração.
Meng To (pessoa): Autor da skill de animação de rolagem carregada pelo agente durante a demonstração.
AI Labs (empresa): Canal que publicou o vídeo e apresentou o teste de Inspo.

Tradução completa (pt-BR)

00:00 Se você já criou um site com IA, sabe como os designs gerados por esses modelos podem parecer genéricos. Há muitas ferramentas e skills por aí que tentam resolver esse problema, e algumas delas realmente produzem designs bem sólidos. Mas há uma lacuna que todas elas têm, e é por isso que seus designs ainda parecem gerados por IA. Para preencher essa lacuna, existe uma ferramenta chamada Inspo, criada pela mesma pessoa por trás do Hallmark, que há bastante tempo está entre as skills de design mais populares no GitHub. E a Inspo resolve o problema de um jeito que não só ajuda seu agent a criar designs melhores, como também lhe dá

00:30 um gosto melhor para design. E, enquanto as outras ferramentas que fazem isso pelo seu agent são pagas, esta é totalmente gratuita. Então, se esta é sua primeira vez aqui, somos uma empresa de software, e este é o nosso canal, AI Labs. Neste vídeo, vamos mostrar exatamente como a Inspo resolve o problema de design do seu agent. Mas, antes de [fungada] vermos o que a ferramenta faz, você precisa entender por que os modelos criam sites com aparência genérica. Um modelo é treinado com uma quantidade enorme de dados e, durante o treinamento, aprende os padrões que aparecem com mais frequência nos designs que vê ao longo do

01:00 treinamento. Como aparecem tantas vezes, o modelo acha que esse design é a opção mais segura. Por isso, quando você não dá muita orientação de design no seu prompt, ele simplesmente escolhe os padrões que viu com mais frequência, porque é isso que o modelo considera seguro. Essas escolhas podem parecer boas à primeira vista, mas, depois de vê-las em muitos sites, você passa a reconhecê-las como o estilo próprio do modelo. Cada modelo tem seu próprio padrão, que aparece em todos os sites que ele cria. Em alguns modelos, são as cores roxa ou azul em fundos brancos. Em outros, são os tons quentes de laranja e creme. É por isso

01:32 que você precisa de algo que oriente o modelo para longe desse visual genérico, para fazer seu site se destacar dos demais. Há muitas skills de design que já resolvem esse problema, e também já falamos de várias delas no nosso canal. Todas funcionam muito bem, cada uma ajudando à sua maneira ao orientar o design do modelo para que ele possa gerar um bom resultado. Uma delas é a que mencionamos antes, Hallmark, sobre a qual já temos um vídeo. É uma das skills que também usamos bastante porque orienta o design do modelo e verifica a página em relação aos

02:02 padrões em que os modelos costumam cair. Também usamos outras skills de design, e as que usamos nos nossos workflows fazem parte do nosso sistema de design AI Labs Pro, que também disponibilizamos para você na nossa comunidade. Todas essas skills dão instruções ao modelo sobre o que fazer e dizem quais padrões comuns evitar. Algumas delas, como Hallmark, também incluem referências de sites populares que deram certo, para que o modelo possa se inspirar neles enquanto trabalha no design, já que são exemplos que funcionaram. Mas a maioria dessas referências e instruções é descrita em arquivos Markdown,

02:33 que são textos a partir dos quais o agent precisa deduzir como a página final deve ficar. Ele consegue ler quais fontes usar e como organizar a página, mas essa descrição não ajuda o modelo a descobrir como o site deve ficar quando todos os componentes funcionam juntos. Os modelos também não entendem que tipo de design o site precisa; eles simplesmente criam o que estiver listado nas instruções. Foi exatamente por isso que a Inspo se tornou necessária: ela oferece aos modelos muito mais do que instruções de design. Mas, antes de continuarmos com a ferramenta, seria ótimo se você se inscrevesse no canal e apertasse o

03:03 botão de hype. Esse pequeno gesto de apoio nos ajuda muito. A Inspo [fungada] é, na verdade, um servidor MCP que resolve o problema de que falamos, dando ao seu agent de programação acesso a sites reais, em vez de apenas instruções de design. Isso ajuda porque, com essa ferramenta, o agent sabe quais designs funcionaram para o tipo de site que você está criando e pode realmente estudá-los. Com base nisso, ele cria um novo design para você. A ferramenta contém 832 sites, com 2.320 páginas capturadas em forma de imagens. Ela

03:33 também tem capturas de tela desses sites em desktop e dispositivos móveis, para que seu agent veja como o design muda para se adaptar a uma tela menor e crie designs para todos os tipos de tela. Há também referências para partes específicas de uma página, como o menu de navegação ou a seção de preços. Assim, quando o agent estiver trabalhando em uma parte específica do seu site, poderá consultar exemplos dessa parte. O agent também pode obter o código do exemplo que quiser usar. Mas, o mais importante, cada site também vem com um arquivo design.md, que descreve o design de forma estruturada, mais fácil de entender pelos agents. Ele

04:06 contém a paleta de cores com os valores exatos de cada cor, além das fontes exatas e das medidas capturadas para elementos como tamanhos de texto e espaçamento. O agent pode usar esse arquivo para entender os componentes do design, em vez de tentar deduzir as fontes e os estilos apenas pelas imagens e referências. Você pode conferir os sites na página inicial da ferramenta, onde encontrará vários sites diferentes, cada um com seu próprio estilo de design. Também pode visitar os sites originais. E, na verdade, o uso é gratuito: você não precisa de uma conta nem de uma chave de API para conectar seu agent. Mas, antes de instalarmos

04:37 a Inspo, você precisa entender como ela funciona por dentro. Quando você dá um prompt ao seu agent, ele envia à Inspo uma descrição do que você quer criar, por meio de uma ferramenta chamada recommend. Então, a Inspo pesquisa nas páginas capturadas para encontrar correspondências e verifica como estão organizadas as páginas entre os resultados mais próximos. Em seguida, escolhe o layout que aparece com mais frequência entre os principais resultados e retorna até cinco exemplos que o utilizam. Assim, o agent recebe várias referências com uma organização semelhante e as compara antes de decidir como criar sua página. Junto com esses exemplos, a Inspo também retorna referências de componentes correspondentes

05:09 e uma paleta de cores sugerida. A resposta inclui até três capturas de tela. Assim, o agent realmente observa as páginas e vê como essas escolhas de design funcionam em conjunto. Tudo isso é combinado e enviado ao agent, que usa essas informações para decidir como criar o que você pediu. A Inspo tem filtros de pesquisa para diferentes setores e layouts de página, além de opções para indicar se o design usa um tema claro ou escuro. Assim, você pode dizer no seu prompt qual direção específica quer, e o agent restringe os resultados usando esses filtros para encontrar referências mais adequadas

05:39 . Depois de encontrar referências que atendam ao que você precisa, o agent solicita mais detalhes sobre essas páginas e seus arquivos design.md antes de começar a criar. A Inspo também o orienta a estudar em detalhe apenas algumas delas antes de começar. Isso porque cada pesquisa adicional acrescenta mais resultados à conversa, dando ao modelo muita coisa para analisar e podendo deixá-lo indeciso sobre qual estilo escolher. Portanto, o agent não precisa continuar pesquisando depois que já tiver referências suficientes para usar. Mas, antes de instalá-la, vamos ouvir nosso patrocinador, Manifold. Todo projeto real acaba precisando de dados que ainda não tem, e para obtê-los é preciso se cadastrar em mais uma API e configurar manualmente outra chave. A Manifold é o roteador aberto para ferramentas de agents. Assim, uma chave dá acesso a todas as APIs e você evita toda essa configuração. Instalamos a skill dela no Claude code e, então, pedimos exatamente o que o projeto precisa. Digamos que seja o volume de buscas de uma palavra-chave ou o contato por trás de um perfil: ela encontra o endpoint certo, faz a chamada, e os dados chegam à nossa sessão em segundos. Não é preciso configurar um servidor nem mexer em configurações. Essa mesma chave dá acesso a mais 1.900 ferramentas. Extração de dados, contatos

06:11 ainda não têm, e para conseguir isso é preciso se cadastrar em mais uma API e adicionar outra chave manualmente. Manifold é o roteador aberto para ferramentas de agent. Assim, uma chave dá acesso a todas as APIs e você evita toda essa configuração. Adicionamos a skill dele ao Claude Code e, então, pedimos exatamente o que o projeto precisa. Por exemplo, o volume de buscas por uma palavra-chave ou o contato por trás de um perfil: ele encontra o ponto de acesso certo, faz a chamada e os dados aparecem na nossa sessão em segundos. Não é preciso configurar um servidor nem fazer ajustes. Essa mesma chave dá acesso a mais 1.900 ferramentas. Extração de dados, contatos

06:41 consulta, busca de dados, geração de vídeos, para o que vier a seguir. A Stripe acabou de comprar a open router por 7 bilhões de dólares, e a Manifold é a mesma ideia para ferramentas de agent. Uma chave, todas as APIs. Também não há assinatura. Você paga por chamada, então o custo aumenta conforme você cresce, e recebe créditos grátis assim que se cadastra. Pegue sua chave e faça sua primeira chamada hoje mesmo. O link está na descrição. Agora, para instalar o Inspo, basta copiar este comando de instalação, disponível no site, que estará linkado na descrição, e colá-lo no terminal. Quando você executa o comando, o instalador detecta automaticamente

07:13 quais coding agents você já tem instalados e pergunta se quer adicionar o Inspo a todos eles. Você pode instalá-lo em todos, se quiser, mas, se quiser usá-lo apenas em um agent específico, o processo de instalação não permite escolher por enquanto. Quando você digita “não”, a instalação é cancelada por completo. Então, se quiser instalá-lo apenas para um coding agent específico, precisa executar o comando de instalação com uma flag de cliente e depois indicar o nome do seu coding agent. Na verdade, ele é instalado no escopo do usuário, o que significa que o Inspo fica disponível sempre que você abre seu agent em qualquer pasta, e não fica

07:44 limitado apenas ao projeto em que você o instalou. Depois que a instalação terminar, você precisa reabrir o agent que estiver usando e executar o comando MCP. Então, você verá o Inspo listado junto com os outros servidores MCP que instalou, com todas as 15 ferramentas disponíveis para o agent usar. Para usar o Inspo, basta dar ao seu agent um prompt para o site que você quer criar. Nós o testamos em uma página inicial de demonstração para moda. No nosso prompt, também pedimos ao agent que nos desse alguns estilos para escolher antes de começar a construir. Você não precisa pedir alternativas, mas pedir isso primeiro

08:16 antes de começar a projetar permite interromper o processo antes que ele tenha construído o site completo e pedir uma direção diferente. Quando enviamos nosso prompt, embora não tivéssemos pedido explicitamente que usasse o Inspo, o agent chamou o MCP do Inspo que havíamos conectado antes. Em vez de enviar diretamente o prompt que você fornece, primeiro o agent acrescenta mais palavras-chave relacionadas ao estilo que você pediu no prompt. Isso é especialmente útil quando você dá um prompt que não descreve muito bem o site que quer, pois ajuda a restringir a busca adequadamente ao que você quer, e permite que o MCP encontre referências exatas que correspondam ao que

08:47 você está pedindo. Em seguida, ele analisa as referências encontradas e compara os padrões que elas têm em comum, para descobrir quais escolhas de design pertencem àquele estilo. No nosso caso, o agent analisou cerca de 24 sites e usou essas referências para tomar decisões de design. Para o nosso site, o agent nos apresentou três direções de design e descreveu cada uma para que pudéssemos escolher. Depois que escolhemos uma direção, ele começou a construir a página. Quando terminou de construir o site, o resultado era diferente dos designs que vínhamos obtendo de modelos por conta própria, mesmo com uma skill de design. A primeira seção da página usa imagens

09:19 em vez de colocar um texto enorme ocupando toda a largura, algo que os modelos costumam fazer. O agent usou fontes marcantes e cores neutras que combinavam com o tema que pedimos. Agora, se você já pediu ao agent para usar um site como referência, sabe que, na maioria das vezes, ele acaba copiando exatamente o design daquele site, em vez de usá-lo como inspiração. Então, queríamos ver se a nossa página tinha feito o mesmo ou se realmente tinha seguido o estilo presente nas referências. Para isso, perguntamos ao agent quais sites ele havia usado como referência, e ele nos forneceu os links de todos eles. Quando conferimos esses sites, eles

09:50 eram todos diferentes entre si, e a nossa página não havia copiado nenhum deles exatamente. Ela aproveitou o estilo da seção principal de um site, os botões de outro e a maneira como os produtos estavam organizados de um terceiro. Assim, o agent combinou partes daquelas referências em um design que não parecia com nenhum deles. O agent também consultou as versões para dispositivos móveis, então tinha exemplos de como aqueles sites organizavam o conteúdo em uma tela menor. Por isso, o design também funcionou bem quando o conferimos em uma tela menor. Mas, embora o design estivesse mais próximo do que pedimos, a página ainda era estática e

10:21 não tinha animações. Esse é um dos elementos que tornam o site completo, e o Inspo não cuida dessa parte. Para isso, usamos o servidor MCP UI skills. Esse MCP dá ao agent acesso a uma biblioteca de skills de design de diferentes autores. Assim, você pode pedir ao agent que encontre uma skill para o site em que está trabalhando, e ele vai pesquisar na biblioteca e restringir a busca às skills que correspondem ao seu pedido. Também já falamos sobre esse MCP em um vídeo anterior. Então, para o nosso site, pedimos ao agent que adicionasse animações usando o MCP.

10:51 Quando enviamos o prompt, ele carregou a skill de animação de Emil Kowalski e a skill de animação de rolagem de Meng To. Então, o agent adicionou as animações, e elas ficaram sincronizadas corretamente. Também testamos o Inspo em vários outros sites, e, na maioria das vezes, os resultados funcionaram bem para nós nesses projetos. Agora, embora essa ferramenta tenha criado um site muito bom para nós, ela ainda é nova, então houve alguns problemas. Durante os testes, em duas ocasiões, ela trouxe as referências erradas, embora nosso prompt especificasse claramente o tipo de site que queríamos. As referências que o Inspo retornou eram de outros tipos de sites

11:22 que não tinham absolutamente nada a ver com o pedido. Em um teste, nosso prompt pedia um site de assinatura de café, mas recebemos referências de sites de saúde e negócios. Quando fizemos uma nova busca com o filtro do setor de alimentos e bebidas selecionado, recebemos referências de sites de café. Também há alguns problemas nas capturas de tela que ele fornece. Em algumas delas, partes do design ficam cobertas pelo pop-up que aparece quando você abre o site. Em um teste anterior, uma das capturas de tela tinha um pop-up de privacidade no meio da página, então o agent não conseguia ver o design atrás dele e simplesmente usou o próprio raciocínio para construir aquela parte do

11:53 design, que é exatamente o que você instalou a ferramenta para evitar. Por isso, como mencionamos antes, você precisa pedir primeiro algumas direções de design, como fizemos nos testes, para poder perceber se ela estiver seguindo a direção errada e, então, enviar um novo prompt para que corrija esses problemas. O sistema de design que mostramos aqui, junto com outros recursos, está disponível no AI Labs Pro, a nossa comunidade. Então, se você achou útil o nosso trabalho e quer apoiar o canal, essa é a melhor forma de fazer isso. O link está na descrição. E assim chegamos ao fim

12:23 deste vídeo. Se quiser apoiar o canal e nos ajudar a continuar fazendo vídeos como este, você pode usar o botão Super Thanks abaixo. Como sempre, obrigado por assistir, e até o próximo vídeo.

Transcrição original

[00:00] If you’ve ever designed a site with AI, you’ll know how generic the designs these models generate can look. There are a lot of tools and skills out there that try to fix that problem, and some of them do give pretty solid designs. But, there’s one gap that every single one of them has, and that’s why their designs still feel generated. To fill that gap, there’s a tool called Inspo, and it was made by the same person behind Hallmark, which has been one of the top trending design skills on GitHub for a long time. And, Inspo solves the problem in a way that not only makes your agent design better, but also gives

[00:30] it a better taste for design. And, while the other tools that do this for your agent are paid, this one is absolutely free. So, if this is your first time here, we’re a software company, and this is our channel AI Labs. And, in this video, we’re going to show you exactly how Inspo fixes your agent’s design problem. But, before [snorts] we get into what the tool does, you need to understand why models actually build sites that look generic. A model is actually trained on a huge amount of data, and when it is being trained, it learns the patterns that show up the most in the designs it sees during

[01:00] training. Since they appear so many times, the model thinks that that design is the safest. That’s why when you don’t provide much design direction in your prompt, it just chooses the patterns it has seen most often, because that is what the model thinks of as safe. Those choices might look good at first, but once you’ve seen them across a lot of sites, they get recognized as the model’s own style. Each model has its own pattern that shows up in all its sites. For some models, it was the color choice of purple or blue on white backgrounds. For other models, it became the warm orange and cream colors. That’s

[01:32] why you need something so that you can guide the model away from this generic look in order to make your site stand out from the others. Now, there are plenty of design skills that already fix this problem, and we have also covered a lot of them on our channel. They all do work really well, each helping in its own way by giving the model’s design direction so that they can generate a good design. One of them is the one we mentioned earlier, Hallmark, which we already have a video on. It is one of the skills that we also use a lot because it gives the model a design direction and checks the page against

[02:02] the patterns that models fall into. We also use other design skills and the ones we use in our workflows are in our AI Labs Pro design system, which we have provided to you in our community as well. All these skills give the model instructions on what it should do and tell it which common patterns to avoid. Some of these skills like Hallmark also have references from popular sites that worked so that the model can get inspiration from them as well when it’s working on the design because these are the ones that have worked previously. But most of those references and instructions are described in mock down

[02:33] files, which are the text from which the agent has to work out what the finished page should look like. It can read which fonts to use and how to arrange the page, but that description doesn’t help the model figure out how the site should look when all the components work together. Models also don’t understand the kind of design the site needs and they just design whatever is listed in their instructions. That’s exactly why Inspo was needed because it gives the models much more than the design instructions. But before we move on to the tool, it would be great if you subscribe to the channel and hit the

[03:03] hype button. This small gesture of support goes a long way for us. Inspo [snorts] is actually an MCP server that solves the problem we talked about by giving your coding agent access to real websites instead of just design instructions. This helps because now with this tool, the agent knows which design has worked for the type of site you are designing and can actually study the design. And from that, it creates a new one for you. It contains 832 sites with 2,320 captured pages in the form of images. It

[03:33] also has screenshots of those sites captured on both desktop and mobile, so your agent can see how the design changes to fit a smaller screen and design for all screen types. It also has references for individual parts of a page like the navigation menu or the pricing section. So when the agent is working on a specific part of your site, it can look through examples of that part. The agent can also get the code for the one it wants to use. But most importantly, every site in it also comes with a design.md file, which describes the design in a structured way that the agents can understand better. It

[04:06] contains the color palette with the exact color values along with the exact fonts and the measurements it captured for things like text sizes and spacing. The agent can use this file to understand the design components rather than figuring out the fonts and styles from just the image and references. You can check out the sites on their landing page, where you’ll find a bunch of different sites, each with its own design style. And you can also visit their original sites. And it is actually free to use, and you don’t need an account or an API key to connect your agent. But before we actually install

[04:37] Inspo, you need to understand how it actually works underneath. When you give your agent a prompt, the agent sends a description of what you want to build to Inspo through a tool called recommend. Inspo then searches the captured pages for matches and checks how the pages in the closest results are arranged. It then chooses the layout that appears most often among those top results and returns up to five examples that use it. So, the agent gets several references that follow a similar arrangement, which it compares before deciding how to design your page. Along with those examples, Inspo also returns matching

[05:09] component references and a suggested color palette. And the response includes up to three screenshots. So, the agent actually looks at the pages and sees how those design choices work together. All of them are combined and sent to the agent, which then uses them to decide how to build what you’re asking for. Inspo has search filters for different industries and different page layouts, along with options for whether the design uses a light or dark theme. So, you can tell the agent in your prompt what direction you want specifically, and it then narrows down the results using those filters to get more suitable

[05:39] references. Once the agent has found references that fit, it requests more detail on those pages and their design.md files before it starts building. And Inspo also tells it to study only a few of those in detail before building. This is because every additional search adds more results to the conversation, which gives the model a lot to look at and can make it unsure about which style to pick. So, the agent doesn’t need to keep searching once it has enough references to work from. But before we install it, let’s have a word by our sponsor, Manifold. Every real build eventually needs data it doesn’t

[06:11] have yet, and getting it means signing up for yet another API and wiring in another key by hand. Manifold is the open router for agent tools. So, one key reaches every API and you skip all that setup. We drop its skill into Claude code, then ask for exactly what the build needs. Say the search volume on a keyword or the contact behind a profile, and it finds the right endpoint, fires the call, and the data lands back in our session in seconds. No server to stand up, no config. That same key covers 1,900 more tools. Scraping, contact

[06:41] lookup, search data, video generation, for whatever comes next. Stripe just bought open router for $7 billion, and Manifold is that same idea for agent tools. One key, every API. There’s no subscription, either. You pay per call, so cost scales as you grow, and you get free credits the moment you sign up. Grab your key and make your first call today. The link’s in the description. Now, in order to install Inspo, you just need to copy this installation command available on its website, which will be linked in the description, and then paste it in your terminal. When you run the command, the installer automatically

[07:13] detects which coding agents you already have installed and asks whether you want to add Inspo to all of them. You can install it for all of them if you want, but if you only want it in a specific agent, the installation path doesn’t let you choose for now. When you type no, it straight up cancels the installation completely. So, if you want to install it only for a specific coding agent, you need to run the installation command with a client flag and then mention your coding agent’s name. It actually installs in user scope, which means Inspo is available whenever you open your agent in any folder and won’t be

[07:44] just limited to the project you’ve installed it in. Once the installation is done, you need to reopen whichever agent you’re using and run the MCP command. And then you’ll see Inspo listed alongside your other MCP servers that you’ve installed with all 15 tools available for the agent to use. So, in order to use Inspo, you just need to give your agent a prompt for the site you want to build. We tested it on a demo fashion landing page. In our prompt, we also asked the agent to give us a few styles to choose from before it started building. You don’t have to ask for alternatives, but asking it first

[08:16] before it starts designing lets you stop before it has built the complete site and ask for a different direction. So, when we gave our prompt, even though we hadn’t asked it explicitly to use Inspo, the agent called the Inspo MCP we’d connected earlier. Instead of directly sending the prompt you give it, the agent first adds in more keywords related to the style you’ve asked for in the prompt. This helps especially when you give it a prompt that is not very descriptive of the site you want, so that the search can be narrowed properly to exactly what you want, and the MCP can find exact references that fit what

[08:47] you’re asking for. It then studies the references that come back and compares the patterns they have in common, so it works out which design choices belong to that style. In our case, the agent studied around 24 sites and used those references to make its design decisions. For our site, the agent gave us three design directions and described each one so we could choose. Once we picked a direction, it started building the page, and when it was done building the site, the result looked different from the designs we’d been getting from models on their own, even with a design skill. The first section of the page uses images

[09:19] instead of putting huge text across the entire width, which is something models tend to do. The agent used bold fonts and neutral colors matching the theme we asked for. Now, 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. So, we wanted to see whether our page had done the same thing or whether it had actually followed the style across the references. For that, we asked the agent which sites it had referenced, and it gave us the links to all the sites it used. When we checked those sites, they

[09:50] all looked different from each other, and our page hadn’t copied any of them exactly. It borrowed the hero section style from one site, the buttons from another one, and the way the products were arranged from a third. So, the agent combined parts of those references into a design that didn’t look like any of them. The agent also referenced the mobile layouts, so it had examples of how those sites arrange their content on a smaller screen. That’s why the design also worked well when we checked it on a smaller screen. But, even though the design was closer to what we’d asked for, the page was still static and

[10:21] didn’t have any animations. That is one thing that makes the site complete, and Inspo doesn’t handle that bit. For that, we use the UI skills MCP server. This MCP gives the agent access to a library of design skills from different authors. So, you can ask the agent to find a skill for the site you’re working on, and it will look through its library and narrow it down to the skills that match your request. We have also covered this MCP in our previous video. So, for our site, we prompted the agent to add in animations on the site using the MCP.

[10:51] So, when we gave the prompt, it loaded Emil Kowalski’s animation skill and Meng To’s scroll animation skill. And the agent then added the animations, and they were timed properly together. We tested Inspo on several other sites, too, and the results worked well most of the time for us across those builds. Now, even though this tool designed the site pretty well for us, it’s still new, so there were a few problems. When we were testing, on two occasions, it got the wrong references, even though our prompt had explicitly stated the kind of site we wanted. The references Inspo returned were from other types of sites

[11:22] that were completely unrelated. In one test, our prompt asked for a coffee subscription site, but we got references from health and business sites. When we searched again with the food and beverage industry filter selected, we got references from coffee sites. And there are some issues in the screenshots it gives. Some of them have parts of the design covered by the pop-up that appears when you open the site. In 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, and it just used its own thinking to build that part of the

[11:53] design instead, which is exactly what you installed the tool to avoid. That’s why, just like we mentioned earlier, you need to ask for design directions first, just like how we did when we were testing, so that you can catch it if it’s drifting in the wrong direction, and then re-prompt so that it can fix these issues. Now, the design system we showed you here, along with other resources, are all available in AI Labs Pro, which is our community. So, if you found value in what we do and want to support the channel, this is the best way to do it. The link’s in the description. That brings us to the end

[12:23] 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.