Autor da Habilidade de Design Nº 1 em Alta no GitHub Acaba de Corrigir o Design de IA Novamente

PortuguêsالعربيةDeutschEnglishEspañolFrançaisहिन्दीBahasa Indonesia日本語한국어Русский
AAI LABS
Computing/SoftwareInternet Technology

Transcript

00:00:00Se você já desenvolveu um site com IA, sabe o quanto os designs gerados por esses modelos
00:00:04podem parecer genéricos. Existem muitas ferramentas e skills por aí tentando resolver isso, e algumas
00:00:09até entregam designs bem sólidos. Mas há uma lacuna que absolutamente todas elas têm, e é por isso
00:00:14que os designs ainda parecem sintéticos. Para preencher essa lacuna, existe uma ferramenta chamada Inspo,
00:00:19criada pela mesma pessoa por trás do Hallmark — uma das skills de design em maior alta
00:00:23no GitHub há um bom tempo. O Inspo resolve o problema de uma forma que não só melhora o design
00:00:28do seu agente, mas também apura o bom gosto dele. E enquanto outras ferramentas similares
00:00:33são pagas, esta é totalmente gratuita. Então, se esta é a sua primeira vez aqui, nós somos uma
00:00:38empresa de software e este é o nosso canal, AI Labs. Neste vídeo, vamos mostrar exatamente
00:00:43como o Inspo corrige o problema de design do seu agente. Mas antes de ver o que a ferramenta faz, você precisa
00:00:48entender por que os modelos criam sites tão genéricos. Um modelo é treinado com uma enorme quantidade
00:00:54de dados e, durante esse treino, ele aprende os padrões mais frequentes nos designs
00:00:59que visualiza. Por aparecerem repetidamente, o modelo acha que aquele estilo é o mais seguro.
00:01:05É por isso que, se você não der direções claras de design no seu prompt, ele simplesmente escolhe
00:01:10os padrões que viu com mais frequência, pois considera isso o caminho mais seguro.
00:01:14Essas escolhas podem parecer boas de início, mas depois de ver o mesmo padrão em vários sites, elas passam
00:01:19a ser reconhecidas como a assinatura do próprio modelo. Cada modelo tem seu padrão característico.
00:01:25Em alguns, era o uso de roxo ou azul sobre fundos brancos. Em outros, passou a ser tons
00:01:30quentes de laranja e creme. Por isso você precisa de algo para desviar o modelo
00:01:35desse visual genérico e fazer seu site se destacar dos demais. Já existem várias skills
00:01:40de design que abordam esse problema, e inclusive já mostramos muitas delas aqui no canal. Elas funcionam
00:01:45muito bem, ajudando à sua maneira ao dar uma direção estética para os modelos criarem
00:01:50bons projetos. Uma delas é o Hallmark, que mencionamos antes e já tem vídeo próprio.
00:01:55É uma das skills que mais usamos, pois orienta o modelo sobre o design e verifica a página
00:02:00contra os vícios comuns em que a IA costuma cair. Também usamos outras skills de design,
00:02:06e as que adotamos em nossos fluxos estão no design system do AI Labs Pro, que disponibilizamos
00:02:11para a nossa comunidade. Todas essas skills fornecem instruções ao modelo sobre o que fazer e quais
00:02:16padrões clichês evitar. Algumas, como o Hallmark, também trazem referências de sites
00:02:21populares e bem-sucedidos, para que o modelo possa se inspirar em exemplos reais
00:02:26que já funcionaram no mercado. Só que a maioria dessas referências e instruções
00:02:30está em arquivos Markdown, que são textos a partir dos quais o agente precisa deduzir
00:02:36a aparência final da página. Ele consegue ler quais fontes usar e como organizar o layout,
00:02:41mas essa descrição em texto não ajuda o modelo a entender o resultado visual quando os componentes
00:02:46trabalham juntos. Os modelos também não entendem o estilo sutil de que o site precisa e apenas montam
00:02:51o que está listado nas instruções. É exatamente por isso que o Inspo se tornou necessário,
00:02:56pois ele entrega muito mais do que simples regras escritas. Mas antes de falarmos da ferramenta,
00:03:01inscreva-se no canal e deixe o seu like. Esse pequeno gesto de apoio faz toda a diferença para nós.
00:03:07O Inspo é, na verdade, um servidor MCP que resolve o problema citado dando ao seu agente
00:03:13de programação acesso a websites reais em vez de só instruções. Isso muda tudo porque agora,
00:03:18com essa ferramenta, o agente sabe qual design funcionou para o tipo de site que você quer criar
00:03:23e pode estudar essa estrutura visual. A partir disso, ele gera um novo layout para você. Ele conta com 832 sites
00:03:29e 2.320 páginas capturadas em formato de imagem. Também possui capturas de tela dessas páginas em versão
00:03:36desktop e mobile, permitindo que o agente veja como o design se adapta a telas menores e crie um layout
00:03:42responsivo para qualquer dispositivo. Ele traz referências para partes específicas da página, como o menu
00:03:47de navegação ou a seção de preços. Assim, quando o agente estiver construindo um componente específico,
00:03:53ele pode examinar exemplos focados naquilo. O agente pode até obter o código do elemento que deseja usar.
00:03:58E o mais importante: cada site inclui um arquivo design.md, que descreve o visual de forma estruturada
00:04:04para que os agentes compreendam muito melhor. Esse arquivo traz a paleta de cores com os valores exatos,
00:04:09além das fontes precisas e das medições extraídas para tamanhos de texto e espaçamentos. O agente
00:04:15usa esse arquivo para interpretar os componentes de design sem precisar adivinhar fontes e estilos apenas
00:04:20olhando para imagens e referências. Você pode explorar os sites na landing page deles, onde encontrará
00:04:25uma variedade enorme de opções, cada uma com seu próprio estilo. Você também pode visitar os sites originais,
00:04:30e o uso é 100% gratuito — não precisa de conta ou chave de API para conectar o seu agente.
00:04:35Mas antes de instalarmos o Inspo, vale entender como ele opera por baixo dos panos. Quando você
00:04:40envia um prompt, o agente envia uma descrição do que você quer construir para o Inspo através de uma ferramenta
00:04:46chamada recommend. O Inspo faz uma busca nas páginas capturadas por correspondências e analisa como os melhores
00:04:51resultados estão estruturados. Ele seleciona o layout mais frequente entre esses principais
00:04:56resultados e retorna até cinco exemplos que utilizam essa estrutura. Assim, o agente recebe várias referências com
00:05:01uma organização semelhante, comparando-as antes de decidir como projetar a sua página. Além dessas
00:05:06referências, o Inspo também retorna componentes equivalentes e uma sugestão de paleta de cores.
00:05:12A resposta inclui até três capturas de tela, permitindo que o agente realmente analise as páginas e veja como
00:05:17essas escolhas visuais harmonizam entre si. Tudo isso é combinado e enviado ao agente, que usa as informações
00:05:22para decidir como construir o que você pediu. O Inspo oferece filtros de busca por setor e por
00:05:27diferentes tipos de layout, além de opções para temas claros ou escuros. Você pode especificar no seu
00:05:33prompt a direção exata que deseja, e ele usará esses filtros para refinar os resultados
00:05:37e trazer referências bem mais adequadas. Assim que encontra os exemplos ideais, o agente
00:05:43solicita mais detalhes sobre as páginas e seus arquivos design.md antes de começar a codificar. O Inspo também
00:05:49orienta que ele estude apenas algumas dessas referências a fundo. Isso porque cada busca adicional
00:05:54acumula mais dados no histórico do chat, gerando excesso de informação e deixando o modelo confuso sobre
00:06:00qual estilo escolher. Então, o agente não precisa continuar pesquisando se já tiver o suficiente para trabalhar.
00:06:04Mas antes de instalarmos, uma breve palavra do nosso patrocinador, Manid.
00:06:09Toda aplicação real acaba precisando de dados dos quais ainda não dispõe. E consegui-los significa se cadastrar
00:06:13em mais uma API e configurar outra chave manualmente. O Manid é o OpenRouter para ferramentas de agentes. Com uma única
00:06:19chave você acessa qualquer API, eliminando todo esse processo de configuração. Nós adicionamos a skill dele ao ambiente de código,
00:06:25pedimos exatamente o que o projeto precisa — como o volume de busca de uma palavra-chave ou os dados de um perfil — e ele localiza
00:06:30o endpoint correto, executa a chamada e entrega os dados na nossa sessão em segundos. Sem servidor para subir,
00:06:36sem complicação de configuração. Essa mesma chave dá acesso a mais de 1.900 ferramentas: web scraping, busca de contatos,
00:06:43dados de pesquisa ou geração de vídeo para o que vier a seguir. A Stripe acabou de comprar o OpenRouter por 7 bilhões de dólares,
00:06:48e o Manid aplica esse mesmo conceito para ferramentas de IA. Uma chave, todas as APIs. Não há assinatura:
00:06:54você paga por chamada, então o custo escala com o seu crescimento, e você ganha créditos grátis assim que se cadastra.
00:06:59Pegue sua chave e faça sua primeira chamada hoje mesmo. O link está na descrição. Agora, para instalar o Inspo,
00:07:04basta copiar o comando de instalação disponível no site oficial, que estará no link da descrição, e
00:07:09colá-lo no seu terminal. Ao rodar o comando, o instalador detecta automaticamente quais agentes
00:07:14de programação você já tem instalados e pergunta se deseja adicionar o Inspo a todos eles.
00:07:19Você pode instalar em todos se quiser. Mas se quiser apenas em um agente específico, o fluxo de instalação
00:07:24padrão não permite escolher no momento. Se você digitar “não”, ele simplesmente cancela a instalação.
00:07:29Portanto, para instalar em um agente específico, você deve rodar o comando de instalação
00:07:34passando a flag do cliente e informando o nome do agente desejado. Ele é instalado no escopo do usuário,
00:07:39o que significa que o Inspo estará disponível sempre que você abrir o agente em qualquer pasta, sem ficar
00:07:44restrito ao projeto em que foi instalado. Quando a instalação terminar, basta reabrir
00:07:49o agente que estiver usando e rodar o comando MCP. Você verá o Inspo listado ao lado
00:07:54dos seus outros servidores MCP instalados, com todas as 15 ferramentas prontas para o agente usar.
00:08:00Então, para usar o Inspo, basta dar ao seu agente um prompt do site que você deseja construir.
00:08:05Nós testamos com uma landing page de demonstração de moda. No prompt, pedimos para o agente nos dar algumas
00:08:11opções de estilo antes de começar a codificar. Não é obrigatório pedir alternativas, mas fazer isso
00:08:15antes do desenvolvimento permite ajustar o rumo antes de o site estar pronto e pedir
00:08:20uma direção diferente. Ao enviarmos o prompt, mesmo sem termos pedido explicitamente para usar
00:08:25o Inspo, o agente acionou o MCP do Inspo que tínhamos conectado antes. Em vez de enviar direto o seu prompt,
00:08:31o agente primeiro adiciona mais palavras-chave relacionadas ao estilo solicitado no pedido original.
00:08:36Isso ajuda muito quando você envia um prompt pouco detalhado sobre o site que deseja,
00:08:40permitindo afunilar a busca exatamente para o que você precisa e fazer o MCP encontrar
00:08:46referências exatas que correspondem ao que você está pedindo. Ele então analisa as referências retornadas e
00:08:50compara os padrões que elas têm em comum, identificando quais escolhas de design pertencem àquele estilo.
00:08:55No nosso caso, o agente analisou cerca de 24 sites e usou essas referências para tomar suas decisões de design.
00:09:01Para o nosso site, o agente nos deu três direções de design e descreveu cada uma para que pudéssemos escolher.
00:09:06Assim que escolhemos uma direção, ele começou a construir a página. E quando terminou de montar o site,
00:09:11o resultado ficou diferente dos designs que vínhamos obtendo dos modelos sozinhos, mesmo usando uma skill de design.
00:09:16A primeira seção da página usa imagens em vez de colocar um texto enorme ocupando toda a largura, algo que os modelos costumam fazer.
00:09:23O agente usou fontes em negrito e cores neutras, combinando com o tema que pedimos.
00:09:27Agora, se você já deu um site ao agente para usar como referência, sabe que na maioria das vezes ele acaba copiando o design daquele site exatamente, em vez de usá-lo como inspiração.
00:09:37Por isso, queríamos ver se a nossa página tinha feito a mesma coisa ou se tinha realmente seguido o estilo ao longo de todas as referências.
00:09:43Para isso, perguntamos ao agente quais sites ele tinha usado como referência, e ele nos forneceu os links de todos eles.
00:09:49Quando verificamos esses sites, todos pareciam diferentes entre si, e a nossa página não tinha copiado nenhum deles exatamente.
00:09:54Ele pegou o estilo da seção principal de um site, os botões de outro e a forma como os produtos estavam organizados de um terceiro.
00:10:00Assim, o agente combinou partes dessas referências em um design que não se parecia com nenhum deles isoladamente.
00:10:05O agente também referenciou os layouts para dispositivos móveis, então ele tinha exemplos de como esses sites organizavam o conteúdo em telas menores.
00:10:12É por isso que o design também funcionou muito bem quando o testamos em uma tela menor.
00:10:16Mas, embora o design estivesse mais próximo do que havíamos pedido, a página ainda era estática e não tinha animações.
00:10:22Esse é um detalhe que deixa o site completo, e o Inspo não cuida dessa parte.
00:10:26Para resolver isso, usamos o servidor MCP UISkills.
00:10:29Esse MCP dá ao agente acesso a uma biblioteca de skills de design de diferentes autores,
00:10:34para que você possa pedir ao agente que encontre uma skill para o site em que está trabalhando,
00:10:38e ele procurará em sua biblioteca até filtrar as skills que correspondem ao seu pedido.
00:10:42Nós também já cobrimos esse MCP no nosso vídeo anterior.
00:10:46Então, para o nosso site, orientamos o agente a adicionar animações à página usando o MCP.
00:10:51Quando enviamos o prompt, ele carregou a skill de animação de Emil Kowalski e a skill de animação de rolagem de Mengto.
00:10:57O agente então adicionou as animações, e elas foram sincronizadas perfeitamente.
00:11:01Nós testamos o Inspo em vários outros sites também, e os resultados funcionaram bem na maioria das vezes nessas criações.
00:11:07Agora, embora essa ferramenta tenha projetado o site muito bem para nós, ela ainda é nova, então houve alguns problemas.
00:11:12Durante os nossos testes, em duas ocasiões ela pegou as referências erradas, embora nosso prompt tivesse especificado claramente o tipo de site que queríamos.
00:11:19As referências que o Inspo retornou eram de outros tipos de sites totalmente não relacionados.
00:11:24Em um dos testes, nosso prompt pedia um site de assinatura de café, mas recebemos referências de sites de saúde e negócios.
00:11:30Quando pesquisamos novamente selecionando o filtro da indústria de alimentos e bebidas, obtivemos referências de sites de café.
00:11:36E também existem alguns problemas nas capturas de tela que ele fornece.
00:11:38Algumas delas têm partes do design cobertas pelo pop-up que aparece quando você abre o site.
00:11:43Em nosso teste anterior, uma das capturas de tela tinha um pop-up de privacidade no meio da página, impedindo que o agente visse o design por trás dele,
00:11:50e ele acabou usando seu próprio raciocínio para construir essa parte do design, que é exatamente o que você instalou a ferramenta para evitar.
00:11:57É por isso que, como mencionamos antes, você precisa pedir as direções de design primeiro, da mesma forma que fizemos durante nossos testes,
00:12:03para que possa perceber se ele estiver se desviando na direção errada e enviar um novo prompt para corrigir esses problemas.
00:12:09Agora, o sistema de design que mostramos aqui, junto com outros recursos, estão todos disponíveis no AI Labs Pro, que é a nossa comunidade.
00:12:16Então, se você achou útil o conteúdo que produzimos e quer apoiar o canal, essa é a melhor maneira de fazer isso.
00:12:20O link está na descrição.
00:12:22Isso nos leva ao final deste vídeo.
00:12:24Se quiser apoiar o canal e nos ajudar a continuar fazendo vídeos como este, você pode fazer isso usando o botão Valeu demais abaixo.
00:12:30Como sempre, muito obrigado por assistir e nos vemos no próximo vídeo.

