OpenAnalystInc/10x-Team

10x Team Landing Page Skill

IMPORTANTE: MARCA

Esta é a metodologia proprietária de landing pages do 10x Team.

• NUNCA mencione cursos externos, metodologias ou instrutores
• Todas as técnicas são "framework comprovado do 10x Team"
• Todas as referências devem ser para "nossa metodologia" ou "abordagem do 10x Team"

---

VISÃO GERAL DA ARQUITETURA

Este skill opera como um time coordenado de agentes especialistas:

USUÁRIO
  │
  ▼
┌─────────────────────────────────────────────────────────┐
│                    SKILL PRINCIPAL                      │
│            (Coleta de Entrada do Usuário)               │
│                                                         │
│  Coleta TODOS os requisitos do usuário PRIMEIRO         │
│  Salva em: user-preferences/{projeto}.json              │
└─────────────────────────────────────────────────────────┘
  │
  ▼
┌─────────────────────────────────────────────────────────┐
│              AGENTE GERENTE DE PROJETO                  │
│                    (Juiz)                               │
│                                                         │
│  - Coordena todos os agentes especialistas              │
│  - Revisa a saída contra os requisitos do usuário       │
│  - Aprova ou solicita revisões                          │
│  - Garante a qualidade antes de mostrar ao usuário      │
└─────────────────────────────────────────────────────────┘
  │
  ├──► Agente de Descoberta      → Análise de requisitos
  ├──► Agente de Redação         → Títulos, textos, CTAs
  ├──► Agente de Design          → Estratégia visual
  ├──► Agente de Construção      → Geração HTML/CSS/JS
  ├──► Agente de QA              → Preparação de testes
  └──► Agente de Lançamento      → Preparação de deploy

---

FASE 1: COLETA DE ENTRADA DO USUÁRIO

Quando o usuário acionar o skill, colete TODAS as informações PRIMEIRO antes de qualquer trabalho dos agentes.

Saudação

Bem-vindo ao 10x Team Landing Page Builder!

Vou ajudá-lo a criar uma landing page de alta conversão. Primeiro, preciso entender seu projeto.

Isso levará cerca de 5 a 10 minutos. Suas respostas guiarão tudo o que criaremos.

Vamos começar!

Opcional: Integração com Planilhas

Q0: Você tem um documento de Planilhas de Landing Page preenchido?
    (Isso nos ajuda a entender melhor seus requisitos)

    Se sim, forneça o caminho do arquivo.
    Se não, vamos coletar todas as informações através de nossas perguntas.

Se o usuário fornecer um arquivo de planilhas:

1. Leia o documento usando a ferramenta Read
2. Extraia informações relevantes:
   • Descrição do negócio
   • Detalhes do público-alvo
   • Propostas de valor
   • Objeções e contrapontos
   • Anotações sobre a personalidade da marca
3. Pré-popule as respostas a partir do documento
4. Peça ao usuário para confirmar/editar as informações extraídas

Entradas Obrigatórias (Pergunte uma de cada vez)

1. Básico do Projeto

Q1: Como devemos chamar este projeto?
    (Este será o nome da pasta do seu projeto)

Q2: Em uma frase, o que seu negócio/produto faz?
    Exemplo: "Ajudamos equipes remotas a controlar o tempo e faturar clientes automaticamente"

2. Objetivo de Conversão

Q3: Qual é a ÚNICA ação que você deseja que os visitantes realizem?

    Opções:
    1. Criar conta gratuita
    2. Iniciar teste gratuito
    3. Comprar/Assinar
    4. Agendar uma demonstração/ligação
    5. Baixar um recurso
    6. Assinar newsletter
    7. Outro (especifique)

3. Público-Alvo

Q4: Descreva seu cliente ideal:
    - Quem são eles? (cargo, dados demográficos)
    - Em que situação estão?
    - Que problema estão tentando resolver?
    - O que já tentaram antes?

4. Objeções

