Como usar Claude Design melhor do que 99% das pessoas

Autoria: Jack Roberts · Assistir no YouTube

Vídeo de autoria do canal indicado, não da IANIA; todos os direitos pertencem ao criador. Transcrição, resumo e tradução gerados automaticamente; o conteúdo no idioma original é preservado na versão em idioma original.

Idioma original: inglês

Vídeo original: How to Use Claude Design Better Than 99% of People · Canal: Jack Roberts · 34:31 · Assistir no YouTube

Tópicos: Agentes de IA, Claude, Engenharia de software com IA, Geração de conteúdo com IA

Resumo

Jack Roberts apresenta 15 técnicas para criar designs, animações e sites com Claude Design, desde motion graphics e diretrizes de marca até páginas 3D e um sistema de design integrado. Ele recomenda usar referências visuais, fontes, ícones e recursos de inspiração para orientar os resultados, além de ferramentas como Higgsfield e Linearity. O vídeo também aborda um ciclo de revisão com subagent crítico, uma checklist de agentes e princípios para simplificar interfaces e reduzir textos com aparência artificial. Por fim, mostra como reunir designs, métricas e memória em um sistema operacional agentic para conectar criação visual ao trabalho e à produtividade.

Pontos-chave

Forneça referências visuais, materiais da marca e instruções claras para orientar a criação de motion graphics.
Peça variações de estilo e animações em loop para tornar apresentações e conteúdos mais envolventes.
Use recursos como LottieFiles, Typewolf e bibliotecas de ícones para aprimorar movimento, tipografia e elementos visuais.
Crie diretrizes de marca e reúna cores, tipografia, logos e outros assets em um sistema reutilizável.
Use Linearity para gerar materiais com a identidade da marca e depois editar, compartilhar e adaptar os designs.
Pesquise exemplos de sites e aplicativos para se inspirar em componentes específicos, como navegação, rodapés e chamadas para ação.
Aplique o design loop para comparar o resultado com uma referência e revisá-lo até atender ao briefing.
Revise os designs com uma checklist de agentes e reduza a densidade de texto para facilitar a compreensão.
Use Slop Monster e princípios de linguagem técnica simplificada para revisar textos e reduzir padrões de escrita artificial.
Combine geração visual, biblioteca de referências, memória e métricas em um sistema operacional agentic.

Capítulos

Início	Capítulo	Resumo
00:00	Introdução e motion graphics	O apresentador introduz as técnicas do vídeo e explica como orientar a criação de motion graphics com referências e um plano.
01:33	Referências e animações em loop	Demonstra como fornecer referências e pedir animações em loop com variações de estilo para apresentações e vídeos.
03:34	Animações e acabamento premium	Mostra como pequenos movimentos e recursos de bibliotecas de animação podem dar mais refinamento aos designs.
05:07	Diretrizes de marca e inspiração visual	Explica como criar um brand book usando exemplos de marcas, galerias de apresentações e referências de logos.
09:45	Linearity e designs editáveis	Apresenta como importar elementos de uma marca para Linearity, gerar publicações e editar os resultados em uma tela de trabalho.
14:55	Fontes e ícones	Recomenda recursos para encontrar tipografias e ícones que ajudem a melhorar a qualidade visual de sites.
17:30	Inspiração para componentes e aplicativos	Explora galerias e referências para projetar navegação, rodapés, chamadas para ação e jornadas de aplicativos.
21:07	Design Loop e revisão por agentes	Demonstra como usar uma referência visual e um ciclo de crítica para orientar e revisar designs gerados.
24:46	Checklist de agentes e simplicidade	Propõe revisar designs com agentes especializados e aplicar o princípio Don’t Make Me Think para reduzir a complexidade.
26:49	Textos naturais e linguagem simplificada	Apresenta Slop Monster e a linguagem técnica simplificada como métodos para revisar textos e melhorar a comunicação.
29:55	Recriação de gráficos e sites 3D	Mostra como usar imagens de referência para criar gráficos e como combinar Claude Design e Higgsfield em experiências 3D.
33:30	Sistema operacional agentic	Apresenta um sistema que reúne designs, referências, geração de conteúdo, métricas e memória em um fluxo integrado.

Citações

Usar Claude sem motion design é como ter uma Ferrari presa na primeira marcha. — 01:33

Sem diretrizes de marca adequadas, é difícil manter qualquer tipo de consistência. — 05:07

Você dá ao Claude o padrão do que é bom. — 21:07

Queremos ter um viés pela simplicidade. — 25:48

Conceitos e entidades

Claude Design (ferramenta): Ferramenta apresentada para criar designs, imagens, sites e animações com instruções e referências visuais.
Claude Code (ferramenta): Ferramenta mencionada junto de Claude Design como parte do fluxo de criação e aprimoramento de designs.
Opus 5.5 (modelo): Modelo que o apresentador diz ter usado para criar um dos exemplos de design.
Higgsfield (ferramenta): Serviço usado no vídeo para geração de imagens e vídeos, integrado a Claude por MCP ou CLI.
Linearity (ferramenta): Plataforma que importa elementos de uma marca e permite gerar, editar e compartilhar designs.
Slop Monster (repo): Repositório apresentado como ferramenta gratuita para revisar textos e reduzir padrões de escrita considerados artificiais.
Design Loop (conceito): Método que compara designs gerados com uma referência e orienta revisões para atender ao briefing.
Don’t Make Me Think (conceito): Princípio de design usado para defender interfaces simples que possam ser compreendidas rapidamente.
LottieFiles (ferramenta): Biblioteca mencionada como fonte de animações que podem ser integradas a sites.
Jack Roberts (pessoa): Apresentador do vídeo, que demonstra os fluxos de design e as ferramentas discutidas.

Tradução completa (pt-BR)

00:00 Vou mostrar exatamente como criar designs de sites e motion graphics incríveis com o Claude Design 2.0. E, depois de centenas de horas criando com o Claude Design, vou mostrar 15 truques para o Claude que vão poupar horas e transformá-lo em um gênio do design [música]. Começando pelo básico e avançando até o nível avançado, vamos incluir coisas que não vi [música] em nenhum outro lugar. Então, se ainda não fez isso, pegue aquele café delicioso e vamos direto ao assunto. Vamos começar com o primeiro truque do Claude Design. O próprio Claude Design ganhou capacidades realmente novas

00:31 e incríveis. Com o Opus 5.5, ele consegue criar coisas incríveis como esta. Dá para fazer muitos estilos artísticos diferentes. E, mesmo assim, a maioria das criações das pessoas parece uma bagunça. Dá para fazer coisas desse tipo de uma só vez. E, ao final do vídeo, você vai conseguir usar e criar belas animações de motion graphics, tudo o que conseguir imaginar, como esta. Mas vamos começar, é claro, pela primeira coisa que vamos abordar: o workflow. E tenho muitos truques para vocês. Espero que estejam preparados e prontos. O nível um é motion graphics. Também vou deixar abaixo, para vocês, o sistema completo de

01:01 prompts do Claude Design. Então, tudo o que falarmos neste vídeo, pessoal, vai estar disponível em um prompt que vocês podem acessar e copiar quando quiserem e, basicamente, reproduzir algumas das coisas que vamos abordar neste vídeo. Então, o que quero dizer com motion design no Claude? Bem, boa parte é parecida com coisas que vocês já viram. Vamos até aqui ao sistema operacional generativo e vou mostrar o tipo de coisa que dá para fazer com motion design. Agora, a questão é: veja, uma coisa é ter um bom motion design, mas como faço para criá-lo de fato? Tudo o que estão vendo na tela agora foi criado por mim com motion design.

01:33 Como fazer isso na prática? Bem, usar o Claude sem motion design é como ter uma Ferrari presa na primeira marcha. Então, a primeira coisa que vamos fazer é dar ao Claude uma referência e um plano. Fazemos isso porque você precisa explicar como quer que sejam esses motion graphics. Você fornece uma referência, explica o que quer que aquilo faça e, então, basicamente, orienta o sistema para fazer o que deseja. O método para isso é fornecer um clipe de referência de que você goste, algo que ache interessante, dar a ele sua marca, seus diferentes logotipos, suas cores e, depois, explicar brevemente o que quer. Então, você pode simplesmente copiar

02:04 este prompt: vá até a seção um e copie isto aqui, e pronto. Por exemplo, para esta peça que criei com Glido, tudo o que fiz foi fornecer meu próprio site. Acessei o site glido.com, basicamente, e disse: “Quero que você crie uns pássaros lindos com um logotipo brilhante para mim.” E ele gerou esse recurso por completo. E vocês podem ver aqui outros tipos de motion graphics que as pessoas geraram usando todo esse sistema. Elas criaram cavalos e animaram várias coisas diferentes. Isso nos leva ao nível dois. O nível dois é, basicamente, a capacidade de fazer os

02:34 gráficos entrarem em loop. A ideia aqui é termos uma ideia e um gráfico em loop. Assim, em vez de fazer apresentações, podemos criar estas animações lindas que começam e terminam com o mesmo quadro. Basicamente, se você pensar no motivo de fazermos isso, um slide estático é bem parado e pouco interessante. E qual é um bom exemplo disso? Exatamente o que estou mostrando agora. Então, basicamente, isso pode tornar qualquer apresentação muito mais envolvente. E, para criar isso, pessoal, é muito simples. Basicamente, basta explicar o que você quer que a peça

03:04 explique. Peça três variações diferentes de estilo e, depois, certifique-se de que ela termine em loop. Por exemplo, se você estiver fazendo isso com Instagram Reels, como eu fiz, quando peço que ele crie gráficos diferentes para mim, sempre peço três estilos diferentes. Assim, você pode dar uma olhada, descobrir quais prefere e, depois, escolher. Já consegui dezenas e dezenas de milhares de visualizações usando exatamente essa estratégia. E isso também é bem útil para coisas como vídeos do YouTube. Mais uma vez, vou colocar abaixo o link para o prompt, para você poder copiá-lo. Agora, o truque

03:34 número três é como fazer qualquer um dos seus designs parecer muito mais sofisticado. A ideia é adicionar pequenos detalhes: elementos que se elevam ao passar o cursor, pressionamentos suaves e números de contagem. Como deixar a atmosfera e a sensação de qualquer design feito com o Claude Design um pouco mais especiais, um pouco mais premium? Um bom exemplo é exatamente esta coisa que criei para minha startup. Agora, confira. Se eu mostrar isso para vocês, criei praticamente tudo isso com um prompt no Claude Design, usando o Opus 5.5. Se olharem para coisas como esta, para a animação ao passar o cursor, vocês podem ver, por exemplo,

