00:00:00Para mim, o "vibe designing" e o "vibe coding" são o que mais se aproximou do Flash em duas décadas.
00:00:07Este é Tom Cracker, o CEO da Pencil.
00:00:10Pencil.dev
00:00:11E isso se chama Pencil.
00:00:13Um novo app chamado Pencil.
00:00:14Pencil.dev
00:00:15Sinto que estamos descobrindo novas experiências de usuário para interagir com a IA que nunca vimos antes.
00:00:22Esses cursores e varreduras são apenas a ponta do iceberg, e veremos muito mais disso.
00:00:29O Banana e esses geradores criam fotos ótimas, mas e quanto às ilustrações?
00:00:34Acho que as ilustrações serão enormes na segunda metade de 2026.
00:00:39Existem modelos específicos que são significativamente melhores que outros em design?
00:00:45Acho que o meu favorito é...
00:00:48Vou te fazer uma pergunta para quebrar o gelo.
00:00:51Antigamente, você era muito familiarizado com o Adobe Flash.
00:00:54Você ainda sabe ActionScript?
00:00:56Sim, com certeza. Eu cresci usando Flash.
00:00:59Foi minha primeira grande oportunidade na tecnologia e comecei a usar o Photoshop aos sete anos.
00:01:09Meus pais tinham uma agência de design, então eu ficava lá depois da escola com os designers e eles me ensinavam Photoshop, Illustrator e CorelDRAW na época; era tudo voltado para design impresso.
00:01:26A internet surgiu no final dos anos 90 e me interessei por coisas interativas. Comecei com HTML, DHTML e tudo aquilo, até que o Flash apareceu, na versão 3.
00:01:45Eu pensei: "Uau, que caramba é isso?"
00:01:48Tinha movimento, animação, áudio e tudo mais.
00:01:55Me apaixonei imediatamente, comecei a criar sites em Flash e acabei ganhando um prêmio em uma conferência em Praga chamada Junior Internet.
00:02:07Se você perguntar em Praga sobre a Junior Internet, muitos lembram que ela lançou várias carreiras. O Flash era o único jeito de transmitir vídeo online na época.
00:02:25Então comecei a criar players de vídeo para diversos portais de notícias e coisas do tipo.
00:02:29Essa foi minha introdução à Adobe, porque usávamos muitos servidores de mídia Flash. Eles notaram e me ofereceram um emprego como evangelista de Flash da Adobe.
00:02:44Foi assim que tudo começou. Depois, passei a criar ferramentas de design, dar palestras em conferências e conversar com muitos designers.
00:02:55Essa foi a origem da minha história.
00:02:59Vi alguns vídeos seus em palestras de eventos de games também.
00:03:06Você também criou jogos no Adobe Flash?
00:03:09Sim, com certeza.
00:03:10O Flash era usado para muita interatividade, inclusive games. Tornei-me uma espécie de evangelista de jogos na Adobe, ajudando empresas a levar seus apps e jogos para o Flash.
00:03:26Eu falava em conferências de games e ajudava desenvolvedores a portar jogos para o Flash, como o famoso Machinarium.
00:03:40Foi um dos primeiros jogos portados do Flash para o iOS através do Adobe Air, e foi um marco ver o Flash rodando no iPad.
00:03:55Foi um momento marcante.
00:03:56Tornou-se jogo do mês na App Store da Apple e ficou incrivelmente popular.
00:04:04Você também fazia parte da comunidade Newgrounds naquela época?
00:04:08Não, o que é isso?
00:04:11Newgrounds era o site onde todos os jogos e filmes em Flash eram listados.
00:04:18Era muito popular antes do YouTube.
00:04:21Achei que fosse o Miniclip.
00:04:23Ah, o Miniclip! Eu me lembro do Miniclip.
00:04:24O Miniclip era o meu favorito.
00:04:28Mas eu passava meus dias em sites de premiação como o FWA e outros.
00:04:35Agora estamos voltando muito na história da internet e da web interativa.
00:04:43Imagino que esses foram os blocos iniciais que levaram ao Pencil.
00:04:49Mas você também criou um script ou ferramenta chamada DrawScript no Illustrator, certo?
00:04:55Pode falar sobre isso?
00:04:56Com certeza. O DrawScript era um plugin para o Illustrator que permitia converter desenhos basicamente em JavaScript.
00:05:18A ideia era pegar isso e redesenhar o que você tinha através de código.
00:05:19Pesquisei sua jornada de design para código. O que te fez querer que os designs fossem codificados?
00:05:35De onde veio esse desejo?
00:05:37Bem, não havia nenhuma solução para levar desenhos para o código.
00:05:45Você queria ter ícones e outras coisas, e o SVG era muito limitado na época, talvez nem fosse muito suportado, mas você queria desenhar coisas no canvas do HTML.
00:06:04Isso permitia fazer isso, porque uma vez no código, você podia tornar tudo interativo e transformar em jogos, por exemplo.
00:06:15Dava para trabalhar com isso, animar, fazer se mover.
00:06:23Então, essa ferramenta foi a porta de entrada para isso.
00:06:29Enquanto estava na Adobe, você também trabalhou no Adobe XD.
00:06:34Qual era a visão original para ele?
00:06:36Era para ser um substituto do Dreamweaver ou como o XD surgiu?
00:06:42Foi na época do Sketch, e o Photoshop também era muito usado para criar sites.
00:06:54Percebemos que seria ótimo ter algo novo, projetado especificamente para criar sites e apps, especialmente na era em que todos faziam apps móveis.
00:07:12Queríamos um olhar novo sobre isso, partindo de princípios fundamentais.
00:07:18Pensamos: "E se pudéssemos começar do zero?" Definimos que deveria ser leve, acessível, rápido e que permitisse desenhar várias pranchetas.
00:07:35No Photoshop, você tinha só uma coisa no início. Mas o que se queria era mostrar o fluxo inteiro através de várias telas diferentes.
00:07:49O Adobe XD foi a ferramenta projetada especificamente para esse propósito.
00:07:54A prototipagem também fazia parte disso.
00:07:57Você podia conectar as telas, adicionar áreas roláveis e tudo mais.
00:08:03Pois é.
00:08:05Vou pular um pouco para o Pencil, pois é legal ver sua jornada da Adobe até construir algo que é como o XD, mas usa muita IA.
00:08:17Em que momento você percebeu o poder dos LLMs e dos agentes?
00:08:24Houve algumas startups no meio, mas acabei mergulhando no Cursor e no Claude Code como todo mundo, e percebi: "Como eu digo ao LLM que este botão deve ser do jeito que imaginei?"
00:08:52Ou que há uma barra de navegação que deve ser fixa no topo, com tais botões e tal.
00:09:00Eu sentia que estava escrevendo ensaios de texto para os LLMs tentando explicar o que eu tinha em mente visualmente.
00:09:09Olhei em volta e não havia nenhuma solução.
00:09:11Procurei no marketplace do VS Code e não havia nada onde você pudesse simplesmente desenhar algo e dizer ao LLM: "faça isso".
00:09:23Isso foi antes de todos usarem MCPs. A ideia inicial foi: os LLMs são ótimos lendo dados estruturados e transformando-os em código, então usei um formato JSON.
00:09:38Criei um protótipo e lancei.
00:09:41Isso foi em maio de 2025 e viralizou.
00:09:45Teve um milhão de visualizações nas redes, umas 850 mil no X e umas 400 mil no LinkedIn.
00:09:53Eu pensei: "Uau, parece que não é só um problema meu, outras pessoas também querem essa ajuda".
00:10:03Ninguém estava oferecendo essa ponte de um visual rápido para o código.
00:10:10Depois de construído, isso me deu outras ideias, como o fato de que eu poderia gerar esses designs.
00:10:23Não era apenas eu desenhando, mas eu podia dizer ao LLM: "ei, desenhe isso para mim, gere aquilo".
00:10:30Foi quando percebi que estávamos no limiar do "vibe designing".
00:10:39A demonstração que viralizou foi aquela do "design mode" para o Cursor?
00:10:42Sim, chamava-se "design mode for Cursor".
00:10:45Sim, e basicamente ainda temos isso hoje.
00:10:49É um canvas dentro dos IDEs baseados em VS Code, como Cursor, Windsurf e Digravity.
00:10:59É basicamente um editor personalizado e visual dentro do seu IDE.
00:11:07Você faz o que quiser, seleciona algo no canvas e pode copiar e colar no chat ou apenas apontar para o objeto que ele reconhece a seleção.
00:11:21Ele extrai as informações dali e as transforma no que você quiser.
00:11:28Não importa se é React ou outra biblioteca; é uma representação agnóstica de framework onde você cria a ideia e a transforma no que preferir.
00:11:45Isso significa que ele usa CSS puro ou integra bibliotecas como Tailwind ou shadcn?
00:11:52Você escolhe. Por baixo, é apenas um JSON estruturado que define o visual. Temos regras integradas para conversão para Tailwind, por exemplo.
00:12:10Mas você pode escrever suas próprias regras para o seu código específico. Esse arquivo ".pen" vive no seu repositório Git.
00:12:23Assim, qualquer engenheiro ou agente de IA tem acesso direto e pode converter no que quiser.
00:12:32Dá para criar regras próprias e torná-lo realmente seu.
00:12:39Acho que esse é o ponto principal.
00:12:41A primeira vez que usei o Pencil, achei mágico e estou tentando entender como funciona tecnicamente por trás das cenas.
00:12:49Vi o arquivo JSON no arquivo ".pen", mas não sei como ele traduz isso para a interface onde posso arrastar caixas e mudar cores.
00:13:01E como o agente consegue entender e fazer exatamente a mesma coisa.
00:13:05Como você chegou nessa união entre o design humano e o agente projetando o mesmo arquivo?
00:13:12Várias coisas. Queríamos construir um ambiente incrivelmente familiar que você pudesse usar desde o primeiro minuto.
00:13:23Para que a pessoa se sinta orientada nesse canvas onde se pode dar zoom.
00:13:29Com as propriedades de um lado, o painel de camadas do outro... para ser super familiar.
00:13:36Mas, ao mesmo tempo, abriu portas para coisas que ninguém resolveu antes, como: "Como eu converso com o design?"
00:13:47Isso nos deu oportunidades de inovar. A última que mostramos no vídeo foi o enxame de agentes trabalhando juntos no design, como uma orquestra.
00:14:02E honestamente, há muito mais que pode ser feito a cada dia.
00:14:10Descubro coisas novas que antes eram impossíveis, primeiro porque cada novo modelo de IA abre novas oportunidades.
00:14:24E também porque surgem novas ideias ao falarmos com os usuários e vermos como eles interagem.
00:14:32Agora eles querem controlar remotamente e todo tipo de coisa... é muito mais do que imaginamos.
00:14:39É meio louco.
00:14:40Fiquei curioso sobre qual modelo você começou a usar quando percebeu que eles poderiam ser bons em design, já que os primeiros não eram.
00:14:50Acho que eles focaram em adicionar mais dados de design no treinamento.
00:14:54Sim, ainda há uma lacuna.
00:14:57Mas acho que melhora a cada lançamento de modelo.
00:15:01Acho que começamos com o Sonnet 3.5 ou talvez o 3.7.
00:15:10No começo, você tinha que explicar muito como as coisas deveriam parecer.
00:15:18Conforme progredimos, chegamos na fase em que você só diz "desenhe um site".
00:15:27E ele provavelmente fará um trabalho razoável.
00:15:31A segunda grande mudança, com a evolução de modelos e agentes, foi a "elicitação", onde ele te faz perguntas extras: "O que você realmente quer?"
00:15:46É muito parecido com ser cliente de uma agência. A primeira coisa que um designer faria seria uma entrevista para extrair o máximo de informação e criar a coisa certa.
00:16:10Não podíamos esperar isso antes, mas esse diálogo que está acontecendo agora com os agentes é uma grande libertação.
00:16:22No início era: "desenhe algo", ele fazia e você pensava: "não era nada disso".
00:16:29Agora, pelo diálogo, ele extrai o que você quer e como quer.
00:16:34E assim ele chega cada vez mais perto de fazer a coisa certa.
00:16:40Essa é uma diferença crucial.
00:16:43Imagino que você tenha testado muitos modelos com o Pencil.
00:16:48Existem modelos específicos que são significativamente melhores que outros em design?
00:16:54Meu favorito é o Opus 4.6. Observando a comunidade, ele é o padrão atual, o estado da arte para design.
00:17:10Funciona muito bem com dados estruturados também.
00:17:15No layout, ele comete a menor quantidade de erros.
00:17:22Para outros modelos, temos que corrigir alguns comportamentos.
00:17:28E tudo bem. É uma questão de descobrir as nuances e dizer ao agente: "ei, você errou aqui, faça mais uma rodada".
00:17:42E geralmente funciona. O único desafio do Opus é que ele é um pouco lento, embora seja incrível.
00:17:54A primeira vez que vi a mágica real foi quando o Composer saiu no Cursor e pensei: "Uau, isso é rápido".
00:18:04Ele desenha conforme eu penso nas coisas.
00:18:08O que espero ver no futuro é que, embora ainda falte melhorar a qualidade...
00:18:19Espero que os laboratórios agora foquem na velocidade.
00:18:24Isso está começando a acontecer com o Cerebras, o Spark e tudo mais.
00:18:30Torço para que a próxima fase foque na velocidade, porque isso permite ao designer permanecer no fluxo (flow).
00:18:42Muitas vezes, é mais importante fazer várias repetições rápidas do que acertar de primeira.
00:18:51Você quer estar envolvido no processo, e modelos mais rápidos permitem isso.
00:18:58Para nós, esse é um princípio importante ao criar ferramentas: manter você no fluxo.
00:19:06Essa é a diferença: em outras ferramentas de "vibe coding", você escreve o prompt, vai tomar um café e volta 10 minutos depois torcendo para que ele tenha criado o que você queria.
00:19:19O "vibe designing" é diferente.
00:19:21Você quer ver as coisas acontecendo em tempo real.
00:19:24Por isso colocamos cursores que se movem, para você ver o que está acontecendo e como o modelo está pensando.
00:19:33Ser comunicativo com o usuário é vital quando as coisas demoram um pouco mais do que deveriam.
00:19:42Mas espero que os modelos fiquem tão rápidos que tudo apareça instantaneamente.
00:19:49O paralelismo também é uma grande evolução.
00:19:57Talvez o modelo seja lento, mas se ele puder fazer várias coisas ao mesmo tempo, isso deixa de ser um bloqueio.
00:20:08Não tem problema demorar, desde que você possa trabalhar em várias áreas do canvas simultaneamente.
00:20:17Não é preciso esperar os agentes terminarem.
00:20:23Você pode começar a mexer no design enquanto o agente ainda está trabalhando nele, o que é muito legal no Pencil.
00:20:32Dá para reorganizar as coisas enquanto ele trabalha, e é por isso que o "vibe designing" faz tanto sentido comparado ao código puro.
00:20:45Você não pode tocar no código enquanto o agente trabalha, senão pode estragar tudo e não compilar.
00:20:54Mas aqui, como as coisas são separadas no canvas, você pode fazer isso.
00:21:01O que mais gosto na jornada do Pencil é que você tem muito conhecimento de domínio no mundo do design.
00:21:10Muitas ferramentas modernas de "vibe coding" focam no "podemos fazer?" em vez do "devemos fazer?". Já vi fluxos terríveis, mas gosto da sua abordagem de ajudar o humano em vez de substituí-lo.
00:21:25Essas são as ferramentas de IA que me atraem. É uma abordagem muito legal.
00:21:30Com certeza. Conversei com usuários que dizem sentir que agora têm um grupo de designers juniores trabalhando com eles, permitindo orquestrar tudo melhor e mais rápido.
00:21:51Antes, gastava-se horas ajustando preenchimentos, margens, tamanhos de fonte...
00:22:01Você passava muito tempo nisso, embora a visão já estivesse na sua cabeça.
00:22:07Era uma maratona. Agora você pode dar um tiro de velocidade. Como você já visualiza o resultado, só precisa materializá-lo.
00:22:20Sobre os agentes paralelos, você quer dizer vários agentes no mesmo design ou em designs diferentes?
00:22:38Tudo isso. No início, pensamos no paralelismo para explorar variações do mesmo design em diferentes partes do canvas.
00:22:53Mas pensei: por que não vários agentes na mesma página? E é possível. Se bem orquestrados, eles dividem o trabalho sem conflitos, diferente do código.
00:23:15Eles só precisam ter o mesmo entendimento do objetivo. Eles dividem as seções: um trabalha no topo (hero), outro no meio e o terceiro no rodapé.
00:23:32Dá para rodar vários agentes por página, como mostrei no último vídeo no X, onde havia três páginas e dois agentes para cada uma.
00:23:50Vi um artigo da Cognition que diz para não usar vários agentes por causa do contexto. Eles deram o exemplo de um jogo do Mario onde as gravidades seriam diferentes por falta de conhecimento compartilhado. Como você resolveu isso?
00:24:15Mágica. Bom, foram muitas iterações. Você precisa continuar investigando e, honestamente, apenas arranhamos a superfície do que é possível.
00:24:32Há muito a ser feito em otimização de contexto compartilhado, velocidade e uso de tokens.
00:24:49É um futuro empolgante. Sobre funções diferentes, é interessante, mas geralmente os agentes ficam esperando uns pelos outros.
00:25:14O paralelismo que me empolga é o de agentes que não esperam, trabalhando em paralelo como uma GPU.
00:25:30Com tantas ferramentas e modelos por aí, quais você usa no Pencil e como é a interação com o agente?
00:25:45Você diz ferramentas específicas dentro do Pencil ou externas?
00:25:49Ambas. Você usa Codex, Claude Code, Gemini? O que você usa?
00:25:57Tudo isso. Fiquei surpreso no lançamento do Pencil com a quantidade de combinações que as pessoas queriam usar.
00:26:08Nosso Discord explodiu com gente perguntando se podia usar com tal modelo que eu nunca tinha ouvido falar.
00:26:17Queriam usar com diferentes agentes, CLIs e tudo mais. Fiquei surpreso com o quão vasto esse mundo já é hoje.
00:26:30Estamos apenas no começo e veremos todo tipo de combinação.
00:26:38No Pencil, você pode rodar um quadro no Codex, outro no Opus, um terceiro no Gemini, e por aí vai.
00:26:48É incrível poder rodar todos ao mesmo tempo para comparar e contrastar os resultados.
00:26:56Eles podem colaborar entre si, o que é bem interessante.
00:27:02Como vocês fazem o benchmark interno das capacidades de design dos modelos quando sai um novo lançamento?
00:27:14Existe uma forma automatizada, mas há muito trabalho manual envolvido porque ainda estamos no começo disso.
00:27:32Sempre que sai um modelo novo, fico empolgado para testar. Às vezes é uma nuance difícil de descrever, como a mudança do Opus 4.5 para o 4.6.
00:27:51É difícil explicar, mas quando você testa, você vê. Há um pouco mais de detalhe aqui e ali e, de repente, tudo faz muito mais sentido.
00:28:03Acho que passaremos por isso até o Opus 5.0. Também estão saindo novos modelos de imagem agora.
00:28:15Têm um pouco mais de detalhe... você não sabe explicar, mas quando vê, você sabe.
00:28:22Atualmente, se eu quiser o design de um site, posso usar o Nano Banana Pro 2, por exemplo. Existe um jeito de levar esse design para o Pencil ou é melhor começar do zero nele?
00:28:48Com certeza. Na verdade, você pode arrastar uma imagem aberta para o chat no Pencil. Pode arrastar várias imagens.
00:28:59Também pode arrastar arquivos Markdown ou de texto com suas próprias regras ou diretrizes. Muita gente está construindo coisas assim.
00:29:12É um conjunto de regras, bibliotecas e imagens para chegar no resultado. Você pode até usar a foto de uma fruta ou flor como uma imagem de referência de "vibe".
00:29:28Foi assim que criamos vários de nossos guias de estilo: usamos uma imagem de uma flor, por exemplo, para ver qual paleta de cores o modelo extraía.
00:29:43Veremos cada vez mais essa exploração e combinação. Como humanos, andamos na rua, vamos às montanhas ou ao mar e nos inspiramos.
00:30:04Você tem um estalo. Antes, no design manual, você guardava uma imagem mental daquilo.
00:30:17Ao chegar em casa e começar a desenhar, você era influenciado pelo que viu durante o dia.
00:30:25Agora, você pode simplesmente passar isso para a IA e ver o que sai.
00:30:30Ele também é capaz de criar umas animações malucas em SVG ou algo assim se você der um comando com um recurso SVG ou uma imagem?
00:30:42SVG ainda não necessariamente, mas vi alguns modelos de SVG que saíram recentemente.
00:30:49É muito interessante o que está acontecendo nessa área. E também acho que a animação é a próxima grande fronteira.
00:31:01Existe o Remotion, certo? E o Lottie e todas essas coisas. E o Replit acabou de lançar animação, né?
00:31:12Então eu acho que essa vai ser a próxima grande fronteira a ser explorada.
00:31:18Eles apenas arranharam a superfície. É legal, mas ainda não está no nível do After Effects, como um designer profissional faria uma animação incrível.
00:31:32Mas acredito que há muito potencial nesse espaço também.
00:31:36Sabe, eu vi o novo modelo de SVG e achei a demonstração muito legal, porque os modelos atuais sofrem um pouco com SVGs.
00:31:43Eles estão melhorando cada vez mais. Mas, sim, aquele modelo específico de SVG era incrível comparado ao que é possível hoje.
00:31:50Isso toca em um tópico muito interessante, que é: acho que estamos chegando ao ponto em que o layout parece ok.
00:31:57Mas sabemos que sites não são apenas um bom layout, certo? É sobre a emoção que você sente com ele.
00:32:04E isso pode ser reforçado por uma ilustração, por quebras de texto bem ousadas e talvez subtítulos.
00:32:16Então é como uma composição de texto feita de uma forma interessante ou estilosa.
00:32:22Talvez haja um vídeo em movimento, mas que serve apenas para passar uma sensação, algo abstrato ou uma imagem que se move um pouco ou elementos que deslizam ao rolar a página.
00:32:41Sim, acho que essas coisas provavelmente começarão a fazer parte do "vibe design" também, especialmente no lado das ilustrações, porque aí você pode... e quanto ao 3D?
00:32:54Muitos desses sites agora têm essas renderizações, tipo uns cubos, que mostram a estrutura de como os bytes se unem em pacotes e coisas assim.
00:33:11Já devemos ter visto vários sites assim, e essa é a próxima peça que falta, porque agora os geradores de imagem criam fotos ótimas, mas e as ilustrações?
00:33:23Acho que as ilustrações serão algo enorme na segunda metade de 2026.
00:33:30Estou animado com isso, porque sempre tive dificuldade com ilustrações no passado.
00:33:33Nunca fui muito bom em criar ilustrações com ferramentas da Adobe e tal.
00:33:37Pois é, esse é um ótimo ponto. Acho que muitos de nós conseguem apreciar o que é um bom design.
00:33:47Conseguimos até visualizá-lo em nossa mente.
00:33:49O problema é que existe essa lacuna entre nós e o computador para materializar isso.
00:33:55E o que me empolga muito é ver cada vez mais essas ferramentas ajudando a fechar esse abismo entre você e a sua visão.
00:34:04Você ainda acha que o toque humano é fundamental? Porque se confiarmos totalmente no design da IA, tudo vai acabar parecendo meio genérico.
00:34:13Você acha que o toque humano é, como você disse, buscar inspiração no mundo lá fora, chegar com a sua ideia e direcionar a IA?
00:34:22É por isso que ainda precisaremos de designers humanos no futuro?
00:34:27Sim, quero dizer, muitos produtos excelentes que usamos diariamente têm aquele elemento de "bom gosto" que é inegável.
00:34:39Isso é muito importante, porque acho que o que receberemos da IA, tanto no código quanto no design, serão resultados padronizados, que vão melhorar cada vez mais.
00:34:51Vai parecer cada vez melhor, claro, mas ainda pode faltar aquele toque final de alguém.
00:35:00E acho que isso continuará sendo muito importante.
00:35:02E esse toque final pode nem ser literalmente o passo final.
00:35:04Pode ser um processo intermediário com muitas iterações onde você permanece no controle.
00:35:11O ponto é que coisas como o paralelismo e essas ferramentas de "vibe design" e "vibe coding" permitirão que você chegue lá mais rápido.
00:35:18Sabe, a quantidade de repetições que você faz permitirá produzir coisas não apenas mais rápido, mas, no fim das contas, melhores.
00:35:28E se você olhar para a internet hoje, nem tudo parece incrível.
00:35:34Minha esperança é que vamos elevar a experiência geral do usuário em todos os lugares, em uma ordem de magnitude.
00:35:46Essa é realmente a minha esperança para o futuro.
00:35:52Pelo que vejo, essa é provavelmente a próxima fronteira.
00:35:56O que vem depois disso?
00:35:58Quem sabe?
00:35:59Ainda estamos descobrindo muitas dessas coisas diariamente hoje em dia.
00:36:05Você teria algum conselho para um designer iniciante que está entrando na área sobre como acompanhar esse mundo?
00:36:12Sim, acho que o Marc Andreessen descreveu isso muito bem.
00:36:18Vou voltar alguns passos antes de responder à sua pergunta.
00:36:23Ele descreveu como um "impasse mexicano", onde o PM aponta para o designer e para o engenheiro, e o engenheiro para o designer e o PM.
00:36:35E todo mundo acha que pode fazer o trabalho do outro.
00:36:39E eu estava pensando: historicamente, você iria para uma escola e estudaria design por quatro ou cinco anos.
00:36:46Ou iria para uma escola de engenharia e estudaria engenharia por quatro ou cinco anos.
00:36:53Como PM, talvez você tenha feito administração ou algo assim, e fosse obcecado em construir coisas e entender o comportamento do usuário.
00:37:06Mas eu me pergunto honestamente.
00:37:11O que as gerações Z e Alpha vão pensar quando tiverem que escolher uma escola ou profissão?
00:37:21Essa é a minha maior dúvida, porque acho que todo mundo está se tornando um criador, essencialmente um construtor.
00:37:29E não pensamos mais em nós mesmos necessariamente — ao menos é minha hipótese — apenas como "sou engenheiro".
00:37:39Ou "sou apenas um designer". Não estou falando da geração atual, mas da nova geração que vem aí.
00:37:46O que acho que veremos cada vez mais são solucionadores de problemas.
00:37:50Eu tenho um problema que quero resolver e vou usar as ferramentas que eu quiser.
00:37:55Sempre operei com essa mentalidade, e isso começou para mim com o Flash.
00:38:01Voltando àquela história, porque o Flash foi realmente a primeira ferramenta que permitiu ser designer e engenheiro no mesmo ambiente.
00:38:11E era algo realmente mágico.
00:38:13Obviamente, não escalou.
00:38:15Acabou quebrando em muitos níveis quando novos frameworks surgiram.
00:38:20Mas o que eu sempre sonhei era que houvesse uma volta de algo assim, onde pessoas com uma visão pudessem usar qualquer ferramenta para realizá-la.
00:38:33E o "vibe coding" e o "vibe design" são as coisas mais próximas do Flash que vi em duas décadas.
00:38:44Eu queria perguntar sobre os seus guias de estilo.
00:38:47Como vocês os gerenciam e como os constroem?
00:38:51Porque no design sabemos que todo ano a Pantone lança a "cor do ano" ou surgem tendências que todos usam no momento.
00:39:05Você imagina o Pencil sendo atualizado conforme essas tendências evoluem e mudam?
00:39:12Sim, na verdade acabamos de atualizar nossos guias de estilo no último lançamento.
00:39:16Estamos sempre renovando-os.
00:39:18Mas nunca pensei em nossos guias como algo definitivo.
00:39:22Sempre pensei neles como uma forma de dar uma ideia do que você pode alcançar aqui.
00:39:30Também serve para resolver o problema da "tela em branco" no início.
00:39:37Aquele sentimento de: "não sei como usar a ferramenta".
00:39:42Esse era realmente o objetivo.
00:39:46Mas nossa meta é documentar e abrir isso para que as pessoas criem os seus próprios guias, contribuam e compartilhem com a comunidade.
00:39:56Eu nunca me coloquei na posição de querer ser quem dita as tendências ou algo assim.
00:40:03De jeito nenhum.
00:40:03Apenas uma inspiração para que outros construam em cima e se inspirem.
00:40:09Eu mesmo — voltando ao Flash — quando comecei a trabalhar com ele, estudei toneladas de arquivos Flash para ver como as pessoas faziam as coisas.
00:40:19Essa era minha fonte de inspiração, tanto para aprender a criar quanto para entender os detalhes intrincados.
00:40:33Então espero que nossos guias de estilo sejam apenas isso: uma inspiração para os outros remixarem, mudarem e tornarem seus.
00:40:45Parece que outras empresas estão percebendo o que o Pencil fez.
00:40:51Sei que o Sketch tem o servidor MCP ou ferramentas, e o Figma também.
00:40:56O Figma também tem suas próprias ferramentas MCP.
00:40:59Como você vai se diferenciar ou se manter à frente para que essas empresas não tomem sua fatia de mercado?
00:41:07Bem, acho que... é uma pergunta interessante, mas como você diferencia o Cursor do Copilot?
00:41:17Vou devolver a pergunta para você.
00:41:20Existe uma nuance, certo?
00:41:24Existe uma diferença.
00:41:26Poderíamos colocar em palavras se investigássemos a fundo, mas há uma grande diferença, obviamente.
00:41:33Então, espero que possamos manter isso, sabe, nos manter à frente da curva.
00:41:45E como eu disse várias vezes aqui, ainda há muito a ser feito.
00:41:50E quero garantir que estejamos liderando essa inovação no lado do Pencil.
00:41:57Para criar o Pencil, você passou por um programa, acho que foi o Speedrun da A16Z?
00:42:05Sim, eu recomendo que todos considerem participar.
00:42:11Obviamente tem a YC e o Speedrun.
00:42:15Esses são os mais famosos, eu diria.
00:42:20Mas existem muitos programas de aceleração ao redor do mundo.
00:42:24O Speedrun foi uma experiência incrível para mim por vários motivos.
00:42:31Durante o COVID, todo mundo meio que se isolou e não saía muito, certo?
00:42:40E o Speedrun foi uma ótima oportunidade de me reconectar com outros fundadores regularmente.
00:42:48Essa quantidade de energia é subestimada, eu acho.
00:42:53Acho que todos deveriam passar por isso e conviver com um grupo unido de pessoas
00:42:58que têm a mesma visão de continuar desafiando os limites do possível.
00:43:03Então, esse foi o ponto número um.
00:43:06Número dois, eu diria que isso realmente molda você como fundador de uma forma muito positiva.
00:43:13Primeiro, o apoio da equipe da Andreessen Horowitz lá é inegável.
00:43:20E você pode discutir toneladas de coisas com eles.
00:43:25Eles têm muita experiência porque já viram muita coisa.
00:43:27Então eles têm esse instinto aguçado sobre o que pode ou não funcionar.
00:43:32Eles são ótimos conselheiros.
00:43:35Mas também há aquele momento em que você precisa se apresentar no Demo Day diante de mil
00:43:42investidores. Este ano fomos o Speedrun número cinco.
00:43:49Foi no Yerba Buena Center for the Arts, em San Francisco.
00:43:53É o lugar onde o Steve Jobs anunciou o iPad e outros produtos da Apple.
00:44:00E agora você está ali naquele palco.
00:44:02Tem uma energia mágica naquele lugar.
00:44:05É insano.
00:44:07E eu digo, acho que todo mundo deveria passar por isso.
00:44:11É uma experiência fantástica que te força a refinar muito o seu pitch.
00:44:18Você tem apenas dois minutos para apresentar.
00:44:22E eu te digo, falar por uma hora sobre o Pencil é fácil.
00:44:28Falar sobre o Pencil em dois minutos é incrivelmente difícil, especialmente num palco
00:44:35onde você fica cego pelas luzes assim que entra.
00:44:38Porque você vem de um backstage que é um lugar super escuro.
00:44:44Não tem luz nenhuma, sabe?
00:44:47E de repente você entra no palco e uma luz fortíssima brilha em você.
00:44:52E você tem que começar a falar sobre o que está construindo de um jeito super empolgado.
00:44:58E tem que fluir desse jeito, entende?
00:45:01Eu fiz muitos ensaios para aquilo, obviamente.
00:45:05Mas, no geral, acho que para qualquer um é uma experiência maravilhosa para
00:45:10sair da zona de conforto e tirar o melhor de si.
00:45:14É verdade.
00:45:16Sempre achei que quem está na Califórnia ou em San Francisco tem uma vantagem injusta
00:45:20porque está no centro da tecnologia e sente o poder da IA e
00:45:28de todos esses polos tecnológicos.
00:45:29Você se sente assim também?
00:45:31Sim, cem por cento.
00:45:34Digo, eu morei em San Francisco por muitos anos.
00:45:36Não moro mais lá no momento.
00:45:38Estou dosando minha presença porque também tem, francamente, uma energia muito forte.
00:45:44Mas também tem um certo "ruído" associado a isso.
00:45:47Então, o equilíbrio que encontrei foi ir para lá regularmente,
00:45:53mas não necessariamente estar lá todos os dias.
00:45:59Isso também me inspira de uma forma nova toda vez que eu vou.
00:46:05Foi o que funcionou para mim.
00:46:08Mas eu passei uma década lá, sabe?
00:46:10Então eu conheço cada detalhe da cidade.
00:46:14Mas sim, definitivamente é uma vantagem injusta.
00:46:19E você pode falar com qualquer pessoa que voa para SF: eles sempre voltam
00:46:24da viagem incrivelmente reenergizados.
00:46:26Então, sim, uma coisa que eu faria é simplesmente pegar a mochila e
00:46:33voar para SF para conhecer pessoas, conversar e trocar ideias.
00:46:38No Pencil.dev, existe uma equipe ou é só você no momento?
00:46:42Somos 10 pessoas agora.
00:46:45Sim, e é um time de pessoas excelentes.
00:46:50Nós já nos conhecemos há algum tempo.
00:46:52É um produto realmente complexo, se você parar para pensar.
00:46:57Então definitivamente precisa de mais gente além de mim agora.
00:46:59Pois é.
00:46:59Essas pessoas são quem você conheceu no tempo de Adobe, na sua startup anterior ou
00:47:06são pessoas que você conheceu no Speedrun?
00:47:09Alguns são da startup anterior onde trabalhamos.
00:47:16E, sim, algumas pessoas são novas.
00:47:18É um mix de pessoas.
00:47:19Entendi.
00:47:20Ah, legal. E falando na startup anterior, você pode falar sobre ela?
00:47:24Sim.
00:47:25Uma delas se chamava Around, por exemplo, era um app de videoconferência.
00:47:30Não sei se vocês chegaram a ver.
00:47:33Vocês viram?
00:47:34Era o que a gente usava até...
00:47:37Sim, nós usávamos.
00:47:38Sim, eu usei.
00:47:40A gente gostava muito.
00:47:41Ficamos bem tristes quando acabou.
00:47:42Entendo.
00:47:44E qual foi a impressão de vocês sobre a ferramenta? Se não se importarem de compartilhar.
00:47:50Fiquei curioso agora.
00:47:51Parecia um pouco mais divertido e uma experiência melhor do que o Google Workspace ou Slack
00:47:57e coisas desse tipo.
00:47:57Sim, não sei.
00:47:59Parecia que fazia exatamente o que foi projetado para fazer, com alguns recursos bem legais.
00:48:03Nossa intenção era justamente torná-lo um pouco mais divertido, especialmente
00:48:07durante o período do COVID.
00:48:09Sinto que todo mundo estava tentando fazer vídeo HD e 4K, cada vez maiores,
00:48:15maiores e maiores.
00:48:15E nós pensamos diferente: e se fizéssemos pequenos círculos?
00:48:17Colocamos eles no desktop e fizemos com que as pessoas vissem menos de você,
00:48:23de certa forma.
00:48:25Colocamos filtros lá e tal, e de repente todo mundo se sentiu mais confortável
00:48:31nas discussões de equipe.
00:48:33E acho que esse foi um fator determinante, sabe?
00:48:38Com todos os produtos em que trabalhei, tento sempre encontrar esse
00:48:46diferencial que seja completamente diferente de todos os outros.
00:48:51É sempre sobre buscar isso, em vez de ver que alguém construiu algo e
00:48:58tentar refazer, copiar ou algo do tipo.
00:49:01É fundamental encontrar algo novo pelo qual você se sinta apaixonado,
00:49:08porque, no fim das contas, isso é uma maratona e você precisa estar animado
00:49:15em construir isso, entende?
00:49:17E com o Pencil, sabe, quando vi esses cursores voando na tela pela
00:49:23primeira vez, eu pensei: "é isso".
00:49:25É incrível.
00:49:25Sabe, eu não conseguia parar de olhar.
00:49:27Fiquei hipnotizado por aquilo, entende?
00:49:29E aí eu pensei: "meu Deus, mal posso esperar para compartilhar isso com todo mundo".
00:49:35Então, são essas pequenas coisas. No começo, tínhamos essa animação
00:49:40que escaneava as coisas, sabe, não precisávamos fazer aquilo.
00:49:43Poderíamos apenas ler o JSON, sabe, e pronto.
00:49:47Mas o fato de escanear o quadro me fez pensar: "uau, isso aqui,
00:49:56você está sentindo".
00:49:56Você está sentindo a IA.
00:49:57E eu meio que espero que... muita gente tem falado muito sobre isso,
00:50:04sobre o chat ser a principal interface para a IA.
00:50:08Sinceramente, começo a sentir que estamos descobrindo agora essas novas experiências de usuário
00:50:14para interagir com a IA que nunca foram vistas antes, entende?
00:50:19E esses cursores, o escaneamento e tudo mais são apenas a ponta do iceberg.
00:50:24Veremos muito mais disso.
00:50:25Apenas guiando você visualmente durante toda a sua criação.
00:50:29Realmente faz parecer que a IA não é apenas um chat de texto de LLM, mas
00:50:36algo por trás, algo criativo por trás disso.
00:50:40Não sei.
00:50:40Não consigo encontrar a palavra certa agora, mas está começando a parecer
00:50:45com isso.
00:50:46Acho que é especialmente verdade que o chat é uma interface ruim para coisas
00:50:50que são criativas, como design e tudo mais.
00:50:52É muito difícil colocar em um prompt exatamente o que você quer ver na página.
00:50:56É, e acho que se quisermos que mais pessoas no mundo usem IA, teremos que descobrir
00:51:03interfaces melhores para isso.
00:51:04E claro, a voz poderia ser uma delas, mas não sei, quantas vezes
00:51:10vocês usam a voz para interagir com a IA?
00:51:13Raramente, sabe? Então, acho que teremos que encontrar
00:51:19novas interfaces para isso também.
00:51:20É, tenho pensado nisso de vez em quando e acho que se houvesse um jeito de a IA
00:51:24ouvir o que estou pensando, porque às vezes não quero falar, não quero
00:51:28digitar, só quero que ela entenda o que estou pensando e faça.
00:51:31Não sei se seria via Neuralink ou o que for, mas se houvesse um jeito, seria
00:51:35uma interface bem legal.
00:51:36É, você deveria considerar convidar um grande amigo meu para este podcast.
00:51:44Jakub Zeczolka, ele é um designer promissor e muito talentoso,
00:51:50e postou recentemente um vídeo do seu último protótipo.
00:51:55Ele está fazendo rastreamento ocular no iPhone e basicamente olha para diferentes coisas
00:52:02na tela, sabe, e apenas fala o que deve acontecer com aquilo.
00:52:05Ele não precisa descrever: "esta imagem à esquerda".
00:52:08Ele apenas olha para a imagem e diz algo como: "mude para tal coisa".
00:52:10E a IA sabe para onde ele está olhando.
00:52:13Então, são esses tipos de interfaces que vão abrir tantas coisas novas, porque
00:52:19se a IA souber o que você está pensando — e a visão e a direção de
00:52:24onde você está olhando são pistas para isso.
00:52:26E espero que encontremos muito mais dessas pistas.
00:52:30Então, tudo vai parecer muito mais natural.
00:52:33Como se você estivesse aqui ao meu lado na sala e eu não precisasse te dizer:
00:52:38"olhe para isso" e apontar especificamente para aquela coisa.
00:52:42Você já saberia apenas pelo contexto da situação.
00:52:48Isso é super legal.
00:52:49Eu ia dizer que sou uma dessas pessoas que usa muito a voz, porque às vezes
00:52:55estou cansado de digitar.
00:52:56Só quero falar com a IA.
00:52:58Então, se eu puder falar com ela e ela souber para onde estou olhando, é um ótimo produto.
00:53:03Gostei disso.
00:53:04É.
00:53:05Ou imagine se pudesse rastrear uma mão e você pudesse apontar para coisas na tela
00:53:10ou fazer isso, sabe, como quando você está no carro e apenas diz:
00:53:15"vai por aqui", e você não diz "direita", não diz "esquerda".
00:53:19Apenas: "vire aqui".
00:53:20E eu queria poder dizer à IA no carro ou ao motorista autônomo:
00:53:28"vire aqui", e as pessoas no carro com você saberiam.
00:53:33A IA não tem a menor ideia.
00:53:35Você teria que dizer: "vire à direita neste cruzamento".
00:53:37E eu fico: "meu Deus, quem vai falar assim?"
00:53:40Sabe, é muita coisa para falar.
00:53:43Então, sim, você tem alguma opinião polêmica sobre design, IA ou tecnologia em geral?
00:53:50Essa é uma pergunta complexa.
00:53:53Embora seja bem simples.
00:53:55Precisamos do corte, sabe, temos que conseguir o corte.
00:53:59É, qual é a opinião polêmica?
00:54:02Bem, acho sinceramente que isso que acabamos de discutir é uma
00:54:06opinião forte: espero que descubramos essas novas interfaces para
00:54:12interagir com a IA que pareçam mais humanas, mais naturais.
00:54:16E a IA saberá pelo contexto do mundo, pelo seu próprio contexto, pelo seu ponto de vista,
00:54:26pelo seu ponto focal, o que você realmente tinha em mente.
00:54:30Assim, você não precisa ficar guiando-a pela mão o tempo todo.
00:54:34Como tem que fazer hoje, sabe? Voltando à minha ideia inicial de que
00:54:40eu só queria desenhar algo em vez de descrever com palavras, é a mesma coisa.
00:54:44Para mim, muitas vezes é mais fácil desenhar ou apontar para algo do que
00:54:52descrever com palavras.
00:54:53Então, acho que este é o próximo passo imediato que começará a
00:55:00mudar na IA.
00:55:01Além disso, se você pensar no ChatGPT de alguns anos atrás, você
00:55:06tinha que fazer perguntas e prompts realmente longos. Agora,
00:55:10você pergunta algo pequeno e ele faz toda a análise e dá umas
00:55:1420 opções e por aí vai.
00:55:16Ele simplesmente continua.
00:55:17Ele meio que sabe para onde você está indo.
00:55:21E talvez isso seja informado por outros chats que as pessoas tiveram e ele
00:55:30armazenou alguns desses pensamentos e respostas, entende?
00:55:33Então, sim, acho que a outra coisa é que, muitas vezes,
00:55:41um novo prompt de LLM é como o início de um novo mundo.
00:55:45Começa do zero.
00:55:46Eu espero que vejamos muito mais dessa memória compartilhada.
00:55:51Acho que a grande diferença é entre dizer "LLM, por favor, resuma isso" e
00:56:01ter a LLM como um colega no seu Slack, tendo todo o contexto de todas as
00:56:06conversas que aconteceram lá, sem ter que pesquisar tudo do zero toda vez
00:56:11para pensar sobre o assunto, porque isso parece idiota.
00:56:13Então, acho que veremos muito mais disso.
00:56:16Eu ia dizer, voltando ao Around, que realmente sentimos falta dos efeitos sonoros e do
00:56:21minijogo que jogávamos no final da chamada.
00:56:22Nossa maior perda foram os efeitos sonoros.
00:56:25Nós os amávamos.
00:56:26Com certeza.
00:56:28E também, não seria legal se você pudesse jogar o jogo agora mesmo?
00:56:31Sim.
00:56:32Sim.
00:56:33Sim, era o meu favorito.
00:56:35É.
00:56:36Legal.
00:56:40Bons tempos.
00:56:41Acho que usamos o Slack agora.
00:56:42Usamos o Slack Huddles e não é a mesma coisa.
00:56:44É.
00:56:45Me deixa impressionado.
00:56:46O Slack não tem um recurso de gravação.
00:56:48Apenas me deixe gravar a chamada.
00:56:51Parece algo tão simples.
00:56:52Mas enfim.
00:56:54É.
00:56:55Sim.
00:56:56Legal.
00:56:57Você pode falar sobre o que aconteceu com o Around?
00:57:00Sim, o Around foi adquirido pela Miro e foi totalmente integrado
00:57:08à experiência de lousa digital da Miro, sabe, então está lá.
00:57:10Ah, entendi.
00:57:12Então ainda existe, mas você tem que usar a Miro para isso.
00:57:15Obrigado pelo seu tempo, Tom.
00:57:16Tem algo que você queira divulgar?
00:57:17Algo em que esteja trabalhando além do Pencil e que queira falar?
00:57:21Sim, bem, primeiro, vão conferir o Pencil, e estou aqui para todos.
00:57:27Sabe, todos os usuários que testaram o nosso Discord.
00:57:31As pessoas compartilham muitos insights interessantes usando o Pencil e também
00:57:40capturas de tela e arquivos do que criaram.
00:57:42É uma comunidade bem vibrante de milhares de pessoas neste momento.
00:57:46E também fiquem à vontade para me mandar DM no X ou no Discord se
00:57:56tiverem qualquer problema, dúvida ou pedidos de recursos, sabe, só quero
00:58:00garantir que saibam que estou aqui para ajudar.
00:58:02Um pedido de recurso que tenho é para kits de UI personalizados.
00:58:07Porque às vezes quero criar meu próprio kit sem usar o Shadcn.
00:58:10Com certeza, faz todo o sentido.
00:58:13Obrigado por ouvir o Better Slack Podcast.
00:58:16Encontre-nos onde quer que você ouça seus podcasts.
00:58:18No Apple, Spotify, deixe seu like ou se inscreva se estiver ouvindo no YouTube.
00:58:23E por hoje é só. Tchau.
00:58:25Tchau, tchau para vocês e tchau da minha parte.
00:58:28Obrigado a todos por ouvirem.
00:58:31Gostei muito mesmo.