Os 3 Níveis de Design de IA... Apenas Poucos Chegam ao Nível 2
AAI LABS
Computing/SoftwarePhotography/Art
Transcript
00:00:00Se você acompanha este canal há algum tempo, provavelmente sabe que já cobrimos muitos
00:00:03fluxos de trabalho e ferramentas de design. Testamos todos eles por meses e finalmente descobrimos
00:00:08por que o mesmo modelo pode gerar algo com aparência totalmente personalizada ou algo que imediatamente
00:00:13soa como gerado por IA. Tudo se resume a três níveis. O nível um é projetar uma única página e
00:00:19há uma coisa que a maioria das pessoas pula, que é exatamente o motivo pelo qual o resultado parece genérico. O nível
00:00:23dois é onde você para de projetar páginas e começa a projetar sistemas, e o fluxo de trabalho aqui é
00:00:28completamente diferente. E o nível três é como testamos designs uns contra os outros para encontrar a versão
00:00:34que realmente funciona, que é a parte que usamos em todos os projetos reais agora. Então, o nível um trata de
00:00:39criar um bom design para uma única página. Este é o nível que a maioria das pessoas ensina porque é a
00:00:44fundamentação de todo bom design. Dissemos em nosso vídeo anterior sobre como a capacidade de design do Opus 4.7
00:00:50melhorou muito e muito do lixo de IA que costumábamos ver desapareceu. Anteriormente, quando
00:00:55costumávamos dar a ele um prompt simples como criar uma página de destino, ele simplesmente pegava o
00:00:59tema roxo e branco e construía tudo em torno dele. Esse padrão específico melhorou. Mas
00:01:04assim como qualquer outro modelo de IA, este também converge para padrões seguros. E de todos os nossos testes e
00:01:09experimentos com ele, descobrimos que ele assume um estilo específico por padrão todas as vezes. Então agora, sempre que
00:01:15vemos esse estilo, é um sinal claro de que o site veio do Opus 4.7 e é apenas uma questão de tempo
00:01:21até que se torne o próximo lixo de IA. Precisamos de outras maneiras de fazer este site parecer melhor.
00:01:25Agora, este nível se resume principalmente à engenharia de prompt e a como especificamos o aplicativo porque
00:01:30se você estruturar seu prompt corretamente, poderá criar o aplicativo inteiro de primeira. O prompt deve começar
00:01:35com a intenção do site que você pretende construir, depois mencionar os itens inegociáveis, como os
00:01:39elementos exatos que você deseja no aplicativo e como quer que os elementos da interface apareçam. Depois disso, você especifica o
00:01:44sistema de cores. Aqui usamos o OKLCH, que é basicamente uma medida de luminosidade, croma e matiz.
00:01:49Usar OKLCH em vez do RGB ou HSL usuais é melhor porque representa as cores da maneira que o
00:01:55olho humano realmente as percebe, lidando melhor com a luminosidade e o equilíbrio. Ele também cria
00:01:59gradientes mais suaves, ao contrário dos códigos hexadecimais que podem produzir resultados irregulares. Uma vez que você tenha
00:02:04definido o esquema de cores, você também precisa mencionar os fluxos de contraste. O contraste é um fator muito importante
00:02:08no design de UI porque ele cria uma hierarquia que guia seus olhos para as coisas que
00:02:13importam. Sem um contraste explícito, o modelo trata cada elemento como igualmente importante,
00:02:18o que dificulta a formação da hierarquia visual. E para garantir que o site não pareça
00:02:22lixo de IA, você também precisa controlar a tipografia a partir do prompt, definindo quais fontes são banidas
00:02:27por causa do estigma de IA e quais usar em diferentes áreas do design. Fontes como Inter e Geist
00:02:33tornaram-se marcas registradas de lixo de IA porque todo agente recorre a elas por padrão, então chamá-las de
00:02:38proibidas explicitamente força o modelo a procurar em outro lugar. Em seguida, você define o layout e o ritmo do site,
00:02:42mas primeiro você precisa saber sobre simetria e assimetria. Layouts simétricos têm componentes
00:02:47colocados uniformemente na grade com uma aparência equilibrada, o que é mais adequado para designs profissionais e
00:02:51retilíneos. Mas para um visual mais artístico, opte pela assimetria, pois isso dá mais margem
00:02:56para experimentação. É especialmente boa quando você precisa usar espaço negativo, pois isso permite que o design
00:03:01respire. O tipo de produto que você está construindo decide qual se encaixa melhor. Depois, defina todas as seções
00:03:06que você deseja, os materiais que usará e como o site deve se comportar de forma responsiva. E a parte mais importante
00:03:11é mencionar os antipadrões. Estas são as características do lixo de IA, como o CTA centralizado simples,
00:03:17ícones Lucide e gradientes com design glassmórfico. Então, assim que você der esse prompt ao Claude Code ou
00:03:22qualquer agente que você esteja usando, ele analisará seu aplicativo e examinará os detalhes de implementação. Em seguida, ele
00:03:27construirá o aplicativo exatamente como o prompt descreveu, com assimetria devido ao objetivo artístico e uso adequado do espaço negativo.
00:03:34Portanto, o nível 2 trata de manter o mesmo design em todas as páginas do site, porque a maioria dos aplicativos gerados por agentes
00:03:40desmorona no momento em que você sai da página de destino. Frequentemente, ao gerar aplicativos inteiros com agentes, você pode
00:03:45ter encontrado exatamente isso. A página de destino costuma ser bonita, mas quando você vai para as outras páginas,
00:03:50elas não seguem o estilo de UI de forma tão coerente quanto deveriam. O painel acaba com diferentes
00:03:55estilos de botão, espaçamentos diferentes, tipografia diferente, quase como se o agente tivesse esquecido que estava construindo
00:04:00o mesmo aplicativo. As outras páginas acabam parecendo que nem fazem parte do mesmo site, o que entrega
00:04:05que o site foi gerado por um agente. Às vezes, o design se mantém nas páginas de autenticação, mas depois, no
00:04:10painel, o estilo quebra completamente. Portanto, para isso, você precisa criar dois dos arquivos mais importantes,
00:04:15Claude.md e Design.md. Esses dois arquivos são o que mantêm o design consistente em todo o site.
00:04:21No Claude.md, como já falamos muitas vezes, você coloca apenas as informações do seu projeto, não o design.
00:04:27Isso ocorre porque o arquivo permanece carregado na sessão o tempo todo e o conteúdo de design ali apenas
00:04:32distrairá o agente quando ele estiver trabalhando em outra coisa, mas ainda é o arquivo principal porque mantém
00:04:37o contexto do projeto, o que fundamenta um bom design. Para o design em si, precisamos de um arquivo separado
00:04:42que mencione tudo para o sistema visual, o layout, as cores, a tipografia e todos os
00:04:47detalhes que cobrimos no nível 1. O design.md deve ser o tipo de arquivo que qualquer agente pode pegar e
00:04:52entender imediatamente qual é o sistema visual. E assim como no nível anterior, você precisa
00:04:57definir o sistema de cores em OKLCH aqui também. Para criar esses dois arquivos, demos ao Claude Code um prompt detalhado
00:05:03abrangendo o que cada arquivo precisa, e ele gerou ambos os arquivos para nós. O Claude.md é curto, contendo apenas
00:05:09os detalhes do projeto. O design.md é mais longo, com cada detalhe, incluindo códigos de cores,
00:05:15escolhas tipográficas e tudo mais. Mas esse não é o fim do design.md. Precisamos continuar
00:05:20refinando-o ao longo do tempo. Então, colocamos uma linha no início, dizendo ao agente para adicionar qualquer novo valor de design
00:05:25que ele encontrar a este arquivo. Dessa forma, cada sessão começa a partir de uma versão mais refinada do sistema de design
00:05:30do que a anterior. Mas apenas deixar o Claude criar o design.md não é suficiente,
00:05:35porque o que ele gera não segue as melhores práticas adequadamente. O Google disponibilizou o código-fonte do seu
00:05:40modelo para o arquivo design.md. O modelo também contém comandos para verificar cruzadamente o seu design.md
00:05:46contra ele e sinalizar quaisquer erros. Assim, você pode simplesmente instruir seu agente a iterar usando esses comandos
00:05:51para aperfeiçoar o design.md. E este ainda não é o fim do nível 2. Para gerar designs bons o suficiente em
00:05:56este nível, você também precisa auditá-los em relação aos princípios de design existentes. Para isso, existem
00:06:00muitas habilidades de código aberto que fazem exatamente isso. Você pode usar qualquer uma delas, mas nós usamos a habilidade da VersaLab,
00:06:06porque, em vez de codificar rigidamente todos os princípios dentro da habilidade, ela aponta para uma fonte externa
00:06:11que eles mantêm ativamente. Assim, os princípios permanecem atualizados com as melhores práticas atuais, em vez
00:06:16de ficarem congelados no que era de última geração quando a habilidade foi escrita pela primeira vez. Você instala esta habilidade
00:06:21no projeto, executa-a, e o seu design sai em uma forma muito melhor do que antes. Mas antes de
00:06:25seguirmos em frente, vamos dar uma palavrada do nosso patrocinador. Bem, recentemente comecei a usar o ZillysCloud e deixe-me dizer
00:06:30o porquê. A maioria dos aplicativos RAG funciona bem com alguns documentos, mas no momento em que você adiciona dados reais,
00:06:35eles começam a desmoronar porque a configuração simplesmente não foi projetada para lidar com esse tipo de carga.
00:06:40O Milvus é o banco de dados vetorial de código aberto mais estrelado no GitHub, com mais de 44.000 estrelas,
00:06:46e ele foi construído para lidar com esse tipo de carga, mas auto-hospedar significa gerenciar a infraestrutura sozinho.
00:06:51É aí que entra o ZillysCloud, a versão totalmente gerenciada com a mesma API que é até
00:06:5610 vezes mais rápida, e você pode configurá-la em minutos sem alterar uma única linha de código.
00:07:00Então, executamos uma consulta de busca semântica no ZillysCloud, e os resultados são realmente relevantes porque ele
00:07:05compreende o significado e não apenas palavras-chave, e o tempo de resposta é quase instantâneo, mesmo com um grande
00:07:11conjunto de dados. Também executamos uma consulta de recomendação dado um artigo. Ele encontrou os cinco mais semelhantes
00:07:16em todo o conjunto de dados, classificados por similaridade em menos de um segundo. E o painel rastreia o desempenho do seu cluster,
00:07:21o uso de armazenamento e métricas de dados, incluindo contagens de coleções e entidades em tempo real. Nenhum cartão de crédito
00:07:27é necessário, basta clicar no link no comentário fixado e experimentar o ZillysCloud gratuitamente.
00:07:31Portanto, o nível três trata de testar o design de forma programática, da mesma maneira que os engenheiros verificam
00:07:36o código com TDD. Agora sabemos que você não pode escrever testes visualmente da mesma forma que faz com o código. Com o código,
00:07:41há entradas e saídas claras para tudo. O design não tem isso porque é mais subjetivo
00:07:46e não pode ser quantificado como o código pode, mas só porque é subjetivo não significa que não possamos escrever
00:07:51testes para ele. A razão pela qual o TDD funciona para o código é que o teste define o que o comportamento deve ser,
00:07:57e a implementação tem que satisfazer esse requisito. A mesma ideia se aplica ao design, mas com diferentes
00:08:01tipos de requisitos. No aplicativo que estábamos construindo, o primeiro passo foi o mesmo de antes: criar os
00:08:05arquivos clod.md e design.md antes mesmo de pensar na implementação. Agora, os testes devem sempre ser
00:08:12escritos antes do código; dessa forma, a implementação pode realmente ser testada contra eles. Se escrevemos os testes
00:08:17após a implementação, o agente relaxa. Ele apenas escreve casos de teste que otimizam em direção ao
00:08:22código existente, porque esse código já está em seu contexto. Escrever o teste primeiro força a
00:08:27implementação a se adaptar ao teste, em vez de o teste se adaptar à implementação. Portanto, usamos os arquivos
00:08:32de design como a fonte de verdade para os testes, porque esses arquivos contêm todos os antipadrões que podemos
00:08:37verificar programaticamente. Cada antipadrão no design.md se torna um caso de teste. Cada regra de cor,
00:08:44cada restrição de espaçamento, cada escolha de tipografia recebe uma verificação programática. Demos ao Claude Code um
00:08:49prompt detalhado para escrever os casos de teste, especificando cada seção em que ele deve se concentrar. Além disso, se você estiver
00:08:54gostando do nosso conteúdo, considere pressionar o botão de curtir, pois isso nos ajuda a criar mais conteúdo como
00:08:59este e alcançar mais pessoas. Com o seu prompt, ele escreverá todos os casos de teste para o design
00:09:04do aplicativo. Ele escreve vários tipos de testes. Há os testes estáticos, que verificam diretamente os
00:09:09antipadrões que mencionamos no prompt. Depois, há o teste visual, que basicamente usa
00:09:14o Playwright por baixo dos panos e executa testes de regressão para tornar o site incrementalmente melhor. Ele também
00:09:19escreverá casos de teste para outros componentes e funções auxiliares, como varredura e relatório. Agora, esses testes
00:09:24verificam os antipadrões estáticos, mas o teste de design precisa de outra coisa. Para isso, existe
00:09:28outra ferramenta chamada Visly Test, que é basicamente uma CLI que conduz TDD para UI. A forma como funciona
00:09:34é que ela executa TDD local, onde você pode verificar o design à medida que o código muda. Assim, você pode monitorar as
00:09:39diferenças você mesmo, em vez de confiar no automonitoramento do agente. Você também obtém uma comparação melhor com
00:09:44metadados e outros detalhes, o que torna a revisão mais rápida. Sem esses metadados, você está apenas comparando duas
00:09:49capturas de tela lado a lado e esperando notar a diferença. Com ele, o Visly diz exatamente quais
00:09:54pixels mudaram e quanto. Para usá-lo, primeiro instale a CLI executando o comando de instalação a partir da
00:10:00documentação. Uma vez configurado e inicializado, ele está pronto para uso. Agora basta abrir o Claude Code e dizer a ele para usar
00:10:05TDD e implementar qualquer parte da UI que você quiser usando a CLI do Visly como o meio de teste.
00:10:10Ao executar o comando TDD do Visly, um servidor local é iniciado e monitora as alterações de captura de tela. Para enviar as
00:10:16capturas de tela, o Claude basicamente escreve testes separados com o nome Visly. Esses testes usam mecanismos de captura de tela do Playwright
00:10:21para enviar as imagens para o visualizador no servidor. A partir daí, você pode aprovar ou negar o
00:10:27design e visualizar as diferenças comparando-o com a versão anterior. Cada diferença rejeitada se torna um feedback que
00:10:32o agente usa para ajustar a próxima tentativa. Após algumas iterações, o design converge para o que você realmente
00:10:37deseja, em vez do que o agente acha que você deseja. Agora, os prompts usados aqui podem ser encontrados no AI Labs Pro
00:10:43para este vídeo e para todos os nossos vídeos anteriores, de onde você pode baixá-los e usá-los para seus próprios
00:10:47projetos. Se você encontrou valor no que fazemos e quer apoiar o canal, esta é a melhor maneira de fazer isso. Os
00:10:52links estão na descrição. Isso nos traz ao fim deste vídeo. Se você quiser apoiar o canal
00:10:57e nos ajudar a continuar fazendo vídeos como este, você pode fazê-lo usando o botão de super thanks abaixo. Como
00:11:02sempre, obrigado por assistir e vejo você no próximo.
Community Posts
No posts yet. Be the first to write about this video!
Write about this video