00:00:00Por que a passagem do design para o código ainda é a parte mais problemática de criar com IA?
00:00:04Você pensaria que, a esta altura, haveria uma maneira limpa de projetar algo,
00:00:06alterá-lo e fazer com que o código fosse atualizado.
00:00:08Mas todas as ferramentas que nossa equipe testou ou fazem design ou fazem código. Nunca ambos.
00:00:13Stitch e Bolt são do tipo "prompt para código". Não há uma tela de design para a qual você possa voltar e editar.
00:00:17O MCP do Figma é apenas leitura, então a IA pode extrair designs dele, mas não pode projetar nele.
00:00:22E se você estiver usando um agente de codificação diretamente, cada mudança no design exige um novo prompt do zero.
00:00:26Então, quando o Pencil.dev começou a ganhar força prometendo ser uma ponte bidirecional entre
00:00:31design e código, isso chamou nossa atenção. Mas quando realmente começamos a construir com ele,
00:00:35a ponte não era tão perfeita quanto esperávamos. E o que começou como apenas o teste de uma ferramenta,
00:00:40acabou fazendo nossa equipe ir muito mais fundo do que o planejado para fazer esse fluxo de trabalho funcionar.
00:00:44Então, você provavelmente já ouviu falar do Pencil.dev,
00:00:47a nova ferramenta de design com IA que tem ganhado muita popularidade entre os designers ultimamente.
00:00:51Basicamente, é uma ponte entre as ferramentas de design populares, que são especializadas em projetar,
00:00:56e as ferramentas de desenvolvimento de IA, feitas sob medida para implementar esses padrões de design.
00:01:00Ele se conecta a todos os IDEs de agentes populares e contém muitos recursos que
00:01:04realmente tornam o fluxo de design para código mais fluido, como geração de componentes,
00:01:08suporte a bibliotecas de UI e geração automática de classes CSS.
00:01:11Para quem usa o Figma, a interface pode ser a mais próxima que existe dele.
00:01:15Atualmente é gratuito e nossa equipe o baixou para testar.
00:01:18Pegamos o app de desktop e, com ele, vieram opções para conectar a todas as
00:01:23plataformas de IA que tínhamos instaladas. Nós o conectamos ao Claude Code porque era o que estávamos
00:01:27usando como ferramenta principal, e o Pencil.dev basicamente usa plataformas de codificação por IA como
00:01:32o Claude Code e o Codex nos bastidores. Assim que o app de desktop foi instalado,
00:01:36o MCP foi configurado automaticamente para o Pencil.dev e todas as ferramentas apareceram no
00:01:41Claude Code imediatamente. Agora, uma vez configurado, todos os modelos da OpenAI e Anthropic estavam disponíveis
00:01:46no chat. Escolhemos o Opus 4.6 entre todos os modelos. Esta ferramenta tem capacidades de
00:01:51design poderosas. Ela mantém os arquivos de design como um arquivo ".pen" dentro da pasta do projeto, o que
00:01:56é basicamente um formato baseado em JSON que você também pode rastrear versões com o Git. Mas o recurso
00:02:01que realmente o diferencia de outras ferramentas é sua capacidade de agir como uma ponte bidirecional entre
00:02:06o agente de codificação e o design no aplicativo. Mas não era exatamente o que esperávamos quando pensamos
00:02:10no que seria essa sincronização bidirecional. Supusemos que o Claude ou qualquer agente de IA sincronizaria
00:02:16automaticamente o design com o código e vice-versa, mas não foi assim que funcionou. Tivemos que solicitar manualmente a
00:02:21sincronização porque ele não sincroniza automaticamente o design com o código, ponto em que ele analisava o design seção
00:02:26por seção e o implementava no arquivo HTML. O resultado correspondia exatamente ao visual do design na tela,
00:02:32mas achamos que fazer isso repetidamente após cada modificação de design era muita sobrecarga.
00:02:37Nossa equipe estava trabalhando em uma landing page para um estúdio de direção criativa que já havíamos
00:02:41projetado usando o pencil.dev conectado ao Claude Code e, pelo que pudemos ver, era um site
00:02:46sólido, com uma direção criativa que transparecia claramente, exatamente como pretendíamos. Implementamos o
00:02:51design usando o Claude uma vez e o sincronizamos com o projeto Next.js em que estávamos trabalhando, mas havia
00:02:56muitos elementos na página que não gostamos e precisavam de modificações. Precisávamos mudar muitas
00:03:01coisas no projeto repetidamente, mas não podíamos ficar indo ao Claude e dizendo para sincronizar de novo
00:03:06e de novo com o projeto implementado, porque essa é uma tarefa repetitiva. Então, o que fizemos foi
00:03:10criar um script para resolver esse problema. Este script usou várias bibliotecas JavaScript feitas
00:03:15para monitorar arquivos em busca de alterações. Ele também tinha períodos de intervalo para evitar que o Claude fosse
00:03:20acionado repetidamente, desperdiçando tokens e fazendo com que a sessão atingisse seus limites. O propósito de
00:03:25todo o script é ficar observando o arquivo ".pen" que contém o design e, sempre que houver uma
00:03:29mudança no arquivo, ele aciona o CLI do Claude com um prompt contendo as instruções de como sincronizar com o projeto.
00:03:34Mas o período de intervalo foi adicionado, o que criou um espaço entre cada salvamento para não sincronizar diretamente
00:03:39todas as pequenas mudanças de uma vez. Agora, para usá-lo, bastava rodar o comando "npm run sync" e o
00:03:44worker começava imediatamente a monitorar o arquivo ".pen" com nosso design. Se modificássemos
00:03:49qualquer coisa com este script rodando, sempre que pressionássemos a combinação de teclas de salvar, ele acionava
00:03:54o CLI do Claude automaticamente e começava a sincronizar essa mudança no projeto sem que tivéssemos que
00:03:59explicitamente dizer para fazê-lo. Mas antes de usar este script, você precisa realizar um passo prévio. Você deve pré-configurar
00:04:04todas as permissões necessárias para que a edição seja feita, como leitura, escrita e chamadas de ferramenta
00:04:10MCP, adicionando-as no "setting.json" dentro da pasta ".claude", porque se não fizer isso, o Claude ficará
00:04:15bloqueado no prompt de permissão indefinidamente. Sem isso, o Claude não pode fazer alterações no
00:04:20projeto e não conseguirá concluir a implementação adequadamente. Com esse script rodando, ficou
00:04:24mais fácil, pois não precisávamos mais solicitar manualmente a sincronização com o projeto. Cada iteração
00:04:29era monitorada pelo script e enviada automaticamente para o Claude para implementação. Agora, este script,
00:04:34junto com o código-fonte deste app, está disponível no AI Labs Pro. Para quem não conhece, é nossa
00:04:39comunidade lançada recentemente, onde você obtém templates prontos para usar que pode plugar diretamente em
00:04:43seus projetos, tanto para este vídeo quanto para todos os anteriores. Se você encontrou valor no que fazemos e quer
00:04:48apoiar o canal, esta é a melhor forma de fazer. O link está na descrição. Uma das
00:04:52capacidades do Claude Code é usar um sistema multiagente, que paraleliza e acelera muitas
00:04:57tarefas. Pensamos: por que não tentar a configuração multiagente com o pencil.dev? Como ele está conectado como um MCP
00:05:02de qualquer forma, tentamos usar vários agentes para a implementação seguinte, deixando cada um trabalhar em um aspecto
00:05:07diferente do app ao mesmo tempo. Usá-lo com o Claude Code facilitou as coisas porque ele pode acessar todos os
00:05:12arquivos de documentos que tínhamos como contexto, como o PRD e o guia de UI, que costumamos criar antes de mergulhar em um
00:05:18projeto. Precisávamos implementar as outras páginas do site em vez de deixar apenas a
00:05:23landing page. Pedimos para ele lidar com essa tarefa dizendo explicitamente para deixar cada agente cuidar de um
00:05:28aspecto diferente do app que queríamos construir. Então, começamos com a exploração e chamamos as múltiplas
00:05:33ferramentas MCP. Como tínhamos cinco páginas, o Claude gerou cinco agentes e deixou cada um trabalhar em uma página
00:05:39dedicada. Depois de um tempo, a versão inicial do design da aplicação foi criada. Ele gerou
00:05:44todas as páginas necessárias no app e garantiu que o design combinasse com a landing page, usando as mesmas
00:05:48fontes e estilo em tudo. Assim que o design ficou pronto, pressionamos Command + S para salvar o arquivo
00:05:54e o script entrou em ação, implementando automaticamente o design no app para acelerar
00:05:58o processo manual. Agora, o site naquele ponto, embora parecesse sólido, estava faltando algo.
00:06:03Não havia movimento na página, e precisava de animações de scroll que guiassem os olhos através do que,
00:06:08de outra forma, seria um layout estático. Para isso, recorremos ao GSAP, que é nossa biblioteca favorita devido às
00:06:14suas animações robustas em JavaScript e à facilidade de implementar animações complexas. Para isso, nós
00:06:19tivemos um prompt muito detalhado escrito em XML. Usamos XML porque os modelos do Claude são explicitamente ajustados para
00:06:26trabalhar melhor com prompts estruturados em XML, o que permite que eles analisem as instruções mais facilmente. O prompt
00:06:31continha os detalhes da tarefa, todas as dependências necessárias e todas as notas importantes,
00:06:36visando cada elemento específico e especificando exatamente como cada seção deveria se comportar, tudo em
00:06:41suas respectivas tags. Quando demos esse prompt ao Claude Code, ele fez muitas adições e incluiu
00:06:46os componentes com o movimento GSAP, além de instalar o próprio GSAP. Assim que essa parte da implementação
00:06:51foi concluída, verificamos o site. Com as animações adicionadas, o site ficou muito mais vivo e
00:06:56interativo. Toda a experiência de usar o site parecia muito diferente da versão anterior,
00:07:00que era apenas estática, sem nenhum movimento. Agora, esse prompt também está disponível em nossa
00:07:04comunidade AI Labs Pro, onde você pode baixá-lo e usá-lo em seus próprios projetos. Além disso, se você estiver
00:07:09gostando do nosso conteúdo, considere clicar no botão de "hype", pois isso nos ajuda a criar mais conteúdos
00:07:14como este e a alcançar mais pessoas. Bem, embora tivéssemos adicionado os efeitos visuais de scroll usando
00:07:19o GSAP, adicionamos outra camada com o Lenis por cima do scroll inicial do GSAP. O Lenis é uma biblioteca de
00:07:25scroll suave de código aberto e é uma das ferramentas mais populares para criar um layout mais imersivo
00:07:30em sites. Você pode estar se perguntando por que usaríamos outra biblioteca se já tínhamos animações de scroll
00:07:35configuradas com o GSAP, mas a questão é que o Lenis e o GSAP realmente se complementam.
00:07:39O GSAP controla o que acontece quando você rola a página, e o Lenis controla a aparência e a sensação da rolagem
00:07:44em si. Sem o Lenis, o scroll dá saltos entre as posições; com ele, a página flui suavemente e
00:07:49as animações do GSAP parecem mais naturais ao serem acionadas. Então, tínhamos outro prompt detalhado para
00:07:54esta tarefa. Seguimos a mesma abordagem de prompt em XML que usamos com o GSAP. O prompt do Lenis
00:07:59focou em aprimorar as animações de scroll existentes que foram adicionadas no passo anterior. O prompt
00:08:04listava as dependências, definia todas as instruções e continha uma descrição detalhada dos
00:08:09elementos, como posicionar as animações e como o comportamento deveria funcionar, terminando com as regras. Nós
00:08:13demos esse prompt ao Claude Code e deixamos que ele fizesse muitas mudanças em todo o repositório. Quando ele
00:08:18terminou de implementar tudo, verificamos o site e ele estava significativamente melhor. A principal mudança
00:08:23foi a adição de uma rolagem mais suave, tornando a navegação pelo site uma experiência muito mais imersiva.
00:08:28Com o site construído e pronto com todos os recursos, a última coisa que faltava era
00:08:32garantir que ele estivesse em conformidade com os padrões de UX antes de considerá-lo finalizado. Para isso, criamos uma
00:08:38habilidade usando um criador de skills chamada "UX Audit". Essa habilidade é voltada para verificar a qualidade dos elementos de UI,
00:08:44revisando diferentes aspectos do site e garantindo que tudo siga os padrões de UX.
00:08:49Ela continha várias fases, como coleta de contexto, análise do checklist de nove pontos e uma fase de
00:08:54relatório, onde o site era pontuado de acordo com um conjunto de critérios. Também incluía referências com o checklist de UX
00:08:59que contém os detalhes de todos os nove pontos e scripts em Python voltados para
00:09:04detectar programaticamente diferentes aspectos de problemas de UX, aqueles que o olho humano deixaria passar.
00:09:08Assim que executamos a skill de auditoria, ela compilou todos os problemas e sinalizou dois críticos, além de vários grandes e
00:09:14pequenos problemas. Os problemas críticos eram o contraste das cores. A métrica de pontuação classificou o site
00:09:19com uma nota C devido a todos os problemas identificados. Ela forneceu todas as mudanças necessárias em detalhes e,
00:09:24uma vez definidas as mudanças, pedimos para implementar as correções. Depois que todas as alterações foram
00:09:29feitas, o site, embora pudesse não parecer significativamente diferente, teve uma enorme melhora na usabilidade,
00:09:34tornando-o mais fácil de navegar e também em conformidade com o WCAG. Quando rodamos a skill de auditoria novamente, a
00:09:40classificação do site subiu de C para B, significando que todos os problemas principais foram corrigidos e restavam apenas alguns menores.
00:09:45Isso nos traz ao final deste vídeo. Se você quiser apoiar o canal e nos ajudar a
00:09:50continuar fazendo vídeos como este, pode fazê-lo usando o botão de Super Thanks abaixo. Como sempre, muito
00:09:55obrigado por assistir e vejo você no próximo.