Web design na Shopify — Planeje, desenhe e crie uma loja virtual na Shopify com IA

1. Apresentação: Olá, bem-vindo ao Shopify Web Design. Seu guia para planejar, projetar e criar uma vitrine na Shopify Se você nunca viu meu rosto antes, meu nome é Christopher Dodd Sou um dos melhores professores aqui no skillshare.com e especialista em desenvolvimento da Shopify, trabalhando com lojas da Shopify trabalhando com Nesta aula, mostrarei o processo de criação de um web design sofisticado para uma loja de comércio eletrônico na Figma Utilizando inteligência artificial o máximo possível para automatizar o trabalho mais básico Nas minhas duas aulas anteriores, ensinei como criar designs web no Figma, estruturados de uma forma específica que facilita interpretação dos agentes de IA e, mais recentemente, conduzi você pelo processo de transformar uma marca de seus elementos principais em uma vitrine funcional usando um tema pronto para uso da Shopify transformar uma marca de seus elementos principais vitrine funcional usando um tema pronto para uso da Neste curso, mostrarei um processo que aborda o que aprendemos nas duas aulas Vamos usar a mesma marca da última aula, mas em vez de encaixá-la em um tema existente da Shopify, criaremos um web design Figma de alta fidelidade para criar para Com a mesma convenção, ensinei a você na minha aula anterior de web design da Figma Nesta aula, automatizaremos o máximo possível do processo de web design, focando apenas nas principais decisões e princípios do web design, deixando IA lidar com a maior parte do trabalho pesado Ao final da aula, você terá criado um conjunto de modelos de alta fidelidade no Figma, todos mapeados em modelos na Shopify, para que possamos usar a IA mais uma vez para gerar o código todos mapeados em modelos na Shopify, para que possamos para da Vamos começar. 2. Prefácio: Então, como mencionei na introdução, vou projetar e construir uma vitrine da Shopify nesta classe usando a mesma marca fictícia que usei na aula anterior mesma marca fictícia que usei Macha Anexado a essa classe, você deve conseguir localizar e baixar a pasta do projeto para o CNS Macha Muitos dos arquivos são os mesmos da classe anterior, mas você também descobrirá que separei a pasta Imagens do site e adicionei várias outras imagens a essa pasta. Também incluí uma pasta de ícones do site com os ícones padrão do Shopify Se você quiser acompanhar exatamente, pode usar os mesmos arquivos que eu, mas se quiser aprender com sua própria marca, sinta-se à vontade para usar seus próprios arquivos. Além dos arquivos do projeto, você precisará de algumas ferramentas. E, infelizmente, ambos têm um preço. código Claude é a ferramenta que vou usar como meu agente de IA nessa classe para automatizar grande parte do trabalho pesado, mas você pode se sentir à vontade para trocá-la por qualquer alternativa, seja Codex by código Claude nos ajudará a criar wireframes no Figma, que é a principal ferramenta que usaremos nesta aula para criar Embora o Figma geralmente seja gratuito, para usar o Figma MCP, que é o que você precisa para conectá-lo ao código Claude, você precisará ter algum tipo de assinatura Para mim, eu pago cerca de 20 dólares cada por esses serviços, mas vale 100% a pena. Dito isso, se você quiser acompanhar sem nenhum agente de IA o ajude, isso também é possível. Você só terá que fazer muito do trabalho básico sozinho, ou seja, configurar os wireframes Figma manualmente Finalmente, e isso é algo que esqueci de mencionar mais tarde na aula, mas se você quiser usar o código Claude para criar um tema personalizado com base nas maquetes Figma que criaremos na aula, convém ter o próprio kit de ferramentas de IA da Shopify instalado Sem ele, o código com garras ou qualquer agente que você escolher usar pode não ter as habilidades e o conhecimento necessários para escrever o código do tema Outra ferramenta que você também pode considerar adicionar é o Chrome DevTools MCP Essa ferramenta permite que o código com garras abra páginas e faça capturas de tela para que ele possa verificar seu próprio trabalho no navegador Essa é uma ferramenta que eu instalei atualmente, mas também esqueci de mencioná-la posteriormente na aula Então você pode querer que esse também seja instalado. Dito isso, se você tem um agente de IA e uma assinatura Figma, você deve estar pronto para acompanhar Embora possamos confiar muito na IA nesta aula, posso garantir que, como alguém com anos de experiência na criação de sites do Shopify, usaremos essas ferramentas de forma profissional para projetar e criar um site do Shopify com base nas bases corretas, em vez de apenas criar outro site vez de apenas criar 3. Quadro do humor / Coletando inspiração: Neste vídeo, abordaremos o moodboard, que é o estágio inicial do processo de web design para obter inspiração visual para ajudá-lo a descobrir quais elementos você deseja em descobrir quais elementos você seu site e qual estética você gostaria para essas seções e para o site em geral Como diz, aqui, um mood board é apenas uma colagem visual de imagens, texto, cores e texturas usada para definir e comunicar a direção estética de um projeto de design Obviamente, em nossa situação aqui, estamos fazendo isso para web design. Vou dar uma olhada em outros sites semelhantes do Shopify, ver o que eles estão fazendo, capturar seções de tela que gostamos e colocá-las em um quadro de humor, que você pode imaginar como um álbum de recortes Você não precisa de nenhum software específico para isso, mas parece que vamos usar o Figma para o resto da aula, eu vou usar o Eu já configurei um arquivo de design aqui para essa marca na qual vamos trabalhar. É a mesma marca falsa da classe anterior, Sans Macha Obviamente, estamos fazendo isso de uma maneira diferente desta vez, mas o processo com o moodboard é basicamente o O primeiro passo é , obviamente, onde procurar esses sites de inspiração. Se quiser, basta pesquisar no Google ou usar uma ferramenta como o Gemini, que também é um produto do Google Assim, poderíamos entrar aqui, assim como fizemos na aula anterior, e perguntar quais são as principais marcas da MachaPowder que vendem predominantemente online OK. Então, esse foi basicamente o mesmo aviso que colocamos no Gemini da última vez, e você pode ver aqui que há diferentes categorias que temos aqui Como vimos na última vez, algumas delas são muito japonesas e autênticas, e algumas são marcas de macha mais modernizadas voltadas para o consumidor Então, aqui estão algumas aqui, Jade leaf marcha. E, claro, isso é especificamente para marcas de macha. Você quer mudar isso para qualquer que seja sua marca. Então, se você vende suplementos de proteína, você quer ver quais são as principais marcas de suplementos proteicos. Mas você também pode procurar inspiração de design fora do seu nicho. Qualquer tipo de site de comércio eletrônico que você goste. Sempre que você estiver navegando outros sites de comércio eletrônico e encontrar algo de que goste, definitivamente você deve marcá-lo ou trazê-lo para o seu quadro de humor Mas estamos fazendo isso em uma sessão aqui. Então, vamos ver o Jade Leaf Marcher como nosso primeiro exemplo E eu já posso dizer aqui, assim como fiz na última aula que gosto de alguns dos elementos de design. A diferença entre essa classe e a aula anterior é que vamos projetar tudo do zero. Então, vou observar o sistema geral de design de todos os sites de que gosto , porque mais tarde na aula, criaremos algo chamado MD de design para todos os sites de que gostamos, descrevendo o que gostamos nesses sites e, em seguida, combinaremos com nosso próprio sistema de marca para criar um sistema geral de design para nosso web design usando IA. Está bem? Então, não vou apenas capturar as seções que eu gosto, mas também vou anotar os URLs dos sites que eu gosto de sua estética geral Então, esse, Jade Leaf, eu realmente gosto da estética deles Estou procurando construir algo semelhante. Então, o que vou fazer é abrir uma edição de texto, qualquer tipo de software de texto simples, e colar isso lá. Ok, então eu quero ler e obter inspiração para as seções que eu possa gostar no meu site. Então, como você pode ver aqui, temos uma seção de heróis e, em seguida, uma seção de coleção em destaque. Esses são os termos padrão do setor na Shopify. Um herói que você pode considerar como um grande banner que aparece no topo da sua página e uma seção de coleção em destaque, no que se refere à Shopify, é basicamente um monte de cartões de produtos listados em uma cartões de produtos listados em linha como essa, geralmente com um Então, isso está apenas explicando parte dessa terminologia. Quase todos os sites de comércio eletrônico que você verá começam com um herói e uma seção de coleção em destaque E você verá que isso está incorporado aos padrões da ferramenta que usamos para gerar o plano da nossa loja na Shopify Está bem? Então, à medida que descemos, há outro banner aqui. Há diferentes categorias aqui. Então, há uma seção de lista de coleções aqui, uma imagem à esquerda, texto no elemento direito. Eles têm um controle deslizante de receitas aqui. Novamente, depende do site que você está visitando. Normalmente, a maioria dos sites de comércio eletrônico do Shopify terá o herói e a seção de coleção em destaque, mas depois disso, isso realmente dependerá dessa Ok, então o que eu quero que você faça aqui é o número um, como acabei de fazer, listar os sites que você gosta do sistema geral de design, porque vamos usá-lo para ajudar a criar nosso sistema de design mais tarde. segundo lugar, quero que você dê uma olhada em algumas seções e se inspire quais tipos de seções você pode colocar em seu site, além da coleção padrão de heróis e recursos. Por exemplo, talvez você veja esta seção de receitas aqui e diga : Ah, na verdade, tenho muitas receitas excelentes com nossa marca marcher Esta é definitivamente uma seção que eu quero no meu site. Então, podemos até mesmo escrever isso em nosso documento de texto aqui, seções que eu quero, certo? Digamos, receitas em destaque. E na Shopify, podemos colocar isso em um blog. Eu acredito que isso é provavelmente o que eles fizeram. Sim, então eles estão usando o modelo de artigo para entregar todas essas receitas. É basicamente apenas uma postagem de blog, ok? Também há algumas sinopses aqui, o que é Macha, como fazer Macha, benefícios para a saúde de Macha Então você poderia dizer: “Ok, eu quero” e depois descrevê-lo como quiser. Desde que você a entenda e possa descrevê-la, não precisa ter um nome exato, mas eu chamaria aquelas que listam produtos de coleção em destaque ou produtos em destaque, e esse de herói, porque o aplicativo que vamos usar para criar os planos entende o que é uma seção de coleção em destaque e uma seção de heróis. Ok, então quanto mais pudermos usar a terminologia padrão , melhor, mas não se preocupe muito com isso Descreva a seção da melhor maneira possível. Para mim, o que vou fazer com minha lista de seções é basicamente replicar as mesmas seções que tínhamos em nosso site de ciências da aula anterior Então, se você se lembra, acabamos de configurá-lo com um tema pronto para uso. Então, se você olhar o site, temos nosso herói. Temos nossa linha de produtos, nossa coleção em destaque aqui. Temos algumas sinopses sobre Y Cans Macha. Como não havia uma seção de texto com ícones no título WA do tema, tivemos que combinar duas seções aqui, mas não precisaremos combinar duas seções para criar uma seção quando a desenvolvermos de forma personalizada. Então, essa é essencialmente uma seção, os USPs, e depois essa seção de depoimentos Também vou adicionar algumas outras, como vou adicionar em uma barra de anúncios, mas, na maioria das vezes, vou usar a mesma lista de seções que criamos na aula anterior, ok? Seus propósitos, o que eu quero que você faça, é desenvolver essa lista, determinar que tipo de seções você deseja e também examinar o design delas, ok? Então, talvez não tenhamos várias categorias diferentes em nossa marca marcher Na verdade, temos apenas quatro produtos. É uma marca bastante simples para minha marca de teste específica, mas eu definitivamente gosto do estilo do cabeçalho. Então, eu vou fazer uma captura de tela, e eu tenho isso configurado para que ela vá diretamente para o filtro de capturas de tela aqui, E então eu posso entrar no meu quadro de humor aqui e dizer, você sabe, você pode configurar isso como quiser. Posso dizer que gosto dos designs de cabeçalho. OK. E então você pode simplesmente trazer essa captura Talvez você queira aumentar esse texto. Eu definitivamente tenho. Ainda maior do que isso. Então, podemos dizer: Chefe de design que eu gosto. Eu gosto do tipo de aparência de pílula. Você pode dizer: Ok, seções que eu gosto. Ok, digamos que, para este, eu vou apenas diminuir o zoom para que eu possa realmente capturá-lo com mais facilidade. A redução do zoom realmente não funciona. Então, vou tentar capturá-lo da melhor maneira possível dentro da minha pequena largura de tela aqui. Então eu vou pegar isso. E então eu vou dizer, na verdade, eu posso simplesmente copiar essa cabeça. E diga ideias de seção, certo? Então, poderíamos fazer uma seção de receitas, trazê-la para a seção Ideias. Sabe, podemos organizar isso em uma moldura. Então, vou clicar e arrastar para criar um quadro e, em seguida, colocar isso acima aqui como ideias de seção. Na verdade, você pode colocar isso em outra página, por exemplo, a forma como você configura seu quadro de humor depende de você. Estou apenas abordando os princípios básicos do que você deseja procurar e nos inspirando para que possamos dizer aqui as receitas em destaque, certo? Então, chefe de design, você gosta ideias de seções para seu próprio site. Vou trazer um pouco dessa barbatana branca. Traga-o à esquerda também. Apenas tente colocar isso no meio. E, claro, vimos apenas um site até agora. Então, vamos dar uma olhada em alguns outros centímetros. Vamos dar uma olhada em Incher Macha. OK. E vamos novamente procurar uma seção de heróis muito boa lá. Talvez façamos uma captura de tela da seção de heróis, fechando qualquer pop-up irritante Eu gosto dos emblemas aqui cultivados no Japão e no USDA Então, podemos dizer, aqui, copiar esse título e dizer: designs de heróis que eu gosto e, em seguida, trazer a captura de tela mais recente Certo? Então, estamos apenas criando um quadro de Mo aqui, exatamente o mesmo processo que fizemos da última vez, mas desta vez não estamos limitados à lista de seções dentro de um tema pré-construído. Estamos construindo tudo isso do zero. Então, qualquer seção que você goste e qualquer look que você goste, podemos conseguir por meio desse processo que faremos, em estamos construindo tudo do zero, que parece assustador, mas com a IA, podemos automatizar o máximo possível Não gosto do sistema geral de design deste One Peak Marcher, mas meio que gosto desse , compartilhando os benefícios Então, eu poderia fazer uma captura de tela disso e depois colocá-la nas minhas ideias de seção aqui Tudo bem, então vou dar a esta um nome, digamos, seção de benefícios. E podemos passar por esse processo o quanto você quiser. Quanto mais pesquisa e inspiração você reunir, melhor. Mas, no mínimo, eu diria que passe pelo menos meia hora fazendo isso. E para meus propósitos, como eu disse, vou usar a mesma lista de seções que criamos na aula anterior usando o tema pronto para uso, apenas para manter as coisas simples. Mas para você, quero que capture os URLs dos sites em que você gosta do sistema geral de design, faça uma lista das seções que deseja e também anote e também anote determinados designs de seções que você definitivamente incluirá ou está pensando em incluir e pense sobre o que você realmente gosta nesse design específico Novamente, esse é um processo flexível. Não há uma maneira definida de fazer isso exceto pelo fato de que posteriormente carregaremos nossos sites favoritos em uma ferramenta para gerar um sistema geral de design. Mas é claro que, se você quiser apenas assistir à aula e depois voltar a ela com sua própria marca, você sempre pode seguir todos os exemplos e o projeto de teste que estou executando para essa aula em particular. Você pode simplesmente acompanhar a marca falsa que eu já criei, SNS Marcher Ok, então isso é tudo para o moodboard. No próximo vídeo, vamos realmente montar nosso plano de site, que então se tornará o wireframe inicial do nosso design Shopper Fi de alta fidelidade 4. Planejamento e geração inicial de wireframe: Neste vídeo, abordaremos a fase de planejamento, que, por sua vez, criará nossas maquetes iniciais para o site da Shopify Agora, a vitrine da Shopify é construída em um sistema de Então, a ferramenta que você está vendo agora, que é uma ferramenta que desenvolvi especificamente para esse propósito, fará engenharia reversa desse que geremos nossos projetos com base no sistema de modelagem real usado no Shopify para que possamos traduzir facilmente esse projeto de design em código da vida real, que é de qualquer projeto de web design, quer usemos IA ou não. Tudo bem, então, como você pode ver aqui, estamos no storefront Essa é a URL na qual você pode acessar essa ferramenta. E, como você pode ver, eu já tenho minhas credenciais aqui e posso simplesmente clicar em Entrar quando estiver pronto Para você, você precisará criar uma nova conta. Então, basta clicar aqui para criar uma nova conta. É totalmente gratuito. A razão pela qual posso fazer isso de graça é porque ainda enviaremos solicitações para Claude ou para qualquer assistente de IA que você preferir Portanto, você precisará de seu próprio pedido de assinatura de IA para lidar com a geração real do Figma e do código Mas o que essa ferramenta ajudará você a fazer é gerar o plano que poderemos então fornecer ao nosso agente de IA. Então, sem mais delongas, vou me inscrever. E, como você pode ver, a página inicial uma nova conta ainda não tem projetos, então vou clicar nesse botão para criar um novo projeto. E, como já discutimos, vou usar a mesma marca falsa que criei na última aula do Skillshare, Sance Macha premium Macha para a Em seguida, vou clicar em Criar projeto. Aqui você pode ver que já temos um ponto de partida para o mapa do nosso site gerado. Então, se voltarmos ao editor da loja virtual para tema da sessão em que trabalhamos na aula anterior do Skillshare , você verá aqui nesta lista suspensa que você tem uma lista de modelos , com alguns deles permitindo Qualquer um deles com o Chevron ao lado permite um modelo padrão desse tipo com outros modelos alternativos Esse é o sistema de temas do Shopify e, se você já trabalhou com o Shopify antes, deve estar Voltando ao planejador da loja, você verá que este mapa do site aqui é específico para o sistema de desenvolvimento de temas Shua fi E se passarmos o mouse sobre elas, assim como no editor da loja virtual, podemos adicionar novas seções ao modelo ao grupo de cabeçalhos e, também, em determinados modelos, podemos adicionar modelos alternativos Então você pode ver aqui se eu clicar aqui e, digamos, pacote, na verdade, vamos fazer isso para nosso projeto específico. Então eu vou fazer isso agora. Adicione um modelo de produto alternativo ao pacote. E se rolarmos para baixo, podemos ver o grupo do modelo do produto. Aqui temos nosso modelo de produto padrão, mas temos um modelo alternativo separado chamado Bundle OK. Você pode ver isso também no modelo de página. Isso é muito típico em tuba fly. Você tem um modelo de página padrão. Então, por exemplo, você pode ter uma página de política de privacidade e uma página sobre nós. Todos eles seguem o mesmo modelo, mas a página de contato terá um formulário de contato. Então, isso fica em um modelo diferente, e você pode ver aqui para o modelo de página padrão, temos apenas uma seção de página principal e, para a seção de formulário de contato, em vez disso, temos uma seção de formulário de contato. Você verá aqui que muitas dessas seções têm o principal à sua frente pois essas seções são consideradas para o tipo de modelo específico. A página inicial será a mais flexível. Como eu disse, a maioria dos projetos tem uma seção de heróis e uma seção de coleção em destaque. Mas na página da coleção, você provavelmente terá apenas uma grade de coleção, como é o caso aqui, ou em qualquer site do Sho Fire que você encontrar, você acessa uma página de coleção Normalmente, é uma grade de cartões de produtos mostrando os produtos dessa coleção, ok? Então, nesse sentido, temos três tipos diferentes aqui. Temos essas seções globais, então o cabeçalho e o rodapé, se eu navegar até elas. Aqui mesmo. Portanto, o cabeçalho e o rodapé são por padrão, mas também podemos adicionar novas seções ao grupo de cabeçalho e rodapé Eu posso mudar isso no futuro, mas tenho muitas configurações de acabamento aqui. Então, nos dizendo quais seções ainda precisamos planejar. Temos nossas seções principais e pedimos desculpas. Se o aplicativo estiver um pouco lento. Acabei de criá-lo, então acho que está demorando um pouco para se aquecer. Aqui você pode ver a configuração de nossas seções principais. Por exemplo, na seção principal do produto, se usarmos um modelo de produto, você verá aqui que há uma seção chamada página do produto. Mas, como você pode ver aqui, podemos adicionar seções diferentes abaixo do que normalmente chamamos de seção principal do produto, que mostra a galeria de imagens, o título , o preço e todos os outros detalhes necessários para esse produto Está bem? Depois, temos outras seções, que podem ser qualquer coisa diferente de nossas seções globais, ou seja, o cabeçalho e o rodapé ou nossas seções principais Então, temos o formulário de contato, a seção de coleção de recursos e a seção de heróis aqui. Está bem? Portanto, nosso objetivo é começar primeiro com o mapa do site, adicionar qualquer modelo alternativo, adicionar nossa lista de seções para cada modelo e, em seguida, fornecer ao nosso planejador detalhes extras no cabeçalho e rodapé e nas seções principais e, em seguida, em quaisquer outras seções seguida Então, aqui estamos criando nossa lista de modelos e nossa lista de seções e, em seguida, as outras três guias fornecerão detalhes extras a essas seções Tudo bem, então entre os vídeos, como sugeri que você mesmo fizesse, criei uma lista das seções que eu quero dessas seções opcionais e também adicionei um segundo site de inspiração aqui, que usaremos mais tarde para ajudar com nosso sistema de design Por enquanto, não estamos nos concentrando muito no design de alta fidelidade. Só estamos tentando derrubar nossa estrutura. Então esse é o planejamento e o wireframing de alto nível, ok? Então, obviamente, eu quero um herói da página inicial e uma seção de coleção em destaque, mas queremos uma seção de pontos de venda, essencialmente, aquela seção do Y Sance Marcher que eu mencionei anteriormente Vou clicar em Abaixo da coleção em destaque. Vou deixar essa nova seção criada e depois vou chamar isso de pontos de venda. Aqui, quero descrever da melhor maneira possível qual deve ser a aparência e fazer para que a IA saiba o que construir. Então eu vou dizer o título da seção, y Sans Macha com três sinopses. São três sinopses Um, dois, três, quatro, quatro. Então, vou mudar isso para quatro sinopses abaixo. Cada sinopse tem ícone, título e subtexto. E então vamos clicar na seção Inserir. Ok, então vamos lá. Adicionamos a seção de pontos de venda aqui, e a última da nossa página inicial foi a seção de depoimentos, a seção depoimentos com três depoimentos e a última da nossa página inicial foi a seção de depoimentos, a seção de depoimentos com três depoimentos. Cada depoimento tem uma citação, junto com uma imagem e um nome para cada autor do depoimento Digamos que. Ok, então eu também vou para a seção de coleção. Se você se lembra, do nosso site anterior, que configuramos usando o tema prestige, também há essa seção de banners de coleção aqui Então, vou clicar acima da seção principal da coleção, e vou chamá-la de banner da coleção, seção de heróis com imagem de fundo para ir para o topo das páginas da coleção, acima da grade de produtos. Inserir seção. Ok, isso está aí. Para a seção de carrinhos, é bem antiquado que o cliente tenha que acessar uma página separada para ver o carrinho. A maioria dos carrinhos agora funciona como uma gaveta que se abre para o lado e fica dentro do cabeçalho Então, eu não vou me concentrar muito neste. Podemos simplesmente deixá-lo na seção principal do carrinho. Todas as seções principais deste planejador já têm descrições que correspondem aos padrões, mas você pode, é claro, alterar esses padrões se tiver um design muito específico em esses padrões se tiver um design muito Mostrarei isso a seguir, à medida que avançarmos para a próxima guia. mesma coisa com a página de pesquisa, mesma coisa com o índice do blog e o artigo do blog, mas também deixei esses ícones aqui para excluir esses modelos dos wireframes, caso seu site do Shopify não tenha um Por enquanto, vou manter isso aqui e usar o índice padrão do blog e a seção principal do artigo. Passando para o modelo de produto, como mencionei antes, criei um modelo alternativo. Eu posso criar outro modelo alternativo como esse. Ou exclua qualquer modelo alternativo aqui. Quero um modelo diferente para um pacote de produtos. Se você se lembra da nossa marca CNS, temos um quarto produto que, na verdade contém todos os três produtos anteriores Então, eu quero criar um modelo diferente, e o motivo é porque vou adicionar uma seção diferente aqui chamada O que está incluído, que só é relevante para o produto do pacote Então, vou dizer uma seção que mostra os três produtos que estão incluídos em um pacote de produtos Então, para a seção principal do produto e a seção do pacote, vou adicionar os pontos de venda novamente. E como essa é uma seção existente, não vou deixá-la na seção Criar nova. Vou abrir isso e selecionar pontos de venda a partir daqui. Não preciso de uma descrição porque já tenho uma, então vamos adicioná-la e, em seguida, os produtos relacionados abaixo dela Então eu vou entrar aqui, e podemos simplesmente reciclar a coleção em destaque Agora, como eu já criei o modelo alternativo, naturalmente não haverá essas seções aqui. Eu provavelmente deveria ter construído isso primeiro e depois ramificado, mas está tudo bem O que vou fazer é adicionar também a seção de pontos de venda desse modelo. E talvez eu omita a coleção em destaque porque esse pacote tem todos os produtos incluídos, então queremos mantê-los nesse produto E então, um padrão bem típico, como mostrei antes, o modelo de página, apenas a seção da página principal que mostrará qualquer conteúdo o usuário administrador coloque seção de conteúdo da página do administrador e, em seguida, esse formulário de contato, qual realmente não precisamos reinventar a roda Também podemos adicionar um modelo de meta-objeto. Se você não sabe o que isso significa, não se preocupe, mas isso é para o caso de você querer criar páginas com base em seus meta-objetos. Tudo bem, então se eu voltar aqui, estou praticamente pronto, exceto que quero adicionar uma nova seção ao grupo de cabeçalhos. Será uma seção de barra de anúncios, uma barra de anúncios, e podemos ter barras de anúncios que aparecem como um controle deslizante, uma marquise, imagens diferentes Mas vou dizer apenas promoção de texto de linha única em uma barra fina. Tudo bem, vou clicar na seção Inserir. E agora você verá que todos os nossos modelos que usam o mesmo grupo de cabeçalhos, que são todos eles, agora têm essa barra de anúncio adicionada. Agora, essa é uma seção global definida pelo fato de ter sido adicionada a um grupo de cabeçalhos ou a um grupo Potter Então, você verá que cada modelo tem essa barra de anúncio. OK. Se você quisesse aparecer em apenas um dos modelos, em vez de adicioná-lo ao grupo de cabeçalho ou rodapé, basta adicioná-lo nesta seção branca aqui, que é o modelo, ok? Portanto, desde que esse seja nosso plano geral, que sempre podemos voltar e alterar a qualquer momento, e estejamos felizes em seguir em frente, agora podemos ir para a próxima guia Seções globais. E preencha alguns outros detalhes para ajudar a IA a entender o que cada um deles é. Está bem? Então, vou clicar em Editar informações na barra de anúncios. E, como você pode ver, está um pouco apertado nessa altura Mas você pode ver aqui na barra de anúncios, o que a seção está tentando alcançar? Então, podemos adicionar algum propósito aqui, digamos, promover certas ofertas e, em seguida, como isso funciona? Se for um controle deslizante com várias mensagens diferentes que queremos mostrar, queremos escrever isso aqui E também queremos marcar essa caixa para blocos repetíveis de usuários, pois podemos configurá-la como mensagens separadas incorporadas blocos diferentes que podemos definir no editor da loja virtual Nesse sentido, ele extrairá os dados das configurações de seção e bloco Como você pode ver aqui para a fonte de conteúdo, podemos inserir dados do armazenamento de dados temáticos, que significa extraídos da loja real, não do editor da loja virtual ou de uma combinação de ambos. Definitivamente, esses serão dados do tema, porque a intenção é o usuário edite o texto no nível do tema da Shopify, e não há nenhuma funcionalidade Então, vou deixar isso em branco e clicar em salvar. Ok, então a barra de anúncio, nós configuramos, e agora vamos entrar no cabeçalho. Portanto, o cabeçalho terá alguns campos extras aqui para a configuração. Primeiro, ele nos perguntará o que o cabeçalho deve conter? Normalmente, o cabeçalho contém um título ou logotipo do site, alguma navegação e, em seguida, esses ícones específicos que acionam coisas diferentes no Shopper Fi Então, vou selecionar todos eles. Terá um ícone de cartão de contas para a gaveta do carrinho e um ícone de pesquisa que permite aos usuários pesquisar diretamente no cabeçalho Então eu vou clicar em seguida. E agora posso tomar algumas decisões sobre se quero um mega menu, que é bom para três níveis de aninhamento ou um menu suspenso, que é melhor para dois níveis de aninhamento Então, digamos que, para nós, faremos uma lista suspensa porque não temos necessariamente muitos níveis diferentes de aninhamento Também pode optar por usar uma gaveta Nav na área de trabalho. Então, normalmente, quando você está navegando no celular, você não tem mais itens de navegação no cabeçalho porque a largura da tela é muito pequena. Você geralmente tem aquele ícone de hambúrguer à esquerda. Então, na verdade, vou te mostrar isso aqui. Exatamente assim, você geralmente tem aquele ícone de hambúrguer à direita, e isso é chamado de gaveta de navegação Alguns sites usarão a gaveta de navegação no celular ou no desktop, então você pode clicar aqui para escolher essa opção ou descrever um comportamento personalizado aqui Mas vou abrir o menu suspenso e, nesse campo opcional, você pode adicionar qualquer coisa especial que apareça na gaveta do menu do celular quando o ícone do hambúrguer é Uma coisa que quero observar aqui é que, se você não sabe a resposta para nada disso, tudo isso está confundindo você, basta planejar qualquer coisa Vamos pegar os wireframes. Você o verá dentro um Figma e poderá editar a partir desse ponto Essas são apenas algumas decisões comuns de design em torno elementos e padrões realmente comuns nos sites de comércio eletrônico da Shopify , que estamos apenas perguntando com antecedência , para que seja apenas um clique no planejador que a IA criará Está bem? Então, na próxima, como a pesquisa deve se comportar quando um visitante clica no ícone Portanto, direi que deve abrir uma entrada de pesquisa abaixo do cabeçalho em que o usuário insere o termo de pesquisa, pressiona Enter e é direcionado para a página de pesquisa com a consulta de pesquisa pré-preenchida OK. Mas, novamente, o que quer que você pense aqui, na verdade, acho que você pode deixar isso em branco se quiser ou apenas adivinhar aqui. Agora, o que o ícone do carrinho deve fazer? Em alguns sites que não têm uma gaveta de carrinho, ela apenas direciona o usuário para a página do carrinho Mas vamos criar um tema normal do Shopify moderno, então ele abrirá a gaveta do carrinho Então, aqui podemos falar sobre como a gaveta do carrinho deve funcionar Deixe-me ver se consigo pular isso porque não queremos nada especial com a gaveta do carrinho Sim. E então qualquer outra coisa que queiramos descrever sobre o cabeçalho. Aqui é onde podemos adicionar qualquer informação extra. Caso contrário, se deixarmos com informações genéricas, nos forneceremos um wireframe genérico, que, se você não tiver nenhuma objeção, está tudo que, se você não tiver nenhuma objeção, está Mas se você quiser algo específico, melhor escrevê-lo agora para que seus wireframes iniciais fiquem mais próximos da visão que você tinha em mente para sua Então, vou clicar em Salvar e isso concluirá a configuração do cabeçalho. Como você pode ver aqui, configure e desça até o grupo Rodapé Vou clicar em Configurar sobre isso. E, novamente, ele vai me perguntar quais elementos eu quero no meu rodapé Então, acho que vou selecionar todos esses. Eu quero um logotipo do site. Eu quero navegações. Quero uma assinatura de e-mail, ícones sociais e uma linha final abaixo do resto do rodapé, geralmente chamada apenas de seção inferior E então, de quantos menus diferentes precisaremos? Então, por exemplo, novamente, eu quero dar uma olhada nisso se formos à sessão Macha da última aula do Skillshare Você pode ver aqui que você verá que ele só tem um, então vou colocar um aqui. E o que a seção inferior deve incluir? Como você pode ver aqui, a seção inferior do site anterior contém apenas os direitos autorais. Mas se formos a um de nossos sites de inspiração, como Jade Leaf Macha, se você for até aqui, verá que ele tem três menus diferentes, uma inscrição no boletim informativo e a seção inferior é apenas o texto dos direitos autorais Portanto, não temos muito conteúdo, então eu também vou clicar no texto de direitos autorais, sem menu extra, sem ícones de pagamento, e clicar em Avançar. E qualquer coisa específica descrita sobre o rodapé, esse é um campo opcional para você adicionar qualquer informação adicional que não tenha sido solicitada Vou deixar isso em branco e clicar em Salvar. E agora você pode ver como o cabeçalho, rodapé e a barra de anúncios agora estão configurados Agora, para as seções principais. A principal delas, conforme destacado aqui, é a seção principal do produto. Então, vou clicar em Configurar. E quais elementos teremos nesta seção principal de produtos? Todos esses são elementos típicos. Então, o que vou fazer é, claro, não ter as imagens aqui porque pressupõe que definitivamente teremos isso Título do produto, bastante óbvio. Vamos incluir esse resumo das avaliações de preços do produto. O seletor de quantidade adiciona um botão de carrinho e alguns acordeões. Não acredito que teremos variação, então não vou incluir o seletor de variantes e ainda não vamos oferecer uma assinatura, então não vou adicionar a assinatura e vou adicionar uma descrição do produto Também posso adicionar meu próprio elemento personalizado se nenhum deles descrever um elemento que eu quero na minha seção principal de produtos, então eu também posso fazer isso. Caso contrário, podemos adicionar isso mais tarde, quando chegarmos aos wireframes Isso é legal. Onde a galeria de produtos deve ficar no desktop? Normalmente, fica à esquerda. Basta deixá-la à esquerda, a menos que você tenha um tipo diferente de página de produto e queira a imagem à direita. E então você também pode clicar em arrastar em qual ordem, com a galeria à esquerda e o conteúdo à direita, em qual ordem você deseja. Então, na verdade, vou melhorar a descrição do meu produto. Abaixo do preço do produto. Mas fora isso, essa é a minha ordem. Então, vou falar a seguir sobre isso. E então vou escolher meu layout móvel, que às vezes muda. Talvez a imagem seja muito grande e, portanto, o usuário precise rolar ou olhar para baixo na página para ver outras informações importantes. Portanto, um padrão bastante típico é mover o título e o preço do produto acima da imagem no celular. Então, vamos fazer isso. Na verdade, talvez queiramos colocar o resumo das avaliações lá também para que o usuário possa ver claramente o preço do título e as avaliações antes de ver a imagem e, em seguida, rolar para baixo para ver todo o resto. Tudo bem. Agora, para o estilo de galeria, podemos ter miniaturas à esquerda para navegar pelas diferentes imagens do produto ou miniaturas Podemos ter um único controle deslizante de imagem ou podemos ter uma grade. Esses dois são os mais comuns. Então, vamos fazer miniaturas à esquerda, ou você pode descrever estilo específico se nenhum deles atender ao que você está procurando E então, no estilo de galeria móvel, queremos miniaturas na parte inferior Queremos um controle deslizante sem miniaturas? Queremos outra coisa? Queremos uma grade? Vou fazer miniaturas na parte inferior do celular OK. Então, vamos salvar essas informações e, depois que elas forem salvas e atualizadas, você verá que a seção principal do produto está configurada Como você pode ver aqui, isso provavelmente precisa atualizar o layout, mas isso nos diz que, antes de podermos dizer que fizemos a configuração e criamos nosso plano de site, faça a seção principal da coleção e a seção principal do produto e, em seguida, responda à pergunta se precisamos uma configuração diferente para a seção principal do produto nos modelos alternativos. Neste ponto, você pode estar pensando todo esse processo é bastante trabalhoso Há muitas decisões a serem tomadas, mas isso nos poupará muito tempo com a geração inicial dos arquivos Figma E esse estágio de planejamento pode levar o tempo ou o mínimo que você quiser. Pode fornecer quantas informações quiser nesta seção de planejamento. Obviamente, se você tinha uma ideia específica em mente, essa ferramenta foi projetada principalmente para levá-lo a pensar sobre essas decisões de design antes de chegarmos ao estágio real do FIGMA Mas, obviamente, uma vez que o Figma foi criado e você percebe algo que não gostou ou quer mudar alguma coisa, isso também é totalmente legal Planejar com antecedência realmente nos ajuda a automatizar o processo inicial de web design E para que não estejamos vendo um arquivo Figma em branco. E, como você verá em breve, teremos um bom ponto de partida com os wireframes já criados no Em vez de começar do zero e ter que descobrir essas decisões de design em tempo real e também ter que construí-las manualmente dentro do Figma OK. Com isso resolvido, vamos terminar nosso planejamento. Então, há outra pergunta aqui. Como temos dois modelos, perguntaremos se a seção principal do produto varia de acordo com o modelo. Eu vou dizer não, é o mesmo em todos os lugares. A única diferença com o modelo será a extra do que está incluído abaixo da seção principal do produto Mas o design da seção principal do produto pode permanecer o mesmo para os dois modelos de produto. E então, se estivermos satisfeitos com a seção de carrinhos, como você pode ver aqui, para muitos deles, ela simplesmente assumirá uma certa configuração, então eles são opcionais, mas só precisamos tomar algumas decisões sobre a seção principal da coleção, principalmente sobre quantas colunas queremos na grade. Então, no desktop, vou configurá-la para grade de quatro colunas e mover uma grade de duas colunas. A próxima pergunta será: a coleção precisa de filtros? Como temos uma linha de produtos de apenas quatro produtos, não precisamos de filtros. Se você tem uma linha de produtos com muitos produtos diferentes, os filtros podem ser bastante úteis. Tudo depende do tamanho da sua linha de produtos. Então, vou falar a seguir sobre isso. E então vamos criar o cartão do produto, que é o quadro em que cada produto é exibido, que é usado não apenas nas páginas da coleção, mas na coleção em destaque e nos produtos relacionados Esse cartão do produto para exibir outro produto quando você não está na página do produto é um elemento comum sobre o qual precisamos . Esse cartão do produto para exibir outro produto quando você não está na página do produto é um elemento comum sobre o qual precisamos tomar algumas decisões. Então, obviamente, eu quero a imagem ou imagens do produto. Quero o título do produto. Não há variação para meus projetos específicos, então vou deixar isso de fora. Vou ter um resumo da avaliação e um botão de anúncio rápido no carrinho, e aqui posso clicar em O para adicionar outro, se eu quiser. E aqui embaixo, se eu rolar para baixo, você pode ver que também posso controlar o pedido Então, na verdade, isso não me dá uma opção, mas o que vou fazer quando entrarmos no Figma colocar o botão Adicionar ao carrinho na parte superior da imagem Mas, por enquanto, vou deixar nesta ordem. O pedido pode ser facilmente alterado posteriormente, então vou clicar em Salvar. Legal. Então, isso agora está configurado. Você verá aqui que a seção principal do cartão, a seção da página principal e a seção do artigo principal têm uma descrição padrão. Mas para o índice do blog, há uma questão de: haverá tags. Eu nem vou fazer uma seção de blog, então vou deixar isso de fora. Novamente, você só precisa fornecer os detalhes necessários para o seu projeto e, em seguida, podemos passar para nossas outras seções aqui. E essas outras seções não têm perguntas específicas. Se clicarmos em Editar informações sobre qualquer um deles, vamos apenas preencher o propósito de como ele se parece e como ele deve operar, e também de onde vêm os dados. Banner da coleção e onde está a fonte do conteúdo. O propósito, novamente, é deixar isso em branco. Aqui, são campos opcionais. Na verdade, não tem funcionalidade e será extraído dos dados do tema. Portanto, a intenção está no editor da loja virtual, definir a imagem, definir o texto que aparece. E então, para o look, ele já está pré-preenchido aqui. Aqui está a seção com a imagem de fundo para ir para o topo da página da coleção , acima da grade do produto. Ah, nós já preenchemos isso quando criamos anteriormente, ok? Então, formulário de contato, como você pode ver aqui, nome, mensagem de e-mail que envia uma solicitação de contato Sim, nós realmente não precisamos editar nada disso. Tudo isso é apenas uma funcionalidade padrão. A seção de heróis, eu poderia especificar. Definitivamente, são dados temáticos. Essa fonte de conteúdo não afetará as maquetes do Figma, mas o que ela fará é, mais tarde, quando voltarmos a essa ferramenta, pegar a folha de especificações, possamos realmente implementá-la no site, o que é como um bônus para essa classe para mostrar como realmente pegar esse design e incorporá-lo ao esse design e incorporá-lo código necessário para o tema Nesse ponto, veremos como essas decisões sobre a fonte de conteúdo são importantes. Mas, por enquanto, tudo o que é importante para a geração de design Figma é principalmente a aparência, ok? Pontos de venda: também serão dados temáticos. Eu já mencionei a aparência na descrição quando a criei no mapa do site. Não há nenhuma funcionalidade. O propósito é bastante autoexplicativo e eu quero usar blocos repetidos Novamente, as informações que acabei de inserir aqui são apenas para a folha de especificações no final, quando tentamos construir Isso realmente não faz diferença no design do Figma. Este também será um tema de dados usando blocos repetíveis E então, o que está incluído, novamente, dados do tema usando blocos repetíveis, clique em salvar e pronto Obviamente, depende do que você coloca no mapa do site em termos de quais seções aparecem em Global, Maine e outras seções aqui. Não acredito que você possa adicionar mais seções principais, mas você pode adicionar, como mostramos neste vídeo, adicionar uma barra de anúncios às seções globais e, em seguida, todas essas outras seções como argumentos de venda, depoimentos, heróis que não são seções principais ou seções globais, que estão aqui Então, obviamente, essa lista vai depender de suas necessidades específicas. Se você quiser acompanhar exatamente o meu projeto de teste, é assim que vai ficar do seu lado também. E agora podemos, em qualquer uma dessas guias, clicar nesse botão azul para criar o plano de web design Tudo bem, então aqui você pode ver, temos o plano de web design à esquerda e a folha de especificações à direita O plano de web design abrange basicamente todas as seções em que elas existem e qual deve ser sua aparência. A folha de especificações é algo que usaremos para acompanhar os wireframes posteriormente para contextualizar a funcionalidade e fonte de conteúdo para que a IA realmente a incorpore ao tema Mas, por enquanto, vamos ignorar completamente esse lado direito e olhar para o lado esquerdo. Então, aqui podemos exportar esse plano de web design e, neste momento, nem precisamos usar IA. Podemos ter este documento aqui que você pode enviar a um designer ou em uma segunda tela enquanto cria um design manualmente no Figma Portanto, você não precisa realmente usar a IA se não quiser, mas como tomamos todas essas decisões com antecedência, podemos automatizar a criação desse plano de web design no Figma Está bem? Então, como você pode ver aqui, temos o nome do modelo e, dentro dele, temos as diferentes seções globais, a seção principal e, em seguida, a seção FOOTA E para a página inicial, obviamente, não temos uma seção principal Temos essas duas seções globais e , em seguida, nossas quatro seções opcionais, ok? Então, nesta aula, o que vamos fazer é não construir o Figma manualmente a partir desse plano de web design Vamos apenas clicar aqui para copiar as instruções do Figma e, em seguida, vamos querer colar essas instruções em uma sessão de código com garras Você pode usar o aplicativo de desktop aqui, mas eu prefiro executar a extensão de código com garras no meu editor de código preferido, que é o Visual Studio No entanto, se quiser fazer isso, eu só vou até aqui para começar uma nova sessão. Está apenas carregando aqui. E aqui é onde eu posso inserir meu prompt, para que eu possa colar, e lá você pode ver o prompt altamente detalhado que deve ser capaz de fornecer a Claude todas as informações necessárias para criar o wireframe Aqui embaixo, eu coloquei isso em ordem, então ele vai me pedir o mínimo possível de permissões e seguir em frente e criá-lo. E, claro, para que Claude se conecte ao Figma, o aplicativo Figma precisa estar aberto Lembre-se de que você precisa de um assento de desenvolvedor ou superior para usar esse recurso MCP, pelo menos no momento da gravação, e também precisa ter o MCP ativado. Portanto, as instruções para ativar o MCP mudaram desde meu último curso sobre web design Figma Portanto, certifique-se de consultar as instruções mais recentes sobre como instalar o Figma MCP Isso muda com bastante frequência. Mas, desde que você já tenha a configuração do Figma MCP, basta executar esse prompt no código do Cloud E vamos ver se surge alguma dúvida. Caso contrário, ele deve basicamente criar o arquivo Figma para nós. Como você pode ver, aqui, ele carregará a habilidade de geração de design Figma do Figma e, em seguida, acionará algumas outras habilidades e outras ações do MCP Mas aqui vamos nós. Aqui está nossa primeira pergunta. Está nos perguntando em qual equipe da Figma ela deveria criar os novos wireframes Para mim, essa definitivamente será minha equipe pessoal, a equipe de Christopher Dodd Certifique-se de escolher uma equipe com um conjunto de desenvolvedores. É claro que vou passar por muito disso rapidamente porque é apenas Claude trabalhando em segundo plano Se isso levar muito tempo para você, não se assuste. Isso deve levar um pouco de tempo. Atualmente, estou com cerca de 17 minutos de espera. Mas se você quiser ver algo um pouco mais interessante, você pode acessar o Figma, ver o arquivo e vê-lo sendo construído em tempo real Então, vou mudar para essa visualização, e você pode ver agora que temos uma estrutura com nossos componentes e temos nossos diferentes modelos sendo criados. Obviamente, ainda não está completo. Então, vou deixar isso continuar funcionando até que esteja pronto. Tudo bem, então depois de mais dez minutos, foram cerca de 26 minutos. Portanto, você pode esperar que todo o processo seja concluído em menos de meia hora. Mas, obviamente, isso depende quantas seções você incluiu e tudo mais. Mas para um projeto desse tamanho, demorou cerca de 26 minutos. E agora, se eu mudar para o Figma, você pode ver que todos os wireframes foram Então não se preocupe, essa não será a forma final. Vamos fazer com que pareça muito melhor, mas essas são basicamente as maquetes de baixa fidelidade Portanto, temos nossa página inicial no desktop. A versão móvel dessa página inicial. Então temos a página do produto. Lembre-se de que tomamos algumas decisões de design com antecedência, querendo a galeria de produtos à esquerda, miniaturas do produto à esquerda no desktop e, em seguida, as temos na parte inferior com as Então, todas essas decisões agora foram consideradas nos wireframes Figma E como você pode ver, Y Suns Macha está aqui, e deve usar componentes o máximo possível Então, componentes são uma coisa na Figma. Acredito que abordamos isso na classe de web design Figma, na qual temos nosso componente principal aqui porque esse cabeçalho deve ter a mesma aparência em todos os modelos Então, se atualizarmos este aqui, deve ser transferido para o cabeçalho da área de trabalho em cada modelo. Você pode ver aqui indicado por este diamante aqui que esta é uma instância do componente. Portanto, isso se alinha muito bem com o sistema Shopify. Obviamente, temos que substituir alguns desses ícones aqui, e isso não é perfeito. Mas o que temos aqui é um layout básico de todas as nossas seções, e temos as seções dispostas em seus modelos apropriados. Então, olhando mais abaixo, temos a página padrão do produto. Nós temos esse aqui. O que está incluído. Eu não quero esses botões aqui. Novamente, haverá pequenas mudanças aqui e ali. Isso é normal. Nossa página de coleção aqui com as quatro colunas no desktop e duas colunas no celular, modelo de página padrão no desktop e no celular, nossa página de contato aqui. E, na verdade, uma página que eu esqueci de fazer foi a página sobre nós, a página Nossa história Tivemos isso na aula anterior de web design, então eu poderia acrescentar isso mais tarde. Como eu disse, você não precisa fazer tudo na fase de planejamento, mas apenas colocar algo na tela, tudo o mais que podemos fazer manualmente porque estamos dentro da Figma Então, tudo isso que criamos aqui, poderíamos ter feito sozinhos, mas deixamos o Figma fazer meia hora sem precisar mexer em nada, que eu acho que você concordará que é um melhor uso do nosso tempo para colocar o layout básico no arquivo Então aí está. Temos nossos wireframes prontos E no próximo vídeo, daremos um pouco de vida a esses wireframes aplicando sistema de design que mais uma vez usaremos a IA para ajudar a gerar Então, nos vemos no próximo vídeo. 5. Como implementar um sistema de design: Nesta lição, criaremos um sistema de design e, em seguida, enviaremos esse sistema de design para Claude para, em seguida, implementá-lo em nossos wireframes Figma atualmente cinza de baixa fidelidade Então, se observarmos o que geramos na última lição, temos todos esses wireframes cinzentos entediantes da Figma, que é difícil de imaginar que seja um site ou web design finalizado ainda, porque faltam Número um, falta esse sistema de design , falta cor , falta fonte. Também faltam algumas imagens e iconografia. Além disso, precisamos colocar certas partes em espaços reservados mais apropriados e reajustar um pouco o layout Mas você já começa a ver esse design ganhar muito mais vida simplesmente aplicando um sistema de design a ele. Agora, na era da IA, temos algo chamado ponto de design D. O que é isso exatamente? Creio que foi desenvolvido pelo Google e é um documento do sistema de design que os agentes de IA podem usar para ler e gerar uma interface de usuário consistente em todo o seu projeto. Então, basicamente, é como se o sistema de design que vive dentro de um arquivo markdown dot d fosse Markdown, que é basicamente apenas um documento que pode ser facilmente lido por E se olharmos dentro da pasta do projeto, se eu entrar na nossa pasta de identidade de marca aqui, podemos ver que já temos uma identidade de marca aqui. Deixe-me colocar isso no quadro. Você pode ver aqui que já temos nossa paleta de cores e nossas fontes. Um sistema de design fornece muito mais detalhes do que isso. Mas, para este projeto, estamos simplificando e, na verdade, podemos criar um arquivo MD de design a partir disso. E então o que vou fazer é lembrar aqueles sites de inspiração que você encontrou anteriormente? Bem, aqui em mente novamente. Eu tenho Jade Leaf Marcher e fiz a manhã. Bem, eu criei essa ferramenta aqui chamada Mixer de sistema de design. Vamos usar uma extensão do Chrome que eu criei chamada Design MD extractor Vamos extrair o sistema de design e criar um arquivo DotD de design de cada um desses sites e, em seguida, vamos misturá-los com nosso próprio design dot md para criar um novo arquivo DotD de design remixado Essa é uma das coisas poderosas em que a IA é boa. É bom em misturar coisas e usar o formato design dotmd, isso significa que estamos usando um formato que foi projetado por uma empresa gigante OK. Então, a primeira coisa que vou fazer é gerar um arquivo MD de design a partir dos arquivos que eu já tenho no meu projeto. Está bem? Então, o que vou fazer é lembrar que executei isso aqui nesta janela aqui. Isso não está conectado a nenhuma pasta. Então, vou clicar neste botão aqui para abrir uma pasta e, em seguida, vou selecionar a pasta CNS de identidade de marca aqui, abri-la e agora ela terá contexto dentro dessa pasta Acho que na verdade abrirá uma janela totalmente nova e terei que criar uma nova sessão com garras, mas tudo Como você pode ver aqui. Se eu executar uma sessão de código com garras, ela agora será executada nessa pasta, então ela terá acesso a todos os ativos dessa Tudo bem? Então, o que vou fazer é pedir que ele gere um arquivo design dot md com base nos arquivos desta pasta. Ou seja, o logotipo. Portanto, você pode usar o símbolo em aqui para referenciar arquivos específicos dentro da pasta. Então, posso dizer, ou seja, o logotipo, os gritos que acabei de escrever literalmente Sem dúvida, ele não responde bem a arquivos com sotaques estranhos, infelizmente. Então, vou abrir o At aqui e depois encontrá-lo na lista. Há muitas pastas aninhadas aqui. Mas lá vamos nós. O guia de identidade da marca e o documento de cores e fontes. Também quero que tenha o contexto do que é um arquivo MD de pontos de design, cole aqui. Então, vou ampliar aqui para você ver o que é isso. Basta escrever isso palavra por palavra. Crie um ponto d de design a partir disso seguindo a especificação canônica do Google Lab no endereço do Github do arquivo MD de design e espelhe a estrutura do exemplo de referência no Está bem? Basta dar um detalhe extra para que ele saiba exatamente o que estamos tentando fazer aqui, e então eu pressionarei Enter e deixarei o código de Claude fazer sua mágica Enquanto isso, podemos acessar nossos sites de exemplo e extrair seu MD de design. Então, vamos até esta página no meu site, christopher dow.com, DesignMD E na parte inferior, ele leva a outra página, DesignMDetractor Vou abrir isso em um NewTab e você pode ver aqui que podemos baixar essa extensão do Chrome Então, como funciona é você abrir qualquer site e clicar no ícone do extrator de design MD Na barra de ferramentas do Chrome, ele pegará todos os estilos computados e nomeará as variáveis CSS e os colocará em um arquivo design dot md Para instalá-lo, precisamos baixar e descompactar o arquivo e, em seguida, acessar as extensões Chrome Colon, ativar o modo de desenvolvedor e carregar o arquivo descompactado, clicar em Carregar descompactado e selecionar a pasta extratora de design MD descompactada descompactada Tudo bem, então um pouco de configuração aqui. Vamos simplesmente entrar em nosso desktop aqui e inserir o design DMDetractor Em seguida, vamos descompactar esse arquivo Zip. E aqui você pode ver a pasta descompactada contendo a extensão da web Em seguida, podemos acessar as extensões do Chrome Colon Dash. Ative o modo de desenvolvedor aqui no canto superior direito, menos o que já está ativado Clique em Carregar descompactado aqui à esquerda, navegue até a pasta com o nome design MD dash extractor, aquela que acabamos de descompactar, clique em Selecionar nela e, em seguida, dirá extensão E como você pode ver aqui, eu o recebi duas vezes, então vou remover o mais recente. Eu não preciso de vários deles. As extensões do Chrome são muito fáceis de criar hoje em dia por causa da IA. Então, eu tenho alguns que eu criei anteriormente e que já estão aqui na minha conta do Chrome. E então o que eu vou fazer é navegar até esse endereço. Então, o primeiro, Jade Leaf Macha, e eu temos algumas extensões diferentes Vou ter que clicar aqui para abrir a lista completa de extensões. E então eu estou apenas procurando um extrator de design dot d. Clique nisso. E então vou verificar se o nome da marca está correto, extrair e copiar o prompt. Isso abrirá o Cloud em uma nova guia. Podemos fazer isso aqui na web ou voltar para nossa sessão de código de nuvem aqui mesmo e criar uma nova sessão. Mas vamos fazer isso na web porque é bastante fácil. Na verdade, não precisamos executar nada localmente aqui. Então, vou colar exatamente esse prompt e clicar em Executar nele. Depois, podemos ir para a próxima, que é morning made.com Esse é outro design que eu gosto para um site da Macha. Então, vamos até aqui. Vamos projetar o extrator dot d novamente. Este tem o nome errado vindo. Diz cerimonial. Então, só precisamos mudar isso para Morning Made. Em seguida, clicaremos em Extrair e copiar. Coloque isso em uma nova sessão com garras. Pressione Enter, é tão simples quanto isso. E então, cada uma dessas sessões com garras retornará um arquivo de design dot d. Está bem? Então, se eu voltar para minha sessão aqui, parece que acabou agora. É o que diz que criei um arquivo design dot md na pasta Sans de identidade da marca, blá, blá, blá, blá, blá Então, vamos dar uma olhada em nossa pasta. Entre em uma sessão de identidade de marca e temos esse arquivo ponto d de design ali mesmo Se o abrirmos no código do Visual Studio ou em qualquer outro editor de código, essa é uma pequena prévia de sua aparência. Você pode ver as variáveis geradas para todas as cores e fontes aqui. Também foram inferidos alguns outros detalhes lá. Tenha algumas informações gerais sobre o conteúdo da marca. Obviamente, se você quiser revisar isso e alterar alguma coisa aqui, porque isso realmente não corresponde ao que você tinha em mente para a marca, obviamente, vá em frente. Mas se isso for baseado em arquivos de identidade de marca bloqueados que foram confirmados , tudo isso deve ser preciso. Então, temos esse arquivo de design agora. Nós vamos voltar para aqui. Na verdade, não vou voltar para esta página. Já compramos nosso extrator e, aqui no mixer MD de design, começaremos fazendo o upload do arquivo design dot md de nossa própria marca Então, vou clicar em Abrir aqui e ele apenas copiará os detalhes nesta caixa aqui. E então teremos nossos sites de inspiração. Aqui você pode ver que eu já fiz isso. Então eu já fiz a manhã aqui. Acredito que tenha armazenado em cache minhas entradas anteriores aqui. Mas agora você pode ver nessas sessões de Claude ambas parecem estar prontas agora, então você pode ver que temos um MD de design para qual é essa ? Eu esqueci o nome Então, este é para o Jade Leaf Marcher, então eu vou baixar E em vez de chamá-lo de design MD, vou chamá-lo de Jade Leaf design dot md Podemos colocá-lo onde quisermos, e então eu vou baixar este, que é o Morning Made Design MD. Então eu tenho os dois agora, e então eu posso voltar aqui. Para a manhã que fiz uma, vou dar um passo atrás. Na verdade, estava dois passos atrás, fiz o desenho pela manhã. E como você pode ver aqui, eu tenho uma caixa extra para o que você gosta no design deste site. Então, quando a IA está remixando esses, ela retém o que você gosta em cada sistema de design Então, o que eu gostei no Morning Made, se eu voltar a ele, foi que eu gostei desse tipo de papel com aparência de cor de fundo, e também gostei do espaçamento e das linhas divisórias Se eu for para Jade Leaf Macha, carregue o ponto D do design para Jade Leaf Macha. Do que eu gostei? Gostei do cabeçalho em forma de p, raios das bordas e da iconografia Então, se você for ao Jade Leaf Marcher. Eu gostei desse cabeçalho de pílula. Como você pode ver aqui, isso flutua sobre o topo e o raio da borda Então, gostei particularmente das bordas curvas. Então, o que estou fazendo aqui ao adicionar isso é deixar Claude saber como examinar essas partes especificamente quando estiver construindo nosso novo sistema de design Como você pode ver aqui, podemos então clicar em gerar prompt. Isso vai gerar um prompt bem grande, 34.000 caracteres E então, o que vamos fazer é, exatamente como fizemos com a ferramenta de planejamento, copiar essa solicitação e depois voltar direto para Claude Aqui mesmo, na mesma janela em que criei meu MD de design para minha marca, posso fazer isso diretamente na mesma sessão ou criar uma nova sessão. Vou fazer uma nova sessão e depois colar o prompt para gerar o arquivo combinado de design dot D que se inspira nesse outro site, mas, em arquivo combinado de design dot D última análise, o combina com seu próprio MD de última análise, o combina com design para criar um novo arquivo dotmd de design onde ele contém todas as informações de que Claude precisa para reformular os wireframes Figma Pressione Enter nisso. Ok, agora que ele vê que estamos criando isso na mesma pasta em temos o ponto d do design original, ele está nos perguntando se queremos sobrescrever esse arquivo ou salvá-lo como um novo arquivo Isso realmente não importa. clicar em Salvar como um novo arquivo caso de precisarmos do original por qualquer motivo, mas não deveríamos, então parece que agora está pronto. Se eu olhar dentro da pasta, esta é a versão sintetizada do design que eles acabaram Então, o que eu vou fazer é voltar para a sessão original. Você provavelmente pode criar uma nova sessão, mas essa sessão eu pelo menos conheço já fez algo no Figma, então ela já tem o contexto Então, eu prefiro fazer isso aqui, e tudo que eu quero fazer é escrever o seguinte prompt simples. Por favor, pegue este sistema de design e aplique-o às nossas maquetes Figma atuais OK. Então, é claro, preciso anexar esse arquivo, então vou clicar em Carregar do computador. Pegue o design sintetizado dotMD, desde que esteja no mesmo formato do design dot MD, ele não precisa ser chamado exatamente E então tudo o que vou fazer é pressionar Enter nisso, e então ele deve nossas maquetes do Figma em tempo real Então, estou tentado a ir diretamente para Figma e ver isso acontecendo ao vivo no Figma, mas pode haver algumas perguntas de Claude, então eu quero verificar as duas ao mesmo tempo, se possível, mas parece que então eu quero verificar as duas ao mesmo tempo, se possível, tudo está indo bem até agora, então vou deixar isso aqui por enquanto, para possamos ver essa atualização Tudo bem, agora está terminado, e você pode ver que esses designs de figma sem vida agora parecem Como você pode ver, está usando as cores da nossa marca desse verde marcher Ele implementou esse fundo colorido de papel. Ela implementou o design da pílula para o cabeçalho que eu disse a ela que gostei do Jade Leaf Marcher Os cartões do produto parecem muito melhores. As fontes agora devem corresponder às fontes da minha marca. Então, se olharmos, temos o Inter e o corpo da sessão. Então está usando o corpo do Sans, o que deveria ser, se eu desvincular, é Então, talvez precisemos atualizar os cabeçalhos se quisermos que sejam. Bem, na verdade, o título aqui está correto, mas o título do produto está usando o Inter Então, isso deve estar em Brand with tennis Sands. Sim. Ok, então ele está usando as fontes certas na maioria das vezes. Talvez queiramos verificar um pouco seu funcionamento lá. E, como você pode ver, no mínimo, implementamos a cor e o raio da borda em nossos designs Figma Então, vou deixar isso aí para este vídeo sobre a implementação do sistema de design. E no próximo vídeo, vamos trazer algumas de nossas imagens, nossa iconografia e, possivelmente, limpar um pouco mais o design porque há certas partes que definitivamente precisam de algum trabalho 6. — imagens e iconografia.: Ok, então nos dois vídeos anteriores, usamos nosso planejador de vitrines e IA para criar nossos wireframes e, em seguida, aplicamos nosso sistema de design Eles parecem muito mais animados agora, mas ainda há trabalho a ser feito E podemos usar a IA para isso em certas partes. Como se pudéssemos dizer à IA que atualizasse os ícones aqui e dissesse exatamente onde procurar. Mas, é claro, a IA não é gratuita. Teremos que usar tokens e esperar Claude volte para nós ou para qualquer ferramenta de IA que você esteja usando Então, para isso, vou fazer principalmente trabalho manual. Mas você pode ver aqui que a maior parte do trabalho que poderíamos automatizar já foi feito para nós Então, a primeira coisa que vou fazer é adicionar nosso logotipo, porque você verá aqui que apenas diz Sans marcher onde quer que o logotipo apareça E se você se lembra, na última lição, falei sobre componentes e instâncias no Figma Então, aqui está uma instância do cabeçalho. Vá até aqui, temos outra instância do cabeçalho, o cabeçalho da área de trabalho. Se quisermos mudar alguma coisa em todas as instâncias, precisamos ir para o componente mestre, que está aqui, e você pode dizer que é um componente mestre. Ao passar o mouse sobre ele, ele dirá componente, mas também esse ícone aqui Então, isso é para componentes. E se dermos uma olhada aqui, esse diamante aqui é, por exemplo. Portanto, se você quiser fazer uma alteração que esteja apenas em uma instância, fazemos isso na instância, mas se quisermos que ela chegue a todos os cabeçalhos ou a todas as instâncias desse componente, fazemos isso no nível do componente Então, vamos fazer isso. Em vez de Sans Macha, vamos substituí-lo pelo logotipo Então, vou abrir minha pasta aqui, pegar o logotipo e arrastá-lo para essa posição. Agora precisamos trabalhar um pouco aqui para alterar a altura aqui para preencher o contêiner Isso naturalmente preencherá a altura do contêiner, que é o que acontecerá em HTML de qualquer maneira. Em seguida, podemos excluir o texto que era o espaço reservado para o logotipo Pode parecer um pouco pequeno. Eu preciso ver isso talvez na vida real, mas talvez seja um pouco pequeno. Então, eu poderia apenas aumentar a altura mínima dela. Vou até a altura, clicar para adicionar uma altura mínima e digamos que quero que seja pelo menos 30. Está bem? Então, agora isso vai ser um pouco maior. E agora que vejo isso acontecendo, acho que talvez precise de um pouco mais de preenchimento à esquerda Então, vou fazer um ajuste no preenchimento aqui Atualmente, está em 24, vinculada a uma variável específica, que é o preenchimento do contêiner Na verdade, talvez eu deixe isso por enquanto. Agora, isso não aconteceu quando eu fiz isso antes, mas a disposição dos componentes está um pouco errada. Alguns deles se sobrepõem Então, deixe-me mover alguns desses componentes para seu próprio espaço aqui, para que não se sobreponham a outros E então isso aqui é o componente da linha do acordeão. Talvez você queira rotulá-los ou simplesmente deixá-los como estão. Mas, como você pode ver aqui, esse quadro aqui contém nossos componentes principais. E para cada componente, haverá uma versão para desktop e móvel. Obviamente, esse não é o caso na versão de código finalizada do tema, mas Figma, como temos uma separação entre os designs de desktop e celular, haverá uma versão para celular e uma versão para Então, vou até aqui e farei a mesma coisa para substituir o logotipo aqui. Vá até aqui, encha o recipiente até as alturas, remova o existente. E então, como você pode ver aqui, ainda é um pouco grande demais. Então, temos algum preenchimento superior e inferior que temos? Então, talvez precisemos trabalhar um pouco com a largura aqui? E reduza para, digamos, 100. Como você pode ver aqui, está cortando aqui. Não selecionamos a relação de aspecto fixa. Então, vou atingir a proporção fixa e reduzir a largura para 100, e aí você pode ver que está funcionando um pouco melhor, mas não está disposta no centro absoluto Então, eu poderia tirá-lo do layout automático clicando neste botão aqui para fazer o posicionamento absoluto. Isso fará com que ele ignore o layout automático, e então eu posso simplesmente colocá-lo no ponto morto, ok, caso quiséssemos isso. Na verdade, parece um pouco para a direita ou estou apenas imaginando isso Acho que parece melhor. Ok, agora você deve ser capaz de ver que esse logotipo foi transferido para todos os designs que usam esse componente, que é praticamente todos eles porque é uma seção global. Então, para o cabeçalho, parece muito bom. De alguma forma, ele descobriu os ícones sem que eu lhe desse nenhum ícone Talvez tenha realmente olhado dentro da pasta. Então, se voltarmos para a pasta e, na verdade, eles não estiverem aqui, mas se voltarmos e olharmos dentro dessa pasta aqui, teremos ícones de sites. Então, talvez tenha olhado fora da pasta para encontrá-los. Não tenho certeza. Às vezes, a IA funciona de maneiras que você não instruiu especificamente, mas precisamos substituir os ícones aqui por IG, Facebook e Tik Tok Então, o que vou fazer é entrar na pasta de ícones sociais aqui, onde tenho esses ícones. O primeiro é o IG, então vou trazer o Instagram ali mesmo. Parece que não caiu na posição correta. Oh, eu entendo. Na verdade, estou editando a instância aqui. Então, eu quero realmente ir até aqui e editar o componente real. Então, deixe-me fazer isso novamente no nível do componente. Essa é boa. Isso é um pouco pegadinha Parece que está sendo posicionado dentro desse círculo ao lado do texto do IG Vou remover esse texto do IG e não quero o círculo de jeito nenhum. Então, vamos arrastar isso para fora do quadro e colocar isso lá. Então eu farei o mesmo com o Facebook. É meio difícil colocá-los exatamente onde você precisa em um design pequeno como esse, mas aí está. Você sempre pode simplesmente movê-los assim que os colocarmos. Tente colocar o TikTok lá dentro. Lá vamos nós. E aí está, os três ícones sociais sem os círculos ao redor deles. Mas eles são um pouco menores do que pretendíamos. Os círculos tinham 28 por 28, então vou fazer com que todos esses ícones sejam 28 por 28. Mas primeiro, eu tenho que corrigir a proporção. Novamente, clique aqui para fixar a relação Aspec. E mais uma vez no ícone do TikTok. Não queremos um fundo branco lá, então isso foi um pequeno erro da IA, então vou remover o preenchimento dessa forma, e aí você pode ver. Então, podemos realmente querer que sejam brancos, para que possamos entrar aqui. Há um preenchimento aqui, então podemos realmente mudar a cor porque eles são, na verdade, SVGs Mas na verdade eu gosto dele como preto. Na verdade, acho que há uma escuridão que provavelmente armazenamos como uma variável em algum lugar. Então, vou mover o preenchimento aqui, abri-lo aqui e tentar encontrar em nossas bibliotecas a cor apropriada. Então, temos um monte de variáveis de cor aqui que foram implementadas no estágio anterior. E no ensino médio? Então, sim, é quase da mesma cor , mas um pouco diferente. Então, vamos fazer isso no secundário. É sempre bom usar variáveis. Vamos ver. Se eu separar a variável, sim, você verá que é quase preta Está muito próximo do preto. Portanto, é melhor usarmos variáveis consistentes para que nossas cores sejam consistentes. E, como você verá no rodapé, também há um logotipo lá Então, vou substituí-lo pelo logotipo do nosso site. Novamente, precisamos fixar a altura disso, então eu poderia reduzir a largura para 100, talvez um pouco mais de 100, então digamos 150. Legal. E algo semelhante aqui para a versão móvel do rodapé Mais uma vez, este provavelmente pode ser 100 no celular. Ok. E então precisamos nos mover, provavelmente podemos simplesmente copiar e colar o que já fizemos aqui para economizar algum tempo e depois remover esse quadro. 28 parece um pouco grande, então vamos alterá-los para 20 no celular. E como estamos fazendo todas essas mudanças no componente, isso deve fluir para todos os nossos designs móveis, ok? Outro componente aqui são os cartões de produtos. Então, nesta área, vamos ter a imagem do nosso produto, então podemos ignorar a cor dela . Isso vai parecer diferente. Mas, como você pode ver, temos essas bordas curvas com uma sombra Você pode ou não querer isso. Acho que está tudo bem, então vou deixar isso por enquanto. O que eu quero fazer e mencionei isso em um vídeo anterior é colocar o botão de adição rápida na parte superior da imagem. Então, o que eu vou fazer é pegar esse botão e podemos rotular isso se quisermos. Podemos dizer o botão Quick Add, alterar o nome do quadro se quisermos e, em seguida, clicar em arrastá-lo. Na verdade, eu preciso fazer isso dentro da barra lateral aqui. E eu vou clicar em arrastá-lo até aqui. O problema com isso é que agora temos essa pequena moldura aqui para o ícone da imagem. Na verdade, não vamos viver com isso. Era apenas um ícone para indicar um espaço reservado. Então, vou deletar isso completamente. E então eu vou pegar esse botão, na verdade, a cor de fundo do botão, e a cor do espaço da imagem é a mesma, então não vamos ver o contorno aqui Mas o que vou fazer é adicionar um pouco de preenchimento aqui E então, para o botão, vou posicioná-lo na parte inferior. Então, vou clicar aqui no alinhamento. Na verdade, preciso fazer isso na moldura principal, definir o alinhamento na parte inferior e, em seguida, você verá os limites do botão aqui Talvez eu apenas adicione uma borda para tornar isso um pouco mais óbvio. Parece que tem um traçado, mas talvez o traçado tenha a mesma cor do plano de fundo. Então, deixe-me mudar o traço para outra coisa, digamos, no primário. Ok, agora você pode ver isso Depois de implementar isso, farei com que esse botão apareça apenas no Ha. Mas, por enquanto, isso indica mais ou menos o que eu quero. Lembre-se de que essa área aqui será substituída por imagens e não tenho certeza se a solicitei na fase de planejamento ou não, mas esse cartão também parece não ter o preço. Então, vou apenas duplicar título do produto e fazer o preço do produto aqui E isso é muito grande. Na verdade, acho que vou agrupá-los. Seleção de molduras, transforme-a em uma moldura de layout automático, defina a direção dessa forma, alinhe-as para que fiquem igualmente espaçadas e, em seguida, defina a largura para preencher o contêiner Se você nunca usou o Figma antes e não tem certeza do que acabei de fazer, definitivamente assista à aula de web design do Figma Não quero me repetir nesta aula quando você pode voltar e assistir aquela. Nesse, abordo mais sobre as práticas reais de usar o Figma, ok Então, vou definir isso para 12 em vez do que é agora como título do produto. Então, na verdade, acho que vou aumentar isso para 16 no desktop e o preço para 14. E então, obviamente, aqui, eu preciso fazer algo semelhante. É tipo, muito pequeno por aqui. Deixe-me ver como isso aparece nos designs reais, porque colocamos no plano que queríamos que tivesse duas colunas. Isso não é muito espaço, então talvez tenhamos que reduzir essa lacuna no celular. Por enquanto, vou deixar como está. E como não há data de colheita no celular, deixarei os botões de adição rápida embaixo Ou talvez simplesmente se livre deles completamente. Então, eu não vou fazer isso em uma instância. Vou fazer isso no componente principal aqui e simplesmente excluí-lo da experiência móvel. Está bem? Tudo bem, então esses são basicamente os componentes principais. Eu os atualizei um pouco. Eu coloquei o logotipo e os ícones, mas ainda não fiz nenhuma imagem. Então, aqui, o que eu vou fazer é atualizar a imagem do herói. Então, vou clicar aqui e, em seguida, vou preencher. E remova esse preenchimento de cor e substitua-o por um preenchimento de imagem. Então, vou fazer o upload disso do meu computador dentro das imagens do site. Eu tenho minha seção de heróis ali , então eu vou trazê-la, e então eu posso posicioná-la como eu quiser, assim. Agora, está um pouco claro, então se eu colocar texto por cima, pode ser um pouco difícil de ver. Vou adicionar outro recheio por cima, e o Figma é bom nisso Ele sabe o que estou tentando fazer. Ele adiciona uma sobreposição preta de 20% e, em seguida, vou mudar isso de uma cor escura para o preenchimento do texto para uma cor clara E como todas as nossas variáveis estão configuradas, novamente, recomendo que você não defina a cor com um valor hexadecimal aqui, use as variáveis existentes Então eu penso no primário e depois aqui, no primário também. E você pode ver que está muito bonito, ok? A outra coisa é que eu queria que o cabeçalho da pílula se sobrepusesse ao Então, o que vou fazer é criar esse cabeçalho no desktop, especificamente no quadro do desktop da página inicial porque eu só quero que isso se aplique a esta página, vou remover o layout automático e deixar essa posição absolutamente. Está bem? Então, agora tudo vai acabar, e então eu só preciso ajustar minha imagem um pouco. Então, eu vou arrastá-lo assim. Agora você pode ver que eu tenho aquele belo cabeçalho em estilo de pílula que eu vi no Jade Leaf e que eu Está bem? Vamos colocar a mesma imagem de herói em nossa versão móvel. Então, basta clicar aqui, na mesma seção de heróis. Esse painel está meio que bloqueando, mas você pode ver aqui, estou feliz com isso e queremos as mesmas cores aqui. Então foi só na primária e a mesma coisa aqui na primária. E eu esqueci de colocar a sobreposição, então vou pressionar esse botão para adicionar um preenchimento extra, a sobreposição de 20%, e vou deixar assim Vamos inserir a cópia um pouco mais tarde, mas vamos realmente preencher imagens do produto com esses cartões de produto reais Obviamente, essas informações serão retiradas do back-end do Shopify quando forem publicadas. Mas, para fins de visualização no design, substituiremos o preenchimento aqui novamente na instância, não no componente, porque cada um terá um preenchimento diferente para representar um produto diferente Vamos ver as imagens do site. Vamos dar uma olhada nas fotos internas, e eu tenho imagens de produtos aqui. Vamos ver as imagens principais do produto. Vou apresentar primeiro o pó de matcha, como você pode ver aqui Agora podemos ver que nosso botão não tem nenhum preenchimento depois colocá-lo em cima de uma imagem e não no fundo. Então, vou voltar ao componente aqui, certificar-me de que ele tenha algum preenchimento. Então, acho que vou usar essa cor aqui. Na verdade, isso não combina nem um pouco com o verde. Então, talvez eu só viesse à tona. Vamos dar uma olhada com uma imagem. Ok. Acho que estou muito feliz com isso. Altere o título do produto. Novamente, essas informações serão dinâmicas, então você realmente não precisa fazer isso. Mas, dependendo se você precisa disso para visualização ou se deseja mostrar isso para outra pessoa Vou atualizar o título. O nome do produto é, se entrarmos aqui, basta abri-lo na nova guia para que possamos ver os dois ao mesmo tempo. Se formos até aqui, temos nossa lista de produtos aqui. Então, o pó matcha premium, 100 gramas. Vou me livrar da parte de 100 gramas porque não temos espaço para isso. E aqui podemos realmente ver que talvez não tenhamos espaço para todos os detalhes. Então, talvez tenhamos que voltar para a placa aqui, o componente, e reduzi-la novamente, ou 16 já é bem pequeno. Talvez apenas aumentemos a largura do contêiner aqui para dar mais espaço. Então, atualmente está em 1.200. Há um pouco de acolchoamento. Na verdade, você pode ver aqui que não está se estendendo por toda a largura do contêiner, então eu poderia tentar corrigir isso aqui na grade de produtos Então, vou alinhá-los no centro, fazer com que se espaçem uniformemente. Ainda não está se encaixando muito bem. Então, o que eu acho que vou fazer é, sim, não temos espaço para colocar o preço à direita, então vou mudar isso, reduzir esse preço abaixo do título do produto. E agora não precisamos da moldura, então podemos simplesmente removê-la. Novamente, essas coisas surgem enquanto você projeta, mas com uma ferramenta como a Figma, você pode fazer tudo isso manualmente e, com o Figma MCP, você também pode ter a IA para ajudar nas coisas mais básicas Portanto, o preço desse produto, se olharmos a lista de produtos, é de $45 Então aí você pode ver, por exemplo, como o cartão aparecerá no site. Vamos continuar com os outros cartões de produtos. Quero fazer isso rapidamente porque não quero ficar muito atolado nisso É exatamente o mesmo processo repetidamente. Então, talvez façamos a tigela a seguir. E como esses títulos serão lançados dinamicamente, não vou editá-los aqui. Mas, novamente, talvez você queira fazer isso, atualizá-los para o nome certo. Na verdade, eu quero fazer os acessórios uma última vez, então vou fazer o batedor e depois vou fazer o kit de acessórios Ok. Talvez eu atualize os títulos aqui. Vou apenas dizer tigela de cerâmica, batedor cerimonial e Ok. Então, isso parece muito bom no desktop. Vou mudar a coleção em destaque para nossa linha de produtos e, em seguida, vou até aqui e fazer a mesma coisa no celular. Vou apenas fazer as imagens para celular. Mas, para o seu design, talvez você também queira atualizar os títulos e preços dos produtos. Acabei de perceber que temos um preço adicional ao componente geral, então também farei isso. O próximo foi uma tigela. Então eu vejo que a placa do celular ainda tem isso, eu só quero remover isso. E depois acrescente o preço. Então, vou pegar isso, colar aqui e, obviamente, diminuí-lo e, obviamente, porque estamos no celular. Tudo bem, então podemos voltar aqui, atualizar essas imagens por meio da propriedade de preenchimento, e aí está seu pacote Está bem? Então, isso basicamente cobre as duas primeiras seções. Se também quisermos atualizar a cópia da seção de heróis, tenho o documento de cópia da web aqui para referência. Portanto, era Macha premium para o estilo de vida moderno de bem-estar Então, vou substituir isso porque agora podemos ver que é muito grande ou precisamos dividir em duas linhas. Portanto, é bom colocar a cópia real lá só para ver. Então, o que vou fazer é reduzir isso para uma dessas variáveis. Isso é melhor. E então eu vou ver o que foi feito com qualidade e pureza Ok, então vamos entrar aqui, colocar isso lá. E, na verdade, vou deixar o tamanho da fonte assim. A mesma coisa aqui, traga esse título. Isso vai ser muito grande para dispositivos móveis, eu acho. Então, queremos torná-lo menor e, em seguida, podemos usar quebras de linha aqui, mas ainda é um pouco grande demais. Então, vou sair das variáveis aqui e fazer 24. Então aqui, a outra cópia da web que está embaixo dela Vou colocar que definitivamente vou precisar de uma quebra de linha para essa também. Então, provavelmente farei duas quebras de linha como essas. Talvez também reduzamos o tamanho da fonte. Então, como você pode ver, esse é o tipo de fluxo de trabalho. Nós inserimos as imagens, inserimos os ícones, o conteúdo real e fazemos as edições que encontramos ao longo do caminho e que precisamos corrigir Não vou fazer todos os modelos porque, para muitos deles, as imagens serão extraídas dados do tema e armazenarão dados. Então, muitas dessas informações são perdidas quando construímos. E é baseado no que eu já acabei de te mostrar. Por exemplo, se quisermos acessar a página do produto, a mesma coisa novamente. Nós apenas pegamos a área para onde a imagem deve ir. Nós nos livramos daquele pequeno ícone irritante lá. Porque isso vai ser um problema. Substituímos esse preenchimento de fundo uma imagem real do produto ou qualquer tipo de imagem, dependendo de onde você está, e você continua atualizando as imagens e substituindo a cópia, vendo o que quebra, vendo o que muda e atualizando isso à medida que avança. A única coisa que eu quero abordar em vídeo é nosso Y CNS Macha não está muito bem e nossos depoimentos Então, eu quero refatorar isso e também o que está incluído é usar basicamente cartões de produtos, então eu quero mudar isso Mas o resto parece muito bom. Só precisamos preencher o conteúdo que está faltando. Mas, por outro lado, parece muito bom. Vamos dar uma olhada em nossas seções globais aqui. Sim, está parecendo muito bom. Ele ainda tem os ícones aqui na navegação móvel. Então, em vez de adicionar imagens e cópias a todos os modelos, eu poderia, no próximo vídeo, mostrar a seção de depoimentos de pontos de venda e a seção do que está incluído porque o resultado inicial de IA que chegou vai precisar de um pouco de trabalho E se você quiser preencher o resto dos wireframes com suas imagens, você também pode fazer isso Talvez eu mesmo faça isso um pouco mais tarde para este projeto de teste também. Vou dividir isso em um novo vídeo, e podemos falar sobre essas seções extras que precisam de algum trabalho no próximo vídeo. 7. Design manual no Figma: Então, como vimos no último vídeo, a IA acertou em cheio em algumas das seções Acho que a seção de heróis e a seção de coleções em destaque estão muito boas. Mas na seção Y CNS Marcher, eu ainda não consigo ver a visão E aqui, a seção de depoimentos também precisa de um pouco de trabalho Portanto, não entendeu totalmente o que está incluído porque minha intenção não é que o cliente adicione produtos individuais ao cartão quando estiver na página do produto do pacote Eu só quero mostrar os diferentes produtos que estão incluídos no pacote quando estão nessa página Então, neste vídeo, vamos corrigir manualmente essas seções. Mas, antes de tudo, parece que Claude não o criou como um componente, e eu quero que essas alterações se apliquem a todos os modelos que o usam É claro que posso simplesmente excluir a seção e depois trazê-la de volta, mas prefiro que seja uma instância de componente Acho que isso também ajuda geração do código para explicar que é o mesmo código para cada uma dessas seções, mas com conteúdo potencialmente diferente. Então, para isso, em vez de consertá-lo sozinho, vou voltar para Claude aqui, e isso é algo que você pode fazer, não importa em que estágio você esteja no projeto Claude pode realmente mergulhar no Figma por meio do MCP em qualquer estágio. E se é algo que você pode explicar facilmente e que Claude pode interpretar facilmente, é uma boa dica para Claude Em vez de necessariamente ter que fazer o trabalho manual sozinho. Então, copiarei os nomes dessas seções e, em seguida, voltarei à minha sessão de código Claude dentro do Visual Studio Code Eu vou dizer que você implementou a seção de pontos de venda. Na verdade, a seção de depoimentos só aparece na página inicial Então, direi que você implementou a seção de pontos de venda como seções duplicadas regulares Eu gostaria que fosse um componente do Figma. Ok, então eu não sei se me explico tão bem, mas parece que entendeu o que eu quis dizer, isso transformará a seção de pontos de venda em um componente reutilizável adequado Então, ele vai inspecionar o que está acontecendo atualmente no arquivo Figma e alterá-lo para nós Ok, então está dizendo que percebeu algo inesperado e acha que outra pessoa editou o arquivo desde a última verificação. Então, vou me certificar de que Claude entenda isso Sim, eu editei o arquivo desde que você gerou os wireframes pela primeira vez Por favor, não reverta meu trabalho. OK. Espero que ele entenda isso e não volte atrás, revertendo nenhum trabalho que já fizemos Acho que não vai, desde que deixemos isso claro. Tudo bem, então agora parece que está pronto. Deixe-me entrar no Figma e, sim, parece que os pontos de venda agora são um componente comum Não tenho certeza de onde o componente está, porque ainda é uma instância. Então, temos que descobrir onde está. Novamente, ele se sobrepôs ao outro conteúdo, mas eu poderia simplesmente fazer isso E para ser honesto com você, isso levou cerca de 6 minutos com Claude Nessa situação, talvez tivesse sido mais rápido para mim fazer isso sozinho, o que mostra que algumas coisas são melhor feitas com IA e outras são melhores feitas manualmente. Então esse é um bom exemplo que levou 6 minutos e gastou muito dinheiro em fichas. Às vezes, é melhor fazer isso manualmente. Agora que isso foi feito, podemos editar a seção de pontos de venda em um único local, e essas informações chegarão a todos os modelos que a usam. Ok, então o que eu vou fazer é, obviamente, substituir esses pequenos círculos pelo ícone. E se usarmos o site que construímos na classe anterior do Skillshare, como exemplo, esses ícones são um pouco maiores que 40 pixels Então, se eu der uma olhada aqui, 64 por 64, provavelmente é o tamanho certo que queremos. Então, em vez de apenas mudar isso para 64 por 64, vamos substituí-lo de qualquer maneira. Então, vou trazer os ícones. A primeira foi a defesa radical. Então, deixe-me descobrir onde está. Então, dentro das imagens do site dentro dos ícones, essa é a primeira, então vou arrastá-la aqui. Vai sair enorme. Quero corrigir a proporção e, em seguida, configurá-la para 64 e, em seguida, remover esse ponto. Vou fazer o mesmo rapidamente com esses outros. Avanço rápido porque é exatamente o mesmo processo para cada sinopse Também farei isso para a versão móvel. Ok, legal. Depois, também preencherei os títulos e descrições em destaque. Então, vou copiar isso do site, defesa radical, ritual sustentado, faísca metabólica, desintoxicação vívida Isso também está no documento de cópia da web. Então, se você não está tirando do site como eu, pode retirá-lo do documento de cópia da web aqui. S, ritual sustentado. Vou mudar para o documento de cópia web porque você pode não ter acesso ao site da aula anterior, mas é exatamente o mesmo conteúdo aqui. E talvez seja importante notar que provavelmente poderíamos ter evitado esse estágio se tivéssemos dado essa informação a Claude no início Mas aí está. Levei mais alguns minutos, mas agora carregamos essas informações e quero ver isso agora na instância real. Como você pode ver, há algumas coisas que precisam mudar. Quero que todas essas sinopses sejam centralizadas, então vou até cada uma dessas sinopses E acho que também quero isso aqui no celular. Deixe-me ver isso no lugar. Acho que talvez eu também queira uma cor de fundo diferente. Então, vou mudar a cor de fundo aqui para, digamos , branco, mas não vou escolher o branco normal. Vou escolher a variável de fundo, na verdade, a variável de fundo. Parecia branco aqui, mas na verdade não é branco. Vamos experimentar a superfície. Não. Vou fazer uma superfície brilhante. E então aqui também preencha a superfície com brilho. Sim, acho que gosto mais desse jeito, e o texto não está alinhado no centro Está alinhado à esquerda. Então, vamos entrar no alinhamento do texto aqui para cada sinopse e alinhá-lo no Agora vamos dar uma olhada novamente. Parece muito bom, mas o texto é um pouco grande demais, então eu quero ter um contêiner Max WIP no conteúdo do texto aqui Então, aqui, vou definir um WIP máximo clicando no Chevron ao lado do WIP, adicionando um Max With of, vamos ver como é Ok, talvez 250, talvez 260. Sim. Então, vou definir tudo isso para Max WIP 260 no celular. E no desktop, talvez 260 também. Vamos experimentar com isso. 250 parece que não está embrulhando. Eu só preciso mudar as regras de redimensionamento aqui. Sim, eu não gosto de como isso se desenrola. Então, acho que vou fazer pelo Max com 260. Então, este também, definindo todos eles para 260. Algumas delas não mudarão porque já eram pequenas o suficiente, mas essas são regras responsivas que se traduzirão bem na web e à medida que redimensionarmos em diferentes larguras de tela Ok, agora você pode ver que temos Y CNS Macha, e todas as nossas alterações se aplicam a todos os modelos que o usam Está bem? Deixe-me verificar também a fonte. Então, está chegando como Inter. Eu quero usar a fonte do título aqui, então vou mudar isso também. Também posso usar uma variável aqui. Eu posso clicar aqui para mudar para a variável, ou eu deveria ser capaz. Eu juro que vi uma variável para cabeçalhos antes. Título da sessão, título da sessão, MD. Ok, então só preciso entrar aqui e acho que clique aqui para aplicar estilos. Isso é o que eu estou procurando. Então, vou fazer o título de MD, aplicar esse estilo em todos os aspectos Também há o Title MD que eu posso usar. Mas vamos ver como é a manchete MD. Pode ser um pouco grande demais. Sim, acho que provavelmente vai ser um pouco grande demais. Então, talvez nós tenhamos. Em vez desse estilo, mudamos o estilo para outra coisa. Então, intitule MD e, talvez, assim como no site, a letra maiúscula não fique bem com essa fonte. Então, talvez eu o configure como MD, mas basta desvinculá-lo , reduzir o tamanho da fonte para 24 ou podemos ir ao estilo em si e alterá-lo no nível do estilo Então, se eu for aqui e clicar para editar o estilo, posso reduzir isso para alguns pixels, talvez para 24. E isso vai mudar isso em todos os lugares. Então lembre-se, aqui nós o reduzimos para 24. Provavelmente podemos trazer isso de volta ao estilo de antes, e eu prefiro fazer isso porque isso apenas mantém a consistência em todo o site usando essas variáveis. Então, eu preciso aplicar os estilos aqui também, headline MD. E uma última alteração que quero fazer aqui é que quero mais espaçamento entre o cabeçalho e o contêiner Então, vou aumentar a diferença para, digamos, 48 e talvez tornar esse título em vez de MD grande, aí está. Talvez adicione um ponto de interrogação aqui. Faça isso em ambos. Quero que este seja centralizado, então vou definir o alinhamento aqui, e estou muito bem com Então, vou deixar isso aí e vamos trabalhar na seção de depoimentos a seguir Então esse só aparece uma vez, então não será um componente, mas podemos, é claro, tratá-lo como um componente. Então, o que vou fazer é substituir todos esses espaços reservados para imagens por fotos dos próprios clientes. As mesmas fotos que usamos na aula anterior, novamente, vão torná-las enormes. Então, temos que reduzi-las para o que achamos que são dimensões melhores. Acho que 200 talvez sejam suficientes. E então queremos adicionar um raio de canto. Temos nosso raio de canto, variáveis aqui. Então, como estamos usando raios em todos os lugares, acho que devemos usá-los aqui Remova isso. Vamos fazer uma citação real. Então, vou pegar isso da cópia da web. Isso pode ser Sarah. Então, vou copiar o nome da autora dela também. E sim, não parece tão incrível. Acho que o que vamos querer fazer é fazer com que pareça mais um cartão de produto. Então, vou adicionar um pouco de preenchimento aqui. Então, vou às minhas bibliotecas. Vamos dar uma olhada. Vamos fazer o plano de fundo. Só vai deixar a página de fundo em segundo plano, e a superfície da superfície ficar brilhante, como fizemos aqui em cima, sem sentir aquela Eva. Estou sentindo algo um pouco mais branco. Talvez se eu colocasse algum raio de canto aqui, novamente, usando uma das variáveis padrão E então vamos centralizar tudo nesse quadro, adicionar um pouco de preenchimento dentro desse quadro Eu acho que isso é uma coisa que definitivamente está faltando. Vamos ver se temos alguma variável para o espaçamento. Sim, então preenchimento de contêineres. Vamos usar isso. Ok, isso parece um pouco melhor. E então, alguma lacuna aqui também. Atualmente, há apenas dez pixels de diferença. Então, vamos definir isso para 20. E agora eu preciso ver isso empilhado um ao lado do outro para ver se está bom Então, vou duplicar. OK. Tudo bem. Acho que gosto disso. Então, vou remover esse espaço reservado e usar essa duplicata. E, novamente, se estivéssemos nos tornando técnicos com isso, talvez queiramos fazer disso aqui também um componente. Então, se fizermos alguma edição, ela se aplicará a todos os componentes aqui Na verdade, deixe-me fazer isso agora. Vou criar componentes, colocar isso em nossa seção de componentes aqui, removê-los e, em seguida , trazer uma instância desse componente. E agora, você deve saber o que isso nos permite fazer é editar o cartão uma vez aqui em nossos componentes, e então essas alterações fluirão para todos os cartões de depoimento, ok? Então, vou nomear este, em vez de depoimento, um desktop de cartão de depoimento, certo E então eu vou duplicar isso duas vezes. OK. Gosto de ver isso, exceto pelo fato de que algo está acontecendo aqui com esse recorte Sei por que está se sobrepondo à final e não às outras O cartão em si está sobreposto. Então, o que queremos fazer é fazer com que o WIP abrace o conteúdo, mas depois adicionar um chicote mínimo para que não fique muito apertado Então, talvez 300. E agora podemos alinhá-los no centro. Poderíamos alinhá-los com uma lacuna igual, se quiséssemos. Eu só vou alinhá-los assim. E eu não acho que a imagem precise ser tão grande, então eu poderia reduzir isso para 150 e, na verdade, talvez colocar o depoimento no topo Acho que todos esses depoimentos provavelmente são muito texto, mas não vamos reinventar nossa Então, vamos substituir este. Obviamente, neste momento, estamos editando as instâncias porque não queremos que essa alteração se aplique a todas as instâncias de nossos componentes. Então, só precisamos arrastar isso para essa instância. Não gosto que eu arraste uma nova imagem, então vou apenas atualizar o preenchimento aqui e depois substituir o conteúdo da última instância aqui. Ava, então, obviamente, você precisa substituir a imagem aqui do terceiro perfil Ok, então eu acho que isso é bom por enquanto. Acho que se eu passasse mais tempo nisso, eu definitivamente poderia consertar isso. Acho que esses subúrbios provavelmente são muito longos ou precisam ser apresentados de forma um pouco diferente, mas estou feliz o suficiente por enquanto e farei a mesma coisa aqui Então, vou criar uma versão móvel desse cartão de depoimento Então, eu apenas dupliquei o componente e o chamo de móvel, certo, arraste-o para fora, para que saibamos que é diferente, e então eu opto por arrastar Para trazer isso, exclua os outros, os espaços reservados, e duplique-os duas vezes Como você pode ver aqui, não está centralizado no meio, então vou alinhá-lo no E eu percebi que não temos um título, então preciso colocar um título acima dessa linha de depoimentos Na verdade, vou copiar o título aqui e colocá-lo aqui acima. Então, precisaremos de alguma lacuna em nossa seção de depoimentos. Acho que a lacuna que usei antes, qual era? Vamos criar uma lacuna consistente. Era 48, acho que usei 48 aqui, então eu, perfeito. OK. Então, a mesma coisa aqui, vamos copiar isso para o nosso design móvel, colocá-lo no topo, e eu realmente estou bem com esses cartões. Então, vou substituir o conteúdo mais uma vez. OK. Então, como você pode ver aqui, isso parece muito bem preenchido. Ele tem conteúdo real, para que você possa ver como ficará no site final. Então, essas eram as duas seções da página inicial que eu queria abordar A seção de pontos de venda também aborda o modelo do produto, modo que também abrange o modelo do produto. Mas, finalmente, eu queria cobrir e consertar o que está incluído no pacote Eu não quero que isso pareça um cartão de produto, então eu posso realmente separar a instância aqui, então não é uma instância do cartão do produto Em seguida, vou remover os outros aqui e vou duplicar o que eu crio aqui Não quero que seja um cartão de produto. Pode ser um pouco parecido. Vou remover o anúncio rápido. Vou colocar no título do produto, pó de marcha premium, substituí-lo, é claro, pela imagem Vou remover isso. Adicione um preenchimento de imagem. Queremos voltar às fotos de nossos produtos. Nossos principais, acrescente o pó macho. E em vez de avaliações e tudo mais, quero colocar um descritor do que é esse produto Então, acho que talvez eu o tenha na cópia da web aqui. Na verdade, vamos fazer alguns pontos. Então, vou criar um novo, vamos apenas duplicar isso, então, obviamente, não queremos usar negrito aqui Parece que eu acionei a caixa de aviso da IA acidentalmente aqui. Lá vamos nós. Então, eu quero agrupar isso em sua própria seleção de quadros. Quero adicionar layout automático. Eu quero alinhá-lo no centro, esse título seja maior Então, vou aplicar esse estilo. Obviamente, precisa de alguma lacuna. Vou adicionar uma lacuna de 16 pixels. As alturas não serão fixas. Será um grande conteúdo, e eu vou renomear esta moldura com o cartão incluído Faça disso um título maior, título grande, centralize tudo no contêiner E há muita preferência pessoal aqui, obviamente, design, da maneira que você quiser. E eu obviamente estou passando por isso rápido porque, você sabe, você pode querer projetá-lo de uma maneira completamente diferente. Mas só para finalizar esta lição e fazer com que pareça um pouco mais apropriado ao que eu tinha em mente para o site real, vou alinhá-los automaticamente, flexioná-los com o espaço entre eles e depois renomear aqui para os outros produtos, que, se olharmos na e depois renomear aqui para os outros produtos, que, lista de produtos, tínhamos o elegante batedor marcher Vamos fazer com que o título de cada produto tenha duas linhas para que correspondam e, em seguida, coloque um texto no centro da linha. Obviamente, precisamos substituir a imagem, e então a última será a tigela, e então precisamos pegar o nome dessa tigela, a cerâmica premium Marcher Bowl E por aqui, ainda não tenho nenhum conteúdo, então vou deixar isso como conteúdo reservado por enquanto e depois limpar isso entre os vídeos antes estarmos prontos para gerar o código Há algo aqui que está tornando a seção muito grande aqui, então deixe-me tentar descobrir o que é isso. Acredito que temos uma altura fixa no contêiner aqui. Se eu mudar isso para conteúdo de abraço, não. Deixe-me abrir isso manualmente, e acho que isso é bom o suficiente para nossa página de pacotes Novamente, eu poderia fazer muito mais correções e atualizações em todos esses modelos diferentes, mas isso criaria um curso muito longo, e muito disso dependeria da preferência pessoal de você como designer. Então, neste vídeo, eu só queria mostrar como eu limparia certas seções. Obviamente, eu tenho que fazer a versão móvel disso. Eu vou fazer isso entre os vídeos. Mas mostrando como você pode criar seus wireframes, você pode reformulá-los com seu próprio sistema de design, e então podemos começar depois disso E faça manualmente nosso processo normal de design do Figma agora que temos as bases estabelecidas para Acho que você concordará que configurar os wireframes com antecedência e fazer com que Claude ajude a implementar nosso sistema de design está nos poupando muito tempo, nos dando mais tempo para focar nas coisas importantes, pequenas atualizações sobre as quais falamos neste e no vídeo anterior Então, depois deste vídeo, continuarei limpando esses designs, tenham a aparência exata que eu quero no site ao vivo e, em seguida, usaremos esses designs figma de alta fidelidade, bem como a folha de especificações que geramos anteriormente Estamos aqui para realmente gerar o código para nossa loja na Shopify 8. Geração de código de temas: Tudo bem, então, conforme mencionado entre os vídeos, eu ia limpar o design do Figma se formos até a página do produto, a página do produto do Bundle, a página da coleção, você verá que tudo está pronto agora. Entre em contato conosco. Eu não precisei fazer nenhuma alteração nisso. Preenchi imagens e informações reais aqui para a página do carrinho. página do carrinho não é muito importante porque poucas pessoas vão navegar até ela, já que temos uma gaveta para carrinhos A página de pesquisa no desktop e no celular e, em seguida temos as páginas do nosso blog aqui, que eu não preenchi. Não vou implementar um blog nesta classe, então vou excluir todos esses modelos completamente Lembre-se de que mencionei no vídeo de planejamento que você pode simplesmente excluí-los do seu plano se o site da Shopify não tiver um blog Eu queria incluí-los apenas para mostrar como eles estão funcionando como um wireframe Mas vou excluir completamente esses wireframes porque realmente não precisamos de um E você pode ver aqui nossas gavetas. Então, a gaveta do carrinho no desktop, que tem basicamente o mesmo design celular, e nossa gaveta de navegação aqui Agora, basicamente, criamos nosso arquivo Figma. Ele tem todos os modelos que precisamos criar. Como você pode ver listado aqui. Tudo está bem estruturado em seções com layout automático e componentes com instâncias, assim como fizemos na aula de web design da Figma E, assim como na aula de web design Figma, agora vamos gerar o código para esse tema Shuberfi Ao contrário da classe de web design Figma , que era independente de uma plataforma, ela não era baseada no Shopify Foi baseado apenas em HTML e CSS. Nessa situação, vamos realmente criar um tema do Shopify, que é um conjunto muito específico de arquivos de código que só são executados nas lojas do Shopify É por isso que analisamos o planejamento no início com o planejador Tudo isso foi criado especificamente para o Shopify e, em seguida, esses wireframes foram configurados especificamente com base no mapeamento desse plano para determinados modelos dentro de um tema, sendo o tema o sistema que representa a vitrine que opera na Então, junto com essas maquetes finalizadas de alta fidelidade e a folha de especificações, que se voltarmos ao nosso planejador de vitrines e olharmos ao lado do nosso plano de web design, podemos ver nossa folha de especificações aqui, temos informações suficientes para dar instruções a uma IA como Claude para como Antes de fazer isso, queremos apenas verificar quais possíveis perguntas podem surgir durante a construção. Você pode ver aqui que eu tenho essa parte laranja na parte superior da folha de especificações Isso cobrirá coisas que realmente não abordamos em nosso plano. Então, está solicitando a seção da coleção em destaque, se a seção contém os dados do tema, armazena dados ou mistura. Parece que não preenchemos a fonte de conteúdo. Então, vou voltar ao projeto e me certificar de tornar essa parte específica. Então, vou entrar em outras seções, acessar a coleção em destaque, editar informações. E você pode ver aqui que eu não configurei a fonte do conteúdo. Então, vou dizer uma mistura de dados do tema e dados da loja porque os produtos virão da coleção, mas a coleção específica escolhida será das configurações da seção. Então, vou salvar essas informações, voltar para criar o plano de web design e, em seguida, copiarei as instruções de criação do tema. Na verdade, antes de fazer isso, quero renomear isso e dar acesso a esse arquivo Então, digamos que consulte o projeto da classe Macha Skillshare caso você queira Então, clicarei em Compartilhar aqui, copiarei o link e tentarei incluí-lo em algum lugar da aula. Na pior das hipóteses, se eu não tiver postado em nenhum lugar, vou apenas criar uma nota aqui, fazer uma pausa aqui, fazer uma captura de tela e, em seguida, extrair o conteúdo do texto aqui Está bem? Tudo bem, então, de volta aqui, vou copiar as instruções de construção do tema novamente e vou abrir uma nova janela no VS code Você pode fazer isso em qualquer editor de código ou IDE de sua preferência Para mim, é o código do Visual Studio, e eu uso o código do Visual Studio em todas as minhas aulas. Então, vou criar uma nova janela dentro do Visual Studio Code. Na verdade, preciso apontá-lo para uma pasta específica. Então, vou abrir minha janela do Finder aqui, voltar para a pasta da minha área de trabalho aqui e vou criar uma pasta chamada tema personalizado OK. Então eu vou até aqui, clique nesse botão chamado Explorer. E como diz aqui, eu ainda não abri uma pasta, então vou abrir essa pasta. Obviamente, essa pasta está vazia, mas agora tudo o que fazemos dentro dessa pasta será aplicado a essa pasta. Está bem? Então, vou clicar aqui para abrir uma sessão de código Claude E então tudo o que vou fazer é colar as instruções do Figma e, em seguida, também preciso anexar a folha de especificações Então, vou descer aqui e baixá-lo como Markdown. O Markdown é mais fácil para as IAs lerem. O documento do Word é mais para humanos. Então, vou baixar a folha de especificações do Suns Marcher para a mesma pasta Em seguida, vou pressionar isso para fazer o upload do meu computador. Selecione a folha de especificações do SNS Marcher, e isso deve ser suficiente para continuar e criar Agora, eu posso realmente ler aqui. Há algumas coisas que preciso mencionar. Antes de começar, isso precisa ser acionado primeiro. Está no prompt, então ele solicitará que você faça isso de qualquer maneira. Você precisará da CLI da Shopify para enviar os arquivos do tema para sua loja da Acho que você pode optar por apenas criar o tema, confiar que ele funciona, compactá-lo e enviá-lo , mas eu recomendo que você faça isso com a CLI Então, se você não está familiarizado com o Shopify CLI, CLI significa apenas interface de linha de Basta pesquisar na CLI da Shopify no Google. Ele deve direcioná-lo para uma página como essa e, em seguida, você pode simplesmente instalá-la, caso ainda não a tenha instalado. Está bem? Os outros pré-requisitos necessários são um conector MCP da Shopify Esse prompt O Iclaud deve solicitar que você configure isso e se conecte a uma loja Obviamente, você precisará de uma loja à qual se conectar. Vou implantar esse tema diretamente na mesma loja da aula anterior, Sansmchatmshofy shopify.com Sansmchatmshofy Como você pode ver aqui, temos o tema Horizon e o tema Prestige em teste, que é o tema com o qual criamos nossa vitrine na aula anterior Então, conectando-se a essa loja, o que ela fará é publicar esse tema que estamos criando nos rascunhos dos temas. Ok, então eu acho que esses são todos os pré-requisitos, mas mais uma vez, se executarmos esse prompt, se executarmos esse prompt, Claude deve nos dizer o que precisamos se estiver Está bem? Então, vou aumentar o zoom e clicar em Enviar. Enquanto isso, podemos analisar nosso design e dar uma olhada em alguns dos conteúdos dinâmicos que precisaremos em nossa Shopper Fire Store existente Por exemplo, os menus e os produtos, ok? Então, aqui em nosso cabeçalho, você pode ver que temos esses itens de menu, e cada um deles tem um Chevron, o que indica que, se houver subitens, passar o mouse sobre eles o que indica que, se houver subitens, abrirá Atualmente, temos um menu muito básico em nossa loja. Então, se eu entrar na seção de conteúdo real do Amen, você verá o menu principal, com apenas três links sem aninhamento Para uma loja com apenas quatro produtos, isso faz sentido, mas no mundo real, você pode ter 100 produtos, então você potencialmente gostaria de menus duas ou três camadas de profundidade com mais itens de menu do que isso A mesma coisa para o rodapé. Então, se rolarmos até aqui, você pode ver que há todos esses itens de menu. Isso será retirado da mesma seção do administrador. Então, você verá que, quando publicarmos isso, eles estarão vazios e precisaremos vinculá-los aos links corretos do menu. Portanto, pode não parecer exatamente como o design nesse sentido, com os itens do menu de espaço reservado aqui Então, é claro, cada um deles é extraído de um produto diferente Portanto, cada um deles precisaria ser configurado como um produto. Mas acredito que já fizemos isso na aula anterior. Então, se eu for até minha seção de produtos aqui, você verá que já temos os quatro produtos carregados. E se você não fez a última aula e ainda não a tem, tudo bem. Se formos para a pasta do projeto, tenho certeza de que saí na lista de produtos. Então, o que você pode fazer é simplesmente ir até aqui na parte superior da página de produtos no administrador, clicar em Importar e, em seguida, importar um arquivo CSV formatado do Shoo Five, e isso trará exatamente OK. Também as coleções. Então eu acho muito simples, mas eu tenho uma loja ou coleção. Realmente não faz sentido ter mais coleções além dessa quando você tem apenas quatro produtos na loja. Mas quando você tem muitos produtos em sua loja, obviamente, você quer organizá-los em coleções. Então, acredito que essa é a maioria dos dados dinâmicos. Coisas assim virão das configurações da seção. Então, só precisaremos configurar isso, ou o tema terá esses padrões incluídos, então ele sairá da caixa Obviamente, tudo nesta seção vem do próprio objeto do produto. O que está incluído realmente não precisa ser alterado em nenhum lugar do site. Obviamente, isso vem de uma determinada coleção, e a pesquisa obviamente se baseia em produtos ou outros recursos em seu site com base no termo de pesquisa Está bem? Então, deixe-me dar uma olhada em nossa instância de código com garras agora e ver onde ela está E está nos perguntando se queremos continuar com uma consulta ou ação de MCP Não me lembro como se chama. E, claro, queremos dizer que sim. Precisaremos usar o MCP da Shopify para nos conectarmos à Então, vamos esperar que ele volte pedindo que nos conectemos. Ok, então vamos lá. O que precisamos antes de começar? Ele precisa do domínio exato da loja. Então, vou pegar isso para nossa instância aqui. Vai ser Sans marcher.mishabify.com. Então eu vou dizer o número um. Número dois, login da Shopify CLI. Então, vou clicar para abrir um novo terminal e executar esse comando aqui mesmo, substituindo sua loja pela Sans Macha Obviamente, coloque sua própria loja aqui. Ok, encontramos um erro aqui. Eu acho que isso está um pouco desatualizado. Costumava ser assim que você podia entrar em uma loja. Em vez disso, vou usar o Shopify Theme Dev. Armazene iguais e, em seguida, coloque Sans Macha E isso abrirá uma nova janela do navegador para eu fazer login. Vamos apenas combinar esse código com o que ele exibe em nosso terminal. Sim. Confirme e faça login, diz que estamos conectados com sucesso para que possamos voltar aqui. Tudo bem, então vou dizer que número dois, eu me autentiquei com sucesso, e aqui embaixo, vou dizer sim para continuar Ele solicitará a senha da loja. Ok, então ainda não terminamos totalmente. A senha da loja é algo que você encontra no canal de vendas da loja virtual em Preferências. Eu fiz com que a senha fosse falsa, então vou digitá-la. Falso. E isso deve ser suficiente para realmente se conectar à loja. Ok, diz: Não, porque eu já estou executando esse mesmo comando com uma loja diferente. Isso é bastante típico para mim, ser um desenvolvedor do Shopify Eu trabalho em uma variedade de lojas. Acabei de limpar isso, então vou fazer isso de novo. Sim, eu quero continuar. OK. E agora parece ter funcionado, mas está tentando realmente fazer o upload desse tema, e não há nada lá. Então, sim, ainda não vai funcionar. Então, o número três é o link do quadro Figma. Então, o que eu vou fazer é aquele link que eu copiei antes, eu vou copiar dentro desse chat do Claude, Então, o link de compartilhamento aqui. Em seguida, conector MCP do Shopify, vou perguntar se o próprio código Claude Por favor, conecte-me. Tudo bem. E isso é uma coisa boa sobre a IA se você estiver bloqueado em qualquer estágio, dirá que você está bloqueado e informará o que você precisa para ser desbloqueado Então, basta seguir o que o agente de IA diz e você ficará bem. Caso contrário, como sempre, você pode usar a seção de discussão da classe Skillshare Vou minimizar isso um pouco para que possamos ver mais do que está acontecendo aqui. E eu posso ver pelos registros que me mostram agora que ele já está começando a ler o Figma, descobrir o que está dentro dele e, em breve, deve começar a construção Se eu clicar nesse botão para ver o explorador, você verá que nenhum arquivo foi criado ainda, mas isso logo acontecerá à medida que criarmos esse tema usando esse prompt principal com uma folha de especificações Ok, então ele está me perguntando sobre os quadros do modelo de blog e artigo, aqueles que acabei de excluir. Então, está me perguntando se deveria criar uma convenção padrão ou simplesmente pular por enquanto Vou clicar em Skip por enquanto. Tudo bem, então depois de mais 15 minutos, agora está concluído o que estava fazendo E, como você pode ver aqui, ele criou todos os arquivos dentro das diferentes pastas que compõem um tema do Shopify Está bem? Então, vamos rolar um pouco para cima e ler o que ele trouxe de volta. Diz que agora criei e validei todos os oito modelos que têm cobertura Figma Aqui está um relatório de status completo. Então, em vez de ler esse esboço linha por linha, vou abordar apenas os pontos principais. Por isso, entendeu que determinadas seções são compartilhadas em todos os modelos. Então, ele os criou. Ele criou os diferentes modelos. Entende-se que existe um modelo alternativo. Para a página de contato e para o pacote de produtos. Então, como você pode ver aqui, eu não espero que você entenda completamente o código do tema Shuba fi, mas se você entender, você pode ver aqui que este é definitivamente um modelo alternativo apenas pelo nome do arquivo Eles pularam os modelos de artigos do blog porque eles foram removidos do Figma e, em seguida, algumas suposições feitas com a troca de variantes, por exemplo, não foi mostrada nenhuma interface do Figma, então adicionaram uma seleção mínima de design baixo para o caso de uma variante aparecer Para a adição rápida ao carrinho, inferiu que deveria ser direcionada para o carrinho em vez de para a gaveta do carrinho Talvez precisemos mudar isso. Vamos dar uma olhada nisso. Classificação da coleção, ele fará uma classificação por página da coleção usando Ajax, o que basicamente significa que não há recarga de página Não inventou nenhuma faceta de filtro. Novamente, não dissemos ao planejador no início que precisávamos de filtros de coleta, então ele simplesmente não incluiu isso Na página do carrinho, ele usa o Ajax para alterar a quantidade sempre que atualizamos a quantidade na página do carrinho E a página de pesquisa tem como escopo apenas produtos. A seção de coleta fixa ainda não tem dados ativos. A loja já tinha dois temas, Horizon, e diz que desenvolvimento aqui deve significar aquele que está sendo executado atualmente usando a CLI Não empurrou nada. Diga-me se devo usar esse tema de desenvolvimento existente ou criar um novo. Tecnicamente, esse tema de desenvolvimento existe apenas na CLI Assim que desativamos a CLI, ela não existe mais. Então, teremos que pedir que ele mude para um novo tema. Então, o controle de qualidade visual manual ainda é necessário, o que é totalmente bom. Está bem? Então, vou dizer que, para o alvo de implantação, implante o tema em um tema totalmente novo. Por favor, implante o código em um novo tema. Esse que estamos executando aqui no Shopify Theme Dev ainda é o que foi mencionado anteriormente, esse tema de desenvolvimento Portanto, se você estiver familiarizado com a CLI, podemos executar um tema de desenvolvimento para testar as alterações no código sem realmente enviá-las para a loja Então, enquanto estamos levando o tema para a loja, vamos realmente dar uma olhada nesse Portanto, normalmente podemos encontrar o mesmo endereço todas as vezes . Se abrirmos o terminal, poderemos ver qual é. Então, normalmente é esse endereço. Então, vou copiar esse endereço, colá-lo aqui e parece que temos um erro quatro oh quatro. Vou encerrar nossa sessão anterior pressionando Control C e reiniciando-a Nós começamos, não havia nenhum arquivo de tema, então esse é provavelmente o problema E agora você pode ver que ela chegou. Então, como você pode ver aqui, algumas são boas, outras não são boas. Nossa estrutura básica está aqui, mas há algumas coisas que precisamos corrigir. Ou seja, temos esse contêiner estranho aqui. Não sei exatamente o que está acontecendo, mas parece que a página não está chegando à esquerda e à direita da tela. Portanto, embora possamos usar o Figma para criar nosso tema inicial, e se acessarmos a página de um produto, o que será mais fácil se entrarmos no editor da loja online Então, vou dar uma olhada no segundo link aqui. Isso nos permitirá navegar até os diferentes modelos e também adicionar os dados do tema que faltam. Se acessarmos a página do produto aqui, poderemos ver, e esse é um tamanho de tela muito pequeno. Vou diminuir o zoom um pouco e você verá que ele criou as seções necessárias, mas há muita limpeza a ser feita aqui Como você pode ver, aqui estão nossos pequenos cartões de produtos. O que vou fazer antes de prosseguirmos e limpar isso é adicionar os dados que faltam. Então, para a coleção em destaque entendeu corretamente que queremos trazer uma coleção, mas precisamos selecionar o que é essa coleção, ok? Então, depois de fazermos isso, ele preenche as informações. Vou clicar em Salvar nisso. E no próximo vídeo, mostrarei a limpeza da saída resultante da geração de código de IA. 9. Limpeza de código de temas: Tudo bem, então, no último vídeo, geramos o código do tema Shopify para Mas, como vimos, está um pouco quebrado e um pouco incompleto. Então, vamos passar algum tempo nesta lição corrigindo melhor maneira possível a saída que veio da IA. Se você se lembra da aula de web design do Figma, conseguimos uma maneira justa de usar a geração de código de IA, desde que os arquivos do Figma estivessem configurados da maneira correta, ainda precisávamos fazer alguns pequenos refinamentos ao longo do caminho, e isso não é diferente Na verdade, provavelmente é um pouco mais desafiador porque se baseia em uma plataforma em que muitos dados são extraídos de locais diferentes Por exemplo, a seção de produtos em destaque na página inicial está sendo extraída dos dados da seção E você notará aqui que a lista de produtos está faltando aqui. Isso é algo fácil de resolver. Às vezes, faltam dados que precisamos realmente inserir no tema. Agora, um dos problemas que enfrentaremos é que esse tema que estamos vendo aqui é um tema de desenvolvimento que desaparecerá assim que desativarmos a CLI, como esse editor de loja virtual aqui Portanto, não vou usar isso agora enquanto atualizo o tema e, em vez disso, examinarei o tema na loja real que ele criou. E Macha Para fazer as edições, solicitaremos a Claude, mas teremos que pedir a Claude, no final de cada sessão, que envie essas alterações para esse tema na loja para que possamos realmente E isso é um pequeno problema com Shopify: os dados do tema em que editamos aqui no editor da loja virtual e o código estão nas mesmas pastas Mas se editarmos os dados aqui, eles não retornarão automaticamente para essa versão do tema em nosso computador local, ok? Então, por enquanto, vou fazer isso na vitrine e, em seguida, vou compilar uma lista alterações que quero corrigir, enviar isso para Claude, e então Claude pode enviar essas Está bem? Então, vou até a seção de coleções em destaque aqui e carregarei uma coleção. Então, como você pode ver aqui, a geração do código do tema foi adicionada com sucesso nas configurações de personalização Então, como você pode ver aqui, podemos personalizar o título. Então, podemos dizer coleção em destaque, ou podemos deixá-la em nossa linha de produtos. E se tivéssemos outras coleções em nossa loja, poderíamos mostrar outras coleções, ok? Isso está funcionando corretamente. Como você pode ver aqui, temos blocos de pontos de venda. Na verdade, vou diminuir um pouco o zoom aqui, para que possamos ver à esquerda aqui os blocos de pontos de venda e , em seguida, os detalhes de cada um. Então, podemos mudar isso. Podemos atualizar o ícone. Parece que ele puxou o ícone e o adicionou diretamente ao tema. Mas, idealmente, não queremos fazer isso. Vou deixar isso como está por enquanto. Parece que aqui podemos mudar o ícone para outra coisa, como podemos ver aqui. Mas se não adicionarmos isso, ainda usaremos essas imagens como padrão. E se formos até aqui, a mesma coisa também, então eu posso mudar a imagem aqui. Esta loja já tem imagens da aula anterior, então é por isso que você as está vendo na biblioteca aqui, mas você sempre pode enviar suas imagens para esta seção. Na verdade, vou colocar isso como meu primeiro feedback. Se entrarmos na pasta Assets, veremos todas as imagens que foram incluídas no tema. Idealmente, não queremos ter nenhuma imagem instalada no próprio tema. Então, vou criar um prompt de feedback aqui. Primeiro, não armazene imagens no tema. Todas as imagens devem vir dos dados da loja ou dos dados do tema. Ok, esse é meu primeiro feedback porque ter as imagens no tema significa que criamos um tema mais volumoso Só queremos ter o código aqui e queremos que as fotos sejam realmente enviadas para a seção de arquivos do nosso Shabafi Ok, então essa é a primeira coisa que vou mudar aqui no cabeçalho, você verá que está vinculada ao menu principal Então, esses são, na verdade, os links do menu que temos em nossa lista de links do menu principal. Então, como você pode ver aqui, se eu clicar em Editar, isso nos levará à seção de menus do administrador para que possamos editar. Portanto, acredito que esses links devem estar corretos se eu voltar a eles agora, com base no trabalho que fizemos da última vez. Sim, então esses links devem funcionar. O logotipo, novamente, está mostrando um logotipo sem que façamos upload de nada para ele Portanto, esse primeiro feedback também deve corrigir isso. E então, o mais gritante é que, se eu for aqui para visualizar esse tema, direi que o layout inteiro está recuado à esquerda e à direita Tente ser o mais descritivo possível aqui. Sou desenvolvedor, então consigo analisar o código e ser um pouco mais descritivo Provavelmente podemos descobrir o que é esse recuo examinando o código aqui Então, temos esse estranho sistema de grade de conteúdo com margem de conteúdo acontecendo aqui Normalmente não é como eu o configuraria , mas você pode ver aqui, acredito que a seção do corpo está em algum tipo de grade. Mas vamos pedir a Claude que conserte isso. Todo o layout é recuado à esquerda e à direita. A borda esquerda de cada seção não se alinha com a borda esquerda da janela de exibição e vice-versa à direita Ok, queremos os estados de Hova nos botões. Então, eu vou dizer que implemente estados Hova em todos os botões e links Então, sim, parece que o site não é muito interativo porque nada acontece quando passamos o mouse sobre botões e links E aqui, a lacuna entre os ícones no lado direito do cabeçalho é inconsistente A lacuna entre os ícones no lado direito do cabeçalho é inconsistente Não tenho certeza do que causou isso. E então esse cabeçalho em forma de pílula, cabeçalho em forma de pílula na página inicial, deve ser posicionado sobre Então eu conheço um pouco de CSS, vou dizer posicionamento fixo ou absoluto máximo de detalhes que você puder fornecer aqui Talvez eu não seja o máximo que posso fornecer, mas faça o possível Acho que faltam para o FOD os links aqui. Então, para o Instagram, vou colocar instagram.com porque essa não é uma marca real, mas não vai mostrar o ícone pela aparência das A menos que insira um link. Então, vou dizer instagram.com. Sim, e como você pode ver, isso cria o link facebook.com e depois o TikTok, que acredito ser apenas tiktok.com que acredito E então, quando eu coloco esses links , os ícones aparecem. Agora, para a seção de boletins informativos, não sei por que ela tem todo esse espaço lá. Deixe-me dar uma olhada nos designs do Figma ou em como ele deveria ser Ok, então eu vou dizer que há uma grande lacuna no rodapé entre o stay in the loop e a entrada do e-mail Tudo bem, o que vem a seguir? O logotipo está esticado no rodapé. O logotipo é esticado horizontalmente no rodapé. Ok, então essa é apenas a página inicial. Se eu for até a página do produto, você verá aqui, sinceramente, que nada mal Mas, novamente, as seções estão meio recuadas na coleção dos produtos relacionados . Vou apenas colocá-las, mas elas ficarão à esquerda Então, direi que, se houver três itens ou menos na seção de coleção em destaque, centralize os cartões de produtos. Ao trabalhar com dados dinâmicos, é bom ter condicionais aqui Só porque são três itens agora, não significa que serão três itens no futuro. Portanto, você não quer que ele quebre quando novos itens forem adicionados. E, como mencionei, eu queria o botão Quick Add. Então, se eu atualizar aqui, botão Quick Add nos cartões do produto deve ser exibido somente ao passar o mouse sobre o cartão do produto, e a largura do botão deve ser 100% 100%, o que significa ocupar 100% do espaço disponível Não podemos implementar avaliações sem um aplicativo de avaliações específico, então primeiro teríamos que inserir um aplicativo de avaliações. Agora vamos ver o que acontece se clicarmos no botão da conta. OK. Sim, isso parece funcionar. A pesquisa nos leva a uma nova página. O ideal é que a pesquisa abra um painel abaixo do cabeçalho. Portanto, clicar no ícone de pesquisa no cabeçalho deve abrir uma entrada de pesquisa diretamente abaixo do cabeçalho para capturar o termo de pesquisa. E sim, obviamente, na sua situação, o feedback pode ser diferente. Eu esperaria isso. Além disso, parece que a operação do ícone do carrinho e do ícone conta está oposta. Eu direi que a operação do ícone do carrinho e o ícone da conta está de trás para frente. Além disso, a posição também é de trás para frente. Além disso, clicar no ícone CRT deve sempre abrir a gaveta do carrinho, não navegar até a página do carrinho Então, sim, basta ler o tema completo. Obviamente, a quantidade de edições que precisaremos fazer será diferente a cada vez Deixe-me ir para a página do produto. Oh, sim, nós demos uma olhada aqui, não é? Sim. OK. E agora vamos dar uma olhada na página da coleção. A página da coleção está boa. E então temos nossa página de contato com o formulário de contato. Estou totalmente de acordo com isso e não temos nenhuma postagem no blog. A página padrão tem esta aparência. Novamente, estou muito feliz com isso. Então, deixe-me dar esse feedback por enquanto. Vou remover o 13º ponto e pressionar Enter Ok, isso levou um tempo considerável, tanto tempo que, após cerca de 15 minutos, decidi ir à academia e voltar mais tarde. Então, está concluído. Aqui está o resumo. Também compactei o bate-papo, algo que você faz quando conversa com agentes de IA para resumir o contexto de vez É por isso que você está vendo isso aqui, um bate-papo compactado Mas se voltarmos para cima e virmos o que ele escreveu aqui sem nem mesmo perguntarmos, todas as correções foram enviadas para o mesmo tema inédito Ele removeu todas as imagens da pasta de ativos, conforme eu pedi, e cobriu todas as coisas. Então, vamos voltar e verificar se ele realmente fez o que diz que está feito e resolveu o problema. Está bem? Assim, podemos voltar exatamente ao mesmo tema e, imediatamente, vemos que há um Assim, você pode simplesmente pegar o erro líquido e colá-lo diretamente no bate-papo, e geralmente ele sabe o que fazer. Enquanto estiver fazendo isso, você verá que, quando voltarmos à página inicial, você verá que temos o espaço reservado de imagem padrão SVG em todos os lugares onde uma imagem não foi definida Então, vamos voltar ao editor da loja virtual e configurar essas imagens novamente. Então, vou até a página inicial aqui e adicionarei nosso logotipo, que já deveria estar em nossa biblioteca desde a última vez que configuramos este site, e agora você pode ver que o logotipo que selecionamos está aqui Vamos ver o herói aqui mesmo, colocar a imagem do herói aqui. Certo? Então, em vez de fazer com as imagens sejam retiradas da pasta do tema, que as imagens sejam retiradas da pasta do tema, o que normalmente não é o que você faz, estamos nos certificando de que todas sejam arquivos dentro da loja Shopper Fi que estamos trazendo para o tema por meio das configurações do tema, ok? Pontos de venda para cada sinopse, vamos trazer o ícone relevante, que eu acredito que foram esses E vamos guardar isso e dar uma olhada rápida aqui. Corrigido e empurre o bug. Espero que isso não tenha sobrescrito nossos dados. Parece que não tem Deus. E você pode ver que o cabeçalho está sobrepondo o herói na página inicial do desktop. Isso é bom. Se eu clicar no ícone do carrinho aqui, parece que ele está nos levando para a seção da conta, e o ícone da conta está nos levando ao carrinho e, em seguida, temos essa pesquisa aqui. Está um pouco flutuando no meio do nada, então isso não é o ideal O botão agora tem um estado de foco, mas não é perfeito, Eva, e os botões de anúncios rápidos só são exibidos ao passar o mouse Isso é bom, mas eles não estão se estendendo para com. E neste momento, se você tiver conhecimento de desenvolvimento, talvez seja mais fácil editar o código sozinho ou inspecioná-lo e fornecer instruções mais detalhadas Não vou presumir nesta aula que você tenha conhecimento de como codificar ou do sistema de desenvolvimento de temas da Shopify Claro, se você quiser aprender isso, você pode acessar minhas aulas anteriores sobre esses assuntos. Mas aqui, vou continuar carregando as imagens. Eu acredito que foram Sarah M, Maya K e Ava L. Obviamente, essas são pessoas fictícias, então isso realmente não importa e Ava L. Obviamente, essas são pessoas fictícias, então isso realmente não importa. Clique em salvar nisso. E depois, para o rodapé, carregue o logotipo. E parece que perdemos os dados que estavam na seção de ícones sociais, então vamos repovoá-los E é com isso que se deve ter cuidado. É por isso que gosto de usar a integração com o Github, que é mais uma questão de desenvolvedor, mas a integração com o Github manterá tudo sincronizado e minimizará os riscos de perda de dados como Então, eu prefiro implantar meus temas usando o Github. Você pode ver que aquela lacuna que pedimos que fosse corrigida foi corrigida. E vamos agora ao que mais perguntamos em nossa lista? Então, se eu voltar ao início, em vez de ver o que diz que está feito, deixe-me ver o que pedimos que ele faça. OK. Então, sim, muitos registros estão aqui para vasculhar Oh, vamos lá. Podemos simplesmente ir até o topo para receber feedback. Então, sim, ele removeu todas as imagens do tema. Tinha esse problema com o recuo à esquerda e à direita. Parece que está completamente corrigido agora. Graças a Deus. Queríamos Hovstts em todos os botões e links Existem Hovstts, mas o estilo que ele inferiu não gosta muito, mas fez isso A lacuna entre os ícones no lado direito do cabeçalho é inconsistente Isso corrigiu isso. O cabeçalho em forma de pérola na página inicial deve ser posicionado sobre a seção Sim. Há uma grande lacuna no rodapé. Sim, nós consertamos isso. O logotipo é esticado horizontalmente no rodapé. Não é mais o caso. Se houver três itens ou menos na seção da coleção em destaque, envie para os cartões do produto. Ok, então podemos acessar a página de um produto agora mesmo, ver se foi feito isso. Então, precisamos realmente preencher as imagens novamente. Então, vou entrar no meu modelo de produto aqui, e esse produto realmente precisa ser atribuído ao modelo alternativo. Então, deixe-me voltar para aqui. Talvez eu tenha que publicar, na verdade, esse tema no slot principal para selecionar esse modelo. Mas como esta é uma loja de desenvolvimento, ela não está ativa, isso não será um problema. E então, para o conjunto completo do marcher, eu vou configurá-lo Vou ampliar aqui. Vou configurá-lo para usar o modelo do pacote, não o modelo padrão. Está bem? Agora, se quisermos, vamos voltar à página inicial voltar ao modelo de produto padrão Ele não deveria mais nos mostrar o produto do pacote porque está em um modelo diferente Está bem? Aqui, adicionaremos essas imagens novamente e também adicionaremos os produtos relacionados. Vou clicar em Salvar nisso. Lembre-se de que estávamos verificando se ele os alinha no meio. Não fez isso. Então, isso é uma coisa que ele não fez. Vou apenas corrigir os ícones aqui para os planos de venda. Clique em salvar nisso. Agora vou para o modelo alternativo do pacote. Olhando para a seção principal do produto , está funcionando muito bem. O que está incluído, só precisamos mudar isso com as imagens. Vou colocar a imagem da Macha premium na primeira imagem do batedor, acredito que estava no segundo item Sim. E então o terceiro item, que são todos blocos no editor da loja online, como suspeitamos, será a tigela. Aí está. E 100% desse conteúdo é editável e renderizável no Editor da loja virtual, que é o que esperaríamos Novamente, pontos de venda aqui, acredito que este é o último lugar em que ele aparece. Então, só mais um lugar para fazer isso. Ok, eu tenho esses de trás para frente. Clique em salvar e acesse nossa página de coleção. Portanto, temos apenas uma coleção padrão. Por aqui, vou incluir a imagem da paisagem. Então, acessando as imagens do nosso site Shopify aqui, fotos de um terceirizado de campos T, versão dois acho que as fotos de um terceirizado de campos T, versão dois, eram a que queríamos Clique em Concluído e podemos personalizar o título aqui para outra coisa. Se quisermos. Caso contrário, o padrão é título da coleção, como seria de esperar E então aqui temos nossa grade de coleta. Vou clicar em Salvar nisso. E o que mais? Temos nossa página padrão. Acho que não houve problemas com isso e com nossa página de contato, que na verdade não tivemos problemas com Eva. A menos que quiséssemos colocar algum conteúdo aqui, mas vou deixar isso para você. Está bem? Agora vou dar uma olhada em tudo isso na versão prévia móvel. Então, sim, não é 100% perfeito. Definitivamente, algumas coisas podemos melhorar, mas nada realmente quebrado que eu possa ver aqui. Se eu clicar na gaveta Nav, ela abrirá com sucesso. Agora, se eu acessar a página do produto, você verá que ele realmente não recebeu o pedido que especificamos corretamente. Eu acredito no design, tínhamos o título e o preço acima. Então, precisaríamos dar esse feedback a Claude também. Modelo de coleção. Sim, você pode ver aonde eu quero chegar com isso. Estou apenas verificando todas as páginas diferentes. E, ao receber feedback, você pode literalmente simplesmente inseri-lo de volta em Claude e pedir que ele o corrija Eu só vou corrigir os erros óbvios neste vídeo. Então, por exemplo, vou dizer um feedback adicional. Primeiro, seção de formulário de contato, como se chama? seção do Formulário de Contato deve ser empilhada no celular, em vez de ser flexível em uma fileira Então, vou colocar isso como um bug real. O que mais estava lá? O grande problema era que, se eu simplesmente sair dessa, essa, sem isso no meio, não é um grande bug. Não vou dar muita importância a isso. Mas há um grande bug em termos de por que ícone da conta aciona o carrinho e o ícone do carrinho está acionando Então, direi que o ícone do cabeçalho do carrinho está acionando o link da conta e o ícone das contas está acionando Deveria ser o oposto. Deixe-me verificar a funcionalidade de realmente adicionar ao carrinho. Então, se eu quisesse adicionar rapidamente essa tigela ao meu carrinho, a interação foi boa, mas ela não abriu a gaveta do carrinho Ah, e acabei de lembrar que isso não é realmente indicativo do carrinho aqui Na verdade, foi colocado no lugar errado. Mas, como você pode ver, temos pequena gaveta de carrinhos que atualiza. O único problema é que tivemos que atualizar para vê-la. Então eu vou escrever isso. Depois de adicionar ao CRT, a gaveta do carrinho deve ser atualizada e aberta automaticamente E o indicador no ícone também deve aparecer de forma síncrona Não tenho certeza de como soletrar exatamente de forma síncrona. Palavra difícil. Vou apenas digitá-lo no Google para corrigi-lo automaticamente. Então eu vou mandá-lo embora. Na verdade, vou verificar novamente a página do produto. Clique em como Adicionar carrinho funciona nisso. Sim. Novamente, parece que precisamos atualizar nossa página para ver o cartão atualizado, o que não é o ideal Então, vou mandar isso. Acredito que 0,3 seja tocante nas duas situações em que temos o carrinho de adição rápida e o cartão de anúncio na página do produto Vamos verificar se nossa galeria de produtos está funcionando. É, mas lentamente, então podemos definitivamente otimizar isso. Mas vou apenas executá-los, e o princípio principal que quero que você entenda disso é que provavelmente não sairá perfeito, e sua solução para torná-los perfeitos é continuar iterando com Claude sobre o que precisa ser corrigido continuar iterando com Claude sobre o que precisa ser Obviamente, como desenvolvedor no Shopify desde 2019, sei como escrever o código manualmente, mas até eu converso com Claude agora, em vez de programar Então, eu recomendo adotar essa abordagem. Quanto mais conhecimento técnico você tiver e as melhores descrições que você puder fornecer, obviamente melhorarão seus resultados. Mas faça o melhor que puder e, na maioria das vezes, ele deve entender do que você está falando. Não continue indo e voltando até que isso aconteça. Então, eu vou esperar agora, espero que não demore mais 20 minutos, e eu vou conversar com você quando terminar Ok, depois de mais quatro minutos, entendemos isso. Então, vá para o tema ao vivo. Está dizendo que Sans matre agora é o tema inédito ao vivo. Devemos levar essas mudanças para lá? Está me fazendo essa pergunta porque, obviamente, se fosse um site ativo, isso seria muito arriscado Vou me certificar de que ele não exclua nossos dados primeiro. Então, vou fazer outro, e vou dizer que sim, push to live, mas fiz algumas mudanças no editor da loja virtual que gostaria que você mantivesse. Não limpe meu trabalho nos arquivos JSON. Então, para aqueles que não conhecem todas essas informações, todos os valores no editor da loja virtual vão para esses arquivos JCN É por isso que estou dizendo para não apagar meu trabalho nos arquivos JCN Espero que ele siga essas instruções e seja capaz de mesclar do código com as alterações do JSON no site real Ok, então parece que está pronto. Vamos dar uma olhada no que dizia. Todos os três problemas foram corrigidos, verificados ao vivo e definidos com o único sinalizador, para que ele altere apenas os arquivos líquidos e SVG Portanto, nenhuma das edições JSON editadas pelo tema foi alterada. OK. Então, o principal era o ícone no cabeçalho. Ok, agora parece que é o ícone correto. É apenas a posição incorreta. Certo, mas pelo menos os ícones agora estão relacionados ao lugar certo. E agora, espero que, na verdade, eu os remova do carrinho, como você pode ver E então, se eu clicar em Adicionar ao carrinho, sim, o carrinho será atualizado automaticamente, assim como o número. Vamos verificar na página inicial se o Quick Add está fazendo a mesma coisa É, eu gostaria de ser um pouco mais uma animação quando a gaveta do carrinho entra e sai Mas está funcionando. E, como mencionei anteriormente, há também esta página Nossa história, que atualmente está vazia neste tema atual. Vou deixar isso em branco por enquanto. Se você acompanhou esta aula usando a mesma marca, Sans Macha, com todos os mesmos modelos, deixarei a página Nossa História para você como um projeto extra para continuar Adicione mais algumas molduras para desktop e celular na página Nossa História. E então você pode imitar o que foi criado aqui no tema Prestige para aquela página específica Todas as imagens na pasta do projeto com a cópia de tudo isso. Então, você pode tentar criar isso no Figma usando IA ou não e depois implementá-lo em uma loja da Shopify Mas em termos da construção final do nosso design personalizado, vou deixá-lo aqui. Obviamente, há mais trabalho a ser feito. Mas, novamente, é só ir e voltar com Claude para consertá-lo E, obviamente, como desenvolvedor do Shopify, posso ser bem detalhado e aprofundado com isso. Mas, em geral, você pode ver que criamos nosso próprio tema personalizado desde a fase de planejamento até um tema funcional em uma loja real da Shopify usando dados reais da loja aqui E o mais bonito disso é que esse é 100% nosso próprio tema. Ao contrário do tema anterior, o tema de prestígio, em que , se quiséssemos entrar no ar com esse tema, teríamos que realmente comprar o tema, que eu acho que custa de 300 a $400 Então, sim, embora tenhamos gasto vários tokens no Cloyd para planejar um site e criar um tema totalmente personalizado, esse tema agora é nosso, e economizamos dinheiro em qualquer outro desenvolvimento personalizado que precisemos obter, seja contratando um desenvolvedor ou pagando por um tema pronto para uso Então, é aqui que basicamente terminaremos a jornada desta aula. No último vídeo, encerraremos as coisas e darei alguns detalhes sobre seu projeto de classe. 10. Bônus: código do tema finalizado: Antes de concluirmos, eu só queria incluir um pequeno vídeo bônus aqui. Entre os vídeos, atualizei o tema e o limpei. Como você pode ver aqui, esse cabeçalho de pesquisa precisou de um pouco mais de trabalho, mas agora está bonito. Percebi que provavelmente não preciso pesquisar uma loja que tenha apenas quatro produtos, mas aí está. Novamente, todos esses dados estão sendo extraídos da loja real Então, os produtos e o menu aqui em cima e também o menu aqui embaixo. Mas se eu quisesse que esse tema correspondesse exatamente à vitrine, é claro, eu entraria e atualizaria os dados da loja Os menus, é claro, estão dentro da loja, não dentro do tema. E como não criamos uma página O Story, vou simplesmente excluí-la do menu principal e do menu de comida. Então, se eu voltasse aqui agora, você verá que isso mudará o nosso tema. Então, espero que você entenda agora que algumas das mudanças que você fará na sua loja Shopify estão no nível da loja Portanto, mudar coisas como menus, produtos, coleções e algumas está no nível do tema. E o que quero dizer com isso é que quando você está no seu tema, essas configurações diferentes aqui, tudo isso é reordenável, como é o caso de todos os temas do Shopify Portanto, o tema deve ser flexível o suficiente, teoricamente, para funcionar em qualquer loja com qualquer dado chegando, ok? E com isso em mente, o que eu fiz foi comprometer todo o meu trabalho este repositório do GitHub aqui, caso vocês queiram acessar o código final do tema de onde eu acabei Isso está disponível na minha conta do GitHub de Christopher Dodd, o endereço que você pode encontrar aqui se precisar do link Se você fosse criar esse tema como um tema que gostaria de vender na loja temática, por exemplo, que funcionasse em qualquer tema, você precisa testá-lo em lojas diferentes e ver como funciona. Neste vídeo, estávamos construindo especificamente para essa loja em particular, a loja de pó Sans Marcher Portanto, a escolha é sua de quão flexível você deseja tornar o tema. Eu trabalhava para uma empresa, por exemplo, que não tinha nenhum dado de seção Você entraria no editor da loja online e não haveria nenhuma seção . Seria apenas um código. E então, é claro, você também pode fazer isso, ou pode torná-lo altamente personalizável para que alguém possa usar esse tema sem escrever nenhum código e ainda poder personalizá-lo o quanto precisar Sim, eu só queria criar esse vídeo extra para dar acesso ao código final do tema que eu encontrei Isso definitivamente não é o fim. Você pode entrar aqui, ramificar esse código de tema e usar o código Claude ou qualquer agente de IA de sua preferência para, em seguida, iterar, aprimorá-lo e criá-lo de acordo com seus requisitos E essa é a melhor parte de todo esse processo. Estamos usando o mesmo processo de desenvolvimento padrão que é feito no mundo real. Estamos apenas usando a IA para ajudar a planejar e automatizar grande parte do trabalho básico Então, com isso dito, vejo você na conclusão. 11. Conclusão e projeto do curso: Isso conclui esta aula sobre IA automatizada do Shopify Web Design Para seu projeto de aula, eu encorajo você a criar o web design para sua loja Figma da Shopify usando as técnicas que abordamos nesta aula, traçando o plano para seus wireframes, usando o planejador de lojas e, em seguida, criando os modelos de alta fidelidade em seguida, criando Depois de concluir seu design, envie-o para a seção de projetos da turma para compartilhar seu trabalho com outros alunos ou para receber feedback meu. Se você gostou dessa aula, deixe uma avaliação positiva e confira algumas das minhas outras aulas aqui no skillshare.com, onde eu me aprofundo em conceitos como desenvolvimento web, Shopify e outras ferramentas modernas Obrigado, como sempre, por assistir, e nos vemos na próxima.