04:05 que isto foi feito com este recurso. Todas essas coisas aqui, como parte da velocidade, quando ele percorre a tela e verifica os aplicativos. Cada uma dessas animações que vocês veem, esta animação de rolagem e o texto, parece superpremium. O Claude Design não faria isso sozinho, por exemplo, certo? Então, como fazer isso? Bem, dá para fazer coisas como esta. Aqui vai um exemplo: estou fazendo os pássaros se moverem na animação, descerem e aparecerem coisas. Um recurso que você pode usar se chama LottieFiles. O legal é que esses gráficos costumavam ser incluídos em sites, mas agora você pode simplesmente integrá-los

04:36 em qualquer lugar que quiser. Digamos que você goste desta imagem de dinheiro, certo? Digamos que goste disto. Seja lá o que for, você pode salvar. “Does success” parece familiar? Ótimo. Basta encontrar o que você gosta. Você pode simplesmente acessar a página e copiar, até mesmo copiar o URL e compartilhá-lo. E eles também têm muitos recursos gratuitos por lá. Outra boa opção é transitions.dev, que mostra transições bem legais e fluidas. Se quiser acessar, você também pode usar este outro recurso. Todos esses sites estarão abaixo, na descrição. Há também 60framespersecond.design, que é ótimo para ver todos esses tipos diferentes de gráficos e movimentos e como tudo se desloca pela tela. Você também

05:07 tem o Kinetic, que aborda movimento e como diferentes elementos se movem. Há muitas coisas diferentes. Também há motion primitives. É um conjunto de designs bem refinado e agradável que você pode simplesmente pegar emprestado. Agora, o truque quatro é como pegar qualquer negócio seu e criar diretrizes de marca incríveis para ele. Porque, sem diretrizes de marca adequadas, é difícil manter qualquer tipo de consistência. Então, o que vamos fazer aqui é ter um único arquivo com todas as suas cores, tipografias e regras, que você pode fornecer ao Claude em qualquer lugar. Isso basicamente significa que o Claude vai se lembrar exatamente de como você quer as coisas. E tudo o que você vai

05:37 é basicamente seguir em frente e desenvolver isso. Agora, entender e saber que você precisa de uma marca é uma coisa, mas a questão é: como faço isso de fato? Bem, podemos criar juntos algo chamado brand book usando alguns recursos incríveis que são completamente gratuitos. Então, basicamente, o que vamos fazer é encontrar inspiração, transformá-la em um arquivo e, depois, compartilhar esse arquivo com o Claude ou qualquer serviço que estivermos usando. E, de novo, tenho um prompt que você pode copiar e compartilhar com o Claude, e ele vai fazer isso. E, mais uma vez, você pode conseguir literalmente muitas coisas diferentes. Então, alguns dos lugares que recomendo muito que você confira ao desenvolver sua

06:08 marca. Começamos encontrando diretrizes de marca excelentes que já existem. Você pode encontrar algumas das melhores marcas online e ver o que elas estão fazendo para usar como modelo. Este, por exemplo, reúne todas as diretrizes de marca do Spotify. O que eu poderia fazer é copiar isso, ir até o Claude e dizer: “Adoro a maneira como o Spotify organizou essas diretrizes de marca. Gostaria que você me ajudasse a desenvolver minhas próprias diretrizes de marca usando exatamente essa estrutura, mas tornando tudo completamente único.” Então, acabei de copiar tudo isso, desço a página e forneço o material como uma espécie de arquivo de referência, certo? Aí ele pode usar a documentação do

06:39 Spotify. Ou talvez você prefira a Adobe. Pode fazer exatamente a mesma coisa. Como vê, eles têm muito mais categorias, além de propósito da marca, visão e coisas do tipo. Depois, você talvez queira criar um design de apresentação lindo com o Claude. Para isso, você pode usar este site, deck.gallery, onde encontra todas essas apresentações lindas para se inspirar. E a inspiração é muito importante na hora de criar coisas. Então, pode navegar por aqui e encontrar as que achar incríveis. Tem a Instacart, algumas das marcas de crescimento mais rápido do planeta. O site também inclui visões gerais dos slides. Assim, qualquer tipo de slide que você queira encontrar — talvez goste da

07:10 aparência deste aqui. De novo, há opções pagas e opções gratuitas. Você pode experimentar. A próxima coisa é definir seu logo, porque um site sem logo não é um site de verdade. logosystem.co é muito legal. Você pode navegar por aqui e encontrar boas referências. O que você costuma fazer é copiar as imagens, voltar ao Claude e montar uma espécie de colagem. Digamos que eu goste do que está mais à direita. Digamos que eu desça a página e goste muito da simplicidade da Lyft. Vamos pegar essa e dar uma olhada. Volte e simplesmente adicione alguns logos diferentes de que você goste. Depois de encontrar alguns que pareçam bons,

07:41 porque nem todo mundo consegue descrever como eles são. Você pode até dizer: chame este de Open Call One, por exemplo. Talvez algo assim, com o pássaro gráfico. Depois, volte ao Claude e diga: “Adoro esse tipo de design. Inspire-se neles. Dê-me nove opções de logo para uma startup de conversão de fala em texto que se dedica a gerar imagens lindas.” Agora, a maneira como estou gerando essas imagens dentro do Claude — e faço isso para tudo — é usando o Higgs field CLI. Se você já conhece, fique à vontade para pular esta parte. Caso contrário, basicamente, o Higgs field permite usar os melhores modelos de geração de imagens e de geração de vídeo. É incrivelmente simples. Eu faço

08:13 toda a minha geração aqui. Na verdade, você pode vir até aqui se ainda não configurou isso, e vou deixar um link abaixo para você clicar e fazer o mesmo. Basta clicar em MCP, nesta seção aqui. Você vai ver isto. É só clicar em Claude ou ChatGPT e, em seguida, clicar em conectar ao Higgs field. Esta página vai abrir. Clique em continuar. Desça até o final. Clique em adicionar. Ele vai verificar a conexão. Clique em conectar. Isso vai abrir em uma nova janela, e então você poderá fazer qualquer coisa. E você vai notar que todos os elementos gráficos das apresentações que criei neste vídeo foram feitos usando basicamente o Higgs field. Isso simplesmente facilita muito a criação de coisas. E

08:43 aí, tudo ficará completamente conectado e você poderá gerar qualquer coisa. Enquanto isso está sendo processado em segundo plano, se estiver procurando inspiração para diferentes campanhas, você pode acessar visualjournal.it. Basicamente, é uma coleção de designs lindos e variados. Por exemplo, digamos que eu goste da aparência desta garrafa, certo? Digamos que eu goste desta imagem. Posso simplesmente copiá-la, voltar ao Claude, por exemplo, e adicioná-la. Aí digo: “Adorei isto. Quero fazer algo parecido para a Glido. Você poderia adicionar um logo da Glido a uma das garrafas, usando exatamente o nosso esquema de cores, e simplesmente usar o Higgs field para isso.

09:14 Obrigado.” Aí ele volta com estas imagens lindas, como estas. E acho que ficaram ótimas. Ele captou muito bem a essência dos exemplos que fornecemos. Usando o Claude Design, você pode criar elementos gráficos lindos assim. Da mesma forma, ele acessou meu site, entendeu do que se trata e adicionou o logo a estas garrafas lindas. A Glido vende garrafas? Não, mas você entendeu a ideia. Basicamente, dá para criar tudo isso com o Claude Design. Depois, para identidades visuais, você pode acessar rebrand.gallery e ver todos os diferentes estilos de marca, todas essas maneiras lindas de fazer isso. E, mais uma vez, você pode fornecer tudo isso ao Claude para criar

09:45 basicamente a sua própria identidade de marca única. O Claude é incrível para criar e gerar sites, elementos gráficos, imagens e designs. Mas, às vezes, quando se trata de uma marca, precisamos de tudo. Precisamos criar publicações para o X, publicações para o LinkedIn, para o Instagram, e precisamos poder editá-las. É aí que entra a próxima ferramenta. Ela se chama Linearity. O Linearity nos permite não apenas criar coisas com o Claude ou com os modelos que quisermos, mas também editá-las, compartilhá-las com as equipes e deixá-las altamente personalizáveis. Eles têm um site 3D bem chamativo, onde você pode escrever um prompt e

10:17 criar várias coisas legais. Vá em frente, descreva o que você quer, faça ajustes e depois use isso onde quiser. Para começar, você pode acessar o Linearity e criar uma conta. Quando chegar ao Linearity, primeiro vá até a barra lateral à esquerda e clique em Brands. Aqui, por exemplo, você pode criar a sua própria marca. Se eu clicar aqui e depois em New Brand, é realmente impressionante como isso funciona. Posso inserir o site da marca. Vamos inserir glido.com, por exemplo. Depois disso, você pode visualizar a marca. Eu já configurei isso, mas

10:48 pode ser qualquer coisa que você quiser. Por exemplo, digamos monzo.com, seja lá qual for o site. Basta descer até aqui e clicar em Import. Basicamente, posso usar o recurso de configuração profissional da marca. Se quiser, posso enviar meus próprios brand books. A ideia é que ele importe todos os recursos, todo o esquema de cores, a tipografia, tudo daquela marca, e reúna tudo em um único sistema de design que possamos usar quando quisermos. Para mostrar como isso fica na prática, se eu acessar a Glido, por exemplo, você pode ver que ele capturou o logo e tem

11:18 tipografia, cores, todo esse tipo de coisa. E, essencialmente, é como se fosse a obra-prima da marca Glido. Posso fazer isso com o que eu quiser. Mas o que queremos fazer é criar coisas de verdade. Então, desça e clique em criar e, depois, em gerar design. Você vai chegar a uma página como esta, com algumas setas curvas bem legais. Vamos pedir para criar algo usando esse sistema de marca. Eu gostaria que você criasse para mim uma publicação no Instagram anunciando que o Glido já está disponível no Windows. Me dê três

11:50 ideias ou designs diferentes com base na minha paleta de design. E, bem aqui, podemos selecionar a marca específica que estamos usando, que, claro, é a Glido. Depois, é só enviar. E, pronto, você já vai ver esse conteúdo aparecendo ao fundo. A maneira como eu pensaria sobre o Linearity como plataforma usando Claude é que, para mim, é uma combinação de Claude com Canva, como se os dois tivessem tido um filho, porque é muito parecido com o Canva no sentido de que você tem essa enorme área de trabalho em que pode clicar duas vezes para ver as coisas, movê-las e editá-las depois que

