00:00:00Este é o Pencil, uma ferramenta de design que transforma prompts de qualquer assistente de IA
00:00:05em designs visualmente atraentes bem na sua frente, que você pode editar como no Figma.
00:00:10Ele suporta componentes, kits de UI, variáveis CSS e é totalmente gratuito.
00:00:15Mas com o Sketch e agora a nova ferramenta MCP do Figma fazendo algo semelhante,
00:00:19será que o Pencil é uma ferramenta que os designers realmente vão usar?
00:00:22Inscreva-se no canal e vamos conferir.
00:00:24Não é segredo que a IA não é incrível para design.
00:00:28Digo, dê uma olhada nisso.
00:00:30E embora adicionar habilidades com modelos de última geração ajude,
00:00:33às vezes você quer ajustar o design ou ter a aprovação do cliente antes de ir para o código.
00:00:38E é aqui que o Pencil entra.
00:00:40É uma ferramenta de design baseada em agentes que funciona localmente na sua IDE ou como app solo.
00:00:46E é a ferramenta perfeita para quem gosta de usar o Claude Code, como eu.
00:00:51Então, vamos para uma demonstração rápida.
00:00:52Aqui está o Pencil em toda a sua glória.
00:00:54Se você já usou o Figma, ele parecerá familiar, com as opções aqui à esquerda
00:00:59e algumas opções específicas da tela ou do frame aqui à direita.
00:01:03Este é o primeiro arquivo que você verá ao terminar de configurar o Pencil.
00:01:07Em vez de passar pelo passo um e pelo passo dois,
00:01:09vou direto para o passo três para vocês verem o que está acontecendo.
00:01:12Isto aqui é um prompt,
00:01:14e você pode clicar em "run" para executá-lo na janela de chat bem aqui.
00:01:18Mas o que vou fazer é usar meu Claude Code no terminal,
00:01:22que tem minhas habilidades, meus servidores MCP e tudo o que já estou acostumado,
00:01:26para que o Pencil possa se beneficiar de tudo isso.
00:01:29Vou copiar este prompt e, no Claude Code — aliás, feliz primeiro aniversário! —,
00:01:33vou colar o prompt e dizer para ele usar o servidor MCP do Pencil,
00:01:37só para garantir.
00:01:39Basicamente, o prompt diz ao Pencil para criar o design de um dashboard de gerenciamento de rovers
00:01:44usando os componentes disponíveis.
00:01:45Refiro-me aos componentes que existem aqui no kit de UI Lunaris.
00:01:50Voltando ao frame, você vê que ele está criando o dashboard para mim em tempo real.
00:01:56Se voltarmos ao Claude Code, podemos ver exatamente o que ele está fazendo.
00:01:59Ele está usando a ferramenta de design em lote do MCP do Pencil para popular a barra de navegação.
00:02:05Ele já concluiu o passo um, que definiu a estrutura principal do layout.
00:02:08No Pencil, você pode ver o design sendo adicionado e alterado em tempo real.
00:02:13Agora que o Claude terminou, podemos modificar o design instantaneamente.
00:02:17Devo dizer que estou super impressionado com o que ele conseguiu fazer,
00:02:20desde selecionar os ícones certos até usar as cores adequadas e este estilo aqui,
00:02:25além desses botões incríveis.
00:02:27Notei que o "show 10 records" está um pouco perto demais da borda.
00:02:31Vou clicar nele e ajustar levemente o padding.
00:02:34E essa é a beleza do Pencil.
00:02:36Qualquer alteração que queira fazer, você pode fazer como no Figma,
00:02:40mas você não fica preso a este kit de UI específico.
00:02:42Na verdade, há muitos para escolher, como Shadcn, Lunaris, Halo, Nitro,
00:02:48e há muitos outros além desses.
00:02:49Se eu clicar no Shadcn, aparecem mais opções na área de temas
00:02:54para mudar para o modo escuro, alterar os temas — como amarelo para os botões —
00:02:58e até mudar o plano de fundo geral.
00:03:01Mas também existem kits de UI que posso usar para me guiar no design.
00:03:05Por exemplo, vamos fazer algo completamente do zero.
00:03:08Vou clicar aqui e, por padrão, ele usa o chat,
00:03:11mas posso copiar isso e levar para a janela de chat.
00:03:13Mas antes, vou em "File", "New" para ter uma tela em branco.
00:03:17Vou dar uma largura de mais de 800, talvez 1024, e aumentar um pouco a altura.
00:03:24Com o frame selecionado, vou pedir para o Claude usar o guia de estilo.
00:03:28Depois disso, darei o prompt: "crie um site
00:03:32para uma padaria francesa em estilo boêmio, pegando imagens do Unsplash", e por aí vai.
00:03:36Vou dar enter e ver o que ele produz.
00:03:39Não tenho ideia do que esperar, vamos ver o que sai.
00:03:42Como estou usando a habilidade de superpoder,
00:03:45ele me faz algumas perguntas complementares sobre o site.
00:03:47E agora ele começou a trabalhar.
00:03:49Ele sugeriu um frame mais largo do que o que eu coloquei inicialmente.
00:03:52Vou acelerar o vídeo para as coisas irem mais rápido.
00:03:55Parece que o Claude terminou as três páginas que disse que ia criar.
00:03:59Olhando para os designs, isso é sinceramente impressionante.
00:04:02Sim, há coisas que eu mudaria,
00:04:06mas se eu visse isso em um site, não presumiria que foi criado por uma IA,
00:04:10desde o logo até as imagens usadas e todo o layout.
00:04:14Isso está incrível.
00:04:16E não estou preocupado com os pequenos problemas,
00:04:17porque basta clicar duas vezes no que eu quiser mudar.
00:04:20Aqui posso arrastar o texto assim e alterá-lo um pouco.
00:04:24E pronto. Está praticamente resolvido.
00:04:26Vou pedir ao Claude para transformar isso em um site funcional.
00:04:30E aqui está. Este é o site.
00:04:32Não esperava que ele adicionasse esse fundo de pão,
00:04:35já que não estava nos designs, mas tudo bem.
00:04:38Vamos rolar para baixo.
00:04:39Ele reproduziu quase tudo fielmente, o que é muito impressionante.
00:04:44Vamos para a página "Nossa História" e... perfeito.
00:04:47Está exatamente como nos designs, com o texto bonito e os três passos,
00:04:52e o fato de usarem apenas ingredientes que eles mesmos comem, o que é bem legal.
00:04:56Todas as imagens estão no lugar e até o menu está muito bom.
00:05:00Gostei da linha divisória horizontal que ele adicionou ao final de cada item.
00:05:04A beleza desse design é que, por ter sido criado por IA,
00:05:07posso conectá-lo a qualquer banco de dados. Ou seja, ele usa dados reais.
00:05:10Posso usar outras ferramentas ou habilidades MCP para melhorar a qualidade do site.
00:05:15Sem falar que, se eu já tivesse designs no Figma,
00:05:18poderia ir em "File" e importar do Figma para usar no Pencil também.
00:05:22Deixei um link para este site na descrição para você testar por conta própria.
00:05:25Eu me diverti muito criando designs via prompts
00:05:29e vê-los ganhando vida bem diante dos meus olhos, com a opção de editá-los depois, parece mágico.
00:05:35Além disso, os arquivos do Pencil são puro JSON,
00:05:38o que facilita para um agente de IA entender e traduzir para código.
00:05:42Mas, apesar de incrível, o Pencil não é perfeito.
00:05:46Tive um problema com o chat de build, que por algum motivo não respondia.
00:05:50A sobreposição de geração em novos arquivos às vezes não sumia sem salvar ou reiniciar o app,
00:05:56e ele pareceu um pouco lento em certas ações.
00:05:59Mas honestamente, são detalhes que a equipe provavelmente está resolvendo agora,
00:06:04além da habilidade de criar ou importar kits de UI personalizados, como os do Tailwind Plus.
00:06:11E lembre-se: esta ferramenta é totalmente gratuita para usar agora.
00:06:15Aproveite, pois não será assim para sempre, já que a empresa tem investidores por trás.
00:06:19Não sou designer. Pois é, surpresa!
00:06:22E embora eu não tenha testado a ferramenta MCP do Figma nem a do Sketch, pelo que vi online,
00:06:28o Pencil parece muito mais fácil de configurar pela integração fluida com várias ferramentas.
00:06:34Por falar em fluidez, se você quiser que o Claude Code desenhe UIs de terminal na hora
00:06:39em vez de programar tudo à mão, confira este vídeo sobre o Claude Canvas,
00:06:42que mostra exatamente como fazer isso.