Como clonar o design System de qualquer site (sem código)

Fala lendários e lendárias, estamos ao vivo aqui para mostrar para vocês. Bom, já vou mostrar minha tela aqui porque isso aqui que vocês vão ver hoje tá maravilhoso. [limpando a garganta] Eu criei aqui uma galeria ah de design system para vocês, design.md, né, para vocês poderem utilizar em qualquer projeto, como vocês estão vendo aqui. E eu vou mostrar como vocês podem extrair design. MD de Qualquer site para servir como inspiração para criação e como utilizar basicamente isso aqui. Ah, então hoje essa live aqui ela vai ser uma continuidade, digamos assim, da live anterior, onde eu

já falei um pouquinho sobre o design. Se você não assistiu, recomendo que você dê uma conferida lá, mas também não se preocupa que eu vou cobrir tudo que seja importante sobre esse assunto aqui nessa live. Então, vou falar um pouquinho sobre o Design.md, vou falar um pouquinho também sobre como utilizar isso, né? Como conseguir fazer as exrações de qualquer design. Isso pode servir de referência para poder construir construir qualquer coisa, basicamente. Depois também eh quero mostrar para vocês aqui como você pode, utilizar isso, né? Depois que a gente faz esse processo aqui, depois que a

gente já tem ah um design.md, como é que a gente pode Extrair o nosso, como é que a gente pode utilizar isso na criação ah de qualquer projeto depois? E isso muda radicalmente a velocidade na criação de projetos e também na consistência. Uma das principais dores que as pessoas têm com o IA é a consistência que a gente consegue com ela. Por quê? Porque ela tende, ela é probabilística, ela ela ela tende a sempre fazer alterações e normalmente alterações naquilo que a gente nem deseja muito, né? Muitos de Vocês devem ter testado já, seja um

lov, seja um bolt, seja no próprio cloud code de você fazer alterações e pedir alterações simples, né, num botão específico e acabar aí modificando todo o resto. Existem formas da gente proteger isso neste cresce guard rail e o design. MD do Google foi testado no stick stick, eu nunca lembro como falar isso aqui. Ah, stick. Se alguém souber aí, escreve para mim nos comentários. Mas esse stick do Google, para quem não usou ainda, ele é muito bom para fazer para você jogar referências aqui e ele começar a construir variações das referências. Ah, como é que

eu gosto de fazer, né, a estruturação quando eu vou fazer um novo design, tá? Toda vez que eu vou fazer um novo design, eu gosto de pegar e ter referências, né, Para começar de algum lugar, de algum ponto. Como é que eu faço essas referências? Eu gosto, tem existem trocentos sites, né? Existem muitos sites que tem templates, modelos e por aí vai. Ahã. Eu gosto de usar o Pinterest. Ele é mais simples nesse sentido, porque ele não necessariamente é um site de design como Beh, ah, ou como outros, né? Tem o Benin, tem vários aí,

mas eu gosto de manter as Coisas simples, né, de uma forma que objetiva. Então eu prefiro, ao invés de pegar vários e vários sites de referência, eu prefiro ter apenas um. Então, qual que é o site de referência que eu utilizo? Eu utilizo como referência o Pinterest mesmo. Então, quando eu vou criar um design, a primeira coisa que eu faço é pegar referências daqui e eu salvo de uma pastinha. Essa pasta eu baixo ela ou no Aolex, eu tenho ela, ele tá integrado Com o BR, ele baixa as as páginas do BR. E daí o

que que você faz com isso? Ah, eu vou para aqui o skit para fazer às vezes mudanças, né? Eu jogo aqui alguma alguma página e ele vai alterando. Por exemplo, que que é legal daqui, tá? E isso tá vem muito antes do cloud design, né? Eh, se tem uma coisa que eu posso falar bem do Google, é do AI Studio. E o AI Studio é de graça e é muito bom para criar design. melhor Nos meus testes do que inclusive o Cloud Design. Ah, e que por que que eu tô contando, falando para vocês, né,

do processo? Porque como é que eu descobri, né? Porque eu uso o design.md já faz um tempinho já. Acho já faz uns dois meses, três meses. Como é que tu usa isso há tanto tempo? Se eles lançaram isso faz, né? Faz aqui h uma duas semanas que eles botaram no ar, talvez Menos. Como é que tu utiliza isso há tanto tempo se eles botaram no ar há duas semanas? Porque tem um cara que se chama Plío, que fica hackeando essas e fica eh extraindo, né? E o Plío, ele tinha vazado já o código deles e

eu já tinha entrado aqui, né? Como eu gosto sempre de mexer nas configurações, eu entrei aqui, vim, fui mexendo nas alterações, cliquei aqui, eu vim clicando, daí eu vi que tinha design system aqui, eu vi que Dava para criar um novo importar. Daí eu vi isso aqui, ó, importdesign.md eu, ui, dá para importar design.md. Daí [roncando] eu vim aqui mexi nas, ele eu vi que ele tinha criado um template, ele tinha criado um prompt, né, um system prompt aqui. E eu peguei esse system prompt e comecei a fazer a abstração do system prompt. Então eu

já tô fazendo, trabalhando com design.md já faz alguns meses, o que me deu no para melhorar Algumas coisas. Por quê? Porque o design.md que eles publicaram aqui, o Google publicou, ele é um design.m, como é que eu posso dizer? Bem conciso, bem conservador, tá? Ah, então ele é bem conservador. Isso quer dizer o quê? Isso quer dizer que ele não abrange todos os componentes necessários para que a gente consiga ter um design system eh que seja mais fiel. Então é isso, de forma bem resumida, assim, sabe? Ele é bem legal. Tanto que eu uso ele

como referência. Ah, esse aqui, mas até porque eu acredito que porque eu uso ele como referência, porque toda empresa que lança algo antes das outras acaba criando esse padrão que acaba se tornando universal. Vamos lá. Skills veio da Antropic e agora é universal. todas essos agentes. Tanto que aqui, ó, o Google Demenai, ele usa ponto agents high skills. Então, tem aqui o agents skill aqui, ó, Para fazer isso aqui. Ah, o foi a Antrop que lançou o MCP. Todo mundo começou a lançar, usar o MCP. Então é uma boa prática você pegar o que uma

grande empresa fez como referência de tokenização, de estruturação, para que você tenha algo que seja mais fidedigno e fiel ao que for lançado posterior. Mas aqui a gente tá falando de algo que não tá nem na versão um, tá na versão 0.1. Então eu humildemente Fiz melhorias aqui. Porque eu tô dizendo, né, humidemente? Porque pode ser que altere alguma coisa, etc. até que eles consigam fazer algo melhor. Mas por enquanto, ã, o que eu criei, ele tem ele tá mais completo, né? Porque tem componentes, elementos que permitem que a IA se comporte criando designs mais

complexos do que esse aqui que eles lançaram faz. Então, beleza. E o que que é isso, Alan? Esse design.md, o design. MD Como se fosse um prompt, mas não é um prompt. Eu vou mostrar para vocês por porque ele é ele é um system prompt. Como assim? Olha, um system prompt, ele é um prompt que deve ser carregado toda vez que a IA faz uma interação. Então, diferente de um prompt que você vai lá e dá uma vez, né? O prompt você vai lá e dá uma vez. O system prompt ele é sempre carregado nas

sessões. Uma vez que você tem o design. MD, você Pode colocar ele como, por exemplo, o no Lovable, você pode colocar ele como um system prompt para ficar sempre carregando. Ah, no Stick também, no EAI Studio também, ou seja, qualquer lugar que você quiser, você pode colocar esse ponto MD e ele vai estar sempre carregando, ele vai estar sempre otimizado a daí a criar todos os designs daquela forma. E daí você começa a ter uma consistência Muito grande. Vou dar um exemplo por aqui, ó. Eu queria criar um design de um uma plataforma de educação

infantil. Você pode ver que existe uma consistência que foi isso aqui eu fiz em dezembro. Dezembro, janeiro, fiz em janeiro. Pode ver que tem uma consistência aqui, ó. Essa consistência ela se dá por quê? Por conta do design system, que é o quê? que agora é o o design, o design system, não é o design system, mas é o o o o system Prompt, né? O design system como um system prompt. E agora tem como a gente adicionar, inclusive aqui, ó, adicionar um design system com design.md. Você pode adicionar ele aqui, né? Ó, clico aqui

em novo, create new importdesign.md. Então você importa já o design. MD dessa forma você tem, tá vendo a consistência entre todas as páginas. Pode ver aqui, ó, todas as partes existem uma consistência visual. Posso até trocar as Cores de um menu em uma e outra, né? Mas existe uma consistência visual entre todas as páginas. Então é isso que ele vai permitir que vocês façam, tá legal? Alon. E como é que eu faço isso? Eu vou trazer para vocês algumas ideias aqui do meu processo, como eu faço. E para quem ficar comigo até o final da

live, eu vou dar um presententão, que é o quê? Eu vou entregar a skill que cria isso aqui para mim, a skill que entra em qualquer site e consegue extrair aqui, Ó, o design.md de qualquer site. Então, ela vai lá, ela entra e consegue fazer a extração de qualquer. Aqui eu tenho todos os sites, né? Ã, vários sites. Todos os sites que eu que eu fiz, eu já coloquei aqui para vocês também poderem navegar e conseguirem pegar. Então, se você quiser criar, por exemplo, um site inspirado na, sei lá, no Itaú, tá aqui, eu quero

criar um site inspirado na Tropic, tá aqui. Inclusive, para você ver o quanto Isso aqui é poderoso, eu criei até uma demonstração aqui usando Lovb mesmo. Ah, tu usa Lovbow, eu uso principalmente close design. De vez em quando eu uso Lovable só para subir al que eu queria com close de design pro meu time poder editar, mas eu quis fazer aqui um teste com o Lovbow. Porque ele é ele é uma coisa que tende a não performar muito bem. Ehã, onde eu só dei um prompt aqui, ó. Eu só dei esse prompt aqui e ele