12:21 elas estiverem lá. Agora, precisamos definir qual formato queremos. Como ele está perguntando isso, vamos escolher o formato clássico, quadrado. Desça e clique em enviar. Claro, se quiser, você pode procurar as dimensões exatas de que precisa, as proporções exatas para o que estiver criando. E, como podem ver, agora temos essas imagens inseridas, que podemos usar no Instagram. São três designs e ideias de estilo diferentes, mas o mais legal é que podemos editá-los. Por exemplo, pensamos: “Está ótimo, mas e se quisermos deixar isso um pouco maior?” Podemos fazer isso. Podemos mexer e editar. E isso é realmente

12:52 uma das coisas legais que podemos fazer aqui: a possibilidade de editar e mudar as coisas. Então, não estamos simplesmente mandando tudo para um processo automático; podemos trabalhar nisso. Talvez queiramos deixar maior o anúncio do lançamento para Windows. Beleza. E, depois, queremos editar esse texto; podemos descer e fazer isso. Basicamente, podemos mudar as fontes para qualquer uma que quisermos. E talvez queiramos deixar esse logotipo mais em destaque; podemos movê-lo para cá. Essencialmente, dá para editar do jeito que você quiser. E, se você já usou algo como Photoshop ou qualquer programa desse tipo, como Figma, muita coisa vai parecer bem familiar. Mas, essencialmente, você

13:22 pode criar esses designs e depois fazer ajustes com muita facilidade. Quando tivermos os designs de que gostamos, basta ir até o lado direito e clicar em compartilhar. Compartilhe com equipes, baixe, faça o que quiser. E, do lado esquerdo, você pode clicar em modelos se quiser buscar inspiração e dar uma olhada em algumas opções prontas. Também pode adicionar elementos. De novo, tem esse estilo meio Canva, em que você pode inserir coisas. Dá para adicionar texto e até carregar imagens para criar seu próprio design usando IA ao mesmo tempo. Mas o legal é que, se você voltar, pode descer até aqui, do lado direito, e clicar em conectar a

13:53 e conectar isso ao Claude pelo MCP, clicando, por exemplo, em Claude desktop. Desça, clique em continuar e siga todas as instruções que aparecerem. Você pode copiar isto e seguir as instruções; depois, vai conseguir se conectar a todo o seu sistema de marca. O legal disso, pessoal, é que ele tem tudo para sua equipe, seja lá o que você estiver tentando criar: diferentes sistemas de design, projetos, formatos, tamanhos. Você pode criar tudo em um único sistema de design. E, no lado esquerdo, se clicar em marcas, por exemplo, vai ver que agora tenho aqui a marca Monzo.

14:23 Posso até conferir os recursos visuais da Monzo; basicamente, são todos os recursos que ele extraiu dela. De novo, posso descer, conferir a Glido e ver os diferentes recursos visuais que ela tem para a marca. Lembrem-se de que eu não adicionei esses recursos. Ele simplesmente os extraiu por conta própria. E agora ele vai deixar tudo aqui, com todas essas imagens lindas. Posso editá-las, criar com elas e fazer o que quiser. Isso nos leva direitinho ao nível seis. A maneira mais rápida de melhorar a qualidade dos seus designs com Claude Code e Claude Design é usar fontes e ícones. Vocês sabem que dá para identificar facilmente um design de IA malfeito pelas fontes que ele usa. Tem um visual e uma sensação bem característicos. Então, há alguns lugares onde você pode fazer isso, se quiser. Claro, a primeira opção é gerar essas imagens usando Higgsfield ou qualquer gerador de imagens e vídeos com IA. Eu uso Higgsfield para esse tipo de coisa. Olhem só como ficou lindo. Isto foi gerado pelo Higgsfield. É uma forma diferente de gerar imagens, e o resultado é lindo. Olhem só. Aqui embaixo, temos o Auto Hue Counter. Dá para inventar seu próprio tipo de letra, se quiser. Você pode fazer isso completamente. Agora, para o texto do

14:55 seu site, você pode usar sites como o Typewolf. Ele mostra muitas fontes que estão fazendo sucesso agora, e você pode escolher as que gostar. Além disso, também pode conferir o fonts in use.com. Gosto muito desse site porque, digamos que você adore Halo, como toda pessoa sensata. Eu adoro a maneira como integraram essa fonte. Tenho um projeto específico em que ela ficaria ótima. Você pode fazer isso. Digamos, por exemplo, que você goste desta. O que pode fazer é vir até aqui e copiar esta imagem. Depois, basta ir até o Claude e dizer: “Oi, quero criar uma landing page. Você poderia

15:26 fazer isso usando o texto desta imagem? Ela me inspira muito.” Encontre para mim a licença gratuita disponível mais próxima para usar exatamente esta fonte. Depois, pessoal, vocês podem colar um link ou uma imagem e usar isso. Claro, só precisam verificar o licenciamento de todas as fontes. Muitas vezes, peço ao Claude para gerar, sabe, de seis a nove versões diferentes de fontes de que eu talvez goste. Outra boa opção é o WhatTheFont, que é um site bem útil. Também tem o Font Share, com muitas fontes lindas. Dá para navegar e encontrar uma de que goste. E, se não tiver certeza, você pode vir até aqui

15:57 e fazer uma captura de tela, dizendo: “Oi, Claude, gostei muito disto. Você poderia me dizer que fonte é essa?” E criar a minha de um jeito parecido. Outra ótima maneira de melhorar o design do seu site é usar ícones. Eu gosto de usar o Flat Icon. Dá para encontrar muitos em estilos diferentes. Então, em vez de dizer algo como: “Oi, há três coisas que você pode fazer”, ou “Oi, isto é tão popular quanto O Senhor dos Anéis”, ou “Isto vai economizar três horas”, você pode simplesmente usar gráficos e ícones bonitos e baixá-los. Outra opção é um site chamado Icons8. Ele mostra ilustrações, ícones. E eu usei isso na minha primeira startup de tecnologia, em

16:28 e tire uma captura de tela disso e diga: “Oi, Claude, gostei muito disso. Você poderia me dizer qual é essa fonte?” E crie o meu de um jeito parecido. Outra ótima maneira de elevar o nível do design do seu site é usar ícones. Eu, pessoalmente, gosto de usar o Flat Icon. Você encontra muitos em estilos diferentes. Então, em vez de dizer algo como: “Ei, há três coisas que você pode fazer”, ou “Ei, isso é tão popular quanto O Senhor dos Anéis”, ou “Isso vai poupar 3 horas”, você pode simplesmente usar gráficos e ícones bonitos, e pode baixá-los. Outra opção é algo chamado Icons8. Eles mostram ilustrações, ícones. E, na verdade, usei isso na minha primeira startup de tecnologia, na

16:58 o site para ajudar a ilustrar, basicamente, a ideia, e até incorporei isso no app, o que é ótimo. Então, você pode descer e pesquisar coisas diferentes. Digamos que eu esteja procurando pipoca. Você pode encontrar estilos visuais que chamem a sua atenção. E aí, basicamente, depois que você assinar essas plataformas, pode baixá-los. E acho que algumas delas deixam você fazer isso de graça se também der os créditos. O nível nove é todo sobre conseguir designs excelentes, cheios de inspiração, porque a qualidade de um design é determinada em grande parte pelo que estamos observando. Então, a ideia aqui é que podemos encontrar diferentes aspectos e

17:30 diferentes tipos de inspiração para criar sites, recursos visuais, gráficos, qualquer coisa que você quiser. A Navbar.gallery é um ótimo lugar para, acredite ou não, encontrar as melhores barras de navegação do planeta. Então, se você realmente quer analisar a barra e o sistema de navegação que tem, pode conferir este site. Depois, temos um site muito legal chamado footer.design. Ele mostra alguns dos rodapés mais bonitos que existem em sites, o que acho muito legal e caprichado. A ideia é que você possa meio que combinar partes diferentes e criar os rodapés dos seus sonhos com base nisso. Então, pode tratar isso como mostrei aqui. Por exemplo, você pode pensar

18:02 em cada um como algo individual e escolher elementos para criar aquela seção específica. Isso ajuda bastante. Também temos o CTA.gallery. O CTA.gallery basicamente mostra uma combinação das chamadas para ação mais bonitas e potencialmente com alta conversão que existem. Então, se você está pensando: “Droga, quero fazer as pessoas se inscreverem, mas não sei como isso deveria ser”, pode vir aqui e encontrar exemplos diferentes. Depois, tem o 404s.design. Esse é interessante porque, de modo geral, no marketing e no design, a forma como você faz qualquer coisa é a forma como você faz tudo. E o motivo pelo qual as marcas dão tanta atenção às páginas 404 é, em grande parte, que, se esse é o nível de detalhe e atenção que estão dispostas a dedicar a uma página 404, quão a sério elas levam o próprio produto pago? Então, se quiser inspiração para páginas 404, pode encontrar um exemplo aqui e usar esses designs como base para criar o seu. O Onsection.com é outro ótimo exemplo de onde você pode encontrar uma inspiração de design fantástica. Talvez você queira criar grades melhores, que são muito legais e estão em alta agora, se você gosta desse estilo, que, felizmente, em vez de ter um bloco grande,

18:33 fazer tudo. E o motivo pelo qual as marcas dão tanta importância às páginas 404 é, em grande parte, porque, se esse é o nível de detalhe e atenção que elas estão dispostas a dedicar a uma página 404, quão a sério elas levam o próprio produto pago? Então, se você quer inspiração para páginas 404, pode encontrar um exemplo aqui e se inspirar nesses designs para criar o seu. Onsection.com é outro ótimo exemplo de onde você pode encontrar uma inspiração de design fantástica. Talvez você queira criar grades melhores, o que está bem em alta agora, se você curte esse estilo, em vez de ter um grande

19:04 mostram vários recursos visuais diferentes. Isso pode ser ótimo para dashboards, e também para sites que exibem recursos diferentes. De novo, você pode descer até aqui. Uma coisa que acho legal é combinar imagens, números e datas. Você pode fazer isso nos seus sistemas operacionais. Por exemplo: “Ei, Glider, abra os sistemas operacionais Java’s da Agentech.” É exatamente a mesma coisa que faço no meu próprio sistema operacional, principalmente porque acho que a grade Bento é uma forma muito útil de fazer isso. Então, você pode ver que tenho números e sistemas diferentes aqui. Estou usando dados fictícios, mas dá para entender a ideia. Isso simplesmente facilita o uso e a compreensão

