Pular para o conteúdo

6 repos de design com IA em alta no GitHub que você precisa usar

Ver no idioma original →

Autoria: AI LABS · Assistir no YouTube

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: 6 Insane Trending GitHub AI Design Repos You Need to Use · Canal: AI LABS · 09:50 · Assistir no YouTube

Tópicos: Agentes de IA, Engenharia de software com IA, Geração de conteúdo com IA, Mercados e economia

O vídeo apresenta seis repos do GitHub que ajudam agents a criar, revisar e divulgar produtos com mais atenção ao design. As demonstrações mostram como buscar referências visuais, verificar layouts responsivos, aplicar estilos, extrair detalhes de design e produzir imagens para lojas de apps. Também é apresentado o Brag, que cria vídeos de lançamento, com o alerta de que o resultado pode incluir cenas e interações que não correspondem exatamente ao produto real.

  • Awards MCP permite buscar sites de referência e usar seus elementos visuais como inspiração antes da implementação.
  • Responsively permite visualizar páginas em diferentes tamanhos de tela e conectar essa análise ao agent por meio de MCP.
  • Genjutsu oferece skills para ajustar uma parte da página, planejar e construir uma página inteira ou coordenar a construção de várias páginas com subagents.
  • Bunshin cria páginas em paralelo e usa revisões iterativas para corrigir problemas, embora seu desempenho varie conforme o estilo escolhido.
  • Dem Brand extrai detalhes de design de um site e pode salvá-los em um arquivo design.md para orientar a implementação.
  • App Store Screenshots transforma capturas reais do app em imagens promocionais para lojas como as de iOS e Android.
  • Brag cria vídeos de lançamento a partir de um projeto; o modo Slim teve resultados melhores no teste, mas depende de modelos maiores.
  • Os vídeos gerados pelo Brag devem ser conferidos, pois podem mostrar cenas reconstruídas e cliques que não ocorreram no app.
Início Capítulo Resumo
00:00 Referências de design com Awards MCP O vídeo apresenta os repos e mostra como usar sites de referência para orientar o design de uma página.
02:05 Testes de design e Responsively A demonstração compara uma página feita com e sem referências e mostra como verificar layouts em diferentes telas.
04:39 Genjutsu, Bunshin e Dem Brand O vídeo explora skills de design, construção paralela de páginas e extração de estilos de sites existentes.
07:15 Imagens para lojas e vídeos de lançamento App Store Screenshots cria imagens promocionais, enquanto Brag gera vídeos de lançamento que precisam ser conferidos.

O modelo é realmente importante, mas mais importantes são as ferramentas que damos a ele para trabalhar. — 00:00

O agent pode procurar as partes que não se encaixam. — 03:38

Uma captura de tela pode mostrar ao agent o visual que queremos, mas ele ainda precisa adivinhar detalhes como o espaçamento. — 05:41

Precisamos conferir se o que o vídeo mostra corresponde ao que o app realmente pode fazer. — 08:48

  • Awards MCP (repo): Repo que ajuda agents a buscar sites premiados como referência de design antes de construir uma página.
  • Responsively (ferramenta): App para Mac que exibe páginas em vários tamanhos de tela e pode fornecer capturas ao agent por MCP.
  • Genjutsu (repo): Repo com três skills para aplicar estilos, planejar páginas e coordenar a construção de páginas com subagents.
  • Bunshin (conceito): Skill do Genjutsu que organiza a construção paralela de páginas, com um agent principal e etapas de revisão.
  • Dem Brand (repo): Repo que extrai estilos de um site e pode registrá-los em um arquivo design.md para orientar uma construção.
  • App Store Screenshots (repo): Repo que transforma capturas de tela reais de um app em imagens promocionais para páginas de lojas de aplicativos.
  • Brag (repo): Repo que usa informações e elementos visuais de um projeto para criar um vídeo de lançamento e um texto curto.
  • HyperFrames (ferramenta): Ferramenta de criação de vídeo usada pelo modo Full do Brag.
  • Opus 5.5 (modelo): Modelo para o qual o modo Slim do Brag foi desenvolvido, segundo o vídeo.
  • Klein (ferramenta): Ferramenta apresentada no vídeo, disponível como app para desktop, extensão do VS Code e CLI.

