Habilidades de Design Insanas do Claude Que Você Precisa Para Construir Sites Bonitos
AAI LABS
컴퓨터/소프트웨어AI/미래기술
스크립트
00:00:00Há muitas habilidades por aí que permitem criar sites bonitos com IA, e cada uma delas
00:00:04é diferente, mas nem todas funcionam. Algumas têm um fluxo de trabalho intensivo que parece impressionante
00:00:09e, no fim das contas, ainda geram um site que se parece com qualquer outro. Apenas algumas
00:00:13delas realmente entregam resultados. Agora você deve estar se perguntando por que precisaria dessas habilidades em primeiro lugar,
00:00:17já que os modelos já são potentes o suficiente e criam designs muito bons hoje em dia. Mas não importa quão
00:00:22potente seja o modelo, cada um segue seu próprio padrão ao criar, e esse padrão é fácil
00:00:26de identificar. É por isso que você precisa de algo para afastá-los desse padrão e realmente fazer o seu
00:00:30site se destacar. Essas habilidades são desenvolvidas por pessoas que têm vasta experiência em design
00:00:36e reformataram o fluxo de trabalho que testaram e que funcionou para elas em um formato reutilizável, para que
00:00:41você também possa usá-lo. Se você é novo por aqui, seja bem-vindo. Somos uma empresa de software e este é o AI Labs, e neste
00:00:46vídeo vamos analisar as habilidades que testamos e que realmente nos deram resultados. E uma coisa
00:00:51que vale a pena saber antes de começarmos é que você não precisa adicionar habilidades ao Claude Design em si. As que
00:00:55você adiciona na sua configuração do Claude são as mesmas que pode usar no Claude Design. Então basta adicionar a habilidade
00:01:00nas configurações do Claude. E embora estejamos usando essas habilidades no Claude Design, elas funcionariam com o Claude
00:01:05Code, Codex ou qualquer outro agente que você esteja usando e dariam o mesmo resultado. A primeira da qual vamos falar
00:01:10são as habilidades de Emil Kowalski. Neste conjunto, não há apenas uma, mas nove habilidades, e cada uma
00:01:15altera uma parte diferente do design. Estas são as habilidades que nós mesmos usamos quando trabalhamos em
00:01:20designs, seja usando o Claude Code ou o Claude Design. Há muitas habilidades lá,
00:01:25cada uma focando em uma área diferente do design. Entre elas, há o design da Apple, que contém todos os
00:01:30princípios de design que a Apple usa em seus próprios produtos e os disponibiliza para uso em outros sites.
00:01:35Há também uma habilidade de vocabulário de animação, que basicamente transforma sua descrição vaga de animação
00:01:40em palavras exatas que um modelo pode entender. Você pode adicionar quantas habilidades quiser, mas há duas
00:01:45delas que mais usamos devido ao quanto melhoram os recursos do Claude Design.
00:01:50Uma delas é a habilidade de engenharia de design do Emil, que contém instruções sobre como construir belos
00:01:55componentes de interface e adicionar animações a eles, tornando-a a melhor habilidade para começar seu design.
00:02:00A outra que usamos é o animate (animar), e ela contém um fluxo de trabalho completo para adicionar animações a um
00:02:05site já construído, com um processo detalhado passo a passo. Para usá-las, você precisa adicioná-las ao Claude,
00:02:10e uma vez adicionadas, você pode usá-las dentro do Claude Design. A partir daí, você digita a barra (/), o nome da habilidade
00:02:15e, no comando, diz que tipo de site você quer. Como ainda não tínhamos o design construído, usamos a
00:02:20habilidade de engenharia de design do Emil primeiro. Então, ela puxa a habilidade, mas antes de construir qualquer coisa, faz perguntas
00:02:25sobre o aplicativo, da mesma forma que o Claude Design faz por conta própria. Quando você responde a isso, ele constrói o
00:02:30design. A primeira versão que o Claude Design cria parece minimalista, com um estilo monótono, mas as animações que
00:02:35surgiram não pareciam tão polidas e estavam dessincronizadas em alguns lugares. É aí que entra a habilidade animate,
00:02:40pois ela realmente refina as animações em sites já construídos. Esta habilidade entende como
00:02:46o site funciona e determina o que precisa de movimento e o que não precisa. Assim que o Claude terminou de fazer as
00:02:51alterações, as animações do site melhoraram muito. O movimento estava sincronizado com a rolagem e o todo
00:02:56parecia mais intencional em comparação com o que tínhamos antes. Agora, você pode pensar que isso não é tão
00:03:01diferente do que o Claude normalmente produz, mas isso porque esta era uma página de destino (landing page). Embora tenha
00:03:06melhorado as animações muito pequenas e sutis aqui, o principal estilo de animação que fica bom em landing
00:03:11pages são aquelas animações baseadas em rolagem, e já cobrimos várias habilidades sobre isso em vídeos
00:03:16anteriores. Mas onde a habilidade realmente funciona bem é nos pequenos elementos do lado funcional
00:03:21dos aplicativos. Por exemplo, estávamos trabalhando em um site para um restaurante e usamos a habilidade animate para adicionar
00:03:26animações nele, e ela adicionou pequenas animações que melhoraram a sensação de uso do site, como adicionar animação
00:03:32quando enviamos o formulário e gráficos que aparecem ao passar o mouse. Todos esses detalhes juntos fizeram o
00:03:37site parecer muito mais interativo e melhoraram a experiência de uso. E você pode adicionar
00:03:42quantas habilidades do Emil quiser, pois todas elas serão uma adição significativa ao seu kit de ferramentas
00:03:47de design. Agora, a próxima de que vamos falar é a habilidade garden de Conard Lee, e esta também é uma
00:03:52coleção em vez de uma única habilidade. Há cinco habilidades nela que cobrem coisas como apresentações
00:03:57em vídeo e imagens, mas a mais importante delas é a habilidade de engenharia de design web,
00:04:02e isso porque ela realmente contém instruções sobre como projetar como um engenheiro de design de alto nível.
00:04:07Esta habilidade é focada exclusivamente em tornar os visuais deslumbrantes, não funcionais. A maneira como esta
00:04:12habilidade funciona é que ela pega seus requisitos e trabalha neles com você até ter clareza sobre o que você
00:04:17quer, e então busca designs reais para servir de base. O princípio dela é que um bom design nunca começa
00:04:22do nada, assim como todo design existente é inspirado por algo que veio antes dele. Ela
00:04:27também se baseia em designs que funcionaram anteriormente. Esta habilidade também contém um conjunto de
00:04:32referências que cobrem várias áreas relacionadas ao design. Elas cobrem como avaliar um design, as maneiras pelas quais os designs costumam dar
00:04:38errado e receitas de estilo para sites conhecidos como Apple e Linear, para que ela possa observar como esses sites realmente
00:04:44funcionam enquanto constrói o seu. Então, uma vez que você a tenha adicionado no Claude Design, pode usá-la dando um prompt
00:04:49que descreva o que você deseja construir. O site que obtivemos com ela foi muito mais interessante do que o que o Claude Design
00:04:55produz por conta própria. Foi mais completo e melhor de uma perspectiva de design do que a versão que o Claude Design teria feito sozinho.
00:05:01E se você já tiver um design e executar a habilidade, ela examina esse design e o pontua em diferentes áreas.
00:05:08Você pode continuar refinando o design e executando-o repetidamente até que ele alcance uma pontuação perfeita e corresponda
00:05:13ao design que você realmente deseja. Mas antes de explorarmos outras habilidades, seria ótimo se você se inscrevesse no canal
00:05:18e curtisse o vídeo. Esse pequeno gesto de apoio ajuda muito a gente.
00:05:22A próxima habilidade da qual vamos falar é a habilidade de IA de Elia Design, e desta vez é apenas uma única habilidade criada para landing pages.
00:05:30Tudo o que ela faz está em um único arquivo, e seu trabalho é pegar sua ideia e transformá-la em um sistema visual, que é basicamente o conjunto de regras
00:05:37que tudo na página passa a seguir, incluindo cores, tipografia e espaçamento.
00:05:41Esta habilidade é um sistema completo e especializado para criar landing pages que realmente valem a pena.
00:05:46A lógica por trás disso é que uma landing page não é uma página inicial (homepage). Uma homepage tenta atender a muitas pessoas diferentes ao mesmo tempo.
00:05:53Mas uma landing page tem uma única função: fazer com que as pessoas realmente realizem uma ação.
00:05:57Os modelos tendem a gerar homepages que funcionam, mas não são especializados em projetar landing pages da maneira que esta habilidade é.
00:06:03Portanto, ela estrutura a página em torno dessa única ação que você deseja que alguém que visite seu site realize, direcionando o foco para essa ação ao estruturar seu site ao redor dela.
00:06:12Ela também mantém o design com um estilo visual consistente e aborda outras áreas do web design que a maioria dos modelos negligencia, incluindo garantir que o site possa ser facilmente encontrado através de buscas.
00:06:22Então, uma vez que você a instalou nas habilidades do Claude, você a executa com um prompt sempre que quiser um design.
00:06:27Ela também faz perguntas primeiro e, assim que você responde, começa a projetar.
00:06:31O site criado passou a sensação de ser uma marca real e correspondeu exatamente à vibe que buscávamos.
00:06:36E a forma como cada elemento foi estruturado tornou muito mais provável que quem entrasse no site realmente fizesse uma compra.
00:06:43Mas primeiro, vamos ouvir uma palavra do nosso patrocinador.
00:06:45Make. Você já conhece o Make para automação visual, mas eles acabaram de lançar a Maya.
00:06:49É uma colega de trabalho de IA que vive bem dentro do construtor do Make.
00:06:52A maioria dos construtores de IA entrega uma caixa preta e você apenas torce para que funcione.
00:06:56A Maya é diferente. Você diz a ela o que quer em inglês simples e ela constrói bem na sua frente.
00:07:00Então nós testamos. Pedimos à Maya para enviar à nossa equipe um resumo no Slack toda vez que um novo lead chegasse ao Salesforce, e foi direto para o canvas.
00:07:07A Maya raciocinou sobre a solicitação, escolheu as ferramentas certas, mapeou cada módulo e conectou toda a automação no canvas enquanto assistíamos.
00:07:15Você vê cada decisão, podendo intervir e ajustar qualquer coisa a qualquer momento.
00:07:19Ao longo do processo, você não está apenas obtendo uma automação, está aprendendo como o Make realmente funciona.
00:07:23É gratuito para testar na versão beta agora mesmo. O link está na descrição.
00:07:26As próximas habilidades das quais vamos falar são de Meng To.
00:07:29Ele é um designer que está na indústria há muito tempo e é conhecido por seus designs imersivos de narrativa baseados em rolagem.
00:07:36E ele pegou tudo o que descobriu e empacotou em um sistema de habilidades de design para que você também possa usar.
00:07:41Isso contém muitas habilidades que cobrem diferentes áreas.
00:07:44Todas elas focadas em gerar designs de alta qualidade que realmente contam uma história, em vez de apenas parecerem visualmente bons.
00:07:51Uma delas é o video to super prompt, que funciona pegando uma gravação de tela ou tour de um site e usando ferramentas em sua máquina para transformar essa gravação em um prompt para o seu agente.
00:08:01Mas a habilidade da qual realmente queremos falar é a de sites com qualidade de premiação (awards quality sites).
00:08:05A Awwwards é o site que realiza competições de design impressionante, e os sites que vencem lá são reconhecidos como os mais bem projetados da web.
00:08:12Esta habilidade lista os princípios e detalhes de design que os sites de nível de premiação contêm.
00:08:17E isso importa porque o Claude não cria um design nesse nível por conta própria.
00:08:21Portanto, a habilidade insere esses princípios no processo e direciona o rumo do design.
00:08:25E o que diferencia isso é que, além dos princípios, o conjunto traz as técnicas reais e os efeitos específicos que fazem um site parecer caro, que é a parte que um modelo não produz sozinho.
00:08:35Assim que você adiciona a habilidade de premiação, você lhe dá um prompt descrevendo o site que deseja.
00:08:40E o que retorna é um site estruturado e desenhado da mesma forma que os sites vencedores.
00:08:45Há um fundo sutilmente animado ali, mas o que se destacou foi a rolagem.
00:08:49Ele usou aquela abordagem de narrativa baseada na rolagem, exatamente como os sites que você vê em destaque no Awwwards.
00:08:54O próximo conjunto de habilidades é de Jakub Krehel.
00:08:57E ao contrário dos outros, em que uma habilidade lida com cada parte do site de uma vez, este divide em várias habilidades para que cada área tenha a sua.
00:09:05Todos os elementos que fazem parte do design, incluindo tipografia, cor, acessibilidade e mais, ganham uma habilidade separada em vez de uma única habilidade cuidar de tudo.
00:09:13Você pode adicionar qualquer uma dessas habilidades ao Claude Design, mas a que usamos é a habilidade de revisão.
00:09:18Nós a usamos porque ela revisa de forma abrangente todos os aspectos do design para podermos iterar com base na pontuação que ela atribui.
00:09:24Esta habilidade de revisão funciona melhor se você a conectar ao GitHub, pois ela verifica como o design estava antes e depois das alterações feitas.
00:09:31Se algo funcionava antes da sua última alteração e agora não funciona mais, ela sinaliza isso e consegue dizer que parou de funcionar devido a uma alteração específica que você fez.
00:09:40Ela analisa coisas como animações, acessibilidade e como o site se comporta em diferentes tamanhos de tela, e então lista tudo o que encontrou para você corrigir.
00:09:48Também usamos uma habilidade de melhor layout, porque é nisso que o Claude Design realmente tem dificuldade.
00:09:52Esta lida com o espaçamento, o posicionamento e o alinhamento dos elementos no design, e faz uma varredura completa nele.
00:09:58Por exemplo, ela percebeu que uma data na página precisava de mais espaço do que o fornecido e até nos disse de quantos pixels extras precisava.
00:10:04Então você apenas diz para ela corrigir todos os pontos sinalizados.
00:10:06Ela não vai deixar o site drasticamente diferente, mas o que fará é torná-lo correto de acordo com os princípios de design que os profissionais realmente utilizam.
00:10:14A próxima habilidade na lista é o Tastemaker.
00:10:16Seu principal propósito é evitar os padrões genéricos que os modelos produzem, e o que a diferencia é a forma como faz isso.
00:10:22Ela trabalha a partir dos pixels reais de uma referência, para que nada se perca ao transformar o visual em palavras primeiro.
00:10:28Quando você dá ao modelo uma imagem de referência, ele geralmente a transforma em um resumo em texto que pode usar como referência depois.
00:10:34Mas esta habilidade usa scripts para extrair os detalhes exatos do design e os salva em um formato estruturado que os agentes podem usar posteriormente.
00:10:42Isso preserva os detalhes de design que de outra forma se perderiam no resumo baseado em texto.
00:10:46Ela confia primeiro em scripts para lidar com muitas coisas que podem ser feitas sem que o próprio agente precise fazê-las.
00:10:52Por exemplo, ela os direcionou para caminhos diferentes e testou variações.
00:10:55As decisões que ela toma se aplicam a todo o projeto, em vez de pararem em uma única tela.
00:10:59Esta habilidade realmente dá aos modelos bom gosto para projetar, para que eles não recorram aos mesmos padrões genéricos.
00:11:05Então, uma vez adicionada, você a executa da mesma forma com o comando de barra e um prompt.
00:11:09Nós lhe demos o site que queríamos junto com os requisitos de estilo anteriores e deixamos que ela trabalhasse neles.
00:11:14O resultado foi um site com um visual realmente impressionante, sem nada daquele estilo genérico, que correspondeu à aparência do site que pedimos para construir.
00:11:22O último conjunto é outra coleção popular, e o que os diferencia é que eles se baseiam em pesquisas reais,
00:11:28nas leis nomeadas que os designers realmente utilizam, com uma habilidade separada para cada uma.
00:11:33Algumas de suas habilidades cobrem por que as pessoas saem do seu site no meio do caminho e como o comportamento se manifesta à medida que alguém navega por ele.
00:11:39E você não precisa instalar tudo.
00:11:41Você instala apenas as habilidades que se encaixam na sua forma de trabalhar.
00:11:44Para a nossa configuração, adicionamos duas.
00:11:45A primeira é a crítica de tela, que pega uma tela e a analisa sob vários ângulos diferentes,
00:11:50depois aponta onde essa tela está falhando, trabalhando com diretrizes adequadas para julgar a qualidade do design.
00:11:56A segunda são as leis de percepção, que basicamente contêm instruções sobre como o olho humano realmente vê e compreende o design em si.
00:12:03Então, uma vez que você tenha o seu design, você executa a revisão e ela retorna o que está errado em aspectos como o que se destaca primeiro,
00:12:09a tipografia e o espaçamento, listando tudo para que você possa corrigir.
00:12:12E uma vez que as leis de percepção são aplicadas ao site, o conjunto todo parece muito mais refinado.
00:12:17Essas foram as habilidades disponíveis no GitHub para todos vocês usarem.
00:12:20Mas nós usamos outras habilidades que construímos e refinamos por conta própria através de testes, e as aplicamos quando estamos realmente desenvolvendo produtos.
00:12:26Portanto, se você quiser ter acesso a isso, pode obtê-lo no AI Labs Pro, que é a nossa comunidade.
00:12:31Estas são as habilidades que incluem algumas criadas por nós mesmos e outras que usamos de código aberto.
00:12:36Então, se você achou valioso o que fazemos e quer apoiar o canal, esta é a melhor maneira de fazer isso.
00:12:41O link está na descrição.
00:12:42Isso nos traz ao final deste vídeo.
00:12:44Se você quiser apoiar o canal e nos ajudar a continuar fazendo vídeos como este, pode fazê-lo usando o botão de valeu abaixo.
00:12:50Como sempre, muito obrigado por assistir e vejo você no próximo.