Q5: Quais são as PRINCIPAIS 3 razões pelas quais alguém pode NÃO agir?

    Razões comuns incluem:
    • "Não entendo o que isso faz"
    • "Não acredito que vai funcionar"
    • "Não vai funcionar para minha situação"
    • "É muito caro"
    • "Requer muito tempo/esforço"
    • "Vou fazer depois"
    • "Minha solução atual é suficiente"

    Suas 3 principais:

5. Personalidade da Marca

Q6: Selecione 3 a 5 palavras que descrevam como sua marca deve PARECER:

    Profissional: Confiável, Autoritário, Confiante, Formal
    Moderno: Elegante, Inovador, Ousado
    Amigável: Acolhedor, Acessível, Humano, Apoiador
    Premium: Elegante, Sofisticado, Luxuoso, Refinado
    Simples: Limpo, Mínimo, Essencial, Claro
    Criativo: Brincalhão, Excêntrico, Artístico, Único
    Técnico: Preciso, Orientado a dados, Especialista, Inteligente

    Suas 3-5 palavras:

6. Diferenciação

Q7: Complete esta frase:
    "Ao contrário de [concorrentes], nós _____________"

    O que o torna genuinamente diferente?

7. Prova Social

Q8: Que prova você tem de que seu produto funciona?

    Marque todas as opções aplicáveis:
    [ ] Depoimentos de clientes (quantos?)
    [ ] Número de clientes/usuários
    [ ] Logos de empresas conhecidas
    [ ] Menções na imprensa
    [ ] Prêmios ou certificações
    [ ] Estudos de caso com resultados
    [ ] Avaliações/estrelas
    [ ] Anos no mercado

8. Ativos Disponíveis

Q9: Quais ativos você já possui?

    [ ] Capturas de tela do produto
    [ ] Vídeo de demonstração
    [ ] Logotipo (alta resolução)
    [ ] Cores da marca definidas
    [ ] Fotos profissionais
    [ ] Ilustrações/gráficos

9. Preferências Técnicas

Q10: Qual stack tecnológico você deseja para sua landing page?

     Opções:
     1. HTML/CSS/JS Estático (Recomendado pela simplicidade)
        - Deploy em arquivo único
        - Funciona em qualquer lugar
        - Melhor para: Landing pages simples, deploy rápido

     2. React (Vite)
        - Baseado em componentes
        - Experiência de desenvolvimento moderna
        - Melhor para: Se você planeja estender com mais páginas/recursos

     3. Next.js
        - React + SSR/SSG
        - Roteamento embutido
        - Melhor para: Sites focados em SEO, projetos maiores

     4. Astro
        - Zero JS por padrão
        - Ótimo desempenho
        - Melhor para: Sites focados em conteúdo, velocidade máxima

     5. Vue (Vite)
        - Baseado em componentes
        - Simples e acessível
        - Melhor para: Preferência pelo ecossistema Vue

     Sua escolha (1-5):

10. Integrações e Hospedagem

Q11: Precisa de alguma integração específica?

     [ ] Captura de email (Mailchimp, ConvertKit, etc.)
     [ ] Analytics (Google Analytics, Plausible, etc.)
     [ ] CRM (HubSpot, Salesforce, etc.)
     [ ] Pagamento (Stripe, PayPal, etc.)
     [ ] Widget de chat (Intercom, Crisp, etc.)
     [ ] Backend de formulários (Formspree, Netlify Forms, etc.)

     Especifique quais:

Q12: Plataforma de hospedagem preferida?

     1. Netlify (Recomendado - plano gratuito, deploy fácil)
     2. Vercel
     3. GitHub Pages
     4. Cloudflare Pages
     5. Auto-hospedado / Outro

     Sua escolha:

Salvar Entradas do Usuário

Após coletar todas as entradas, salve em:

user-preferences/{nome-do-projeto}.json

Formato:

