Habilidades de design insanas com Claude que você precisa para criar sites bonitos
AAI LABS
컴퓨터/소프트웨어창업/스타트업AI/미래기술
스크립트
00:00:00Há algo que as pessoas não entendem direito.
00:00:01Os modelos melhoraram muito no design e temos visto melhorias a cada dia.
00:00:05Mas, em algum momento, todos esses ótimos designs começam a parecer iguais.
00:00:08Então a verdadeira questão é: o que faz o seu design realmente se destacar?
00:00:12Muito disso se resume aos prompts e instruções certos.
00:00:15E é aqui que as habilidades entram, porque agora as que realmente funcionam podem ser empacotadas
00:00:19em um fluxo de trabalho reutilizável que você pode compartilhar com qualquer pessoa.
00:00:21Muitas pessoas vêm desenvolvendo habilidades para design, e algumas das melhores vêm
00:00:25direto das equipes por trás das ferramentas.
00:00:27Mas nem toda habilidade existente vale a pena, e muitas delas realmente não ajudam com
00:00:31o seu design.
00:00:32Para dar um contexto, somos uma empresa de software e este é o nosso canal, AI Labs, e neste
00:00:37canal mostramos como otimizar processos com IA, exatamente como otimizamos os nossos.
00:00:41Antes de mergulharmos em algumas das habilidades mais criativas, vamos começar com uma que forma a
00:00:46base de muitas outras habilidades de design.
00:00:48A habilidade de design front-end da Anthropic é a que molda a direção de design do seu site,
00:00:53e nós a usamos em nosso vídeo anterior também.
00:00:55Depois de gerar páginas de destino suficientes com IA, você começa a notar um padrão onde
00:01:00os sites são todos diferentes, mas de alguma forma parecem iguais.
00:01:03Isso acontece porque o modelo aprendeu com uma enorme quantidade de dados cheios dos mesmos padrões.
00:01:07Então, sempre que ele precisa tomar uma decisão de design, ele recorre à mais comum.
00:01:11Assim, o design continua derivando para as mesmas escolhas seguras e genéricas, não importa qual seja o projeto.
00:01:16na verdade.
00:01:17E esse é o problema exato que essa habilidade resolve.
00:01:19Ela escapa dessas escolhas seguras, forçando o modelo a se comprometer com uma direção de design real antes
00:01:24que escreva qualquer coisa.
00:01:25Em vez de usar o visual padrão e seguro, ele precisa escolher uma direção e manter a consistência
00:01:30com ela.
00:01:30Ela até menciona o famoso "lixo de IA" diretamente em seu arquivo skill.md, que é basicamente
00:01:36a folha de instruções da habilidade, para que o modelo pare de recorrer às mesmas fontes saturadas e aos
00:01:41gradientes roxos em fundos brancos.
00:01:42E isso importa mais do que parece.
00:01:44Porque, quando a maioria dos modelos constrói uma página de destino, eles tentam apenas estar corretos.
00:01:48Mas essa habilidade os empurra a se comprometer com uma direção de design.
00:01:52Portanto, nós a usamos principalmente em páginas de destino ou portfólios, onde o design em si faz parte
00:01:56do produto, já que dá ao modelo um ponto de vista mais forte antes de começar.
00:02:00Para testar, pedimos que construísse uma página de destino e passamos nossos requisitos.
00:02:03E ele gerou um site sem nenhum do "lixo de IA" comum, porque manteve a direção de design
00:02:08com a qual se comprometeu, em vez de derivar para os padrões usuais.
00:02:11No sistema de design da AI Labs, temos duas habilidades, cada uma feita para uma tarefa diferente.
00:02:15Existe a habilidade funcional, que cria a interface de usuário que as pessoas realmente usam, como painéis.
00:02:20E há uma para interface de marketing.
00:02:22Dentro da de marketing, o skill.md usa um prompt chamado "quebrar o padrão".
00:02:27E isso é basicamente a habilidade de design front-end da Anthropic.
00:02:29Apenas um pouco modificada.
00:02:31Nós a modificamos porque a original ficou um pouco desatualizada para os modelos mais novos.
00:02:35Opus 4.8 e Fable 5 chegaram com guias de prompt que mostram como o Claude mudou
00:02:40e como as instruções que você dá a ele também precisam mudar.
00:02:42Então, incorporamos uma versão disso em nosso próprio sistema de design.
00:02:45Como já dissemos, a habilidade de design da Anthropic não funciona bem com interface funcional.
00:02:50Quando você está construindo produtos reais, o problema muda completamente.
00:02:53Você não está apenas tentando deixar algo bonito.
00:02:55Você está tentando construir algo que funcione como produto
00:02:58com muitos componentes que precisam se comportar corretamente.
00:03:01É aqui que as coisas mudam de páginas de destino para aplicações reais.
00:03:04Por exemplo, no AI Labs Pro, você pode ver que a página de destino tem uma linguagem de design
00:03:09muito mais artística, em oposição à camada funcional da comunidade, que parece muito chata
00:03:14e comum, como qualquer outra interface web com a qual você já interagiu.
00:03:18E é aí que entra o ShadCN.
00:03:20Agora os modelos podem, com certeza, construir painéis por conta própria.
00:03:23Mas cada um dos componentes comumente usados em painéis já existe,
00:03:27construído em um padrão profissional por pessoas reais.
00:03:29Então o modelo não precisa gerar componentes do zero e configurar animações por conta própria.
00:03:34Ele pode simplesmente puxar o componente que já está pré-construído no registro,
00:03:38que é basicamente uma grande biblioteca de componentes prontos.
00:03:41Esse é o objetivo do ShadCN.
00:03:43Em vez de o modelo construir cada componente manualmente,
00:03:46ele simplesmente puxa dessa biblioteca de peças que já são de nível profissional e as usa no seu aplicativo.
00:03:51E é por isso que o resultado parece um produto real.
00:03:53Porque você não está começando de um rascunho e consertando aos poucos.
00:03:57Você está começando com peças que já foram feitas para o lançamento.
00:03:59A configuração do ShadCN tem duas partes que trabalham juntas.
00:04:02A primeira é a habilidade.
00:04:03Pense nisso como um livro de regras.
00:04:05O ShadCN tem uma maneira específica e correta de construir as coisas, e a habilidade contém todas essas regras.
00:04:10Além disso, ele analisa como seu próprio projeto está configurado.
00:04:12Então, quando você pede ao modelo para construir algo,
00:04:15a habilidade garante que o resultado siga as regras do ShadCN e se encaixe em como seu projeto já funciona.
00:04:20O benefício é simples.
00:04:21Você obtém uma saída limpa na primeira vez, em vez de ter que voltar e corrigir os mesmos erros repetidamente.
00:04:26A segunda é o MCP do ShadCN.
00:04:29É basicamente uma conexão ao vivo com o registro do ShadCN
00:04:32que permite que o modelo navegue e puxe componentes reais diretamente para o seu projeto.
00:04:36Agora você pode pensar:
00:04:37por que usar a habilidade se o MCP já existe e te dá os componentes que você precisa?
00:04:41A resposta é que a habilidade só carrega quando é realmente necessária,
00:04:44em vez de ficar na janela de contexto o tempo todo, como o MCP faz.
00:04:48A habilidade ShadCN dá ao agente de codificação as regras,
00:04:50os padrões e o contexto sobre o seu projeto.
00:04:53Juntos, eles dão ao modelo o julgamento para usar os componentes corretamente.
00:04:56Com um aplicativo normal, você constrói um componente de cada vez, e essa abordagem funciona bem.
00:05:00Então, você pode esperar que isso se aplique diretamente a um painel.
00:05:03E, em parte, funciona.
00:05:04Mas painéis têm um problema central diferente dos aplicativos comuns.
00:05:07Trata-se menos de manter os componentes consistentes e mais sobre como todas as informações são organizadas
00:05:12na tela.
00:05:12Isso significa descobrir como agrupar os dados e quanto pode caber em uma tela antes que fique muito bagunçado.
00:05:17Portanto, há uma habilidade separada chamada "painel", feita exatamente para isso.
00:05:21Não feita pelo ShadCN, mas por outro desenvolvedor.
00:05:23E ela foca o modelo exatamente nessa organização.
00:05:26E, como ele raciocina através dessa organização primeiro, o resultado parece realmente uma ferramenta de
00:05:30análise, em vez de algo confuso.
00:05:33O UIUX Pro Max funciona de maneira diferente de tudo até agora.
00:05:36A maioria das habilidades passa para o modelo alguns princípios de design e confia nele para aplicá-los.
00:05:40Mas esta aqui executa um motor real primeiro.
00:05:43O problema em torno do qual foi construída é que, mesmo com boa direção e um conjunto sólido de componentes,
00:05:47o modelo ainda precisa decidir que tipo de escolhas de design se encaixam no seu produto.
00:05:51A maioria das habilidades trata o design como uma ideia geral de "bom".
00:05:54Portanto, tudo deriva para o mesmo visual, não importa o que você esteja construindo.
00:05:58E essa é a lacuna que essa habilidade fecha.
00:06:00Quando você pede para construir algo, ele não pula direto para o código.
00:06:03Ele executa um motor primeiro.
00:06:04Nos bastidores, esse motor dispara cinco pesquisas de uma vez em seu próprio banco de dados de código aberto
00:06:09no GitHub.
00:06:11Ele puxa os estilos que se encaixam no seu produto de 161 categorias da indústria.
00:06:15E, dessas escolhas, ele seleciona uma paleta de cores, uma combinação de fontes e um layout de página que realmente
00:06:20combina com a indústria para a qual você está construindo.
00:06:22Em seguida, ele filtra qualquer coisa que pareceria errada para esse tipo de produto e entrega ao
00:06:26modelo um sistema de design sob medida, que é basicamente o livro de regras completo que o modelo segue para
00:06:31construir o site.
00:06:32Então você obtém um site genuinamente forte, onde ele combina cada atributo de design com sua ideia de site.
00:06:37Em vez de o modelo inventar um design e torcer para que funcione, ele constrói a partir de um
00:06:41que foi realmente pensado para o seu caso de uso exato.
00:06:44Essa habilidade é realmente diferente das outras.
00:06:46As outras dão ao modelo melhor "gosto", enquanto esta lhe dá uma decisão antes de começar,
00:06:50ajustada ao tipo de produto que você está realmente criando.
00:06:53Mas, antes de prosseguirmos, vamos ouvir nosso patrocinador, SciSpace.
00:06:56Se você faz qualquer tipo de pesquisa, provavelmente já usou o ChatGPT para isso.
00:07:00O problema é que ele inventa citações e artigos com confiança que nem sequer existem,
00:07:04e você geralmente não percebe até que aquela citação falsa já esteja em seu artigo.
00:07:08O SciSpace resolve isso, e agora ele vive dentro do ChatGPT.
00:07:12Para testar, abri o SciSpace, naveguei até meu perfil e selecionei o aplicativo ChatGPT de lá para
00:07:17conectar o SciSpace.
00:07:18Pedi uma revisão de literatura, e o ChatGPT puxou estudos relevantes da biblioteca do SciSpace com mais de 280
00:07:24milhões de artigos reais.
00:07:25Ele também os resumiu e me deu citações reais clicáveis em vez de alucinar.
00:07:30E cada citação tem um link direto de volta para a fonte.
00:07:33Assim, você pode abrir o artigo e verificar a linha exata por conta própria com um clique.
00:07:37Em testes diretos, ele até exibiu mais artigos relevantes do que ferramentas como Elicit e Consensus.
00:07:42Portanto, se você é estudante ou pesquisador, conecte o aplicativo SciSpace dentro do ChatGPT usando o primeiro link
00:07:48na descrição e comece a obter pesquisas nas quais você finalmente pode confiar.
00:07:52Até agora, tudo o que adicionamos faz o site parecer correto enquanto está parado.
00:07:56Mas uma página estática só te leva até certo ponto.
00:07:58As animações são realmente importantes porque melhoram a experiência do usuário e aumentam o tempo que
00:08:04as pessoas passam no site. Mas o problema é que animação é onde o código gerado por IA falha.
00:08:09O problema real é que, quando você pede a um modelo para adicionar animação, ele quase sempre faz exatamente
00:08:15a mesma coisa, onde as coisas deslizam para a tela enquanto você rola a página. Esse "deslizar" ao rolar é basicamente
00:08:20o único truque que ele conhece. Mas é também a mesma animação em metade dos sites construídos por IA,
00:08:25e não chega nem perto do que o movimento real pode fazer.
00:08:27É aqui que entra a habilidade GSAP. GSAP é a biblioteca de animação na qual muitos sites profissionais
00:08:32já rodam, e essa habilidade vem direto da equipe que a constrói. Então, em vez de o
00:08:37modelo adivinhar como funciona, ele trabalha a partir dos padrões corretos, e cobre tudo, desde
00:08:42movimento básico até as animações maiores que ocorrem conforme você rola a página. Ela também lida com o
00:08:47lado do desempenho, que é a parte que a maioria das pessoas subestima. Uma grande razão pela qual animações de IA parecem
00:08:52travadas é que o modelo move as coisas alterando seu tamanho ou posição, e essas mudanças forçam o
00:08:57navegador a reconstruir a página inteira em cada quadro. Então, a habilidade direciona o modelo para o
00:09:02tipo de movimento que o navegador consegue lidar facilmente, e esse hábito sozinho é o que mantém a animação
00:09:07suave. GSAP é melhor em páginas de destino e storytelling guiado por rolagem, onde tudo é
00:09:12revelado como uma história, para que os detalhes importantes cheguem ao espectador, e é isso que leva o
00:09:16seu site de uma página estática para uma dinâmica. É por isso que, no sistema de design da AI Labs, mencionamos explicitamente
00:09:22na habilidade de interface de marketing que, sempre que animações forem necessárias, deve-se usar a
00:09:27habilidade GSAP para implementar essas animações. Este próximo grupo de habilidades não é para
00:09:33sistemas completos. São predefinições de "gosto" que você aplica para levar o modelo a um visual específico de sua escolha.
00:09:38Primeiro, há a interface minimalista. É o tipo de design onde, em vez de colocar muita coisa na
00:09:43página, você mantém as coisas simples e abertas. É a que você escolhe para jornais ou blogs, onde você quer que o
00:09:49conteúdo respire, em vez de tudo lutar por atenção. No lado oposto, existe
00:09:54a habilidade de interface brutalista industrial, que é bruta e pesada, com aquele estilo anti-corporativo. Então há
00:09:59a front-end UI UX, uma escolha geral para padrões sólidos quando você não quer nada extremo. É a
00:10:05escolha segura para um produto ou página de destino de empresa que só precisa parecer limpa e profissional. E depois
00:10:10há a habilidade de interface front-end premium, que faz os sites parecerem aqueles de marcas de luxo.
00:10:16Então, você não empilha tudo isso de uma vez. Em vez disso, você escolhe a que combina com a vibe que você procura
00:10:21e deixa que ela guie o design. Então, se você já tem uma direção na cabeça, essas são a maneira mais rápida
00:10:25de passá-la direto para o modelo. A essa altura, você pode construir um site estruturado,
00:10:30que se move bem e tem um estilo real. Mas sites de nível profissional precisam de mais do que apenas animações. Para
00:10:36aplicativos profissionais, você precisa de visuais reais de imagem e vídeo. Modelos por conta própria geralmente pegam imagens de banco
00:10:41na internet, e na maioria das vezes elas não correspondem ao que você precisa. Higgs Field é
00:10:46o que usamos para pular essa etapa. Ele conecta a geração de imagem e vídeo diretamente ao seu agente, para que você possa pedir
00:10:51uma imagem hero ou um clipe de fundo bem onde você está trabalhando, sem sair do terminal.
00:10:56E o Higgs Field não está preso a um único modelo. Ele tem a maioria dos bons modelos de imagem e vídeo, então você não
00:11:01está preso aos pontos fortes de apenas um e pode usar o que melhor lhe convier. Se você está fazendo vídeo,
00:11:06o Cdance é o que vale a pena usar, já que é um dos melhores modelos de geração de vídeo agora, então você obtém
00:11:12visuais reais em vez de texto estático ou caixas cinzas de espaço reservado no seu site. As habilidades anteriores
00:11:17eram todas para a web. Agora vamos cobrir habilidades móveis, onde muita interface gerada por IA silenciosamente
00:11:23falha por uma razão simples. Modelos tendem a tratar um celular como um site pequeno, pegando os mesmos hábitos
00:11:29da web e encolhendo-os. Mas celular não é uma web menor. É sua própria coisa com suas próprias regras. A forma
00:11:35como as pessoas seguram um celular onde seu polegar realmente consegue alcançar, como a navegação deve funcionar, é tudo diferente
00:11:40e cada plataforma tem sua própria linguagem de design que o modelo geralmente não segue corretamente. Existem
00:11:45várias habilidades para otimizar o desenvolvimento móvel também. A primeira é o design de interface móvel, a camada de
00:11:51princípios. Por conta própria, o modelo trata as regras de um bom design móvel de forma bem solta, mas esta habilidade
00:11:56as incorpora diretamente. Isso cobre coisas como a "zona do polegar", que mantém os botões principais onde seu
00:12:01polegar realmente alcança, junto com espaçamento consistente e um conjunto limitado de tamanhos de fonte, em vez de 10
00:12:06diferentes. E essas são basicamente as mesmas regras por trás de aplicativos populares como Airbnb, Duolingo,
00:12:11e Spotify. Então o modelo acaba projetando com esse senso, em vez de adivinhar. A segunda é
00:12:16o Material 3, que é basicamente a versão móvel do que o ShadCN fez para a web. Ele dá ao modelo
00:12:21o sistema de design real do Google, aquele por trás da maioria dos aplicativos Android e Pixel. A linguagem do Google tem uma
00:12:27personalidade real. É ousada e colorida, com formas grandes arredondadas e movimento elástico que se sentam no
00:12:33extremo mais expressivo do design móvel. A habilidade traz todo o sistema de componentes e cores, então você dá
00:12:38uma cor e ele constrói um tema completo combinando. Ele até verifica o quão perto seu app segue as diretrizes do
00:12:43Google, para que o aplicativo que você está construindo corresponda exatamente ao sistema de design. Mas se você está construindo
00:12:48totalmente nativo no iPhone, você pode usar as habilidades Swift UI. O design da Apple se senta no extremo oposto ao do Google.
00:12:53Onde o Material é ousado e colorido, a Apple é mais contida e se apoia naquele visual translúcido,
00:12:58de vidro, que agora chama de "vidro líquido". A habilidade puxa a própria documentação da Apple direto do
00:13:04Xcode no seu Mac e entrega ao modelo como regras. Assim, o modelo não está adivinhando como um
00:13:09aplicativo da Apple deve parecer, ele está trabalhando a partir da orientação real da Apple. E em vez de algo que só
00:13:14parece aproximadamente com um app de iPhone, você na verdade obtém um que parece nativo. E se você está construindo para
00:13:18iPhone e Android ao mesmo tempo, existe a habilidade oficial do Expo. Expo é uma estrutura para
00:13:23fazer um app que roda tanto em Android quanto em iOS. Então você não está construindo o mesmo app duas vezes. Ela cobre
00:13:29tudo o que você precisa para um app real que roda em ambos, desde a navegação e estilo até os recursos da
00:13:34plataforma, tudo em um só lugar. Então, quer você esteja construindo para uma plataforma ou ambas ao mesmo tempo, há uma habilidade
00:13:39que realmente conhece o território. Agora, todas as habilidades e fluxos de trabalho e tudo o mais que construímos e
00:13:43mostramos nesses vídeos podem ser encontrados no AI Labs Pro, que é nossa comunidade. É lá que você
00:13:48obterá os recursos, os pacotes iniciais e mais, junto com um lugar para interagir com um monte de nerds,
00:13:53incluindo nossa equipe. Então, se você encontrou valor no que fazemos e quer apoiar o canal,
00:13:58esta é a melhor maneira de fazer isso. O link está na descrição. Isso nos traz ao fim deste
00:14:02vídeo. Se você gostaria de apoiar o canal e nos ajudar a continuar fazendo vídeos como este, você pode fazer isso
00:14:07usando o botão "valeu demais" abaixo. Como sempre, obrigado por assistir e vejo você no próximo.