Wesley Pereira · material do vídeo

Os 2 prompts para criar seu site de afiliado do Mercado Livre com IA

Os mesmos prompts que eu uso no vídeo: o primeiro cria a imagem de referência no ChatGPT, o segundo faz o Claude Code montar o site de achadinhos completo, com os seus links de afiliado.

Vai colocar o site no ar? Use a hospedagem que eu uso.

HostGator, plano M (o que eu recomendo no vídeo), pelo meu link.

Ver a HostGator →
  1. Gere a imagem de referência. Copie o prompt 1, troque os campos [INSIRA AQUI…] pelo nome e pelas cores do seu site e cole no ChatGPT (pode ser o gratuito).
  2. Crie a pasta do projeto. Crie uma pasta no Desktop, salve a imagem dentro dela e, no app do Claude, escolha essa pasta na aba Code.
  3. Cole o prompt 2 no Claude Code. Deixe uma aba do Chrome aberta e logada na sua conta de afiliado do Mercado Livre, com a extensão Claude in Chrome instalada.
  4. Suba o .zip na HostGator. No cPanel, abra o Gerenciador de Arquivos, carregue o zip na pasta do seu domínio e extraia.

Prompt 1 · Imagem de referência

Para colar no ChatGPT

Troque os dois campos em [colchetes] antes de enviar.

Crie uma IMAGEM de referência visual para a página inicial de um site de achadinhos, ofertas e produtos mais vendidos do Mercado Livre.

Quero um design extremamente profissional, moderno, bonito e organizado, semelhante ao de grandes plataformas de comércio eletrônico.

PERSONALIZAÇÃO DO SITE
- Nome do site: [INSIRA AQUI O NOME DESEJADO]
- Cores principais: [INSIRA AQUI AS CORES QUE DESEJA UTILIZAR]
- Estilo visual: moderno, profissional, elegante e intuitivo.
- Público-alvo: pessoas interessadas em encontrar produtos populares, ofertas e boas oportunidades de compra.

ELEMENTOS QUE DEVEM APARECER NA IMAGEM
1. Cabeçalho: logotipo com o nome do site, barra de pesquisa, menu de categorias, ofertas e favoritos.
2. Banner principal: grande, moderno e impactante, com fotografias realistas de produtos populares, como smartphones, fones de ouvido, notebooks, air fryers e smartwatches. Inclua uma chamada comercial atraente e um botão de destaque.
3. Categorias: uma seção com ícones representando tecnologia, eletrônicos, casa, cozinha, ferramentas, beleza, acessórios automotivos, games e outras categorias relevantes.
4. Ofertas do Dia: cards de produtos com fotografias realistas, nomes, preços ilustrativos, descontos e botões de compra.
5. Mais Vendidos: uma seção apresentando um ranking visual dos produtos mais populares.
6. Filtros de produtos: opções para filtrar por categoria, faixa de preço, avaliações e outras características.
7. Rodapé: informações institucionais, navegação e elementos que transmitam credibilidade.

DIRETRIZES DE DESIGN
- Aparência de um e-commerce premium, com interface limpa e moderna.
- Tipografia profissional e fácil de ler.
- Cards com cantos arredondados e sombras suaves.
- Espaçamento equilibrado entre os elementos.
- Fotografias realistas e bem iluminadas dos produtos.
- Hierarquia visual clara, destacando as principais ofertas.
- Botões chamativos e visualmente consistentes.
- Layout organizado, intuitivo e com excelente experiência visual.
- Identidade própria, sem copiar logotipos ou elementos exclusivos de outras empresas.

FORMATO DA IMAGEM
Gere uma imagem horizontal, em alta resolução, mostrando a página inicial completa na versão desktop.
A imagem deve parecer uma captura de tela real de um site profissional já desenvolvido, com todos os elementos organizados e visualmente coerentes.

IMPORTANTE:
Não crie códigos, arquivos HTML, CSS ou JavaScript.
Não desenvolva o site.
Gere apenas a imagem.

Prompt 2 · O site completo

Para colar no Claude Code, com a pasta do projeto escolhida

Dica do vídeo: use o Opus com esforço médio. Você pode pedir ao Claude para adaptar o prompt ao seu nicho (só beleza, só ferramentas…).

Quero que você crie um site vitrine de afiliados do Mercado Livre, completo e pronto pra vender. Siga tudo abaixo com atenção.

## REFERÊNCIA VISUAL
Vou anexar uma imagem de referência do layout que eu quero (site "Garimpei Ofertas", visual amarelo e preto). Siga essa referência: cabeçalho com logo, busca e menu; banner principal; botões de categoria com ícones; filtros na lateral; seções de produtos em cards; rodapé com selos de confiança.