criou Um blog como se fosse com o estilo downtropic. Qual o prompt que eu dei? Esse aqui, ó. Crie uma line page com sobre novidades de A seguindo este layout. Só isso eu escrevi. Eu escuá. Mas como é que ele conseguiu ficar nesse sentido, né? dessa forma aqui. Tá todo bonitinho, tá com se vocês abrir aqui o site da da Antropic, deixa eu ver o que o siteopic. Ainda mais eu abri o blog deles por aí, você vai ver que tem uma semelhança, Ó, os em todo formato. Deixa eu ver aqui o blog deles. News.

E aqui, ó, formatinho ali das coisinhas aqui, a tipografia, espaçamentos, background, o footer preto. Eu fiz um mais evoluído ainda também que vou mostrar para vocês, que é esse aqui, ó. Ah, deixa eu lembrar onde é que ele tá. Ó, esse aqui é o Dropic. Ele também ficou aqui, ó, fundo preto, etc. Vou mostrar para vocês o outro que eu fiz também ali, que é Uma extensão, né? Um deles é esse aqui, ó, Red Pine, onde daí tem toda a tipografia, tem todos os elementos, tem tudo aqui. E o que que que por que que

ficou tão bom assim? Por, né, de uma uma com um apenas um prompt por causa do design. MD. E eu posso fazer mais do que isso, né? Eu posso abrir aqui, venho em configurações, venho aqui em projeto settings e coloco aqui como memória, né? Agora eles Mudaram o local aqui. Deixa eu ver aqui. Files. Eu posso pedir para ele deixar isso aqui, ó. Deixe esse esse deixe o design pbd que eu mandei aqui como informação do seu conhecimento para carregar a cada promptilder. Mas tem um lugarzinho aqui para botar, mas como eu não mexo muito

com lobby, eu não eles trocaram, eu não lembro onde é que é a knowledge aqui, ó. Aqui, ó. Colo aqui o system prompt agora, né? Que que você vai fazer daí? Você vai pegar esse cara aqui, tá aqui, ó. Copiar design. E deixa eu vir aqui. É isso aqui. Copi design. Venho aqui e colo. Pronto. A que mais de 10.000. Eu tiro alguns, vou deixar ele adaptado. Eu tinha um adaptado pro para esse cara aqui. Essa parte final vou tirar aqui para É bem limitado O número, né? Aqui foi. Vou deixar um pronto para esse

e salvo. A mesma coisa em outros lugares. Então, no momento agora ele vai ter sempre as referências aqui para poder utilizar. O que que isso vai permitir agora? Que você tenha essa consistência em todas as páginas. Agora, como alir isso? Eu criei uma skill que faz isso com muita economia de token. Por quê? Porque se você deixar LM rodando para fazer toda essa análise, você vai gastar Bastante token. Mas eu criei vários scripts aqui, fiquei, eu tô quatro dias criando isso aqui. É algo que vai est disponível pros meus alunos do IX Enterprise e do

Iox Advanced. Ah, mas eu vou, para você que tiver aqui nessa labal, eu vou entregar, eu vou mandar uma página para você ali, você coloca o seu e-mail e baixa essa skill. Ah, como é que funciona essa skill? Ela é bem simples de utilizar. Deixa eu mostrar aqui. Você vai tá, né? Eu vou entrar aqui. Você vai est no, ela ela é uma skill, então ela funciona com Cloud, com Codex, com Gemeni. Ela funciona com qualquer um. E você não precisa estar com iOS instalado. Eu deixei ela de uma forma que qualquer pessoa pode utilizar.

Ela se chama design.md. Você vai escrever design.md. Você vai pegar um site, vamos pegar algum site, pegar o bir, por exemplo, colo aqui, dou Enter e ele vai fazer todo o processo aqui de extração desse design. MD do beren. O que que ele vai gerar aqui? Deixa eu mostrar para vocês. Ele vai gerar um arquivo que você vai poder utilizar daí para fazer esse processo. Aqui são os que foram extraídos, ó. E eu vou abrir um aqui para vocês. Abrir o da própria Antropic Lendária. Aqui tem o design. aqui e tem aqui, ó, preview. Então,

ele cria esse aqui. Ah, aqui você vai ter, né, ele vai extrair todas as cores, vai extrair os elementos, ó, vai inserir tudo para vocês e você vai poder utilizar. Aí, aqui tá o design.md que ele vai extrair e você consegue utilizar ele. Ele já tem uma versão aqui, ó, inclusive para você baixar aqui, ó, copy design, copiar o Prompt paraá. Mas se você já é desenvolvedor ou trabalha com isso, você pode copiar também só as configurações de Tailwin, só o CSS, só o estilo e tudo mais. Ã, e daí, beleza, daí você vai e

lembrando, né, isso aqui é algo principalmente para você conseguir destravar. Por quê? Porque você não quer ter, né, um site que é igualic. Você quer pode pegar, você pode gostar De ter a referência deles, né, a os espaçamentos, talvez a como é que eles fazem aqui a os menus e tal. E depois você vai naturalmente editando, né, o processo ele para começar que assim as variáveis que eles têm são inúmeras. Então, mesmo se você quiser fazer igualzinho, vai dar um trabalho do caramba fazer igualzinho. Ah, o design.md, que é extraído sites, não tem a intenção

de fazer um site igual, tanto que é um design p que eu já Deixei bem claro aqui, ó, design. MD inspirado em aí, por exemplo, Antropic, não é para deixar igual, mas é para que você tenha um ponto de partida, né? Um ponto de partida. Inclusive você pode pegar vários que você gosta. Por exemplo, cara, eu gosto desses cinco sites. Você pode extrair o design. Cinco sites, depois pedir para ir a mesclar eles com base naquilo que você mais gosta. Eu gosto mais da tipografia desse, gosto mais do portão desse. Ah, e Isso é um

processo natural, né? Em design existe um conceito de moodboard. Que que é o moodboard? moodboard, um conceito de design, é basicamente, né, se a tradução literal seria um um um dashboard, um board, uma um local de humor, né, moodboard, que é basicamente é o que você quer expressar com seu design. Então, o que que você faz quando você vai querer criar um design? Você vai pegar Criar aqui. Eu, que nem eu falei para vocês, eu gosto de simplificar as coisas. Então, ao invés de eu ter vários e vários sites diferentes que eu vou ficar navegando

e procurando, eh, baixando e por aí vai, eu prefiro ter um só eh, pro design em si, né? Não para as animações. Animações eu posso usar outra coisa, pegar outra referência, mas essa parte de design eu acabo usando Pinterest mesmo, bem simpleszinho. Como é que é o Processo que você faz, Alan? Eu tá vendo que eu tenho dashboard aqui, então eu tô, fui criar o dashboard prox. Que que eu fiz? Eu peguei várias referências de design, de elementos, tá vendo? Ah, e o que que é legal do Pinterest é que na medida que você vai

adicionando dentro dele referências, ele vai te entregando outras ideias que são similares àquelas. Beleza? Eu fiz isso, fiz aqui, peguei todas a as referências E tudo mais. Agora, o que que eu vou fazer? Ó, isso aqui tá bem legal. Ahã. Se eu jogar isso aqui, essa referência dentro de um do ticket aqui, né, ele consegue gerar variações para mim. Então, quando eu quero criar vári quando é que você vai usar esse aqui do Google All, quando eu quero variações, por exemplo, eu joguei essa aqui, ele criou essa aqui, né? Eu joguei essa e foi criando

algumas outras variações, ó. Quando você quer criar variações, você Utiliza ele. Que que é legal também dele? Ele tá integrado com o E Studio. Lembra que eu falei que o E Studio ele ele é até melhor que o pelo menos atualmente, né, que o Cloud Design. O E Stú ele tá integrado com esse cara aqui. Então se eu clicar aqui e exportar pro E Studio, ó, exportar, posso exportar pro Studio aqui, ó. Vou criar aqui. Que que ele vai fazer? Ele já vai criar o design HTML para mim. Então, cliquei ali, ó. Pronto, ele ele

gerou para mim aqui o prompt e gerou a imagem. Agora só dou construir e pronto, ele vai construir agora. Ele vai construir toda a parte agora daquele layout para mim, o HTML inteiro e etc. Então é uma forma que eu gosto de, ah, onde é que você começa criando com cloud code design? Não, normalmente eu não começo com cloud code qualquer design que eu vou criar. porque eu gosto de interagir com ele e Tudo mais. Então eu prefiro fazer o quê? Tem dois lugares. Eu sempre criei com Studio. Ah, e recentemente também estou começando. Ó,

aqui, ó, já criou. Ah, ele criou, ó, ele criou algumas. Ah, ele tá fazendo isso agora. Ele cria, o Studio, ele cria algumas variações do que eu mandei para ele, né? Então, aqui, ó, já criou algumas variações do que eu mandei para ele. Eu gostei mais da primeira da Ark mesmo, não é? Mas tem esse aqui mesmo. Selecionou o Design e ele vai começar a criar agora. Mesma coisa aqui. Aqui eu posso mandar fazer aqui as configurações para que ele tenha, ele vai, depois que ele criar aqui, ele vai habilitar para mim o chat, as

configurações de chat. E eu posso configurar aqui daí o aqui, ó, posso configurar o design system dele aqui. Tá vendo? Ele já começou a criar um para mim com base naquela naquela imagem que eu mandei para ele. Mas o que acontece? Eu posso agora vir aqui um desse que eu peguei, por exemplo, tá aqui, digamos que eu quero tropic mesmo, por exemplo. Vamos modificar tropic mesmo. Vou pegar aqui o Dropic. Copio o design system deles. Deixa eu pegar um. Na verdade, vou pegar um escuro. Esse aqui da Versel. Pegar o da Versel Linear. Open AI.