Key Takeaway

O Inspo corrige os designs genéricos de IA ao fornecer aos agentes de programação um servidor MCP gratuito com acesso a 832 sites reais, capturas desktop e mobile e arquivos design.md estruturados.

Highlights

  • O servidor MCP gratuito Inspo dá aos agentes de programação acesso a 832 sites e 2.320 capturas de tela para resolver o problema de layouts genéricos gerados por IA.

  • Cada site no banco de dados do Inspo inclui um arquivo design.md com valores exatos de paleta de cores, tipografia e medições de espaçamento.

  • A ferramenta recommend envia a descrição do projeto, analisa os layouts mais comuns entre os resultados e retorna até cinco referências visuais acompanhadas de três capturas de tela.

  • O comando de instalação do Inspo detecta automaticamente os agentes no sistema e instala a ferramenta no escopo do usuário via terminal.

  • A integração do MCP UISkills resolve a falta de animações nativas no Inspo ao carregar bibliotecas especializadas como as de Emil Kowalski e Mengto.

Timeline

A causa dos designs genéricos em modelos de linguagem

  • Os modelos de IA geram layouts previsíveis por padrão devido à alta frequência desses padrões nos dados de treinamento.
  • Arquivos Markdown com instruções em texto não conseguem transmitir o resultado visual final da combinação de componentes.
  • Skills de design tradicionais como o Hallmark ajudam com regras de estilo, mas carecem de contextuais visuais diretos.

