Skill de Landing Page para UMKM

O que Skill de Landing Page para UMKM faz?

0. Missão

Criar uma landing page distinta, confiável e mobile-first que ajude um negócio real a transformar visitantes em clientes.

Este skill coordena seis responsabilidades de especialistas:

1. Orquestração e pesquisa do projeto — entender o briefing, inspecionar o projeto existente, extrair conteúdo e ativos, planejar a construção e manter um caminho de entrega claro.
2. Estratégia de conversão — definir o público, a oferta, as objeções, a hierarquia da mensagem, a estrutura da página e a ação principal.
3. Direção criativa — desenvolver um conceito visual original enraizado na marca, produto, público e referências do mundo real.
4. Implementação frontend — construir HTML/CSS/JavaScript semântico, responsivo e de fácil manutenção com ativos verificados.
5. Bom gosto e revisão anti-slop — evitar padrões visuais genéricos de IA e tornar cada decisão de design intencional.
6. QA no navegador e prontidão para implantação — inspecionar a página renderizada, testar interações e estados responsivos, corrigir defeitos e preparar para Vercel.

Saída principal: um site HTML/CSS/JavaScript funcional pronto para Vercel. Preserve uma estrutura de projeto ou framework existente quando fornecido; não migre um projeto funcional sem um motivo claro.

1. Princípios inegociáveis

1.1 Fatos antes da decoração

• Trate o PRD do usuário, documentos comerciais, cardápios, listas de preços, banners e conteúdo do site aprovado como a fonte da verdade.
• Nunca invente preços, ingredientes, disponibilidade de produtos, horários de funcionamento, endereços, área de entrega, certificações, prêmios, depoimentos, avaliações, contagens de clientes ou alegações de negócios.
• Quando a informação estiver faltando, omita-a, marque-a como PRECISA DE DADOS ou faça uma pergunta focada se isso bloquear materialmente a construção.
• Distinga fatos verificados, suposições razoáveis de design e conteúdo que precisa de confirmação do cliente.

1.2 Ativos são conteúdo

• Inspecione banners, fotos, logotipos, PDFs, cardápios e folhetos fornecidos antes de projetar.
• Preserve logotipos da marca e fotografia de produtos com precisão. Não substitua um logotipo fornecido por uma interpretação de IA.
• Crie um inventário de ativos: nome do arquivo, dimensões, formato, assunto, localização provável, origem e status de verificação.
• Prefira fotografias originais do negócio. Use imagens geradas ou de banco de imagens apenas quando permitido e distinga-as claramente de evidências reais de clientes/produtos.
• Não fabrique depoimentos nem use pessoas ilustrativas como se fossem clientes reais.

1.3 Um público, uma oferta, uma ação principal

• Defina o público principal e o resultado de negócio mais importante.
• Selecione uma ação de conversão dominante, por exemplo, pedir via WhatsApp, ligar, visitar a loja, solicitar orçamento, agendar consulta ou comprar.
• As ações secundárias não devem competir com o CTA principal acima da dobra.
• Torne o texto do CTA específico para a ação e destino, não genérico como "Saiba Mais".

1.4 Orientado pela marca, não por modelos

• Cada negócio precisa de uma direção visual intencional própria.
• Não recicle a mesma composição de herói, paleta, tipografia, layout de cartão, estilo de ícone e ordem de seção em marcas não relacionadas.
• Referências servem para extrair princípios e ideias de interação, não para copiar a identidade de outra marca.
• Não use assimetria, tipografia oversized, parallax, gradientes, glassmorphism ou animação apenas para parecer criativo. Use-os apenas quando se adequarem à marca e melhorarem a comunicação.

1.5 Mobile-first e rápido

• Projete primeiro para telas estreitas, depois expanda para tablet e desktop.
• Priorize texto legível, CTA acessível, imagens de carregamento rápido, navegação clara e baixo atrito no pedido.
• Respeite as preferências de movimento reduzido e evite movimentos que interfiram na leitura ou compra.

