0:00 Oi, tudo bem com você? Meu nome é Paulo Shod. Sejam bem-vindos a PR Gurus, o podcast que a voz por trás dos produtos, mas que também aborda negócio e tecnologia de peito aberto. Hoje vamos conversar com o Guilherme Gonzalez, ó, Gonzales, ó meu sutar espanhol aqui, meu CN, meu Fisk espanhol, eh, que é especialista em design system e que usou, olha só, essa parte aqui, a galera de design vai adorar. Ele usou uma IA para criar do zero em apenas 5 dias um design system real, escalável e personalizado. Parece headline, né, de de venda de Hotmart.
0:45 Não, eh, ele fez tudo isso sem depender de um time inteiro de engenharia. Ele vai mostrar pra gente aqui quando você trata a Iá como colaboradora, como uma parceira, como membro de um time, como sua assistente e não só ferramenta, dá para construir sistemas de verdade com clareza e rapidez. Neste episódio também vamos entender como que ele transformou ideias em componentes reais, lidou com tokens e variantes, documentou o processo e criou um método replicável que pode inspirar times no Brasil e no mundo. Então esse episódio tem o selo aula, OK? Porque ele vai mostrar, ele vai ensinar como que ele fez e esse método quer replicar.
1:35 Seja bem-vindo a PRO Gurus, Guilherme González. Tudo bem com você? >> Opa, muito bom. Obrigado aí, Paulo. Obrigado pelo convite. Tô bem, tô bem, sim. Tô animado de poder compartilhar um pouquinho disso aqui, >> pô. O o Richard falou que você é o maior especialista em design system do Brasil, certo? Ele fala isso, muita gente eh lá na época que surgiu os design Systems aqui no mercado eh 2017, 18, teve algumas risinhas dos pessoas que estavam fazendo cursos, né? E eu só fui de zentão mesmo e saí pela tangente, falei assim: "Não vou entrar nessa briga, deixa deixa o pautorar aí para essas pessoas". Mas a real é que eu
2:20 já trabalhei nos dois, já trabalhei em três design systems grandes do mercado. Um deles que eu, para mim é uma das maiores referências de estrutura, que é o do well hub, né, o antigo Jess. Eh, quando eu trabalhei lá, a gente fundou ele desde o do começo e eu já vim estudando design system, se for para pegar de histórico mesmo, eu falo de design system, Atomic Design e coisas correlatas desde 2014, né? Então, surgi em 2013 no livro do Atomic Design do Brad Frost. 2014 eu já tava falando sobre o assunto aqui no Brasil, né? Então não é algo que eu não estudei. >> Então eh como eu falei no início, é aula. Esse episódio é aula de Design System. É um episódio em que todo mundo que quiser eh trabalhar, entender design
3:08 system e principalmente IA com IA, né? Esse é o episódio Tenho que ouvir. Antes da gente começar a conversar com com o Guilherme, recados. Tá ouvindo pelo Spotify? Apple Podcast? Clique no botão seguir e deixe suas cinco estrelas, por favor. Tá assistindo pelo YouTube? Inscreva-se no canal, deixe seu joinha, comente, porque eu e o Gui vamos ler os comentários, vamos responder eles também. E tem recado, recado especial, porque esse é um episódio patrocinado com apoio da PM3. O futuro dos produtos digitais já começou e a inteligência artificial é parte do time. A PM3 acaba de lançar a
3:53 formação em gestão de produtos de IA, um curso pensado para project managers que querem criar, delegar e inovar com mais inteligência. Muito além dos promptes, você vai aprender a liderar produtos baseados em Iá, dominar temas como machinan, diplane e Ia generativa e aplicar novas formas de descovimentação e validação. Prepare-se para o mercado que mais cresce no mundo e torne-se o PM que lidera a transformação. Acesse o link aqui na descrição do episódio. Tem desconto, tem cupom. Cupom é Project Gurus. vai lá e garanta essa formação para você evoluir na carreira de produtos. Ô, Gui, eh, vamos começar do começo, né?
4:43 já diria o pensador. Você contou lá no no LinkedIn o link do artigo do artigo post do GUI tá na descrição aqui, caso você queira que tá ouvindo a gente queira ir lá ler. Você contou que começou o design system com a IA lá pedindo apenas um botão, ou seja, você foi o stakeholder, né? É apenas um botão. Por que que esse ponto de partida simples foi tão importante? >> Bom, vamos lá. Eu vou primeiro dar uma contextualizada porque eu cheguei nessa nessa cidade. >> Eh, primeiro que diz system é uma coisa muito complexa. Quando a gente vai tentar explicar pra IA, a a IA ela entende as coisas de forma muito, vamos
5:29 dizer assim, pragmática. Ela recebe a informação, ela entende o que existe e ela replica o que ela consegue entender daquilo que existe, né? Então eu vou compartilhar a tela para mostrar o a primeira versão que eu tentei fazer de um DS usando o V0, né? Deixa eu só achar ela aqui que porque a primeira versão que eu fiz foi justamente o meu primeiro fracasso. E eu falo por que fracasso porque foram vários testes, várias ideias e várias eh tentativas até chegar em alguma coisa que realmente replicava e representava o que eu queria mostrar. Primeira versão que eu fiz foi essa aqui, eh, que foi na sua essência um, uma primeira tentativa. Eu fiz isso, acho que deve ter data aqui no de quando eu mandei o primeiro
6:15 comentário. Não sei se ele mostra. Acho que não. Eh, mas foi, acho que ali por final de fevereiro, mais ou menos, que eu fiz o meu primeiro teste, vou fazer um um DS. Claro que tem uma questão importante, né? Eu já conheço muito sobre design system, então é muito mais fácil para eu conseguir decupar o que eu queria pedir. E aí eu pedi aqui para ele, né? Eh, mandei um um prompt em inglês ainda na na porque o Vzer ainda funcionava mais em inglês na época. Eh, criei uma página de documentação de um design system com uma barra lateral de navegação que vai ter um uma área de conteúdo que vai seguir essa estrutura. Aí vai, eu expliquei, ah, eu quero uma estrutura de um header, o sidebar, quero uma área de uma área de conteúdo principal, onde eu vou explicar quem é o componente, eu quero um status desse componente. Eu fui muito
7:02 literal inicialmente para entender o que que ele ia construir para mim. E se você olhar para isso aqui, você fala assim: "Isso aqui parece um Z system". Pô, tá aqui o componente, tem a estrutura, ele me mostra uma documentaçãozinha do do componente. Deixa eu mostrar ele em uma em tela cheia aqui. Aí ele mostra aqui um componente para mim, mostra os elementos, ele mostra, eu podia abrir alguns botões, alguns elementos, né? Não, não todos, porque ele não cria todos de primeira. Opa, deu um voltar pro, vou voltar pro V0 aqui que aqui tá mais garantido. Então ele cria aqui alguns elementos, mostra para mim alguma algumas coisas funcionando e a no primeiro V fala assim: "Nossa, legal, ele cria um ele cria um design system
7:48 para mim". Só que como eu sei exatamente o que eu quero do outro lado, que é a tecnologia, eu fui olhar no código e eu vi que, na verdade, o que ele fez foi um monte de página eh que dá para ver aqui. Eu não sei se o pessoal vai conseguir enxergar eh direito na tela, mas ele criou um monte de página, mas ele não separou o que é mais importante no Z system System, que são os componentes, que é o que o desenvolvedor vai usar lá na lá na frente. Então ele criou uma página de botões, mas ele não criou o componente do botão, ele criou uma página cheia de botões. Então o desenvolvedor teria que vir nessa página tentar achar o botão que ele quer. Não ia ser funcional na prática, né? Então a minha primeira versão foi um fracasso. Eu falei assim: "Pera, então vamos pensar diferente. Como que eu penso de uma forma que eu
8:35 peça algo paraá que faça sentido?" E aí o meu primeiro teste eh semifuncional. Cadê ele? Aqui foi não, não foi esse aqui, foi aqui o botão eh reusável que eu solicitei para ele aqui. Você aí eu já aqui já já trabalhando com outras ideias, né? falei assim: "Eu quero que você seja um especialista eh em sistemas de design escaláveis, o seu objeto aquele conceito do prompt eh que eu dou para ele uma um papel, né, de eu falo para ele, você vai ser uma você tem que ser um especialista que vai ter que replicar um um conhecimento e eu quero que eu queria que ele construísse para mim um botão base que fosse reutilizável. E aí eu passei algumas premissas, né?
9:20 Hã, o botão será o primeiro componente do sistema, ele tem que incluir variações de estado. A estrutura dele tem que ser de tokens desacoplados de estilo cor, tipografia, raio de borda, eh, com base em um arquivo de tokens, um JSON, um JSON simples que ele pudesse usar e pensasse também como que ele estruturar o componente. E aí ele montou para mim aqui uma base de tokens, mostrou, eu mandei o exemplo para ele de tokens que eu queria e gerar um único componente geral. O V0 trabalhou como uma IA aqui nessa primeira versão e ele trouxe algumas coisas que foram mais próximas do que eu queria. O componente aqui ele já separou, ele me trouxe o componente do botão, o o componente dos tipos do botão, o type do
10:07 botão. Ele trouxe o Jzon dos tokens, todos estruturadinhos, todos separadinhos do jeito que eu queria. Então eu percebi que a IA ela funciona de uma forma mais relacionada ao como eu peço as coisas do que exatamente o que eu peço. Uma coisa é falar, eu quero um design system, outra coisa eu quero um botão estruturado que siga as melhores práticas de desenvolvimento frontend e que traga o as a parte de tokenização de design e outros aspectos que eu quisesse explicar. Aí aqui eu construí depois de algumas tentativas, né? O que eu acho que eu fiz só, não fiz, eu só fiz uma versão, na verdade. Esse aqui foi foi direto a entregas, que é só o meu primeiro teste. Lembrando, o V0 eu tava usando no modo gratuito, tá? Nessa época. Então, eh, ele tinha limitação de
10:54 quantos pedidos eu podia fazer por dia. Acho que eram 10 pedidos. E eu falei assim: "Eu só vou testar para ver até onde ele vai". ainda não tinha uma aplicação prática para ele. Foi então que eu falei: "Bom, então eu já sei que eu não posso pedir um zelst, tenho que pedir os componentes e como que eu vou pedir isso?" E aí vem o derradeiro teste, que é o que eu apresentei no lá no meu artigo. Aí pegando a mesma base de estratégia, eu montei lá com ele, peguei, pedi para ele gerar os o primeiro botão. Aí eu falei: "Legal, gera o botão". Eh, aí no artigo eu até explico, esse aqui é uma cópia do do chat. Eu tive que eu perdi o original, mas eu dá para mostrar aqui mais ou menos como foi a construção. Eu
11:41 falei, me gera um botão, depois eu me gera eh os inputs de texto. Aí eu fui gerando, cadê? Aqui em cima. Eu pedi para ele gerar os inputs de texto, todo seguindo um padrão. E aí no código eu fui vendo que eu fui gerando o que eu queria, porque ele gerou as páginas que eu tava mostrando ali, mas ele também gerou os componentes do design system desacoplados, prontos para serem reutilizados por um desenvolvedor. E aí uma coisa que eu pedi para ele, eu usei um cara chamado Untitle UI, que é esse carinha aqui, é um é um Zen System de Figma. Pronto, né? Eh, ele tem uma versão gratuita que funciona relativamente bem.
12:27 Aí é só pegar esse cara aqui. Esse aqui é o preview deles, né? Aí, se eu quiser, eu posso fazer uma cópia dele. Cadê? Como é que faz? Cadê a cópia? Ah, cadê? Tem um tem um o Figma mudou isso recente. Agora eu não lembro mais como é que faz uma cópia dele. Hã. Bom, isso é, mas isso aqui na verdade é relevante, não preciso mostrar. Eh, o Figma, ele gera as variáveis dentro dele mesmo, né? Eh, e aí eu gere o meu Figma, mas é mais fácil para mostrar. Eu tava nesse nesse arquivo do Figma que era do untitle UI. Eu tenho as variáveis do arquivo deles,
13:15 né, que você compra o o design system deles, acho que é 99, baixa dentro do seu arquivo do Figma e ele te traz todos os todos os seus os componentes e as variáveis do Figma. Aí eu usei esse plugin Variables to Jason, que ele exporta as variáveis do Figma em um formato legível pelo desenh pelo pelo IA, por qualquer eh por qualquer ferramenta de código, né? não precisa nem seria uma I, um. E aí eu mandei ele pegar esses esse essas variáveis e aplicar aqui. Então ele gerou para mim toda a estrutura que eu precisava sem eu precisar eh de um trabalho braçal ali. Porque aí com isso aqui eu mandei para IA
14:03 e ele simplesmente pegou, gerou todos os componentes que eu tinha aqui. Eu virei e falei assim: "Agora você vai pegar isso aqui para mim e vai transformar esse mesmo, esse mesmo arquivo em um eh aí dá para ver aqui, ó. Ele traz ele trouxe todas as cores, todos os elementos que estavam naquele Figma. E aí a simplesmente pegou e transformou ele em vários tokens separados em Typescript, seguindo o mesmo padrão que tá lá e aplicou nos meus componentes que estão aqui. Aí ela simplesmente fez todo o trabalho que um desenvolvedor faria sendo guiada para esse processo. Mas por que que aí respondendo a sua pergunta inicial, por que que foi importante perguntar para um
14:50 pedir para um botão? Porque se eu não tivesse pedido por um botão, eu ia ficar tentando resolver o problema indo paraa documentação e não pensando como um desenvolvedor. Porque o desenvolvedor ele precisa do componente do botão. Ele não precisa de mais nada ali. Ele não precisa de documentação. Para ele começar a trabalhar, ele mesmo, precisa de um botão. Depois ele vai desenvolver a documentação em cima daquele botão de como usar, qual que é o melhor jeito, qual que é a melhor prática e por aí vai. Então, basicamente tentando responder só essa pergunta foi essa pequena microaula aqui de como trabalhar com com o assunto. >> E já que a gente tá aproveitando essa microaula agora aqui que você compartilhou a tela e tal e você mostrou, né? Você mostrou qual que é aquela primeira ferramenta ou que você >> V0.dev0.dev.
15:37 E aí você usou eh um do Figma, né? Isso. Eu usei um design system do Figma e joguei lá para falar assim, agora forma o componente de código que você fez e um componente igual ao do Figma que que eu tinha aqui. >> E aí eu acho que vem agora que a gente tá eh ficando saindo um pouco do hype, né, das IAS e tal, a gente começa a ter eh ver eh assuntos e temas que tem que ser visto, né? Porque ya não é simplesmente vai fazendo, vai colocando ali e tal. como que foi o processo de extrair esses esses tokens, eh usar esses tokens eh via plugin, converter em Jzon com Prompers, quais ajustes que eh você precisou fazer manualmente? Acho
16:23 que porque assim, quando a gente vê, porque não sei se você acompanha o LinkedIn, >> acompanho um pouco, mas é meio difícil. E pelo que você mostrou agora, eh, teve um trabalho ali seu manual ali de tipo de dar contexto para Iá, de explicar um pouco a maneira que você queria e o que é o design cis, o que que ela precisava fazer, porque hoje em dia a gente abre o LinkedIn e o feed tá lotado de prints do N8N do fluxo ou eh prints de algo já bem bonito e a pessoa fala: "Ah, comente aqui, eu quero que eu te mando o meu prompet para você conseguir fazer t ou para você ter o meu
17:10 o mesmo workflow, etc." Então, acho que essa pergunta de como foi esse processo, eh, para converter em Jzon, eh, usar os promptes, quais foram os ajustes que você precisou fazer manual, acho que é bem importante até pra gente trazer um pouco mais de vida real, que não é simplesmente você chegar e falar assim: "Ô, GPT, me faz um botão". Não, né? É, tem todo um, tem todo um uma paciência. eh, né, que eu não tenho, por exemplo. Então, na primeiro erro já ia falar, você é burro, caramba, você não tá entendendo que eu quero, que eu quero. Como que foi esse processo todo de token e estrutura?
17:56 >> Eu acho que muito vem daqui das da minha bagagem de saber o que é construindo um Zen System, né? eh, trazer um pouquinho do da história. O primeiro Zening que eu fiz, ele foi um fracasso de componentes, mas foi onde eu aprendi que o verdadeiro poder de fazer um system não está em você ter os componentes e sim em ter tokens bem estruturados, porque são os tokens que na verdade regem o visual. Se o botão vai ser em JavaScript, TypeScript, se ele vai ser feito em Python, se ele vai ser em HTML. Na verdade, isso tudo é meio irrelevante pro visual, pra parte design, porque o que define se ele vai usar a cor que eu quero, se ele vai ter o o espaçamento que eu quero, se ele vai ter a fonte que eu quero, são os tokens. Então, o que
18:42 que primeira primeira premissa que eu assumi? Eu não vou me importar com qual é a entrega inicial da IA, porque eu sei que eu vou formatar ela depois. Eu só preciso que ele me traga os componentes reutilizáveis em código do jeito que eu preciso que eles sejam, usando as premissas de front end, que eu preciso dos componentes separadinhos em em pastas, em arquivos isolados, para que eu consiga reaproveitar eles depois. Essa foi a primeira premissa que eu assumi. Então, foi o que eu foi o que tá escrito até no no arquivo do Vzer lá. Quando eu faço o primeiro o primeiro pedido do dos botões, eu falei: "Eu quero que os botões sigam essas premissas de de boas práticas. Não tô nem pedindo algo eh mirabolante para ela. Tô falando assim, só quero seguir boas práticas. Não quero que você me entregue uma massaroca de componentes num um arquivo de JavaScript e falar
19:27 assim: "Pronto, tá aqui, tá aqui o seu layout." Porque o layout eu entendo que você pode que ela pudesse me entregar, mas funcionalmente o que eu preciso que ele faça na verdade é separar os componentes ali. Eh, então assim, foi uma primeira premissa. Eu já sabia que eu não ia me importar com a primeira entrega desde que ele me trouxesse os componentes separados. E, e aí a segunda premissa que eu assumi é os tokens, eu precisava de uma fonte confiável que eu pudesse me basear na realidade para comparar o que ele entregou com o que eu tô com o que é feito, existe ali na numa versão do arquivo do Figma. Por coincidência, eu tava trabalhando em na CPLA na época, eh, no começo do ano e eu tava nesse, justamente trabalhando junto com o time que tava fazendo esse Benny System e a gente tinha acabado de
20:13 comprar esse untitle. Então eu eu tinha a referência visual do arquivo do Figma muito clara na minha frente na minha frente. Eu sabia o que ia usar. E aí, por terceiro, usar plugins para poder exportar é uma coisa que eu já sabia fazer de mais tempo atrás. Eu tinha trabalhado em uma empresa na eh gringa, fazendo um design system robusto para eles que era multitema, multimarca, um monte de coisa. E a única coisa que a gente tinha de referência de trabalhar com time de desenvolvimento, porque era um time terceirizado e a gente não tinha contato com eles, é que eu tinha que entregar um Jzon. Então eu já tinha passado por um trabalho prévio de estudar qual era o melhor plugin do Figma que exportava o Jzon que eu precisava. Então assim, foram algumas coisas de histórico pessoal, referência mesmo de estudo que me ajudaram a trazer e chegar
20:59 ali sabendo exatamente o que eu precisava. Mas não vou te falar que assim, nossa, foi um trabalho de um estudo prévio gigantesco, não. Eu só testei vários, vários plugins e encontrei qual que entregava o o Jon mais assertivo que eu precisava, que não que não ignorava, por exemplo, coleções diferentes, que criava o alias, né, de no Jon. Eu, se eu tinha ali uma cor primitiva e eu queria reutilizar ela lá na frente, eu queria que ele me falasse que aquilo era uma cor referenciada ao primitivo e não que ele criasse um um Jzon com duas cores dentro do arquivo sem necessidade nenhuma, porque ia ser duas cores iguais. Então, algumas lógicas que eu sabia o que precisava que para entregar pro desenvolvedor naquela época e que eram úteis aqui para mim também, que eu sabia que no final a IA ia depender um
21:46 pouco disso. E eu acho que o principal é ter estudado design system de forma geral, saber o que é a documentação. Eh, eu vejo muita gente, uma das coisas que eu falava muito quando eu eu cheguei a dar um curso de design system uns anos atrás e eu sempre chocava os alunos quando eu falava assim, design system ele é um produto com nome de design, mas ele não é do designer. Ele é do desenvolvedor, ele é de tecnologia, ele é exclusivamente uma coisa da tecnologia. O designer se apropriou desse nome e começou a chamar eh biblioteca do Figma de Design System porque quis, porque nunca foi, né? Biblioteca do Figma é só um arquivo de referência visual, ele é um style guide. A gente pode criar, assim como eu posso criar 10 protótipos que eh para justamente economizar tempo de esforço e
22:31 encontrar a resposta certa, a mesma coisa é a biblioteca. biblioteca, eu posso jogar fora quantas vezes eu quiser e começar novas bibliotecas o tempo todo, mas quando eu passo por código, começo a gastar dinheiro, porque começo a gastar tempo e hora do desenvolvedor para fazer aquilo, né? E a gente acaba ignorando esse fato e fala assim: "Ah, designer tem que se preocupar com descista, tem que saber o processo todo". Então, aí eu me pezinho também meio maluco de ser um cara que põe o pé ali dentro da tecnologia só para ver se se eu consigo entrar na piscina. Não, eu não consigo. Eu já tentei, eu sei que eu não consigo ser um desenvolvedor 100%, mas também não consigo ficar totalmente fora ali da piscininha. Aí eu falo que eu sou o desenvolvedor da piscina de criança. >> O uma coisa que chama atenção é que você conseguiu criar eh o design system em 5 dias. Isso já chama atenção, já é já seria um título, um baita título de de curso.
23:19 Crie seu design system em 5 dias, tá? Eh, design system de junior a senior em 5 dias. Gui, você tá perdendo. Nossa, Gui, você tá deixando dinheiro na mesa. Eh, mas tem esse ponto da velocidade, né? Qualidade versus velocidade. A gente tá com a IA e toda vez que a gente fala de A, ferramenta de A, todo, acho que todo, todo argumento que eu ouço do pessoal de tecnologia é velocidade. Não, porque a IA aumentou a velocidade do time, não, porque a IA pode aumentar a velocidade. Mas e a qualidade? Eh, como que você garantiu ou como garantir que essa velocidade não impacte
24:06 a qualidade ou coesão dos componentes? Ah, eu acho que o principal é saber pedir as coisas para eh que aquela história de engenharia de prompt que o pessoal você até comentou, né, que o pessoal você entra lá e tem sempre alguém vendendo um ah, me mande eu quero, que eu te mando o meu prompt que vai fazer você entregar café via drone pro seu, na casa da sua namorada, sei lá, alguma coisa do tipo. Eh, é uma lógica que eu entendo, mas a Iá ela ainda é uma coisa muito muito complexa. Inicialmente eu participo de várias comunidades sobre IA, como como usar e o que eu mais percebo é o meu
24:51 prom não necessariamente funciona para você porque sempre tem uma bagagem pessoal que leva a você escrever um prompt de uma certa forma. Às vezes algo que você pede ou que você deixa de pedir tá atrelado ao que você sabe ou que você faria por conta própria sem ajuda da IA, né? Eu falo que eu tento trabalhar junto com a IA e hoje eu tô na Ingressa e com o foco em trabalhar com IA no dia a dia, eu sempre tenho que trabalhar, usar a IA como um estagiário. Ela é meu estagiário que não sabe nada. Quem tem que dizer para ela o que ela tem que saber sou eu. Se é, ela pode me dizer coisas que eu não sei. Assim como um estagiário poderia fazer isso. Ah, olha, isso aqui
25:36 é a melhor forma de fazer de acordo com as melhores práticas, com o que eu li, com o que for, mas eu não posso deixar ir a tomar decisão 100% sozinho. tá rolando aí um artigo recente falando que 70% das tarefas entregues para IA e estão falhando e é por isso que a IA em si eh vai talvez não seja exatamente a resposta final como a gente imagina, mas isso é óbvio, porque as pessoas estão imaginando que a IA ela vai simplesmente ser autônoma o suficiente para tomar decisões e entregar tudo que o ser humano é capaz de fazer. Mas é mentira. A gente sabe que a IA depende de comandos, ela depende de de um plano de ação. Eu eu não posso simplesmente delegar 100% e falar: "Ya, resolve para mim". Se fosse assim, sei lá, o eu tô usando o cloud aqui para
26:22 desenvolver um software, eu simplesmente ia mandar um PRD na mão do cloud e falar: "Desenvolve aí para mim". E eu sei que não é o que vai acontecer. Vai chegar uma hora que aí ela vai travar e vai e eu vou ter que começar do zero. Eu tenho feito muito o esforço de trabalhar pensando eh eu tenho um projeto pessoal, bobagem minha assim, que é só para poder gastar tempo e esforço de estudos, onde eu quero criar um tableetop de RPG. Eu eu falo que é uma ferramenta web para jogar e falar assim: "Eu vou testar isso aqui". Eu não consegui fazer nenhuma funcional até agora. Eu tô há seis meses fazendo com IA. Já joguei fora umas, sei lá, umas 15 versões diferentes. Comecei, parei, abandonei, comecei, parei, abandonei, montei protótipo, montei versão, versão
27:08 front end, versão com back end. Por que que eu eu abandono? Porque eu sei que, na verdade, o que eu não o que eu tô fazendo ali não é construir a ferramenta. Eu tô testando qual é o limite da IA como ferramenta para construir aquilo. Que se eu quisesse construir, obviamente eu construía, chamava um desenvolvedor, falava: "Vamos fazer em três meses o que eu o que eu já tenho de ideias já tava na mesa, mas eu quero usar, eu tô usando a IA para entender qual é o limite que ela chega, até onde ela consegue fazer sozinha, até onde ela não consegue. E eu tenho feito isso muito e foi o mesmo experimento que eu fiz com design, com design system. Eu peguei e fui experimentando, encontrando ali os caminhos, mas baseado o quê? Nas minhas premissas pessoais. Se eu chegasse para e fizesse esse curso que você falou, que que ia acontecer? Todo mundo ia se frustrar, porque eles iam comprar o meu curso, iam
27:55 pegar os meus promptes, jogar lá e não iam conseguir desol desenrolar. Assim como eu vi muita gente comprar curso de design system de grandes referências no mercado, comprou, pegou, virou para mim e pediu uma mentoria, falou: "Cara, me ajuda aqui porque eu não sei, eu não tô conseguindo desenrolar o design system". Porque acontece, é inevitável. Precisa de uma base pessoal de estudo. Aí é só mais um motor de ferramentas. E é só isso. O >> uma coisa que eu tenho falado sempre, o Gui, é que as pessoas ainda não entenderam que, assim como na vida, o que funcionou para uma pessoa não necessariamente vai funcionar para outra pessoa. Eh, o
28:41 contexto de um é diferente do outro, então a gente vê bastante na na no dia a dia, né? Ah, pô, a empresa X, trabalhei na empresa X. Eu vou usar um exemplo aqui bem, mas que é que a gente tá acostumado a ouvir, ah, trabalhei na empresa X lá, é muito ruim, tá? E aí você vai conversar com outra pessoa que trabalhou na mesma empresa. Essa essa pessoa vai falar: "Não, eu gostei, foi legal, me ajudou, me desenvolveu, não sei o quê, eu aprendi." Então, o mesmo lugar, dois, duas experiências diferentes. Então isso serve também pros conteúdos, não é porque a gente vê no LinkedIn ou nos eventos palestras bonitas que não, ó, vou falar um negócio
29:29 aqui, a galera vai me odiar mais. Eh, a maioria das palestras em eventos, elas têm um storyting criado para poder mostrar de uma maneira bonita e agradável, mas no dia a dia é muito top down, é muita warum, é muito é muito a pessoa tipo e trabalhar 15 horas, a mesma coisa O prompt que você usa no GPT, se você copiar e colar no Gemini, ele não funciona. Se você colar no cloud, ele não funciona. Por quê? Porque são, apesar de ser no mesmo segmento, digamos
30:16 assim, de ferramenta de ar, são modelos treinados de maneiras diferente. Então, também tem as pessoas precisam eh entender isso. E aí tem um ponto que eu acho que entra na parte de pragmatismo. Gu, eh, como que E aí, se você puder compartilhar a tela e mostrar e tal, é como que você estruturou seus prompets para tornar essa IA inteligente, eh, >> eficiente e evitar vieses ou resultados genéricos. Porque tem isso, né? Que a Ia já vem com vieses, não tem essa de não tem vieses na na IA, elas já elas têm.
31:03 Então, como que que você estruturou? >> Eu escrevi esse aqui, tá no meu LinkedIn e depois o link po pode ficar também na descrição, eh, de como não ser refém das IAS. minha minha lógica é como que eu consigo trabalhar com EA, com vibe code de forma geral, mas não me tornar um refém, não me tornar alguém dependente da IA como estrutura. Eh, na minha aí eu aqui eu traduzi em 10 lições pessoais, né, que eu desde que eu comecei a estudar, usar e pensar com isso. Primeiro passo é pensar que a IA ela não eh ela não substitui a clareza, né? Por por que que eu consegui fazer um design system funcional? E ainda tem outro exemplo de design system que eu
31:49 ainda não mostrei aqui, que é um mais profissional ainda do que aquele do V0. Eh, a IA, ela só resolve as coisas que ela já sabe resolver. Ela não vai resolver coisas que eu tenho a referência que tá dentro na minha cabeça. Então, eu preciso conseguir trazer a clareza pro prompt. Então, por exemplo, a base é, eu eu falei aqui, né, e acho que para um eh pensando em como um podcast de produto, trazer um PRD muito simples, definido, com estrutura de banco pensada, com a lógica de navegação, eh trazendo todas as todos os requisitos do produto mesmo, né, eh, estruturado, trazer vários arquivos em Markivos e jogar isso pra IA
32:35 vai trazer toda a clareza que que a IA precisa. Quanto mais claro, mais bem estruturado o que a gente pede, melhor vai ser a solução. Eh, também uma das coisas que eu comecei a perceber é que a IA ela não é a melhor forma de começar as coisas do zero. Ela não é um chegar na I falar assim: "Desenvolve um software para mim que vai fazer isso, isso, isso e isso". Ela não vai fazer. Ela vai travar, vai encontrar um monte de barreira, porque não é o foco da IA. Os wrappers como o V0, o Bolt, ele até conseguem ali minimamente trazer alguma coisa, mas eles também travam em alguma em algum aspecto. A I ela manda muito bem se você pega e manda aquilo muito claro e muito
33:21 documentado do que você quer desde o começo e você vai evoluindo aquilo. Então a minha lógica do botão foi porque eu percebi que se eu mandar uma coisa pequena, ela me devolve uma coisa pequena bem feita. Se eu mando uma coisa grande, ela me devolve uma coisa grande, toda torta. Tanto que aquele meu primeiro design system que ela fez, ficou todo torto e tá tudo bem. Ali era teste, era para isso. Mas se fosse para um projeto real, tivesse prazo, tivesse deadline, tivesse cobrança em cima de mim, eu eu não poderia mandar algo grande e falar assim: "Entrega para mim". Agora se eu mandei, mande cria um botão usando as melhores práticas, fazendo isso, ela resolve, né? Tipo, ela e aí ela melhora, ela vai melhorando conforme você vai ensinando ela a usar. né? A gente sabe que ela aprende com o comportamento de quem usa. Então, uma das coisas que eu tenho feito bastante é
34:06 nos meus promptes e a minha forma de me comunicar com Iá, é sempre trazer aquela coisa eh pragmática do tipo, olha, o que você entregou não foi o suficiente, aí eu tento explicar o que o que não ficou bom, tento corrigir, tento dar caminhos, tento propor ideias, eu trabalho junto com a eu não falo tipo, não ficou bom, resolve aí. que muita gente, eu sei que que tem feito isso. Eu vejo gente que vai lá, vem, fala assim: "Ah, eu não consigo desenvolver alguma coisa no V0, no repit ou no Bolt ou no que for". Aí, por que que você não consegue? Ah, porque chega uma hora que ela trava. Eu falei: "Mas o que que tá acontecendo?" né? Eu vou ver o que a pessoa manda, ela: "Ah, não ficou bom, faz de novo." Esse é o esse é o prompt da pessoa. Não ficou bom, faz de novo. Aí ela não sabe, não tem nem ponto de partida para ela tomar uma decisão ali em cima dela. A gente vai pegar e
34:52 refazer de qualquer forma e aí começa a importar mais ainda o projeto. Eh, a lógica, né, de eh sempre pedir e trazer documentações, né? Eu acho que o que eu mais tenho percebido é, por exemplo, você vai ter uma staack de tecnologia por trás, aí vem agora para poder mostrar o meu outro projeto de design system. Eh, uma das ferramentas mais comuns dos desenvolvedores hoje é o storybook para fazer design system. Ele é uma ferramenta robusta de mercado, funcional, só que ele é gigante. Tem um monte de plugins, adonisas que você pode colocar para deixar ele mais eficaz e mais robusto. Aí eu pensei comigo, e se eu pedir para ir construir um system para mim no storybook, já começar a partir do storybook? Só que para fazer
35:39 isso, qual foi a primeira coisa que eu pensei? Eu não posso simplesmente pedir um design system e nem posso começar, tipo, me constrói um botão. Eu preciso começar pela stack de tecnologia. Então o que que eu fiz? Eu peguei, fui atrás de toda a documentação, baixei toda a documentação dos caras do storebook, baixei tudo em arquivos MD, peguei e coloquei no Aqui eu tô usando bastante o cloud code, né, que é direto no terminal. Baixei toda a documentação em MD, mandei para pro em em Mark dentro do Cloud Code que é, deixa eu só compartilhar agora aqui de novo. Mandei toda tudo e falei assim:
36:28 "Desenvolve um design system para mim com quatro componentes e trazendo as melhores práticas de documentação, design e front end para dentro do Storybook. e mandei toda a documentação junto, né, de o que eu queria partir. E ele trouxe, eu demorei algum tempinho de de configuração, ele vai e volta, corrige, teve não dá para mostrar o histórico que, infelizmente, ele ele ele não guarda nesse histórico, né? não é igual V0, mas eu consegui construir isso aqui. Tudo foi feito usando o Starbook. Todas as decisões, todos os adons que ele trouxe aqui para tamanho de tela, para fazer poder mostrar espaçamentos, eu eu fui simplesmente pedi para ele
37:13 trazer as melhores melhores práticas e os melhores possíveis. Expliquei o que que eu queria, quais quais eu queria. Falei que eu queria bastante sobre usabilidade. Então ele trouxe aqui alguns plugins, um plugin de acessibilidade que traz ali algumas algumas estruturas, né? Trouxe todos os os meus exemplos, os meus tokens que eu queria. Aí aqui em na prática com vocês, eu vou pegar e vou mandar aquele Jzom e falar para ele corrigir os tokens com aquele Jzom. Eh, deixou >> ao vivo, hein? ao vivo. Vai ser ao vivo. Pode dar errado. Pode dar errado, mas a gente a gente deixa dar errado mesmo. >> Editor, não corta se der erro, hein? Não corta. >> Vamos lá. Eh, viu aqui, né? Já ele já
38:00 apareceu aqui. Não dá para compartilhar as duas telas, mas a aqui embaixo, deixa eu só mostrar eh como é que eu posso fazer. Eu tenho uma ideia melhor. Eu vou mostrar ele pequ ele separado aqui junto com o cloud code. Cloud code. Ah, cadê? Aqui o eu tô com ele no meu terminal. Ele é uma pasta local no meu computador. Tá aqui GitHub. Ele é essa pastinha design system. Ele foi todo feito pelo cloud code. O cloud code é esse carinha aqui que roda no terminal. Eu posso mandar promps para ele, mas eu não tenho, por exemplo,
38:45 ferramentas como mandar anexo. Então para trabalhar é muito mais linguagem natural e paciência porque ele vai dar umas travadas e problemas em alguns momentos. Porém, ah, eu já conversei com alguns desenvolvedores e o código do cloud é realmente muito fiel e real. ele é muito acima da qualidade dos outros códigos que a gente vê por aí. Ele ele quase passa como um código feito por um humano com altas habilidades, assim, é bem bem bacana assim o o feedback que eu recebi sobre isso. Então, comecei a usar bastante ele eh como ferramenta. Então, eu vou pegar aqui aquele meu eh cadê aquele meu hum
39:33 vendo aqui. Aqui é aquele meu Jon que eu exportei do Figma. Eu vou simplesmente pegar esse cara, eu vou colar ele aqui, mas eu vou explicar o que eu quero. Quero que você revise todos os meus tokens do Starbook com e aplique corrigido com os tokens desse Jzon. Já. E aí eu simplesmente vou colar todo esse meu Jzon aqui. Ele demora um pouquinho porque é o terminal, não foi feito para para copiar e colar texto.
40:21 Tá demorando um pouquinho mais do que eu gostaria, mas ele vai. >> Mas é que também o Jzon é gigantesco, né? Ó o tamanho do Jzon que eu mandei, né? Rola, rola, rola, rola, rola. >> Vai demorar um tiquinho, mas não tem problema. Aqui o objetivo é fazer uma correção, certo? Tá? Então o objetivo é, então o prompt o propert em si não é tão não é tão eh rebuscado, né? É apenas você tá pedindo e dando um não é um parâmetro, mas um exemplo do de como ele tem que ser tem que fazer, né? Exato. Aqui, ó, ele copiou aqui, ó, 14.000 linhas de código
41:06 copiadas. É só, é um Jzon bem robusto. Eu não sei nem se ele vai aceitar de tão grande que tá, mas vamos ver. Eh, mandei. Vamos ver o que que ele vai fazer. Tecnicamente aí lei 14.000 linhas em alguns milisegundos, né? Então é muito mais fácil do que a gente. >> Isso, né? E se der erro, a gente a gente encontrou o limite de Jon Cloud Code. Com certeza. Mas acho que não vai dar erro não. Pelo jeito aqui ele tá, ele vai demorar para ler ali o tempo natural. 20 23 segundos. Já foi. Aí, ó, vou revisar e aplicar os tokens do storybook com base no Jon fornecido. Primeiro deixo entender a estrutura atual e criar um plano de ação. Esse é o
41:52 legal do do cloud Code, porque ele ele é bem didático. Eu falo que se alguém quer aprender a desenvolver um software, você pode pedir um cloud code e vai e vai tipo: "Ah, eu quero que você me ensine a fazer tal coisa". Ele vai fazendo no terminal e vai te ensinando a fazer também na prática, porque ele faz, ele valida e depois ele valida o que você fez. Eu eu tenho usado ele bastante para fazer meus testes. Tem sido uma ferramenta bem robusta e que entrega alguma coisa eh funcional, sabe? Ó, já tá acessando aqui os códigos, já tá mexendo. Ele tá acessando essa pasta aqui, né? Então ele tá navegando aqui dentro. OK. Como que que você acha que eh no dia a dia de o do design, como que ele usaria a IA? Seria basicamente dessa forma que a gente tá
42:37 vendo aqui ou seria de uma outra maneira? >> Olha, a gente fez alguns testes na Ingress. Um dos testes que a gente fez recente com 1 V0 foi basicamente transformar um protótipo estático do Figma em um protótipo mocado dentro do V0 porque já tá usando o código de front end. E aí esse código de front baixou e os devs assumiram e fizeram o back end em cima dele usando também a IA, mas de forma eh mais estruturada. A gente entregou um protótipo em uma semana e eles em mais uma semana e meia entregaram um software pronto, assim já com API conectado e tudo mais. Então assim, dá para pensar nessa estratégia de talvez o designer possa
43:23 usar a IA para construir a base do trabalho dele e aí dali um dev assumir de forma estruturada, sabe? Aí aqui o o Cláudio ele ficou me perguntando, né, se eu quero que ele se eu quero que ele faça isso ou não faça aquilo. Então ele vai me perguntar aqui se eu quero inserir esses isso aqui. Aí como eu não quero ficar respondendo todas as perguntas, vou falar que ele pode fazer o que ele quiser agora. Eu também se quebrar, quebrou e eu não tô preocupado com isso. Esse projeto que eu fiz, inclusive, ele tá no meu GitHub, então ele tá disponível para quem quiser acessar no meu GitHub e ver o código e baixar e tentar rodar em casa com cursor, com outras ferramentas para ver e tentar brincar com ele lá dentro também. O link do GitHub do Gui tá na descrição, assim como todos os outros links eh que o Gui vai compartilhar. O link do que ele
44:09 falou do estudo de 70% lá também vai tá o link do do LinkedIn do Gui, do artigo, tudo vai tá na descrição do episódio para você que tá ouvindo e assistindo a gente poder fazer isso aqui. Você tá aprendendo com Guilherme Gonzales, hã, a maior especialista em design system. >> O Richard fala, fala essa depois aí alguém vem e pede uma coisa que eu não sei responder, eu falo: "E agora? >> E agora?" Não, pera aí. Aí você pede para irá, entendeu? >> É. Aí eu peço para e a responde errado, a pessoa aí dá errado e eu falo: "Ó, não, não, não pagou a mentoria, não pagou a mentoria no livro."
44:56 >> É que você não me passou o contexto todo, entendeu? >> Exato. Faltou, você tem que me pedir com promp estruturado. Sem sem o prompio estruturado não dá, >> não dá. É isso. >> E aí a gente fica vendo aqui ele fazendo enquanto a gente vai batendo papo. Se quiser me perguntar mais coisa enquanto isso, já acho que já fez já. E ele vai fazendo, né? Vai dando o feedback. Rodou, >> já rodou. >> Olha só, >> a já tá rodando. Agora ele vai carregar todos os tokens novos. Vamos ver se ele vai quebrar. Provavelmente ele vai quebrar. Se não quebrar a gente deu muita sorte. >> Não, que isso? Vai, não vai quebrar não. O que que daria? O que que daria mais audiência? Quebrar ou não quebrar? Essa é a, essa é a pergunta que eu faço.
45:44 >> Tentou rodar, não rodou. Ele ele quebrou. Então, quer dizer que Mas o legal do do Cláudio é isso. Ele ele reconhece que quebrou, porque como ele tá rodando tudo no terminal, então ele começa a rodar, aí ele vê, ele recebe o feedback do próprio terminal que deu que deu errado e ele vai e tenta corrigir. Então ele é mais, ele é um pouquinho mais eh inteligente do que a maioria dos da das Iás, porque ele não precisa que eu fale para ele que errou. Se ele tiver rodando tudo dentro dele, ele ele vai lá e fala assim: "Ah, tá dando errado". Vamos tentar de novo. >> E enquanto isso ele tá trabalhando, nosso, o seu estagiário tá trabalhando. Eh, se alguém quisesse começar hoje, o Gui, com IA, né, em design system ou na carreira de design, quais as bases que você
46:29 recomendaria, prompts, plugins, arquiteturas? Olha, eu acho que primeiro entender bastante a engenharia de prompt, como funciona. Tem alguns artigos muito bons por aí. Acho que eu posso pegar alguns e mandar. Esse que eu escrevi no LinkedIn também vai tá disponível aí, mas ele é só uma base mais de eh nos meus aprendizados e não tanto um como fazer, né, como estruturar um bom prompt, mas acho que entender, né, os tipos de prompt, um dos prompts mais legais que tem eh o que de você dar um papel para Iá, explicar para ela, falar tipo assim, seja o meu especialista, pesquise coisas para mim trazer a resposta, né? Tipo, por exemplo, uma das coisas que eu achei muito legal do do cloud, eu tava rodando
47:15 hoje e aí eu virei para ele, virei como não promotivo e falei: "Ah, a ferramenta, a a funcionalidade tal do que eu tô fazendo, eu preciso que você eh aplique as melhores práticas de usabilidade para construir esse menu lateral". E aí, eh, no meio, no meio do teste, ele simplesmente parou e falou assim: "Ah, você quer que eu leia um artigo do X Planet?" Aí ele mandou o link do do artigo do Explanet. Aí eu falei: "Tá, eu quero". Ah, também eu vou ler um um outro artigo aqui do Nelson Norman Group. Aí ele começou, ele simplesmente foi, pegou, baixou os artigos, incorporou no código e tentou usar isso como referência para construir o software. Ou seja, a inteligência artificial, por contrópria, vamos dizer assim, teve a iniciativa de melhorar eh com base em uma referência de qualidade
48:02 feita por um humano, mas ela não tinha isso já de base pronta. Isso, isso é interessante. Gostei dessa, dessa interação. Ele, ela vai, é, a sua boa, boa definição que você usou lá no início, que é como se fosse um estagiário. Ele vai, ele vai fazendo, ele vai lendo, ele vai pesquisando. >> Eh, mas exato. Eu acho que esse que é o o bom, né, de usar ele. Run Starbook. Aprender um pouquinho de terminal é bom de regra, de como funciona, o que precisa escrever, acaba ajudando, porque, por exemplo, no caso desse cara aqui, é meio inviável fazer tudo manualmente.
48:47 Eu acho que ele tá travando por causa do tamanho do do Jzon, viu? >> Ah, olha só. Então, dica, eu mandei um um Jon de 14.000 linhas. >> Não jogue um Jzon de 14.000 linhas no terminal. Isso já primeira dica. Eh, quebre o Jzon em partes. Dá para fazer isso também, Gui? Vai quebrando o Jzom e partes e vai fazendo como se >> Dá dá. Eu peguei um Jzon sem nem olhar o que eu fiz, o que eu peguei, né? Eu peguei 14, falei: "Copiei, colei". Falei: "Só, vai, manda esse cara ir, né?" Eh, provavelmente ele deve tá travando em algum alguma barreira técnica ali. Mas aí para quem quiser ver o código,
49:35 só mostrando, aproveitando enquanto ele tenta carregar ali. Eh, cadê meus repositórios do meu GitHub? Eu eu fiz esse mesmo carinha aqui. Ele tá disponível neste, não é este aqui. Aqui eh esse gitub aqui. E aí, para quem ficou na dúvida, né, ele tá rodando gratuito, dá para ver ele código funcional, tá? Isso aqui já tá tá no GitHub, né, usando GitHub Pages. Então é
50:21 aquele mesmo design que eu tinha feito, mostrado antes, só que esse aqui tá rodando a live. Pronto para quem quiser usar de referência, ver quais são os adons que eu usei, tipo on de grid, de onde mudar o tema, eh se eu quero ver espaçamento para poder ver as medidas dos elementos. Então, funciona bem para caramba isso aqui. Eu acho ele muito prático. Mas enquanto isso, vamos ver. Não, não foi. Acho que ele vai ficar tentando até amanhã. Vamos tentar fazer um prompt errado aqui em tempo real. >> Mas é isso. O acho que o o que a gente tá mostrando aqui pra galera que tá assistindo e ouvindo
51:08 é a vida real. É assim que quer trabalhar com Iá. Eh, você vai fazer, você vai quebrar, aí você vai falar, pô, descobrir aqui que um Jzom de 14.000 linhas não serve, deixa eu tentar uma outra abordagem. Não vai. Isso é tentativa e erro. Tentativa e erro. >> E aí vai, né? Aqui, nesse caso, eu tô mostrando aqui, ó. Mas esse esse aqui é o o GitHub que tá com todo o código desse design system que foi feito poria. Eh, aqui a única parte humana minha aqui dentro desse projeto foi dizer o que eu queria dentro do design system, né, que eu eu pedi expecificamente por botão, checkbox, input, radio button, assim, eu queria só esses quatro componentes, não queria deixar ele robusto demais,
51:53 justamente para não ficar pesado, porque eu não sabia o que que ia acontecer. E eu foquei em ter o a coisa mais básica possível, né? E aí tá disponível aqui. Quem quiser pegar, baixar, quebrar ele inteiro com outro IA, fiquem à vontade que tá aí para isso, para ser para ser estruturado. E para, e aí voltando aquela pergunta, né, para quem quiser estudar sobre os IA no dia a dia como designer, eu construí esse meu projeto que é o DARE Framework. Ele é um framework pensado estruturalmente para ajudar um designer a usar IA no dia a dia, né? Então ele é um projeto open source gratuito, não tem ninguém tem que pagar nada para para aprender com ele, mas ele é basicamente
52:40 uma estruturação dos níveis de eh adesão da IA dentro do processo de trabalho com design, desde um processo totalmente manual, onde eu não vou usar nada da IA, só o cérebro mão e suor, né, como eu coloquei aqui, que é o como os incas faziam, porque a gente não faz mais isso, né? A gente depende da IA até para respirar hoje em dia no nas empresas. Daqui a pouco vai ter uma I que você fala, me lembra de usar o pulmão e níveis de construção, né, do tipo como que eu vou gradualmente aderindo a IA de forma prática no dia a dia no meu processo de trabalho como designer. Então, eh, uma IA assessiva que o que a gente já conhece, Charpt, o Fig Mi, o Notion AI ali que vai ajudando a gente, mas uma coisa muito gradual, um
53:27 acelerador mais visual como Mid Journey, eh, como lei ou agora o GPT Image Onean, né? eh o um copiloto que aí eu uso a IA, mas eu lidero, só que a IA pode propor coisas, ela fica nível mais positivo. Um nível de cocriação modular. Esse projeto foi todo baseado no Atlas Framework, que é um que é um framework de IA para desenvolvimento. Então eu simplesmente fiz um fork dele pensando pro designer, né, como que se via no mundo do design. E o que eu gosto dele é que para cada nível ele eu trago essa essa quebra que é se eu tô no manual, o que que tá acontecendo no manual? Eu tenho zero dependência da IA, algum uma velocidade baixa, porque eu opero muito manualmente as coisas, mas
54:13 eu tenho total controle. Então, quando eu vou aderindo a IA, o que que eu tô fazendo? Na verdade, se eu vou pegar aqui o nível do da do copiloto, eu tô diminuindo o meu controle, então eu abdico de controlar as coisas. para aumentar minha dependência com a, mas também para aumentar minha velocidade. E eu falo que o nível do copiloto aqui é o nível mais equilibrado, né, que ele é o mais funcional ali. Mas eu posso ir também pro mais extremo, posso ir para uma automação totalmente guiada, onde eu vou simplesmente mandar as coisas na IA e vou deixar a IA fazendo as coisas para mim. E aí, tá, mas eu quero chegar lá, como que eu faço para chegar numa automação guiada? Tem também dentro desse mesmo framework, eu eu documentei quais ferramentas a gente tem ali para trabalhar, né? Então, se eu quero chegar no nível de automação completa, qual quais ferramentas eu posso usar? O que
54:58 que quais ferramentas existem? Qual que é o risco, como que eu estruturo isso de forma clara? Aí, se eu quiser explicar isso pro para um stakeholder da empresa, por que que vamos por que eu preciso que a empresa invista em algum recurso de a quais são as vantagens, né? Aumentar a produtividade, ter uma inovação mais acelerada, ter um controle mais equilibrado do processo e aí por aí vai. E tem um manifestozinho que é o que eu falo, né? A IA ela tem que ser vista como ferramenta, não como mestre. Eu não posso tô ficar totalmente dependente da IA. E o por que eu construi isso aqui é pensando muito em como design é muito fácil a gente se perder nas ferramentas. Eu vejo o mercado de design já tá anos perdido no Figma, né, de no parar de discutir coisas importantes para
55:44 discutir o recurso novo que o Figma lançou. A Iar surgiu para isso acontecer. escalado vezes 5. Muito fácil. Ah, porque o GPT me disse que é uma pesquisa é feita desse jeito. Não, não é. Vamos lá, gente. A base é nossa, o conhecimento é nosso. A IA ela só replica o que a gente dizia de padrão. Então, se a minha referência é se eu sou um designer ruim, a Ia só vai fazer eu ser um designer ruim com esteroides, né? é, é a mesma, é o mesmo processo aqui. Eh, e aí eu trouxe esse framework muito para ajudar educativamente o mercado de design a construir uma relação com a IA que seja positiva. Eh, é um framework aberto, como eu falei, ele existe para ajudar, mas o ponto chave que eu tenho falado muito
56:30 para quem me pergunta é: não se trata de você falar, eu estou no nível zero, quero chegar no nível cinco. Se trata de eu estou projeto a projeto escolhendo qual é o nível de dependência da que eu vou trabalhar. Pode ser que um projeto, uma empresa eu consiga trabalhar no nível cinco. Pode ter, pode ser empresa que eu vou trabalhar no nível um, pode ter projeto que eu vou trabalhar no nível zero. Vai depender do meu nível de consciência de como que eu vou usar IA dentro do processo. Só que o o foco é esse, é de conscientemente saber que nível que eu vou trabalhar. Ah, eu tô no nível um, quero passar pro nível dois, tudo bem. Mas não dizer, não é não trabalhar como se fosse uma corrida, né, do tipo, eu estou no zero e preciso chegar no cinco. Pode ser que não. Pode ser que você chegue, só chegue no um e tá tudo bem, acelerou o suficiente pro
57:15 seu trabalho, né? E e tem sido muito esse meu meu mote assim, quando alguém me pergunta: "Ah, como que eu faço para chegar no mesmo que você faz?" Pô, eu vejo que você mandando artigo lá, você fez um design system em cinco dias. Legal, mas eu tenho uma bagagem de 11 anos trabalhando com design system antes de fazer esse design system com IA. Tem toda uma bagagem de conhecimento, de estudo, de coisas que eu já fiz, vivenciei, conversei com desenvolvedores, vi, mexi no código, que aí é o meu terceiro teste, né? O meu desafio, o meu projeto que ainda não tá dando certo. Esse eu nem consigo mostrar ele de verdade, mas eu peguei um Zem pronto de verdade que é o do GPS, ele é opence no no no GitHub. Eu baixei a base dele e tô tentando fazer ele rodar na IA, eh, pegando uma coisa já robusta, já
58:01 gigantesca, com um monte de recursos, migrando ele de framework, migrando de estratégia, migrando, migrando o nome, mudando estrutura, mudando um monte de coisa nele. Vê se eu consigo fazer ele rodar. Esse ainda tá um pouquinho mais sofrido. >> Esse framework, esse framework pode ser usado por, por qualquer pessoa, certo? Ô, então, o link do framework do Gui tá na descrição. E, Gui, a gente vai ter que fazer um conteúdo aqui sobre esse framework, porque a galera gosta de framework. Então, eh, aí eu já aqui durante o episódio a gente já proponho a gente escrever um artigo sobre esse promo em conjunto aqui, ensinando,
58:48 trazendo exemplos. eh os inputs, outputs aqui do do do framework, eh alguns cenários assim de como usar, por que usar ali bem bem didático para que a galera eh conheça, né? Porque o que a gente usa muito é são as frameworks da gringa que foram construídas em um contexto totalmente diferente do nosso, né? Então, então quando algum brasileiro com a sua bagagem, a sua inteligência, eh, cria um framework, eu acredito que esse framework deve ser adotado por muita gente, porque foi baseado num contexto nosso aqui. É, então vale muito a pena,
59:36 então você que tá assistindo, ouvindo a gente vai ter eh um texto feito em conjunto aqui PG e GUI sobre esse framework um pouco mais didático para você eh implementar e levar para dentro das suas da do time da empresa, compartilhar nas empresas aí que eu sei se vocês adoram o frameworkzinho. É, então a gente vai fazer isso. Gu, deu certo, ó. Deu verdinho ali, hein? >> Ele disse que deu. Vamos ver se foi, né? >> Uma coisa que eu aprendi é deu verde é bom. >> Pois é. >> Se sinalizar vermelho é ruim. >> É que eu eu também assim eu vou ser sincero que eu fui muito bruto com ele,
1:00:23 né? Mandar um um Jzon de 14.000 linhas. Eu vou admitir que assim, até até eu ter ficaria com medo se alguém falasse assim: "Pega esse Jon de 14.000 Também faz ele funcionar sem olhar o que tá lá dentro, sem ver se ele faz sentido. OK. Então, ensinamentos, tem um bom prompt. Segundo, por favor, veja o tamanho do Jzon que você vai compartilhar. Eh, então, 14.000 quebra. Então, a gente já sabe. >> Não foi, não foi uma não foi uma ideia boa, né? Você vê que assim, ele ele trouxe aqui tudo que tá no Jzom, ó. Ele trouxe, ele até criou aqui pra gente comparar aqui, ó. Por exemplo, ele aqui ele tava trazendo, ó, só um design token visualização
1:01:09 e tava trazendo tudo como página estruturada aqui dentro, tá vendo? E nesse novo, ó, ele trouxe aqui, mas ele trouxe mais, ele adicionou uma página de transições, então é uma página de animações que não existia, shadows não existia. Provavelmente ele trouxe aqui um monte de coisa de de família de fonte que eu nem eu nem olhei o que tinha. Então assim, eu vou eu vou por desafio, eu vou fazer esse negócio funcionar para depois eu subir e aí eu mando assim, ó. Tá aqui a versão com os 14.000 linhas de Jon. Tá aqui. >> Isso, por favor. >> Mas ainda não ainda não foi, ainda não dá para fazer isso em tempo real, que senão vou ficar aqui algumas horas tentando. >> 2000 anos depois. Bom, consegui aqui
1:01:55 depois de algum tempo eh construir os tokens que eu tinha mostrado. Eh, agora já renderizando localmente, eu ainda vou subir essa mudança no GitHub, mas já tem aqui também o todos os tokens daquele Jzon de 14.000 linhas, né? Então todos eles estão aqui. E aí eu adicionei mais um recurso além de ter feito isso, que foi mostrar uma coisa que tem dentro daquele design system do Figma, o one title e o Y, que é colocar o tema light ou dark de acordo com a necessidade, né? Então, se eu mudar o o tema, ele reconhece aqui e aí ele fala qual que é o tema que eu tô usando. Aí ele tem um um
1:02:43 demo aqui de como funciona esse tema e tem um showcase completo do tema também. Não é perfeito, claro, tem um erro aqui, um erro ali, uma coisinha para corrigir, mas é uma interpretação bruta da IA, de uma coisa que era um Jzon bruto também, sem nenhuma referência, documentação, sem nada. Eu simplesmente peguei aquele Jzon e mandei ele carregar. Para quem quiser entender um pouquinho do que eu tive que fazer, na verdade, foi um trabalho bem braçal. Eh, eu peguei aquele Jon, em vez de mandar ele como copiado aqui, porque aí dava o problema de interpretação, eu mandei ele pra pasta do design system, né? Então, aquele Jon veio para cá e fiquei fazendo vários testes, que é o trabalho de formiguinha que tem que fazer com a IA como suporte no vibe
1:03:30 coding, que é fazer vários interpretadores. Então, eu pedi para ele interpretar em um, em outro, em outro, em outro. Ele foi corrigindo e melhorando a interpretação do Jason até ele encontrar um entendimento completo desse Jon. Então é um trabalho chato, porém vamos ser sincero que ele faz muito mais rápido do que eu pedi para um dev ficar fazendo um Jzon por vez, uma correção por vez, né? Ele fez tudo em coisa de o quê? da hora que a gente gravou para cá, coisa de 4 horas, ele interpretou todos os tokens e corrigiu todos eles e aplicou já em stories específicos para dentro do nosso eh storybook, né? Então é bem importante entender como ele funciona, né? >> OK? A gente já falou sobre como criar um design em 5 dias, você já falou do framework, você já falou eh dos seus
1:04:17 projetos. Aí vou fazer uma vou fazer uma pergunta pra gente se encaminhar pro pro final. É como que você vê a maturidade da área do da área de design aqui no Brasil e como que você vê a maturidade dos das empresas relacionad ao designing system? >> Pergunta é complicada, hein? Vamos lá. Mas vamos lá. Eh, o que que eu enxergo? Eu acho que tecnicamente, do ponto de vista técnico, design técnico, um brasileiro, ele tá acima da média do que eu vejo de discussões rolando no Internacional. Porém, o brasileiro sofre de uma coisa chamada síndrome do viraapa. Então, a gente sempre acha que a gente tá abaixo
1:05:02 do da média, mesmo quando a gente já passou da já passou do teto da média faz muito tempo. Então, eu acho que mercadologicamente falando, os designers brasileiros são eh capazes de serem mais referência do que muitos muitos lá de fora. Quando eu trabalhava na WPLE, eu entrevistava muitos designers de fora para ajudarem equipes globais a contratar. E a média de todos que eu entrevistava eram muito ruins, eram tipo muito direcionados para uma forma de trabalhar específica. Eles eram muito eh focados em algumas em frameworks específicos, tipo eh design thinking ainda era um elogio, tipo assim, framework,
1:05:48 o que eu falo é o cara não saber sair da CSD, né? ele entrar lá e falar assim: "Meu trabalho é trabal é montar uma CSD e responder as dúvidas". Eh, então acho que assim, do ponto do meu ponto de vista, design eh, de forma geral aqui no Brasil tá acima da média. A gente é muito persistente como eh na ação de tentar perseverar em cima do sofrimento. Então, a gente vê ali eh ferramentas muito caras, o Figma tá extremamente caro pro brasileiro pagar, né? E e tanto que eu vejo assim, pô, vamos, não consigo pagar, que eu faço? Eu vou me virar com gratuito e a gente consegue fazer acontecer, né? Porque a gente tem que colocar aqui, vai $ do Proiro.
1:06:37 Vira o quanto agora? 15. Tá virando, >> acho que é R$ 75. Não, 75, 80. >> Deixa eu ver. 15 está dando R$ 80. R$ 80. Agora pro brasileiro médio, R$ 80 por mês já é já é uma grana alta em uma ferramenta só, né, que não faz tudo sozinho. E aí você vai ver, por exemplo, o o Figma Organization para companhia, vamos dizer assim, 500 designers, assim, ó, vamos colocar 10 designers pagando eh $0. Então vamos 600 mensais, pô. A gente tá falando de R$ 3.200 para uma equipe de cinco pessoas. É quase o salário de um, quase um salário
1:07:22 de uma pessoa ali só como uma ferramenta, né? Então, e fora que a gente tem outras ferramentas, outras necessidades e coisas por aí vai. Eh, então assim, eu vejo que o brasileiro tem esse poder, né, de ser um pouco mais persistente, resiliente a a estruturas. E o nosso vielatismo faz a gente achar que a gente não é. E aí, do ponto de vista de olhar para design system, eu diria que a a isso se inverte um pouco porque a gente ficou muito vendido a cursos recentes. eh, a estrutura, a metodologia de venda de cursos e muito prejudicial assim pra forma, pra forma como o designer evolui, porque a gente vem muito curso
1:08:08 eh com alta qualidade de gravação, mas baixo conteúdo versus muitos conteúdos inversamente proporcionais, né, que não conseguem ter ali uma um investimento bom ou, por exemplo, o professor às vezes não é um cara eh muito dinâmico na aula. aula, mas quando você vai ver o conteúdo é riquíssimo, só que ele não consegue vender porque, sei lá, ele não consegue usar a fórmula do lançamento do Eco Rocha para ser venda massiva, como a gente sabe que é o a estratégia, que é mar que ali a estratégia é vender, é fazer dinheiro. Não tô preocupado se a qualidade do curso é boa ou não. Eh, salvo engano, né, até se você for ver os próprios materiais do Érico Rocha sobre o assunto, ele fala que você precisa entregar aquilo que você promete.
1:08:56 Só que como você mede que a entrega realmente atendeu a expectativa do que você prometeu? Não tem, né? não tem embasamento ali. E eu acho que design system é um é um negócio que não ficou claro para ninguém até agora, porque design system ele é uma coisa meio produto, meio projeto, meio desenvolvimento, meio design, meio meio eh meio lá, meio car é parte de todo mundo, não dá para só uma pessoa fazer tudo. Eu falo, por exemplo, isso que eu fiz aqui, legal, eu fiz a documentação, eu fiz o componente do código usando a IA, mas tem a parte mais difícil de todas, que é a manutenção disso no dia a dia, é conseguir engajar as pessoas em usar exatamente o que eu fiz aqui, em os desenvolvedores não quebrarem o código para fazer a versão deles, em o designer
1:09:41 não ir lá e e ignorar a documentação do Figma. E essa parte não dá para ensinar, porque por mais que eu ensine teoria como isso acontece, na prática, cada contexto vai ser um contexto diferente. Quando eu comecei a, eu tentei fazer meus cursos de design system, aonde eu desisti foi quando eu percebi justamente isso. Falei assim, eu posso ensinar teoria de tudo que eu quiser, só que quando eu ponho na sala pessoas de empresas diferentes, com contextos diferentes, eu não consigo igualar o nível de maturidade de todas elas, porque tem uma empresa que tá muito
…
