00:00:00O Claude Code é péssimo em design front-end e a culpa é sua,
00:00:04mas este é um problema que podemos resolver com um roteiro simples.
00:00:07Você só precisa saber para onde está indo.
00:00:09E neste vídeo,
00:00:10vou detalhar os sete níveis do design front-end
00:00:13com o Claude Code e explicar o que esperar de cada
00:00:16nível, as armadilhas a evitar
00:00:18e o que você precisa fazer para avançar ao próximo.
00:00:21E, ao final,
00:00:22você terá um processo simples e repetível para criar
00:00:25designs de front-end com Claude Code que não sejam apenas
00:00:28mais um modelo genérico e sem graça.
00:00:30Nosso estudo de caso para o vídeo de hoje será
00:00:33nosso web app fictício de SaaS chamado Argus.
00:00:36O Argus será um aplicativo de inteligência de mídia social.
00:00:41Basicamente, um lugar onde criadores de conteúdo ou qualquer
00:00:43pessoa pode ir para encontrar tópicos em alta em seu nicho.
00:00:48E é através do Argus
00:00:49que passaremos por todo o processo de sete níveis.
00:00:52Então, vamos começar com o nível um.
00:00:53E infelizmente, muita gente está travada aqui.
00:00:55É apenas você e um comando.
00:00:57Você abre o Claude Code e simplesmente
00:00:59diz algo como: "Ei,
00:01:01vamos criar uma landing page para o Argus,
00:01:02meu app de mídia social que funciona como inteligência para
00:01:05criadores de conteúdo encontrarem tópicos em alta em
00:01:08seu nicho".
00:01:09Agora, mesmo se eu fizer isso e colocar no modo de plano,
00:01:12o que vamos obter é algo muito, muito genérico.
00:01:15Por quê? Porque não demos nenhuma direção de design.
00:01:18E estamos meio que confiando no Claude Code para preencher
00:01:20as lacunas do que "parece bom".
00:01:22Você ouve muito que a IA não tem bom gosto; é verdade,
00:01:26mas na realidade, a maioria das pessoas não tem bom gosto.
00:01:28E por causa desse problema,
00:01:31elas não conseguem articular isso para o Claude Code, entende?
00:01:33Se você não sabe qual é o visual correto,
00:01:35como o Claude Code vai descobrir sozinho?
00:01:37Então, é aqui, no nível mais básico, que precisamos
00:01:39começar a dominar algumas habilidades.
00:01:41E essas três habilidades são: escrever prompts descritivos,
00:01:43especificar frameworks e entender o que eles de fato são,
00:01:46e começar a construir um vocabulário básico de design.
00:01:46Ao simplesmente usar o modo de plano neste processo,
00:01:50você começará a desenvolver algumas dessas habilidades,
00:01:53pois ele fará perguntas como: "Qual stack tecnológica
00:01:55você quer usar para esta landing page?"
00:01:57Next JS, HTML puro, Astro...
00:01:58Você talvez não tenha ideia do que isso significa,
00:02:00mas ao digitar algo perguntando o que são
00:02:02esses frameworks,
00:02:05você começará a construir um nível de competência
00:02:07nessa área; quando se trata de frameworks e afins,
00:02:11você só precisa fazer perguntas.
00:02:13O modo de plano também vai te forçar a pensar em
00:02:14decisões de design e no objetivo real do seu site,
00:02:17porque não basta dizer: "Ei,
00:02:19eu só quero uma landing page para o Argus".
00:02:20Qual é o ponto disso? Qual é
00:02:21o resultado real que você busca?
00:02:23Neste caso,
00:02:25queremos um cadastro para lista de espera e uma vitrine do produto.
00:02:26E então ele fará perguntas explícitas sobre
00:02:29o estilo. Agora, de imediato,
00:02:32esses estilos visuais que ele oferece novamente
00:02:35são genéricos: escuro e tecnológico, limpo e minimalista...
00:02:38Isso ainda não é específico o suficiente para obter
00:02:41os resultados que queremos. É aqui que todos estacionam.
00:02:42E é por isso que tudo parece tão genérico.
00:02:45Para nós, escolheremos "limpo e minimalista",
00:02:47e faremos apenas o herói,
00:02:49os recursos e uma chamada para ação (CTA) e enviaremos.
00:02:52Agora você deve estar pensando: "Se isso é tão básico,
00:02:53como vou escrever prompts descritivos e
00:02:55construir esse vocabulário básico de design?"
00:02:58Bem, francamente,
00:03:01isso vai levar tempo e experiência.
00:03:03Quanto mais você for exposto
00:03:04ao que é correto, a designs front-end criativos,
00:03:06mais você aprenderá essas coisas.
00:03:09E falaremos mais sobre isso nos próximos níveis.
00:03:12Então, vamos ver o que ele construiu... Nossa, que lixo de IA.
00:03:13Isso é horrível, o mais genérico possível.
00:03:16Temos até os gradientes roxos,
00:03:20que a IA adora por algum motivo. O que aconteceu?
00:03:24O que deu errado? Mesmo com o modo de plano, foi isso que obtivemos.
00:03:27Bem, a verdade é que, como você já sabe,
00:03:30o Claude Code e a IA em geral
00:03:32não são os melhores em design front-end.
00:03:35E se você der prompts vagos e chatos,
00:03:37este é o tipo de resultado que você terá,
00:03:38e ainda assim é o que se vê em todo lugar
00:03:42com talvez poucas diferenças. O que podemos fazer?
00:03:44O que fazer para sair do nível um e desse inferno do design?
00:03:46Mas antes, uma palavra rápida do
00:03:48patrocinador favorito de todos: eu mesmo.
00:03:51Acabei de lançar o Masterclass de Claude Code
00:03:52há pouco tempo.
00:03:55E é o melhor lugar para ir do zero a dev de IA,
00:03:58especialmente se você não tem um background técnico.
00:03:59Eu atualizo isso toda semana. E desde o lançamento,
00:04:02já adicionamos mais de uma hora de conteúdo novo e atualizamos
00:04:04mais de 20 módulos. Se você quiser conferir,
00:04:07você encontra no Chase AI Plus.
00:04:10Há um link para isso no comentário fixado,
00:04:13mas se você é novo em IA e
00:04:14acha que isso é demais agora,
00:04:17não deixe de conferir a comunidade gratuita do Chase AI.
00:04:18O link está na descrição.
00:04:19Bem, para avançar para o nível dois,
00:04:22precisamos dar ao Claude uma educação em design.
00:04:24É aqui que começamos a trazer habilidades.
00:04:25Começamos a trazer prompts especializados externos
00:04:28que ensinam o Claude Code a projetar melhor.
00:04:30Essas habilidades em que confiamos, como a de design front-end
00:04:33e a "UI UX pro max", farão
00:04:36o trabalho pesado para nós.
00:04:39Elas vão injetar no Claude Code comandos que
00:04:41dizem: "Ei, se você está criando uma página neste setor,
00:04:42aqui está o tipo de coisa que você deve buscar".
00:04:45"Aqui está uma lista de técnicas de design clichês de IA,
00:04:49evite-as".
00:04:51Basicamente, isso vai turbinar nossos comandos.
00:04:55Mesmo que comecemos com algo fraco. E
00:04:56aqui está uma olhada nessa habilidade UI UX Pro Max.
00:04:58Este é um repositório de código aberto no GitHub com 52.000 estrelas.
00:05:00Podemos entrar na pasta de habilidades e
00:05:03ver como tudo é configurado. Na verdade,
00:05:07são apenas prompts de texto, um monte de comandos
00:05:09que funcionam como um checklist para o Claude Code,
00:05:12para tirá-lo desse estilo genérico.
00:05:15Para não ficarmos presos nisso. Agora, para instalar
00:05:17esta habilidade específica e todas as outras semelhantes,
00:05:19é muito simples. Se formos ao GitHub,
00:05:21as instruções estão bem aqui.
00:05:23Basta usar /plugin-marketplace,
00:05:26adicionar a habilidade e depois instalá-la.
00:05:27Rodamos isso dentro do terminal do Claude Code.
00:05:30E se isso for um pouco confuso, entenda que
00:05:32você sempre pode copiar a URL disso,
00:05:35colar no Claude Code e dizer: "Ei,
00:05:37eu gostaria de instalar esta habilidade".
00:05:40Então, vamos colocar a habilidade à prova.
00:05:41Carreguei a habilidade com uma barra.
00:05:42Você também pode usar linguagem natural e dizer:
00:05:44"Ei, Claude Code, use a habilidade UI UX Pro Max".
00:05:46E vamos dizer:
00:05:47"Quero que recrie a landing page usando a habilidade.
00:05:50Faça as perguntas que precisar".
00:05:51Agora, assim como no modo de plano padrão do Claude Code,
00:05:54ele nos fará algumas perguntas sobre o estilo.
00:05:55Desta vez, faremos o que ele recomenda,
00:05:57focando em tipografia. Com certeza, parece ótimo.
00:05:59E uma cor para o CTA... vamos de laranja.
00:06:03Queremos fugir do roxo a todo custo.
00:06:05O Claude Code terminou o redesign, então vamos ver.
00:06:07Aqui está a landing page usando a habilidade UI UX Pro Max.
00:06:09De cara, é uma melhora enorme, né?
00:06:12Agora temos um fundo decente e esses detalhezinhos de quadrados.
00:06:15Os botões têm um brilho sutil e até
00:06:18mudam de cor quando você passa o mouse.
00:06:21Temos um gráfico e as cores mudam de uma seção
00:06:22para outra. Está muito melhor, embora ele ainda
00:06:25ame o roxo. Dito isso,
00:06:27está claro que foi feito por IA, certo?
00:06:30Não é algo que você veria e ficaria impressionado
00:06:33com a criação. Ainda parece um modelo de IA.
00:06:36Parece um modelo de IA bem desenhado,
00:06:38mas ainda é um modelo de IA. No fundo,
00:06:40é o mesmo site que você viu antes,
00:06:43com apenas uma "maquiagem" melhor.
00:06:46Então, como podemos realmente melhorar isso?
00:06:48Como sair do nível dois para o nível três?
00:06:49Porque essas habilidades são ótimas.
00:06:51Elas trazem noções de teoria das cores, tipografia,
00:06:52espaçamento e design de layout geral, mas na essência,
00:06:55isso ainda é genérico.
00:06:56E a verdade é que, sobre as habilidades a dominar,
00:06:59a maior delas é: como
00:07:02avaliar esse resultado com olhar de designer e depois
00:07:04transformar essas críticas em prompts?
00:07:07Isso ainda é um problema de escrita de prompts, mas o problema
00:07:08disso, e aqui está a armadilha,
00:07:11é que existe um teto para o quão descritivos podemos ser,
00:07:13especialmente no início, certo?
00:07:16Nos falta o conhecimento para de fato articular
00:07:18os problemas.
00:07:21Estou tentando explicar um meio visual e um problema visual
00:07:23usando apenas texto; inerentemente, algo se perde.
00:07:27O que podemos fazer então?
00:07:27Precisamos começar a mostrar ao Claude Code. O problema era
00:07:31que precisávamos mostrar ao Claude Code
00:07:34exemplos reais do que estamos buscando. Certo?
00:07:36Para desbloquear o nível três,
00:07:39começamos a nos afastar apenas dos prompts de texto e
00:07:41entramos no meio visual, certo?
00:07:44Começamos a mostrar, não apenas falar.
00:07:46No nível três, você se torna o diretor visual.
00:07:49É aqui que começamos a dar ao Claude Code
00:07:52Começamos a mostrar, não apenas a falar.
00:07:54E assim, o nível três é onde você se torna o diretor visual.
00:07:56É aqui que começamos a dar código ao Claude,
00:07:58exemplos concretos do que estamos buscando, entende?
00:08:01Dessa forma, não dependemos apenas de texto e habilidades.
00:08:03Agora usaremos texto, mais habilidades, mais exemplos visuais.
00:08:07Esta é uma grande virada por dois motivos. Primeiro,
00:08:09o Claude obviamente conseguirá imitar melhor
00:08:12uma imagem que você mostra do que a sua descrição dela.
00:08:15Mas, em segundo lugar, pelo fato de usarmos imagens,
00:08:17isso implica que estamos analisando outros sites e
00:08:20agora poderemos ver, novamente, como é o resultado ideal,
00:08:23o que os profissionais da área estão fazendo e como podemos imitá-los.
00:08:25Agora,
00:08:26existem vários lugares onde você pode encontrar inspiração
00:08:28para seus designs de front-end, e vou listar quatro deles.
00:08:31O primeiro é o "Awwwards". A-W-W-W-A-R-D-S.
00:08:34É um lugar onde as pessoas enviam seus trabalhos de front-end
00:08:37e são avaliadas. Por isso, tem um viés bem criativo.
00:08:40O segundo é o godly.website.
00:08:42É um site de rolagem infinita onde você pode simplesmente,
00:08:45de novo, ver vários designs diferentes. O terceiro é o Pinterest,
00:08:48que, surpreendentemente, tem coisas bem legais.
00:08:49Aqui, estou apenas procurando por "landing page de SaaS".
00:08:52Quando encontro uma que gosto,
00:08:53também consigo ver várias outras semelhantes.
00:08:56E, por último, temos o Dribbble. Com três "bes".
00:08:58Aqui, apenas digitei "landing page de SaaS". E, novamente,
00:09:01estou vendo um monte de coisas que parecem bem legais.
00:09:04Digamos que eu tenha gostado de um site como o Open Hands.
00:09:07Eu gosto, sabe,
00:09:09daquela coisa de rolagem no topo com os fluxos de trabalho.
00:09:11Gosto do esquema de cores diferente.
00:09:14É algo incomum logo de cara.
00:09:15Eles têm a prova social e, no geral,
00:09:19estou gostando do estilo, entende? Por exemplo. Então,
00:09:22o que eu vou fazer é muito, muito simples.
00:09:23Vou apenas tirar vários prints dessa página,
00:09:26jogar no Claude e dizer: "Ei, este é o estilo visual
00:09:29que eu quero seguir". Então, dentro do Claude, eu disse:
00:09:31"Na verdade, quero que nosso site siga o estilo do Open Hands".
00:09:34Passei a URL para ele. E depois disse:
00:09:36"Aqui estão alguns prints para referência".
00:09:38E coloquei todos os prints lá.
00:09:40Assim, agora ele tem referências visuais reais para se basear.
00:09:43Seria difícil para mim, pelo menos, descrever em
00:09:45palavras o que eu estava procurando aqui,
00:09:47mesmo com a ajuda de algo como a habilidade de Pro de UI/UX.
00:09:51E é através desse processo
00:09:52que vamos começar a curar referências visuais muito boas.
00:09:55Existem tantas por aí.
00:09:57E quando você começa a vê-las cada vez mais,
00:10:00coisas genéricas se tornam um desestímulo total. E você pensa:
00:10:03"Por que eu faria algo assim quando tudo isso aqui
00:10:05está disponível?" E à medida que você vê mais referências,
00:10:07mesmo que estejamos apenas dando prints ao Claude,
00:10:09isso ajudará você a comunicar o que gosta especificamente,
00:10:12porque
00:10:12você verá as mesmas coisas repetidamente
00:10:14ao analisar todas essas referências.
00:10:16E o que você também vai querer começar a fazer é
00:10:18combinar referências de vários sites, certo?
00:10:21Embora estivéssemos usando o Open Hands aqui,
00:10:23provavelmente há algo legal que encontrei no Pinterest ou
00:10:26no godly.website, tipo: "Deixa eu pegar isso daqui".
00:10:28"E deixa eu pegar aquilo de lá", entende?
00:10:29Quero pegar o melhor de todos esses sites e
00:10:32combinar. No entanto,
00:10:33é muito fácil ficar preso em uma armadilha específica neste nível.
00:10:36Eu diria que a maioria das pessoas para aqui no nível três,
00:10:39onde entendem que, sim, precisam usar habilidades.
00:10:41O Claude puro deixa a desejar no início,
00:10:42mas com habilidades e prints, dá para ir longe.
00:10:45A verdade é que existe um teto aqui porque vamos,
00:10:49vamos acabar ficando presos na "lacuna de estilo".
00:10:50Você verá o que ele acaba produzindo.
00:10:52Vai ficar tipo "meio parecido", sabe?
00:10:55Mas não vai ser perfeito porque, novamente,
00:10:57ainda existe aquele efeito de perda
00:11:01ao eu instruir o Claude, o que é bem comum.
00:11:03Ele faz tudo em código, e ao mostrar uma imagem visual e
00:11:05dizer: "Ei, traduza o visual para código".
00:11:08Esse é o problema com muito design de front-end.
00:11:10É um meio visual, mas
00:11:12estou tentando descrever com texto. Ao mesmo tempo,
00:11:15se eu mandar prints visuais,
00:11:17ainda existe essa parte da tradução.
00:11:18Como ele faz isso direito? Bem,
00:11:20a verdade é que ele tem um limite e podemos ver esse
00:11:22limite em ação bem aqui,
00:11:24porque foi isto que ele criou com todos aqueles prints.
00:11:28Aqui está o original, aqui está o nosso.
00:11:31E como eu disse no passado,
00:11:32é aqui que as pessoas travam.
00:11:33Porque se rolarmos a página, tipo, sabe,
00:11:36se você apertar os olhos,
00:11:37dá para ver mais ou menos o que ele pretendia.
00:11:39E talvez ele tenha chegado a 50% do caminho.
00:11:41E há algumas coisas que gostamos,
00:11:43mas o que as pessoas fazem agora é ir aqui,
00:11:46tirar outro print do herói. Ok.
00:11:49"Vamos trabalhar na parte do herói repetidamente",
00:11:51um monte de comandos, volta e tira print, volta de novo.
00:11:53E isso leva uma eternidade e você nunca acerta em cheio.
00:11:56Certo?
00:11:57Por causa desse problema na tradução dos prints
00:11:59para o código.
00:11:59Então, para sair do nível três e começar a ir para
00:12:02o nível quatro,
00:12:03precisamos não apenas olhar para a superfície desses sites
00:12:06que gostamos e buscar inspiração neles.
00:12:08Precisamos aprender como cloná-los adequadamente e
00:12:11obter o código subjacente que está alimentando algo
00:12:15como o Open Hands. E isso vai além de simplesmente tipo: "Ah,
00:12:18queremos apenas clonar e copiar eles". Não.
00:12:20O processo de clonar e depois descobrir como
00:12:23copiar essas coisas traz grandes benefícios para
00:12:26nós, não apenas pela parte do modelo, que é ótima,
00:12:30mas você será exposto ao código real
00:12:34que está acontecendo abaixo da superfície e passará
00:12:36do nível três para o nível quatro.
00:12:38Agora temos que ir além de simplesmente olhar para a superfície
00:12:41desses sites em busca de inspiração com prints.
00:12:44Agora precisamos aprender como ir abaixo da superfície,
00:12:48olhar por trás da cortina e ver como esses sites são construídos
00:12:51em termos de seus componentes de codificação reais: o HTML,
00:12:54o CSS e o JavaScript deles.
00:12:56E assim, o nível quatro é o Clonador.
00:12:59É aqui que aprendemos "roubando" dos profissionais.
00:13:02Agora, deixe-me ser bem claro.
00:13:04Este nível não é sobre: "Ah,
00:13:05vamos apenas plagiar sites, copiar e dizer
00:13:08que é nosso". Não é o caso aqui.
00:13:10O que acontece é que vamos encontrar sites que gostamos,
00:13:13vamos desconstruí-los e depois usá-los como um
00:13:16modelo sobre o qual vamos construir. E nesse processo,
00:13:20vamos aprender muito, como qualquer habilidade em qualquer área.
00:13:24Como você melhora nisso? Você vê o que os profissionais fazem.
00:13:27Você tenta copiá-los.
00:13:28Você aprende muito ao tentar emulá-los.
00:13:30E com o tempo, você dá o seu próprio toque e cria
00:13:33algo original. É disso que se trata este nível.
00:13:35E para realmente tirar o máximo proveito disso,
00:13:37precisamos começar a entender o que está acontecendo no
00:13:39front-end. De forma simplificada, o design de front-end
00:13:42tem três partes. Tem o HTML.
00:13:45Pense nisso como os ossos do site, certo?
00:13:47Como ele é estruturado. Temos o CSS.
00:13:50Esse é o estilo do site, certo?
00:13:52Pense nele como as roupas do site.
00:13:55E depois temos o JavaScript.
00:13:56Pense no JavaScript como os músculos.
00:13:59É o que realmente permite que as coisas aconteçam quando você
00:14:01clica em um botão ou faz qualquer coisa.
00:14:02E é ao olhar para essas três partes de um site que vamos
00:14:05conseguir clonar ou modelar melhor um site,
00:14:08além de entender como eles funcionam, certo?
00:14:10Toda aquela ideia de desconstruir o site e aprender como
00:14:13eles fazem as coisas. Então, como fazemos isso?
00:14:15Como podemos desconstruir, por exemplo, o Open Hands,
00:14:17já que claramente prints não funcionam porque não é a mesma
00:14:21coisa? Bem, é relativamente simples. Para pegar o HTML,
00:14:25vamos apenas ir ao site e apertar Control U.
00:14:28O que você vê aqui é a totalidade do HTML.
00:14:33Então, o que vamos fazer é copiar isso,
00:14:37certo? Vamos copiar tudo isto.
00:14:39E depois vamos colar no Claude.
00:14:42Isso geralmente será bem grande. Neste caso,
00:14:44são 1.152 linhas de HTML. Agora, lá no
00:14:48finalzinho disso,
00:14:50você pode ver que também existem links para os arquivos
00:14:54CSS, bem como para o JavaScript.
00:14:56E é isso que estou destacando aqui embaixo.
00:14:58Isso estará no final de basicamente todos
00:15:01esses arquivos HTML, vou diminuir o zoom.
00:15:04É meio difícil de ver, mas aqui embaixo, certo,
00:15:06temos o JavaScript e também o CSS.
00:15:09Estes são arquivos reais que também incluem muito código.
00:15:13Então, o que vamos fazer é, após passar o HTML,
00:15:17também vamos dizer ao Claude: "Ei,
00:15:19dê uma olhada no JavaScript e no CSS para
00:15:22entender realmente o que está acontecendo". Então escrevi:
00:15:24"Dê uma olhada nos arquivos CSS e JS também". Você pode parar aqui.
00:15:29E ele usará o "web fetch" por conta própria para analisá-los.
00:15:31O problema é que, no "web fetch", o Claude
00:15:35chama um modelo menor para fazer isso por ele, certo?
00:15:39Então esta instância do Claude não vai de fato àquela página.
00:15:42Ela usa um modelo menor. O modelo menor olha, resume e entrega
00:15:46de volta para o Claude.
00:15:47O problema é que os arquivos CSS e JS são bem grandes e contêm,
00:15:51novamente, muitas das formas específicas como esse site foi montado.
00:15:54E nós queremos tudo, certo? Não quero um resumo desses arquivos.
00:15:58Então, o que eu fiz foi criar uma habilidade que permite ao Claude fazer isso
00:16:03melhor. É essencialmente um comando aprimorado.
00:16:04Assim, ele pega o máximo que precisa do CSS e do JavaScript.
00:16:07Então eu apenas digo: "Use a habilidade de desmontagem de site".
00:16:12Eu vou colocar essa habilidade dentro da comunidade gratuita do School e
00:16:16o link para isso está na descrição.
00:16:18Basta carregar isso e você também poderá fazer o mesmo.
00:16:21Então, no total, o que eu disse? "Aqui está o HTML do Open Hands".
00:16:25Dê uma olhada nos arquivos CSS e JS também.
00:16:28Use a skill de desmonte de site e use essas informações para clonar melhor o site original do OpenHands.
00:16:31Agora, como isso vai nos educar? Bem, antes de mais nada,
00:16:36você provavelmente não tem ideia de como eu consegui fazer coisas como este fundo, certo?
00:16:39Certo?
00:16:40Você provavelmente não entende ou nem sabe que tipo de vocabulário
00:16:43deveria ter usado para fazê-lo mimetizar melhor isso, certo?
00:16:46Quando apenas demos capturas de tela, conseguimos algo tipo, "Hum, sabe,"
00:16:50algo mais ou menos parecido,
00:16:52mas ao fazer o Cloud Code realmente olhar o que está acontecendo sob o capô,
00:16:56podemos agora contar com ele para nos ensinar essas coisas, porque agora o Cloud Code
00:17:01realmente entende o que está acontecendo em nível de código.
00:17:04Podemos agora ter uma conversa inteligente com o Cloud Code e dizer: "Ei,
00:17:07como eles fizeram isso? O que isso significa? O que é um GSAP?"
00:17:11Tipo, "como eles fizeram as animações de rolagem? Como eles fizeram isso?"
00:17:13"Como eles fizeram aquilo?"
00:17:14E, com o tempo, após clonar mais e mais desses sites e usá-los como
00:17:18modelos para suas próprias criações, porque, novamente,
00:17:19você sempre vai dar o seu toque original.
00:17:21Você está apenas usando isso como uma base fundamental.
00:17:23Você se tornará melhor em design front-end,
00:17:26exatamente como acontece com qualquer outra habilidade.
00:17:29E este é o processo pelo qual você não apenas é exposto,
00:17:31mas começa a trazer técnicas profissionais para suas construções,
00:17:34mas para avançar para os níveis adicionais. Como eu disse, você não pode ser apenas,
00:17:38sabe, um macaco no teclado com o Cloud Code,
00:17:41assim como tudo o que conversamos. Não pode simplesmente clicar em aceitar, aceitar,
00:17:43aceitar, próximo, próximo, próximo, porque como você vai se diferenciar?
00:17:46Então, quais habilidades precisamos dominar nesse processo?
00:17:48Precisamos aprender a ler e entender o código-fonte.
00:17:51O Cloud Code nos ajuda nisso.
00:17:52Precisamos identificar quais técnicas equivalem a cada efeito porque, em um
00:17:57determinado momento, temos que ser capazes de ver esses sites e meio que
00:18:02reconhecer de imediato: "Ah, é isso que está acontecendo". E, por último,
00:18:04precisamos aprender a adaptar esses padrões de clonagem aos nossos próprios designs, certo?
00:18:09Não estamos plagiando. Estamos buscando inspiração.
00:18:12E se você não dominar essas habilidades,
00:18:13você vai ficar preso nesta armadilha, certo? O teto da clonagem,
00:18:16você vai apenas copiar, mas não conseguirá criar.
00:18:18Você não vai querer entender o porquê.
00:18:20E então você vai atingir um limite rígido.
00:18:22E eu, no fim das contas, poderia te substituir por qualquer pessoa na rua e
00:18:25apenas dizer para ela seguir os passos um, dois e três, certo?
00:18:27Isso não vai te levar tão longe quanto você deseja.
00:18:29Então vamos ver o que o Cloud Code foi capaz de construir quando demos a ele todo esse
00:18:32contexto de programação adicional, e aqui está a versão atualizada.
00:18:35E esta, obviamente, parece muito mais próxima da original,
00:18:39especialmente agora que o fundo está de fato aparecendo.
00:18:41Se compararmos as duas agora, obviamente não é uma cópia idêntica ainda.
00:18:45Esta foi essencialmente a primeira tentativa dele, mas muito melhor,
00:18:48muito mais próxima do que tínhamos.
00:18:50E se quisermos continuar a iterar a partir deste ponto e aproximá-la de
00:18:54qualquer coisa que gostarmos aqui, bem, isso é muito mais fácil, certo?
00:18:57Porque agora ele está olhando essencialmente para o mesmo livro de receitas
00:19:01que o OpenHands, e podemos dizer: "Ok, deixe-me mudar isso".
00:19:04"Deixe-me mudar aquilo. Já vi como eles fizeram. Aqui está como podemos emular". Certo.
00:19:07E, novamente, é aqui que podemos começar esse processo de educação. Por exemplo,
00:19:10como esse fundo legal funciona?
00:19:12E também como podemos conseguir a mesma coisa que o OpenHands tem, onde o mouse
00:19:17passa e, você sabe, meio que elimina parte dele.
00:19:19Tudo o que você precisa fazer é perguntar ao Cloud Code: "Como o fundo funciona?"
00:19:22"Como podemos igualar esse efeito?" E toda vez que você faz isso,
00:19:25está apenas adicionando mais uma ferramenta à sua caixa de ferramentas.
00:19:27E assim o Cloud Code explica como esse efeito funciona e, melhor ainda, ele agora faz a
00:19:32coisa certa em nosso próprio fundo. Legal demais.
00:19:35Mas, por razões óbvias, não queremos ficar no nível quatro.
00:19:38Não queremos ser apenas um clonador, certo? Queremos dar nosso próprio toque.
00:19:42Queremos começar a tornar isso nosso. Como fazemos isso?
00:19:45Como começamos a avançar para o nível cinco e colocar nosso toque pessoal nas coisas? Bem,
00:19:48é aqui que começamos a nos divertir com componentes e também com nossos próprios designs
00:19:53de ativos personalizados. É aqui que trazemos nossas próprias coisas. E não estamos mais apenas copiando
00:19:56exatamente o que algum outro site está fazendo.
00:19:57Uma das maneiras mais fáceis de começar a fazer isso é encontrando componentes de qualidade em
00:20:02sites como o 21st.dev. De muitas formas,
00:20:04isso é semelhante a como encontramos inspiração para sites e trouxemos essas
00:20:08partes, mas em um nível micro, em um nível de componente.
00:20:11Em um lugar como o 21st.dev, por exemplo,
00:20:14posso olhar coisas como botões aqui à esquerda.
00:20:17E o que vou encontrar é um monte de diferentes,
00:20:21essencialmente, designs de botões. E se eu achar um design de botão que eu goste, digamos,
00:20:26sabe, algo assim. Bem, então posso apenas copiar este prompt,
00:20:29levar para o Cloud Code e dizer: "Ei, vamos integrar este design de botão".
00:20:33E isso se aplica a essencialmente qualquer tipo de botão, certo?
00:20:36Temos coisas para carrosséis, para áreas de rolagem, mapas,
00:20:40menus de navegação, imagens, tudo.
00:20:42E não se limita apenas ao 21st.dev. Temos outros sites como o CodePen, certo?
00:20:46O CodePen tem muitos designs legais que também somos capazes de trazer.
00:20:50O Monet é outro muito legal. Na verdade,
00:20:52há um monte de lugares onde você pode encontrar esse tipo de componentes legais e
00:20:57começar a integrá-los em sua página da web.
00:20:59Mas e se quisermos algo um pouco mais personalizado?
00:21:01Eu não quero apenas copiar um monte de componentes aleatórios que encontrei em outro lugar.
00:21:04Como eu o torno realmente original? Bem, você tem duas opções.
00:21:08A primeira é continuar usando esses componentes do 21st.dev,
00:21:11mas simplesmente pedimos ao Cloud Code para alterá-los, certo? É apenas código.
00:21:14Este prompt nos dá o código exato e então podemos simplesmente ajustá-lo conforme o
00:21:18desejo do nosso coração ou podemos literalmente criá-lo nós mesmos. Quero dizer,
00:21:21se formos ao Pinterest e virmos páginas de destino legais como esta que são
00:21:25quase focadas em arte, bem, não há nada que diga
00:21:29que não podemos usar IA para criar algum tipo de imagem como esta e deixá-la ser uma espécie de
00:21:34atração principal para quando as pessoas entrarem em nossa página.
00:21:36E estas não precisam ser apenas imagens estáticas. Quero dizer,
00:21:39temos totalmente a capacidade de adicionar vídeos ao nosso fundo,
00:21:42para vinculá-los a certas animações de rolagem para, novamente,
00:21:45pegar as ideias que descobrimos no passo quatro e torná-las nossas.
00:21:49Então vamos fazer isso. Vamos redesenhar rapidamente nossa página da web,
00:21:53nos afastar desse clone do OpenHands e realmente criar uma
00:21:57arte de IA legal e deixar que isso seja o que você vê ao entrar em nosso site.
00:22:01E vocês já conhecem o esquema a esta altura,
00:22:02primeiro precisamos encontrar algum tipo de inspiração e, após navegar pelo
00:22:06Pinterest por um tempo,
00:22:07estou vendo muitos sites como este, onde temos algum tipo de imagem quase caricatural
00:22:10ou estilizada no fundo da seção hero.
00:22:14E então teremos alguns dos nossos textos à esquerda.
00:22:16Agora é aqui que você pode começar a trazer um pouco do seu storytelling visual, certo?
00:22:19Qual é o app que estamos criando? O app é o Argus, certo?
00:22:22E precisamos criar algum tipo de slogan que, idealmente, também meio que se conecte
00:22:27à própria imagem. Tipo, o que estamos buscando aqui com o Argus? Bem,
00:22:30Argus, sabe, figuras mitológicas, 10.000 olhos.
00:22:33Estamos falando de redes sociais.
00:22:34Estamos falando de encontrar coisas antes das outras pessoas.
00:22:37Então, o slogan que criei foi "Veja o que vem a seguir", simples.
00:22:41É direto. E você sabe quem me ajudou a criar isso.
00:22:44Obviamente foi o Cloud Code. E então o que fiz com o Cloud Code foi,
00:22:47eu basicamente disse tipo: "Ei, sabe,
00:22:49estamos falando de storytelling visual aqui."
00:22:51"Quais são algumas ideias de imagens que poderíamos criar, certo?"
00:22:54Porque não quero, nesta fase, estamos fazendo nossa própria coisa, certo?
00:22:57Eu posso aproveitar os conceitos gerais do que você vê aqui em termos de imagem e como
00:23:01eles montaram as coisas, mas a imagem precisa ser minha. E, novamente,
00:23:04ter algum tipo de storytelling visual que se conecte ao que sua aplicação
00:23:07realmente faz ajudará muito.
00:23:10Então o que acabei fazendo foi criar uma imagem baseada em algumas
00:23:15ideias que o Cloud Code me deu, e eu usei o Midjourney para isso, agora você pode usar qualquer tipo de gerador de imagens que quiser,
00:23:18seja o Nano Banana Pro ou Seed Dream, não importa realmente.
00:23:21Eu gosto muito do Midjourney para esses tipos de peças que parecem arte conceitual
00:23:24porque o Midjourney, especialmente a versão sete,
00:23:28eu realmente não testei muito a versão oito ainda.
00:23:31Você pode dar a ele um prompt meio estranho. Tipo, o prompt que eu dei foi:
00:23:33"Preciso de uma imagem de fundo que será a página de destino de um site chamado
00:23:38Argus. O slogan é 'Veja o que vem a seguir'".
00:23:41E então, apenas com um prompt ruim assim, bem vago.
00:23:43Consegui um monte de coisas legais diferentes para escolher.
00:23:47E eu vi isso e pensei: "isso parece incrível, né?" E eu já consigo,
00:23:50já consigo imaginar agora mesmo,
00:23:54ter o tipo de informação aqui à esquerda,
00:23:55podemos ter talvez algumas coisas no topo. Posso brincar com isso. Tipo,
00:23:59acho isso muito legal. Talvez até façamos algum tipo de animação em algum momento.
00:24:02Então, uma vez que tenho minha imagem, é bem fácil a partir daí.
00:24:06Vou apenas baixar essa imagem, entregar ao Cloud Code e dizer: "Ei,
00:24:10quero reimaginar a página hero usando esta imagem como fundo".
00:24:13E assim, dentro do Cloud Code, eu disse:
00:24:17"Eu na verdade quero mudar o front-end inteiramente."
00:24:19"Quero usar a seguinte imagem como fundo para o hero."
00:24:21"Vamos colocar as informações sobre o app Argus no lado esquerdo,
00:24:24deixar algum espaço negativo à direita para mostrar a imagem e tornar o slogan
00:24:27'Veja o que vem a seguir'". Então veremos o que ele faz neste ponto. E, novamente,
00:24:30este é o nível em que você precisa começar a deixar sua criatividade
00:24:34meio que fluir, porque até este ponto,
00:24:37você foi exposto a muitos designs de front-end diferentes que são diferentes
00:24:39daquelas coisas super genéricas que você vê em todo modelo de SaaS.
00:24:43Isso significa alguma arte legal, o que for, novamente,
00:24:46o storytelling visual é o nosso objetivo aqui e vai realmente elevar o seu nível.
00:24:48E aqui está como ficou nossa seção hero atualizada com aquela nova
00:24:52imagem de fundo. E eu a deixei um pouco menor,
00:24:52para que você possa vê-la inteira, e o Cloud Code também foi lá e, sabe,
00:24:56atualizou todas as cores. Agora, novamente, essa foi apenas a primeira tentativa.
00:24:58Tudo o que fizemos foi adicionar este fundo, mas de imediato,
00:25:02você começa a sentir que parece um pouco, não sei, mais original,
00:25:06mais criativo, se destaca, certo?
00:25:09E agora começamos a adicionar cada vez mais do nosso estilo a ele.
00:25:12E para começar, isso pode ser tão simples quanto apenas fazer o upscale desta imagem.
00:25:15Você pode fazer isso dentro do Midjourney, porque como vemos aqui,
00:25:19a imagem parece um pouco esticada e não tão detalhada quanto você gostaria,
00:25:21ou podemos fazer algo como adicionar movimento.
00:25:24Não precisamos ter um fundo estático.
00:25:28Podemos colocar um vídeo lá atrás também.
00:25:30Então, transformá-lo em vídeo é muito fácil.
00:25:32Você vai apenas em algum lugar como Kling 3.0 ou Veo 3.1,
00:25:34qualquer lugar onde você possa definir um quadro inicial.
00:25:36Idealmente, você pode definir o quadro final também. Como você vê aqui à esquerda,
00:25:40assim não acontece um movimento maluco, porque você tem que lembrar que,
00:25:41idealmente, seria um loop completo.
00:25:45Às vezes pode ser difícil fazer imagens de IA fazerem o loop corretamente.
00:25:49Então, a segunda melhor opção é criar um vídeo longo, de uns 15 segundos.
00:25:52E você quer que o movimento seja sutil. Tipo o que você vê aqui, certo?
00:25:55Se eu tivesse isso como fundo, mesmo com os pássaros completamente parados,
00:25:59o que é totalmente aceitável, é quase como um efeito parallax que você tem.
00:26:03E como é a página hero e isso dura 15 segundos,
00:26:07as chances de alguém ficar ali sentado por 30 segundos e ver tudo
00:26:11até o fim são improváveis. Então, se houver um tranco no final,
00:26:14você ainda vai estar bem. Mas felizmente, para este aqui,
00:26:18como tínhamos o movimento tão sutil,
00:26:22você quase nem percebe quando muda do segundo 15 para o segundo um.
00:26:24Então vamos usar este. E você provavelmente também está perguntando:
00:26:25"E quanto à performance?" Bem, em termos de performance no desktop,
00:26:29estará tudo bem com o vídeo, mas diremos ao Cloud Code: "Ei,
00:26:31se for um usuário de mobile que entrar na sua página web mobile,"
00:26:35"não vai carregar o vídeo para ele. Vai carregar apenas aquela imagem estática".
00:26:38Então dei a ele a nova imagem com upscale e disse para usá-la no mobile.
00:26:42ele não carregará o vídeo. Apenas carregará aquela imagem estática.
00:26:45Então, dei a ele a nova imagem aprimorada e disse para usá-la no mobile.
00:26:50Depois, enviei o link do vídeo e pedi:
00:26:52"Substitua isso no hero".
00:26:54E aqui está como a página ficou com o movimento.
00:26:58Acho que ficou muito bom. Além disso, é sutil, sabe?
00:27:02Você não quer um movimento exagerado, parecendo um videogame no fundo,
00:27:06a menos que saiba o que está fazendo,
00:27:07mas algo assim, com esse movimento suave das nuvens,
00:27:11e a água se mexendo ali embaixo... Isso dá à página
00:27:14uma personalidade própria.
00:27:15Dar esse nível de originalidade ao site é o foco do Nível 5.
00:27:19Como eu disse, nos primeiros quatro níveis, aprendemos os fundamentos.
00:27:22Vimos o que os profissionais fazem; aqui no Nível 5, estamos customizando.
00:27:25Assim como fizemos no hero, você deve começar
00:27:28a abordar todas as outras seções, certo?
00:27:32Estes cards, por exemplo, estão horríveis. O fundo é meio entediante.
00:27:36É sempre a mesma coisa. Então, o que eu vou fazer?
00:27:38Vou buscar inspiração. Vou ao 21st thought dev, ao Awwwards...
00:27:42Vou levar para o Claude Code e iterar, iterar e iterar
00:27:45até chegar onde eu realmente goste. É nesta fase,
00:27:48enquanto faz essas edições visuais, que você se sentirá um pouco
00:27:51limitado trabalhando apenas dentro do Claude Code.
00:27:54Existe sempre essa tensão entre estar no terminal
00:27:58usando texto e tentar manipular um meio visual. No passo seis,
00:28:03vamos começar a sair um pouco do Claude Code,
00:28:06pois é no Nível 6 que trazemos ferramentas externas que nos permitem
00:28:11ser ainda mais específicos com a composição desses elementos visuais.
00:28:14E temos muitas ferramentas à nossa disposição.
00:28:17Temos o paper.design, o Stitch, o Figma...
00:28:21Temos o pencil.dev.
00:28:22Agora você tem a base e as habilidades para usar esses programas externos
00:28:26para ajustar os detalhes. Uma ótima opção para testar,
00:28:29por ser focada em IA e simples, é o Stitch. E é gratuito.
00:28:33É do Google e basicamente nos dá uma tela visual para mexer
00:28:37com design de front-end.
00:28:38O que eu fiz aqui não foi começar nada do zero.
00:28:42Estamos fazendo um redesign. Então, dei prints do nosso site,
00:28:45tanto da página hero quanto do restante.
00:28:47E disse: "Aqui está a configuração atual. Gostei muito do hero,
00:28:51da estética e das cores,
00:28:53mas quero atualizar basicamente toda a metade inferior do site".
00:28:57Parece muito sem vida, sabe?
00:28:59Quero trazer as imagens e cores que temos no topo.
00:29:03"Vamos ver o que você consegue criar".
00:29:05Vejamos o que ele gerou para o nosso redesign.
00:29:08E aqui está o resultado.
00:29:10Lo genial de Stitched es que puedo hacer que realice rediseños de los rediseños.
00:29:14Com ele selecionado, como podem ver lá embaixo,
00:29:15posso enviar comandos como em qualquer chatbot.
00:29:18Também posso clicar com o botão direito, ir em variantes e,
00:29:22novamente, mudar o layout, esquema de cores, imagens, etc.
00:29:24Como isso foi um redesign no Stitch e não algo construído
00:29:28do zero, ele criou apenas uma imagem.
00:29:30Mas é algo que posso clicar com o botão direito e copiar.
00:29:34Aí levo de volta para o Claude Code e pergunto: "Ei,
00:29:37o que acha disso?". Novamente,
00:29:38essas ferramentas visuais são ótimas para o processo de ideação.
00:29:43E existem várias delas. O Pencil.dev é outra
00:29:46que você verá com frequência.
00:29:47Funciona muito bem se você estiver usando Cursor ou VS Code,
00:29:50porque você pode ter a tela aberta e editar as coisas em tempo real.
00:29:54Há várias ferramentas surgindo nesse mercado toda semana.
00:29:58Então, joguei aquela imagem de volta no Claude Code e disse:
00:30:01"O que você acha disso?
00:30:03E desse efeito de glassmorfismo que temos com a imagem
00:30:06no fundo? Vamos testar".
00:30:08E é basicamente isso que você fará até o site ficar
00:30:12exatamente como você deseja,
00:30:12porque nesta fase do design de front-end, o negócio é ajustar.
00:30:15Você vai ajustar, ajustar e ajustar.
00:30:16A esta altura, você já desenvolveu as habilidades para entender o que busca,
00:30:21mas este é um processo extremamente iterativo e não há atalho.
00:30:25Mas agora você tem todas as ferramentas à sua disposição,
00:30:27tanto para encontrar inspiração quanto para colocar a mão na massa.
00:30:31Após uns 20 minutos ajustando por conta própria,
00:30:34foi este o resultado que obtive com o Argus. Primeiro,
00:30:37vocês notarão algumas pequenas mudanças que dão peso,
00:30:40uma sensação mais premium. Primeiro, a seção de carregamento.
00:30:43Quando eu atualizo a página, o que você vê?
00:30:45Percebe-se uma leve hesitação antes do texto carregar,
00:30:49o que dá uma sensação de algo mais robusto.
00:30:52Também mudei as fontes. Fontes e tipografia são fundamentais.
00:30:57Onde você pode ir para ver fontes diferentes e
00:31:00buscar inspiração? Um ótimo lugar é o Google Fonts.
00:31:03Eles têm zilhões de fontes, todas gratuitas.
00:31:06São categorizadas por tipo, e o Claude Code pode usar todas elas.
00:31:08Dê uma olhada se estiver em dúvida sobre qual usar. Adicionamos
00:31:11uma seção de rolagem aqui embaixo.
00:31:14Adicionamos esse letreiro na parte inferior, que também serve como borda
00:31:19entre o nosso vídeo e o fundo de imagem aqui embaixo.
00:31:25Antes, a transição do vídeo do hero para a mesma imagem de fundo
00:31:30era muito brusca; isso criou uma borda mais natural.
00:31:35Vocês também notarão as mudanças que trouxemos do Stitch.
00:31:38Agora temos esse efeito de glassmorfismo que ainda precisa
00:31:41de uns ajustes. Notem que corta um pouco quando oscila,
00:31:44mas destaca a arte de fundo, dando personalidade ao projeto.
00:31:48E há outros detalhes sutis, vejam.
00:31:52Se eu atualizar aqui,
00:31:54verão o contador subindo rapidamente de zero para 10 milhões.
00:31:59São esses pequenos detalhes periféricos que mostram que você
00:32:03realmente se importou com o site, com um certo orgulho profissional.
00:32:07Notem também esse brilho passando pelas ferramentas de IA
00:32:10e estratégia de conteúdo. Novamente, são só detalhes.
00:32:12A verdade é que a maioria das pessoas nem vai notar
00:32:16essas pequenas coisas. Mas, quando você as combina,
00:32:20o resultado final é algo coerente,
00:32:24algo que você criou com cuidado, independentemente de ter usado IA.
00:32:27O ponto é que foi trabalhado, sabe? Tem todos esses toques.
00:32:31Até a barra de rolagem lá no topo... veja como ela progride.
00:32:34São só detalhes mínimos. E como eu pedi isso?
00:32:38Bem, na verdade,
00:32:40foi apenas uma combinação de tudo o que falamos até agora.
00:32:42Eu vi o tipo de coisa que gosto,
00:32:45tiro prints e levo para o Claude Code. Mas mais do que isso,
00:32:48eu não sou especialista em web design. Então, em certas coisas,
00:32:52eu soube de cara que...
00:32:53Gostei dos cards com glassmorfismo que vimos no Stitch.
00:32:57Porque o Stitch nos deu essa ideia primeiro.
00:32:59Quando o Claude Code os criou originalmente, eram meio sem graça.
00:33:03Eles não se destacavam na página. Então eu disse: "Ei,
00:33:06vamos dar um peso a eles. Vamos fazê-los saltar da tela".
00:33:08Mas o que eu também disse ao Claude Code foi:
00:33:12"Quero que você faça uma busca na web pelas melhores práticas
00:33:17de web design ao fazer esse tipo de coisa".
00:33:20Além de descobrir como dar destaque
00:33:22e peso aos cards, pedi para ele sugerir
00:33:25outras formas de tornar o site mais premium,
00:33:29porém de forma sutil. E ele trouxe várias ideias.
00:33:32Eu analisei todas. Descartei algumas, mantive outras,
00:33:36mas esse é o ritmo geral do trabalho.
00:33:40Você não precisa depender apenas de si mesmo.
00:33:41O Claude pode buscar as melhores práticas, mas lembre-se:
00:33:45você está sempre no controle.
00:33:47Você está no comando, então não tenha medo de se divertir.
00:33:50Como eu disse, esses detalhes dão personalidade
00:33:53e tornam o projeto algo seu.
00:33:57Quanto mais for um reflexo do seu espírito criativo,
00:34:02melhor vai ficar. De verdade.
00:34:04Porque se for um reflexo do que você quer na tela e do que
00:34:08está tentando transmitir, é difícil chamar isso de "IA genérica".
00:34:11É difícil dizer que é um template de IA, porque é seu.
00:34:14Embora este nível pareça ser sobre o uso
00:34:17de ferramentas externas como o Stitch,
00:34:19acho que o Nível 6 é tudo isso que acabei de descrever.
00:34:23Usar essas ferramentas para iterar.
00:34:25Mas, no fim das contas, neste nível,
00:34:27você finalmente consegue pensar de forma criativa e se expressar
00:34:31no design de front-end, usando o Claude Code como ferramenta,
00:34:34diferente dos primeiros níveis onde estávamos apenas seguindo o fluxo.
00:34:37Isso nos leva à camada final, o Nível 7. E o que temos lá?
00:34:41O que é esse papo de 3D? Bem, spoiler:
00:34:45é um lugar onde provavelmente nenhum de nós vai atuar.
00:34:51Quando falamos da fronteira, do arquiteto e de coisas em 3D,
00:34:55estamos falando da elite.
00:34:57Isso não é algo que realmente conseguimos fazer. Acho que hoje,
00:35:02final de março de 2026,
00:35:05não sei se isso já está ao nosso alcance,
00:35:07pois envolve coisas como WebGL customizado, shaders e experiências 3D.
00:35:12Estamos falando de sites
00:35:13que praticamente parecem um videogame. Vejam este site, por exemplo.
00:35:17Vocês acham que isso é algo onde podemos simplesmente
00:35:20dar um Ctrl+U e Ctrl+A para ver o HTML
00:35:25e o CSS e entender o que está acontecendo?
00:35:30Não, isso é pura arte.
00:35:34É uma equipe de designers que passou muito tempo
00:35:37montando tudo isso, e é absolutamente deslumbrante.
00:35:41Em teoria, a IA conseguiria fazer isso? Talvez, mas honestamente,
00:35:45isso está muito além de mim ou de você.
00:35:47Eu incluí isso apenas para mostrar o que é possível.
00:35:50Se quiserem ver mais sites assim,
00:35:53acessem o Awwwards,
00:35:54que mencionei antes, e vejam os "Sites do Dia" e "Sites do Mês".
00:35:57Todos seguem essa linha de serem totalmente customizados.
00:36:00Talvez a IA nos permita entrar nesse campo daqui a alguns anos.
00:36:03Mas é incrível.
00:36:07O espaço de design de sites é muito interessante.
00:36:09Isso aqui é arte, pura e simples.
00:36:12Quando você começa nesse meio,
00:36:16você só vê as mesmas interfaces de SaaS o tempo todo.
00:36:17Mas quando você vê algo assim, sua mente explode.
00:36:19Isso é o Nível 7.
00:36:22E se você sabe fazer isso com IA,
00:36:24deveria estar fazendo vídeos no YouTube,
00:36:27porque eu adoraria aprender. Eu criei
00:36:29este nível só para mostrar o site da Igloo.
00:36:30É muito legal. Então, confiram e deixem
00:36:34suas mentes viajarem no que vocês poderiam fazer
00:36:38no futuro.
00:36:42E é aqui que encerro nossa jornada pelos sete níveis
00:36:43de design de front-end com o Claude Code. O que espero que tenham absorvido,
00:36:46acima de tudo, é a ideia da progressão de habilidades
00:36:51para chegar a algo assim. Porque é totalmente possível.
00:36:56Primeiro precisamos ver o que gostamos,
00:36:58depois aprender a desconstruir.
00:37:01A ideia de clonar sites é superimportante.
00:37:03Você aprenderá muito ao fazer o Claude Code explicar
00:37:06como alguém criou um site que você amou. Nesse processo,
00:37:10você será educado sobre diferentes técnicas e efeitos
00:37:14que nem sabia que eram possíveis.
00:37:18Depois, você poderá ir ao seu próprio site e
00:37:21começar a aplicar isso no seu estilo criativo. É sobre isso.
00:37:26Não se trata de ter uma única habilidade especial no Claude Code
00:37:30que magicamente deixa o site lindo. Se fosse fácil assim,
00:37:33todos os sites seriam bons. E eles não são.
00:37:37Então, claramente há algo mais. Aquela ideia de que
00:37:40IA não tem bom gosto talvez seja verdade,
00:37:44mas acho que o ponto principal é que nós
00:37:47temos dificuldade em articular o nosso gosto.
00:37:48Temos dificuldade porque nem conhecemos as palavras certas,
00:37:53pois não somos web designers. Não conhecemos o vocabulário.
00:37:57Não conhecemos a nomenclatura.
00:38:02E isso é comum com tudo relacionado à IA, não só design.
00:38:05Vale para programação também. Se você não é da área,
00:38:06literalmente não sabe falar a língua. Isso cria uma barreira
00:38:10de tradução entre você e o Claude Code,
00:38:13e o resultado acaba sendo algo genérico.
00:38:15Espero que este guia tenha mostrado um caminho
00:38:19para superar essas dificuldades com o tempo.
00:38:21Espero que tenham gostado. Eu me diverti muito.
00:38:25Deixem nos comentários o que acharam. Como sempre, confiram
00:38:29o Chase AI Plus para acessar o Masterclass de Claude Code.
00:38:32Será um prazer ter vocês lá. Até a próxima!
00:38:37déjenme saber en los comentarios qué les pareció y, como siempre, no olviden echar un vistazo a
00:38:40Chase AI Plus, si quieren poner sus manos en la masterclass de Cloud Code,
00:38:43nos encantaría tenerlos allí y nos vemos pronto.