2. Contextos de negócio suportados

Adapte a estrutura e a linguagem visual ao negócio real:

• Alimentação e bebidas: kebab, dimsum, padaria, cafeteria, restaurante, catering, marcas de lanches e bebidas.
• Varejo e moda: vestuário, acessórios, cosméticos, presentes, marcas de produtos locais.
• Serviços: salão de beleza, reparos, educação, serviços para eventos e outros serviços locais.

Não force todas as categorias de negócio na mesma estrutura de página. Negócios baseados em cardápio precisam de descoberta e pedidos; serviços baseados em agendamento precisam de confiança, explicação do serviço, disponibilidade e reserva; moda pode precisar de coleções, informações de tamanho, materiais e fluxo de compra.

3. Visão geral do fluxo de trabalho

Siga estas fases em ordem. Você pode combinar etapas quando o projeto for pequeno, mas não pule a inspeção da fonte, direção criativa, implementação responsiva ou QA.

1. Intake do projeto e reconhecimento do repositório.
2. Extração da fonte da verdade, conteúdo e ativos.
3. Público, oferta, objeções e estratégia de conversão.
4. Descoberta de vibe específica da marca e direção criativa.
5. Arquitetura da informação, plano de seções e texto.
6. Implementação HTML/CSS/JavaScript.
7. Revisão de bom gosto e anti-slop de IA.
8. QA no navegador, teste responsivo e de interação.
9. SEO, acessibilidade, desempenho e prontidão para Vercel.
10. Relatório de entrega com status verificado e limitações conhecidas.

4. Fase 1 — Intake e pesquisa do projeto

4.1 Inspecione antes de alterar

• Inspecione o repositório, framework existente, arquivos de pacote, rotas, componentes, convenções CSS e configuração de implantação.
• Identifique se é uma construção nova, reformulação ou melhoria.
• Preserve a arquitetura funcional e elementos aprovados pela marca, a menos que o usuário solicite explicitamente uma alteração.
• Não sobrescreva o trabalho existente antes de entendê-lo.
• Identifique as ferramentas disponíveis de navegador, captura de tela, imagem e implantação. Não afirme que uma ferramenta foi usada a menos que tenha sido realmente invocada.

4.2 Leia todas as entradas fornecidas

Inspecione arquivos e referências relevantes, que podem incluir:

• PRD, briefing, guia de marca, catálogo de produtos, cardápio, lista de preços, promoções, folhetos, PDFs, arquivos Word, planilhas.
• Designs de banner, logotipos, fotografias de produtos, embalagens, fotos da fachada, visuais de mídia social.
• URLs de sites existentes, perfis sociais, sites de referência, capturas de tela de referência.
• Instruções do usuário, histórico de revisões, texto aprovado, restrições e exclusões.

4.3 Crie uma ficha de fatos do projeto

Registre:

• Nome e categoria do negócio.
• Localização e área de serviço, somente quando fornecidas ou verificadas.
• Público-alvo e contexto de compra.
• Produtos/serviços e preços verificados.
• Diferenciais apoiados por evidências.
• Métodos de pedido, reserva, pagamento, entrega e contato.
• Horários de funcionamento, políticas e restrições.
• Evento de conversão principal.
• Identidade e ativos existentes da marca.
• Desconhecidos e suposições.

Saída: um PROJECT-FACTS.md conciso ou nota de trabalho equivalente quando o escopo do projeto justificar.

5. Fase 2 — Extração de conteúdo e ativos

5.1 Extração de texto

• Extraia texto factual de documentos e imagens fornecidos.
• Reconcile dados duplicados ou conflitantes usando a fonte mais recente explicitamente aprovada.
• Mantenha nomes de produtos e ortografia originais, a menos que o usuário solicite edição.
• Preserve preços, variantes, tamanhos, ingredientes, dimensões e termos exatamente.
• Sinalize fatos conflitantes em vez de escolher um silenciosamente.

5.2 Catálogo de imagens e ativos