19:34 porque tem uma aparência melhor. Se quiser buscar designs de bons apps, você pode experimentar o 60fps.design. Ele basicamente mostra animações maravilhosas diferentes e como elas são feitas. Ou seja, não apenas uma captura de tela, mas os vídeos por trás dela, os gráficos e como tudo se conecta. Isso nos leva diretamente ao nível nove, ou hack número nove. E este é muito interessante. A ideia, essencialmente, é descobrir quem são as melhores pessoas do mundo naquilo que você quer fazer. Talvez seja um app financeiro, talvez seja um app para aprender idiomas. Bem, existem sistemas que podemos acessar e usar para isso.

20:06 Dois que tenho usado bastante recentemente são o Mobbin e o Refer. Eles não são fantásticos. Por exemplo, o mobbin.com é bem interessante. Você pode descer até aqui e pesquisar, digamos, por finanças. Certo. Você pode pesquisar por apps ou por sites. Por exemplo, digamos que eu queira pegar um app. Agora posso descer e olhar este aqui. Então, aqui está um do Duolingo, por exemplo, e aqui está um do Revolut. Se estou criando um app ou uma jornada, posso vir aqui, olhar isso, copiar e dizer: “Ei, adorei isso.” E é ótimo porque acrescenta detalhes diferentes. Essencialmente, eles registraram todas as telas que existem para aquele app específico, o que é ótimo.

20:37 Eles também têm uma seção de sites, que é muito útil, porque você pode pesquisar sites também. Também gosto muito, como você pode ver, do Duolingo. Então, talvez você queira criar uma página do tipo “Ei, você subiu de nível”. Bem, pode usar isso como inspiração para ver como ela poderia ser. Da mesma forma, você tem o refer.design. Se clicar em estilos no lado esquerdo, pode descer e ver todos esses designs bonitos que têm uma aparência fantástica, além de encontrar sites que se aproximem bastante daquilo que você está criando. Agora, o nível nove é um dos sistemas de design mais poderosos que já usei.

21:07 E ele se chama ciclo de design. Quando você combina o ciclo de design com o Higgs Field para gerar imagens e vídeos, o resultado realmente cria coisas que vão deixar você de queixo caído. Nunca vi nada que eu pudesse fazer literalmente em uma única tentativa para criar algo absolutamente espetacular. A ideia do ciclo de design é mostrar ao Claude como é um resultado excelente. Então, você dá a ele um design de referência. E, na prática, vai fornecer um prompt. Esse prompt está linkado aqui embaixo, como você pode ver no lado esquerdo. Então, basta copiar e colar este

21:39 e, essencialmente, ele fará com que Claude crie um subagent que será um crítico. Em vez de ficar indo e voltando com você, ele avalia o resultado com base no material de referência e só retorna quando chega lá e todos os agents concordam que o resultado atende ao briefing de design. Digamos, por exemplo, que você esteja no saved.com, que é um ótimo repositório, na verdade. Os designers adoram isso. Eu adoro demais. E você quer procurar algo como vídeos de pôsteres, certo? Seja lá o que for. E está procurando algum tipo de inspiração de design que gostaria de usar.

22:10 Vou dar um exemplo de algo que fiz antes, só para mostrar como isso é poderoso. Por exemplo, tinha este aqui, que achei lindo, certo? Ele mostra isso aqui. Tem esse lindo efeito de chama vermelha, 1957, Orphic, seja lá o que for. Tudo o que você precisa fazer é descer e copiar este vídeo, ou simplesmente descer e baixá-lo. Depois, vá até o material abaixo e pegue esta skill gratuita no seu pacote de recursos. Copie e cole tudo e, em seguida, vá para o Claude. No Claude, você terá isso aqui e vai dizer: “Oi, quero usar minha skill do ciclo de design com a geração de imagens e vídeos do Higgs Field para recriar isso para mim, mas, em vez desse texto, quero que apareça 1992 e que tenha JR.” Certo, desça e cole esse texto.

22:41 Se você não tem essa skill, ela é fantástica. Essencialmente, é uma versão de design de uma técnica muito legal chamada ciclo do gauntlet, que é fantástica. Fiz um vídeo completo sobre isso. Vou colocar o link na tela se quiser saber mais. E não estou brincando: usando o Higgs Field, este foi o resultado que recebi, com 1992. Dá para ver como ele fez isso com todo esse cuidado. E tudo isso foi gerado usando o Higgs Field e o

23:13 Prompt do Design Loop. É isso. Estou impressionado com o quanto ele fez isso bem. Basicamente, não há nada que você não consiga recriar. Você pode conferir por conta própria o quanto eles são parecidos. E pode fazer isso em quaisquer dimensões que quiser. Se eu gostar dessa ideia, mas quiser usar amarelo, ou quiser algo que se encaixe no Instagram, também posso fazer isso usando o Claude. É fantástico. Da mesma forma, pessoal, fiz exatamente a mesma coisa. Agora, este aqui à esquerda, por exemplo, está fantástico. E é por isso que o Design Loop é tão poderoso: você pode dizer que algo parece incrível, certo? Mas não consegue dizer por quê. Agora, isso

23:45 acontece porque há algumas coisas em jogo aqui. As dimensões foram reproduzidas de forma idêntica. De novo, só usei Higgs Field e Claude para isso. E ele literalmente disse que precisava de uma paleta suave, com esse tipo de sobreposição. Ótimo. E então você vai notar: consegue ver como o ponto de foco está todo no meio? Então, Porsche é um design lindo. Fiz a mesma coisa com o Claude. Basicamente, como mostrar o Claude em imagens e fotografias? E, de novo, ele criou tudo isso, com 23 segundos de duração. Como fez isso? Ele simplesmente gerou, acho que um monte e mais um monte de imagens, com um determinado intervalo de tempo. Então, a coisa legal

24:15 que o Design Loop faz é desconstruir tudo o que está acontecendo. Assim, você está dando ao Claude os projetos reais do design. De longe, esta é a skill de design mais poderosa e melhor que já vi. Fiz a mesma coisa: criei esta página 404 animada, pessoal, usando apenas uma imagem, então ela pode ser usada literalmente para qualquer coisa. A dica número 10, pessoal, é usar uma checklist de agent, basicamente, para conferir se está tudo certo. Na prática, este prompt vai analisar qualquer design que você criar com cinco agents muito especializados, que vão verificar coisas completamente diferentes. E só quando

24:46 todas essas verificações individuais forem concluídas é que ele vai aprovar o design. E, a propósito, pessoal, se parece que estou falando grego sobre design, vou deixar abaixo um link para minha masterclass completa de Claude coding e Claude design. Ela vai levar você desde os fundamentos mais básicos. Inclui coisas que nunca compartilhei no YouTube, incluindo uma nova masterclass sobre sistemas de design que estou gravando literalmente esta semana. Ela vai abordar recursos avançados, como criar sistemas de memória e construir sites bonitos. Você também terá acesso a todo o meu sistema operacional agentic, que explica tudo isso em detalhes. Você terá acesso a todos os meus

25:18 sistemas de memória aqui, que abordam tudo sobre os anéis, o design e toda essa parte prática. O acesso é imediato. Vou deixar um link abaixo para você usar e evoluir, arrasando de verdade. Agora, depois de entendermos estes cinco princípios de agent, que percorrem várias trilhas diferentes para realmente melhorar a qualidade do que você produz, precisamos analisar o próximo. Este é muito importante. Lembre-se: eles ficam mais importantes à medida que avançamos. Este é um princípio de design que vai melhorar drasticamente a qualidade de qualquer coisa que você fizer com Claude design. A ideia se chama “não me faça

25:48 pensar”. Ela se baseia em um livro que, basicamente, diz que devemos usar o pensamento do Sistema 1, em vez do Sistema 2. Então, queremos ter uma tendência à simplicidade. Sabe, pedi a todo mundo da minha comunidade que publicasse seus sites para eu criticá-los. Fiz literalmente centenas dessas análises, aliás. E o maior problema que encontrei em todos eles foi a densidade de texto. Havia coisa demais em cada página. A ideia de “não me faça pensar” é: se eu chegar à página, digamos que estou vendo este site aqui, por exemplo, consigo entender do que se trata? Ele passa no teste de uma olhada?

26:19 Por exemplo, este: “dinheiro para cá, para lá e para todo lugar”, certo? A questão é que seu dinheiro pode ser transferido globalmente, e a forma como isso é mostrado é com um globo de dinheiro. Isso é muito, muito importante. Você pode usar alguns dos prompts do sistema para conferir se ele realmente passa no teste de simplicidade e se não estamos tratando a atenção do usuário como garantida. E o que você pode fazer com isso, pessoal, é gerar várias versões do mesmo design para garantir que está usando a mais simples, que comunique o processo da forma mais simples possível. Agora, o nível 12 resolve o maior problema de conteúdo de IA genérico que existe hoje, que é

26:49 fazer algo realmente parecer que foi escrito por uma pessoa. Para isso, vamos usar um repo muito, muito poderoso chamado Slop Monster. Eu mesmo o criei. É 100% gratuito para você usar. Uso para tudo. E, para criá-lo, encontrei os principais repos de IA contra texto genérico. Basicamente, peguei os melhores aspectos de todos eles e combinei no Slop Monster para acabar de uma vez por todas com esse tipo de conteúdo de IA. Mas fui um passo além e resolvi algo que não vi mais ninguém fazer: o sistema de vendas e

27:21 marketing. Basicamente, ele analisa o texto em quatro ou cinco níveis: vocabulário, padrões de frases, pontuação, listas de três itens, absolutamente tudo. E, para mostrar como isso fica, para você entender o antes e o depois, confira. Um texto genérico de IA diria algo como: “Confiável, durável e feito para durar”. Isso vira: “Seis pregos por telha, em cada telha”. Em vez de dizer, sabe, “Não apenas X, mas Y. Não apenas um telhado, mas tranquilidade”, vira: “Um escopo por escrito e um número definido antes de alguém subir em uma escada”.

27:53 Verbos mais diretos: “Aproveitamos materiais líderes do setor para oferecer proteção incomparável. Compramos materiais de fabricantes que os testam contra vento, granizo e sol”. De novo, você pode ver exemplos de como isso foi aplicado ao texto. Tudo o que você precisa fazer, pessoal, se tiver um site, é copiar o link deste repo aqui e ir até o Claude. Depois, basta dizer: “Oi, gostaria que você analisasse todo o texto para mim com o Slop Monster, certo?” Você pode até transformar isso em uma skill no final, dizendo: “Transforme isso em uma skill para que, quando eu disser ‘Slop