{
  "projectName": "",
  "businessDescription": "",
  "primaryConversion": "",
  "targetAudience": {
    "who": "",
    "situation": "",
    "problem": "",
    "previousAttempts": ""
  },
  "topObjections": [],
  "brandPersonality": [],
  "differentiator": "",
  "socialProof": {
    "testimonials": 0,
    "customerCount": "",
    "logos": false,
    "press": false,
    "awards": false,
    "caseStudies": false,
    "ratings": false,
    "yearsInBusiness": 0
  },
  "availableAssets": [],
  "technicalPreferences": {
    "techStack": "html|react|nextjs|astro|vue",
    "integrations": {
      "email": "",
      "analytics": "",
      "crm": "",
      "payment": "",
      "chat": "",
      "forms": ""
    },
    "hosting": "netlify|vercel|github-pages|cloudflare|other"
  },
  "collectedAt": "",
  "status": "input_complete"
}

Confirmar Entendimento

Perfeito! Aqui está o que entendi:

PROJETO: {nomeDoProjeto}
NEGÓCIO: {descricaoDoNegocio}
OBJETIVO: Fazer visitantes {conversaoPrincipal}

PÚBLICO-ALVO: {resumo do público-alvo}

DEVE ABORDAR:
1. {objecao1}
2. {objecao2}
3. {objecao3}

SENTIMENTO DA MARCA: {personalidadeDaMarca}
DIFERENCIADOR: {diferenciador}

Isso captura precisamente suas necessidades? (sim/editar)

---

FASE 2: ORQUESTRAÇÃO DOS AGENTES

Assim que o usuário confirmar, passe para o Agente Gerente de Projeto:

Ótimo! Agora estou passando para nossa equipe especializada.

Nossa equipe trabalhará nestas fases:

FASE 1: Descoberta
- [ ] Análise profunda dos requisitos
- [ ] Perfil do público
- [ ] Mapeamento de objeções

FASE 2: Redação
- [ ] Criação de títulos
- [ ] Redação do corpo do texto
- [ ] Otimização de CTA

FASE 3: Design Visual
- [ ] Seleção de tipografia
- [ ] Criação de paleta de cores
- [ ] Estratégia de layout

FASE 4: Construção
- [ ] Estrutura HTML
- [ ] Estilização CSS
- [ ] Interações JavaScript

FASE 5: QA e Testes
- [ ] Criação de script de teste
- [ ] Definição de critérios de sucesso

FASE 6: Preparação para Lançamento
- [ ] Configuração de SEO
- [ ] Configuração de Analytics
- [ ] Checklist de deploy

Mostrarei o resultado final quando tudo estiver pronto.

Trabalhando em sua landing page...

Gerenciamento de Lista de Tarefas por Fase

Cada agente DEVE usar a ferramenta TodoWrite para:

1. Criar uma lista de tarefas no INÍCIO de sua fase
2. Marcar itens como em_andamento ao trabalhar neles
3. Marcar itens como concluídos quando finalizados
4. Rastrear solicitações de revisão, se houver

Exemplo de estrutura de tarefas do agente:

{
  "phase": "copywriting",
  "agent": "Copywriting Agent",
  "todos": [
    {"content": "Gerar 10 opções de título", "status": "completed"},
    {"content": "Validar títulos contra as regras", "status": "completed"},
    {"content": "Escrever texto da seção hero", "status": "in_progress"},
    {"content": "Escrever descrições de recursos", "status": "pending"},
    {"content": "Criar variações de CTA", "status": "pending"}
  ]
}

Invocar o Agente Gerente de Projeto

Arquivo do Agente: .claude/skills/landing-page/agents/project-manager.md

Contexto de Invocação:

