4 Maneiras Incríveis como o Claude Fable 5 Cria Sites Impressionantes
AAI LABS
Computing/SoftwareSmall Business/StartupsInternet Technology
Transcript
00:00:00Todos têm acesso aos mesmos modelos de IA, mas ninguém criou os processos em torno deles.
00:00:05Você pode ter ouvido a frase de que o modelo não importa mais, o que importa é o “harness”.
00:00:09Harnesses são basicamente os processos que você constrói para o seu modelo de IA seguir.
00:00:13Mas aqui está o que você precisa entender.
00:00:14Os modelos continuam evoluindo, então o harness que você construiu três meses atrás já está obsoleto.
00:00:19No momento desta gravação, o melhor modelo disponível é o Fable 5, principal modelo da Anthropic,
00:00:24mas não se preocupe, vamos guiá-lo através de diferentes maneiras para garantir que seu harness
00:00:27continue evoluindo para qualquer modelo existente.
00:00:30A Anthropic realmente tem uma técnica oficial para design de front-end,
00:00:34e a razão de sua existência é um problema que eles mesmos nomearam.
00:00:37O que acontece é que o modelo tende à versão mais segura e genérica do design
00:00:42que você pediu.
00:00:43Eles chamam isso de convergência na distribuição, o que significa basicamente que ele constrói algo
00:00:47que já viu mil vezes antes.
00:00:49Agora, com o quão poderosos esses modelos mais recentes foram anunciados, você pode pensar que isso não é
00:00:53mais um problema, mas não é o que eu descobri.
00:00:56Por exemplo, neste prompt, pedimos simplesmente para construir uma landing page para um site de plantação.
00:01:01Para induzi-lo na direção certa, dissemos para ser o mais criativo possível e não focar
00:01:06muito no conteúdo em si.
00:01:07Também dissemos explicitamente para não carregar nenhuma técnica, pois temos várias técnicas disponíveis
00:01:13em nosso sistema e queríamos garantir que ele não as estivesse aproveitando.
00:01:16Foi isso que ele acabou criando.
00:01:18Não é um design ruim de forma alguma, mas certamente não é o melhor também.
00:01:22Por exemplo, há alguns problemas de contraste e algumas imagens não carregam corretamente.
00:01:26Mas quando usamos a técnica aqui, as coisas mudaram bastante.
00:01:29Não há nada de especial na técnica.
00:01:31Não existem referências ou recursos externos.
00:01:34É literalmente apenas um prompt.
00:01:35Usando apenas isso, ele produziu um design muito melhor.
00:01:37O design ficou significativamente mais polido e esteticamente agradável.
00:01:41Incluiu animações sutis e muito mais atenção aos detalhes.
00:01:45No geral, o resultado foi visivelmente melhor do que o que o modelo geraria sozinho.
00:01:49Com cada novo modelo, essas empresas de IA lançam novos guias de prompt para pessoas que usam as APIs dos modelos.
00:01:55E usando o guia do Fable 5, modificamos a técnica de design.
00:01:58Você pode apenas copiar o prompt de design de propósito geral e o guia de prompt.
00:02:02Cole ambos no Claude, diga que você tem o guia de prompt para o modelo
00:02:06e peça para criar uma versão atualizada baseada nisso.
00:02:09Ele analisa o prompt e fornece uma versão reescrita para o novo modelo.
00:02:12E você pode ver que o novo site parece muito melhor.
00:02:15Está estruturado muito melhor e transformou todos os diferentes elementos em cartões.
00:02:19Achamos que parece muito mais criativo do que o que o Claude normalmente produz por causa de detalhes minúsculos,
00:02:24como a forma como a seção de CTA foi transformada em um cartão-postal com um selo em cima.
00:02:29São esses detalhes minúsculos que o tornam muito mais criativo.
00:02:32Agora, há outra razão pela qual essas empresas lançam guias de prompt.
00:02:35Muitas vezes, os modelos têm problemas comportamentais e os guias dizem como corrigi-los.
00:02:39Quando o Opus 4.8 foi lançado, a Anthropic apontou que o modelo tendia a usar um estilo de design específico.
00:02:45A correção deles foi pedir ao modelo várias alternativas de design primeiro, e então deixar você escolher qual direção seguir.
00:02:51Mas quando o Fable 5 saiu, esse problema não foi mais mencionado em seus guias de prompt.
00:02:56E pelo que vimos, o modelo ainda recorre ao mesmo estilo.
00:02:59Não acontece todas as vezes.
00:03:01Mas pelos nossos testes, cerca de dois em cada três sites gerados ainda terminam com estilos muito semelhantes.
00:03:07Então, nunca foi realmente corrigido.
00:03:08É por isso que vale a pena olhar os documentos de modelos anteriores também.
00:03:11Você encontrará muitas coisas úteis que simplesmente não entraram no guia mais recente.
00:03:15Então, usando o guia de prompt para o Opus 4.8, mudamos para uma técnica de design diferente
00:03:20que realmente nos perguntou que tipo de direção de design queríamos.
00:03:23Com base nisso, ele gerou este design.
00:03:25Isso também parece bom.
00:03:26Mas, honestamente, uma abordagem melhor é usar arquivos design.md aqui.
00:03:30Esses arquivos contêm linguagem de marca que você simplesmente coloca na sua página.
00:03:33O Get design.md é uma fonte muito boa onde você pode obter arquivos de muitas marcas.
00:03:38Mas mesmo assim, use-os depois que o modelo já tiver gerado a landing page.
00:03:42E isso é especificamente para landing pages, porque se você olhar dentro dos arquivos design.md,
00:03:47eles bloqueiam tudo, até a fonte.
00:03:50E como você viu nos exemplos, a fonte é uma grande parte do que fez esses sites parecerem muito mais criativos.
00:03:55Existem dois níveis quando se trata de adicionar animações.
00:03:58A interface de marketing e a interface funcional.
00:04:00Usar a técnica de design em interfaces funcionais como painéis os deixará lindos,
00:04:05mas as pessoas não conseguirão realmente usá-los.
00:04:07Então, para adicionar animações, usamos duas coisas.
00:04:10Para páginas de marketing, essa técnica já diz ao modelo para adicionar animações baseadas em CSS,
00:04:15mas as animações GSAP são muito melhores.
00:04:17É aqui que entra outro passo do guia de prompt.
00:04:20O esforço é a principal alavanca que controla o modelo agora.
00:04:22Para tarefas simples, você pode mantê-lo de baixo para médio,
00:04:25mas para tarefas como adicionar animações, usar X-High é uma opção muito melhor,
00:04:30e lhe dará menos tentativas.
00:04:32Em nossa técnica de UI de marketing, há uma regra que especifica quando o GSAP deve ser usado.
00:04:36Sempre que essa condição é acionada, ela carrega automaticamente a técnica GSAP também.
00:04:41Nós realmente usamos essa configuração na mesma landing page mostrada aqui.
00:04:44Mesmo com esse planejamento limitado de nossa parte, ele fez um trabalho surpreendentemente bom.
00:04:48Ele acertou a posição onde a animação da tela é reproduzida dentro do cartão-postal,
00:04:52e as estações transicionam uma após a outra.
00:04:55É um bom exemplo de como essas técnicas especializadas podem lidar com muitos dos detalhes de implementação
00:04:59automaticamente.
00:05:00Conseguimos esse sistema de técnicas através de muita tentativa e erro.
00:05:03E com isso, quero dizer atingir repetidamente os limites de uso de 5 horas.
00:05:07Se você quiser pular tudo isso, pode obtê-lo em nosso Community AI Labs Pro.
00:05:11O link estará na descrição.
00:05:12Então, como já mencionamos, existem dois tipos de interfaces.
00:05:15Todo o fluxo de trabalho por trás da interface funcional é completamente diferente da interface de marketing.
00:05:20Por exemplo, o planejamento é o primeiro passo, e é muito importante.
00:05:23Não vamos nos aprofundar nisso neste vídeo, mas uma vez que você tenha seu plano pronto,
00:05:27você pode entregá-lo ao Claude.
00:05:27Depois disso, em vez de fazer com que ele construa o aplicativo, você deve pedir para ele construir os mockups usando HTML.
00:05:33Nosso processo começa com o design.md.
00:05:36Se você já decidiu qual design.md usar, isso é ótimo.
00:05:40Se você não tem um, tudo bem também.
00:05:42Você pode seguir em frente sem ele.
00:05:43Por exemplo, se você olhar para nossa comunidade construída sob medida,
00:05:45você notará imediatamente que o design por fora e o design por dentro são completamente
00:05:50diferentes.
00:05:51Em nosso caso, tudo foi planejado usando mockups HTML primeiro.
00:05:54Começamos criando um design.md, que foi parcialmente inspirado pelo Notion.
00:05:58Usando esse sistema de design, construímos todas as telas como mockups antes de escrever o aplicativo real.
00:06:04Depois de finalizar e validar esses mockups, nós os convertemos neste aplicativo totalmente funcional.
00:06:09Agora, antes de passarmos para a parte mais importante no design de interfaces funcionais, vamos ter uma
00:06:13palavra do nosso patrocinador.
00:06:14Muitas pessoas que usam o Claude Code notaram recentemente que seus custos dispararam.
00:06:18Honestamente, é por isso que o Kimi chamou minha atenção.
00:06:20Eles construíram um modelo de código aberto que é muito bom em programação por cerca de 1/8 do preço do Opus.
00:06:26O modelo mais recente deles, Kimi K2.6, acabou de alcançar o primeiro lugar no Sweebench Pro,
00:06:30basicamente o benchmark de codificação do mundo real mais difícil agora.
00:06:33Eles não apenas lançaram o modelo, eles construíram produtos sobre o K2.6 que são genuinamente úteis.
00:06:38Você pode gerar sites prontos para produção com um bom design de front-end,
00:06:41criar apresentações completas a partir de um único prompt e até mesmo lidar com bancos de dados e autenticação prontos para uso.
00:06:47Mas o recurso mais insano é provavelmente o Agent Swarm.
00:06:49Você pode ativar 300 agentes de IA em paralelo em uma única tarefa.
00:06:53Em vez de um agente lidando lentamente com tudo, você obtém uma equipe inteira de IA trabalhando simultaneamente.
00:06:58E tudo isso roda em um modelo de código aberto que custa muito menos do que as alternativas
00:07:03de código fechado pelas quais as pessoas têm pago.
00:07:05Então, se você usa o Claude Code ou o Cursor todos os dias e sua conta de API tem ficado dolorosa
00:07:09ultimamente, o Kimi vale a pena experimentar.
00:07:11Se você se inscrever através do nosso link, também receberá um bônus de cota extra de 10% na sua primeira compra
00:07:16antes de 30 de junho. Clique no link na descrição e comece a construir.
00:07:19Agora, há outra parte muito importante do design de interfaces funcionais, que é a experimentação.
00:07:24Com o tempo, tentamos muitas abordagens diferentes para resolver esse problema.
00:07:28Inicialmente, usávamos listas de tarefas com vários agentes trabalhando em paralelo,
00:07:32onde cada agente gerava uma variação diferente da UI.
00:07:35O objetivo era experimentar vários designs e descobrir qual abordagem realmente funcionava melhor.
00:07:40Mais tarde, começamos a usar subagentes para esse fluxo de trabalho, mas não importa mais.
00:07:45Com um milhão de tokens de contexto, você pode fazer isso com o agente principal também.
00:07:48Também construímos algo internamente chamado Visualizador de Galeria.
00:07:51O objetivo do Visualizador de Galeria é simples.
00:07:53Quando você gera vários mockups HTML, eles não devem se perder entre dezenas de arquivos.
00:07:58Em vez disso, eles são abertos automaticamente juntos em uma única visualização, facilitando a comparação
00:08:03lado a lado. Por exemplo, quando estávamos construindo a plataforma comunitária, não sabíamos inicialmente
00:08:08como deveria ser um espaço de interação comunitária. Sabíamos que queríamos uma experiência comunitária,
00:08:12mas havia muitas maneiras diferentes pelas quais os usuários podiam interagir uns com os outros. Então, em vez de nos comprometermos
00:08:17com um único design, experimentamos usando mockups HTML. Tarefamos o agente para criar vários
00:08:22designs de UI de canais comunitários como mockups HTML, para que pudéssemos compará-los. O agente então criaria várias
00:08:28versões automaticamente e as abriria dentro do Visualizador de Galeria. A partir daí, poderíamos comparar cada
00:08:33variação e decidir qual direção era a mais forte. Uma coisa que você notará neste exemplo
00:08:37é que os designs nem todos parecem visualmente consistentes. Idealmente, eles deveriam compartilhar a mesma linguagem
00:08:42de design enquanto exploram diferentes padrões de interação. A razão pela qual isso não aconteceu aqui é
00:08:46porque não havia design.md fornecido. Quando um design.md existe, o modelo o usa como fonte de verdade para
00:08:53cores, espaçamento, tipografia, componentes e estilo geral. Assim, todos os mockups gerados permanecem
00:08:59visualmente consistentes enquanto exploram diferentes abordagens de UX. Há também alguns detalhes menores que
00:09:04podem fazer uma grande diferença, como adicionar animações às interfaces funcionais. Documentamos um conjunto de diretrizes de animação
00:09:10em nossa própria técnica e você pode copiá-las se quiser. Elas funcionaram muito bem para nós até
00:09:15agora e estamos continuamente refinando-as. Uma coisa que eu recomendaria fortemente, no entanto, é não exagerar
00:09:20nas animações na parte funcional da sua aplicação. Animações excessivas podem parecer impressionantes no
00:09:25início, mas muitas vezes tornam as interfaces focadas em produtividade mais distrativas. Uma vez que você
00:09:29finalizou o design, o próximo passo é usar a técnica ShadCN. Eu já conectei a técnica de interface funcional
00:09:35à técnica ShadCN, então ela lida com a maior parte do fluxo de trabalho automaticamente. Anteriormente, tínhamos fluxos de trabalho
00:09:40muito mais elaborados. Gerávamos um plano de implementação detalhado especificamente para o
00:09:45MCP do ShadCN e usávamos esse plano para construir toda a interface. Embora essa abordagem funcionasse, ela também
00:09:50adicionava muita complexidade. Hoje, o fluxo de trabalho é significativamente mais simples. Tudo o que você precisa é o
00:09:55mockup HTML final e a técnica ShadCN. A razão pela qual isso funciona tão bem é que a técnica ShadCN já contém
00:10:01uma enorme quantidade de contexto e conhecimento de implementação empacotado pelos próprios criadores do ShadCN.
00:10:06Por causa disso, ele pode pegar um mockup HTML finalizado e reproduzi-lo quase um-para-um usando
00:10:11componentes ShadCN reais. Então, nesta fase, você não precisa se preocupar em criar planos de implementação
00:10:16complicados ou fluxos de conversão. Se você gosta desses processos de design, inscreva-se no
00:10:21canal e clique no botão de curtir também. Postamos conteúdo que ajuda você a aprender novas maneiras de otimizar
00:10:26diferentes processos em diferentes empresas com IA. Seu apoio aqui significaria muito para nós.
00:10:31O guia também pede que você torne a autoverificação explícita para esses modelos. Você pode colocar um prompt no
00:10:36Claude.md que pede ao agente para verificar sua saída. Agora, em vez de usar o agente principal,
00:10:41você deve usar um subagente que possa verificar a saída. E para verificá-la, você precisa de algo
00:10:46que você possa comparar. Para isso, sempre aponte o subagente para o seu design.md.
00:10:50Outra coisa mencionada no guia é que os modelos têm um desempenho melhor quando têm contexto sobre
00:10:55sua tarefa. Para design, isso significa ter conhecimento sobre o que realmente é o produto.
00:10:59Agora, muitos frameworks configuraram um product.md separado, mas, em nossa opinião,
00:11:03quando você configura um Claude.md, ele tem contexto suficiente para o modelo entender sobre o que é
00:11:09seu projeto. Então, o que a técnica de interface funcional faz é, sempre que recebe uma nova tarefa,
00:11:13ela faz o modelo ler o Claude.md também. Além disso, também contém uma pasta de mocks
00:11:18que possui todos os arquivos HTML para que você possa referenciá-los sempre que estiver adicionando novos elementos ao seu
00:11:24aplicativo. Além disso, seria ótimo se você também tivesse o design.md. Esses são os arquivos
00:11:28que você precisa ter em seu projeto. Hoje em dia, muitos aplicativos SaaS podem ser facilmente clonados.
00:11:32Nós mesmos usamos um software construído sob medida para gerenciamento de equipe. Criamos nossa própria versão porque
00:11:37não precisamos hospedar muitas pessoas. Nesse caso, você não precisa realmente fazer do zero.
00:11:42Você só precisa garantir que está clonando a UI deles o mais perfeitamente possível. Com modelos mais novos,
00:11:46sua capacidade de entender imagens melhorou muito, então o fluxo de trabalho aqui se torna muito fácil.
00:11:51Na clonagem, existem dois modos diferentes. O Modo B é para UI de marketing. Para isso,
00:11:56há uma ferramenta CLI muito útil chamada single-file CLI. Usando-a, você pode capturar tudo em uma página,
00:12:01incluindo o HTML, CSS e até mesmo as imagens usadas naquele site. Se o site contiver várias páginas,
00:12:07você também pode buscar seu arquivo sitemap.xml, que é essencialmente um mapa do site. Usando esse sitemap,
00:12:13o modelo pode descobrir e buscar as outras páginas também. O problema começa quando você encontra páginas que estão
00:12:19atrás de autenticação. Por exemplo, se você quisesse clonar a interface do Notion, não poderia simplesmente apontar a
00:12:23ferramenta para o site do Notion. Quando você fornece a URL do Notion, você só obterá a landing page.
00:12:28O que você realmente quer é a interface do aplicativo atrás da tela de login. Felizmente, os modelos
00:12:34tornaram-se muito bons em entender interfaces a partir de imagens, então nessas situações, capturas de tela são a
00:12:40melhor opção. Você precisa capturar os diferentes estados da interface com muito cuidado. Digamos que você tenha uma
00:12:45página aberta, você desejará capturas de tela mostrando o que acontece ao passar o mouse e como diferentes interações afetam o layout.
00:12:50Vamos dar outro exemplo. Suponha que você abra uma página onde duas páginas estão em uma coluna. Se você fornecer apenas isso,
00:12:56o modelo não saberá que você pode criar duas colunas. Você precisa ser extremamente minucioso e fornecer todo o
00:13:01contexto de que o modelo precisa. Uma vez que você tenha capturado as capturas de tela, não cole as imagens diretamente no prompt. Em vez disso,
00:13:07arraste-as para o Claude. Isso dá ao sistema acesso aos caminhos das imagens que o Modo A pode usar. O Modo A irá
00:13:13então reunir todas essas capturas de tela, colocá-las dentro da pasta de clonagem e usá-las como material de referência.
00:13:19Essas capturas de tela efetivamente se tornam a base para o processo de clonagem. A partir daí, você pode gerar uma
00:13:25versão HTML inicial da interface e então passar a construir o aplicativo final.
00:13:29Isso nos leva ao fim deste vídeo. Se você gostaria de apoiar o canal e nos ajudar a continuar fazendo vídeos
00:13:35como este, você pode fazer isso usando o botão de super thanks abaixo. Como sempre, obrigado por
00:13:39assistir e vejo você no próximo.
Community Posts
No posts yet. Be the first to write about this video!
Write about this video