Transcript
00:00:00"A IA não tem bom gosto, e a culpa é sua."
00:00:03O motivo de suas criações visuais serem tão medíocres
00:00:05é porque seus prompts são medíocres.
00:00:08Você não está usando o tipo de terminologia,
00:00:10linguagem e nomenclatura
00:00:11que um designer real usaria.
00:00:13Mas, felizmente para nós, encontrei uma solução.
00:00:16Chama-se Impeccable.
00:00:17E é um repositório open source no GitHub
00:00:20que, para todos os efeitos, é uma habilidade única
00:00:23que podemos importar para o Cloud Code
00:00:25e que corrige exatamente esse problema.
00:00:27Ele fornece ao Cloud Code uma linguagem de design
00:00:29que o ensina como é um bom design de verdade,
00:00:32enquanto também indica que tipos de designs ruins evitar.
00:00:36E hoje, não só vou mostrar como a habilidade funciona,
00:00:39mas vamos usá-la para construir um site novo
00:00:42e editar um dos meus sites que já existem.
00:00:45Então, ao final deste vídeo, você não terá desculpas
00:00:48quando se tratar de criar designs de front-end medíocres.
00:00:51Portanto, o Impeccable é um repositório open source no GitHub
00:00:54que nos dá uma única habilidade
00:00:55que nos permite criar designs de front-end
00:00:58que não são uma porcaria.
00:01:00Agora, é uma única habilidade,
00:01:01mas isso é subestimar um pouco,
00:01:03porque essa habilidade inclui 23 comandos diferentes.
00:01:07Ele tem sete arquivos de referência específicos do domínio.
00:01:10Ele nos diz que tipo de antipadrões evitar
00:01:13e até nos permite editar coisas dentro do navegador.
00:01:17Então, é uma ferramenta realmente robusta.
00:01:20Não é apenas uma habilidade de design de front-end
00:01:22que se estende por alguns parágrafos
00:01:24sobre o que o Cloud Code deveria estar fazendo.
00:01:26Mas essa complexidade pode ser um pouco avassaladora,
00:01:28porque existem literalmente 23 comandos diferentes
00:01:31que fazem várias coisas diferentes
00:01:34relacionadas ao seu design.
00:01:35Eles detalham tudo aqui dentro do repositório,
00:01:37mas a verdade é que você nunca vai se lembrar de todos eles.
00:01:40Mas há duas coisas que ajudam aqui.
00:01:42Uma, obviamente, o Cloud Code fará um bom trabalho
00:01:44ao descobrir qual deles você deve usar.
00:01:46Mas, em segundo lugar, eles têm um site inteiro
00:01:49que também nos mostra o que cada uma dessas 23 habilidades faz.
00:01:53Então, o GitHub tem links para o site,
00:01:54que é impeccable.style.
00:01:56E o legal é que, para cada habilidade do Impeccable,
00:01:59podemos ver como algo é antes,
00:02:02o que é o Cloud Code simples,
00:02:03e como fica depois
00:02:05de usar esse comando específico do Impeccable.
00:02:07Então, é muito legal.
00:02:09O Impeccable tem, na verdade, sete pilares de design:
00:02:12tipografia, cor, design espacial, responsividade,
00:02:15interações, movimento e redação de UX.
00:02:17Então, não se trata apenas de cores e coisas desse tipo.
00:02:21É bem abrangente.
00:02:22E bem aqui, podemos rolar através
00:02:25de todos esses diferentes comandos.
00:02:27E, como eu disse, ver como eles ficam
00:02:29usando a habilidade e sem usar a habilidade.
00:02:31Então, se você se perguntar: "O que exatamente isso faz?
00:02:34Posso ver em ação?"
00:02:35Bem, este é o lugar para fazer isso.
00:02:37O site também inclui um estudo de caso
00:02:39mostrando como eles criaram este site
00:02:40com o Impeccable e uma única imagem.
00:02:42E eu acho que ficou muito legal.
00:02:43E, por último, eles mostram este modo ao vivo,
00:02:45com o qual vamos brincar um pouco,
00:02:47que está em versão alfa,
00:02:48e que nos permite mexer no nosso site
00:02:51pelo navegador, como mencionei antes.
00:02:53Ele também tem uma extensão para Chrome e uma CLI,
00:02:56mas, para ser sincero,
00:02:56conseguimos cerca de 99% do valor através da habilidade.
00:02:59Então é nisso que vamos focar hoje.
00:03:01Para instalar isso, é uma única linha de código,
00:03:04na qual tudo o que você precisa fazer é copiar isso,
00:03:06ir ao seu terminal e colar.
00:03:07Agora, quando se trata de usar o Impeccable,
00:03:09existem dois caminhos a seguir.
00:03:11Um é o Greenfield,
00:03:12em que construímos um site do zero,
00:03:14e dois é a edição de um site existente.
00:03:17Hoje, faremos ambos e muito mais,
00:03:20porque não só vou te mostrar
00:03:22como construir do zero,
00:03:23mas também vou te mostrar como é
00:03:25quando construímos do zero com algum tipo de imagem de referência,
00:03:27com um quadro de inspiração (mood board), por assim dizer.
00:03:30Depois disso, entraremos no meu site real
00:03:33e veremos o que o Impeccable acha dele
00:03:36e que tipo de coisas medíocres podemos encontrar no meu próprio trabalho.
00:03:41Por último, daremos uma olhada no Impeccable Live,
00:03:43que está em sua versão alfa,
00:03:44e veremos o quão bom ele realmente é hoje.
00:03:48Mas antes de mergulharmos na construção real,
00:03:50uma palavra rápida do patrocinador favorito de todos: eu.
00:03:54No mês passado, lancei minha Cloud Code Masterclass,
00:03:56e é a maneira número um de ir do zero ao AI Dev,
00:03:59especialmente se você não vem de uma formação técnica.
00:04:02Eu atualizo este curso toda semana,
00:04:05então é o melhor lugar para entender
00:04:07como realmente usar essa ferramenta incrível.
00:04:10Nós focamos em casos de uso reais.
00:04:12Acabei de lançar todo o meu
00:04:13plano de aula do Cloud Code Agenic OS.
00:04:16Então, se você quiser colocar as mãos nele,
00:04:18você pode encontrar no Chase AI Plus.
00:04:20Há um link para isso no comentário fixado.
00:04:23Então, vamos começar,
00:04:24e vamos começar com o projeto Greenfield.
00:04:27Então, vamos construir um site do zero.
00:04:29Novamente, existem tantos comandos,
00:04:31que pode ficar um pouco confuso.
00:04:32Se você está começando algo do zero,
00:04:35eu sugiro começar com o 'impeccable craft',
00:04:39porque ele incluirá
00:04:41alguns desses comandos subsidiários, como o 'impeccable teach'.
00:04:44Agora, o que tudo isso significa?
00:04:45Bem, 'impeccable craft' basicamente significa
00:04:48que ele passará por sua própria versão do 'modo de plano'
00:04:50e perguntará sobre nosso site, nosso produto,
00:04:53o que estamos tentando construir.
00:04:55E nesse processo, ele criará dois arquivos:
00:04:59ele criará um 'product.markdown'
00:05:01e um 'design.markdown'.
00:05:02Agora, o 'design.md' é praticamente a mesma coisa
00:05:07que vimos no Google Stitch.
00:05:09Vocês lembram do Google Stitch, certo?
00:05:11A ferramenta de design gratuita do Google.
00:05:13Você tem toda essa coisa de sistema de design,
00:05:14e você tem esse arquivo 'design.md',
00:05:16que é um arquivo markdown muito aprofundado,
00:05:20dizendo à IA como construir algo.
00:05:21Todo esse conceito de 'design.md'
00:05:24está se tornando um padrão da indústria, por assim dizer.
00:05:27Você vê isso em toda parte hoje em dia.
00:05:29E o Impeccable segue essa abordagem.
00:05:31Então, ele essencialmente nos entrevistará
00:05:32e descobrirá o que estamos construindo
00:05:34e como queremos que pareça.
00:05:36E assim que ele realizar a entrevista,
00:05:37ele vai em frente e construirá a landing page para nós.
00:05:39Então, dentro do Cloud Code,
00:05:41estou em um novo diretório chamado 'impeccable-test'.
00:05:44O comando é 'impeccable-spacecraft'.
00:05:47E o prompt é: vamos construir uma landing page
00:05:49para o meu produto SaaS falso, Lighthouse.
00:05:51É uma plataforma de análise para fundadores solo e pequenas equipes.
00:05:54Faça-me todas as perguntas que quiser.
00:05:56Este é praticamente o mesmo prompt
00:05:58que dei ao Huashu Design no meu último vídeo.
00:06:01Se você não conferiu, faça isso, sem dúvida,
00:06:03que é essencialmente um clone de design em nuvem.
00:06:06Então será interessante ver
00:06:08como o Impeccable se compara a esse sistema de design.
00:06:11E se você não viu aquele vídeo,
00:06:13vou linká-lo acima.
00:06:14Então, ele voltou com 13 perguntas.
00:06:16As quatro primeiras são todas sobre o produto,
00:06:18como: quem é o cliente real?
00:06:19Como você descreveria o Lighthouse?
00:06:21Qual é a mentalidade do visitante?
00:06:22E qual é o CTA principal?
00:06:23Qual é o objetivo real desta landing page?
00:06:25As próximas perguntas são todas sobre a voz e o visual
00:06:28antes de entrar no escopo.
00:06:29Estamos fazendo apenas o herói?
00:06:30Rolagem completa, capturas de tela reais?
00:06:32Tipo, você tem outros ativos para mim?
00:06:34E o que eu gosto aqui é a profundidade das perguntas.
00:06:36Isso é mais perguntas do que o Huashu Design nos fez
00:06:40no vídeo passado.
00:06:41E isso é bem próximo da quantidade de perguntas
00:06:43que você receberia de algo como o Claude Design.
00:06:44É muito profundo e gosto de ver isso.
00:06:46Então, o que vou fazer é apenas preenchê-las.
00:06:49Vou manter as coisas bem padrão.
00:06:50Não terei que fazer nada de maluco.
00:06:52E vamos pedir uma rolagem completa.
00:06:53Então, aqui está o que o Impeccable nos deu na primeira tentativa
00:06:56com uma orientação bem mínima.
00:06:57Tudo o que realmente fizemos foi responder às suas perguntas.
00:06:59Não lhe demos nenhum tipo de ativo ou mesmo exemplos.
00:07:01Agora, de imediato,
00:07:02definitivamente não penso "lixo de IA" de cara quando vejo isso,
00:07:05embora você esteja começando a ver essa cor creme
00:07:08e fontes serifa em toda parte nesses designs modernos
00:07:11de front-end, especialmente em coisas como o Claude Design.
00:07:13Gostei desse dashboard que ele criou,
00:07:16definitivamente gostei disso.
00:07:18Gosto de não estar vendo apenas o seu padrão, sabe,
00:07:20quatro caixas bento que você vê em cada
00:07:23site de design de IA.
00:07:25Esta parte parece muito boa.
00:07:26Temos a citação, preços completos,
00:07:30e depois algo como: "Ei, vá em frente e nos dê seu e-mail."
00:07:32Então, na primeira tentativa, é muito bom.
00:07:35Mas o que eu realmente gosto de fazer ultimamente
00:07:37quando se trata dos meus designs web com o Claude code é
00:07:40eu não deixo ele me dar apenas um resultado como este.
00:07:44Então, o que eu fui lá e disse ao Impeccable, vulgo Claude code, foi
00:07:47eu não quero apenas um layout do site.
00:07:50Como você vê aqui, esta foi a primeira tentativa que ele me deu.
00:07:52Eu quero ver três variantes diferentes que eu possa escolher.
00:07:56E eu quero que todas sejam bem diferentes.
00:07:59Além disso, quero poder clicar em todas elas
00:08:01e quero vê-las todas lado a lado.
00:08:03Então, eu quero ver alguns tipos de macro layouts
00:08:05antes de mergulhar de verdade nos detalhes
00:08:08e começar a brincar com os componentes.
00:08:09E assim, o Impeccable me deu isto.
00:08:11Então, temos o editorial que acabamos de ver.
00:08:15Ele criou um que chamou de "drenched" bem aqui.
00:08:17Definitivamente um estilo diferente, com muito mais cor.
00:08:20E então tínhamos o brutalista.
00:08:22Então, aqui está uma olhada no "drenched",
00:08:24definitivamente bem mais diferente.
00:08:26Vou dizer que temos alguma sobreposição aqui na frente,
00:08:29mas isto parece bem diferente da maioria das gerações de IA.
00:08:34À medida que avançamos, sabe, eu até gosto da ousadia
00:08:39deste site, embora eu não conheça muito bem as cores.
00:08:43Mas vou dizer que gosto deste brutalista.
00:08:44Tipo, é bem em tons de cinza,
00:08:46mas gosto de como os números estão dispostos.
00:08:48Gosto de como as caixas estão meio que deslocadas.
00:08:52Como se as linhas não coincidissem totalmente.
00:08:54Eu realmente gostei deste aqui.
00:08:56Acho que este parece muito legal e bem diferente.
00:08:58E então eu acho que o que vamos fazer é que vamos
00:09:02ficar com este por enquanto.
00:09:04E só para você saber, todo esse lance de design triplo
00:09:07e ver tudo de uma vez,
00:09:08isso não é algo inerente ao Impeccable.
00:09:12Isto é algo que eu faço.
00:09:13É apenas um único prompt.
00:09:14E eu sugiro fortemente que você faça isso, não importa que tipo
00:09:17de designs ou habilidades você esteja usando.
00:09:19Acho que isso é algo que eu meio que aprendi com o Stitch
00:09:23porque o Google Stitch torna muito fácil
00:09:25fazer esse tipo de coisa, onde você pode ver
00:09:26todas essas variações diferentes na mesma página
00:09:29e comparar e contrastar.
00:09:30E para mim pessoalmente, eu tenho que ver essas coisas visuais
00:09:33para ter qualquer ideia de para onde eu quero ir.
00:09:37Então, sugiro fortemente que você faça isso.
00:09:38Você não precisa fazer três.
00:09:39Você pode fazer seis, você pode fazer um milhão.
00:09:41E também, quando você pedir ao Claude code
00:09:42para fazer esse tipo de coisa, é só dizer a ele:
00:09:44Eu quero poder ver todos os três na mesma página.
00:09:47Quero poder abri-los em tela cheia, um por um.
00:09:50E você também pode pedir que ele te dê várias
00:09:53opções macro diferentes,
00:09:55e então você pode simplesmente escolher entre elas
00:09:57e fazer com que ele crie estes.
00:09:57Porque obviamente leva um tempinho para gerar isso tudo.
00:09:59Então, agora que temos uma landing page que gostamos,
00:10:01agora é hora de começar a editar algumas coisas,
00:10:03que é onde o novo Impeccable Live entra.
00:10:06Então, tudo o que temos que fazer é dizer:
00:10:07ei, vamos rodar o Impeccable Live nesta página Brutalista.
00:10:10Agora, assim que você rodar esse comando,
00:10:12o Claude code lhe dirá que o modo ao vivo está ativo.
00:10:14Ele deve te dar um link para o local host
00:10:18em que você precisa estar, ou você pode simplesmente atualizar seu navegador.
00:10:20E então, aqui dentro, você agora pode ver
00:10:22enquanto eu meio que navego por aqui, as coisas agora estão destacadas.
00:10:26E na parte inferior aqui, temos algumas coisas também.
00:10:29Então, antes de tudo, temos o design.md.
00:10:32Ele abre a barra lateral no lado direito.
00:10:35E se eu clicar em "raw", posso ver tudo o que ele realmente criou.
00:10:39Agora, se eu clicar em um componente específico
00:10:41como esta cópia primária, algumas opções aparecem.
00:10:45Antes de tudo, temos o "free form", que é:
00:10:47ei, eu meio que dou um prompt de texto,
00:10:50ou tenho acesso a essencialmente
00:10:52todos esses comandos diferentes do Impeccable.
00:10:54Então: "bolder", "quieter", "distill", "polish", "adapt".
00:10:56Todos estes são apenas parte daqueles 23 comandos do Impeccable
00:11:00que estávamos falando antes.
00:11:02Então, digamos que eu faça algo como "bolder".
00:11:04Então, "bolder" é essencialmente um prompt pré-projetado.
00:11:09E se olharmos aqui dentro da documentação do Impeccable,
00:11:12o que o "bolder" vai fazer é torná-lo mais ousado.
00:11:15Então, este é o antes, este é o depois.
00:11:18É só torná-lo quase um pouco mais chamativo.
00:11:21Então a definição exata é: ele impulsiona designs seguros
00:11:26em direção ao impacto sem deslizar para o caos,
00:11:28diz quando usá-lo, como funciona e tudo mais.
00:11:31Então, se aplicarmos o "bolder" nisto, e para ser sincero,
00:11:32sinto que isto já é bem ousado.
00:11:34Não sei se este é o melhor.
00:11:35Posso refinar isso ainda mais.
00:11:37Então posso fazer "bolder" mais qualquer prompt que eu quiser.
00:11:40Digamos que eu escreva "adicionar cor".
00:11:43Eu então tenho isto aqui que diz
00:11:46vezes três, vezes quatro, vezes dois.
00:11:47É assim que ele vai me mostrar a quantidade de variações.
00:11:50E então clicamos em ir.
00:11:51Então, isto de certa forma é como uma versão micro
00:11:56do que estávamos fazendo aqui em termos de variações
00:11:58onde eu penso: tudo bem, me dê essa única coisa.
00:12:00Vamos mudá-la, mostre-me variações.
00:12:03Agora estamos fazendo isso em um nível micro
00:12:06e podemos ser ainda mais específicos
00:12:08em termos do que estamos procurando, certo?
00:12:09Neste caso, estamos fazendo o "bolder".
00:12:10Poderíamos ter escolhido qualquer uma daquelas 12 opções
00:12:13e aqui está o que ele criou.
00:12:14Então sim, muito ousado em comparação com as outras opções.
00:12:17Esta é a variante um, a variante dois,
00:12:21um pouco mais contida
00:12:22e então a variante três, meio selvagem, né?
00:12:25Também esta habilidade de ajustar a variante.
00:12:27Então, se eu clicar em "tune", certo,
00:12:30podemos meio que mudar o deslocamento.
00:12:31Por exemplo, deste, como selvagem, você quer que pareça?
00:12:36Como você quer que as cores fiquem?
00:12:39Então, de novo, se pensarmos no meu último vídeo
00:12:42ou se você estiver pensando no Claude design, como ajustes,
00:12:44novamente, isto é praticamente como micro ajustes
00:12:47e isso se aplica a todas as variantes.
00:12:50Esconder a chave, mostrar a chave, então há muito o que podemos fazer.
00:12:53Digamos que queremos ficar com isto.
00:12:54Então, se eu quiser ficar com isso, o que vou fazer?
00:12:56Eu só tenho que clicar em "aceitar" e agora está aplicado.
00:13:00Agora, se você clicar em "aceitar" e der algum erro assim,
00:13:02só verifique o Claude code,
00:13:03ele está basicamente aplicando suas mudanças e recarregando.
00:13:06E aqui está como fica com as mudanças aplicadas.
00:13:09Agora, a única coisa que eu não falei foi o "detect".
00:13:10Então, se eu clicar em "detect" aqui, o que ele vai procurar
00:13:13é essencialmente, ele está tentando ver: tem algum "lixo de IA" aqui?
00:13:17Ele está detectando algum desses antipadrões
00:13:19sobre os quais falamos antes?
00:13:20Agora, como isto foi criado completamente com o Impeccable,
00:13:24eu duvido muito que ele encontre alguma coisa
00:13:26e é por isso que não estamos vendo nada aparecer.
00:13:28Mas veremos mais tarde, quando dermos uma olhada no meu próprio site,
00:13:31se esse for o caso.
00:13:32Mas é basicamente assim que o sistema ao vivo funciona.
00:13:34E acho que esta parte é muito legal e o que o diferencia,
00:13:37eu acho, de outras habilidades e repositórios de design front-end
00:13:41que você viu no passado,
00:13:42especialmente o fato de que podemos criar variantes extras.
00:13:45Estou super otimista em poder ver
00:13:47todas essas variantes diferentes de uma vez
00:13:49e meio que ajustá-las neste nível muito, muito, muito micro.
00:13:52Então eu amo isso, mas novamente, é uma versão alfa.
00:13:54Então, sabe, talvez você encontre alguns erros.
00:13:57Existem algumas coisinhas
00:13:59que parecem ser um pouco rudes nas bordas,
00:14:01como o recarregamento que você acabou de ver, mas ei,
00:14:03eu acho que isto é muito legal.
00:14:04Então, definitivamente confira se você usar o Impeccable.
00:14:07Não deixe apenas que ele crie e pronto.
00:14:09Vá para o "live" e mexa com isso.
00:14:11Agora, assim que você deixar a página web como você gosta,
00:14:13existem mais comandos que você tem a capacidade de rodar.
00:14:16Então podemos rodar algo como "polish"
00:14:18onde ele faz uma passagem final do sistema de design.
00:14:20Podemos fazer algo como "harden"
00:14:22onde ele vai dar uma olhada nos casos extremos e erros
00:14:24e ter certeza de que tudo está funcionando.
00:14:25Como eu disse, isto é muito, muito sofisticado
00:14:28e bem profundo em termos da quantidade de comandos que podemos rodar.
00:14:30Mas, por uma questão de tempo, o que vamos fazer agora
00:14:33é que eu vou mostrar como construir do zero,
00:14:35mas desta vez nós vamos usar
00:14:38essencialmente um "mood board" ou uma maquete
00:14:40do tipo de visão que queremos passar para o Impeccable.
00:14:43Porque eu quero ver como isso parece
00:14:45quando nós meio que copiamos o que foi o estudo de caso deles,
00:14:48porque o que eles fizeram foi pegar esta imagem,
00:14:50jogaram no Claude Code, colocaram no Impeccable,
00:14:52e, tipo, tudo bem, criaram este site,
00:14:53e eles conseguiram algo
00:14:54que parecia bem incrível.
00:14:55Então eu fui lá e criei algumas imagens
00:14:58que combinam com a estética que o Impeccable usou no estudo de caso deles,
00:15:02mas estamos usando o Lighthouse em vez disso,
00:15:04para que possamos pelo menos ter um teste
00:15:07que seja, de certa forma, uma comparação um para um.
00:15:09Então eu meio que gostei deste, então acho que vamos ficar com ele.
00:15:11Assim como antes, estou rodando o "impeccable craft" como habilidade.
00:15:15Ele então me fez uma série de perguntas semelhantes às de antes,
00:15:18e eu praticamente disse apenas para seguir
00:15:21o clima e a vibração
00:15:22que você obteve da imagem que eu te dei.
00:15:24Então, isto é o que ele criou,
00:15:26e honestamente, deixa um pouco a desejar.
00:15:29Acho que apenas jogar esse tipo de "mood board" nele
00:15:33e dizer a ele: "Ei, vamos criar um site a partir disto",
00:15:35ele lutou.
00:15:37Acho que ele fez o seu melhor.
00:15:38Tipo, ainda temos o painel, ele tem as cores,
00:15:41mas não é tão bom quanto o que eles criaram,
00:15:43porque acho que, como só dei aquele único ativo
00:15:46e não incluí ativos adicionais,
00:15:48ele não dividiu as coisas da mesma maneira
00:15:51que a Impeccable fez com o estudo de caso deles,
00:15:52mas pode ser um problema de prompt.
00:15:55Mas mesmo assim, você consegue ver a estrutura
00:15:57de algo que funcionaria aqui.
00:15:59Eu gosto de como eles fazem o painel.
00:16:01Então, definitivamente não é tão impressionante, eu acho,
00:16:05quanto o primeiro que fizemos no início,
00:16:09mas ei, resolvi testar.
00:16:11Então, vamos ver como ele se sai ao editar um site existente.
00:16:14Vamos usar meu site, o site da minha agência de IA,
00:16:18e vamos executar alguns comandos nele.
00:16:21Usaremos o documento Impeccable
00:16:23para que ele possa fazer a engenharia reversa de um arquivo design.md
00:16:26a partir do código, e então faremos coisas como rodar a auditoria
00:16:29e fazer uma crítica, e vamos fazer a coisa ao vivo novamente
00:16:32no meu site real e ver
00:16:36que tipo de anúncios podemos criar.
00:16:37Então, para referência, este é o site da minha agência de IA.
00:16:41Eu tenho uma seção de destaque padrão.
00:16:43Entro nos serviços, falo sobre minha filosofia
00:16:47de como fazemos a implementação de IA
00:16:49antes de ter uma espécie de chamada para ação,
00:16:51um lugar onde as pessoas podem preencher suas informações
00:16:54se quiserem trabalhar comigo.
00:16:55Tenho algumas páginas adicionais como o meu blog,
00:16:57mas vamos ficar apenas com a página inicial por enquanto.
00:17:00Então, a primeira coisa que fiz foi dizer,
00:17:02vamos rodar o documento Impeccable nesta base de código
00:17:05e ver o que o Impeccable tem a dizer sobre meu site atual.
00:17:08Então ele está percorrendo toda a base de código
00:17:11e vai criar um design.md para o que já temos,
00:17:16e é a partir dessa base
00:17:18que podemos começar a editar as coisas.
00:17:19Então, depois que o Impeccable analisou a base de código,
00:17:21ele escreveu três arquivos que são basicamente
00:17:23contexto estratégico do que está acontecendo.
00:17:26Ele fala sobre as vitórias, a Estrela do Norte,
00:17:29mas também fala sobre sete violações diferentes que encontrou.
00:17:33Então, a esfera azul, ele diz que os mockups dos cartões de serviço
00:17:37são basicamente um pacote de variedades de clipart,
00:17:40grade de cartão intencional.
00:17:43Ele odeia glassmorphism, então ele não gosta disso.
00:17:47Ele diz que carregamos uma certa fonte, mas nunca a usamos,
00:17:50além de algumas outras coisas.
00:17:53Então, havia alguns recursos
00:17:54que estão essencialmente no código,
00:17:55mas que na verdade não aparecem na interface real.
00:17:58E também algum problema com algumas das cores.
00:18:02Ele também fala sobre a lacuna estratégica
00:18:04de eu basicamente não me colocar, a pessoa, Chase,
00:18:07no próprio site, o que é justo.
00:18:10Agora podemos obter uma crítica ainda mais profunda
00:18:12se rodarmos o comando de crítica.
00:18:15E então vamos fazer isso agora.
00:18:16Então, estou dizendo para rodar o comando de crítica.
00:18:18Nem escrevi "crítica" corretamente.
00:18:20Mandando rodar o comando de crítica na landing page.
00:18:23Então ele rodou sua crítica e o veredito foi que é,
00:18:25sim, quase um "lixo de IA".
00:18:27Ele me deu uma pontuação de saúde de design em 10 coisas diferentes
00:18:33e cada uma era de quatro,
00:18:34e não pontuei acima de três em nenhuma delas,
00:18:37mas não tirei nenhuma nota um, então isso é bom.
00:18:39O total foi 25 de 40, o que é classificado como aceitável.
00:18:43Para carga cognitiva, ele me dá um cinco de oito, uma falha.
00:18:46Ele diz que o movimento de fundo compete com o conteúdo.
00:18:51Sim, acho que é meio suave,
00:18:54mas entendo de onde ele está vindo.
00:18:56Duas CTAs com peso igual aqui com prioridade ambígua.
00:19:00A seção de serviços tem quatro esquemas visuais diferentes
00:19:03junto com algumas outras coisas.
00:19:05E a impressão geral é que ele tem uma boa base,
00:19:08mas poderia fazer um pouco mais.
00:19:10E então, no final, ele divide
00:19:11em três lugares diferentes.
00:19:14Então, honestamente, eu gostei dessa crítica.
00:19:16Isso é muito, muito detalhado e nos dá muito com o que trabalhar
00:19:19e fica bem específico sobre o que ele acha que está errado.
00:19:22Agora, se eu concordo ou não com algumas dessas coisas,
00:19:24acho que é irrelevante,
00:19:26mas nos dá coisas para pensar.
00:19:29Sabe, eu não vou simplesmente assumir cegamente que
00:19:31tudo o que ele está me dizendo está correto,
00:19:32mas podemos analisar essas coisas, ou se eu quisesse,
00:19:35posso passar por todas elas.
00:19:36Estou tipo, certo, vamos mudar isso e aquilo.
00:19:37Então, vamos ver o que acontece se fizermos B
00:19:40e dissermos que queremos brincar
00:19:42com o que ele chama de disciplina de decoração
00:19:44e ver que mudanças ele faz.
00:19:46E depois que virmos as mudanças que ele faz,
00:19:48vamos entrar na sessão ao vivo,
00:19:51assim como fizemos com a primeira landing page que construímos
00:19:54e bagunçar um pouco com aquilo.
00:19:55Então, vamos dar uma olhada em algumas das mudanças que ele fez.
00:19:57E as mudanças foram muito sutis.
00:19:59Então, podemos ver bem aqui na seção de serviços,
00:20:03esta é a versão atualizada.
00:20:04Eles meio que suavizaram as cores e mantiveram
00:20:07apenas neste laranja terracota e branco.
00:20:09Você notará que não existe mais aquele tipo de neblina azul
00:20:13no canto inferior esquerdo.
00:20:14Para referência, esta é a anterior
00:20:17onde você tem esse azul no canto inferior esquerdo
00:20:18e depois azul e verde.
00:20:20Então ele está mantendo apenas duas cores, certo?
00:20:23O tipo branco, na verdade três cores,
00:20:25eu diria como branco, cinza e então o laranja.
00:20:28Você também pode ver isso aqui na seção de abordagem.
00:20:32Então, conforme passo pelos cartões, ainda temos aquele brilho laranja,
00:20:36mas no original ele tinha um pouco de laranja aqui embaixo.
00:20:41Ele tinha o alinhamento dos cartões lá no topo
00:20:43e ele acha que é algo do tipo "lixo de IA".
00:20:47E essa é a extensão das mudanças da disciplina de decoração.
00:20:51Então, bastante sutil, ele tem algumas outras
00:20:53que ele quer tentar também.
00:20:54Elas têm a ver com confiança e conversão
00:20:56e potencialmente adicionar coisas como fotos de rosto.
00:20:58Mas o que vamos pular agora
00:21:00é entrar no modo ao vivo.
00:21:02Então, vamos dar uma olhada no site agora no modo ao vivo.
00:21:05Então, digamos que eu quisesse mudar um pouco esses cartões
00:21:08e, como antes, o que eu faria?
00:21:10Eu posso fazer o modo livre ou posso ir em frente
00:21:13e escolher um desses comandos pré-carregados.
00:21:17Então, vamos tentar "encantar" para este.
00:21:19E então vamos escolher três variantes.
00:21:22E o que "encantar" faz é adicionar uma personalidade real
00:21:26àquele componente específico.
00:21:27Aqui está uma olhada em algumas das variantes que ele nos deu.
00:21:30Então esta é um pouco maior,
00:21:32tem esse negócio aqui na direita.
00:21:35Ele muda o texto real aqui.
00:21:37E adiciona essa coisinha também.
00:21:40E obviamente como estes, temos as opções
00:21:43para mexer também.
00:21:45Isso deveria ser um número, está um pouco fora.
00:21:49Então sim, praticamente o mesmo cenário
00:21:53que o primeiro site que criamos.
00:21:55Eu acho que esse modo ao vivo do Impeccable
00:21:57é de longe a ferramenta mais poderosa dele.
00:22:00O fato de podermos fazer esses microajustes
00:22:02a partir de uma interface gráfica
00:22:04em vez de ter que fazer tudo na linha de comando.
00:22:06Então, fico feliz em ver que é praticamente
00:22:08a mesma configuração exata,
00:22:09mesmo quando estamos usando uma base de código que já existe.
00:22:12Então, no geral, eu realmente gostei do Impeccable.
00:22:13Acho que é 100% uma habilidade que você deve adicionar ao seu conjunto
00:22:17e definitivamente testar quando estiver fazendo sua próxima rodada
00:22:20de design front-end,
00:22:21seja para um site que você está criando do zero
00:22:23ou para algo que já existe.
00:22:26E 100% experimente a ferramenta ao vivo.
00:22:29Isso é algo que eles acabaram de adicionar,
00:22:31eu acho que cerca de uma semana atrás.
00:22:32E acho que é um grande diferencial
00:22:34de todas essas outras coisas.
00:22:35Acho que quando você combina esses microajustes
00:22:38com os layouts macro que eu disse para fazer
00:22:41via prompt no início,
00:22:43acho que você tem um fluxo de trabalho realmente poderoso.
00:22:45Como sempre, me diga o que você achou.
00:22:47O link para este repositório estará na descrição.
00:22:49Há também o link no comentário fixado para Chase AI+
00:22:52se você quiser colocar as mãos na minha masterclass de Cloud Code.
00:22:55E além disso, nos vemos por aí.