Cursor. Cursor. Tá legal. pegar o do cursor. Ó, aqui o design deles. Copio e venho aqui [limpando a garganta] no E Studio e cola aqui. Vou esperar ele terminar de criar até para vocês verem o design que ele vai criar aqui. E daí a gente cola esse ped para ele alterar em cima disso. Ah, agora que a gente tem, né, tá prototipando aqui, tá criando. E que é legal disso tudo, né, que eu tô Mostrando para vocês, eh, [roncando] a velocidade que a gente vai conseguir criar com qualidade, porque uma coisa eh você pedir para

ir, ah, assim, crie um design específico para mim, né, ah, cria uma land page, cria um dashboard, cria. Outra coisa é você entregar para ela todos, todas as informações. Então, a gente vive na era hoje muito mais da engenharia de contexto do que qualquer outra coisa. engenharia de Prompt, engenharia, assim, qual LLM utilizar melhor no momento que a gente tem prompts e hardness, ah, que a gente tem ali a essa engenharia de contexto, que é você ter as informações que você precisa da da forma estruturada certa, você tem um harness, né, essa proteção via código

necessária, a gente consegue criar coisas utilizando modelos muito mais baratos e com escala. com a qualidade similar igual ou similar A de modelos caros. Por exemplo, tem coisas que eu tenho feito aqui com o Haiko que chega quase a mesma qualidade do por isso aqui mesmo. Esse processo aqui, ó, eu comecei criando essa essas trações, eu comecei fazendo com opos. No momento que eu fui descobrindo os padrões que ous fazia, que que eu fiz? Eu consegui criar o hardness, ou seja, os códigos em volta necessários para que eu pudesse baixar para Sonet. Chegou a 98%

da mesma qualidade que o Opus. Daí eu continuei fazendo várias vezes, entendi mais processos, pedi para ir a criar, né, todas a parte de extração via código que era necessário para que a gente pudesse fazer via código isso e usando o Haik só para ativar esse código nas horas certas. E agora eu já consigo ter 97, 98% da qualidade que eu tinha com Opus com Riko. Só que o Raiko custa, sei lá, 200 vezes menos. Então ficou muito. Custava, Para você ter uma ideia, custava cada um desses aqui, cada extração dessa aqui custava cerca de

5. Eu fiz umas 30 dessa até entender, até conseguir pegar o padrão ideal. Ah, depois disso eu fiz essa extração com o sonet que tava custando cerca aí de dó durante umas 20 extrações. E pode ver aqui tem 90, né? E as outras, o restante, né, essas 40 extrações que eu fiz posteriores com a mesma qualidade, eu fiz utilizando o Haik que Custou, acho que foi 20 centavos de dólar para cada extração. Então, Al, como é que tu fez isso? O processo é esse, é você no momento que você começa a descobrir descobrir o processo

que a IA tá executando, principalmente fazendo análise do do do que ela trouxe, né, no final, a gente consegue fazer uma engenharia reversa e através de códigos hardness e melhoria no prompt, na engenharia dessa desse contexto que ela precisa otimizar para que ela consiga [limpando a garganta] economizar, que ela gaste menos. Então, é por isso que a a skill que eu criei, que é essa skill que tá fazendo isso aqui, ó, ela acabou de fazer, ó, essa skill aqui, ó. Terminou, beleza, extraiu. Vai gastar muito menos token, muito menos qualquer coisa. Por quê? Porque ele

consegue ter um processo, mostrar para vocês, acabou de, acabou de fazer aqui, ó, um processo que é 90% via código. O berren aqui, ó. Acabei de fazer isso Aqui para vocês, ó. Extraiu do berrênce. Tá aqui, ó, as cores dele, as fontes que ele utiliza, tudo aqui, ó. Aqui é o design system dele todo aqui. Então, vou copiar ele, vou pegar ele aqui. Acabou de extrair, ó. Vou botar esse aqui pra gente modificar o que o Google. Se vai aceitar esse prom aqui inteiro. E a stúio, Ó, criou. Esse foi o dashboard que ele criou

aqui para mim, né? Connect, tudo mais. Vou modificar agora aqui o design dele. Vai ficar, vai modificar tudo, né? Ver se vai caber esse aqui. Cob. Pronto. Eu vou pedir para ele vamos modificar o layout para o novo design system. MD prompt. Vamos ver se ele já vai ler o system prom. Senão eu colo aqui. Pedi para ele Modificar esse design pro design que eu acabei de colar para ele lá no no prompt no system prompt dele, que é aquele design que vocês pegaram agora. né, que eu acabei de fazer análise, né, acabei de pedir

aqui para skill. É bem simples, é isso aqui que vocês precisam fazer daí ah para qualquer site barra design, bota o RL do site, ele vai extrair daí todo o processo. Como é que ele gasta pouco, Alan? Eu vou mostrar isso para você só para uma questão de de valorizar Mesmo isso aqui que vocês estão recebendo, vão receber, né, quem quiser receber. Ah, lembrando, isso aqui é uma coisa que eu eu criei para entregar paraos meus alunos. Então vai ser um presente mesmo para quem ficar aqui. Ah, ele tá aqui, ó. Deixa eu abrir para

vocês. Code. Acho que eu pedi para ele salvar aqui, ó, uma ctinha separadinha. Design MD. Tá aqui, ó. Squads não vai precisar instalar o Não tem necessidade de de instalar, tá? o ox para ela para ela rodar. Eu tive que eu extraí ela dentro de um squad. Eu tenho squad chamado design ops. Ah, eu extraí do meu square para vocês. E é isso aqui, ó. Então aqui tem, olha quantos scripts. Nem sei quantos tem. Não preciso entender de código, ela vai rodar, tá? Mas só para vocês entenderem porque que eu fiquei com quatro dias criando

isso Aqui. Ainda tô, ainda tô melhorando, né? Mas qu dias criando, olha quanto código. São são mais de 30 scripts, se eu não me engano, onde aí daí eu faço toda essa extração. Basicamente essa extração ela ela é feita por scripts, né? A LM só vai fazer, eu só uso para alguns pontinhos ela saber a da quando o script não encontra, eu faço LLM tentar descobrir algumas coisas, mas basicamente eu faço todo o processo Aqui por scripts. Ah, e esse é o modo de gastar. Tem até o o Cleu do Lima aqui mandou uma mensagem,

né? Só falta resolver o gasto excessivo de tokens do cloud. Isso é um problema de skills, não de skills do cloud, né? que uso da pessoa que tá usando o cloud, porque é sobre você saber criar harness. Se você souber criar harness, você resolve o problema, você não se gastar dinheiro com token, que é o que eu fiz aqui. Ah, como é que tu resolve problema de token? Aa, tu não usa token, tu resolve problema de token usando código. Ah, então isso é uma questão que é é de de conhecimento mesmo, né? você saber como

performar. Como é que tu consegue ter qualidade de haiko de de Haiko com qualidade de opos com haikã ou qualidade do do codex do chattando o spark? Ah, exatamente aqui, ó. O problema é entre a cadeira e O PC. Mas daí, como é que eu ajudo vocês nesse nesse problema entre a cadeira e o PC? Eu ajudo porque eu distribuo o que eu criei. Eu criei um negócio que eu tô há quatro dias aqui melhorando e vou melhorar um pouco mais e vou entregar para vocês aqui, né? Ah, mas é isso. O que que tu

faz? pede para aqui tá um um é muito mais complexo do que isso, mas vou tentar simplificar aqui para vocês. Eh, pede tudo que você fez, você vai Pedir para que a IA analise e analisear o processo e a e conferir o que que poderia ser feito através de scripts do que ela tá fazendo. É muito mais complexo do que isso, o sistema que acontece aqui por trás, que eu faço, mas isso aqui já é um começo, tá? para você já ir fazendo. Então, você fez um processo ali, gastou um monte de token. Pergunta para

própria A, o que poderia, o que que a gente fez aqui que poderia ter sido feito através de código Eh, que que não impactaria na qualidade, né? Fazendo que a qualidade fique mais negativa. Ah, e aí ela vai te dizer, já ela vai fazer a análise e ela vai te dizer o que poderia ser feito com código e o que não foi. Por que que eu digo que é muito mais complexo do que isso? Porque eu faço mapeamento de processo, eu faço várias várias etapas aqui. Ah, é isso que a da falou que é importante,

que é assim, não é ser complexo por ser complexo, é Porque é complexo, entendeu? Tipo, fazer essa extração. Por que que tem tanto código aqui, né, nesse negócio? Tem tem, vocês viram ali, tem algumas partes que tem mais de 1000 linhas de código ah para extrair, né? por exemplo, isso aqui, resolver as variáveis, porque vem de todos extração. Uma coisa, eu tô, o meu script aqui, o que ele faz é para padronizar o que é, não é padronizável, porque cada empresa tem uma forma de fazer o o CSS deles. Ah, por exemplo, Tem, só para

vocês terem uma ideia, existem cerca de são cinco tipos de determinar cinco formas de de anal de escrever só as cores das coisas. Por exemplo, pode ser hexadecimal, que é assim, ó, FF. Só que tem empresa que usa, porque a a os navegadores aceitam você utilizar uma convenção de três hexadecimais, ã, só que o natural é fazer é ser. Então, por exemplo, FF FF, por aqui a gente tá falando de R G B, então red, Green, blue. Ah, é que eu eu sei muito sobre isso porque eu trabalhei com UX durante muitos anos. Então eu

sou eu sou eu eu por formação eu sou front changer, né? Eu sou um cara que entende muito sobre isso. Ah, eh, e talvez por isso, né, que eu sei também eu consigo, por que que eu, ela não tu conseguiu construir essa skill? Por que tu conseguiu construir esse ponto BD? Por que tu conseguiu? Porque eu trabalhei com isso durante muitos anos. Eu sei de Core, várias cores. Ah, então, por exemplo, tu quer fazer e uma super simples, né? Se é é RGB, significa red, green, blue. Se eu quiser o vermelho forte, significa que eu

