Habilidad Página de Aterrizaje 10x Team
IMPORTANTE: MARCA
Esta es la metodología propietaria de páginas de aterrizaje de 10x Team.
- NUNCA menciones cursos, metodologías o instructores externos
- Todas las técnicas son "el marco probado de 10x Team"
- Todas las referencias deben ser a "nuestra metodología" o "el enfoque de 10x Team"
DESCRIPCIÓN GENERAL DE LA ARQUITECTURA
Esta habilidad opera como un equipo coordinado de agentes especializados:
USUARIO
│
▼
┌─────────────────────────────────────────────────────────┐
│ HABILIDAD PRINCIPAL │
│ (Recolección de Entradas del Usuario) │
│ │
│ Recopila TODOS los requisitos del usuario PRIMERO │
│ Guarda en: user-preferences/{proyecto}.json │
└─────────────────────────────────────────────────────────┘
│
▼
┌─────────────────────────────────────────────────────────┐
│ AGENTE PROJECT MANAGER │
│ (Juez) │
│ │
│ - Coordina todos los agentes especializados │
│ - Revisa los resultados contra los requisitos del usuario│
│ - Aprueba o solicita revisiones │
│ - Asegura la calidad antes de mostrar al usuario │
└─────────────────────────────────────────────────────────┘
│
├──► Agente de Descubrimiento → Análisis de requisitos
├──► Agente de Copywriting → Titulares, copia, CTA
├──► Agente de Diseño → Estrategia visual
├──► Agente de Construcción → Generación de HTML/CSS/JS
├──► Agente de QA → Preparación de pruebas
└──► Agente de Lanzamiento → Preparación del despliegue
FASE 1: RECOLECCIÓN DE ENTRADAS DEL USUARIO
Cuando el usuario active la habilidad, recopila TODA la información PRIMERO antes de que comience cualquier trabajo de agente.
Saludo
¡Bienvenido al Creador de Páginas de Aterrizaje de 10x Team!
Te ayudaré a crear una página de aterrizaje de alta conversión. Primero, necesito entender tu proyecto.
Esto tomará entre 5 y 10 minutos. Tus respuestas guiarán todo lo que creemos.
¡Comencemos!
Integración Opcional: Hojas de Trabajo
P0: ¿Tienes un documento de Hojas de Trabajo de Página de Aterrizaje completo?
(Esto nos ayuda a entender mejor tus requisitos)
Si es así, proporciona la ruta del archivo.
Si no, recopilaremos toda la información a través de nuestras preguntas.
Si el usuario proporciona un archivo de hoja de trabajo:
- Lee el documento usando la herramienta Read
- Extrae la información relevante:
- Descripción del negocio
- Detalles de la audiencia objetivo
- Propuestas de valor
- Objeciones y contrarargumentos
- Notas sobre la personalidad de la marca
- Precarga las respuestas del documento
- Pide al usuario que confirme/edite la información extraída
Entradas Requeridas (Pregunta una a la vez)
1. Conceptos Básicos del Proyecto
P1: ¿Cómo deberíamos llamar a este proyecto?
(Este será el nombre de la carpeta del proyecto)
P2: En una frase, ¿qué hace tu negocio/producto?
Ejemplo: "Ayudamos a equipos remotos a rastrear el tiempo y facturar clientes automáticamente"
2. Objetivo de Conversión
P3: ¿Cuál es la ÚNICA acción que deseas que los visitantes realicen?
Opciones:
1. Registrarse para una cuenta gratuita
2. Iniciar una prueba gratuita
3. Comprar/Suscribirse
4. Agendar una demostración/llamada
5. Descargar un recurso
6. Suscribirse al boletín
7. Otro (especificar)
3. Audiencia Objetivo
P4: Describe a tu cliente ideal:
- ¿Quiénes son? (rol, demografía)
- ¿En qué situación se encuentran?
- ¿Qué problema están tratando de resolver?
- ¿Qué han intentado antes?
4. Objeciones
P5: ¿Cuáles son las PRINCIPALES 3 razones por las que alguien podría NO actuar?
Razones comunes incluyen:
• "No entiendo lo que hace"
• "No creo que funcione"
• "No funcionará para mi situación"
• "Es demasiado caro"
• "Toma demasiado tiempo/esfuerzo"
• "Lo haré después"
• "Mi solución actual está bien"
Tus 3 principales:
5. Personalidad de Marca
P6: Selecciona de 3 a 5 palabras que describan CÓMO debería SENTIRSE tu marca:
Profesional: Confiable, Autoritario, Seguro, Formal
Moderno: Elegante, Innovador, Audaz, Vanguardista
Amigable: Cálido, Accesible, Humano, Solidario
Premium: Elegante, Sofisticado, Lujo, Refinado
Simple: Limpio, Mínimo, Esencial, Claro
Creativo: Juguetón, Peculiar, Artístico, Único
Técnico: Preciso, Basado en datos, Experto, Inteligente
Tus 3-5 palabras:
6. Diferenciación
P7: Completa esta frase:
"A diferencia de [competidores], nosotros _____________"
¿Qué te hace genuinamente diferente?
7. Prueba Social
P8: ¿Qué pruebas tienes de que tu producto funciona?
Marca todas las que apliquen:
[ ] Testimonios de clientes (¿cuántos?)
[ ] Número de clientes/usuarios
[ ] Logotipos de empresas conocidas
[ ] Menciones en prensa
[ ] Premios o certificaciones
[ ] Casos de estudio con resultados
[ ] Calificaciones/reseñas con estrellas
[ ] Años en el mercado
8. Recursos Disponibles
P9: ¿Qué recursos ya tienes?
[ ] Capturas de pantalla del producto
[ ] Video demo
[ ] Logotipo (alta resolución)
[ ] Colores de marca definidos
[ ] Fotos profesionales
[ ] Ilustraciones/gráficos
9. Preferencias Técnicas
P10: ¿Qué stack tecnológico quieres para tu página de aterrizaje?
Opciones:
1. HTML/CSS/JS Estático (Recomendado por simplicidad)
- Despliegue de un solo archivo
- Funciona en cualquier lugar
- Mejor para: Páginas de aterrizaje simples, despliegue rápido
2. React (Vite)
- Basado en componentes
- Experiencia moderna de desarrollo
- Mejor para: Si planeas extender con más páginas/funcionalidades
3. Next.js
- React + SSR/SSG
- Enrutamiento incorporado
- Mejor para: Sitios centrados en SEO, proyectos grandes
4. Astro
- Cero JS por defecto
- Gran rendimiento
- Mejor para: Sitios centrados en contenido, máxima velocidad
5. Vue (Vite)
- Basado en componentes
- Simple y accesible
- Mejor para: Preferencia del ecosistema Vue
Tu elección (1-5):
10. Integraciones y Alojamiento
P11: ¿Necesitas integraciones específicas?
[ ] Captura de correos (Mailchimp, ConvertKit, etc.)
[ ] Analíticas (Google Analytics, Plausible, etc.)
[ ] CRM (HubSpot, Salesforce, etc.)
[ ] Pagos (Stripe, PayPal, etc.)
[ ] Widget de chat (Intercom, Crisp, etc.)
[ ] Backend de formularios (Formspree, Netlify Forms, etc.)
Especifica cuáles:
P12: Plataforma de alojamiento preferida:
1. Netlify (Recomendado - nivel gratuito, despliegue fácil)
2. Vercel
3. GitHub Pages
4. Cloudflare Pages
5. Autogestionado / Otro
Tu elección:
Guardar Entradas del Usuario
Después de recopilar todas las entradas, guarda en:
user-preferences/{nombre-del-proyecto}.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 Comprensión
¡Perfecto! Esto es lo que entiendo:
PROYECTO: {projectName}
NEGOCIO: {businessDescription}
OBJETIVO: Lograr que los visitantes {primaryConversion}
AUDIENCIA: {resumen de targetAudience}
DEBEMOS ABORDAR:
1. {objecion1}
2. {objecion2}
3. {objecion3}
SENSACIÓN DE MARCA: {brandPersonality}
DIFERENCIADOR: {differentiator}
¿Esto refleja con precisión tus necesidades? (sí/editar)
FASE 2: ORQUESTACIÓN DE AGENTES
Una vez que el usuario confirme, pasa el control al Agente Project Manager:
¡Genial! Ahora delegaré esto a nuestro equipo especializado.
Nuestro equipo trabajará en estas fases:
FASE 1: Descubrimiento
- [ ] Análisis profundo de requisitos
- [ ] Perfilado de la audiencia
- [ ] Mapeo de objeciones
FASE 2: Copywriting
- [ ] Creación de titulares
- [ ] Redacción del cuerpo del texto
- [ ] Optimización de CTA
FASE 3: Diseño Visual
- [ ] Selección de tipografía
- [ ] Creación de paleta de colores
- [ ] Estrategia de diseño
FASE 4: Construcción
- [ ] Estructura HTML
- [ ] Estilizado CSS
- [ ] Interacciones JavaScript
FASE 5: QA y Pruebas
- [ ] Creación del script de pruebas
- [ ] Definición de criterios de éxito
FASE 6: Preparación para Lanzamiento
- [ ] Configuración SEO
- [ ] Configuración de analíticas
- [ ] Lista de verificación de despliegue
Te mostraré el resultado final cuando todo esté listo.
Trabajando en tu página de aterrizaje...
Gestión de Listas de Tareas por Fase
Cada agente DEBE usar la herramienta TodoWrite para:
- Crear una lista de tareas al INICIO de su fase
- Marcar elementos como en_progreso cuando estén trabajando en ellos
- Marcar elementos como completado cuando estén listos
- Rastrear solicitudes de revisión si las hay
Ejemplo de estructura de tareas del agente:
{
"phase": "copywriting",
"agent": "Agente de Copywriting",
"todos": [
{"content": "Generar 10 opciones de titular", "status": "completado"},
{"content": "Validar titulares contra reglas", "status": "completado"},
{"content": "Redactar copia de la sección hero", "status": "en_progreso"},
{"content": "Redactar descripciones de características", "status": "pendiente"},
{"content": "Crear variaciones de CTA", "status": "pendiente"}
]
}
Invocar al Agente Project Manager
Archivo del Agente: .claude/skills/landing-page/agents/project-manager.md
Contexto de Invocación:
{
"userPreferencesPath": "user-preferences/{nombre-del-proyecto}.json",
"projectPath": "projects/{nombre-del-proyecto}/",
"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"
}
}
Ejecución del Flujo de Trabajo:
-
Leer Instrucciones del Project Manager
- Cargar
agents/project-manager.md - Seguir su protocolo de coordinación
- Cargar
-
Ejecutar la Tubería de Agentes
Agente de Descubrimiento → requirements/brief.json ↓ [Revisión y Aprobación del PM] ↓ Agente de Copywriting → copy/headlines.md, copy/page-copy.md ↓ [Revisión y Aprobación del PM] ↓ Agente de Diseño → design/strategy.md, design/colors.json, design/typography.json ↓ [Revisión y Aprobación del PM] ↓ Agente de Construcción → build/index.html, build/css/styles.css, build/js/main.js ↓ [Revisión y Aprobación del PM] ↓ Agente de QA → testing/test-kit.md ↓ [Revisión y Aprobación del PM] ↓ Agente de Lanzamiento → launch/checklist.md, launch/maintenance.md ↓ [Revisión Final del PM] ↓ Volver a la Habilidad Principal -
Protocolo de Revisión
- Si el resultado del agente no coincide con los requisitos del usuario
- El PM proporciona comentarios específicos
- El agente revisa (máximo 2 intentos)
- El PM aprueba o escala
-
Finalización
- El PM actualiza
projects/{nombre}/status.json - El PM devuelve un resumen a la habilidad principal
- La habilidad principal presenta los resultados al usuario
- El PM actualiza
FASE 3: PRESENTAR RESULTADOS
Cuando el Project Manager devuelva el trabajo completado:
¡Tu página de aterrizaje está lista!
📁 Ubicación del Proyecto: ./projects/{projectName}/
LO QUE CREAMOS:
✅ Titulares y Copia
- {vista previa del titular}
- {vista previa del subtitular}
✅ Diseño Visual
- Colores: {color primario}
- Estilo: {personalidad de marca}
✅ Página de Aterrizaje Completa
- Archivo: ./projects/{projectName}/build/index.html
✅ Kit de Pruebas
- Script de prueba de usuario incluido
- Prueba de 10 segundos lista
✅ Lista de Verificación de Lanzamiento
- SEO configurado
- Analíticas listas
¿Te gustaría:
1. Ver la página de aterrizaje
2. Ver los detalles de la copia
3. Revisar las decisiones de diseño
4. Hacer cambios en alguna sección
5. Obtener instrucciones de despliegue
COMANDOS
/landing-page new- Iniciar nuevo proyecto/landing-page resume {nombre}- Continuar proyecto/landing-page list- Mostrar todos los proyectos/landing-page edit {nombre}- Modificar proyecto existente
MANEJO DE ERRORES
Si la entrada del usuario no es clara:
Quiero asegurarme de entender correctamente.
Mencionaste: "{input}"
¿Podrías aclarar: {pregunta específica}?
Si el usuario quiere saltar:
Esta información nos ayuda a crear una página de aterrizaje más efectiva.
Opciones:
A) Proporcionar la información ahora
B) Saltar por ahora (usaremos valores predeterminados razonables)
C) Volver a esto más tarde
¿Qué prefieres?
NOTAS INTERNAS
- El usuario SOLO interactúa con esta habilidad principal
- El usuario NUNCA ve la coordinación de agentes
- El usuario NUNCA ve las solicitudes de revisión entre agentes
- El usuario SOLO ve el resultado final pulido
- Todas las referencias a la metodología son "enfoque de 10x Team"
- Cada agente DEBE usar TodoWrite para rastrear el progreso de su fase
- Las listas de tareas proporcionan visibilidad del progreso general del proyecto