Para cada imagem fornecida, registre:

• Caminho/nome do ativo.
• Dimensões e tipo de arquivo.
• Sujeito e conteúdo visível.
• Relevância para a marca/produto.
• Seção e corte propostos.
• Se o ativo é original, de banco de imagens, gerado ou desconhecido.
• Status de verificação.

5.3 Regras de uso de imagem

• Use imagens reais do produto para cartões de produto e itens de cardápio sempre que disponível.
• Não substitua o logotipo real por texto, um ícone ou um logotipo inventado.
• Não corte texto importante, detalhes do produto, embalagem ou elementos da marca.
• Use object-fit e object-position deliberadamente; diferentes imagens de origem podem precisar de cortes diferentes.
• Otimize arquivos grandes em formatos responsivos adequados quando as ferramentas permitirem.
• Adicione texto alternativo significativo; use texto alternativo vazio para imagens puramente decorativas.
• Verifique cada URL de imagem final ou caminho local no navegador.

Saída: um mapa de ativos e uma lista de ativos faltantes.

6. Fase 3 — Estratégia de conversão

6.1 Briefing de conversão

Defina:

• Público: quem tem maior probabilidade de comprar ou perguntar?
• Contexto: de onde os visitantes vêm e o que já sabem?
• Oferta: o que está sendo vendido ou solicitado?
• Valor: qual benefício tangível o cliente recebe?
• Atrito: quais dúvidas impedem a ação?
• Prova: que evidência real pode reduzir essas dúvidas?
• Ação: exatamente o que o visitante deve fazer a seguir?

6.2 Descoberta de objeções

Considere objeções relevantes, como:

• Preço e valor.
• Qualidade e frescor do produto.
• Porção, tamanho, ingredientes ou materiais.
• Confiança, higiene, confiabilidade e qualidade do serviço.
• Localização, entrega e disponibilidade.
• Etapas de reserva, pagamento ou pedido.
• Política de devolução, cancelamento ou garantia.

Aborde apenas objeções com informações apoiadas. Não invente provas.

6.3 Hierarquia da mensagem

• Título do herói: comunique a oferta ou resultado, não apenas o nome do negócio.
• Subtítulo: esclareça o que é oferecido, para quem e por que é importante.
• CTA principal: verbo específico mais ação clara.
• Benefícios: conecte recursos a resultados para o cliente.
• Prova: coloque evidências reais de apoio perto das alegações que elas apoiam.
• FAQ: resolva o atrito restante da compra.
• CTA final: reafirme o próximo passo claramente.

6.4 Exemplos de CTA

• Alimentação: "Peça Dimsum via WhatsApp", "Veja o Cardápio", "Peça para Eventos".
• Cafeteria: "Veja o Cardápio de Café", "Peça para Retirada", "Veja a Localização".
• Moda: "Compre a Coleção", "Veja o Guia de Tamanhos".
• Serviços: "Agende um Horário", "Solicite um Orçamento", "Consulte via WhatsApp".

Verifique URLs de destino, números, modelos de mensagem e parâmetros de rastreamento antes da entrega.

7. Fase 4 — Descoberta de vibe e direção criativa específica da marca

7.1 Leia a marca antes de selecionar um estilo

Infira do negócio:

• Personalidade e posicionamento da marca.
• Textura, material, origem, contexto ou arte do produto.
• Expectativas do público e mentalidade de compra.
• Contexto local/cultural, apenas quando apoiado.
• Convenções de concorrentes que valem a pena diferenciar.
• A sensação que o site deve evocar.
• O que o site nunca deve ser confundido.

7.2 Crie uma direção única

Escreva uma tese visual curta que especifique:

• Nome e conceito da direção.
• Humor e resposta emocional pretendida.
• Funções da tipografia e justificativa.
• Paleta de cores com funções semânticas.
• Abordagem de layout/composição.
• Direção de arte da imagem e princípios de corte.
• Tratamento de superfície, borda e profundidade.
• Elemento de design de assinatura.
• Princípios de movimento.
• Adaptação móvel.