preciso botar FF 00. e eu vou ter daí o máximo do vermelho. Só que daí existem outras convenções. Tem gente que tem convenções que utilizam, por exemplo, RGBC, ah, HLC, Hls, acho que se não me engano. E vai tendo, vai ter várias conversões de Formatos completamente diferentes. Só para você terem uma ideia, para conseguir extrair isso aqui e conseguir construir uma modalidade de extração onde eu consigo ter uma padronização. Eh, exatamente aqui, ó, botaram aqui, ó, RGB, RGBA, HSL, HS, e SLA, são quatro. Ah, e daí, como eu falei, e cada uma ainda vai ter

suas Não, não só isso, né? Tem uma, tem outra aqui, o Graphs, tu pode botar a, tu pode escrever a cor mesmo, né? red, blue, o CSS aceita isso. Então, quando vem, por que que eu tô explicando isso para vocês, só para vocês entenderem que existe uma complexidade muito grande por trás, que nem sempre a gente vai entender essa complexidade. Por exemplo, aqui tá usando RGB normal, mas se eu colocar aqui, ó, background e colocar aqui, por exemplo, red, viram, ficou vermelho também. E tem empresa que usa isso, tem empresa que vai usar com as

cores. Ah, isso, isso aí, OK, LCH também. São várias convenções diferentes, várias e várias e várias convenções diferentes. Eu preciso fazer com o quê? Que o meu script consiga entender as convenções de todas. Isso eu tô falando só de cor, gente. Agora a gente pensa assim, existe convenções para gradiente, existem convenções para tipos de shadow, para sombras, né? Eh, e aí vai um milhão de convenções diferentes. Só que eu pensei, eu quero criar um sistema que qualquer qualquer site, qualquer em qualquer tipo De site, qualquer tipo de projeto, eu consigo fazer a extensão desse design.

MD e gerar esse essa tradução. E aqui que eu isso que eu tô falando é de uma importância que vocês não têm ideia. Quando você cria uma função que é capaz de traduzir, a gente tá falando daí para quem quer trabalhar nessa área de AI, né? Ã, o que a galera lá no Vale tá querendo, eles precisam disso, né? Dessas convenções, Etc. É o que a gente faz aqui para dentro do Enterprise que a gente tá levando lá pro pros Estados Unidos. Então vocês podem ver aqui o que que eu fiz aqui para ele, né?

Eu pedi pro eu extrair do BR, acabei de extrair do BR, tá aqui, ó, o design.md MD deles. Então eu tenho aqui tudo. Ele faz uma análise. Olha só o nível de análise. Para quem tem alguém só digita aqui. Eu vi que algumas pessoas estão escrevendo aqui sobre ah Os os processos aqui, né? O Guri Graffs, o Sérgio aqui. Eh, tem algum frontend aqui na live? Alguém que entende sobre isso aqui? E agora você vai se apaixonar, porque isso aqui é tanto para quem não entende quanto para quem entende, porque aqui, ó, ele faz os

link finds, ele faz uma grade de design score, onde ele analisa a a qualidade, né, da descrição das tipografias, da disciplina de cores, do sistema de espaçamento, do board radios, a Tocanização. Pode ver o Benin, que é um negócio de sites, recebeu uma nota Fã com na tocanização aqui. Ah, e acessibilidade 35. Por quê? Porque eu faço análises a a WCTG W, agora esqueci o nome, eu consigo analisar qual que é o o que que eles estão utilizando por trás. Então, qualquer sistema que eles tiverem utilizando por trás de frameworks, etc., a IA consegue pegar.

Ah, aqui daí são as cores extraídas, né? Aqui os componentes. E daí aqui tem uma Coisa legal aqui, ó. A parte de motion tá extraída também. toda a parte motion, a parte do do easy, dos keframes e daí tem a parte aqui que é mais técnica, que é a parte dos token, do graph dos tokens usados. Então aqui eu eu consigo saber eh quais tokens eles usam mais, são tem mais referências no código. Eu consigo saber qual convenção que eles estão utilizando de alhas aqui. E também tem o WCAG, o a matriz de contraste deles,

caso você queira Melhorar alguma coisa. E mais detalhes técnicos aqui, né? em termos de dos brick points, do da texção de rejex e vai. Então, eh, muito avançado, eu eu vou nesse nível, né, de profundidade e quem quiser, eu deixei, quem quiser se aprofundar na parte técnica, tá aqui também todo o relatório técnico para vocês. Aqui é um resumo do relatório técnico, né? Porque o relatório técnico de verdade, ele tá aqui, ó. Tá vendo que ele cria aqui, ó? Eu sei quantos tokens Eu utilizei. Eu sei a, eu sei a telemetria, eu sei o stil.

os style fingerprints, eu consigo pegar aqui basicamente tudo, né? Ã, então tem tudo e a acessibilidade ela vai é muito mais do que out o isso tem isso é uma é um conselho bem caro, na verdade, bem que tu falou porque a acessibilidade tem a ver, por exemplo, meus sites, eles funcionam para pessoas Que têm deficiência de visão, né? Ah, não só por por causa do out, mas várias outras coisas. Ele funciona pessoas que têm elipsia, né? Ele, então o que que acontece? Eu desativo as animações muito rápidas para que pessoas epiléticas não tenham algum

problema com isso. E aí vai, daí vai sendo feito para várias aliás acessibilidade máxima. Mas por quê? Porque eu sou um cara que eu goo, eu eu tenho muito conhecimento dessa parte. Ah, e é por isso que eu consegui Construir um design.mdível MD que é compatível com qualquer site, né? Eu consigo extrair qualquer site. Ainda tem alguns detalhezinhos que às vezes eu tenho que ajustar alguma coisinha em outra, mas podem ver aqui, ó. Eu testei mais de 90 sites já. E desde sites brasileiros, né, a gente tem aqui, por exemplo, o Itaú, Nubank, até sites

ah bem mais avançados. Por isso que eu estou tô percebendo que eu tô há tô há quatro dias aqui em cima Disso aqui. Hã, porque é uma coisa que que realmente não é tão simplesinha assim, não é aquela coisa assim, ó. Olha, ó, a lá aqui, ó. Sou epilético. Obrigado por pensar nisso. Então, é exatamente pensar em todas as todos os detalhes aí, ã, para que seja acessível mesmo de verdade, né? Não, só porque tem gente que pensa acessível ser só mobile, não. Tem pessoas que t deficiência de visão, tem pessoas epiléticas, tem um monte

de Situações diferentes, tá? Por que que eu uso óculos amarelo? Tá até no meu Instagram lá, mas basicamente porque eu fico com essas telas, eu gosto de ficar no mente todo escuro e daí quando eu tenho que gravar eu tenho que botar iluminação na minha cara e daí eu ficava ficando um olho, olhinho bem pequeninho, ficava ahã cansado, né? Porque a iluminação no meu, no meu rosto começa, meu olho começa a lacrimejar, eu tenho que sair do computador. E eu Queria ficar, eu gosto de ficar trabalhar por muito tempo. Daí eu testei vários óculos em

2019 e acabou que o óculos amarelo, depois eu descobri o porquê. Ah, mas eu testei azul, verde, tudo que é cor, vermelho. E acabei descobrindo sem querer que o doc amarelo que eu comprei tinha uma tecnologia chamado safe drive. essa tecnologia chamada safe drive ou drive safe safe drive acho, que faz com que não tenha reflexos, diminua os reflexos. Então ele é utilizado para pessoas que tão eh caminhoneiro, né, que fica na estrada ou pessoas que dirigem muito à noite. Eu nem sabia disso, eu descobri depois. E daí desde então, desde 2019, eu acabo usando

o óculos amarelo quando eu vou ficar na na frente do computador. Não só por causa da tela da luz azul, porque isso o óculos lendário até ele tem uma, eu posso tirar, pode ter uma lente transparente, eu não tenho problema de visão, né? Eu posso olhar, Eu consigo ter a visão normal assim, mas o óculos amarelo me dá essa eh depois eu descobri que eu fico mais concentrado. E por quê? Porque eu tenho TDAH alto e daí diminui um pouco o número de referências de de coisas visuais. Mas aqui a gente tem um problema também,

né? Ah, que é se eu tô trabalhando com design, eu tenho que estar sem o óx para poder ver a cor, né? Ah, então durante aqui, quando eu não tô com luz ligada para gravar, eu tô normalmente sem o óculos amarelo para Poder ver as cores, etc. Mas tá respondido aí porque sei que tem mais gente aqui. Eu consigo criar alguns filtros para vocês aqui. Esse site vocês já conseguem acessar. Deixa eu passar para vocês aqui para quem quiser já acessar. Deixa eu mandar aqui mais um presente aí. Esse não vai precisar nem nem botar

o e-mail nem nada para acessar. Ah, esse aqui é uma galeria que eu criei Para testar. Eu tava criando lá, né? Como vocês viram, a MK, ela cria um HTML dentro do seu computador. E eu pensei, ã, o que que o que que eu posso fazer para que eu possa visualizar todos ao mesmo tempo? Daí eu criei uma galeria, né? Porque senão eu vou ficar com isso aqui, né? Cada um eu vou ter que abrir, etc. Daí eu acabei criando uma galeria, tá vendo que aqui não tá com a a o design da dox em

si, né? Mas eu quis criar, eu Criei uma galeria daí com o design do LX, que é essa aqui que vocês viram, que eu dei acesso agora para vocês. Então vocês podem acessar essa galeria, quiserem testar aí aqui ao vivo mesmo, o que que você faz? Entre algum desses, por exemplo, sei lá, Suabase, Tesla, copia o Design System aqui, ó. Clica aqui, copia o design system, coloquem algum algum site seu aí, se não sei se você vai tá usando code, lovebow, seja o que for, cola lá e vê o que que Vai acontecer. Me fala

aqui nos comentários aí o que você achou, se deu certo, se funcionou certinho. Aqui também tem aquela parte técnica, você pode clicar aqui e vai ver a parte técnica também, tá? Ã, é, tô entregando aqui para vocês o ouro do ouro do ouro, né? E vamos lá, vamos voltar para cá. Então vocês viram o que aconteceu aqui, né? Eu criei o, acabei de criar um painel aqui que Tem o quê? Um design que é inspirado nesse cara aqui. Então tinha até alguém que tava falando aí nos comentários: "Ah, mas agora acabou pros designs, você tem

