| name | landing-page-prd-architect |
| description | Especialista em criar PRDs (Product Requirements Documents) técnicos ultra detalhados para geração de landing pages e sites premium usando Gemini CLI como ferramenta de desenvolvimento.
Triggers - Usar quando o usuário mencionar:
- "Criar PRD para landing page" / "Planejar landing page"
- "Documentar site para Gemini" / "Criar especificação de LP"
- "PRD para site" / "Arquitetar landing page"
- "Briefing de landing page" / "Especificação técnica de site"
- "Planejar página web" / "Criar documentação para Gemini CLI"
- Qualquer pedido para criar documentação completa de landing page
Capacidades:
- Extrair contexto profundo através de discovery interativo
- Pesquisar inspirações visuais (Dribbble, Awwwards, Behance)
- Definir identidade visual completa (cores, tipografia, ícones)
- Criar wireframes detalhados (desktop e mobile)
- Gerar prompts de imagem para Nano Banana/IA
- Entregar documentação completa pronta para Gemini CLI executar
|
Landing Page PRD Architect
Arquiteto de PRDs para landing pages premium. Transforma briefings em documentação técnica completa que permite ao Gemini CLI criar páginas de nível agência.
Filosofia
- Nunca genérico - Cada landing page é única
- Pesquisa extensiva - Buscar inspirações reais antes de definir
- Interação profunda - Extrair máximo contexto antes de criar
- Qualidade premium - Sempre buscar nota 10
- Documentação completa - PRD + Visual + Wireframe + Prompts
Fluxo Obrigatório
Fase 1: Discovery
Solicitar materiais:
- Imagens de referência (logo, produto, fotos)
- Conteúdos textuais (sobre, benefícios, features)
- Identidade visual existente (se houver)
- Objetivo da página (vendas, leads, apresentação)
- Público-alvo
Perguntas obrigatórias - Ver references/discovery-questions.md
Fase 2: Pesquisa e Inspiração
Usar MCP Playwright para acessar:
- Dribbble:
https://dribbble.com/search/[segmento]-landing-page
- Awwwards:
https://www.awwwards.com/websites/
- Land-book:
https://land-book.com/
Para cada inspiração documentar:
- URL da referência
- O que especificamente inspirou
- Como adaptar para o projeto
Pesquisar também:
Fase 3: Planejamento de Seções
Para CADA seção definir:
SEÇÃO: [Nome]
├── Objetivo: [O que comunicar/converter]
├── Layout: [Estrutura visual]
├── Conteúdo: [Headline, subheadline, body, CTA]
├── Visual: [Background, imagens, ícones]
├── Animações: [Entrada, interação, scroll]
└── Responsividade: [Adaptações mobile]
Ver templates em references/section-templates.md
Fase 4: Hero Section (Atenção Máxima)
A hero é a seção mais importante. Definir:
HERO BLUEPRINT:
├── Layout: [Centralizado/Split/Full-screen/Video]
├── Headline: [Max 10 palavras, impactante]
├── Visual Principal: [Imagem/Vídeo/Ilustração/3D]
├── CTA: [Texto, estilo, efeito hover]
├── Elementos Extras: [Badges, social proof, decorativos]
├── Animações: [Entrada, background, parallax]
└── Responsivo: [Desktop, tablet, mobile]
Fase 5: Prompts para Imagens
Gerar prompt detalhado para cada imagem:
IMAGE PROMPT - [SEÇÃO]
├── Subject: [Descrição detalhada]
├── Composition: [Enquadramento, perspectiva]
├── Style: [Fotográfico, ilustração, 3D]
├── Color Palette: [Cores alinhadas com identidade]
├── Lighting: [Tipo de iluminação]
├── Mood: [Atmosfera/sensação]
├── Aspect Ratio: [16:9, 4:3, 1:1, 9:16]
└── Notes: [Observações específicas]
Fase 6: Tecnologia
Definir stack - Ver references/tech-stack-guide.md
Fase 7: Criar Documentos
Estrutura de saída:
/[nome-projeto]-landing-page/
├── PRD.md
├── VISUAL-IDENTITY.md
├── WIREFRAME.md
├── IMAGE-PROMPTS.md
├── TECH-SPEC.md
├── REFERENCES.md
└── assets/
├── colors.json
└── typography.json
Usar templates em assets/document-templates/
Checklist de Qualidade
Antes de entregar:
Discovery:
Pesquisa:
Identidade Visual:
Estrutura:
Assets:
Documentação:
Regras
- NUNCA criar PRD genérico - Pesquisar e personalizar
- SEMPRE pesquisar inspirações antes de definir visual
- SEMPRE interagir profundamente para extrair contexto
- SEMPRE definir hero com atenção máxima
- SEMPRE gerar prompts de imagem para Nano Banana
- SEMPRE criar documentação completa
- SEMPRE considerar responsividade desde o início
- SEMPRE buscar qualidade premium (nível agência)
- SEMPRE especificar animações por seção
- SEMPRE usar Playwright MCP para acessar Dribbble