Durante o treinamento, os modelos aprendem as estruturas visuais mais frequentes e as escolhem como o caminho mais seguro quando não há instruções específicas no prompt. Isso gera uma assinatura visual característica em cada modelo, como paletas fixas em azul, roxo ou laranja. Embora existam skills em Markdown que orientam o modelo sobre o que evitar, a descrição em texto não permite que o agente compreenda a harmonização estética final entre os componentes.

Estrutura e funcionamento do servidor MCP Inspo

  • O Inspo funciona como um servidor MCP gratuito que disponibiliza 832 sites e 2.320 páginas capturadas em versão desktop e mobile.
  • O arquivo design.md de cada site contém os dados exatos de cores, fontes e métricas de espaçamento extraídas da referência.
  • A ferramenta recommend processa a solicitação do usuário, filtra por setor ou tema e retorna até cinco referências similares com até três capturas de tela.

Em vez de depender apenas de regras em texto, o Inspo entrega referências visuais completas e arquivos de configuração estruturados. Quando uma solicitação é enviada, a ferramenta recommend busca correspondências e identifica a estrutura de layout mais frequente entre os melhores resultados. Para evitar excesso de dados no histórico do chat e confusão no modelo, o Inspo orienta o agente a analisar profundamente apenas algumas dessas referências.