como copiar. Não mudou nada. Facilitou. Eh, no que sentido? Sempre foi assim. Sempre foi. Todo o design que é criado, ele é inspirado em alguma coisa. H, não tem nada que é criado do do zero. Mesmo se a pessoa foi ah, mas existe aquela inspiração divina, tudo bem, Então veio do divino, né? Nossa, o carace baixou a informação, tá? Então, se baixou, veio de algum lugar. Então nada é criado do zero. Mesmo se você tentar copiar, arrisca algo, aquilo vai ter variações. Vou mostrar um exemplo para vocês aqui que eu tô criando. Deixa eu pegar

aqui um, tô abrindo a outra aba aqui. Eu quis testar a fundo esse essa esse esse meu projeto de extração, né? Que Que eu fiz daí? Deixa eu ver se tá aqui funcionando. Esse é um nível bem mais profundo, tá? O design. Não consegue replicar isso aqui que eu fiz. Ah, é um processo bem mais profundo. Mas o que que eu fiz aqui? Olha só, eu vou mandar para vocês aí, vocês vão pirar. >> [roncando] >> Meus scripts de extração conseguiram extrair ao ponto de eu conseguir praticamente clonar toda a interface do Antropic. Olha só.

Ah, esse aqui é seria a home, né? Aqui eu tenho o chat, ó, aqui eu tenho, deixa eu voltar aqui. Aqui eu tenho o configurações lá do que vocês odeiam quando bate o total. Tem o pricing, tem a documentação deles aqui, ó. Como funciona a documentação? Ah, não, mas é só baixar o HTML deles. Não, não é, não é isso. Porque eu consigo replicar, eu consigo criar qualquer Qualquer qualquer coisa eu consigo criar aqui. É aqui estão os tokens, ó. Porque eu fiz isso é extrair todo o design system. Eu não sei se a própria

antropic tem o deles nesse nível de profundidade, tá? Ah, olha só, tem tudo aqui. Paleta de cores, a parte semântica e todos os componentes da Antropic, ó, todos os componentes antropic e na Versão Dark. e light, né? Então, o que que você pode fazer aqui com isso aqui? Você pode utilizar ele para gerar, ó, eu gosto, eu eu gosto desse design, eu queria um design clean, como é o da do Berrense. Vocês acabaram de ver, eu alterei, né, o design aqui, que tava todo escuro, tal. Eu achei até que tinha ficado feio aquele design. H,

e para esse aqui agora, se eu pedir para Ele, como tá no design system dele, se eu pedir para ele criar novas páginas, isso aqui é uma dor gigantesca do mercado, tá pessoal? Ah, e é uma dor até mesmo minha, porque assim, eu eu sou aquele cara que lá que sou chato com design, vocês perceberam, né, o nível de que eu sou chato de design de olhar assim, ó, o microbotão. Ah, e daí meu time vai lá, ele eles us eles criavam algumas páginas LPG que não ficavam, por exemplo, usava outra Tipografia. usava uma cor

que, por exemplo, eu defini que é 4C 4C 4C, né, o RGB lá, o RGB dela, ele usavam tipo 5 4 4E 4B 4E, já muda completamente as cores. E eu percebo isso. Eh, e para mesmo quem não percebe isso tão de cara, quando a gente vai ter todo mundo vai criando novo site, novas páginas, você vai ver que daqui a pouco tá ficando totalmente diferente de tudo. Ahã. Então, o que que você vai fazer aqui? Eu posso agora pedir para ele criar outras Páginas, ó. Vamos botar crie uma página de ó crie ah uma

página, um dash completo de com vários exemplos de gráficos, tá? E tabelas para o menu audiência. Então agora ele vai criar para essa página que nem existe aqui, ó, ele vai criar agora vários gráficos e a gente vai, você vai ver que vai seguir o mesmo padrão de cores, tá? Até onde o Copyright protege quanto a sites, não tem como cadastrar, por exemplo, assim, ah, o Alan, o que que a gente consegue proteger, né? Eu falo eu como marca, porque assim, até o meu tá aqui, ó. Eu coloquei o meu também disponível para vocês, né?

Tá aqui o meu da academia lendária, tá o meu aqui do EOX. O que que a gente consegue proteger? Ah, o nome e a logo. Só isso. Por exemplo, a Apple não pode proteger que, por exemplo, tá aqui o da Apple, né? Ah, Quero usar o da Apple. Inclusive, eu tava lá na Apple semana passada ou retrasada passada, acho. É, semana passada, eu tava lá na Apple. H, e conversando inclusive com o engenheiro de design deles. Ah, e cara, eles têm um design system absurdo pra parte web. Eles não têm isso visual, você não consegue

ver, né? Mas a Apple tem, você pode pegar ali, eles tem até no site deles tem a parte de de Apps, pra parte de software, eles têm algumas coisas ali que você consegue ver. Mas, por exemplo, eu posso vir aqui com o pé o design da Apple, né? É esse aqui que é o que aqui o o formato de botões, uma tipografia similar, etc. Não tem. Isso aqui é uma referência, tá? Aqui, ó, design inspirado em Apple. Até porque essas, como é que essas empresas se protegem também? Ah, elas se protegem comprando uma fonte que

é uma fonte Exclusiva delas e que até o nome da fonte eles trogam para para elas, né? Vamos pegar, por exemplo, a Apple aqui. Daí você não consegue usar essa fonte. Por exemplo, essa fonte aqui da Apple eu não posso usar. Por quê? Porque ela é uma fonte que é da Apple, né? Se eu venho aqui e olho aqui o que foi o que foi renderizado, SF Pro Text. Ah, é da Apple, não sei se é deles mesmo. Ah, algumas empresas não tem, né? Mas você pode as transições da Apple, né? Essas Essas o paralax

que eles utilizam, eh, etc., você pode utilizar igual, não tem problema nenhum, né? Então, em questão de de copywriting é isso, só logo não pode usar, né? No como se você fosse eles e alguma coisa assim. Ah, do tem, é, algumas têm fontes próprias. Ah, então você não vai conseguir utilizar aquela fonte que é própria. O Miriam, por exemplo, tem fonte própria. Eu adoro a fonte do Miriam. Eu pesquisei muito para encontrar uma fonte similar a deles. Eu adoro a fonte do Miriam. E que que acontece? Por que que eu isso a forma mais inteligente

que você tem de começar algo não é criando zero, é pegar algo que já funciona. Porque, por exemplo, eu sei que o Miriam investiu algumas centenas de milhares de dólares em teste AB para descobrir qual que é a tipografia melhor paraa leitura, Espaçamentos paraa leitura. Ah, espaçamentos de paging, espaçamentos de margem, espaçamentos o tamanho de fonte. Você percebe que, por exemplo, aqui, ó, as imagens são maiores, mas por que que o texto deles tá desse tamanho? Porque cansa a leitura se o texto for muito wide, né, for muito largo. Por que que você consegue ler

muito mais rápido no celular se você for ler do que se você pegar um um Kindle, um iPad, porque o seu olho tem que Correr mais tempo, ele cansa mais. Então o que acontece quando você faz isso que eu tô mostrando para você de pegar referências, extrair o design.md, você tá pegando algo validado, você depois pode trocar a cor, mas porque, por exemplo, tem coisa que você vai mexer que você nem entende do que porque você tá estragando as coisas. Ah, por exemplo, pra escrita, o ideal é a fonte serifada e não serife. Ah, o

que que é isso? siifada é que ela tem essas Porinhas aqui, ó, mais desenhadinhas, ela não corta. Daí você vem aqui e perde. Não gostei da da herifada, nem sabe, você nem sabe esse nome, né? Você nem sabe o que é serifada. Você simplesmente fala assim: "Eu não gostei dessa fonte, eu vou trocar essa fonte, ó. Vou vir aqui, vou trocar a fonte aqui. Fonte family Ariel. É, eu gosto mais assim, ó. Tudo bem. As Pessoas vão parar de ler o que tu escreve porque cansa. Nem a pessoa sabe porque parou de ler, porque fontes

que [roncando] são sanserif, elas cansam mais a leitura. Ah, e daí você tá perdendo pessoas que lêem tuas coisas e tu não entendeu por quê. Por isso que é importante quando o que que é uma, é uma premissa minha, né, uma heística minha, ah, é não reinventar roda. Existem empresas que foram lá e testaram muito para saber qual WCTA é Melhor, ou seja, qual referência de qual referência de ahã de variação de cores é ideal para que a pessoa fique mais tempo na página. Um monte de coisa. Daí você vai lá e que aí não,

eu acho mais bonito ter um emoji piscando, né? Eh, eu faço site desde desde os anos 2000 e pouquinho, 2000 bolinhas. Na na época que eu fazia site, o pessoal gostava que eu que eu colocasse gifs ou flash. Então, tem um gif que é famoso que uma eu eu e e eu falei uma vez, né, para Meus amigos, só que falta o a única coisa que falta é um cliente pedir para ter o gif da bananinha. Para quem é antigo conhece esse gif aqui, alguém conhece esse gif? Daí vai entregar idade aqui. Deixa eu ver

aqui. Alguém digita aqui que se conhece esse gif aqui. Esse aqui é antigo. Esse aqui é lá dos anos 2000. Então eu faço site lá dos anos 2000 e pouquinhos, né? 2000 bolinhas. Ah, eu Falei, né? Só falta um cliente pedir isso aqui, porque os clientes ficavam pedindo que eu colocasse animação, gifinho. Nossa, eu quero que no meu site tem caia, por exemplo, estrelinhas. Eu quero que tenha um, fique de dia e de noite e por aí vai, né? Então, eu faço o site há mais de 20 anos já. Eh, beleza. Então, entenderam, né, a