Não mapeie simplesmente cada projeto para um estilo predefinido. Combine influências visuais com cuidado, mas torne a combinação coerente e apropriada.

7.3 Verificação de frescor e anti-convergência

Antes de codificar, pergunte:

• Este layout poderia pertencer a qualquer marca não relacionada?
• A composição do herói é simplesmente o padrão de IA mais comum?
• As escolhas de cor e fonte são justificadas pela marca?
• Existe uma ideia visual reconhecível?
• As seções estão organizadas para este público e meta de conversão?
• A experiência móvel tem sua própria composição, em vez de apenas encolher o desktop?

Se o conceito parecer genérico, revise a direção de arte antes da implementação.

7.4 Sistema de design

Defina tokens antes da estilização de componentes:

• Cores: fundo, superfície, texto, texto suave, borda, primária, destaque, estados semânticos.
• Tipografia: exibição, cabeçalho, corpo, rótulo, metadados.
• Escala de tipos e alturas de linha.
• Escala de espaçamento.
• Larguras de contêiner e breakpoints.
• Regras de raio e borda.
• Elevação/profundidade.
• Duração e suavização de movimento.

Use um sistema contido e específico da marca. Não proíba uma fonte, cor, layout ou efeito universalmente; evite-o quando for um padrão injustificado.

Saída: DESIGN.md ou uma especificação de design documentada equivalente.

8. Fase 5 — Arquitetura da informação e composição de seções

8.1 Escolha seções a partir das necessidades do negócio

Seções possíveis incluem:

• Barra de anúncio.
• Cabeçalho/navegação.
• Herói.
• Visão geral do produto ou serviço.
• Cardápio/catálogo/coleção.
• Benefícios e diferenciais.
• Ingredientes/materiais/processo.
• Como pedir ou reservar.
• Galeria.
• Depoimentos/avaliações (apenas reais).
• Localização e horários de funcionamento (apenas verificados).
• Preços/pacotes (apenas verificados).
• FAQ.
• Contato e CTA final.
• Rodapé.

Esta é uma biblioteca de componentes, não uma ordem obrigatória. Selecione, renomeie, combine, remova e reordene as seções de acordo com o briefing e a jornada do visitante.

8.2 Teste de propósito da seção

Cada seção deve responder a pelo menos uma pergunta:

• O que o cliente precisa entender?
• Com qual decisão ou objeção ela ajuda?
• Que evidência ela fornece?
• Que ação ela torna mais fácil?

Remova seções que não agregam valor significativo.

8.3 Requisitos do herói

A primeira tela deve deixar claro:

• Que negócio/produto/serviço é este.
• Para quem é ou o que oferece.
• Por que o visitante deve se importar.
• Qual é a próxima ação.

Use o melhor ativo de marca/produto disponível. Não force um herói de duas colunas, título centralizado, mockup de painel flutuante ou gradiente decorativo.

9. Fase 6 — Implementação HTML/CSS/JavaScript

9.1 Seleção de stack

• Se um projeto existente for fornecido, preserve seu stack, a menos que a migração seja explicitamente solicitada.
• Para uma nova landing page estática, padrão para HTML5 semântico, CSS externo e JavaScript vanilla mínimo.
• Use React/Vite/Next.js apenas quando solicitado ou justificado pelo projeto.
• Não adicione um framework ou dependência apenas para animar um elemento pequeno.
• Fixe ou documente dependências; evite scripts desnecessários e bibliotecas remotas.

9.2 Estrutura estática sugerida

projecto/
├── index.html
├── styles.css
├── script.js
├── assets/
│   ├── images/
│   ├── icons/
│   └── fonts/
├── README.md
└── vercel.json        # apenas quando necessário

9.3 Requisitos de HTML

• Use landmarks semânticos: header, nav, main, section, article, `fo
• ... [conteúdo truncado para brevidade, mas completo no original]