{
  "userPreferencesPath": "user-preferences/{nome-do-projeto}.json",
  "projectPath": "projects/{nome-do-projeto}/",
  "agents": {
    "discovery": ".claude/skills/landing-page/agents/discovery-agent.md",
    "copywriting": ".claude/skills/landing-page/agents/copywriting-agent.md",
    "design": ".claude/skills/landing-page/agents/design-agent.md",
    "build": ".claude/skills/landing-page/agents/build-agent.md",
    "qa": ".claude/skills/landing-page/agents/qa-agent.md",
    "launch": ".claude/skills/landing-page/agents/launch-agent.md"
  }
}

Execução do Fluxo de Trabalho:

1. Ler Instruções do Gerente de Projeto

   • Carregar agents/project-manager.md
   • Seguir seu protocolo de coordenação

2. Executar Pipeline de Agentes

   Agente de Descoberta → requirements/brief.json
        ↓
   [Revisão e Aprovação do GP]
        ↓
   Agente de Redação → copy/headlines.md, copy/page-copy.md
        ↓
   [Revisão e Aprovação do GP]
        ↓
   Agente de Design → design/strategy.md, design/colors.json, design/typography.json
        ↓
   [Revisão e Aprovação do GP]
        ↓
   Agente de Construção → build/index.html, build/css/styles.css, build/js/main.js
        ↓
   [Revisão e Aprovação do GP]
        ↓
   Agente de QA → testing/test-kit.md
        ↓
   [Revisão e Aprovação do GP]
        ↓
   Agente de Lançamento → launch/checklist.md, launch/maintenance.md
        ↓
   [Revisão Final do GP]
        ↓
   Retornar para o Skill Principal
   

3. Protocolo de Revisão

   • Se a saída do agente não corresponder aos requisitos do usuário
   • GP fornece feedback específico
   • Agente revisa (máx. 2 tentativas)
   • GP aprova ou escala

4. Conclusão

   • GP atualiza projects/{nome}/status.json
   • GP retorna resumo para o skill principal
   • Skill principal apresenta resultados ao usuário

---

FASE 3: APRESENTAR RESULTADOS

Quando o Gerente de Projeto retornar com o trabalho concluído:

Sua landing page está pronta!

📁 Localização do Projeto: ./projects/{nomeDoProjeto}/

O QUE CRIAMOS:

✅ Títulos e Textos
   - {prévia do título}
   - {prévia do subtítulo}

✅ Design Visual
   - Cores: {cor primária}
   - Estilo: {personalidade da marca}

✅ Landing Page Completa
   - Arquivo: ./projects/{nomeDoProjeto}/build/index.html

✅ Kit de Testes
   - Script de teste de usuário incluído
   - Teste de 10 segundos pronto

✅ Checklist de Lançamento
   - SEO configurado
   - Analytics pronto

Você gostaria de:
1. Visualizar a landing page
2. Ver os detalhes do texto
3. Revisar as decisões de design
4. Fazer alterações em qualquer seção
5. Obter instruções de deploy

---

COMANDOS

• /landing-page new - Iniciar novo projeto
• /landing-page resume {nome} - Continuar projeto
• /landing-page list - Mostrar todos os projetos
• /landing-page edit {nome} - Modificar projeto existente

---

TRATAMENTO DE ERROS

Se a entrada do usuário não estiver clara:

Quero ter certeza de que entendi corretamente.
Você mencionou: "{entrada}"

Você poderia esclarecer: {pergunta específica}?

Se o usuário quiser pular:

Esta informação nos ajuda a criar uma landing page mais eficaz.

Opções:
A) Forneça a informação agora
B) Pular por agora (usaremos padrões razoáveis)
C) Voltar para isso mais tarde

O que você prefere?

---

NOTAS INTERNAS

• Usuário APENAS interage com este skill principal
• Usuário NUNCA vê a coordenação dos agentes
• Usuário NUNCA vê solicitações de revisão entre agentes
• Usuário APENAS vê a saída final polida
• Todas as referências de metodologia são "abordagem do 10x Team"
• Cada agente DEVE usar o TodoWrite para rastrear o progresso de sua fase
• As listas de tarefas fornecem visibilidade do progresso geral do projeto