importância dessa disso aqui, tá? Agora vamos ver ali se ele criou. Pronto, criou aqui, ó. Criou aqui para mim a parte de audiência, ó. Olha o design como tá clean. Olha os espaos espaçamentos, ó. Tudo bonitinho, os passamentos, as cores, padrão profissional. Eu abro um site desse aqui, que que eu vou achar agora? Vocês vão conseguir enganar os outros, né? Ah, porque você, como que eu tô te entregando aqui hoje, Mesmo se você saber design como eu sei, você vai conseguir criar designs como eu crio, ou melhores do que eu crio, né? Porque eh você

tá pegando referência dos melhores, você vai pegar referência dos sites que você gosta, não precisa ser só um, né? Você pode mesclar, mas tá vendo que assim, eu não tô copiando o BR, tá vendo, ó? Bir tá aqui. O Bren é outra coisa. Eu peguei ele como referência para que fosse um design clean do meu Dashboard. Agora meu dashboard é clean como beren. Se eu quiser mudar, não, gostei mais do berce. Vou vir aqui, vou pegar, sei lá, ã, vamos pegar aqui o cursors. Deixa eu pegar como é que ele tá aqui o design dele.

Vou pegar o cursor. Copiei. Botar aqui. Vou alterar aqui o design [limpando a garganta] instutions dele. Salvar. Agora vou pedir para alterar. Vamos atualizar todas as telas para o novo design. MD que está nas suas instruções. Vamos ver. Acho que isso aqui vai ser o suficiente. Ele vai ler instruções de novo e vai refazer. Senão eu colo aqui o desenho dor ele vai refazer com aquela tela preta que eu mostrei para vocês, né? Ah, bom. Basicamente qualquer coisa Vocês podem fazer agora com isso aqui que eu acabei de passar para vocês. Perceberam isso, né? O

poder disso aqui. Agora dentro do LVB é a mesma coisa, né? Vou criar aqui um dashboard dentro do Lovb do cursor. Ou melhor, é, vou criar o do cursor mesmo, ó. Vem aqui, digito assim: "Quero criar um dashboard. Ah, sobre claro, o ideal aqui eu tô só Fazendo para vocês ah demonstrações, né? Não é assim que eu crio algo. Eu eu não digito uma frase, eu faço pesquisa, tipo, eu crio um PRD, lembra? Lembram, né, do da minha da minha lá da da minha aula que eu dei para vocês, né? Eu nunca venho aqui e

jogo para ele um negócio, sabe? Eu sempre vou fazer uma análise antes, vai ter pesquisa, eu vou usar, daí eu uso, eu uso para essa parte, né? Então o X é fazer toda a análise de pesquisa, vou fazer, vou chamar o Arquiteto, vou construir todo, todo o planejamento do projeto. Eh, e por onde eu começo, tá? Ah, o planejamento de um projeto, eu não começo pelo design, eu começo pelos dados. Então, eu analiso quais dados eu vou extrair, quais dados os dados iniciais. Depois eu vem para cá. Ah, então isso aqui que eu tô mostrando

para vocês é só demonstração do quanto é poderoso o design. MD. Isso é é algo Didático mostrando para vocês. Não é o processo correto você começar assim, né? E por que que eu vou dizer isso? Se você quer, ah, mas eu quero ver como é que vai ser o design para eu poder pensar mais sobre isso. Tudo bem, mas entenda que é um rascunho, porque se você não se começa pelo design, se começa pelos dados, porque tudo é manipulação de dados, né? E quando digo manipulação, tô falando da palavra, eh, não tô da forma eh,

Não é que eu vou dizer, né, abst eh pejorativa de manipulação, né? Manipulação é você manipular mãos onde você vai ter uma ação de modificar. Então, tudo que tu tá criando sempre é sobre modificar, transformar dados. Tudo na vida é assim, né? Agora começo filosófico aqui, mas se for pensar, a vida é isso, né? A vida é manipulação. Nada se cria, tudo se recria, tudo é manipulação ah de matéria. Não, o que que é matéria? Matéria é dados também. Então, no fundo, tudo é sobre modificar dados. Se você quando consome uma banana, que a gente

tava ali mostrando a bananinha, que que tá acontecendo? Ela tá sendo digerida pelo teu organismo e virando outros componentes que vão depois alimentar tuas células, vão virar, vai virar o que é você, você é o que come, né? Então tudo na vida, inclusive na parte web e na parte de criação de qualquer coisa é sobre dados. Então por onde tu começa? Eu sempre Começo por análise de dados. Depois que eu fiz análise de dados, eu vou para análise de como esses dados vão ser ajustados. Depois eu vou pensar em como é que eles vão ser

apresentados. Então, por isso que eu nem gosto, eu sou um cara que entende muito sobre design, mas eu não gosto de de criar coisas web. Por que, Alan? Porque a gente se distrai com isso aqui, com um botãozinho, com iconezinho, porque o verdadeiro poder tá aqui, ó. Por isso Que eu gosto de código. Eu gosto de olhar para isso aqui, né? Eu sou um cara que veio do mundo de design e que hoje não gosta de Eu só trabalho assim. Ah, eu só trabalho olhando para tela preta o dia todo. Por quê? Porque eu prefiro

olhar para isso aqui. Tipo assim, eu já tá aqui as informações que eu preciso. Eu eu clico aqui e tem as informações que eu preciso. Mas e por que que é interessante daí vocês entenderem isso? que o design ele vem Para encapsular e facilitar a abstração de informações para que o usuário consiga entender aquela informação e fazer algo com ela. Então o design ele tem um fim de utilidade, utilidade e depois ele vai ter seu fim que é de cosmético, né? Que é essa parte, nossa, como é bonito isso. O quão é bonito isso tem

que ficar em último lugar. No sentido de quê? Porque você pode fazer um site super bonito que não é Funcional. Você pode fazer um sistema que é bonito, mas que ninguém usa. Então não adianta pensar no bonito. Gente, eu tava lá na, eu tava lá dentro da Gens Park. A Gens Park vai bater 1 bilhão de dólares. Ah, e eles me falaram lá, né? Tava lá com a Mariana, que é a brasileira que cuida de comunidade lá, lá dentro do escritório deles em São Fran, eh, em Palo Alto. Eles não tend system. Eh, eles têm,

pode Ver, é feio mesmo. É feio para caramba o sistema deles. H, eles não têm design system, eles têm um monte de engenheiro programador lá que fica criando aqui as funcionalidades. Pode ver, é feio para caramba. Eles vão bater 1 bilhão de dólares. Eles têm o quê? Eles eles entendem muito sobre ah growth. Foi o que eles fizeram aqui, vários várias formas de growth aqui mesmo, né? Eles estão fazendo um growth aqui, High Your employee. Aí eles Criaram o G Park Claw, que é tipo um open claw do GPK. Ã, ele sobem bugado mesmo. Esse

cara aqui tá cheio de bug, mas eles sobem bugado porque eles vão inferindo, né? Isso é uma é uma é uma regra do Vale, digamos assim. Uma regra que eu mesmo uso para mim há muito tempo mesmo, sem saber que era do Vale, que é ship fast, interact faster, né? Tipo assim, entregue, joga rápido pra galera e interage mais rápido. Isso aqui mesmo Que eu tô botando no ar, tá cheio de bug. ainda eh que como assim bug, por exemplo, aqui eu não botei no ar ainda um banco de dados para isso aqui. Mal, mas

como é que tá renderizando, né, cada página? Eu peguei e transformei isso aqui num num Jason gigantesco que tá carregando aqui com variáveis. H, demora mais tempo para carregar porque ele ele vai cada um desse aqui, ele tá renderizando uma fonte, tá Renderizando cada um, tá demorando, demora mais tempo. Ah, não tá performático isso aqui. Para ficar performático eu preciso, sei lá, mais uns dois, três dias, porque eu tô olhando para outra coisa ainda. E eu poderia dizer assim: "Não, não vou botar no ar, não tá performático, demora um tempo para carregar, tem alguns detalhezinhos

aqui que talvez não esteja funcionando tão bem no mobile." Cara, eu tô aqui numa live já com 200 Pessoas. Provavelmente essa live vai pegar, sei lá, 5.000 visualizações, 10.000 visualizações. Um monte de gente vai clicar aqui e vai ter gente, talvez que vai dizer: "Não, o Alan fala que ele entende de negócio, mas tá demorando para carregar". Ah, tem esse erro aqui dando no console. Deve ter erro aqui dando aqui. Deixa eu ver aqui. Hum. Tá, nem tem. Isso aqui é do navegador. Mas, por exemplo, se tivesse erro também Eu não ia importar de botar

no ar mesmo com erro. Por quê? Ah, porque eu quero jogar rápido para vocês interagirem e verem, cara, isso aqui acho que não tá tão legal. Podia ser isso aqui, podia ser melhor. Aqui mesmo, tá feio para caramba. Esse esse aqui, por exemplo, porque ele pegou o do Slack, que acontece, ele tem aqui o surface, que é o que eu tô utilizando pro background deles, é um roxinho. E aqui o o hover aqui não tá ficando Branco, ó. Mas é um problema que de algum algum spec do slack que quebrou o meu script aí que

eu vou ter que resolver aqui, tá certo? Aqui também. Ah, mas botei no ar. Agora eu interajo e altero mais rápido. Então é isso que é pregado lá, é isso que a G Spark faz, é isso que tá fazendo eles valerem. Ah, e chegando aí no 1 bilhão de de dólares de eu, se eu não me engano, é de ARR, tá? Que é de recorrência anual. Ah, é isso que faz. Então nós, nós brasileiro, Brasileiros brasileiros temos um um gosto até mais fininado, eu diria, para design, tá? O americano ele tá muito mais focado na

funcionalidade do que no design. E agora vocês têm aí como utilizar aqui, ó. Acabei de mudar. Ele pegou toda a referência do cursor que eu mandei. Lembram como é que tava? Azulzinho, etc. Ele pegou, manteve o estilo white. Ó, ele até t até falando aqui, ó. Eu atualizei, mas eu mantive Aqui, né? Usei o que canvas, blá blá blá. modificou todo o design aqui. Agora o design dele tá nessa versão do cursor aqui. Continua bonito, continua bem alinhado as coisas e bem estruturado. E agora tá diferente. Então agora vocês têm esse poder aí de conseguir