00:00 Podemos continuar trocando de modelo e ainda acabar com sites que parecem gerados por IA. O modelo é muito importante, mas as ferramentas que damos a ele para trabalhar são ainda mais importantes. Estes seis repos do GitHub dão mais suporte de design aos nossos agents, e nós os testamos para ver o que realmente muda. Um deles vai além de apenas dar regras de design ao nosso agent e muda a forma como ele lida com todo o processo de build; outro pega o que criamos e nos ajuda a mostrar às pessoas por que elas realmente gostariam de usar aquilo. Se esta é sua primeira vez aqui, somos uma empresa de software, e este é o nosso canal, AI Labs. E, neste vídeo,

00:30 vamos passar por cada um desses repos e pelos resultados que obtivemos. Se simplesmente [bufa] deixarmos o design por conta do nosso agent, podemos acabar com os mesmos estilos que já vimos em outros sites criados por IA. Por isso, precisamos mesmo dar a ele as referências e inspirações certas. Nosso primeiro repo, o Awards MCP, permite escolher sites reais para ele estudar antes do build. O Awards é basicamente um site que premia o design de páginas da web, então podemos conferir as escolhas dele e encontrar um estilo que combine com nosso projeto. Podemos configurar o MCP para que nosso agent comece a usar as ferramentas dele. Depois, basta descrever o tipo de

01:01 site que queremos, e o agent pesquisa exemplos no Awards. Ele obtém capturas de tela com links para os sites. Isso significa que podemos escolher uma aparência com base nas próprias páginas. O repo também tem uma skill, que é basicamente um conjunto de etapas para estudar os sites antes do build. Depois que escolhemos um site, nosso agent pode ler os detalhes de design listados na página dele no Awards. Com as ferramentas de navegador configuradas, nosso agent pode fazer uma captura de tela da página inteira e registrar como ela se movimenta. Então, basta pedir ao nosso agent que crie nossa página usando as partes de que gostamos nesses sites. Além disso, podemos usar os repos deste vídeo com qualquer

01:34 agent de IA que ofereça suporte às ferramentas deles. Mas, neste vídeo, estamos usando o Klein, que patrocina este vídeo. O Klein está disponível em vários formatos. Está disponível como aplicativo para desktop e como extensão do VS Code, mas vamos usar o Klein CLI, que roda no terminal, assim como o Claude Code. E encontramos mais uma coisa ao usar o Awards MCP: não podíamos usar um único site como inspiração. Vamos falar mais sobre isso daqui a pouco. Para começar, vamos usar o comando de configuração do Awards, que nos pede para escolher as configurações ou usar as opções padrão. Não use as opções padrão

02:05 aqui, porque muitas das ferramentas que acabamos de mencionar não vêm ativadas por padrão. Você precisa escolher estas opções específicas. E, se quiser, pode pausar o vídeo para anotá-las. Já tínhamos pedido ao nosso agent que criasse uma página inicial de demonstração para um site que vende skills para agents, e este é o primeiro resultado, sem o Awards MCP. Não está ruim, mas faltam muitas das animações e dos efeitos visuais que queríamos. Então, usamos o comando de inspiração do Awards, que nos faz algumas perguntas antes de nos mostrar esta lista de sites de produtos de software. Conferimos cada um deles, mas não gostamos muito de

02:35 nada da primeira lista, então pedimos outra. Desta vez, ele nos deu algumas opções realmente boas. Dissemos ao nosso agent de quais partes dos sites escolhidos gostamos. Usamos a página inicial do Whisper Flow como referência para a forma como o próprio produto era apresentado na página e, como inspiração para as animações, mostramos a ele o site butter.video. E este é o site que obtivemos no final, com animações que ficaram muito melhores do que na primeira versão. Talvez você tenha notado que não estávamos usando modelos da Claude ou da OpenAI. Isso porque estávamos usando o Client Pass, que basicamente nos dá acesso a muitos modelos OpenWeight

03:06 . E esses modelos ficaram muito bons em design e oferecem uma boa relação custo-benefício. Além disso, usando o link na descrição, você poderá obter o Client Pass com desconto no primeiro mês. Nosso segundo repo ajuda com algo que os agents de IA podem deixar passar. Podemos passar muito tempo deixando nosso site ótimo em um laptop, só para descobrir que ele não fica bem em um celular ou tablet. O Responsively é basicamente um aplicativo para Mac que resolve esse problema para seus agents de IA. Basta abrir o link do nosso site no aplicativo e escolher os tamanhos de tela que queremos ver lado a lado. Então, este é o aspecto do