28:23 Monster’, você analise todo o texto com isso”. E isso não só vai fazer o texto parecer escrito por uma pessoa de verdade — porque até usamos os modelos certos para isso —, como também vai entender o contexto em que você está, se é uma publicação ou um site, e garantir que você esteja usando o texto de vendas adequado. Uso isso o tempo todo. Minha comunidade adora. Recomendo muito que você adicione isso ao seu Claude design. E então você pode ir um passo além usando isto. Basicamente, o que isso faz é também resolver o problema de verbosidade do Claude, ou seja, ele conversa com você de um jeito mais humano e não fica, sabe, só dando respostas que exigem que você pense tanto sobre elas. O que podemos fazer aqui com qualquer texto que produzir é usar o que chamamos de inglês técnico simplificado ASD ST100. Trata-se de um padrão de escrita real da indústria aeroespacial. As companhias aéreas o usam em manuais de manutenção porque, quando você está consertando um avião, não quer ouvir falar de inglês shakespeariano, nem precisa que o texto seja escrito como se Emily Bronte o tivesse escrito, basicamente. Ele tem 900 palavras predefinidas, um significado por palavra, voz ativa, uma instrução por frase, no máximo seis frases por parágrafo, não usa verbos frasais e

28:54 respostas que exigem que você pense muito sobre isso. O que podemos fazer aqui com qualquer texto que produzimos é usar o que chamamos de inglês técnico simplificado ASD-STE100. Esse é um padrão de escrita real da indústria aeroespacial. As companhias aéreas o usam em manuais de manutenção porque, quando você está consertando um avião, não quer ouvir falar de inglês shakespeariano, nem precisa que o texto seja escrito como se Emily Brontë o tivesse escrito, basicamente. Ele tem 900 palavras aprovadas, um significado por palavra, voz ativa, uma instrução por frase, no máximo seis frases por parágrafo, não há verbos frasais e

29:24 foi criado para que uma pessoa sob estresse consiga ler rápido e agir sem entender algo errado, que é exatamente o que você quer de um assistente de IA. De novo, basta copiar tudo isso, ir até o Claude e dizer: “Oi, daqui para a frente, quero que você se comunique comigo neste estilo e, quando eu pedir, também quero que melhore meus textos para que eles sigam de fato o padrão abaixo”. E, com isso, pessoal, ele vai melhorar a forma como se comunica com você nos seus designs e também em conversas naturais. Agora, a dica 13 é que o próprio Claude, usando o Claude design, consegue recriar

29:55 essencialmente qualquer tipo de imagem que você quiser. Então, vamos usar o save.com como exemplo. Mais uma vez, o save é muito bom. Se eu quiser descer e encontrar uma pessoa, digamos que eu queira encontrar alguém que seja realmente interessante para mim, certo? Posso encontrar literalmente qualquer estilo que eu quiser. Então, vamos supor que eu desça e escolha uma imagem como exemplo, esta aqui. Adoro o design e a vibe dela. Bem, o que você pode fazer agora com o Claude é copiar a imagem, voltar para lá, colocá-la e dizer: “Oi, quero que você crie uma imagem para mim nesse estilo, usando minhas próprias

30:27 referências, e quero que você organize as seguintes informações.” Certo, depois é só passar para ele um monte de informações que você quer que a pessoa diga. Então, se quiser, você pode ir para qualquer site. Digamos que você esteja na minha comunidade, por exemplo, e queira dizer: “Ei, tenho todos esses cursos incríveis e gosto muito do meu estilo de design, que meio que guia as pessoas pelo aprendizado de tudo, certo?” Posso fazer uma captura de tela disso. Posso voltar para o Claude e colocar a imagem lá, dizendo: “Ei, anexei algumas referências de design que gostaria que você integrasse à imagem, certo?” E então você pode dizer: “Ei, fale sobre

30:57 o fato de que tenho um sistema operacional Agentyc totalmente novo. Faço isso toda semana e tenho todos esses cursos incríveis sendo lançados, certo?” Depois, você coloca todas as informações. E, quando terminar, ele pode voltar com uma imagem como esta: Tudo que será lançado este mês. E dá para ver que o Claude colocou o mago. O mago está aí? Sim, o mago está aí. Demais. Também colocou o dragão e os dois ninjas. Ele até conseguiu capturar o fato de que há um lindo ninja do Claude na cabeça dele, o que é muito legal. Além disso, de primeira, também incluiu todos os cursos novos

31:27 e sistemas que estou lançando: o Agentyc OS, o Essentials Life Business Learning Create Automation, ou seja, as coisas que estou lançando este mês na comunidade. E você pode usar isso para criar essencialmente qualquer tipo de produto ou imagem pessoal que quiser. Isso leva tudo a um nível totalmente novo. E, falando em novos níveis, precisamos falar do nível 14, que são os sites 3D. O que é realmente fascinante nos sites 3D, pessoal, é que podemos combinar o Claude Design e o design gráfico com a capacidade de criar animações lindas e impressionantes. Vou deixar um link aqui embaixo

31:58 para você baixar minha skill de site 3D. Mais uma vez, criei isso usando o Higgsfield e os melhores modelos que existem. Basicamente, o que essa skill vai fazer, pessoal, é fazer algumas perguntas, certo? Por exemplo, suponha que eu esteja neste site aqui e diga: “Quero criar algo que mostre que somos uma marca de smoothies.” E dá para ver as frutas caindo, seguindo o percurso todo e aterrissando em um copo, com essa interatividade linda. Mais uma vez, só estou chamando uma API ou usando o CLI com o Higgsfield, e ele cria tudo assim. É uma maneira muito fácil e direta de fazer isso. Eu gastei

32:29 centenas e centenas de dólares com geração de imagens. Então, você pode pegar essa skill comigo e não precisa se preocupar com isso: pode literalmente gerar coisas assim sempre que quiser. O próximo grande avanço é mesmo como você pode usar o design de gráficos em movimento do Claude para levar isso a um nível totalmente novo. Tenho um vídeo sobre isso que vai sair muito em breve. Se já tiver sido publicado, vou colocar o link aqui. Caso contrário, você também precisa conferir esse vídeo amanhã. Por exemplo, suponha que você tenha uma barra de navegação e queira usar design. Isso foi totalmente gerado pelo Claude Guide. Que absurdo, né? Também criei

33:00 este aqui, pessoal, em que o Claude literalmente segue você por aí e tenta capturar tudo; você pode até clicar e fazer com que ele pule. Quer dizer, isso é algo que literalmente não dava para fazer antes. E você pode adotar o Claude, se quiser; ele adora isso. Que ótima maneira de fazer as pessoas clicarem no seu conteúdo. Isso é absolutamente insano e, mais uma vez, tenho um vídeo completo explicando tudo isso, caso queira conferir. O nível 15 é como podemos levar isso a um nível totalmente novo usando algo chamado sistema operacional agêntico. Então, se eu entrar neste sistema operacional agêntico, dá para ver que agora, no Design, pessoal, vocês podem criar o que quiserem. Tenho uma biblioteca de tudo que crio. Também

33:30 crio um estúdio, pessoal. Basicamente, é aqui que fica interessante: você pode usar isso para qualquer coisa. Este, por exemplo, criei para Reels do Instagram e ele gera tudo automaticamente. Você pode ver todos os designs e essas animações gráficas lindas. Assim, quando estou criando conteúdo para o Instagram, posso fazer isso. E, mais uma vez, tudo isso é desenvolvido com o Claude Design. O mais interessante aqui, pessoal, é que tenho minha própria biblioteca. Então, posso descer até aqui e pesquisar por burger. O interessante é que qualquer coisa, certo, que tenha a palavra burger nos metadados ou que, por exemplo, simplesmente pareça um burger vai

34:01 aparecer. E digamos que agora eu queira usar isso com o Claude para criar um site. Posso clicar em “referência” e agora crio meu próprio Higgsfield, que posso usar com a API do Higgsfield, se quiser, e simplesmente dizer: “Oi, pode criar para mim e transformar isso em um vídeo lindo?” Ou qualquer outra coisa que eu queira fazer, certo? Posso escolher o modelo. Posso fazer qualquer coisa que quiser no sistema operacional de design. E, muito importante, pessoal, ele combina design com funcionalidade. Assim, vocês podem ver todos os números e métricas. Posso descer até as seções de memória. Também posso procurar coisas. Por exemplo, posso fazer perguntas, e

34:31 elas vão aparecer. Posso ver tudo com muitos detalhes. E é aqui que juntamos as duas coisas. Mas entender truques de design é uma coisa; se você não souber combinar design com os sistemas do seu próprio negócio e de produtividade, vai ficar para trás. Por isso, o que vamos fazer a seguir é aprender exatamente como fazer isso neste vídeo aqui.

Transcrição original

[00:00] I’m going to show you exactly how to build beautiful website designs and motion graphics with Clo Design 2.0. And after hundreds of hours building with Clo Design, I’m going to show you 15 Clo hacks that will save you hours and turn Clo into a design [music] genius. Starting from simple and building to advanced, and we’ll include stuff I haven’t seen [music] anywhere else. So, if you haven’t already, grab that beautiful coffee and let’s dive straight in. So, let’s begin with the very first Clo Design hack. Now, Clo Design itself has genuinely got brand new

[00:31] capabilities. With over 5.5, it can design incredible things like this. You can do so many different kinds of art style. And yet, most people’s look like slop. You can do these kinds of things in one shot. And by the end of the video, you’re going to be able to use and build beautiful motion graphic animations, everything that you could possibly imagine, like this. Beginning though, of course, with the first thing we’re going to cover, which is going to be the workflow. And I’ve got so many hacks, guys. I hope you’re buckled in and ready. Now, level one is motion graphics. And I’m also going to include down below for you guys the full Clo

[01:01] Design uh prompting system. So, everything we talk about in this video, guys, is going to be available for a prompt that you can literally come down, grab whenever you want to, and essentially replicate some of the stuff that we’re going to talk about in this video. So, what do I mean when I say Clo motion design? Well, a lot of it is similar to stuff that you’ve seen. So, if we just come over here to the generative operating system, let me show you the kind of things that you can do with motion design. Now, the question Look, good motion design is one thing, but the question is, how do I actually go and build them? Everything that you’re seeing on screen right now is something that I created with motion

[01:33] design. How do you physically do that? Well, using Clo without motion design is like having a Ferrari stuck in first gear. So, the first thing that we’re going to do is give Clo a reference and a plan. We do this because you essentially want to explain what you want those motion graphics to look like. You hand it a reference, you explain what you want that thing to do, and then essentially, you just direct it for whatever the thing is that you want. And the system to do this is give it a reference clip that you like, something you find interesting, provide it with your brand, your different logos, your colors, and then sort of briefly explain it. So, you can do is literally copy

