Transcript
00:00:00O Kimi K3 acabou de ser lançado e é um modelo incrivelmente poderoso, no mesmo nível do Fable 5 da Claude e do GPT 5.6.
00:00:06O maior destaque é que ele é realmente muito bom em front-end,
00:00:09tão bom que as pessoas dizem ser melhor em design do que qualquer outro modelo do mercado.
00:00:14E ele realmente é incrível, mas há um detalhe — e não é um problema exclusivo do Kimi.
00:00:17Todo modelo de IA tem seu próprio estilo de design, e você só percebe isso depois de usá-lo bastante.
00:00:22Sempre que um modelo novo é anunciado, todos dizem que ele é o melhor em front-end e, nos primeiros sites, até parece ser.
00:00:28Mas a verdade é que todos eles têm padrões repetitivos em cada projeto.
00:00:32Seja o Sonnet 4.5 ou o GPT 5.6, esses padrões continuam aparecendo nos designs.
00:00:38Portanto, não importa qual modelo você use, é preciso algo para tirá-lo desse padrão — exatamente o que um bom designer faz.
00:00:43E uma das melhores maneiras de fazer isso é usando uma skill chamada Hallmark.
00:00:46Se esta é a sua primeira vez aqui, nós somos uma empresa de software e este é o nosso canal, AI Labs,
00:00:50onde mostramos como otimizar seu negócio com IA. E se você não tiver o seu próprio,
00:00:54pode usar essas habilidades para faturar otimizando para outras pessoas.
00:00:58Neste vídeo, vamos analisar o modelo Kimi, suas capacidades de design front-end e a skill que elimina os vícios de design.
00:01:05Você já deve conhecer o Kimi K3 como um dos melhores modelos da Moonshot, mas aqui vai um breve resumo para quem não conhece.
00:01:11A Moonshot AI o lançou como seu modelo principal, e ele se popularizou rapidamente.
00:01:15O grande destaque é que ele agora se junta ao grupo de modelos com janela de contexto de 1 milhão de tokens.
00:01:20Em termos de desempenho, ele rivaliza com o Fable 5 e o GPT 5.6 em várias áreas — dois dos modelos mais fortes atualmente.
00:01:26Para comparar, usamos os benchmarks do Artificial Analysis, que avalia os modelos em diferentes quesitos.
00:01:32Em inteligência, ele está muito à frente do Opus 4.8 e do novo Gemini 3.6, mas um pouco atrás do Fable 5 e do GPT 5.6.
00:01:40A diferença nos números é tão pequena que ele está praticamente no mesmo nível.
00:01:44Já no design front-end, ele supera inclusive esses dois, segundo a medição do LM Arena,
00:01:48que testa modelos com o mesmo prompt e os classifica com base na avaliação de usuários reais.
00:01:54Um dos motivos de o Kimi ir tão bem é o seu recurso integrado de "visão no ciclo", fruto de suas fortes habilidades visuais.
00:02:00Basicamente, o modelo não apenas escreve o código, mas verifica o que está construindo.
00:02:04A maioria dos modelos olha apenas para o código para adivinhar como o site vai ficar,
00:02:07mas o Kimi tira prints da tela do que criou, analisa o resultado e faz ajustes com base nisso.
00:02:11E isso explica em grande parte por que dizem que ele é melhor em front-end.
00:02:15Seus espaçamentos e layouts saem muito mais equilibrados e intencionais do que os de outros modelos.
00:02:19Resta o custo.
00:02:20E é aqui que o Kimi leva uma vantagem real.
00:02:22Ele custa $3 por milhão de tokens de entrada e $15 por milhão de saída.
00:02:27O GPT 5.6 é um pouco mais caro: $5 na entrada e $30 na saída.
00:02:32E o Fable é o mais caro no momento: $10 na entrada e $50 na saída.
00:02:36Assim, o Kimi oferece o mesmo nível de desempenho dos modelos de ponta pelo menor preço entre os três.
00:02:41O Kimi vem com seu próprio ambiente, o Kimi Code, lançado junto com o modelo K2.5.
00:02:47Ele é um agente de codificação via terminal que permite rodar o Kimi sem acessar a API diretamente.
00:02:52Mas, ao testar o Kimi Code, achamos ele bem lento.
00:02:55Uma tarefa que leva cerca de 3 minutos no Claude Code ou Codex demorou quase 10 no Kimi Code.
00:03:00Isso se deve a dois fatores.
00:03:01O primeiro é que os pesos do Kimi ainda não são abertos, ou seja, o modelo é hospedado apenas pela própria Kimi.
00:03:08Então, cada requisição precisa ir obrigatoriamente para os servidores deles.
00:03:12Esses servidores ficam sobrecarregados, fazendo com que tudo demore mais para retornar.
00:03:16O segundo fator é o próprio ambiente.
00:03:17Achamos difícil trabalhar com ele até nos modelos antigos, e a própria Kimi admite que ele não foi feito para extrair todo o potencial do K3.
00:03:25Além da velocidade, existem mais dois problemas.
00:03:27Um deles é o contexto.
00:03:28No Codex e no Claude Code, trocamos muito de modelo dependendo da tarefa, e ambos mantêm o contexto perfeitamente.
00:03:36Mas no Kimi Code isso não funciona bem, pois a forma como ele segura o contexto da conversa se perde ao alternar modelos.
00:03:43O outro problema são os subagentes.
00:03:44Durante a execução, parecia estar iniciando uma quantidade enorme deles.
00:03:47Mas quando perguntamos depois, ele disse que usou apenas 5 para resolver a tarefa.
00:03:51Por isso, para testar o modelo corretamente, rodamos ele dentro do Claude Code, onde funciona incrivelmente bem.
00:03:57E a Kimi oferece uma maneira exata de fazer isso.
00:03:59Uma opção é rodar o Kimi no Claude Code diretamente pela API dele.
00:04:03Mas isso pesa na conta, pois cobra por cada palavra lida e gerada pelo modelo, o que acumula rápido se usar muito.
00:04:10Então, a melhor jogada é rodá-lo pelo plano do Kimi que você já assina.
00:04:14Assim, você não precisa se preocupar com cobranças extras, pagando só o valor mensal fixo.
00:04:18Para isso, existe uma ferramenta chamada CLI Proxy API.
00:04:21Ela pega as ferramentas de código em que você já está autenticado e as transforma em uma API própria rodando na sua máquina.
00:04:28Na prática, você converte a assinatura que já paga em um servidor local para uso.
00:04:33Você a instala usando o comando brew install.
00:04:35Em seguida, faz o login na Kimi com o comando Kimi login, que abre a página de autenticação para você entrar.
00:04:41Assim que reconhece seus dados, você está conectado.
00:04:43Depois, basta iniciar o servidor para manter a conexão ativa.
00:04:47O último passo é gerar uma chave de API para essa configuração local, pois ela será entregue ao Claude Code para dar acesso.
00:04:54Em vez de fazer isso manualmente, você pode pedir para o Claude Code ou o agente de sua preferência configurar a chave para você.
00:05:02Quando estiver pronto, é só copiar a chave gerada e usá-la.
00:05:04Aí você abre o Claude Code.
00:05:06Para isso, você altera a URL para onde o Claude envia as requisições.
00:05:09Por padrão, ele aponta para a URL da Claude, então você muda para o seu localhost, onde o servidor local está rodando.
00:05:16Cole a chave criada como seu token de autenticação da Anthropic e defina o modelo como Kimi K3.
00:05:22Depois disso, execute o comando do Claude e o Claude Code abrirá rodando o K3 com a sua assinatura da Kimi.
00:05:28Vale lembrar que essas configurações valem apenas para aquela sessão do terminal.
00:05:32Portanto, nada disso é permanente.
00:05:33Ao fechar a sessão e abrir o Claude em um novo terminal, você poderá usar a assinatura normal do Claude Code como antes.
00:05:39Mas antes de entrar nos detalhes da skill, inscreva-se no canal e deixe seu like.
00:05:44Esse pequeno gesto de apoio ajuda demais o nosso trabalho.
00:05:47A página de vendas é o cartão de visitas da sua empresa.
00:05:49Se ela tiver um visual genérico e desleixado, você perde credibilidade e os clientes não virão.
00:05:54Para criar algo profissional, você precisa tirar o modelo dos padrões repetitivos aos quais ele se acomoda.
00:06:00Existem várias skills criadas exatamente para isso.
00:06:02Uma das mais populares é a Hallmark, uma skill de design anti-clichês de IA para agentes.
00:06:07Você a usa por meio de quatro verbos.
00:06:08O primeiro é o padrão: basta dizer ao agente o que deseja construir e ele cria novas UIs seguindo as instruções do fluxo.
00:06:15O segundo é o audit, que compara seu código com antipadrões conhecidos para garantir que o site esteja limpo.
00:06:21O terceiro é o redesign, que descarta o design atual e tenta uma versão nova em uma direção totalmente diferente.
00:06:27E o último é o study, no qual você fornece um site de referência e ele extrai a identidade visual para guiar o projeto.
00:06:33Aqui está o ponto importante.
00:06:34Se você pedisse a qualquer agente para estudar um site sem a Hallmark, ele simplesmente clonaria o estilo.
00:06:40Mas a Hallmark impede essa cópia exata, tratando a página apenas como uma inspiração de design.
00:06:45Assim, o resultado continua sendo original.
00:06:47Ela também vem com uma vasta biblioteca de estilos de design para você aplicar em seus projetos.
00:06:51Se quiser ver esses estilos na prática, o site deles tem landing pages criadas em cada um deles.
00:06:56Dessa forma, você pode compará-los visualmente.
00:06:57E na documentação deles, o arquivo recipe.md detalha as melhores práticas de escrita de prompts.
00:07:02Para usar a Hallmark, primeiro é preciso instalá-la.
00:07:04Para isso, copie o comando de instalação do repositório no GitHub, cole no terminal e o processo começará.
00:07:11A ferramenta perguntará para qual agente você deseja instalá-la.
00:07:13Se estiver usando o Kimi Code ou o Codex, pode avançar sem alterar nada.
00:07:17A instalação é feita na pasta .agents, que muitos agentes — incluindo esses dois — usam para guardar configurações.
00:07:23Mas como você está usando o Kimi no Claude Code, selecione também o Claude Code na lista de agentes.
00:07:28Isso vai instalá-la na pasta .claude, onde ficam salvas as configurações do Claude.
00:07:32Após a instalação, abra o projeto e você verá as pastas .agents e .claude com a skill pronta para uso.
00:07:38O arquivo skill.md traz as instruções de uso, como executá-la e tudo o que é necessário para funcionar.
00:07:44E é isso que a torna superior às alternativas.
00:07:46Afinal, ela contém mais de cem referências cobrindo vários aspectos, inclusive vícios comuns de IA.
00:07:52Ela realiza um teste com 58 verificações antes de entregar o resultado, garantindo um site livre de clichês visuais.
00:07:58Ela também inclui diretrizes para componentes e para os comandos que vimos anteriormente.
00:08:02Mas antes de ver os designs dessa skill, um recado do nosso patrocinador.
00:08:05Seu assistente de programação de IA é incrível enquanto você trabalha, mas esquece tudo ao fechar o programa ou trocar de ferramenta.
00:08:12Você recomeça do zero sem saber o que foi feito ontem ou o que outro agente descobriu, perdendo tempo e dinheiro reexplicando tudo.
00:08:19Conheça a Jolly Memory, uma extensão gratuita e open-source para IDEs que dá memória permanente ao seu assistente.
00:08:24Ela registra automaticamente o raciocínio do projeto a partir de tarefas, links e conversas, salvando na sua máquina e gerando documentação estruturada em cada commit para registrar decisões técnicas de arquitetura.
00:08:39Sem ficar presa a uma só ferramenta, você pode alternar entre Claude, Gemini e Qwen levando seu histórico junto, sem sincronizar notas manuais.
00:08:48Funciona no VS Code, IntelliJ, Cursor, Claude e Windsurf: instale uma vez e tenha seu histórico mantido em qualquer lugar.
00:08:56Quando algo der errado, rastreie o motivo de cada alteração em um mapa claro e simplificado do seu projeto.
00:09:03Baixe a Jolly Memory pelo link no comentário fixado.
00:09:06Embora o Kimi seja realmente bom em front-end, ele também desenvolveu vícios próprios que definem seu estilo de design.
00:09:13Por ser muito recente, esses padrões ainda não são tão perceptíveis, mas ficarão mais evidentes com o tempo.
00:09:18Como modelos chineses costumam ser treinados via destilação dos modelos Claude (treinar um modelo com base nas respostas de outro), o estilo do Opus 4.8 aparece muito no Kimi.
00:09:29O jeito do Opus de colocar imagens no fundo da seção principal, alinhar textos grandes na lateral e usar paletas quentes de laranja e marrom também está no Kimi.
00:09:40Mas o ponto positivo do Kimi é que os textos não ficam cheios de termos exagerados de marketing como no Opus.
00:09:46Tudo parece colocado com um propósito real, resultando em uma leitura muito mais bem planejada.
00:09:51Para testar a skill, nós a executamos no Claude Code com o Kimi e enviamos um prompt simples para uma landing page.
00:09:56Ao iniciar, ele roda uma etapa preliminar chamada pré-voo.
00:09:59Essa etapa analisa seus arquivos existentes com informações de estilo para decidir o que reaproveitar e o que alterar.
00:10:06Como tínhamos acabado de abrir um template em Next.js, ele manteve a estrutura do Next.js e descartou o resto.
00:10:11Antes de avançar, ele faz três perguntas: qual é o público-alvo, qual a finalidade do site e qual o tom de voz.
00:10:18Mencionar isso no prompt é uma boa prática, mas se você esquecer, ele perguntará sozinho, então não é obrigatório.
00:10:25Após a resposta, ele extrai o tema e as referências visuais para construir toda a estrutura do site.
00:10:30Ao terminar, ele confirma se as 58 verificações de antipadrões foram aprovadas.
00:10:34Como a Hallmark funciona por comandos, solicitar uma reformulação completa altera todo o projeto.
00:10:39Ele reconhece a solicitação, carrega o protocolo de redesign, refaz as perguntas e recria o projeto em uma direção visual totalmente nova.
00:10:49Há também o modo de auditoria, que analisa o design em busca de clichês visuais de IA.
00:10:53Ao executar o Hallmark audit, a skill é recarregada, gera um relatório detalhado e sinaliza cada ponto de atenção.
00:11:00A partir desse relatório, você escolhe quais correções deseja aplicar.
00:11:02Ao usar o Kimi no Claude Code, monitore a memória de contexto, pois a compactação automática não é executada.
00:11:09Assim, quando a janela enche, o agente não para de responder.
00:11:12No entanto, com o limite atingido, as respostas começam a desviar das instruções e a ficar genéricas.
00:11:18Após a auditoria, o Kimi aplicou as correções indicadas, ajustando vários detalhes.
00:11:22Ele removeu a fonte que dava um aspecto genérico de IA ao layout.
00:11:25Trocou as imagens do Unsplash pelas do Pixum, já que o Unsplash é o padrão usado por quase todos os modelos.
00:11:32E corrigiu a responsividade mobile, o que melhorou a qualidade geral do site.
00:11:36A partir daí, você pode continuar solicitando ajustes até obter o resultado ideal.
00:11:39Uma dica importante se for usar skills com o Kimi no Claude Code:
00:11:42a chamada automática não é confiável porque o Kimi não é o modelo padrão do Claude Code,
00:11:47e esse gatilho automático foi otimizado para os modelos nativos do Claude.
00:11:51Portanto, o ideal é chamar a skill manualmente pelo comando com barra, garantindo seu carregamento antes do código.
00:11:57Também fizemos o mesmo teste no Claude Code com o modelo Opus 4.8, com e sem a skill.
00:12:03Começamos sem a skill, e ele desenvolveu a aplicação da maneira convencional.
00:12:06Demorou cerca de 6 minutos, e o site gerado ficou com um visual genérico típico de IA.
00:12:10Tudo denunciava o padrão do Opus: a paleta de cores, os degradês no fundo e o excesso de caixas arredondadas.
00:12:16Lembrando que o nosso sistema de design conta com a skill detectora de clichês visuais de IA,
00:12:20treinada para identificar vícios em padrões conhecidos, inclusive os do Opus.
00:12:24Ao rodá-la no projeto, ela apontou diversos antipadrões de alta e baixa probabilidade,
00:12:30destacando especialmente o uso de texto em gradiente.
00:12:32Em seguida, executamos a Hallmark.
00:12:33Ela carregou a skill, fez a checagem, registrou os vícios, refez as perguntas e rodou o fluxo novamente.
00:12:39Levou mais tempo do que a execução padrão, mas o resultado valeu a pena,
00:12:43pois o design final ficou muito mais criativo e intencional.
00:12:46Os botões ganharam interatividade superior, fruto de uma melhor compreensão do produto pelo modelo.
00:12:51Por padrão, ela não insere imagens genéricas, já que usar fotos do Unsplash é considerado um vício nas regras.
00:12:58Voltada para criadores de produtos, ela instrui você a usar imagens próprias em vez de imagens de banco ou geradas por IA.
00:13:04No geral, o resultado visual foi melhor que o do Kimi, mostrando que a skill funciona melhor com o Claude atualmente.
00:13:10Ela ainda não domina o estilo de design do Kimi, apenas apontando falhas com base nos padrões dos outros.
00:13:15Ainda assim, em todos os testes realizados, a skill se mostrou muito eficiente.
00:13:18Este sistema de design e os demais recursos apresentados em nossos vídeos
00:13:23estão disponíveis no AI Labs Pro, a nossa comunidade.
00:13:26Se este conteúdo foi útil para você e deseja apoiar o canal, essa é a melhor forma.
00:13:31O link está na descrição.
00:13:33Se você já usou o Codex, sabe que suas cores padrão são uma mistura de verde e branco,
00:13:38da mesma forma que o Opus recorre por padrão a laranja, creme e marrom.
00:13:42Essas são as cores que ele seleciona como seu estilo padrão.
00:13:45Seus projetos usam muitos SVGs e tendem a escolher fontes com tamanhos bem pequenos em relação à tela.
00:13:51Os designs ficam bons em comparação aos outros, mas esses padrões visuais acabam aparecendo de qualquer forma.
00:13:56Testamos o Codex com a skill instalada na pasta .agents, fornecendo um prompt simples explicando o que queríamos criar.
00:14:03Usamos o aplicativo do Codex, que inclui ferramentas de navegação web e outros recursos eficientes.
00:14:09Ele executou a verificação inicial e perguntou sobre o público-alvo, o caso de uso e o tom desejado.
00:14:14Após a seleção, ele executou todo o fluxo: editou arquivos, rodou os testes padrão e fez um teste interativo no navegador.
00:14:21Ele possui recursos de navegação e se sai muito bem nesse tipo de tarefa, aproveitando ao máximo esses recursos.
00:14:26Ao finalizar, o site entregue apresentou uma qualidade visual muito superior.
00:14:29A combinação de azul e branco ainda pode parecer um pouco gerada por IA, mas aqui soa intencional por se alinhar a sites técnicos.
00:14:39Todos os elementos ficaram diferentes do padrão habitualmente gerado pelo Codex.
00:14:43Embora a imagem da seção principal tenha apresentado falhas, como o visual da aba selecionada, isso poderia ser corrigido manualmente.
00:14:52Executamos a auditoria da Hallmark e ela gerou um relatório.
00:14:54O relatório indicou uma estrutura sólida, restando poucos ajustes, como a responsividade que a primeira versão omitiu.
00:15:02Chegamos ao fim deste vídeo.
00:15:03Se você quer apoiar o canal para continuarmos produzindo conteúdos assim, use o botão Valeu Demais abaixo.
00:15:10Muito obrigado por assistir e nos vemos no próximo vídeo.