Constructora de Landing Pages
Fórmula: nuestra estructura × las mejores prácticas de la competencia, construidas al estándar de referencia.
Cada página es única para su nicho. Desde cero, el diseño proviene del tema + los competidores (fases 2–3), nunca de una página anterior ni de una plantilla. Lo que se hereda entre páginas es el nivel de calidad, no la apariencia:
- jerarquía clara en cada bloque: subtítulo → titular → lead → contenido multimedia real → CTA con microcopy;
- contenido multimedia real del producto en marcos adecuados, con marcos vacíos etiquetados donde falte;
- un par tipográfico y un acento elegidos para el nicho;
- una sección de contraste para dar ritmo;
- resultados subtitulados uno por uno;
- un resumen antes del precio;
- FAQ y un CTA de cierre construido a partir de nuestros hechos;
- QA con capturas de pantalla.
El rediseño aprobado de Vidpeak (references/examples.md §D) muestra ese nivel. Iguala su acabado, nunca su aspecto.
- Nuestra estructura decide qué trabajos debe hacer la página y en qué proporción (5 bloques, pesos, reglas base). Es la misma en todos los nichos.
- Los competidores deciden cómo se realiza cada trabajo en este nicho: fórmula del héroe, tipos de prueba, cómo se muestra el producto, formato de precios, objeciones, sistema visual. Eso cambia por nicho.
- Los vacíos —aquello que ningún competidor dice o muestra bien— se convierten en nuestra diferenciación.
- El estándar de referencia (
references/reference-standard.md) establece el listón de calidad: cuatro landings que el propietario consideró buenos. Sus patrones de bloques, artesanía de copy y artesanía visual son lo que significa "bien hecho". El nicho decide el aspecto; las referencias deciden qué tan bien está hecho.
Nunca construyas solo con el framework (página genérica) ni copies a un solo competidor (página imitadora).
Dos modos — elige uno primero
| Modo | Cuándo | Flujo de trabajo |
|---|---|---|
| A. Construir desde cero | Aún no hay página, o el propietario quiere una nueva | A continuación (fases 1–6) |
| B. Mejorar el diseño | Existe una página (URL / archivo del repo / captura de pantalla) y el propietario quiere que se vea y funcione mejor | references/redesign.md |
Señales para B: "hazlo mejor / más bonito", "rediseña", "mejora el diseño", "aquí está mi landing", un enlace a una página en vivo. Si no está claro → haz una pregunta: "¿Página nueva, o mejorar el diseño de esta?" Ambos modos usan la misma estructura interna, reglas base y estándar de referencia.
Flujo de trabajo — Modo A (desde cero)
Sigue en orden. Las fases 2–3 son el núcleo de este skill — no las omitas para ahorrar tiempo.
| # | Fase | Salida | Referencia |
|---|---|---|---|
| 1 | Brief — producto, avatar, beneficio, tipo de CTA, precio, idioma, activos | Brief en 10 líneas | references/brief.md |
| 2 | Investigación de competidores — encuentra 3–5 competidores, abre sus landing pages, captura cada sección | Capturas de pantalla en research/ + notas en bruto | references/competitor-research.md |
| 3 | Desglose y síntesis — patrones por bloque, línea base del mercado, mejores prácticas, vacíos, bloqueo visual | research/teardown.md | references/competitor-research.md |
| 4 | Plan de página — nuestros 5 bloques, cada uno relleno con las prácticas elegidas + un patrón del estándar de referencia + nuestro contenido | Tabla del plan → punto de control con el propietario | references/framework.md, references/reference-standard.md |
| 5 | Construcción — stack, copy, contenido multimedia, CTA, sistema visual único para este nicho | La página | references/build.md, references/visual-system.md |
| 6 | QA — en el navegador, escritorio + móvil, contra el plan, los competidores y el estándar de referencia | Página corregida + entrega | references/build.md §QA |
| 7 | SEO y GEO — antes de que la página se publique (o a petición): una dirección, robots/sitemap/llms.txt, meta y og, JSON-LD, velocidad, acceso a bots de IA, Search Console | Página en vivo indexable y referenciable por búsqueda de IA | references/seo-geo.md |
Punto de control (después de la fase 4). Muéstrale al propietario, brevemente: la línea base del mercado, las 3–5 prácticas que adoptarás, los vacíos que atacarás, el bloqueo visual y la tabla del plan. Obtén un "ok", luego construye. Si el propietario pidió velocidad, expón el plan y construye en el mismo turno.
No te detengas. Si algo falta (URL del producto, capturas de pantalla, precios), marca un TODO y continúa. Pregunta solo lo que bloquee el tipo de CTA o el idioma.
La estructura interna (siempre)
Cinco trabajos. Un trabajo puede abarcar varias secciones (p. ej., Oferta = resumen + precios + FAQ + CTA final). Los pesos son la proporción de la longitud/atención de la página — una forma objetivo, no una ley.
| # | Trabajo | Peso | Debe lograr |
|---|---|---|---|
| 1 | Primera pantalla | 5% | Qué es o el beneficio clave, para quién, un CTA primario (ninguno si es pre-producto) |
| 2 | Problemas y situación | 15% | Solo si los competidores usan un bloque de problemas. Entonces: el problema, contundente, solo con hechos reales. Si no, omitir: su peso se asigna a Beneficios + Producto |
| 3 | Beneficios | 20% | Lo que el lector obtiene, cada ventaja respaldada por un visual o prueba |
| 4 | Producto | 40% | Qué es + cómo funciona, comprensible en una pantalla |
| 5 | Oferta y CTA | 20% | Resumen de beneficios, qué ocurre después del clic, precio + reversión de riesgo, objeciones, CTA |
Beneficios + Producto ≈ 60% de la página. Si ya existe una LP activa, mantén el orden de sus secciones y mapea los trabajos sobre ella.
Cómo se combinan los competidores y nuestra estructura
- Mapea cada sección del competidor a uno de nuestros 5 trabajos (testimonios → Prueba de Beneficios, FAQ → Objeciones de Oferta, barra de logotipos → Prueba de Primera Pantalla, integraciones → Producto…). Esto proporciona una vista por trabajo del mercado.
- Línea base del mercado = patrones usados por la mayoría de competidores. Los compradores los esperan — inclúyelos (barra de logotipos, prueba gratuita, tabla comparativa, antes/después… lo que este nicho considere estándar).
- Mejor práctica = un patrón que (a) es usado por el líder de la categoría o por ≥2 competidores, o en páginas a las que dirigen anuncios pagados, y (b) sirve al trabajo de su bloque. Adóptalo, con nuestras palabras.
- Vacíos = objeciones que nadie responde, beneficios que nadie prueba, segmentos que nadie nombra, formatos que nadie usa (p. ej., nadie muestra resultados reales). Lidera con 1–2 de ellos: esa es la posicionamiento.
- Conflictos. Las reglas internas ganan por defecto; marca el conflicto en el punto de control y deja que el propietario decida. Típico: los competidores usan formularios de lead/quiz → nosotros mantenemos una acción principal (ver reglas base).
- El sistema visual proviene del conjunto de competidores (normalmente el líder): roles de paleta, tipografía, densidad, formato multimedia, forma del CTA. Copia el sistema, nunca su copy, números, logotipos o activos.
Reglas base (cualquier nicho)
- Primera pantalla fuerte: una descripción nítida o un beneficio gancho, más el avatar.
- Cada CTA se empareja con un beneficio concreto y dice qué ocurre a continuación.
- Muestra cómo funciona el producto con la interfaz real — cada paso de cómo funciona emparejado con una captura de pantalla/grabación real de ese paso, o permítele usarlo si los competidores lo hacen. Si no hay nada listo → deja un marco en blanco, correctamente dimensionado y etiquetado con lo que va allí. Nunca reemplaces la interfaz con una lista de texto, iconos o una interfaz inventada.
- Una acción principal, solo dos tipos de CTA: dentro del producto (Comenzar / Probar / Descargar / Registrarse) o reservar una llamada (idealmente un agendador integrado). Sin formularios de lead o quiz en la página. Permitido: un input de producto que comience a usar el producto (pegar un enlace, subir un archivo, ingresar una dirección) cuando así es como los competidores permiten probar.
- Nunca inventes pruebas, precios, estadísticas, testimonios o logotipos. Espacio vacío →
TODOvisible. - Solo contenido multimedia real del producto — sin interfaz falsa, sin stock donde debería ir contenido multimedia del producto.
- Cuando una práctica de mercado no esté clara o sea arriesgada, pregunta al propietario en lugar de adivinar.
Archivos
references/reference-standard.md— las cuatro landings de referencia: el listón de calidad, una biblioteca de patrones por trabajo, artesanía de copy y artesanía visual. Léelo en ambos modos.references/redesign.md— Modo B: auditar una página existente y mejorar su diseño.references/brief.md— brief primero con tarjeta, mapeo de fila de tarjeta a bloque, idioma, tipo de CTA.references/competitor-research.md— cómo encontrar competidores, qué páginas, captura, plantilla de desglose, reglas de síntesis. El núcleo del skill.references/framework.md— los 5 trabajos en detalle, reglas por bloque, madurez del mercado, tabla del plan.references/visual-system.md— derivar y fijar un sistema visual a partir de competidores (cualquier nicho).references/build.md— stack, copy, contenido multimedia, cableado de CTA, oferta/precios, QA, entrega.references/seo-geo.md— antes de publicar: checklist técnico de SEO y GEO (búsqueda IA), desde el dominio hasta Search Console.references/examples.md— ejemplos trabajados (diferentes nichos). Ejemplos, no reglas.scripts/capture.mjs— capturas de pantalla + extracción de estructura/visual para URLs de competidores.templates/teardown.md— archivo de desglose para rellenar.