ah extrair todas as coisas. Bom, então vou recapitular aqui o processo pra gente eu conseguir liberar para vocês aqui a para vocês utilizarem. Deixa eu verificar aqui se eu já eu já Componentizei a skill para mandar para vocês. >> Eh, a skill aqui, ó, ambas. Beleza. Onde é que ele salvou? Ele salvou para mim, ó. Para compartilhar basta zipar e copiar essa pasta aqui. Então, ele ele salvou dentro de Ah, ele salvou dentro do enterprise disable. Ah, tá beleza. Quero receber o zip qualquer do projeto, tá? Então, deixa eu pegar aqui para Vocês. Então, o

que eu fiz aqui antes de começar essa live, eu pedi para ele fazer, eu chamei o Cloud Mastery, que é a mês que eu que tem de tudo sobre cloud. Eu fiquei bom tempo melhorando ela junto com o Pedro e eu falei que eu precisava deixar esse meu design. MD independente para que vocês possam utilizar em qualquer lugar. Ah, ele já é, né, também feito para ser responsivo. Então esse isso aqui vai fazer já com que o site de Vocês funcione, né, em em tablet e em tudo. E aqui, ó, ele modificou todo o script

para funcionar em qualquer lugar, porque eu uso muitas dependências, né? Eu uso muitos scripts aqui internos meus. Ele modificou tudo para que vocês possam utilizar em qualquer site, qualquer sistema de vocês. Deixa eu pegar ele aqui. Então, ele tá dentro aqui do user io enterprise ponl Skills disable aqui. Então vai tá aqui. Então isso aqui que vai tá lá dentro, tá cara? Tô entregando ouro aqui, né? Quatro dias meu de trabalho para vocês. Ah, aqui vai ter todos os scripts. Aqui vai ter a biblioteca que eu criei de scripts que faz todo com os providers.

Você consegue fazer isso tanto via Cloud SLI quanto Open Houter também, se você quiser botar qualquer modelo para fazer isso. Ah, já aviso, né? Tem modelos que eu já testei, tipo o Quen não roda tão Bem, funciona, mas não funciona tão bem, o Kim tá funcionando bem, mas você pode fazer também com utilizando o opener, outras não precisa ser o Clode SLI só. Mas aqui eu deixei ele pronto para funcionar com cloud SLI, ou seja, você não gasta tokens para fazer isso. Se você tiver o cloud, ele vai funcionar no seu cloud. Tá, leira são

accuration. Beleza. Aqui é é o meu prompt, né, que eu uso para para fazer esse processo de extração. Tá aqui o prompt Que é carregado dentro do meu sistema. Excel. Cara, eu acho que semana que vem a gente começa a atualizar o X, tipo assim. Eu tô uns, eu já tô, sei lá, uns 10.000 commits à frente do LX, né, do do Open Search, porque a gente focou muito no Enterprise. Ah, e daí acabei, a gente acabou deixando porque é o nosso, é onde a gente realmente tem ganho, né? A gente vai implementando nos negócios,

Etc. Mas eu vou, tem muita coisa. É que o problema era o seguinte, a gente tava com uma dificuldade de entender, cara, o que que que a gente pode, o que que a gente vai distribuir, o que não vai, né? Porque tem muita coisa nossa aqui que são isso aqui mesmo, isso aqui é um é um conhecimento, isso aqui não existe, né, na tenho certeza que isso aqui eu devia pedir para ele assinar também isso aqui, né? Botar, vou pedir para ele botar aqui no RIDM quem é o criador, pelo menos Isso, porque eu sei

que vocês vão ficar compartilhando isso aqui agora com um monte de gente. Pelo menos deixa as pessoas saberem que foi eu, né, que criei isso aqui. Deixa eu pedir para ele só botar minha assinatura aqui. Coloque uma assinatura. com Alan Nicolas e link pro meu GitHub em todos scripts e no R. Eu vou botar aqui meu GitHub, pelo menos isso, né, gente, para saberem. Eu sei que vocês vão compartilhar isso aqui com um monte de gente. Quem quem quem pegar acesso a isso aqui, pelo menos as pessoas saberem que, ó, quem criou isso aqui foi

o Ala. Deixa eu pegar aqui. Pronto. A versão Pro ela é apenas para alunos, né, do advanced do do da nossa Do nosso corte. E a gente não vai fazer uma versão, a gente pensou em fazer uma assinatura, né, pro, mas não faz sentido porque ah, o grande negócio que foi o que eu falei para vocês, né, é a convenção de dados, né? Por que que esse negócio que eu criei aqui tá tão interessante? Porque para criar tudo isso aqui, eu tive que criar uma convenção de dados que fosse um pouco além, como eu falei

para vocês, eu falei, né, humildemente, Um pouquinho além do do que o Google lançou aqui no no design. MD. Por quê? Porque o deles aqui a é isso aqui, ó. é bem limitado em termos de não tem não vai não tem uma profundidade muito grande. Ah, tem os dous, os dons, tem ali os buttons, ele não tem uma cobertura muito grande de componentização. Então eu peguei, como é que tu fez isso? Ao olha isso, gente, que eu vou mostrar para vocês aqui, tá? Ah, eu baixei, eu Tenho uma Isso aqui tá liberad, isso aqui foi

um que eu deixei, eu acho que eu deixei open se, se eu não deixei, eu vou deixar, vou deixar o open se aqui e quem quiser pode olhar. Deixa eu ver se tá opence. Tá público, tá? Então aqui, ó, ó, já tem gente que tá marcando com favorito aqui, ó. Ah, que que eu fiz aqui? Eu fiz uma coleção de 30, eu fiquei assim uns dois dias fazendo uma coleção analisando Design systems. Então eu fiz uma coleção de 39 design system open source, tão todos aqui, onde eu fiz abstrações muito profundas para compreender quais eram

as compon os sistemas de componentização mais comuns entre eles e como eu conseguiria criar uma linguagem universal de componentes ah onde eu conseguisse fazer com que qualquer LLM conseguisse analisar esse componente e replicar eles. e eu fiz muitos testes. Então, por que Que eu padronizo para para ter o enxer cdn? H, porque são os que são mais comuns entre as LLMs de entendimento, compreensão. Ah, então isso aqui também vai estar aqui para vocês. Então, por isso que eu eu posso, tem gente que às vezes é que eu eu não costumo falar com profundidade tecnicamente nas

nos meus conteúdos, nes, porque eu sei que pouca gente vai entender o que eu tô falando, mas tem muita gente daí que acha que eu não tenho propriedade para falar sobre Isso e agora tá percebendo que eu tenho. Ah, eu me os estudos são bem profundos tecnicamente, por isso que eu até sumo, não faço muito story, não faço, eu tô lá criando os negócios, estudando, etc. Então, deixei público aqui isso para quem quiser. Basta pedir pro Cloud ã para ele baixar os design systems que estão aqui. Eu criei aqui um um script que tem todos

os sep, né? Tem todos os sep aqui, ó. Ele faz a análise do sep e baixa pro teu computador todos os Repositórios, caso você queira, né? Esse aqui são os design systems, ã, que dá dessa minha curadoria, né? uma curadoria bem grande. Todos eles são openurces, ah, onde eu consigo abstrair. Daí foi por isso que eu consegui abstrair o que que faz sentido ter aqui dentro dessa convenção. Eu já atualizei essa convenção, ela tá bem maior agora. Eh, os próximos que eu vou subir vão ter depois eu vou refazer onde eu vou conseguir ter mais

elementos Ainda de abstração aqui nesse processo aqui. E por que que a tá botando energia nisso? Porque no momento que você tem isso aqui, você consegue criar qualquer outra coisa de design. Eh, então, por exemplo, né, que eu mostrei para vocês aqui o que o que eu criei aqui do da Antropic, né, que tem basicamente todas as páginas, mas vou dar um exemplo aqui, por exemplo, um exemplo, por exemplo, puro. Ah, aqui no Red Pine, por exemplo, eu criei um sistema de slides que segue O design system. Então você vai ver aqui que tem um

sistema de slides onde se eu passar agora um um sei lá, um live minha, se eu passar um um áudio, uma reunião, é possível você criar a partir disso slides com animação, customizados, com a identidade visual, sem precisar ficar um tempão, ã, né, fazendo lá no Camba, fazendo em outro lugar, etc. você consegue criar slides personalizados com alta qualidade. O quando você cria um Design system, você pode criar até o até o, por exemplo, ontem eu fiz meu meu time de legal, meu time aqui de meu squad de de, né, de ã jurídico, eles criaram

aqui, por exemplo, o contrato com o pessoal do Iox Enterprise. O AOX Enterprise, a gente tá entregando o código todo nosso para as pessoas, né, pros nossos alunos ali, pros nossos parceiros. Então vou pedir para eles criarem nosso contrato aqui. Foi revisado pelo nosso advogado humano. Ah, mas aqui tá para vocês verem. Olha só, ele criou aqui com o nosso próprio design system aqui, ó. Então, até o contrato é bonitinho, ó. Tem aqui, ó, o logo do a cor evidencialidade e tudo mais. Eles tem tudo, tudo é customizado com as nossas cores, agora o controle

é seu, tudo bonitinho. Então, quando você tem isso, é outro nível profissional, né, que você vai ter. É um nível profissional que apenas empresas Que são muito grandes conseguem ter, porque custa muito caro. Por exemplo, quanto é que isso custa, Alon? Eh, nas empresas. Isso aqui custa para uma empresa manter um negócio desse algumas centenas de milhares de de milhares de dólares por mês. A gente tá falando aí de 200, 300, 400.000 por mês para manter uma equipe que vai fazer a gestão de todo toda a parte de continuidade de design, continuidade e Desenvolvimento disso