[02:04] this prompt by coming down to section one, copy this right here, and then you’re ready to go. For example, this thing here that I built with Glido, all I did is gave it my own website. So, I just came down and I said glido.com, I pretty much just gave it this website and said, “I want you to build me some beautiful birds with a glowing logo.” And it generated this asset entirely. And you can see here, these are all the other kinds of motion graphics that people have generated using this entire system. People have essentially gone ahead and created horses, they’ve animated loads of different things. Which brings us on to level two. Level two essentially is the ability to get

[02:34] graphics to loop for you. So, the idea here is that we have one idea and one looping graphic. So, instead of giving presentations, we can actually create these beautiful animations that have the same start frame and end frame. Um it’s basically, you know, if you think about why we do this, a a still slide itself is quite static and not interesting. And what is a good example of this? This very thing that I’m showing you right now. So, essentially, it can make any presentation doing significantly more engaging. And all you’re going to do to essentially go ahead and build this, guys, is very simple. Essentially, you just explain what you want the thing to

[03:04] explain. Um ask for three different style variations, and then essentially, you’re going to make sure that it finishes on a loop. And for example, if you’re doing this with Instagram Reels, which is something that I did, when I get it to go ahead and create for me different graphics, I always ask it to generate three different styles so you can actually have a look through, find out the ones you like the best, and then select it. And I have gotten tens and tens and tens of thousands of views using this exact strategy. And even things like YouTube videos, it is pretty handy that you can do that. Again, I’ll put the prompt below link so you can just go ahead and copy that. Now, hack

[03:34] number three is how you can make any of your designs feel a lot more expensive. So, the idea is we’re going to give small touches, hover lifts, soft presses, counter numbers. How can you actually make the vibe and feel of any design with cool design just feel that little bit extra, a little bit premium. A good example of that is this exact thing that I built here for my startup. Now, check this out. If I run you through this, this entire thing I pretty much just prompted with Claude design using Opus 5.5. If you look at things like this, you look at the hover animation, you can see this for example

[04:05] was built with this. All this sort of stuff here, so part of the velocity here where it goes through and checks the apps. Every one of these animations that you see this rolling animation and text, that looks super premium. Now, Claude design wouldn’t do that by itself for example, right? So, the question is how do you go ahead and do that? Well, you can do things like this. So, this is an example. I’m having the birds go to the animation, come down, and things are appearing. One of the sort of resources you can use is something called Lottie files. And what’s cool about this is these are graphics that used to be included in websites, but actually here you can just go ahead and integrate them

[04:36] anywhere you want to. Say you like this cash imagine, right? Say you like this. Whatever the thing is, you can go ahead and save them. Does success take a look familiar? Brilliant. All you do is find the right one that you like. You can literally come down and copy it, even copy the URL, and share that. And they have loads of free resources on here, too. Other good options are transitions.dev that show you some really cool crisp transitions. If you want to go and grab that, you also have this again. All these websites will be down below for you in the description. You have 60framespersecond.design, which is great so you can see all these different kind of graphics and motions and how that all moves across. You’ve

[05:07] got Kinetic that essentially covers motion and how different things move. There are so many different things. Even have motion primitives. It’s a really crisp, uh, nice set of designs that you can go ahead and steal here. Now, hack four is how you can actually take any one of your businesses and create an incredible brand guideline for it. Because without a proper brand guideline, it’s tough to get any kind of consistency. So, what we’re going to do here is we’re going to have one file that holds all of your colors, your types, your rules that you can hand to Claude anywhere. And this basically means Claude will remember exactly how you want things. And all you’re going to

[05:37] do is essentially just go ahead and develop that. Now, thinking and knowing that you need a brand is one thing, but the question is well, how do I actually go ahead and do that? Well, we can build together something called a brand book using some pretty incredible resources that are completely free. So, effectively what we’re going to do is find inspiration, we’re going to turn them into a file, and then essentially we’re just going to share that with Claude or whatever service we’re using. And I’ve got again a um prompt that you can go ahead and copy and share that with Claude and it’ll do it. And again, you can go ahead and literally get so many different things. So, some of the places that I highly recommend that you go and check out when building out your

[06:08] brand. We start by finding existing brilliant brand guidelines. So, you can go ahead and find some of the best brands online and actually see what they’re doing to model it. So, this is for example all the brand guidelines for Spotify. What I could do is actually copy this, head over to Claude, and I could say, “I really love the way that Spotify have laid out that brand guidelines. I would like you to help me to develop my own brand guidelines using this exact structure, but make everything completely unique.” So, I just finished with glad of that, come down, and I give that as a sort of like a reference file, right? And then it can go ahead and use the documentation for

[06:39] Spotify. Or maybe you prefer Adobe. You can do the exact same thing. As you see, they have a lot more kind of taxonomies, and the brand purpose, vision, that kind of thing. Then you may want to go ahead and build a beautiful deck design with Claude. To do that, what you can do is this website here, which is deck.gallery, and you can see all these beautiful decks that exist to get inspiration. And inspiration is really important when building things. So, you can come through here, find ones you think great. You’ve got Instacart, some of the best fastest growing brands essentially on the planet. And it also includes overviews of slides. So, eventually any kind of slide that you want to go and find, maybe you like the

[07:10] look of this one. Again, there’s like paid options, there’s free options. You can play around with it. Next thing is to lock down your logo, because a website without a logo isn’t a website at all. logosystem.co is really cool. So, you can come down here and essentially browse and find good inspiration. So, what you would often do is just come down and copy the images, come back over to Claude, and essentially you’re looking for a bit of a collage. Let’s say I like the near right. Let’s say we come down and I love the simplicity of Lyft. We’ll come and grab that, check that one out. Come over and just drop down a few different logos that you actually like. Once you’ve gotten a few that you think are decent,

[07:41] because not everybody can articulate what they look like. You can even say call open call one here for example. Maybe like this with the graphic bird. Then you come back over to Claude and you say, I really love these kind of designs inspired by these. Give me nine options of a logo for a speech to text startup that is all about generating beautiful images. Now, the way that I’m actually generating these images inside Claude, and I do this for everything, is using the Higgs field CLI. If you know already, feel free to skip this bit, but if not, essentially what Higgs field lets you do is use the best image generation models, video generation models. It is unbelievably simple. I do

[08:13] all my generation over here. In fact, you can even come over here if you haven’t set it up, and I’ll put a link down below so you can click and do this. You just click over to MCP, this section right here. You’re going to see this. You’re just going to click on Claude or ChatGPT, and you just click on connect Higgs field. And then this page will open. You click on continue. Come down to the bottom. Click on add. It’ll check the connection. You click on connect. This will then open up for you in a new window, and then you can do anything. And you’ll notice like all the presentations graphics I built in this video were using Higgs field essentially. So, it just makes it way easier to go ahead and build things. And

[08:43] then effectively, it’ll all be completely connected and you can generate anything. And whilst that’s cooking in the background, if you’re looking for inspiration for different campaign, you can go to visualjournal.it. This effectively is just a collection of beautiful different designs that you like. So, say for example, I like the look of I don’t know, this bottle, right? So, say I like this image. I can just copy this image. Come back over to Claude for example. Drop that in and say, “Hey, I love this. I want to do something similar for Glido. Could you add a Glido logo to one of the bottles using our exact color scheme and just go ahead and use Higgs field for that.

[09:14] Thank you.” And then it comes back and it’s generated these beautiful images like so. And I think it’s great. It’s really captured the essence of the examples that we gave it. And using Claude design, you can build beautiful graphics like this. And then likewise, we’ve gone ahead, it’s gone to my website, understood what that’s about, and added the logo to these beautiful bottles. Does Glido do bottles? No, it doesn’t, but you get the idea. You can effectively build all of this stuff with Claude design. Then for visual identities, you can move over to rebrand.gallery to see all the different kind of brand styles to see all these beautiful different ways that you can do it. And again, this is all stuff that you can feed to Claude to build

[09:45] essentially your own unique brand identity. Now, Claude is incredible at building and generating websites and graphics and images and designs. But sometimes with a brand, we need to get everything. We need to get X posts, we need to get LinkedIn posts, Instagram, and we need the ability to edit them. Which is where the next tool comes involved here. And this is something called Linearity. So, what Linearity will let us do is only create tools with Claude or whatever models we want, but essentially then edit it, share it with our teams, and make it highly configurable. They’ve got a really cool flashy 3D website so you can prompt and

[10:17] design loads of cool things. Go ahead, describe the thing that you want, tweak it, and then ahead basically go ahead and use that anywhere you want to. So, to begin, you can actually go over to Linearity and create an account. Now, once you land inside Linearity, come over first of all to the side on the left and click on brands. Here for example, you can actually go ahead and create your own brand. For example, if I click on this and click on new brand, it’s actually pretty impressive how it does this. So, I can enter in a website brand name. So, let’s go ahead and enter glido.com as if for instance. Once you’ve done that, you can actually view the brand. Now, I’m already set up for

[10:48] this, but again, it could be anything that you want. So, let’s say for example, monzo.com, whatever the thing is. I literally come down here and I click on import, and essentially I can do use this set up pro brand feature. I can upload my own design books if I want to. Now, the idea here is it goes ahead and imports all the assets, all the color scheme, the typography, everything from that brand and has it in one design system that we can basically use whenever we want to. And to show what that looks like in reality, if I come over to Glido for example, you can see it’s captured the logo, it’s got

[11:18] typography, colors, all this kind of stuff. And essentially, it’s kind of if you like the uh magnum opus of the Glido brand. So, I can do this with whatever I want to. But what we want to do is to actually create stuff. So, if you come down and and click on create, and then click on generate design. You’re going to land on a page like this with some nice curly arrows. So, let’s go ahead and ask it to build something using this brand system. So, I would like you to go ahead and create for me a Instagram post announcing that Glido is now live on Windows. Give me three

[11:50] different ideas or designs based on my design palette. And then right here, we can select the individual brand that we’re using, which of course is Glido, and then just go ahead and send that off. And just like that, you’ll almost see this thing appearing now in the background. Now, the way that I would think about linearity as a platform using Claude here is I find this a combination of Claude and Canva having a baby in a way because it looks very similar to Canva in the sense that you get this huge canvas style where I can double click in and see things, move things around, and edit them once

[12:21] they’re there. Now, we have to clarify what format we want. Now, this is asking the questions, so we’re going to go with the classic standard one by one. Come down and click on submit. Obviously, you can if you want to just go and find the exact dimensions that you need, the exact proportions you need for whatever the thing is that you’re actually building. And as you can see, guys, we now have these images that have been dropped in that we can use for Instagram. Now, three different designs and style ideas, but what’s really cool here is we can actually come down and edit it. So, for example, we think, “Well, this is great, but what if we want to make that slightly larger?” Well, we can do that. We can edit it around and do this. And this is really

