Landing - Geração Guiada de Páginas de Vendas
Uma ferramenta guiada para geração de páginas de vendas. Esta skill lida com estrutura, lógica de contagem regressiva e o fluxo de perguntas guiadas. O sistema de design é delegado ao UUPM, com um caminho de fallback caso o UUPM não esteja instalado.
Requisito de execução: Requer um ambiente que possa executar Bash. O Claude Code suporta isso nativamente; o Claude Desktop requer um shell MCP.
Visão Geral do Fluxo de Trabalho
Etapa 1: Perguntas e Respostas Guiadas, 3 estágios
|
Etapa 2: Manipulação do sistema de design, UUPM ou fallback
|
Etapa 3: Apresentar 2-3 opções de estilo
|
Etapa 4: Gerar HTML
|
Etapa 5: Saída para generated-pages/{slug}/
Etapa 1: Perguntas e Respostas Guiadas
Regra Principal: Não Usar Contexto Fora Deste Fluxo
Dentro do fluxo /landing, use apenas as respostas que o usuário fornece neste momento. Não faça referência a:
- Histórico da conversa, como tópicos ou projetos anteriores
- Sistemas de memória, como MEMORY.md ou arquivos de persona
- Qualquer conteúdo de pastas de projetos existentes
Por que: Cada usuário tem um contexto diferente e o comportamento da skill deve ser consistente. Mesmo que você conheça bem o domínio, comporte-se como se estivesse preenchendo tudo do zero. A página final deve ser orientada pelas respostas do usuário, não por suposições da IA.
Exemplo ruim: "Isso parece ser o curso Super Individual Work Method, certo?" Isso referencia memória.
Exemplo bom: Infira o setor apenas a partir de A1 e A2. Não pergunte: "É o curso X?"
Banco de perguntas detalhado: references/question-bank.md
Três estágios:
- A. Posicionamento do produto, 4 perguntas - Tipo de produto, setor, tom da marca, slug
- B. Preenchimento de conteúdo, 10 perguntas - Hero / Gancho / Sobre / Aprender / Depoimentos opcionais / Público / Informações / Preço / FAQ / Palestrante
- C. Contagem regressiva e CTA, 3-4 perguntas - Primeiro pergunte se uma contagem regressiva é necessária, depois peça detalhes e texto do CTA
Regras de Apresentação de Perguntas
Cada pergunta deve mostrar:
- A própria pergunta
- Exemplos bons e ruins como diretrizes
- O campo de resposta
- Comandos especiais:
pularpara perguntas opcionais egerar 3 para mimpara opções geradas por IA
Pergunte Sim/Não Antes de Seções Opcionais
- B5a - Pergunte se deve incluir depoimentos de alunos. Se N, pule B5b.
- C0 - Pergunte se deve incluir um cronômetro de contagem regressiva. Se N, pule C1-C2.
Modo Especialista, Caminho Rápido
Se o usuário disser: "Vou colar tudo de uma vez", pule a exibição das diretrizes, receba o texto completo e classifique tudo em uma única passagem.
Coletando Respostas
Salve todas as respostas finais em generated-pages/{slug}/answers.json neste formato:
{
"product": { "type": "...", "industry": "...", "tone": ["...", "..."], "slug": "..." },
"content": {
"hero": { "title": "...", "subtitle": "..." },
"hook": "...",
"about": "...",
"learn": ["...", "..."],
"testimonials": [{ "name": "...", "quote": "...", "role": "..." }],
"audience": { "fit": ["..."], "unfit": ["..."] },
"info": [{ "label": "...", "value": "..." }],
"pricing": [{ "plan": "...", "price": "...", "note": "..." }],
"faq": [{ "q": "...", "a": "..." }],
"speaker": { "name": "...", "bio": ["..."], "photo": "..." }
},
"countdown": {
"enabled": true,
"deadline": "2026-04-30T23:59:00+08:00",
"onZero": "ended-state"
},
"cta": { "text": "Registre-se Agora", "href": "#" }
}
Etapa 1.5: Detectar DESIGN.md
Antes de entrar na etapa do sistema de design, verifique se o usuário já possui diretrizes de design da marca:
# Procurar por DESIGN.md em ordem de prioridade
DESIGN_FILE=""
for f in \
"$PROJECT_ROOT/DESIGN.md" \
"$PROJECT_ROOT/design.md" \
"$PROJECT_ROOT/.claude/DESIGN.md" \
"$HOME/.claude/DESIGN.md"; do
if [ -f "$f" ]; then
DESIGN_FILE="$f"
break
fi
done
Se DESIGN.md Existir, Aplicar Diretamente
Se DESIGN.md for encontrado, leia suas cores da marca, tipografia e regras de estilo, depois use-os diretamente como sistema de design:
- Analise as seções de cores, tipografia e estilo em DESIGN.md.
- Confirme com o usuário: "Encontrei seu DESIGN.md. A cor da marca é
#XXXe a fonte éXXX. Devo usar esta configuração?" - Se o usuário confirmar, pule a Etapa 2 e a Etapa 3, depois vá diretamente para a Etapa 4 para gerar HTML.
- Se o usuário disser não, prossiga normalmente para a Etapa 2.
Se DESIGN.md Não Existir, Prossiga para a Etapa 2
Use o fluxo UUPM ou o fluxo de fallback.
Por que esta etapa existe: A Lição 3-2 ensina os alunos a criar DESIGN.md. Se
/landingnão o ler, o aluno criou diretrizes de marca que não podem ser usadas, o que quebra a experiência. Um DESIGN.md deve orientar saídas visuais como cartões sociais, apresentações e páginas de vendas.
Etapa 2: Manipulação do Sistema de Design, Apenas Quando Não Existir DESIGN.md
Fluxo detalhado: references/uupm-integration.md
Detectar UUPM
test -d ~/.claude/skills/ui-ux-pro-max || \
test -d "$PROJECT_ROOT/.claude/skills/ui-ux-pro-max" || \
command -v uipro
Se alguma verificação for bem-sucedida, o UUPM está instalado e o fluxo entra no modo UUPM.
Se todas as verificações falharem, mostre a mensagem de persuasão de references/uupm-integration.md.
Ramificação Quando UUPM Não Está Instalado
| Resposta do usuário | Manipulação |
|---|---|
y / yes / ok | Execute npm install -g uipro-cli && uipro init --ai claude --global, depois continue para a Etapa 3 após a instalação |
n / no / later | Use o modo de fallback, veja references/fallback-design-rules.md |
| A instalação falha | Mostre o erro e pergunte se deseja continuar com o fallback |
Modo UUPM: Gerar Sistema de Design
Construa a consulta a partir das respostas do Estágio A:
query="<A2 industry> <A3 tone keywords>"
slug="<A4>"
python3 ~/.claude/skills/ui-ux-pro-max/scripts/search.py \
"$query" \
--design-system \
--persist \
-p "$slug" \
-f markdown
O resultado é escrito em design-system/MASTER.md. Leia-o e analise cores, tipografia, padrão e antipadrões.
Etapa 3: Apresentar Opções de Estilo
Modo UUPM
Use o padrão recomendado pelo UUPM como opção principal. Depois escolha 2 opções compatíveis, mas distintas, dos outros 7 Estilos de Página de Vendas, criando 3 opções no total.
Por exemplo, se o UUPM recomendar Hero-Centric + Social Proof, adicione Conversion-Optimized e Trust & Authority como opções de comparação.
Renderize cada estilo como um mini cartão de pré-visualização usando <div class="cards">, referenciando a interface visual complementar, para que o usuário possa escolher.
Modo Fallback
Claude gera 2 direções, como minimalista vs. lúdico. Cada direção inclui suas próprias regras de cor, tipografia e espaçamento. O usuário escolhe uma.
Etapa 4: Gerar HTML
Ler esqueleto: templates/base.html
Ler JS de contagem regressiva: templates/countdown.js
Lógica de Montagem
- Leia
templates/base.html. - Renderize condicionalmente:
{{#if countdown.enabled}}- Mantenha a grande contagem regressiva no hero e a barra fixa no final; caso contrário, remova ambas as seções.{{#if testimonials}}- Mantenha a seção de depoimentos; caso contrário, remova-a.
- Preencha o conteúdo de
answers.json. - Injete tokens de design em
<style>. No modo UUPM, leia MASTER.md. No modo fallback, gere-os a partir das três regras de fallback. - Injete countdown.js apenas quando a contagem regressiva estiver habilitada.
Nav, Obrigatório e Fixo no Topo
Nav é um requisito fixo e deve ser incluído em todas as páginas geradas:
- Marca: Lado esquerdo. Um nome curto derivado do slug A4, ou uma abreviação curta em inglês baseada no tipo de produto.
- Links de seção: Meio. Link para Sobre / Aprender / Público / Preço / Palestrante / FAQ. Não inclua links para seções opcionais que não estejam presentes.
- CTA de registro: Lado direito. Rótulo curto, como "Registrar" ou "Comprar".
- Fixo ao rolar. Adicione sombra ao rolar via alternância JS
.scrolled. - Ocultar links em dispositivos móveis, abaixo de 860px.
Dados necessários, inferidos de answers.json:
"nav": {
"brandText": "Workshop de IA Solo",
"linkAbout": "Workshop",
"linkLearn": "O Que Você Vai Aprender",
"linkAudience": "Para Quem É",
"linkPricing": "Planos",
"linkSpeaker": "Instrutor",
"linkFaq": "FAQ",
"ctaShort": "Registrar"
}
O estilo do nav deve seguir o sistema de design selecionado, incluindo tipografia, cores e estilo de divisor. A estrutura e os links permanecem os mesmos.
Estratégia de Arquivo HTML Único
- Use Tailwind via CDN:
<script src="https://cdn.tailwindcss.com"></script> - CSS inline em
<style> - JS inline em
<script> - Use URLs de imagem fornecidas pelo aluno
Isso torna mais fácil para os alunos copiarem e colarem no Framer, Notion ou CMS.
Etapa 5: Saída
Escreva em generated-pages/{slug}/:
generated-pages/
└── {slug}/
├── index.html
├── design-system.md # Apenas no modo UUPM
└── answers.json
Abrir o Arquivo para o Usuário Após Escrevê-lo
Não diga ao usuário para abrir o arquivo manualmente. Abra-o para ele:
open "generated-pages/{slug}/index.html"
No macOS, isso abre o arquivo no navegador padrão. Se falhar, como em um ambiente Linux sem open, então diga ao usuário como abri-lo manualmente.
Mensagem final para o aluno:
Página de vendas gerada e aberta no navegador.
Localização do arquivo:
generated-pages/{slug}/index.html
Quer editar o texto? Edite o HTML diretamente ou execute /landing novamente para preencher as respostas novamente. O answers.json existente será lido.
Tratamento de Erros
| Situação | Comportamento |
|---|---|
| Erro de permissão npm | Sugira ! sudo npm install -g uipro-cli, depois deixe o aluno executá-lo manualmente |
| npm não existe | Sugira instalar Node.js via Homebrew ou nvm |
| Python3 não existe | Sugira brew install python3 |
| UUPM search.py falha | Registre o erro e faça fallback automaticamente |
| Ferramentas Bash indisponíveis | Capture o erro e faça fallback para mostrar comandos manuais |
| Uma pasta com o mesmo slug já existe | Pergunte se deseja sobrescrever, adicionar um timestamp ou escolher outro nome |
Fora do Escopo
- Páginas de assinatura ou associação, páginas de consultoria de serviço
- Seções de garantia ou reembolso
- Páginas multilíngues, atualmente apenas em inglês
- Integração de formulários como pagamento ou assinatura; CTA é apenas um link
- Implantação real
- Comportamento
on-zero: new-price
Frases de Gatilho
/landing, "make a sales page", "help me make a landing page", "sales page"