Criei um Site INACREDITAVEL com o Antigravity e Argon - LOJA VIRTUAL - PASSO A PASSO PRÁTICO
Publicado no All The Gate ·
All The Gatedot-ecommercedot-online_storeE-commerceIA e tendênciasidioma-ptPortuguêsyt-A2KU_61KzW4
Vídeo em Português, publicado pelo canal Mesaque M. Academia Web Pro-X.
Sobre este conteúdo: O resumo, os principais pontos e os temas abaixo são gerados automaticamente a partir da transcrição do vídeo. Eles refletem o conteúdo, opiniões, afirmações e previsões apresentadas no vídeo e não representam posicionamento, validação ou verificação de fatos pelo All The Gate.
Resumo do vídeo
O vídeo apresenta a criação e o desenvolvimento completo de uma landing page com foco em e-commerce utilizando inteligência artificial, ferramentas de desenvolvimento e hospedagem. O autor demonstra o processo desde a busca por referências visuais até a geração de código com modelos avançados, correções de design e publicação automatizada via MCP na Hostinger.
Principais pontos
- O projeto inicial foi inspirado em referências visuais do Pinterest para estruturar uma apresentação de produtos em estilo de loja virtual.
- Utilização de ferramentas de IA, especificamente o modelo Argon e o ambiente Antigravity, para gerar a estrutura de código em HTML, JS e CSS a partir de prompts detalhados.
- Realização de deploy automatizado do site utilizando o protocolo MCP integrado à Hostinger, permitindo testes rápidos em produção.
- Ajustes iterativos no design do site para corrigir problemas visuais, como o contraste de textos, proporção de imagens, legibilidade sobre fundos claros e escuros, e melhorias na versão mobile.
- Análise do consumo de créditos de IA durante o processo de desenvolvimento e correções contínuas até atingir o resultado final desejado.
Temas
E-commerceDesenvolvimento WebInteligência ArtificialHospedagem de SitesDesign UI/UXMarketing DigitalFerramentas de Produtividade
Ferramentas, tecnologias e plataformas citadas
- Antigravity
- Modelo Argon
- Hostinger
- MCP (Model Context Protocol)
- HTML, CSS e JavaScript
Posts relacionados
- Mirakl Exec at Money2020 USA How Retailers Can Thrive in Agentic Commerce Era
- Online shopping website review l ऑनलाइन शॉपिंग l mayshop.website real or fake
- 구매대행 초보 필수 GPT 비서 하나로 올에잇 통제하기
- 8 Key Components of a Scalable Ecommerce Tech Stack | EcomDrive
Participe
O que você achou de criar uma loja virtual com IA, fazer o deploy pelo MCP na Hostinger e ajustar o design para a versão mobile? Conte nos comentários e compartilhe este post com quem quer montar o próprio site.
Transcrição do vídeo
Texto das legendas disponíveis; pode conter erros.
Dá uma olhadinha nesse site. É o que eu vou te ensinar a criar hoje. Um site que é praticamente uma loja virtual. Tem aqui as categorias com o menu que quando você rola tem esse glassforme, tá? A própria imagem do produto, ela é o background da Hero. Olha só, aqui nós temos uma categoria, cada um desse aqui é uma categoria com seu produto em destaque. Categoria com seu produto em destaque, categoria com seu produto em destaque. E aqui tem informações do produto, tem um vídeo do produto e tem comprar o produto que você pode lançar quant a quantidade que você quer e fazer o pedido, OK? E aqui nós temos as variações de imagens do produto em questão. Aqui tem o próximo produto. Olha só esse aqui. Que coisa mais maravilhosa. Tá com gloss aqui para não atrapalhar o texto, com todas as informações. E aqui é a quantidade dos produtos da categoria. E aqui que você desce para baixo, você vê aqui as informações da categoria. Viagem, aventura, urbano. Aqui nós temos também a lupa. Essa lupa é para descer, ó, para descer. Aqui nós temos a sacola, tá? Que seria o carrinho. E aqui nós temos o comprar. Por que que ele vem para cá? porque tá nesse produto. Então, o comprar é o comprar esse produto em questão. É muito intuitivo, parece mais um aplicativo. Eu gostei bastante dessa ideia. E olha, ele muda o tema conforme muda a cor da imagem. [risadas] Isso não é sensacional, isso é vibe coding, isso é inteligência artificial. E eu vou te ensinar a criar do zero esse site completamente utilizando antigravit, assim como também o GMN4 Argon. Vamos lá. Só um detalhe, ele é também mobile, OK? Ó, 100% mobile, tá bom? Eu tive uma excelente ideia para testar o GN 4 Argon No Gravity. Ele foi liberado. Agora você pode perceber aqui, ó, Jin 4 Argon em três níveis, low, médium e high. E ele vem com o limite separado do limite do flash 3.8, que é o que já tinha aqui. E o 3.1 eles removeram, tá? Eu vou testar e vou ver se eu consigo criar um site, subir ele pra hospedagem automaticamente pelo MCP da Hostger e ainda deixar ele público para qualquer uma pessoa ver no universo, tá? OK. A ideia é o quê? Tá vendo essa página aqui? Eu vim aqui no Pinterest, tá? Aqui no Pinterest pesquisei sobre land page e tal e tava aqui dando uma olhada e percebi essa aqui. E eu tive ideia, não sei se é a lógica do que a pessoa tinha feito aqui no print, ã, mas no pin, né? Mas a minha ideia é o seguinte, tá vendo? Toda essa página ela é uma dobra. E aqui embaixo nós temos as variações desse mesmo produto. É como se fosse uma apresentação de produto. Entretanto, eu quero um site assim, só que vai ter aqui um slider. Quando eu clicar pra frente, mostra o próximo produto. Pra frente, próximo produto e aqui para trás e volta. E aqui mostra as imagens desse produto. Porém, quando eu clicar é para mudar só a imagem de fundo. E esta imagem de fundo, ela já é o próprio eh background da primeira dobra toda. E lá em cima tem os links eh das categorias. Quando eu clico numa categoria, ele mostra o destaque da categoria, que é o primeiro produto. E aqui embaixo que não tá mostrando, na próxima dobra vai ter os cards dos produtos. Quando você clica no card do produto específico, ele vem para cá pra tela. Gostou dessa ideia? Então já já dá like aí, já se inscreve, porque aqui a gente traz conteúdo de relevância. E se você não me conhece, meu nome é Isaac. Eu trabalho com sites desde 2014. E a IA agora tá abrindo oportunidades que antes para nós, pessoas comuns como eu, era quase impossível. Vamos lá. Eu tô aqui com Jemy num novo chat, tá? E eu vou pedir para ele, tá? Eu tô vou utilizar aqui o próprio Argon também, porque eu quero uma coisa profissional. Vamos lá. Eu vou criar o prompt. para ele criar o prompt. Eu vou explicar tudo que eu quero e depois vamos ver o que ele vai fazer. O prompt pro IDE antigraft. Eu vou colar aqui a imagem, tá? E eu vou falar para ele, vou esperar carregar. Ã, Jamin, olha só, eu a minha ideia, eu vou levar P gragit, Pgraft vai criar esse site e vai conectar no MCP da Hoster e vai postar diretamente lá na minha hospedagem Hosterger, tá? Eu quero que você aqui um pronto perfeito para isso. Eu acho que eu excedi aqui o limite, tá? Vou colocar aqui a J Html em HTML, JS e CSS. Pronto. Aí crie pronto. Primeiro me responda se compreendeu perfeitamente. Então eu dou o sinal para avançar. Vou aguardar aqui e vamos esperar ele falar: "Compreendi perfeitamente cada detalhe e da lógica. Ah, para garantir que estamos 100% alinhados, ele colocou aqui: Stack deploy, código limpo HTML, CSS vanilha JS. Sim, clicou no card da segunda dobra, a página traz o scroll suave e de volta para o topo. Sim, eu vou colocar aqui o 3.1 Pro, ok, gente, você entendeu perfeitamente, tá? Exatamente isso. Eu quer os produtos mocado, tá? Categoria tem uns seis produtos, beleza? Pr gente conseguir uma rolagem ali, seis a sete produtos um vídeo, tá? Cada produto tem vídeos vídear mesmo, beleza? Ah, e quando comprar um pop deve ter a quantidade devção produto produto especfil ou WhatsApp. Aí vai ter o número do do loja, né? Onde vai pess compra recebimento no entrega. Então você explicar para mim dar uma aula aqui para testar o G4. Bom, vocês viram aí o que eu falei? Aí eu mandei, né, no final aqui crie o prom perfeito, ele vai criar e nós vamos levar PT gravity. Eu acho que vai ficar muito bom. O que que você acha desse dessa ideia? Deixa nos comentários agora, antes de você ver o resultado. O que que você acha que vai acontecer? se ele vai conseguir fazer, se não. Tem muita gente falando bem do Argon, tem muita gente falando mal. Eh, eu já testei algumas vezes para sites, ele tá muito bom. OK, tá fazendo. OK. Ã, vamos subir aqui. Eu não vou ler o prompt, tá? Tem que tá certo. Esse prompt vai est disponível para vocês aqui, ó. Vem aqui no meu blog Academia. O último site que eu criei tá aqui, ó. CD, tem a imagem, OK? O vídeo e aqui para você copiar e colar. Só você copiar. Vai est esse prompt também, beleza? E se tiver modificações, eu vou modificar, deixá-lo aqui já pronto. Agora vamos aqui para o antigravit. Eu vou abrir uma nova pasta shop aula. Eu inventei aqui agora. Select folder. Pronto. Aí ele já vai abrir aqui, né? E eu vou simplesmente escolher o argon. Primeira vez que tô utilizando o argon. Não testei hoje. Ó, eu vou botar aqui o argon. Beleza? E vou colar aqui o prompt. Bom, espero que dê certo. E vamos lá. Agora, enquanto ele faz aqui, eh, não sei se ele falou sobre MCP, mas aqui tá vendo, ó, Hostger MCP já tá aqui. Eh, eu coloquei aqui na pesquisa do YouTube, ó, Mesac MCP Hostger. Você faz da mesma forma. É um vídeo aqui de 11 minutos, mas o MCP mesmo é porque eu falo um monte de abobrinha aqui. 2, 3 minutos você instala esse MCP, tá OK? Para você não ficar perdido. Faça essa pesquisa que você me ajuda também a crescer meu canal, tá? Olha só, pessoal. Acabou de terminar. Vamos ver quanto que eu utilizei. 95% ainda do semanal, né? Só tem semanal esse argum limite diário não. Se quiser gastar tudo num dia só, você gasta. Mas aí tem que esperar 7 dias. Usei 5%. Agora tem que ver se funcionou, né? Ele colocou aqui o relatório, né? Ele deu aqui um feedback. É status 200. OK. Ou seja, você pode perce, você entendeu o que eu fiz aqui? Eu tive uma ideia, eu peguei uma referência, eu melhorei toda a ideia do site e pedi para apropriar criar um prompt perfeito para que eu pudesse utilizar um prompt profissional para que eu pudesse utilizar aqui no Antigravity DRE com o novo sistema Argon, né, que é o DMN4, para ele criar um site como se fosse uma loja, uma loja, pode dizer que é uma loja virtual. E nessa loja já tem os produtos, já tem todo o design, já tem todo o X, todo Y. E fiz o deploy daqui. Eu não fui lá no site, não sei nem como é que tá lá, ó. Ele criou o site para mim, ó, aqui, ó, e instalou já o sistema. Tá aqui, mas eu já posso ver aqui. Vamos ver. Não é possível não. Eu vou copiar aqui e vou colar aqui. [roncando] Olha o site. Nossa, não tem nada a ver com o assunto, né? Com o que eu pedi. Nossa, ficou horrível. Eu queria que fosse exatamente igual aquilo lá. Cadê o slide? Ah, tá aqui, ó. Bom, a ideia tá concretizada, mas eu não queria que fosse isso aqui, tipo um card aqui, não. Eu queria que fosse full a imagem, né, do produto. Ó, aqui tem outra produto, mas tá tipo desfocado, né? Ele pegou a ideia, mas falta alguns ajustes, né? Aqui é 4 e se, tá vendo, ó? São vários produtos, ó. Essa aqui é uma câmera pocket 4K. É porque tinha que ter a imagem, né, do produto. Então essas informações não pode tampar. A imagem fica no centro e as informações mais no canto. Assim como tá a ideia aqui. Olha o produto, ele tá 100% visível. Eu sei que a imagem foi montada, foi mais específica para essa hero e etc, mas cara dava para ele fazer melhor, viu? Tô falando de questão visual mesmo. Ficou bem ruim, ficou bem com cara de ar. E aqui, ó, e esse produto aí tem outra imagem desse produto. Aí tem outra imagem desse produto. Ficou ruim. Ficou ruim. Isso aqui tinha que ficar mais alto e menos largo, né? Aí tem aqui, ó. Viagem, estabilização de ficou ruim, pessoal. Eu tô falando do design. Já a ideia ficou ótima. Tem três categorias, ó. Essa categoria aí se desce aqui, ó, tem os produtos, né? Inclusive com slide, com cada produto, ó. Ficou muito bom, tá? A questão mesmo é do design da imagem. Ó, a imagem tá aqui. Eu não gostei desse bloco aqui, ó, destacado. Ele tinha que ser meio glassforme, ou seja, como se fosse um vidro, né, desfocado que mostre o fundo, porém não tanto, né? Aí assisto o vídeo, aparece um vídeo aqui e fala sobre o produto, ó. Aí a pessoa comprar este produto, aí abre um popup, quantidades. E aqui nós temos e pagamento na entrega, né? Dava para colocar que nem eu fiz no outro vídeo escolher cartão, Pix, dinheiro, troco e aí pagamento na entrega, pá, e já manda o pedido. Ol lá, gostaria de pedir cinco produtos, blá blá blá, o número do produto, aí o valor, pagamento na entrega, OK? Funciona. Eu não falei para ele qual era o número do WhatsApp, então ele colocou qualquer um, mas dá pra gente mexer aqui tranquilamente. Eu gosto do ideia por causa disso, ó. Você vem aqui, ó, com isso aqui eu copio. Ã, vai tá aqui no script, né? Olha aí, ó. Tá aqui, ó. Eu posso colocar o número que eu quiser aqui, tá bom? Então aqui eu posso editar o que eu quiser. Ele escreveu, ó, 1639 linhas mais 971 linhas. OK? Bom, eh, se eu pudesse dar uma nota assim de primeira, tá? De primeira eu daria uns seis, porque precisa melhorar muita coisa. Tá muito com cara de ar, tá muito linha, muita borda, muita, entendeu? Eu quero uma coisa mais clean mesmo. OK? Você clica aqui, ó, ver coleção. Aí mostra toda a coleção do produto. Mas você entende que a IA fez um trabalho magnífico, eu utilizei só 5%. Ela aqui, ó, já tá na hostigger. Se você vir aqui na hostigger, ó, já tá aqui, ó. Ele criou, tá vendo, ó? E ele já põe o preview. Isso aqui é na Hostger. Ele mudou um pouco aqui. E para você que quer a Host, eh, você vem aqui, ó. Eu vou voltar lá, tá bom? Calma aí. Hostr, uma hospedagem que é vai fazer exatamente o que eu te mostrei aqui. Beleza? E aproveita, tá na Black Friday, cara. Aproveita, compra agora, mesmo que você não faça agora, compra agora, OK? Aí você vem aqui, ele tá com esse ilimitado, tá no modo escuro, mas o seu pode estar no modo claro porque meu o meu computador utiliza só no modo escuro. Aí tem tudo aqui, ó. Inclusive você pode colocar site Word WordPress se quiser ou H ou PHP, HTML, como é o caso desse vídeo, tá bom? Aí eu vou deixar na descrição o link mais o cupom. Aí você clica no link e coloca esse cupom. Por que que você tem que clicar no link? Por causa disso aqui, ó. Lá em cima tem que tá a FF 2369 e a campanha tem que tá 99 porque aí eu ganho comissão, tá? OK. E aí você instala MCP como eu te ensinei e a gente vai ter esse site aqui. Bom, ah, que que eu podia falar para ele? Falar que ficou ruim, ficou muito com cara de a e que eu queria muito que ele se adaptasse à imagem. Eu fiz uma borrice aqui, assim como eu fiz no último vídeo. Eu tô colecionando burrices, tá? É claro que eu tinha que colar aqui também a referência. Eu vou copiar isso aqui e vou mudar mandar para ele. Eu não tenho áudio mais aqui, gente. Ah, eles tiraram a Deixa eu mandar aqui o Jam normal. Não posso falar com áudio, mais eles tiraram aqui. Eu podia falar, gente Deus. Tá, vamos lá. Para não tomar o tempo de vocês, eu digitei aqui e vou ler. Ó, ficou boa e respeitou a ideia, mas o design ficou bem ruim com cara de a que ficou, viu? Veja o print original que gerou a ideia. Deve ser clean com design claro. Eu vou acrescentar aqui, ó. Nada de card tampando parte da imagem de fundo da Hero, que é a imagem do produto e precisa ser vista com clareza. Deixe glasforme ao invés de borda e card opaco. OK? E eu vou mandar para ele, só que eu vou botar no no argumon. Eu vou botar para moer no argon. Ã, porque o teste é do argon, né? Só que eu vou deixar aqui no high que eu preciso ser rápido. Ah, mandei ele fazer o deploy quando terminar. Vou esperar e agorinha eu volto. Eu vou só aceitar isso aqui, ó, para vocês ver os novos alterações. Novas alterações. E terminou, pessoal. O design foi totalmente reconstruído, segundo fielmente a referência enviada por você. E o novo de Prime já foi publicado pelo MCP da Hortg. Cara, a MCP, ah, a Hortg, a IA e o Antigrevit junto. Jesus, gente. Ó, vou ser sincero com vocês. Para vocês não tá esse tempo aqui, ó. Presta atenção. 26 minutos 39. Para vocês vai est uns 15 ou 20, no máximo, que eu corto o tempo que eu fico parado e às vezes eu falo umas besteira, tá bom? Ou seja, 20 minutos eu criei um site, eu editei um site de loja, é lógico que não tá sistema de gatway. E eu fiz, editei e subi pra hospedagem. E vamos ver, tá? Eu não vou clicar aqui porque se eu clicar aqui, ele vai atualizar a página lá. Eu quero que vocês vejam. Vou copiar, tá? Vou copiar aqui mesmo, tá? Colei e vamos ver. Eu vou pedir uma mudança. Eu sei que o vídeo vai ficar grande, mas eu vou pedir. Olha só, quase, mas ainda ficou com cara de a e com modo escuro. Quero modo claro somente. Por qu? Não tá o modo escuro. Eu quero modo claro. Quero modo escuro. Não, ficou bem bem feio. Bem feio. Porque sinceramente foi pequena a mudança, tá? Ficou com glass, ficou. Mas poxa, ficou bem bem ruim mesmo. Olha só, se você perceber o mudo de uma pra outra, nada de mudança, nada. Eu acho que ele não fez o deploy. Ó, na verdade, não percebi mudança. Faça o build e deploy na rost para atualizar. Atualiz. Ok. Eh, ele fala que status OK, deployate, mas não foi não, sinceramente. Não sei o que ele mudou aqui, mas não deu certo. Vou mandar e agorinha eu volto. Bom, terminou aqui monte de vermelho aqui, que é quando ele exclui verde é o que ele adiciona, tá? Aqui as linhas, tá? Vamos ver qual foi a desculpa dele, né? O motivo de você não ter visto, blá blá blá blá blá blá, foi o cash do navegador. Hum. Para resolver isso aí, ele colocou de novo aqui, ó, V3. Colocou esse interrogação V3, que é uma nova versão, tá? Eh, mas ele mexeu um monte de coisa aqui. Beleza, vamos lá. Lembrando que enquanto tava no processo, eu atualizei e ó, uma bosta que ficou. Vamos ver, né? Ó. Aham. Já tá assim. Muito bom. Agora ele ficou claro demais. Não dá para ler essa bodega aqui. [risadas] Mas ficou 10. Oh, agora sim, garoto. Viagem comprar agora. Assista o vídeo. Show de bola. Aqui tem os itens, né? do que cada, tipo os as características, né? Aqui é ultra leve. Você pode clicar, ó, padrão gabina é o próximo, tá? Olha só, ele colocou down aqui, ó. Três de seis aqui é o quê, ó? Ah, os produtos 1 2 3 4 5 6 a quantidade. Preferia a horizontal, tá? Aqui o scroll, OK? Aqui, ó, as imagens do produto. Olha só, é lógico que para isso aqui funcionar perfeitamente, as imagens do produto teriam que ter sentido no você na hora de criar as imagens, seja por Iá, ou seja fotografia, você tem que pensar o seguinte: "Poxa, aqui vai ter texto, aqui também, então tem que concentrar o produto aqui na parte da direita, tá? Então a gente pode fazer eh esse esse tipo de de ideia, OK? Vamos ver o próximo produto aqui, ó. Próximo. Ultra leve, 2,4 kg. Ó, padrão gabine. Ah, tá. Aqui são os produtos, né? Não ficou muito claro isso aqui, tá? Ó, fone acúrtico. Ah, câmera compacta. E aqui tem as variações ou imagens da câmera. É lógico que são imagens nada a ver, mas é só para você entender. Aqui já tem um produto no carrinho, câmera, blá blá blá, quantidade. Aqui o preço, pagamento via entrega e enviar o produto. E aí, vamos ver se tá no mobo. Eu tenho uma raiva quando ele faz isso e esquece do mobo, mas não, não esqueceu, não. Esqueceu. Ó lá em cima, ó, urbano. E aqui tinha alguma coisa na frente, infelizmente. É mesmo você dizendo para ele cuide do mobo olha gente, ficou muito bom. Fala sério, ficou muito bom mesmo, ó. E com os produtos aqui, mas a parte aqui do menu não ficou. Segue a mesma proposta. Vem aqui e fala: "Ó, Mobo ficou ruim. Refaça esse trem, tá vazando. Refaça o deploy, tá? Deixe um glassform leve nas informações do produto, mas sem bordas, sem card, só uma espécie de vidro transparente para dar mais ênfase ao texto. E vamos lá. Ah, tem um detalhe aqui que eu queria que ele mudasse também. Eu não gostei. Isso aqui, ó, padrão cabine nac 50 L expansivo, tá? Eu prefiro que isso aqui ficou bom, mas não ficou usável, né? Sei lá. Ficou legal. Olha aí. Ficou legal. Aí aqui, ó, quando a imagem é escura, OK, mas quando a imagem é clara, fica muito ruim. Por exemplo, aqui no início, né? Eh, eu vou tirar esse aqui, ó. Tá vendo, ó? Eu vou mostrar para ele aqui que dependendo da imagem, ó, fica muito ruim a visualização, né? Eu vou fazer o seguinte, eu vou fazer assim, ó, para ele entender do que eu tô falando. Pronto. Vou mandar, né? Quando o fundo, quando a imagem é clara, eu fica ruim. Vou mandar e agorinha eu volto. Bom, fez aqui a mudança. Vamos ver o resultado. Ele colocou duas linhas aqui no index e várias aqui. Ah, falou um monte de coisa aqui, blá blá blá. Bom, vamos lá. Eu vou copiar esse V4 aqui porque toda vez ele cria um novo para eliminar o cash, tá? Cash do navegador. Vou colar V4. Olha, ficou bom. Agora já tá bem mais nítido. Olha só como é que tava. Olha como é que tá. Tá como estava? Como está? É, ele mudou um pouco aqui, ó. Tá? Fica um pouco um glass forme mais forte, mas é exatamente o que eu pedi, né? Porque eu queria que realmente tivesse essa parte aqui. Como ele colocou aqui, ele perdeu um pouco de espaço, por isso ficou um pouco mais alto, tá? Para não impedir aqui a imagem de ser vista. Quando tá assim, OK. Quando tá assim, OK também. Só que percebe que ele colocou também uma borda no texto. Olha só. Eu vou pedir para ele tirar esse glass e deixar assim. fica muito melhor. Entretanto, sem esse e esse bloco, somente a borda do texto, tá? Isso aqui é muito fácil, é só você inspecionar aqui, você pode remover aqui mesmo, tá? Pronto, aqui está ela. E aí é só pegar o background aqui, ó. Tiver um background, cadê? Aqui no befor, tá? Você tira aqui, ó, o background, puf, tira o outro aqui, ó. Pronto, ele volta aqui. Era ah, ficou melhor, tá? Olha aqui, ó, como era, como ficou agora, tá? Só não tem aqui o, eu acabei de tirar manualmente porque eu gostei dessa borda aqui no texto já deu o contraste que nós queríamos, tá? Que eu queria, ó. Já deu, tá? Aqui tá um pouco mais claro, aqui tá um pouco mais escuro, mas isso é porque ele colocou lá de cima para baixo meio que um um gradiente, ó. Tá? Pr deixar mais visível aqui a questão do do topo. Tá vendo lá, ó? Muito bom, hein? Olha só que show de bola. Ah, ficou perfeito. Aqui tem o carrinho, né? O suposto carrinho aqui é comprar, ele vai pro carrinho e e joga o pedido. Vamos ver se ele consertou aqui a questão do mobile. Ó, vou atualizar também, só que agora, né, como eu atualizei, voltou aqui a o fundo, mas vou tirar isso manualmente. Olha só que show de bola. Aventura urbano aqui travel comprar. Muito bom. Ficou 100% mobo, né? E aqui a pessoa pode eh passando pro lado, ó. Eu só acho que essa setinha aqui não ficou legal. Devia tá aqui do lado, tá? Pode ser até aqui embaixo, mas uma setinha para um lado pro outro fica mais intuitivo, ok? E aqui, olha só, no mob, imagina você tá com site, a pessoa entra e já tem um destaque. Aí aqui tem as categorias, tá? Categoria urbano. Aí a pessoa vem aqui, tem esse produto, tá? E aí o que acontece? A pessoa vê as imagens do produto, ó. Muito boa. Ah, mas o glass não tá tampando. É aquilo que eu falei, tá? Tira aqui o glass form desse card, tá? Porque realmente assim ficou melhor mesmo. Eh, essa tem que pensar na imagem, né? A imagem ela realmente ela tem que fazer jus. Olha isso aqui. Perfeito. A imagem centralizada, tem todas as informações, tá tudo bem visto, tá? Já essa imagem aqui não tá. Então depende mais da imagem. Pensar no projeto como um todo. Então agora eu dou de 10, tá? Só não dou 10 ainda porque parece que tá faltando alguma coisa, principalmente essa parte aqui. Eu sei que ele copiou, tá? Copiou daqui, ó. Ó, ele copiou, mas hã eu gosto do jeito que tava, né? Aqui você passa pro próximo, aqui você passa pro próximo. Muito show de bola. Beleza. Só para ficar completo, pessoal, eu tô falando alto porque o microfone tá com algum problema. Olha só, para não ficar faltando, porque vocês viram no início que tá um site e agora que eu terminei, tá outro, né? Eu mandei mais dois promptes. Eu capturei aqui, ó, que a imagem tá quadrada. Aí quando ela estica pro ID screen, ou seja, tipo 16.9, nove. Ã, ela estica demais e fica ruim. E aqui também eu mandei dizendo que eu queria modificar isso aqui, tá? Porque tem a informação aqui, mas ninguém sabe que é para clicar, alguma coisa assim. Pedi para colocar um texto. Aí eu falei para ele, olha só, acho que o problema são as imagens que estão desproporcionais. Daí quando o hero fica ficam tipo com muito zoom, tal, foi o que eu falei, tá? Que tal mudar imagem para imagens screen? Ele escolheu outras imagens. É claro que você vai criar um projeto e em produção, você vai ter as imagens, então é só mandar as imagens para ele, beleza? também deixa a navegação mais evidente, talvez um texto tipo próximo, alguma coisa assim para ficar mais bonito, porque ficou muito confuso, tá? E cada produto deve ter imagens correspondentes, não imagens aleatórias. Aí ele fez paá pa pá, me entregou. Entretanto, né, ainda ficou com um problema. Aí eu falei o glass for do fundo informações de produto, isso daqui tá, aparece depois do texto de forma abrupta, colocam a sua avisação. Outra coisa, né? Ao invés do texto próximo, deixe só a seta, que aqui tificado próximo, não quero só a setinha. E aí ela ajustou, pá, pá, pá, pá. E pronto, ficou desse jeito que você tá vendo aqui agora. É uma deluxe viagem, tá? Eu selecionei aqui, ó, para mostrar todos os detalhes. Eu não quero ninguém encher no saco, hein. Ó, Lux viagens aqui, ó, na pesquisa. Tá? Aí ele achou todas essas eh sentenças. Aí eu mudei, por exemplo, para looks eh travel travels. Vou mudar agora para você ver, ó. Muda tudo. Cuidado que ele vai mudar o código também, ok? Aí agora aqui, ó, se eu dar um control ah shift, olha só, ele mudou pá. Travels, looks travel. Tá assim que você muda o nome ali, tranquilo. Ok. Aí ele deixou isso aqui melhor, tá? Ficou com a setinha, tem um texto aqui, ficou bem melhor. E aqui ficou, ó, a navegação melhorada. E aqui para baixo tá do jeito que eu queria. E aqui o glassform não ficou tão agressivo, beleza? Ficou muito bom mesmo, tá? OK. Bom, garotada, e aí, que vocês acharam dessa ideia? Foi uma ideia muito boa. Eu gostei bastante. Gostei da execução. O Argon ele, você viu quando eu mostrei tinha 5%, né? Deixa eu ver aqui. Agora tá 82%, ou seja, usei 18% do Argon para fazer tudo isso. Vamos supor que o cara tivesse me pagado aí sei lá, R$ 2.000, R$ 3.000 para fazer esse site. É lógico que não tá perfeito ainda. Precisaria de mudança. Mesmo que você gastasse da semana inteira, valia a pena. você entregaria um projeto que você eh eu no caso eu pago R$ 96 por mês pro Google para utilizar esse argo uma na semana, esse esse essa quantidade, tá? Então vale muito a pena. Dá para você criar vários sites aí no mês. Vamos supor que você crie quatro sites no mês. A 2.000 dá 8.000, né? E aí a questão mais aqui agora é a venda, é a divulgação e a parte e do marketing, tá bom? Mas a criação tá aí para você, tá? Passo a passo, muito simples. E os prompts estão todos disponíveis, assim como o link também da Host. com o cupom mesacota para você ter um desconto. Que Deus abençoe sua vida, sua família, todos seus planos. Te espero na próxima.
Assistir ao vídeo original no YouTube
Assuntos: E-commerce, IA e tendências. Publicado no YouTube em 2026-10-28.
Seleção automática por assunto e idioma. O vídeo pertence ao canal de origem.