03:38 aplicativo. Temos nossa página inicial aberta em três visualizações separadas, e podemos percorrê-las para conferir como a página fica em cada tamanho. Mas adicionar outro aplicativo só para conferir como nosso site aparece em telas diferentes não vai nos atrasar? Na verdade, não, porque podemos conectar o servidor MCP do Responsively ao nosso agent, para que ele confira a página e corrija o que não se encaixar depois do build. O aplicativo envia uma captura de tela de cada visualização. Isso permite que nosso agent procure as partes que não se encaixam. Ele também pode abrir um menu para conferir como a página fica com esse menu aberto. Depois que nosso agent faz

04:08 uma correção no site, ele pode fazer novas capturas de tela para conferir essa correção em cada tamanho. Antes de passarmos ao próximo repo, seria ótimo se você se inscrevesse no canal e apertasse o botão de hype. Esse pequeno gesto de apoio nos ajuda muito. Depois de [bufa] algum tempo, até os designs de modelos novos começam a parecer conteúdo genérico de IA. Por isso, usamos skills, que basicamente dão ao nosso agent o senso estético de uma pessoa para seguir. Já falamos sobre a skill Taste e o Hallmark neste canal, e Genjutsu é outra que encontramos. Genjutsu tem três skills, e podemos usar a primeira

04:39 delas, Cast, para mudar apenas uma parte da página com o senso estético de design da skill. Paint serve basicamente para planejar e criar uma página inteira. Já a skill Bunshin é, na verdade, um sistema de agent completo reunido em uma única skill. Com Bunshin, nosso agent atribui cada página a um subagent separado, que é basicamente um agent auxiliar. Isso significa que várias páginas podem ser criadas ao mesmo tempo. Nosso agent principal lidera a equipe e define um estilo compartilhado, para que essas páginas ainda pareçam partes do mesmo site. Outros agents então conferem os resultados e enviam os problemas de volta para serem corrigidos. Essas

05:10 rodadas param quando restam apenas pequenos problemas ou quando atingem o limite que definimos. Elas também param se uma rodada não corrigir nada. Mas será que funciona tão bem com todos os estilos? Usamos Bunshin com a mesma ideia de aplicativo da demonstração anterior. Quando ele perguntou qual estilo de design queríamos, escolhemos o estilo ilustrativo e colorido para ver como ele lidaria com isso. E foi isto que ele criou, com pequenas animações por toda a página. Mas são as ilustrações que realmente dão à página um visual que não parece o de um site típico de IA, que era nosso principal objetivo aqui. Também testamos um estilo minimalista, e este foi o resultado. Algumas

05:41 partes, como a disposição do texto, realmente parecem diferentes, mas a página ainda se aproxima mais de um design típico de IA. Então, ele se sai muito bem com alguns estilos, mas, com outros, não produziu um resultado significativo. Uma captura de tela pode mostrar ao nosso agent a aparência que queremos, mas ele ainda precisa adivinhar os pequenos detalhes, como o espaçamento. Nosso quarto repo, Dem Brand, basicamente extrai esses detalhes de design diretamente do site. Ele abre a página em um navegador e lê os estilos usados nela. Isso permite que nosso agent os use na nossa própria criação. Com a skill dele, basta dar ao nosso agent o

06:13 link do site e pedir que obtenha os detalhes de design. Também podemos pedir que os salve em um arquivo design.md, que funciona como um guia de estilo a ser seguido quando ele criar nossa página. Mas e se nosso agent mudar o design por engano durante uma edição posterior? Podemos salvar os detalhes de design antes da edição e, depois, pedir ao Dem Brand que os compare com uma nova análise para ver quais detalhes realmente mudaram. Usamos a skill para obter os detalhes de design do Gumroad, que tem um estilo bem distinto. Ele salvou esses detalhes no design.md, e usamos esse arquivo para pedir ao nosso agent que criasse esta página inicial

06:44 página. A página não é exatamente igual à do Gumroad, mas o estilo parece muito familiar. Também pedimos ao nosso agent que adicionasse animações criativas em HTML, e foi isso que ele criou. As animações seguem o mesmo estilo do restante da página e ficaram realmente incríveis. Também temos nossos próprios workflows e skills como esses no AI Labs Pro, que é a nossa comunidade. Lá também estão os sistemas que desenvolvemos ao longo dos nossos vídeos. Então, se você quiser ter acesso a eles e apoiar o canal, o link está na descrição. As pessoas [fungam] em uma loja de aplicativos realmente precisam ver o que nosso app faz e por que gostariam de usá-lo. Com