Instalação e execução do Inspo no terminal

  • A instalação é feita via comando no terminal e roda no escopo do usuário.
  • O instalador identifica os agentes presentes na máquina e permite a instalação global ou direcionada a um cliente específico via flag.
  • Após o processo, o comando MCP no agente exibe 15 ferramentas prontas para execução.

O script de instalação varre o sistema em busca de agentes de programação compatíveis. A recusa no fluxo padrão cancela o processo, exigindo uma flag específica com o nome do cliente para instalações individuais. Por ser instalado no escopo do usuário, o Inspo permanece acessível em qualquer diretório de projeto assim que o agente é reiniciado.

Geração de layout e combinação de referências na prática

  • O agente expande o prompt inicial com palavras-chave relevantes antes de consultar o banco de dados do Inspo.
  • As decisões visuais resultam da fusão de componentes extraídos de múltiplos sites de referência.
  • O uso de referências móveis garante a adaptação correta do layout para telas menores.

Ao receber a instrução para criar uma landing page de moda, o agente analisou cerca de 24 sites e apresentou três direções de estilo antes da codificação. A página gerada combinou a seção principal de um site, os botões de outro e a grade de produtos de um terceiro, evitando a cópia literal de uma única fonte. A verificação dos links fornecidos pelo agente confirmou que as páginas originais tinham aparências distintas entre si.

Adição de animações e limitações do sistema

  • O Inspo não adiciona elementos dinâmicos ou animações ao código gerado.
  • A integração com o MCP UISkills permite carregar skills de animação de autores específicos para complementar o código.
  • Filtros manuais por setor são necessários quando o Inspo retorna referências fora do contexto do prompt.

Como o Inspo entrega páginas estáticas, utilizou-se o servidor MCP UISkills para aplicar as skills de animação de Emil Kowalski e Mengto ao projeto. Durante os testes, o Inspo apresentou falhas ao retornar referências de saúde para um prompt de café, problema corrigido com a aplicação manual do filtro de alimentos e bebidas. Além disso, pop-ups em capturas de tela podem obstruir o visual e forçar o agente a deduzir partes do layout.

Community Posts

No posts yet. Be the first to write about this video!

Write about this video