Criar marketplace no Gemini: o clone de e-commerce em 1 hora
Quem trabalha como freelancer de desenvolvimento web ou design já deve ter recebido aquele pedido clássico: “Quero um site igual ao Mercado Livre”. O custo de desenvolver um marketplace completo envolve bases de dados complexas, APIs de pagamento e meses de código front-end.
O custo de tentar fazer o mesmo com um prompt genérico numa inteligência artificial é a frustração de receber uma página estática sem vida, com botões falsos e funcionalidades que não passam de enfeites visuais.
Para provar a verdadeira capacidade do modelo Pro, desenhamos um desafio prático: criar o front-end de um marketplace completo (o Mercato) num único arquivo HTML, com limite de 1 hora e apenas 3 iterações. Copie os comandos exatos que usamos e veja como a IA estruturou categorias, um carrinho de compras funcional e a clássica “entrega FULL”, tudo sem um servidor real.
Gemini Pro é o LLM avançado do Google, projetado para raciocínio complexo, retenção de regras rígidas e programação estruturada de alto nível.
Neste desafio, usamos a sua capacidade para gerar HTML5, CSS3 e JavaScript puro integrado. Em vez de depender de bases de dados (MySQL/PHP), forçamos a IA a usar o localStorage do navegador para guardar os produtos, os favoritos e o carrinho de compras do usuário em tempo real.
Neste guia: entenda a arquitetura sem servidor, copie os 3 mega prompts usados no desafio, veja os prints da evolução e baixe o código fonte do marketplace.
Resposta curta:
É possível criar o front-end funcional de um marketplace (carrinho, pesquisas, filtros e avaliações) em 1 hora usando o Gemini. O segredo é exigir a preservação da lógica do localStorage a cada prompt e focar as iterações seguintes na experiência do usuário (UX) e em elementos de confiança, como selos de loja oficial e identificação de produtos novos/usados.
Como este guia foi montado: Submetemos o Gemini Pro a um teste rigoroso de desenvolvimento web. O código gerado foi testado no navegador a cada etapa. Os prompts documentados abaixo são as versões reais e sem cortes utilizadas durante a experiência para moldar o clone simulado.
⚡ TL;DR
- Tempo: 12 min (ou pule para os prompts)
- Nível: Intermediário / Avançado
- O que você vai copiar: 3 mega prompts de arquitetura front-end
- Resultado: Um protótipo visual de e-commerce (Mercato) pronto para portfólio
Índice
- As regras do desafio de e-commerce em 1 hora
- Anatomia do mega prompt sem servidor
- Os 3 prompts mestres e a evolução visual
- O resultado: Baixe o Mercato HTML
- Amanda aconselha: protótipos de alta fidelidade
- SOS: O meu carrinho de compras desaparece!
- FAQ
As regras do desafio de e-commerce em 1 hora
Regra 1: Arquivo único (demonstração front-end)
Um marketplace real precisa de servidores e ligações a APIs de pagamento. Como estamos criando uma simulação (protótipo de alta fidelidade), a regra foi: toda a interface, catálogo de produtos, carrinho e sistema de pesquisas deve funcionar a partir de um único arquivo .html independente, que qualquer pessoa possa abrir com um clique duplo.
Regra 2: Originalidade forçada (Mercato)
Pedir à IA para “fazer um Mercado Livre” resulta num bloqueio por direitos autorais e num código preguiçoso que importa logotipos externos quebrados. O prompt forçou a construção de uma marca própria — o “Mercato” —, obrigando a IA a desenhar uma hierarquia profissional do zero.
Regra 3: Proibido botões falsos (efeito placebo)
A exigência mais rígida do teste: se a interface mostrar um botão “Adicionar aos Favoritos” ou “Filtrar por Preço”, a IA tem de programar o JavaScript para que esse botão funcione de verdade na tela. Sem promessas falsas de “implementar depois”.
Anatomia do mega prompt sem servidor
| Elemento do prompt | O que faz | O que acontece por dentro | Impacto real | Erro se ignorado |
|---|---|---|---|---|
| Proibição de backend | Impede a IA de chamar servidores como Node ou PHP. | A IA usa variáveis Array nativas para criar um catálogo de produtos simulado. | A loja abre instantaneamente em qualquer navegador *offline*. | A loja tenta ligar a uma base de dados fantasma e exibe uma tela branca. |
| Regra do localStorage | Exige que compras fiquem na memória local do browser. | A IA escreve a lógica de JSON.stringify a cada clique no carrinho. | Se a página for atualizada (F5), os itens no carrinho não desaparecem. | Uma loja amnésica; atualizar a página apaga as compras e o login. |
| Especificação de UX | Pede selos de “Novo/Usado”, “Loja Oficial” e “FULL”. | A IA adiciona propriedades booleanas (true/false) aos objetos de produto. | O usuário visualiza *badges* de confiança familiares e pode filtrar por eles. | A loja fica genérica e sem filtros avançados, parecendo um blog amador. |
💡 O segredo dos especialistas: A IA consegue replicar a inteligência de negócios. Ao pedir um “sistema de recomendação simples” no prompt, a IA programa um código capaz de mostrar mouses e teclados sempre que o usuário clicar num notebook.
Os 3 prompts para construir o clone de e-commerce 📌
Abaixo estão os prompts estruturais exatos que utilizamos. Este não é um pedido simples; é o equivalente a um documento de requisitos para uma agência de software. Acompanhe os resultados visuais de cada iteração.
👾 Série dev — O projeto Mercato
📸 Prompt 01 — A fundação do marketplace
Este prompt massivo insere toda a lógica comercial, categorias, pesquisa e o painel do vendedor de uma só vez na mente da IA.
CRIE UM MARKETPLACE COMPLETO EM UM ÚNICO HTML Crie um marketplace completo, moderno e funcional, inspirado no conceito de grandes plataformas de comércio eletrônico, mas com identidade visual totalmente original. Nome do projeto: MERCATO. Slogan: COMPRE. VENDA. DESCUBRA. REGRA PRINCIPAL: Tudo deve estar dentro de um único arquivo mercato.html contendo HTML, CSS e JavaScript. NÃO criar vários arquivos, backend, banco de dados externo ou servidor. IDENTIDADE VISUAL: Criar uma identidade própria. NÃO copiar logo, layout ou cores exatas do Mercado Livre. O projeto deve parecer profissional, com foco em produtos, responsivo e limpo. SISTEMAS EXIGIDOS: 1. HEADER: Logo, busca gigante, favoritos, conta e carrinho. Mobile First (menu adaptado). 2. CATEGORIAS E BUSCA: Pesquisa em tempo real (mostra sugestões ao digitar). Categorias clicáveis filtrando os resultados. 3. CATÁLOGO: Pelo menos 24 produtos com nome, preço antigo, desconto, avaliação, vendedor e estoque. 4. AVALIAÇÕES E ENTREGA: Exibir estrelas (ex: 4.8) e "Frete grátis". 5. CARRINHO FUNCIONAL: Atualização de subtotal, + e - quantidades. 6. PÁGINA DO PRODUTO: Abrir detalhes ao clicar (via modal ou re-render), mostrando informações e botão de compra. 7. CHECKOUT (Simulado): Formulário de entrega e pagamento fictício (Pix, Cartão) terminando em tela de "Pedido Realizado". 8. MODO VENDEDOR: O usuário pode criar um anúncio preenchendo formulário e fazendo upload de imagem (usar FileReader local). O produto cadastrado deve aparecer no catálogo para compra! LOCALSTORAGE: Use localStorage para salvar carrinho, favoritos, pedidos e produtos criados. NÃO crie funcionalidades falsas. Entregue apenas o HTML completo.
O que aconteceu no teste 1: Foi impressionante! O sistema base nasceu perfeitamente. Tínhamos o painel do vendedor, um carrinho matemático funcional, categorias, e até pesquisas ativas. O problema: Visualmente faltava muito. Era um esqueleto. Quem trabalha com freelance sabe que os clientes querem a “sensação visual” de confiança, o que o nosso protótipo neutro ainda não possuía.
👉 Deslize para ver as telas base do 1º teste. Clique na imagem para ampliar com qualidade.
📸 Prompt 02 — A injeção de confiança (novo, usado, loja oficial)
Para atingir o padrão dos grandes e-commerces, ordenamos uma evolução visual focada em selos e hierarquia, sem destruir a base.
DESAFIO: TRANSFORME O MERCATO EM UM MARKETPLACE BRASILEIRO DE VERDADE
Você já criou o projeto MERCATO. PRESERVE TODA A FUNCIONALIDADE QUE JÁ ESTÁ FUNCIONANDO (carrinho, busca, localStorage, criação de produtos).
A missão agora é MUDAR A EXPERIÊNCIA VISUAL E A ESTRUTURA PARA ALGO MUITO MAIS PROFISSIONAL.
1. IDENTIDADE E CONFIANÇA: Crie uma paleta limpa. Destaque os preços brutalmente. Todo produto deve ter a tag condition ("new" ou "used"). Mostrar visualmente a tag NOVO ou USADO nos cards. Crie um filtro funcional de condição.
2. VENDEDOR E REPUTAÇÃO: Vendedores devem ter sellerRating e sellerSales (ex: +10 mil vendas). Crie um badge sofisticado "VENDEDOR CONFIÁVEL" e outro "LOJA OFICIAL". O usuário precisa bater o olho e saber quem vende.
3. HEADER E BUSCA PROFISSIONAL: Campo de busca muito grande central. Ao digitar, mostre histórico e sugestões em um dropdown visual bonito.
4. PÁGINA DO PRODUTO: Reorganize a área de compra. [Badge Novo] -> [Título] -> [Preço/Desconto] -> [Vendedor Confiável/Oficial] -> [Frete] -> [Botões de Compra].
5. PÁGINA DA LOJA: Crie uma página de loja do vendedor quando clicarem nele, com Capa, Badge Oficial e grid de produtos da loja.
Teste tudo. Entregue novamente O ARQUIVO HTML COMPLETO funcionando com a experiência evoluída.O que aconteceu no teste 2 (vitória parcial): O cliente (no caso, nós) já iria adorar esta experiência. Os selos de “Loja Oficial” e as condições “Novo/Usado” apareceram perfeitos. A loja ganhou corpo comercial! A perda: No meio de tantas métricas de reputação de vendedor (badges e estrelas), a IA apagou inadvertidamente o sistema de avaliação individual dos produtos, e esquecemos de pedir um footer clássico.
👉 Deslize para ver os selos “Loja Oficial” e a hierarquia melhorada. Clique para ampliar.
📸 Prompt 03 — A identidade amarela e o selo FULL
Esta foi a atualização cirúrgica. Consolidar as cores vibrantes, recuperar as avaliações e adicionar a famosa logística de entrega expressa.
MERCATO - CORREÇÃO FINAL DE UX E IDENTIDADE VISUAL NÃO RECONSTRUA O PROJETO. Preserve integralmente a busca, checkout, seller badges, localStorage e navegação. 1. RECUPERAR AVALIAÇÕES: O sistema de notas de produtos sumiu. Volte com "4,8 (1.284 avaliações)" nos cards. NÃO confunda Reputação do Vendedor com Avaliação do Produto. Crie a área de resenhas de compradores na página do produto. 2. ENTREGA FULL: Adicione fullDelivery: true/false. Crie o selo "FULL" (verde ou azul vibrante) para produtos de entrega expressa. Mostre no card, página do produto e resultados. Crie um filtro funcional para FULL. 3. A IDENTIDADE AMARELA: O tema principal agora é AMARELO moderno. Mude o header para amarelo. Ajuste os botões principais de compra, garantindo contraste (texto escuro). Mas NÃO deixe o fundo do site inteiro amarelo (mantenha cartões brancos e fundo cinza claro). 4. FOOTER: Crie um footer completo profissional (Sobre, Comprar, Vender, Ajuda, Conecte-se) e exiba um aviso discreto de que os pagamentos são simulados. Entregue o arquivo HTML completo e jogável com a identidade consolidada.
📊 O resultado final (identidade consolidada): Fantástico! O Mercato adquiriu a linguagem visual familiar que procurávamos. O fundo escuro sumiu, os cabeçalhos amarelos dominaram a tela, e as tags de logística “FULL” funcionam perfeitamente nos filtros. O sistema de avaliações de usuários voltou ao seu devido lugar. O resultado é um protótipo de alta fidelidade!
👉 Deslize para ver o visual amarelo clássico e a “entrega FULL”. Clique para ver em tela cheia.
O resultado: Baixe o Mercato HTML 🕹️
Apesar de ser uma simulação puramente visual e matemática (sem API de bancos reais ou ligações ativas com os Correios), o valor educativo deste código é estrondoso. O JavaScript escrito pela IA gere estados complexos, domina a criação de *arrays* para filtros, e reage de forma instantânea às ações do usuário em formato Mobile-First.
MERCATO: Protótipo de e-commerce
Explore a arquitetura completa construída pelo Gemini Pro. Analise como os filtros interagem com as grades, ou até mesmo modifique o código para o ligar a um sistema real (como o WooCommerce ou Shopify REST API).
👉 Amanda aconselha: protótipos de alta fidelidade
- Se pretende usar a IA para vender sites: Ferramentas geradas em HTML único como o Mercato não são e-commerces que o seu cliente pode usar imediatamente para receber dinheiro real! Servem para prototipagem de alta fidelidade ou design de UI/UX incrível. Para vendas reais, utilize o código visual como tema/template para integrá-lo ao WordPress ou plataformas sólidas.
- A importância do localStorage: Ao forçar a IA a usar a memória do navegador, provamos aos clientes que a aplicação não “quebra” ao trocar de tela. Se vender uma *landing page* interativa, peça à IA o uso do
localStorage; ele muda completamente a percepção de qualidade do código. - Sobre “amnésia” de código: Reparou no teste 2? A IA substituiu os selos de loja, mas apagou o sistema de avaliações individuais. A memória temporal dos modelos decai. Exija sempre um “Mantenha rigorosamente XYZ ativo” quando solicitar alterações estéticas avultadas.
🚨 SOS: O meu carrinho de compras desaparece ao atualizar a página
- Causa: Ao gerar atualizações visuais densas, a IA pode “esquecer-se” de chamar a função
saveToLocalStorage()sempre que uma alteração é registrada na *array* do carrinho em JavaScript, reduzindo-a a uma variável temporária. - Correção prática: Não peça um código novo. Diga apenas no chat: “A lógica do carrinho perdeu o vínculo com o localStorage. Reescreva APENAS a função de adicionar e remover do carrinho para que invoque a persistência local (JSON) automaticamente.”
- Resultado: Substitua aquele pequeno bloco de código no arquivo e o carrinho voltará a ser permanente para o usuário.
FAQ: dúvidas reais a serem respondidas 🔍
O código deste clone pode ser transformado numa loja real?
Pode, mas exige conhecimento intermediário. Os botões de pagamento e carregamento do catálogo terão de ser interligados via JavaScript a uma base de dados real ou infraestrutura segura através de APIs (ex.: Stripe ou Mercado Pago).
O Mercato é seguro de usar? Recebe os meus dados?
O arquivo em anexo é 100% estático e não comunica com nenhum servidor externo. Todos os dados fictícios que colocar (no *checkout* simulado ou pesquisas) morrem imediatamente quando limpa os dados do seu próprio browser.
Por que usamos a cor amarela num desafio de IA?
O amarelo vibrante e contrastante com blocos limpos tornou-se a “gramática visual” da compra rápida online na América Latina (como acontece com o Mercado Livre). Injetar isso no prompt foi um exercício deliberado de adaptação regional na geração de IA.
Esta interface é Mobile-First? Funciona no celular?
Totalmente. No primeiro prompt mestre, exigimos painéis colapsáveis e áreas de toque com polegares adaptáveis, o que significa que se abrir o HTML no seu celular, ele simulará uma *App* profissional moderna de imediato.
Conclusão: O poder subestimado dos protótipos em HTML 🙌
O teste do Mercato reforça uma realidade comercial tremenda: não é necessário escrever infraestruturas gigantescas apenas para provar um conceito a um cliente. A inteligência artificial como o Gemini Pro consegue levantar uma interface complexa, rica em pormenores, métricas, selos de qualidade e categorização num espaço de minutos.
Mais do que isso, a simulação de estados complexos de JavaScript prova que os limites do desenvolvimento web front-end estão cada vez mais ligados à qualidade arquitetônica das suas instruções (prompts), e não ao seu domínio da sintaxe profunda das linguagens.
Inspire-se para conceber ideias colossais com a IA. Valide visualmente as suas arquiteturas na tela e faça da IA generativa o seu ateliê particular de programação.
Ei, antes de ir: se este conteúdo ajudou, não pode perder o que separamos nestas outras categorias. É conhecimento de nível pago, entregue de graça aqui:
Se baixar o código e transformá-lo num negócio real de e-commerce, publique nos stories e marque o nosso instagram @mktamanda. Ficarei cheia de orgulho em compartilhar a sua jornada conosco! :))
ps: obgda por chegar até aqui, é importante para mim.
