00:00:00há um monstro dentro do Claude Code e ele se chama "AI Slop".
00:00:03Gradientes roxos, fonte Inter para tudo e o mesmo estilo de cartões em cada
00:00:09único site. Você sabe de que tipo de AI Slop estou falando,
00:00:12mas hoje vou te dar 10 ferramentas diferentes para te ajudar a abater essa fera
00:00:16e, não, nenhuma delas é a habilidade de design front-end. Na verdade,
00:00:20muitas dessas ferramentas são relativamente novas.
00:00:22Então, mesmo que você esteja no espaço de design do Claude Code há algum tempo,
00:00:26eu prometo que você vai aprender algo hoje.
00:00:28Agora, todas essas ferramentas que vamos analisar servem essencialmente ao mesmo
00:00:31propósito: te dar uma chance real de criar design web front-end de alta qualidade
00:00:35com o Claude Code, porque por melhor que o Claude Code seja,
00:00:39essa é uma área em que ele é extremamente deficiente.
00:00:42E a primeira ferramenta da lista é o Impeccable.
00:00:44Esta é uma única "skill" que inclui 18 comandos.
00:00:46E eu vou deixar o link disso na descrição, assim como de todas as outras ferramentas que cobriremos
00:00:50hoje.
00:00:51Eu gosto muito do Impeccable porque o que ele é capaz de fazer é de amplo
00:00:55alcance. É uma skill, mas são 18 comandos.
00:00:58E se seguirmos o link no GitHub para impeccable.style,
00:01:01podemos ver todos os comandos deles em ação. E melhor ainda,
00:01:05podemos ver a saída genérica de IA — tipo, fonte Inter, gradientes roxos —
00:01:09e o resultado final usando os diferentes comandos. Por exemplo,
00:01:15temos algo como o "clarify",
00:01:16que foca em erros de UX e mensagens de erro.
00:01:19E você pode ver a diferença entre os dois aqui.
00:01:21Ele também possui uma extensão para o Chrome,
00:01:23que destaca essa estética de AI Slop diretamente na sua página,
00:01:28como neste exemplo. E eu gosto muito de como esta skill usa o conceito de "anti-padrão".
00:01:32Basicamente, ela ensina aos modelos de linguagem
00:01:34como o AI Slop realmente se parece: esses acentos de borda,
00:01:38essas bordas de abas laterais que você vê em todo lugar, sabe,
00:01:42sparklines, glassmorphism, certo?
00:01:45Nós apenas vemos essas coisas de novo e de novo e de novo.
00:01:47Então, por que não usar uma skill que diz aos LLMs: "Isso é AI Slop, literalmente"?
00:01:52Em vez de usar algo como a skill de design front-end, que é tipo:
00:01:54"Apenas não faça AI Slop, por favor" — isso não funciona. E como você pode imaginar,
00:01:58esta skill é bem densa, como vemos aqui. E eu continuo rolando.
00:02:03Isso é porque ela tem várias referências para cada domínio específico de design.
00:02:07Você pode quase pensar nelas como sub-skills e nos já mencionados 18
00:02:08comandos diferentes. Agora,
00:02:13a maneira mais fácil de ver todos esses comandos em ação é ir direto à
00:02:14documentação do Impeccable. E assim como você viu na página inicial,
00:02:17você pode ver os exemplos do antes versus o depois.
00:02:21E ver visualmente o que todas essas coisas podem fazer é muito melhor do que
00:02:25apenas ler a descrição e esperar que o Claude Code use o que você espera que
00:02:29ele use. E nem é uma questão puramente visual.
00:02:33Quando você olha para skills como a "adapt",
00:02:35ela garante que o design funcione em diferentes plataformas, como mobile e tablet,
00:02:37em vez de apenas desktop. Então, recomendo fortemente que você confira.
00:02:41Ela saiu há apenas cerca de um mês. Agora, antes de passarmos para a ferramenta número dois,
00:02:45um rápido anúncio da minha masterclass de Claude Code, que lancei no mês passado.
00:02:48E eu já publiquei uma tonelada de atualizações.
00:02:52É o lugar número um para ir do zero a desenvolvedor de IA.
00:02:54E o preço dela vai aumentar em apenas alguns dias.
00:02:57Então, se você quiser colocar as mãos nisso, certifique-se de conferir.
00:03:01Há um link no comentário fixado. Agora vamos falar sobre a ferramenta número dois,
00:03:04que é o Skill UI. Esta é uma ferramenta que descobri hoje de manhã.
00:03:06Não está no ar nem há 24 horas. Tem sete estrelas.
00:03:12Estamos no começo de tudo. Eu não criei isso, não conheço esse cara.
00:03:15Eu apenas vi ele postando sobre isso no Twitter.
00:03:18Eu estava apenas navegando no feed e vi: "Isso parece ser uma skill legal".
00:03:21E ela nos permite fazer engenharia reversa de qualquer sistema de design em uma skill pronta para o Claude.
00:03:24O que isso significa? Significa que pegamos essa skill,
00:03:29apontamos para algum site que já existe,
00:03:31e ela essencialmente analisa como esse site foi construído e o transforma em
00:03:34um modelo, em uma skill, basicamente. Deixe-me mostrar em ação. Bem aqui,
00:03:39temos o site da Stripe, um site bem legal, com muita coisa acontecendo.
00:03:45Obviamente, ele tem muitos gráficos personalizados e coisas do tipo.
00:03:49É impossível para o Claude Code, sem muitos desses gráficos e visuais,
00:03:52recriá-lo necessariamente. Ainda. Mas digamos que eu goste do design geral,
00:03:56apenas de como ele é configurado em termos de cartões e layouts.
00:04:00E eu queira usar isso como base para o meu próprio site. Bem,
00:04:03já falamos em vídeos passados sobre maneiras de fazer isso.
00:04:06Como olhar o HTML, todas essas coisas, mas, você sabe,
00:04:08acaba sendo uma solução de 60 ou 70%. Então, peguei a skill do Skill UI,
00:04:11apontei para a Stripe e disse: "Ei,
00:04:15crie para mim um site falso da Stripe nesse estilo".
00:04:17E foi isso que ele criou com apenas um comando. Foi só o que eu disse.
00:04:21Não dei mais nenhuma informação e ele criou isso.
00:04:25E ele definitivamente tem uma "vibe" de Stripe. Novamente,
00:04:27esses são gráficos personalizados da Stripe.
00:04:32Ele não vai conseguir recriar isso apenas com um prompt, mas, você sabe,
00:04:34está muito bom. Na verdade, se você me perguntar... sabe,
00:04:39ainda tem algumas coisas padrão de IA,
00:04:44pelo modo como os elementos e os ícones estão configurados,
00:04:47mas ele não fez apenas aquele bento box de 2x2 com os cartões.
00:04:50Eu gosto das cores que usaram. Gosto do gráfico, mas aqui,
00:04:55isso é honestamente muito bom para eu apenas ter dito: "Ei, olhe o site da
00:04:59Stripe e me construa uma base". E como ele transformou isso em uma skill,
00:05:03agora eu tenho uma skill de design da Stripe, que está apenas no nível do projeto,
00:05:06mas que eu poderia usar a qualquer momento.
00:05:10Então, digamos que eu queira fazer outro site que também use o estilo da Stripe.
00:05:12Eu posso fazer isso, e posso apontar o Skill UI para qualquer coisa.
00:05:16E você pode vê-lo em ação no vídeo de exemplo que ele tem no GitHub,
00:05:18onde ele apontou esta ferramenta para o Notion.
00:05:22E então ele disse ao Claude Code: "Crie essencialmente um clone do Notion".
00:05:24E é isso que você vê ali. Então, para usar esta skill,
00:05:27você apenas segue os comandos de instalação aqui na página do GitHub.
00:05:30E ela tem dois modos diferentes. Então, se você quer algo que essencialmente
00:05:33pegue tudo, como capturas de tela longas e diferentes interações,
00:05:38quando você passa o mouse sobre as coisas, ela usa o Playwright
00:05:41para entender tudo isso. Portanto, não está apenas olhando o HTML,
00:05:45como as ferramentas normais fazem ou como minha skill personalizada de análise de sites
00:05:48fez no passado. Se você usar o modo ultra, ele realmente traz o Playwright.
00:05:52Então há um certo nível de sofisticação aqui. No geral,
00:05:55uma skill muito inteligente e você está no começo de tudo. Se começar a usar isso,
00:05:58você será como um daqueles usuários "hipster" de repositórios do GitHub.
00:06:00E eu sugeriria fortemente que você fizesse isso se estiver começando um novo site
00:06:03e não tiver ideia de por onde começar do zero, porque, novamente,
00:06:07este é um ótimo ponto de partida. Eu posso editar o que quiser a partir daqui.
00:06:10Agora, a ferramenta número três é uma que, para ser sincero, está um pouco fora da minha
00:06:13zona de conforto, mas eu a acho super interessante.
00:06:17Estou tentando aprender mais sobre ela e usá-la eu mesmo.
00:06:19E esta é uma skill de WebGPU.
00:06:21As WebGPUs são essencialmente componentes de design web onde a
00:06:23página interage com a sua placa de vídeo.
00:06:28E isso nos permite criar animações super legais. Como você vê aqui,
00:06:30e essas coisas também.
00:06:34Quando falamos... se você assistiu ao meu vídeo dos sete níveis de design web com Claude Code,
00:06:36e até quando olhamos para coisas como o site da Igloo no nível sete,
00:06:40eles estavam usando coisas como WebGL e shaders personalizados.
00:06:44Este é o tipo de área do qual estou falando.
00:06:47E então esta skill ensina o Claude Code
00:06:49como essencialmente escrever código que faça isso.
00:06:52Ela diz como configurar a renderização, como fazer shaders,
00:06:54como criar o material baseado em nós. E ao usar a skill,
00:06:58eu apenas dei alguns prompts de texto e ela foi capaz de criar isto.
00:07:00Agora, isso é tão legal quanto, sabe, este aqui? Não,
00:07:06mas eu fiz em dois minutos — bem, na verdade levou uns 10 minutos com a
00:07:08GPU — mas com apenas alguns prompts e eu não tinha ideia do que estava fazendo.
00:07:13Então, se esse tipo de coisa te interessa e, de todas as ferramentas de que falo
00:07:16aqui, esta é a mais, digamos, "fora da caixa",
00:07:19mas eu gostei. Se esse assunto te interessa,
00:07:22esta é uma skill que você deve conferir porque ela te leva nessa
00:07:26direção.
00:07:28Mas obviamente isso é algo muito mais avançado do que apenas mudar
00:07:29a aparência dos nossos cartões ou mudar a tipografia de um site,
00:07:32mas é algo para se ter em mente agora.
00:07:35A ferramenta número quatro é um dos repositórios de IA mais quentes do último mês.
00:07:37E é o awesome-design.md. Aqui está ele, com mais de 50.000 estrelas neste momento.
00:07:41Tem crescido absurdamente.
00:07:46E isso é semelhante, de certa forma, à ferramenta Skill UI que mencionamos porque
00:07:48é uma skill que nos permite olhar para outros sites que já existem e
00:07:52usá-los como uma espécie de modelo para o site que vamos construir. Agora,
00:07:57o awesome-design foi fortemente influenciado pelo Stitched.
00:08:01E falaremos sobre o Stitch um pouco mais tarde.
00:08:04O Stitch tem este conceito de arquivos design.md — arquivos markdown de design —
00:08:06e eles são apenas prompts descrevendo como você deve construir seu site.
00:08:11A diferença é que o Google fez um trabalho muito bom ao criar esses prompts.
00:08:14Como você vê aqui. E ele é muito, muito específico sobre qual é a visão geral,
00:08:18qual é o objetivo principal, como estamos tratando as cores... Ele traz uma ótima estrutura.
00:08:22Em vez de, novamente, algo como a skill de design front-end do Claude Code,
00:08:26que é meio tipo: "ah, vamos apenas fazer as coisas deste ou daquele jeito".
00:08:29Isso aqui é muito mais concreto sobre o que precisa ser feito.
00:08:32E então ele pegou essa ideia desses prompts de sistema de design muito específicos e
00:08:34essencialmente os criou para vários sites diferentes em vários
00:08:39domínios diferentes. Então, algo como o ElevenLabs,
00:08:43se eu clicar nele aqui...
00:08:47Eu posso ver, essencialmente, toda a ideia de design do ElevenLabs
00:08:50desmembrada: elementos de formulário, exemplos de cartões, botões, títulos,
00:08:55tipografia, cores, tudo isso. E não é apenas aquela prévia ao vivo.
00:09:00Vemos que é o prompt real que podemos então fornecer ao Claude Code. E, novamente,
00:09:04eles têm uma tonelada de sites aqui, incluindo coisas não relacionadas a texto,
00:09:07como Bugatti, certo? Tipo, você sabe... essencialmente,
00:09:10isso está te dando os blocos de construção de algum site que você gosta para que possa construir
00:09:15o seu próprio usando esses mesmos blocos.
00:09:19Assim, enquanto a ferramenta Skill UI que vimos antes meio que olha para qualquer site que
00:09:21você quiser e depois o constrói para você,
00:09:25esta apenas separa as partes componentes.
00:09:26E então cabe a nós construirmos nós mesmos. Agora, depois de tanto falar do awesome-design,
00:09:29é justo que, para a ferramenta número cinco,
00:09:33falemos sobre o aplicativo que realmente o inspirou.
00:09:35E esse é o próprio Stitch, do Google. O Stitch é incrível.
00:09:38Se você quer começar com uma abordagem visual antes de realmente colocar a mão na massa e
00:09:41começar a construir sua página.
00:09:46O que você faz é entrar no Stitch e dar um prompt do que
00:09:48está tentando construir. Isso pode incluir capturas de tela de inspiração.
00:09:50O que ele vai fazer é criar aquele mesmo tipo de arquivo design.md
00:09:53que você viu antes, mas em seu habitat natural.
00:09:57Então ele nos dá uma descrição das cores, do tipo de tipografia, dos rótulos,
00:09:59dos botões, e então podemos ver aqui todo o sistema de design,
00:10:04o mesmo tipo de design.md que você viu antes,
00:10:08mas agora personalizado para o que você solicitou. E assim que ele faz isso,
00:10:11ele te dá várias variações do tipo de site que você vai
00:10:14criar. Não é apenas a seção hero. Ele faz tudo.
00:10:18E uma vez que ele cria esse mockup, eu posso editá-lo como desejar, posso clicar nele.
00:10:20Posso clicar com o botão direito e obter variantes específicas.
00:10:25Posso personalizar as diferentes variantes. Posso mudar de
00:10:28três variantes para cinco variantes. Posso definir um alcance criativo,
00:10:31dar instruções, etc., etc.
00:10:34Basicamente, tenho várias maneiras de gerar rapidamente um monte de visuais para o meu
00:10:35potencial site. E isso é ótimo porque é difícil.
00:10:40Quando você está dentro do Claude Code e toda vez que quer fazer uma mudança visual,
00:10:43certo? Ele precisa escrever o código. Você precisa subir o servidor de desenvolvimento.
00:10:46Você precisa conferir na página. E, muitas vezes, quando estamos fazendo essas coisas,
00:10:48especialmente de um ângulo de design front-end,
00:10:52eu quero ver as opções na minha frente, certo?
00:10:56É muito mais fácil para mim ver todas essas três e dizer: "Tudo bem, odeio esta."
00:10:58"Odeio esta. Talvez eu goste desta", em vez de: "Certo, Claude Code, tente de novo."
00:11:02"Não. Tente de novo. Não. Tente de novo." Então, isso também é gratuito,
00:11:06Não. Tente de novo. Não. Tente de novo. Então, isso também é de graça,
00:11:11o que é ótimo. E o que quer que eu construa aqui,
00:11:13é muito fácil de transferir para o Claude Code porque, se eu clicar no que
00:11:16eu gostei, vou em "mais" e posso ver o código.
00:11:19Eu posso então copiar o código e trazê-lo para o Claude Code.
00:11:23E você pode até fazer coisas como copiar para o Figma.
00:11:25Você também pode levar para o AI Studio,
00:11:27mas o caminho mais fácil para o Claude Code é apenas exportar e copiar para a área de transferência.
00:11:31Existe um MCP. Então você pode fazer tudo isso pelo terminal do Claude Code.
00:11:35Mas, para ser honesto, eu não entendo muito bem o que isso realmente traz de vantagem.
00:11:39Sinto que colocar as mãos na massa nesse sentido visual vale a pena.
00:11:43Agora, eu tenho um mergulho profundo completo sobre o Stitched no Claude Code e vou linkar
00:11:46acima se você quiser ver mais disso em ação. Agora,
00:11:49eu debati se colocaria a habilidade número seis neste vídeo porque sinto que ela está ficando
00:11:52tão onipresente. Quase todo mundo sabe que existe, mas nunca se sabe.
00:11:55Pode ser a primeira vez de alguém vendo. E essa é a habilidade UI UX pro max.
00:12:00Este é, eu acho, o sucessor espiritual ou o que a
00:12:05habilidade de design front-end da Anthropic deveria ser. Então imagine um design de front-end
00:12:09da Anthropic que seja realmente treinado em diferentes tipos de, você sabe,
00:12:14convenções para diferentes tipos de sites em diferentes tipos de domínios, porque
00:12:19nem todo site precisa parecer um SaaS, como um SaaS de nível B.
00:12:23E é disso que se trata essa habilidade.
00:12:25É um gerador de sistema de design inteligente.
00:12:27Então, ele vai realmente te fazer perguntas.
00:12:29Ele vai descobrir sobre o que é o seu site,
00:12:31sobre o que é o seu serviço, e então projetá-lo com base na sua função.
00:12:35Portanto, possui 161 regras de raciocínio específicas da indústria.
00:12:39Eles realmente construíram bem essa ferramenta.
00:12:43Você não vai receber aquele tipo de lixo genérico de IA sem habilidade,
00:12:47e você não vai receber o que está se tornando lentamente a versão Claude Code de lixo de IA
00:12:51com a habilidade de design de front-end.
00:12:52Ela também é construída com uma série de orientações específicas para a stack.
00:12:55Então você não é empurrado apenas para algo como React e, no fim das contas, é uma ótima
00:13:00habilidade. Se você meio que não tem ideia de para onde quer ir.
00:13:04Muita coisa que já falamos exige que você tenha alguma noção do
00:13:09que deseja. Bem, especialmente se você tiver um site de exemplo, certo?
00:13:12Quando vimos o Skill UI, se eu tiver um exemplo,
00:13:15eu posso praticamente copiá-lo, e a mesma coisa com o Awesome Design.
00:13:19Tipo, estou escolhendo entre esses sites que existem.
00:13:21Se você não quiser seguir esse caminho,
00:13:22mas ainda estiver meio confuso sobre onde deveria estar, use esta habilidade.
00:13:26Ótimo ponto de partida.
00:13:28Agora, a ferramenta número sete é toda sobre componentes e realmente acertar os detalhes da
00:13:33nossa página web. E é aí que trazemos o 21st.dev,
00:13:36que é um site com um milhão de componentes diferentes para escolhermos e
00:13:40integrarmos diretamente no nosso site. Por exemplo,
00:13:43digamos que eu estivesse tentando descobrir algo para a nossa hero page. Bem,
00:13:46eu apenas vou na seção de heróis no 21st.dev e procuro por um.
00:13:51Gostei, digamos que eu gostei deste, esta hero page que usa Spline.
00:13:56Então tem este robô que realmente segue o meu mouse. Bem,
00:14:00em vez de descobrir como usar Spline e escrever esse código,
00:14:04eu apenas entro no 21st.dev.
00:14:06Eu copio o prompt clicando no botão "copy prompt" lá em cima.
00:14:09Eu vou para o Claude Code e colo, pronto. Eu terei esta como minha seção hero.
00:14:14Agora,
00:14:15obviamente, as seções hero são provavelmente a coisa mais pesada que poderíamos importar
00:14:19para a nossa página, porque se tivermos uma hero page com um robô olhando para todo lado,
00:14:22todo o nosso site meio que tem que seguir essa estética. Então, por sorte,
00:14:26acho que você tira o maior proveito de algo como o 21st.dev quando se trata
00:14:29dos componentes menores e dos pequenos detalhes, como botões, certo?
00:14:33Apenas o fato de que este botão tem esta luzinha nele.
00:14:36Quando eu o movo, em comparação ao seu botão padrão, é algo que fará
00:14:39seu site parecer melhor, ou cards que têm esse, sabe,
00:14:43tipo de animação de luz que segue o meu mouse ou algo assim. Novamente,
00:14:46são esses pequenos detalhes, essas sombras brilhantes.
00:14:49Essas são as coisas que elevam sua página web,
00:14:52fazem com que pareça mais premium e apenas mostram que você se importou.
00:14:56E que você realmente tentou. E, se nada mais,
00:14:59o que isso deve fazer é apenas te dar inspiração, porque
00:15:03não há nada que diga que você não pode copiar um prompt para qualquer um desses componentes,
00:15:07sejam bordas ou heroes ou o que quer que seja,
00:15:09e depois ajustá-lo ao seu gosto com o Claude Code.
00:15:12Não é uma coisa de tudo ou nada.
00:15:14E acho que, especialmente para aqueles de nós que não vêm de uma formação de
00:15:17web design, eu certamente não venho, sabe,
00:15:19você simplesmente não sabe o que não sabe, e ser exposto a todas essas formas diferentes
00:15:23de criar um botão meio que faz sua mente se mover em direções diferentes.
00:15:26E isso te ajuda ao longo do tempo.
00:15:29Quanto mais você é exposto a isso, mais desenvolve seu próprio gosto e descobre
00:15:32do que gosta. Mas até você ver essas coisas,
00:15:34você nem sabe do que gosta.
00:15:36Tudo o que você viu é o que o Claude Code te dá.
00:15:39Então, sugiro fortemente que você confira isso; virtualmente todas essas coisas são gratuitas e
00:15:43você deveria estar integrando pelo menos algumas das coisas menores,
00:15:46como as formas que fazem os botões e os cards, na sua próxima página web.
00:15:49Agora, a frase que você continua ouvindo sem parar ultimamente é: "A IA não tem
00:15:53bom gosto". Bem, e se déssemos a ela bom gosto como uma habilidade? Bem,
00:15:56é o que tentamos fazer com a ferramenta número oito.
00:15:59E esse é o repo Taste Skill.
00:16:01Esta é uma coleção de habilidades que tenta ou busca dar ao
00:16:06Claude Code uma medida de bom gosto, ou seja, afastando-se do lixo de IA,
00:16:11que é o tema que você vê repetidamente.
00:16:13Agora, esta Taste Skill inclui uma série de sub-habilidades diferentes, como você vê aqui,
00:16:17e tem diferentes configurações. Então você pode meio que ajustar o quão, sabe,
00:16:21abstrata ela fica em comparação com uma geração normal de IA.
00:16:24E o que você vê aqui é um exemplo de alguns dos sites que foram
00:16:28criados usando esta habilidade. E logo de cara,
00:16:31você percebe que é um pouco diferente, certo? Quer dizer, não é de explodir a cabeça,
00:16:36mas imediatamente diferente, e o diferente é bom.
00:16:38Quanto menos parecer com todo template de SaaS, melhor.
00:16:41E muitos deles incluem coisas como animações de scroll e, sabe,
00:16:46não estamos vendo bento boxes repetidamente.
00:16:47Então esta é uma habilidade legal, digamos, complementar, que você pode querer pelo
00:16:52menos testar e ver como ela se sai em comparação com as suas gerações normais
00:16:56do Claude Code. Agora, a ferramenta número nove vai parecer muito simples para muitos de vocês,
00:16:59mas vocês ficariam surpresos com a quantidade de pessoas que não sabem que o Google
00:17:03Fonts existe.
00:17:05O Google Fonts é um repositório gigante e gratuito de um trilhão
00:17:10de fontes diferentes que você pode usar em literalmente todos os seus projetos de código.
00:17:14Você não precisa ser escravo da Inter ou de quaisquer cinco fontes
00:17:18que o Claude Code usa para tudo.
00:17:20Você pode simplesmente ir ao Google Fonts e ele está dividido por aparência,
00:17:24por sentimento, sabe, por família, e dizer ao Claude Code: "Use esta,
00:17:29use aquela". O Claude Code também tem acesso a todas elas.
00:17:31Porque a tipografia é uma parte enorme,
00:17:34enorme de como o seu design se parece e o que transmite. Além disso,
00:17:38você pode usar o Claude Code para te ajudar a pesquisar no Google Fonts.
00:17:42Basta dizer ao Claude Code o tipo de site que você está construindo,
00:17:45o tipo de sentimento que você busca.
00:17:47E ele deve te dar um exemplo ou umas cinco fontes para você olhar.
00:17:50Você pode realmente ver isso em tempo real aqui. Novamente,
00:17:53você não quer deixar tudo ao acaso e depender apenas de como
00:17:57o Claude está se sentindo naquele dia quanto à fonte que vai te dar, porque
00:18:01vai ser Inter. É sempre Inter, sempre. E por último, mas não menos importante,
00:18:05ferramenta número 10, Playwright CLI.
00:18:06Agora, o Playwright CLI não é uma ferramenta de design propriamente dita,
00:18:10embora seja algo de que já falamos no passado com o Skill UI e
00:18:13sua capacidade de ir lá e tirar capturas de tela de páginas web.
00:18:15Então você pode usá-lo como uma espécie de ferramenta de pesquisa e ideação.
00:18:19O que eu realmente quero focar, no entanto,
00:18:21é na ideia de forma e função e que, quando construímos coisas no front-end,
00:18:25pense em algo tão simples como uma página de envio de formulário,
00:18:27nós vamos ter que testá-la.
00:18:29Teremos que garantir que essas coisas realmente funcionem.
00:18:32E a maneira mais fácil de fazer isso em escala é o Playwright CLI, não o Playwright MCP.
00:18:36O CLI é muito mais eficaz.
00:18:38E a forma como fazemos isso é: uma vez que você cria suas coisas de design front-end,
00:18:41tudo o que você precisa fazer após instalar a ferramenta CLI é dizer ao Claude Code,
00:18:44"Quero que você teste cada interação nesta página usando o Playwright CLI".
00:18:49Ele criará uma série de instâncias diferentes do Chrome.
00:18:52Você pode fazer com interface (headed) se quiser realmente vê-las, ou sem (headless).
00:18:55Assim fica invisível e ele testará por conta própria.
00:18:57Isso faz com que todo o processo de design front-end seja muito mais rápido porque
00:19:02acho que todos já passamos por isso: adicionamos algo e depois queríamos ver.
00:19:05E depois queremos testar e demora uma eternidade,
00:19:06especialmente coisas como envios de formulário,
00:19:08onde há toneladas de casos extremos sobre como algum usuário estranho vai chegar
00:19:13e realmente inserir suas informações.
00:19:15Então, essas são as minhas 10 habilidades, plugins e CLIs favoritos
00:19:20relacionados a design para o Claude Code. Espero que pelo menos alguns tenham sido novos para você. Quer dizer,
00:19:24o Skill UI, tomara que sim, tipo, três pessoas conhecem essa ferramenta. Então, ah,
00:19:29mas sim, o espaço de design front-end,
00:19:31eu acho super interessante com o Claude Code porque ele é muito ruim nisso sob um
00:19:36ponto de vista de bom gosto.
00:19:37Embora eu odeie dizer até a palavra "gosto" hoje em dia, porque é tudo de que as
00:19:40pessoas falam, mas como o Claude Code é ruim nisso,
00:19:42isso deve ser algo bom para você, o indivíduo, certo?
00:19:46Porque esse é um espaço agora onde você pode se diferenciar do resto
00:19:50e, sempre que você puder se diferenciar de todos os outros que estão aderindo ao
00:19:55Claude Code hoje em dia, isso é uma coisa boa.
00:19:57E essas habilidades e ferramentas podem te ajudar a fazer isso. Então, como sempre,
00:20:00me diga o que você achou.
00:20:01Não deixe de conferir o Chase AI Plus se quiser ter acesso à masterclass,
00:20:04e a gente se vê por aí.