Impeccable Faz o Claude Criar Sites Que Não Parecem IA
BBetter Stack
Computing/SoftwareSmall Business/StartupsInternet Technology
Transcript
00:00:00Este é o Impeccable, uma ferramenta de design que oferece ao seu sistema o conhecimento profundo
00:00:05necessário para criar sites incríveis, detectando 37 anti-padrões de design para impedir que sua IA
00:00:12produza aquele design genérico que você já viu tantas vezes. Ele até permite que
00:00:17humanos façam ajustes precisos de design no navegador. Mas será que é só mais uma ferramenta de IA hypada
00:00:22que te dá arquivos markdown e queima seus tokens, ou é realmente útil? Inscreva-se e vamos
00:00:28descobrir. Se você viu meu vídeo sobre o Superpowers, o plugin que ajuda o Claude a escrever código melhor,
00:00:36bem, isso é como aquilo, mas para design, de um jeito bom. Ele oferece um fluxo de trabalho estruturado para ajudar a IA
00:00:42a produzir designs e sites incríveis, não importa o agente ou sistema criado por Paul Backhouse,
00:00:47um engenheiro de produto independente que fez o JQUI, se você for velho o suficiente para lembrar o que é isso,
00:00:53e tem tuitado sobre o progresso do Impeccable por tanto tempo que tenho certeza de que
00:00:58isso é parte do que o tornou tão popular. Então, vamos testar. Vou construir uma página
00:01:02inicial para minha ferramenta de filme cinematográfico usando o Impeccable para pegar os designs que existem na minha cabeça e colocá-los
00:01:08na tela. Veremos como isso vai. Vou usar quatro subcomandos principais: teach (ensinar), shape (moldar),
00:01:14craft (criar) e iterate (iterar). Bem, iterate não é exatamente um subcomando, mas fará mais sentido mais adiante
00:01:19no vídeo. Vamos lá. Já instalei o skill Impeccable usando for sales skill.sh e
00:01:25criei um diretório em branco, que é onde todos os arquivos de código e design ficarão. Então, vamos
00:01:29abrir o Claude Code e a primeira coisa que vou fazer é executar o subcomando Impeccable teach, que
00:01:34vai ensinar para quem é este produto, e ele deve criar um arquivo project.md que conterá
00:01:40coisas importantes como o propósito do produto, identidade da marca e princípios de design. Então, se apertarmos Enter,
00:01:46ele me diz que o diretório do produto está vazio e passamos por algumas perguntas da primeira rodada. Agora,
00:01:51a coisa importante a perceber aqui antes de continuar é a diferença entre uma marca e
00:01:55um produto. O estilo de design do produto é algo assim, com fontes sans-serif e uma hierarquia
00:02:00semi-bold, que é perfeito para um utilitário ou app, enquanto o estilo de design da marca tem mais um
00:02:05display serif, mais itálico, e é ideal para um editorial/revista. Há mais informações
00:02:10sobre as diferenças no site do Impeccable, mas para o meu caso de uso específico, isso será
00:02:15um produto. Então, agora respondi às três perguntas, vou apertar Enter e ele
00:02:19vai me apresentar mais algumas perguntas como personalidade, referências e público. Então agora
00:02:24respondi a essas três perguntas de acompanhamento, dando os nomes dos sites que gosto do visual, bem como
00:02:28o público. Depois de responder a essas perguntas, o Impeccable cria um arquivo product.md e nos dá
00:02:33um resumo aqui. Agora, nesta fase, ele pergunta se queremos executar o Impeccable document para criar um
00:02:38arquivo design.md ou disparar o Impeccable shape, que nos ajudará a criar uma linguagem de design para nossa
00:02:43página inicial. Por enquanto, vou pular para o Impeccable shape porque quero ter uma ideia do design
00:02:48primeiro, antes de criar o documento de design. Então, assim que apertamos Enter, temos outra rodada de perguntas para
00:02:53nos ajudar a chegar a um briefing de design. Agora, em alguns casos ou ao usar alguns sistemas, o Impeccable
00:02:59criará algo chamado “probe” usando um modelo de imagem, e isso será usado para aprimorar ainda mais
00:03:04o design, mas como o Claude Code não tem um modelo de imagem, vou tentar enganar o Impeccable
00:03:08para usar o GPT image 2. Vamos ver se funciona. Então, agora respondi às perguntas dele sobre estilo de cor,
00:03:14layout da página e a stack tecnológica a ser usada. Disse que tenho uma chave da OpenAI no meu terminal
00:03:20e quero usar o GPT image 2 para criar um probe. Ok, então ele terminou de fazer os probes
00:03:25e podemos dar uma olhada neles para escolher qual queremos, entre A, B e C. Então, este é o A, que eu
00:03:30realmente gostei do visual. Este é o B, que também parece bom, mas não tão bom quanto o A. E então temos o C, que
00:03:35fez um ótimo trabalho ao gerar essas imagens de IA, mas acho que o vencedor para mim é definitivamente o A.
00:03:40Então, vou passar esses detalhes e, depois de um tempo, ele me dá um briefing de design com resumo de funcionalidades,
00:03:45ações do usuário e muitas outras informações. Então, vou responder às perguntas que ele me deu
00:03:50no final e, com sorte, ele criará o design. Então, agora que ele terminou, o próximo passo era
00:03:55eu executar o Impeccable Craft, mas ele se ofereceu para fazer isso por mim, então apertei sim
00:04:00e ele está criando o site usando Astro e Tailwind. E depois de cerca de cinco minutos,
00:04:06ele terminou de codificar o design, criou todas essas páginas Astro, bem como uma configuração Tailwind
00:04:11e me dá um resumo detalhado do que realmente fez, o que parece muito impressionante. Gosto
00:04:17do fato de que posso copiar aqui para obter o URL, temos o alpha macOS primeiro, o vídeo de teste que não
00:04:23funciona, mas é ótimo que ele o tenha adicionado, e temos algumas informações sobre o produto com este efeito aqui,
00:04:28então podemos arrastar o antes e depois, o que é um toque muito legal. Temos até alguns comandos para
00:04:33instalá-lo e um FAQ na parte inferior com um acordeão que funciona. Mas existem alguns problemas
00:04:37que notei, por exemplo, este botão de fechar é muito pequeno e o layout aqui dos comandos parece
00:04:43muito estranho. Mas agora, antes de irmos para a fase de iteração, quero criar um arquivo Design.md para que eu possa fazer
00:04:49ajustes em outra sessão e ele saiba tudo sobre meu design. Então, para fazer isso, vou executar o Impeccable
00:04:54Document, que quando termina, cria um documento de design que contém tudo, desde cores
00:04:59à tipografia e até o CSS e estilos que são usados no meu projeto. Agora, a partir daqui, vamos
00:05:06iterar nosso design, o que, como mencionei anteriormente, não é um subcomando único, mas pode conter
00:05:10várias coisas. Então, se eu quisesse adicionar animação, poderia adicionar este subcomando animate a certas partes
00:05:15do projeto, poderia usar bolder para deixar certas partes mais em negrito para que possamos ver a diferença antes
00:05:20e depois, ou eu poderia usar qualquer uma dessas coisas na seção refine ou pedir ao Impeccable para polir automaticamente
00:05:25o design. E a melhor maneira é fazer esse nível de iteração em vez de dizer ao meu sistema
00:05:30qual seção quero alterar e dar a ele um desses subcomandos. Em vez disso, poderia usar o Impeccable
00:05:35Live, que está em alpha e é disparado no Claude Code executando Impeccable Live. Mas o que isso faz
00:05:39é instalar vários scripts, depois conectar ao meu site usando Astro e iniciar um servidor na porta 800
00:05:46que verifica qualquer alteração que eu faça no meu site ao vivo. Então, se eu for ao navegador e olhar meu site, nós
00:05:52podemos ver que agora tenho essa sobreposição rosa e, se eu clicar em uma seção, digamos, esta seção com texto, então tenho
00:05:58as opções que mostrei anteriormente para deixar as coisas mais em negrito, mais silenciosas, adicionar polimento e assim por diante, ou poderia simplesmente
00:06:03digitar exatamente o que quero. Então eu poderia dizer “aumente o texto aqui” e, se eu clicar em ir, isso vai
00:06:09diretamente para meu agente e atualiza o código no meu site ao vivo. Podemos ver que meu prompt foi enviado
00:06:15para o Claude Code para aumentar o texto com a parte específica do site que precisa dessa alteração.
00:06:20E posso continuar percorrendo partes do site, fazendo alterações como essa até ficar satisfeito.
00:06:25Por exemplo, nesta seção aqui com o texto de programação, que é difícil de ler, posso dar um prompt,
00:06:29escolher a quantidade de variantes que quero e deixar o Impeccable fazer seu trabalho, e agora parece muito,
00:06:34muito melhor, e foi até aplicado automaticamente a cada parte do site que mostra algum
00:06:39código. Então aí está, uma rápida passagem por como criar um site de aparência impressionante do zero
00:06:44usando Impeccable, Claude Code e GPT image 2. Sejamos honestos, esta é uma ferramenta para alguém que
00:06:50quer criar algo bonito, mas não quer se aprofundar muito nos detalhes de design. Para
00:06:55isso, eu diria para usar algo como Pencil, onde você pode ser muito preciso quanto ao posicionamento, o
00:06:59border-radius e todo o resto quando se trata de um design. Se você quiser saber mais sobre o Pencil,
00:07:04confira este vídeo que fiz anteriormente. Agora, embora o Impeccable seja agnóstico a modelos e sistemas,
00:07:10eu diria que o Claude Code provavelmente não é o melhor sistema para usá-lo, puramente porque o Impeccable
00:07:15usa muitos tokens, especialmente se você tiver um arquivo de produto e de design muito grande, que é usado
00:07:21em cada subcomando do Impeccable, e o Claude Code, combinado com os modelos Claude, é muito caro.
00:07:26Se eu tivesse a chance de realizar este experimento novamente, eu provavelmente usaria o Codex CLI ou o Codex GUI,
00:07:32que permite geração de imagens, e assim não haveria necessidade de especificar o uso do modelo GPT image 2
00:07:38porque o Impeccable faria isso automaticamente, já que ele tem ciência das capacidades do sistema,
00:07:43e os modelos Codex ou GPT são muito mais generosos com seus limites de uso. Agora vou tentar
00:07:47algo que vi muitos YouTubers fazendo, que é direcioná-los para um vídeo que foi
00:07:53recomendado pelo algoritmo do YouTube com base no seu histórico de visualização, então vá lá e confira.
Community Posts
No posts yet. Be the first to write about this video!
Write about this video