Seus apps feitos com IA são feios? Você tá fazendo errado!

Nesse vídeo eu vou te mostrar como eu tô criando apps bonitos com IA. Por exemplo, dá uma olhada nesses apps que eu fiz aqui. Esse aqui é o Record, é o app que eu tô fazendo aqui em público. Isso aqui tudo foi feito com inteligência artificial, tá? Dá uma olhada nessa página de preços. Olha isso, cara, você olha para esse aqui, você não imagina, você pensa que um designer experiente fez tudo isso aqui, mas não. Dá uma olhada também, por exemplo, nessa outra aqui que eu criei com IA. Tem também essa aqui que eu criei com IA. Olha, ele seguem ali o meu mouse, o fundo, né, fica meio alaranjado ali. Tem também o meu portfólio, né, eu fiz também com IA. Olha que legal! Então eu fiz tudo isso aqui com IA e eu vou te mostrar todo o meu processo e como que eu tô usando outras IAs para criar interfaces bonitas. Primeiro passo, ele começa aqui, ó, dentro de um projeto no Cloud Code. Eu criei um projeto aqui que eu coloquei vários arquivos de templates e várias coisas pro cloud conseguir gerar isso para mim no final. Então eu tenho umas instruções aqui, ó, um PRD Generator. Ele vai me fazer várias perguntas, eu vou começar a conversar com ele, eu vou primeiro dar a minha ideia, eu vou começar a conversar com ele, depois ele vai criar vários arquivos para mim. Então ele vai criar um arquivo de PRD, ele vai criar um arquivo de MVP, ele vai criar um arquivo de style guide também para ele seguir, e ele vai me dar um briefing também, um arquivo de briefing. Eu vou abrir aqui para vocês, ó, gerador de post LinkedIn com IA adaptativa. Esse aqui eu acabei de fazer e eu vou mostrar pra vocês na prática como que eu tô fazendo. Eu cheguei pra ele e falei: "Quero criar um web app pra gerar posts pro LinkedIn. A ideia é ser um site simples com uma página só, o usuário entra, envia o tema e o sistema gera 10 posts sobre aquele tema. O usuário seleciona os 3 melhores e o sistema gera mais 10 baseado naqueles 3 que ele selecionou e assim por diante. Tipo o Maiaki Aprende." Aí ele vem aqui pra fase 1 de discovery, ele começa a me fazer perguntas pra entender quem é o público-alvo quem são as pessoas, ó, na fase 1 ainda no discovery. E ele vai me fazendo perguntas e eu vou respondendo, cara, simplesmente. Então ele vai entendendo aqui, ó lá, eu vou respondendo, discovery, discovery. Ele já foi aqui, ó, confirmou. Olha lá, o que que eu vou gerar para você? Um briefing, que é um resumo executivo do projeto, um PRD, que são os requisitos do projeto, o escopo do MVP, o que que vai entrar, o que que não vai entrar, uma spec da landing page, né, o que que ele espera que a gente esteja na landing page, um design guidelines, então as diretrizes visuais bem detalhadas de quais são as cores, as pontos, espaçamento e tudo mais. E aqui um spoiler, né, da IA que eu vou estar usando para gerar os prompts, para eu ter uma visão da UI. Eu sei que a maioria dos devs, principalmente pessoal que é do back-end, até quem não é desenvolvedor, tem muita dificuldade de criar uma interface legal, cara. E eu já trabalho com front-end há muito tempo, então eu tenho muitas referências. Eu sei bater o olho em uma tela e falar, cara, isso aqui não tá legal. E eu tenho muitas referências. Então, mesmo com essas referências boas, às vezes é difícil criar uma UI legal. É por isso que a gente tem que ter e seguir alguns métodos e algumas coisas e sempre dar referência pra IA pra ela criar algo legal. Esse Aura Build aqui é uma IA que eu tenho usado bastante. Ela tem a parte gratuita dela, eu vou mostrar pra vocês mais pra frente. Eu tenho usado ela bastante porque ela realmente gera uma UI muito legal e ela dá uma referência. Ela gera só um HTML, mas ela já dá uma referência de onde que a gente pode seguir e a gente consegue ver de forma fácil. Vocês vão ver que é bem legal. Então aqui, ó, ele seguiu para a fase da validação e aqui ele já falou nome do app, paleta de cores, ele perguntou aqui as coisas, a estrutura da página lá, ó, tá vendo? E eu só respondi, ó, o nome do app vai ser o Post Flow, achei legal, a paleta azul do LinkedIn e pode ser 6 posts inicialmente. Aí ele já foi para a fase 3, especificação. Aqui ele cortou muito as fases, a gente pode seguir isso mais. Enquanto a IA não tiver certeza do que ela tá fazendo, ela não vai para a próxima fase. Então ela faz muitas e muitas perguntas. Eu comecei um projeto recente com isso e realmente ela fez muitas, mas muitas perguntas antes de começar e gerar os arquivos finais, tá? Então aqui, ó, ele dá uma especificação, ele fala que ele vai gerar o briefing, PRD, MVP, escopos e tudo mais. Eu só mandei sim. Aí que ele gerou, e dá uma olhada aqui, ó, já tem todas as partes aqui. Então o briefing, ele gera para mim o briefing. Então eu tenho aqui, ó, o problema: criar conteúdo constante no LinkedIn. O contexto: a solução, o público-alvo. Então, profissionais criadores de conteúdo querem manter constância no LinkedIn. Ele adapta founders, profissionais de marketing. Cara, ele já pega tudo nas respostas que a gente vai dando e ele já deixa isso tudo aqui pronto pra gente. O escopo visual, o escopo visual, as páginas, o estilo e os links. O PRD, o PRD aqui já é mais completo, né? Então aqui, ó, já vem o problema, a persona, o user flow, usuário acessa o post flow, ver a tela limpa com o input centralizado, digita o tema do post, liderança em startups, clique em gerar posts, loading state, vê os 6 posts, seleciona os 3, clique em refinar e o ciclo se repete até encontrar o post ideal. Então, cara, ele já entendeu aqui a ideia, eu tive essa ideia aqui agora, então eu tô mostrando realmente pra vocês como que funciona na prática. E aí é que vem o MVP Scope, aqui ele vai mostrar o que que entra e o que que não entra. Olha que legal, olha lá o que que não entra: back-end, IA, autenticação, enfim, várias coisas aqui. O design guidelines, então aqui ele já mostra lá linear, versão, recente, Clark, cores, uso das cores, né? Ele já mostra tudo aqui, já deixa aqui tudo prontinho para a gente criar alguma coisa nisso. E aqui ele me gerou 2 Aura Prompts. Que aqui que a gente tem o nosso pulo do gato. Então lá, o prompt 1, a página de estado vazio. Eu vou vir aqui, eu vou copiar, e agora a gente vem na nossa próxima parte. É só você acessar aqui Aura Build, beleza? Essa aí é a que realmente tá sendo muito diferente para criar interface, para criar ideias e para criar coisas. Quem recomendou ela foi o Luiz, meu parceiro lá dos Art UI. Então ele recomendou ela, eu tenho usado ela bastante. Aqui você pode selecionar qual LLM você quer usar. A melhor realmente é essa Gemini 3 Pro aqui. E um detalhe importante, ele te dá 3 prompts por dia gratuito e 10 prompts no máximo no mês. Então, cara, escolha muito bem os seus prompts. Eu não tô pagando, então tô usando na versão gratuita mesmo, tá? Mas eu já vou deixar claro aqui para vocês que tem que pagar se você quiser usar isso aqui à vontade. Então eu vou colar aqui e vou clicar aqui em gerar, não tem segredo. Então ele vai abrir essa telinha aqui, é bem parecido com o Lovable e todas as outras IAs que a gente tem, e ele vai entender, né, o que que eu pedi ele aqui para fazer, e ele vai gerar. Um detalhe importante, ele vai gerar um HTML, nada mais do que isso, ele gera somente o HTML. E aí com isso a gente consegue evoluir depois. Eu vou mostrar para vocês depois que eu tenho todos esses arquivos prontos o que que eu faço, qual que seria o meu próximo passo, né, para mim começar a criar o projeto e a evoluir nas coisas. Ele já começou a criar aqui, ó. Então tá vendo que ele tá criando e você consegue ver aqui em tempo real o que que ele tá criando. E aí aqui, ó, ele gerou algo bem simples mesmo, já terminou de criar. Ele criou uma página bem simples, creio eu que foi por causa do prompt, né, que ele mandou. Foi algo bem simples que ele pediu mesmo. E eu vou pedir aqui a parte 2, aqui é o prompt, a página de estado já com tudo pronto. Então eu vou mandar um próximo prompt para ele aqui e vou esperar para ver o que que ele vai gerar aqui. E pronto, ele gerou aqui, ó. Então ele sempre vai gerar, cara, com nome aqui, ó. Isso aqui depois a gente tem que melhorar, né, criar uma logo, criar uma forma melhor de identidade visual para logo. Isso aqui não tem como fazer com IA ainda, tá. Mas é que ele já gerou, cara, algo bem simples mesmo, um botãozinho gerar post. Então na outra parte aqui que a gente tem, né, o preview, eu vou clicar aqui, enviar lá, clicar em gerar. Então eu venho aqui, clico, depois eu venho aqui nessa visualização, ele já me mostra aqui, ó, uma UI, que que eu posso fazer e como que ela pode ficar. Então aqui, cara, ele fez com o prompt, né, que eu mandei aqui, ó, o que ele gerou aqui do Aura Prompts. Isso aqui foi o que eu pedi para ele, tá? Ele normalmente não gera isso. O que que a gente pode fazer também, se acha que não ficou legal? A gente pode pegar o nosso PRD, que é um arquivo um pouco mais completo, né, o que que ele tem aqui, tudo mais. E a gente pode copiar. E aí aqui eu vou vir aqui atrás, vou iniciar um novo projeto aqui, ó, e vou enviar. Agora vamos ver o que que ele faz com um PRD que a gente mandou para ele. Pronto, aqui ela gerou já baseado no PRD. E agora eu quero que vocês entendam a diferença. Os primeiros dois prompts que eu mandei, eu mandei ela já fazer baseado no UI que o Claudio tinha entendido. Então, Claudio entendeu qual que seria legal uma visão, né, da tela e tudo mais, da UI, e ele mandou uma especificação: faz isso, isso, isso, isso, aquilo. Beleza, ela foi e fez, e não ficou legal. Eu particularmente não gostei. Então dá uma olhada aqui, ó. Isso aqui foi a UI anterior, que foi um prompt literalmente, ó, falando o que que ela tinha que fazer, como que ela tinha que fazer e tudo mais. E aí, quando ele gerou, ele gerou isso aqui, ó. Isso aqui para mim tá com muita cara de AI. Isso aqui com certeza foi realmente uma IA que fez. E enfim, eu acho que tem como a gente melhorar, né? E aí tem outra parte que ele fez aqui, ó, um botãozinho aqui de clicar. Beleza. Só que o que que acontece? Eu mandei para ele aqui, ó, o outro prompt, numa outra conversa, o PRD. E o que que eu mandei para ele? Eu mandei para ele praticamente o que que é o sistema, o que que ele vai ser feito e como que ele vai fazer. E aí que vem, né, o pulo do gato dessa IA. Ela é um pouco diferente para UI porque realmente, cara, ela faz uma UI muito legal. E dá uma olhada aqui no resultado que ela fez com o PRD que eu mantei. Então olha aqui, ó, já tá bem diferente a UI, né? Tá bem simples, mas tá diferente. E quando eu venho aqui, coloco alguma coisa e clico em gerar, ela já gerou um protótipo. Olha, crafting posts. E olha aqui que doideira, ela já me deu 6 posts que eu consigo selecionar os 3 primeiros. E olha, 3 de 6 selecionados. Refine e Generate. E quando eu clico aqui, ele não vai fazer mais, né, porque como eu disse, essa é aquela que só gera o HTML. Mas olha a diferença, cara, da UI. Olha a diferença da UI. Pode parecer besta, mas, cara, isso aqui dá muita diferença no seu app. Então é muito fácil de você visualizar, é muito fácil você criar coisas legais com ela aqui. Então o que que normalmente eu faço, né, depois que eu gero aqui a UI E eu tenho mais ou menos uma ideia para onde que o sistema vai, qual que vai ser o UI do sistema. Eu venho aqui em export e copio o HTML. E aí o meu próximo passo é abrir o meu terminal na pasta que eu normalmente crio os meus projetos, npx create-next-app, e aí eu vou aqui em postflow. Aí eu já vou criar o meu app em Next porque as IAs hoje normalmente, cara, estão trabalhando muito melhor com o React. Isso a gente não tem que discutir. Eu sou o cara do Angular, mas ultimamente eu tenho criado apps com React, MVP, essas coisas, e eu tenho usado React mesmo. Então eu tô vibe codando a maioria das coisas, mas eu sei para onde eu vou, né? Eu como desenvolvedor, eu sei o que que eu faço, eu sei o que que é um código legal, o que que é um código bom. Eu sei, eu sei padrões de código, eu sei principalmente arquitetura. Então Supabase, segurança e todas essas coisas e ajuda bastante quando a gente tá vai bicodando um app. Mas aqui, ó, criei o meu app, beleza, cd postflow. E aí eu vou abrir aqui o meu VS Code. Então tá aqui, eu vou criar uma pastinha chamada docs e uma pastinha chamada inspiration, beleza. Aqui eu vou criar um index.html Vou voltar lá no Aura, export, copy, paste. Por que que eu vou deixar isso aqui salvo no projeto? Porque aqui ele já salva bastante coisa, ele já cria basicamente, né, ele já cria as classes do ShadCN. E depois a gente consegue pegar esse código aqui e exportar e pedir para o cloud atualizar o nosso documento de design. Então quando a gente vem aqui no nosso cloud novamente, eu vou pegar os arquivos aqui, né, eu posso baixar todos eles, então eu já vou baixar tudo aqui. Então aqui, ó, tô com os arquivos aqui, vou copiar para pasta de docs. Eu não preciso do Aura Prompts. E aí, meus amigos, por aqui a gente já tem o nosso maravilhoso Claudio. Então eu venho aqui, dou um Claudio, e por aqui eu continuo a desenvolver o meu projeto. Então a gente já tem uma ideia do projeto, a gente já tem vários arquivos, né, para a gente mostrar para o Claudio o que que ele vai fazer, como que ele vai fazer. Então aqui eu já venho aqui, dou um /init no Cloud, para quê? Para ele entender a estrutura do projeto e ele vai ler todos esses arquivos aqui e já criar o cloud.md, que é um arquivo bem importante para o Cloud. E aqui ele já vai começar a entender como que funciona as coisas. Então aqui, ó, ele já tá lendo os arquivos, falou, ó, tenho um entendimento bom e já vou criar o Cloud .md aqui. Show! Criou o claudio.md. Agora o que que a gente vai fazer? Eu vou falar: read inspiration index and update design guidelines. Simples. Então ele vai ler esse carinha aqui e vai atualizar o design guidelines com as coisas que a gente tem, que a gente fez lá no Aura Build. E aqui, ó, ele atualizou já o nosso design guidelines. Se a gente for dar uma olhada aqui, ele já atualizou com várias classes do Tailwind aqui. Depois, agora é só continuar codando, pedir ele para usar o ChatCN para as coisas e customizar os componentes do ChatCN para serem usados em todo o sistema. Mas aqui você já vai ter uma base muito sólida do seu app e aí a IA já vai conseguir entender bastante coisa. Então, resumindo, o que eu tenho feito normalmente? Primeiro passo é o processo de ideação. Trabalhar, criar os arquivos necessários, o briefing, PRD, design guidelines e tudo mais. Depois disso eu mando lá no Aura Build, gera uma UI só para mim ter uma noção, né, do que que a gente vai fazer, de como que a gente vai desenvolver, e também atualizar um pouco as interfaces, porque o Claudio ele acaba não conseguindo criar já uma interface e um design guidelines direto assim do zero. Então a gente atualiza com o que o Aura Build faz, e com esse processo você vai parar de fazer esses apps genéricos de AI, principalmente do Lobo, cheio de gradiente, cheio de ícone, para fazer um app de verdade bonito. Muito obrigado por todo apoio e até o próximo vídeo.