[12:52] one of the cool things that we can do here is the editability and the fact that we can make things different. So, we’re not just kind of firing it up a pipe, we get to do it. Maybe we want to make this Windows release larger. Okay, cool. And then we want to edit this text, we can come down and do that. We can basically change the fonts to anything we want to. And you know, maybe we want to make this logo a little more prominent, we can bring that over. Essentially, it’s editable in any way that you want to. And if you’ve ever used something like I would say Photoshop or any of these kind like Figma, a lot of this will be really familiar for you. But essentially, you

[13:22] can build these designer and then just make tweaks very easily. And all we can do when we have the designs we like is come over and click share down the right hand side. Share it with teams, download them, do whatever we like. And then on the left hand side, you can click templates if you want inspiration to have a look at some pre-existing things. You can also go on and add elements. Again, it’s got that kind of Canva kind of style where you can bring things into it. You can text and even upload images to effectively be able to design yourself whilst also using AI. But then the cool thing is if you actually come back, you can come down here on the right hand side and click on connect to

[13:53] and you can connect this to Claude via the MCP by clicking on say Claude desktop. You come down and then click on continue and after it gives you all the instructions you need to follow. You can copy this, follow the instructions and then you’ll actually be able to connect to your entire brand system. The cool point being with this guys is that it has everything for your team, whatever it is that you’re trying to build, any different kind of design systems, any kind of projects or different um formats, different sizes, you can go ahead and build in one design system. And then on the left hand side, if you come and click on brands for example, you can see now I’ve got the Monzo thing

[14:23] here. I can even check out the Monzo assets and essentially these are all the assets that it’s extracted from it. Again, I can come down and check out Glido and see the different assets that it has for the brand. Now, bear in mind, I didn’t actually go and add these. It just went ahead and extracted them itself. And now what it will sit there so I’ve got all this beautiful imagery. I can edit to it, I can create to it and do anything that I like. Now, this takes us nicely onto level six. Now, the fastest way that you can actually go ahead and level up the quality of your designs with Claude code and Claude design is to use fonts and icons. Now, you’ll know that you can easily spot a

[14:55] bad sloppy AI design based on the fonts that it’s used. It’s got a very kind of look and feel. So, some places you can do this if you want to. Obviously, first option is if you want, you can generate these using Higgsfield or any AI image video generator. Obviously, I use Higgsfield for this sort of stuff. Now, look how gorgeous this is. This is what has been generated by Higgsfield. So, this is a unique way of generating different images which is gorgeous. Look at this. We’ve got down here. You’ve got Auto Hue Counter. This if you want to invent your own typeface, and you can completely do that. Now, for the text on

[15:26] your website, you can go ahead and use things like Typewolf. This will show you lots of different fonts that are crushing it right now, and you can pick ones that you like. In addition to that, you can also go ahead and check out fonts in use.com. I really like this website because, let’s say that you love Halo, because every sane person loves Halo. And I love the way that they’ve integrated that font. I have a specific project that would look great for that. You can go ahead and do it. Now, let’s say, for example, you like this one. What you can do is come over, and you can literally copy this image like so. Then, simply come over to Claude and say, “Hey there, I want to build a landing page. Could you please

[15:57] do so with text from this image? I’m really inspired by it.” Find for me the closest available free license to use this exact font. And then, you can come down, guys, paste them a link, or paste them an image, and then you can actually go ahead and use that. Obviously, you just have to check the licensing for all the different fonts. What I often do is get Claude to generate for me, you know, six to nine different versions of fonts that I might like. Another good one here is WhatTheFont, which is a pretty helpful website. You also have Font Share, which is loads of gorgeous fonts. You can literally go through and find one that you like. And if you’re ever not sure, you can pretty much come here

[16:28] and screenshot this and say, “Hey there, Claude, I really like this. Could you just tell me what font this is?” And build mine in a similar way. Then, another great way to level up the design on your website is to use icons. I personally like using Flat Icon. You can get loads in different styles. So, instead of saying something like, “Hey, there are three things you can do,” or “Hey, this is as popular as Lord of the Rings,” or “This will save you 3 hours,” you can just use beautiful graphics and icons, and you can download these. Another option is something called Icons8. They show you illustr- illustrations, icons. And I actually used this in my first tech startup on

[16:58] the website to help illustrate um basically the idea, and I even built these into the app, which is great. So, you can come down and search for different things. Let’s say I’m looking for popcorn. You can find visual styles that pop with you. And then, basically, once you get a subscription to these platforms, you can go ahead and download them. And I think some of them let you do it uh for free if you give them attributions as well. Level nine is all about getting excellent inspiration-filled designs because a strength of a design is largely determined by what we’re actually looking at with this. So, what’s the idea here is that we can actually go ahead and find different aspects and

[17:30] different sort of inspirations to go ahead and build websites, assets, graphics, anything that you like. Navbar.gallery is a great place to, believe it or not, find out the best navigation bars on the planet. So, if you seriously want to look at the navigation bar and the navigation system you have, you can check out this website. Then we have a really cool one which is called footer.design. So, this is going to show you some of the most beautiful footers that exist on websites, which I think is really cool and crisp. Now, the idea is you can kind of Frankenstein out and build out your dream footers based on this stuff. So, you can kind of treat it like I showed you here. For example, you kind of think

[18:02] about each one as an individual thing and you snipe and build for that specific section itself. Really helps a lot to do that. We also have CTA.gallery. CTA.gallery basically just shows you a combination of the most gorgeous, potentially high-converting different call to actions that exist. So, if you’re thinking, “Damn, I want to get people to sign up, but I don’t know what that would look like,” you can come here and find different examples of that. Then you’ve got 404s.design. Now, this is an interesting one because generally speaking in marketing and design, how you do anything is how you

[18:33] do everything. And the reason why brands put such a good emphasis onto 404 pages is largely because if this is the level of detail and attention they’re willing to put into a 404 page, how seriously do they take their actual paid product itself? So, you want 404 inspiration, you can find one here for example, and lean on these designs to build your own. Onsection.com is another great example of where you can get some fantastic design inspiration from. Maybe you want to do some better grids, which is a really cool in sort of if you like style right now, which you thankfully is instead of having a big

[19:04] block, you show multiple different assets. This can be great for dashboards, this can be great for websites to show different features. Again, you can come down here, and one that think is cool, a combination of images and numbers and dates. You can do this in your operating systems. For example, “Hey Glider, open up my Agentech operating system Java’s.” This is the exact same thing that I do in my own operating system, just mainly because I find the Bento grid is a really helpful way to do this. So, you can see I have different numbers here and systems and I’m using fictitious data, but you get the idea. It just makes it easy to use and understand

[19:34] because it just looks better. If you want to get designs from Good Apps, you can try 60fps.design. This is just basically going to show you wonderful different animations about how they’re doing. Basically, not just a screenshot, but the videos behind it and the graphics and how they’re all linked together. Then this takes us very clearly onto level nine or hack number nine. And this one’s really interesting. So, the idea with this one essentially is that we can find basically who are the best people in the world at doing the thing that you want. Maybe a finance app, maybe it’s a language learning app. Well, there are actually systems in place that we can go to go ahead and use

[20:06] these. Two that I’ve been using a lot recently are Mobbin and Refer out there. They’re not fantastic. So, for example, mobbin.com is a really interesting one. You can come down here and search by, let’s say, finance. Okay. You can do by apps, you can do by sites. So, say for example, I want to grab an app, I can now come down and look at this. So, here’s one for Duolingo, for example, and here is one for Revolut. So, if I’m building an app or journey, I can come down and actually look at this, copy this and say, “Hey, I love this.” And it’s great because it just adds different details. And essentially here, they’ve captured every screen that exists for that particular

[20:37] app, which is great. They’ve also got a section here for sites, which is really freaking helpful because you can go and search for sites as well. I also really love, as you can see, Duolingo. So, maybe you want to do a “Hey, you’ve leveled up” page. Well, you can use this as inspiration to see what that looks like. Equally, you’ve got refer.design. If you click on styles on the left-hand side, you can come down and see all of these different beautiful designs that look fantastic and find websites that really kind of lean in with the thing that you’re building. Now, level nine is one of the most powerful actual design

[21:07] systems I have ever used and it’s called the design loop. And when you combine the design loop with Higgs Field for generating images and videos, it genuinely creates stuff that is going to blow your mind. I have never seen anything that I can do literally on a one-shot to create something that is absolutely spectacular. So, the idea with this is with the design loop is that you give Claude what great looks like. So, you give it a gold standard design. And effectively, you’re going to give it a prompt. Now, that prompt down here is going to be linked as you can see on the left-hand side. So, you can just literally copy and paste this one

[21:39] and essentially what it will do for you is get Claude to create a sub agent, which is going to be a critic. And effectively, rather than coming back and forth with you, it then assesses its output against your reference material and it will only come back once it’s reached there and all the agents have agreed that it hits the design brief. So, let’s say for example, you’re on saved.com, which is a great actually like a repository. Designers love this. I freaking love this. And you want to look for something like poster videos, okay? Whatever the thing is. And you’re looking for some kind of design

[22:10] inspiration that you want it to have. I’ll give an example of one that I did previously just to show you how powerful this is. So, for example, I had this one here, which I thought was gorgeous, right? It shows you this thing. It’s got this beautiful red flame effect, uh 1957, uh Orphic, whatever the thing is. All you’re going to do is literally come down and copy this video or you can literally come down and just download it. Then go down below and grab this free skill for you in your resource pack and just copy and paste all of it and then head over to Claude. And in Claude, you’ll have it here and you’re going to say, “Hey there, I want to go ahead and use my design loop skill with Higgs

[22:41] Field image and video generation to recreate this for me, but instead of that text, I want it to have 1992 and have JR in it.” All right, you’re going to come down and then you’re going to paste that text in. If you don’t have this skill, it’s fantastic. And essentially, it’s a design version of a really cool technique called the gauntlet loop, which is fantastic. I’ve done a full video on this. I’ll link it on screen if you want to learn more about it. And I’m not joking you, literally using Higgs Field, this is the output that I got back with 1992. You can see, look at how carefully it’s gone ahead and done this. And this is all generated using Higgs Field and the

[23:13] Design Loop prompt. That’s it. I am amazed at how freaking good it’s done this. Essentially, there’s nothing that you can’t recreate. You can choose for yourself to see just how similar they are. And you can do it in any kind of dimensions that you want to. If I like that idea, but I wanted to use yellow instead, or I wanted to have it in something that would fit the Instagram, I can do that using this with Claude as well. It is fantastic. Likewise, guys, I did the exact same thing. Now, this on the left here, for example, looks fantastic. And this is why the Design Loop is so powerful, because you may like say this looks awesome, right? But you can’t say why. Now, it