07:15 nosso quinto repo, App Store Screenshots, podemos transformar capturas de tela reais em imagens para a página do nosso app na loja. Com a skill configurada, basta fornecer ao nosso agent capturas de tela reais e o ícone do nosso app e, em seguida, explicar o que o app faz. Também podemos escolher a loja e o estilo que queremos. Então, nosso agent configura um editor no computador, que é basicamente um pequeno app no qual ele cria as imagens da loja com base nas nossas capturas de tela. Quando gostamos do design, podemos escolher um dispositivo e baixar as imagens nos tamanhos disponíveis no editor. Ele coloca tudo em um arquivo zip, então basta enviá-lo para

07:46 a loja. E o projeto também continua no nosso computador. Isso significa que podemos editar as imagens novamente sempre que nosso app mudar. Então, vamos usar como exemplo este app de demonstração de acompanhamento de hábitos. Temos um app para dispositivos móveis aqui, e nosso agent transformou as capturas de tela dele nessas imagens para a App Store. No momento, ele só preencheu as imagens para iOS, mas também pode fazer isso para Android. E, se nosso app estiver disponível para Mac, ele também pode criar essas imagens. Tudo isso pode ser feito pelo nosso agent. Então, se você precisar mudar alguma coisa, basta pedir para ele fazer isso. >> [fungam] >> Criar um produto com IA pode, na verdade, ser mais fácil do que conseguir que as pessoas o comprem.

08:18 Então, ainda precisamos de uma forma de mostrar por que ele é útil. Nosso sexto repo, Brag, basicamente transforma nosso projeto em um vídeo de lançamento. A skill faz nosso agent ler o projeto e usar o design e o texto do app para planejar o vídeo. Isso significa que não precisamos planejar tudo por conta própria. O Brag tem dois modos, e o primeiro é o modo completo. Ele usa uma ferramenta de criação de vídeos chamada HyperFrames e fornece ao nosso agent uma série de etapas para seguir ao criar o vídeo. O segundo, o modo slim, foi desenvolvido para Opus 5.5 e dá ao nosso agent mais liberdade para escolher as próprias ferramentas e

08:48 como criar o vídeo. Em qualquer um dos modos, podemos pedir um vídeo sobre o produto inteiro ou focar em apenas um recurso. Também podemos escolher a sensação que queremos transmitir, conferir uma prévia e pedir alterações antes de o nosso agent salvar o vídeo finalizado. O Brag busca criar um vídeo de cerca de 20 segundos. Recebemos um arquivo MP4 que podemos enviar junto com uma imagem de capa. Ele também escreve uma publicação curta para acompanhar o vídeo. Mas esse vídeo é realmente uma gravação do nosso app? Nem sempre, e isso é algo a que precisamos ficar atentos. O Brag pode recriar partes do app como cenas e adicionar cliques que não

09:19 aconteceram de verdade. Então, precisamos verificar se o que ele mostra corresponde ao que nosso app realmente consegue fazer. Então, fornecemos ao nosso agent o link do GitHub e pedimos que instalasse as skills na nossa pasta. Depois que ele as instalou, usamos o comando Brag e pedimos que criasse um vídeo para esta landing page neste link. Esta é a landing page do Skillb que mostramos antes. Agora, este é o vídeo feito pelo modo completo, e podemos ver que ele reutiliza partes da landing page. Como não tínhamos um produto de verdade, a landing page era tudo o que ele tinha para usar. No geral, ele simplesmente percorre as seções uma por uma, e é só isso. E

09:50 este é o vídeo feito pelo modo slim. Ele começa com um gancho e depois percorre as outras seções, assim como o modo completo. Mas, desta vez, não se limita a copiar essas seções. Ele acrescenta as próprias ideias criativas, e por isso o resultado ficou muito melhor nos nossos testes. Mas o modo slim só funciona melhor quando usamos modelos maiores com ele. Com isso, chegamos ao fim deste vídeo. Se quiser apoiar o canal e nos ajudar a continuar fazendo vídeos como este, você pode fazer isso usando o botão Super Thanks abaixo. Como sempre, obrigado por assistir, e até o próximo vídeo.

Transcrição original

[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.