## DE ONDE VÊM OS PRODUTOS
Deixei uma aba do Google Chrome aberta, logada na minha conta de afiliado do Mercado Livre. Use o Claude in Chrome.
- Fonte dos produtos: https://www.mercadolivre.com.br/mais-vendidos
- Separe os produtos POR CATEGORIA, exatamente como o próprio Mercado Livre organiza nessa página. Não invente categorias.
- Antes de começar a gerar links, me mostre a lista de categorias encontradas e quantos produtos tem em cada uma, e me pergunte quantos produtos por categoria eu quero.

## LINKS DE AFILIADO (OBRIGATÓRIO)
- Gere o link de afiliado UM POR UM: abra cada anúncio, use a barra de afiliados do Mercado Livre que aparece no topo da página e gere o link com a minha conta.
- Nunca use o link comum do produto e nunca invente ou monte um link manualmente. Todo botão do site tem que levar ao anúncio pelo MEU link de afiliado.
- Teste cada link depois de gerar: ele tem que abrir o produto certo.
- Se aparecer captcha, verificação ou pedido de login, PARE e me avise. Não tente contornar.

## DADOS DE CADA PRODUTO
Para cada produto, colete direto do anúncio:
- Nome do produto (pode encurtar se for muito longo, sem mudar o sentido)
- Imagem: use a FOTO OFICIAL do anúncio do Mercado Livre (o endereço da imagem do próprio site do ML). Não gere nem substitua imagens.
- Preço no momento da coleta
- Categoria
- Posição no ranking de mais vendidos
- Link de afiliado

Guarde todos os produtos num arquivo separado (products.json), fora do HTML, pra eu conseguir adicionar, remover ou editar produtos depois sem mexer no código.

## REGRAS DE HONESTIDADE (IMPORTANTE)
- Preço: mostre o preço com a data da consulta ("Preço consultado em DD/MM") e o botão "Ver preço atual no Mercado Livre", porque o preço muda.
- Não crie desconto, avaliação, estrelas ou contagem que não esteja no anúncio no momento da coleta.
- Sem cronômetro falso ou urgência inventada. Use "Atualizado em DD/MM".
- A seção de destaque pode se chamar "Mais vendidos no Mercado Livre", porque é a fonte real. Cite a fonte.
- No rodapé, inclua: "Este site contém links de afiliado. Podemos receber comissão por compras feitas pelos links, sem custo extra pra você. As compras são feitas diretamente no Mercado Livre."

## COMPORTAMENTO DO SITE
- Todo clique em produto leva ao anúncio no Mercado Livre pelo link de afiliado, abrindo em nova aba.
- Links com rel="sponsored nofollow noopener".
- Botão do card: "Ver no Mercado Livre".
- O site não tem carrinho, login nem pagamento. A compra acontece no Mercado Livre.

## BANNER
Deixe a área do banner principal pronta, com o texto da referência, mas com a imagem EM ABERTO: um espaço marcado (ex.: assets/banner.jpg) onde eu vou colocar a arte depois. Me diga o tamanho ideal da imagem pra desktop e pra celular.

## RESPONSIVO
O site tem que funcionar perfeitamente no celular e no desktop:
- No celular: menu em gaveta, categorias em rolagem horizontal, filtros num botão "Filtrar" que abre um painel, cards em 2 colunas.
- No desktop: layout como na referência.
- Teste nas duas larguras antes de entregar.

## RECURSOS PRA VENDER MAIS
- Busca que funciona de verdade, filtrando os produtos enquanto digita
- Filtro por categoria e por faixa de preço
- Favoritos salvos no navegador do visitante (coração no card)
- Botão de compartilhar produto no WhatsApp
- Botão flutuante "Voltar ao topo" no celular
- Carregamento rápido: imagens com lazy loading, sem bibliotecas pesadas
- SEO: título, descrição, Open Graph (pra ficar bonito quando compartilhado no WhatsApp), favicon e textos alternativos nas imagens
- Espaço preparado pra código do Google Analytics (comentado, pra eu colar meu ID)
- Página/seção simples de "Sobre" e "Política de privacidade"

## ENTREGA
- Site estático: index.html, pasta assets/ (CSS, JS, ícones) e products.json
- Me entregue tudo num arquivo .zip pronto pra subir na HostGator (pasta public_html)
- Junto, um README curto explicando:
  1. Como subir na HostGator
  2. Como trocar a imagem do banner
  3. Como adicionar, remover ou editar um produto no products.json
- Antes de entregar, confira: todos os links de afiliado funcionando, todas as imagens carregando, busca e filtros funcionando no celular e no desktop.
Site pronto? Coloque no ar na HostGator.

É a hospedagem onde está o site do vídeo. Link na descrição e aqui:

Contratar a hospedagem →

Links citados no vídeo