[23:45] turns out there’s a few things going on with this. The dimensions, it matched identically. Again, I just used Higgs Field and Claude for this. And literally, it said it needs a muted palette with this kind of overlay. Awesome. And then you’ll notice, can you see how the focus point is all in the middle? So, Porsche is a beautiful design. I did the same thing with Claude. Basically, how do I show Claude in imagery and photography? And again, it built this entire thing that’s 23 seconds long. How did do that? It just generated, I think it was like a like loads and loads of images with a certain time difference. So, the cool

[24:15] thing that the Design Loop does Loop does is it deconstructs everything that’s happening. So, you’re giving Claude the actual design blueprints. This is by far the best most powerful design skill that I’ve ever seen. I did the same thing design this 404 animated page, guys, just from an image, so it can be used literally for anything. Hack number 10, guys, is about using essentially an agent checklist to go ahead and make sure that everything is fine. So, effectively, this prompt will basically run any design that you make through through five very specialized agents that will check for completely different things. And only when it’s

[24:46] done all of those individual checks, will it then go ahead and approve the design. And by the way, guys, if this sounds like I’m speaking design Spanish, I’m going to put a link down below for my full Claude coding and Claude design masterclass. It will take you from complete foundations. It includes stuff that I have never shared on YouTube including a brand new design systems masterclass that I’m literally recording this week. It going to go through power features, how to build memory systems, build beautiful websites, and you also get access to my entire agentic operating system that breaks down all this in detail. You get access to all of

[25:18] my memory systems here that go through everything on the rings, the design, all this stuff in practice is immediate access. I’ll put a link down below so you can use that to level up and absolutely crush it. Now, after we’ve understood these five agent principles that run through multiple different tracks to actually improve the quality of your output, we need to look at the next one. Now, this one is really important. Remember, these are getting more important as we go along. This one is a design principle that will drastically improve the quality of any Claude design thing that you do. Now, the idea with this is called don’t make

[25:48] me think. It’s based on a book that effectively says that you want to be using system one thinking rather than system two. So, essentially, we want to have a simplicity bias. You know, I asked everybody in my community to post their websites so I could roast them. I did literally hundreds of these, by the way. And the biggest issue I found across all of them is text density. There was way too much going on each page. Don’t make me think things about if I land on the page, let’s say I’m on this and I’m checking out a website here for example, can I understand what it’s actually about? Does it pass a glance

[26:19] test? For example, this, money for here, there, and everywhere, right? The point is that your money can be trans- ferred globally and the way it shows you that is a globe cash. Really, really important and you can use some of the prompts in the system to make sure does it actually pass a simplicity test and are we not taking the user’s attention for granted? And what you can do with this, cool guys, is generate multiple versions of the same design to make sure that you’re using the simplest that actually goes ahead and communicates the process as simple as possible. Now, level 12 solves the biggest AI slop issue that exists right now and that is

[26:49] actually making something sound like it has been written by a human. Now, effectively to do this, we’re going to go ahead and use a very, very powerful repo called Slop Monster. I actually created this. It’s 100% for free for you to use. I use it for everything. And what that I built this is I found the top anti-slop AI writing repos. And I basically took the best aspects from all of them and combined it into the Slop Monster to destroy AI slop once and for all. But then I took it one step further and I solved something that I didn’t see anyone else do, which is the sales and

[27:21] marketing system. And essentially this will come through and check it across four or five levels: vocabulary, sentence patterns, punctuations, three-item list, absolutely everything. And just to show what that looks like, so you can understand what the before and after looks like. Check this out. AI slop will say something like this: “Trusted, reliable, and built to last.” Turns into six nails per shingle, every shingle. Instead of saying, you know, “Not just X, but Y. Not just a roof, but peace of mind.” becomes “A written scope and a fixed number before anybody climbs

[27:53] a ladder.” Pulled verbs: “We leverage industry-leading materials to deliver unparalleled protection. We source materials from manufacturers who test for wind, hail, and sun.” Again, you can see the examples of how this is bled into it. All you’re ever going to do, guys, if you have a website, is just copy the link for this um this basically this repo here and head over to Claude. Then literally say, “Hey there, I would like you to go ahead for me and run all the copy through the Slop Monster, okay?” You can even turn this into a skill by the end by saying, “Turn this into a skill such that when I say Slop

[28:23] Monster, you basically run all the copy through this.” And not only will this make it sound like it’s been written by an actual human, because we even use the right models for that, it will also understand the context you’re in, if it’s a post, if it’s a website, and make sure you’re using the correct sales copy. I use this one all the time. My community absolutely loves it. I highly recommend you add it to your Claude design. And then you can go one step further by using this. Now, essentially what this does here is it also solves the Claude verbosity problem, which means it talks to you more like a human and it’s not you know, you just gives

[28:54] you sort of responses that requires you to think so much about it. Um what we can do here with any text to produce is what we call the ASD ST100 simplified technical English. So, this is a real writing standard from the aerospace industry. Airlines use it for maintenance manuals because when you’re fixing a plane, you don’t want to hear about Shakespearean English and you don’t need to be written like you know, Emily Bronte wrote it essentially. It has 900 pre-words, one meaning per word, active voice, one instruction per sentence, maximum six cents per paragraph, there’s no phrasal verbs, and

[29:24] it was designed so that a stressed human can read fast and act without misunderstanding, which is exactly what you want from an AI assistant. Again, just copy all of this, head over to Claude and say, “Hey there, going forward, I would like for you to communicate to me in this style and when requested, I also want you to improve my copy such that it actually communicates in the below standard.” And with that guys, it will then go ahead and essentially improve the way that it communicates with you in your designs and also natural conversation. Now, hack 13 is the fact that Claude itself and using Claude design can recreate

[29:55] essentially any kind of graphic that you want to. So, let’s take for example, save.com. Now again, save is pretty fantastic. If I want to come down and find a person, let’s say I want to go and find one that’s really interesting to me, right? I can find any style I literally want. So, let’s say for example, I come down and I pull one piece as an example, this one here. And I love the design and vibe of it. Well, what you can do with Claude now is you can actually copy the image, go over that, drop it in and say, “Hey there, I would like you to create for me an image in this style using my own

[30:27] references and I want you to break down the following information.” Okay, then just give it loads of information that you want the person to say. Then what you can do if you want to is you can actually go over then to any website you want. Let’s say that you’re in my community for example and I want to say, “Hey, I’ve got all these beautiful courses, and I really like my own design style that kind of guides people through learning everything, right?” I can screenshot this. I can come back over to Claude, and I can drop that in there and say, “Hey, I’ve attached some design references that I would like you to integrate into the image, all right?” And then you can say, “Hey, talk about

[30:57] the fact that I’ve got a brand new Agentyc operating system. I’m doing it every week, and I’ve got all these incredible courses that are dropping, all right?” Then you drop all the information in. And then essentially, when it’s done, it can come back and give you an image like this. Everything dropping this month. And you can see, basically, Claude’s gone and has got the wizard. Is the wizard there? Yeah, the wizard’s there. Awesome. It’s got for us the dragon. It’s got the two ninjas. It’s even been able to capture the fact that it’s got a beautiful Claude ninja on his head, which is really freaking cool. And on top of that, it’s also in one shot and got all of the new courses

[31:27] and systems I’m dropping, the Agentyc OS, the Essentials Life Business Learning Create Automation, just the stuff that I’m dropping this month inside the community. And you can use this to essentially build any kind of product or personal image that you like. which just takes it to a completely new level. And speaking of new levels, we need to talk about level 14, which is 3D websites. Now, what’s really fascinating about 3D websites, guys, is that we can combine Claude design and the graphic design with the ability to create beautiful, show-stopping animations. And I’m going to put a link for you down

[31:58] below, so you can go ahead and grab my um 3D website skill. Again, I built this using Higgsfield and the best models that exist. And essentially, what this skill will do, guys, is it will go ahead and ask you questions, okay? So, say for example, I’m this website here, and I’m like, “I want to build something that shows that we’re a smoothie brand.” And you can see we’ve got the fruit dropping down, it comes all the way through, lands in a cup, and have this beautiful interactivity. Again, all I’m doing is just calling one API or using CLI with Higgsfield, and it builds everything like this. So, this is a really easy, crisp way to do it. I have spent

[32:29] hundreds and hundreds of dollars on image generation, so you take take this skill from me, so you don’t have to worry about it, and you can just literally generate stuff like this whenever you want it. Now, the new level up really is how you can actually use Claude motion graphic design to take this to a completely new level and I’ve got a video coming out on that very shortly. If it’s posted, I’ll link it here. If not, you need to check on that one as well tomorrow. For example, let’s say that you’ve got a navbar and you want to use design. So, this is completely generated by Claude guide. How ridiculous is that? I even created

[33:00] this one here guys where this Claude will literally follow you around and try and capture everything and you can even click and make him jump. I mean, this is the stuff that you literally could not have done before and you can adopt Claude if you want to and he freaking loves it. So, what a great way to get people to click to your stuff. This is absolutely insane and again, I’ve got a full video breaking this down if you want to check that one out. On level 15 is how we can take this to a completely new level using something called the agentic operating system. So, if I land on this agentic operating system, you can see in design now guys, you can build anything you want to. I have a library of everything I build. I even

[33:30] build guys a studio. So, essentially where this really gets interesting is you can use it to anything. So, this is one that I built out for Instagram reels that just auto generates everything for it. You can do things to basically view all the designs, all these different beautiful motion graphics. So, when I’m doing my Instagram content, I can go ahead and do that. And again, all this is powered by Claude design. What’s really interesting here guys is I have my own library. So, I can come down here and search for burger. What’s interesting is anything, okay, that has the word burger in the metadata or for example, just looks like a burger will

[34:01] pop up. And let’s say that I now want to go and use this with Claude to build a website. I can click on reference and now I build my own Higgsfield here that I can use with the Higgsfield API if I wish and just say, “Hey there, go ahead and build me and turn this into a beautiful video.” Or whatever I want to do, right? I can choose the model. I can do anything I want to in the design operating system. And very importantly guys, it combines design with functionality. So, you can see all your numbers, all your metrics. I can come down to the memory sections. I can even go ahead and find things. For example, I can ask it questions and

[34:31] those things will pop up. I can see all in beautiful detail. And this is where we bring both things together. But understanding design hacks is one thing, but if you don’t know how to combine design with your own business and productivity systems, you’re going to fall behind, which is why the next thing that we’re going to do is learn how to do exactly that inside this video right here.