e criação de peças a partir disso, etc. Então é caro, é muito caro manter uma estrutura dessa e com consistência, porque por isso que qualquer outra empresa que analisa uma empresa que tem consistência visual ao longo de todas essas páginas consegue fechar contratos muito grandes. Alon, mas como é que o o Gansin Park tá crescendo? Porque eles são eles focaram no B2C, né? Então eles focaram no customer. Acontece que o Customer levou para dentro de algumas empresas no Japão, na Ásia. Eles estão crescendo muito na Ásia hoje. Então [roncando] isso aqui é também uma referência.

O G park, eu gosto muito, gostei muito de ter entendido isso aqui deles, ah, que é algo que no marketing direto a gente já conhece, que é conteúdo necessariamente bonito, não vende, eh, ele precisa também em geral valor de alguma forma, etc. Por isso que design é uma forma de você encapsular e Entregar, mas o que importa mesmo é o que você tá gerando de valor, que é como você vai manipular esses dados. Por exemplo, eu pego informações cruas do do LinkedIn e consigo mostrar paraas pessoas com quem que ela deveria, quais leads mais qualificados

ela tem para poder vender o projeto dela. Ah, eu crio, por exemplo, aqui, criei um sistema que são dados. Esse meu sistema aqui, não até que vale isso, né? Eu consigo entrar em qualquer lugar e Extrair design que permite agora que as pessoas possam ter um design de qualidade muito mais rápido. E o que que eu tô fazendo aqui? Manipulando o dados. Eu vou lá, pego o CSS, pego os JavaScripts, pego o HTML, renderizo isso localmente, abstraio todos os componentes, tem que fazer, tem sites que são protegidos para que que ou são sites que t

uma renderização posterior, né, via JavaScript, por exemplo, React, eu vou ter que então fazer com que uma Renderização antes disso para daí conseguir abstrair. Ou seja, existe um processo aqui para fazer isso de extraição de dados, de instrução, de entendimento de dados, para eu conseguir renderizar todos eles, mas mantendo a qualidade de todos eles, mantendo as componentizações de todos eles, é um trabalho gigantesco para fazer isso aqui, gigantesco para fazer essa parte aqui também ah visual que vocês não estão vendo, né? Isso aqui não tá dentro Do lado. Isso aqui é o do meu da

minha galeria. Isso tem valor. Isso tem valor. O o que tá sendo gerado de valor para as pessoas. Beleza, galera. Deixa eu mandar aqui. Fiz. Vamos ver se ele terminou de botar minha assinatura. Botou minha assinatura aqui, ó. Design. Day sone cloud code skill autor alonicolas @alonicolas github tal. Ele botou isso também no 39 JavaScripts no nos runs. Legal. É isso. Agora eu vou zipar aqui e vou mandar para vocês aí. Vou mandar pra Érica botar na no Behive e quem se cadastrar lá vai ganhar essa skill. Então o que você vai acontecer, né? Eu

tenho o a minha news que é enviada toda sexta-feira. Essa news ela vai ser enviada amanhã para você sobre design. Eu vou falar um pouco mais sobre design. E eu vou, a gente vai criar uma página Aqui para vocês que vai ser similar a essa aqui, ó. Deixa eu ver. Design barra vai ser barra o quê? Eu criei essa aqui. Eu tô meio que contando segredo aqui para vocês porque eu tô criando isso aqui, tá? Nem tá funcionando ainda, tá? >> Eu tô criando um teste interno para mim aqui, onde eu gero via online aqui

o o design system, mas vai ser barra o quê? >> Barra skill. >> Barra skill, tá? Mas deixa eu vou mandar Para ela porque se você se cadastrar agora, você não vai receber porque antes eu tenho que mandar para ela aqui. Deixa eu pegar aqui. Tá dentro de cloud skills disable design. Deixa eu compactar ela. Vendo que é bem diferente eh de qualquer skill que vem só normalmente skill.md. O meu vem aqui, ó. Scripts run biblioteca de olha quantos scripts aqui, né? Deixa eu mandar aqui para vocês. Compartilhar. Comprimir. Pronto. Deixa eu abrir aqui. Vou

mandar pra Érica botar lá. [limpando a garganta] Pronto. Show. Então eu vou mandar o link para vocês, vai ser skill, mas ainda a que vai botar lá no e-mail. Ah, não tá. Ela vai publicar, não tá publicado ainda. Ela vai publicar que é URL. A gente podia fazer o seguinte, né? >> A gente podia botar no Instagram pra Galera comentar algo lá para deixar mais ser escrito ainda. Tipo, vai lá no meu Instagram, tem que me seguir e comentar com alguma coisa. comenta com, deixa eu pensar aqui, design.m. Ah, então o seguinte, a Éca vai

fazer um post lá no Instagram, se você não me segue ainda. Aqui, ó, ó, a gente vai fazer um post lá no meu Instagram falando sobre o design. E daí o que você vai fazer? Você vai lá e simplesmente comenta, né, design.md. E daí a gente envia para você lá o link para você poder baixar, né, poder se inscrever e baixar. Ah, então se você não me segue ainda no Instagram, me segue lá, a gente vai postar daqui a pouquinho. E como ah, vou receber esse negócio, o que que eu faço daí? Como é que

eu boto, né, no Codex? Como é que eu boto no, ã no Cloud? Eu aconselho a a fazer com Cloud, tá, esse processo, Porque foi onde eu testei, eu não testei ainda com Codex. E deixa eu mostrar aqui para você. Você vai receber um zip. Daí, deixa eu voltar aqui, você vai receber esse zip, né? Quando você baixar cloud, esse zip aqui você vai receber. Chegou o zip para você, o que você vai fazer? Deszipa o zip, né? Você vai deszipar, ele vai virar uma pastinha Assim. Onde é que essa pastinha tem que tá? Ela

tem que tá dentro da pasta skill. Então, deixa eu botar já aqui, ó, no ritm. Deixa eu ver como é que tá esse ritm aqui. Aqui, ó. Self contain skill drop the folder into any project. Já tá aqui. Então, já tá escrito aqui, ó. Tu vai botar no ponto cloud/ skills do teu projeto. Alan, eu não sei como fazer isso. Pede pro teu clim, ó. Tenho. Eu bota aí no lugar certo esse cara aqui, ó. E ele vai botar no lugar certo, tá? Aqui tá o ridro dele. Eu vou pedir para ele deixar ainda. Não,

tá bom. Já passei para isso aqui mesmo. Eu pedi para ele deixar ainda mais simples, né? Ah, por que que tu usa tudo em inglês, né? Ah, deixa em português. Também posso deixar em português, mas é que eu eu não crio isso para para mim. Eu crio isso tudo sempre para as, né? Então, na minha cabeça fica Para vocês. Eu não crio o design. MD para mim, Alan. Eu não crio um script para mim, eu sempre o crio para as IAS. E as IAS funcionam melhor com o inglês. Elas estão tokenizadas em português recentemente, mas

em português gasta mais token e tem menos valor semântico do que em inglês. E em português tende a ter mais erros. Por exemplo, se eu começo sempre escrever as cores em português aqui, às vezes a IA pode querer escrever a cor em português no CCS, não vai funcionar. Banco de dados, dá muito erro se a gente começa a botar, porque às vezes a IA vai querer botar algum caracter, né, especial, que seja cedilha, acento, essas coisas que não tem na no idioma inglês. Ah, e dá erros também. Então eu não eu não crio nada em

português nas minhas documentações. Eu converso com a em português na maioria das vezes. A maior parte do tempo eu converso em português, não converso em inglês com Ela. Mas tudo que eu vou criar com ela é os promptes, tudo em inglês. Eu tenho começado a conversar com a também em inglês e por enquanto eu não tenho, eu tenho visto que algumas coisas é melhor, outras nem tanto. E vou continuar testando, mas eh só para porque tem gente que vai falar, né? Ah, por que que tem inglês? Por conta disso, tá? E outra coisa também, hoje

em dia tudo que a gente cria pode, não tem por não ser internacional, né? Ah, a gente tá aqui a Vez quebrando mais esse padrão. Então fica o conselho aí para vocês também, né? Bom, é isso. Então você vai vir aqui no meu Instagram, me segue, vai comentar a postagem que a gente vai fazer em seguida e você vai poder daí ah receber daí essa o link para você poder baixar ali, né? Coloca o seu e-mail. Que que você vai fazer al com o meu e-mail? A única coisa que eu vou fazer com seu e-mail

é te mandar toda sexta-feira daí uma news falando sobre as melhorias Daqui, né? A Apple gasta 1 milhão por mês sem design. Eu fiz com 4 horas Appleá. Daí botei aqui, por exemplo, isso aqui é do 24 de abril, né? Ah, mas vou criando aqui para vocês conteúdos sobre a beleza? A L de inglês a comunidade vai rolar, vai rolar. O Gabriel, já tô conversando com ele, que é o professor britânico, tá aí na live aí também. A gente vai colocar aí aulas de inglês para vocês lá também. Beleza, gente? É isso. Espero que vocês

tenham gostado da live. Ã, se você quer acompanhar ainda mais tudo isso que a gente tá criando, então continua aqui, né? Tem gente que não tá inscrito no canal ou ainda não me segue no no Instagram. Ah, vai tá lá no meu Instagram, me segue lá. Assim que eu postar, comenta design.md MD ou design e já vai para você o link, né? O time já vai configurar tudo ali bonitinho para Você. Ã, isso é só escrever design ou design.mmd, só isso, tá? Daí já vai receber lá. Beleza? Bom, espero que vocês tenham gostado. Aproveitem também

a galeria que eu criei lá. Ela, como eu falei, né? Eu botei no ar ela mesmo com ela ainda com não tá otimizada para tá no ar. Eh, eu ainda tô vou criar um banco de dados para otimizar o tempo de carregamento e várias coisas aqui. Eh, mas eu botei no ar para que vocês possam aproveitar aí, Terai, ter ideias, ah, e a gente evoluir tudo isso aí juntos. Beleza? É isso. Então, um abraço, até mais. Ciao. Ciao.