Habilidad Maestra de Páginas de Aterrizaje para UMKM

0. Misión

Crea una página de aterrizaje distintiva, confiable y mobile-first que ayude a un negocio real a convertir visitantes en clientes.

Esta habilidad coordina seis responsabilidades de especialistas:

Orquestación e investigación del proyecto — comprender el briefing, inspeccionar el proyecto existente, extraer contenido y activos, planificar la construcción y mantener una ruta de entrega clara.
Estrategia de conversión — definir la audiencia, la oferta, las objeciones, la jerarquía del mensaje, la estructura de la página y la acción principal.
Dirección creativa — desarrollar un concepto visual original arraigado en la marca, el producto, la audiencia y las referencias del mundo real.
Implementación frontend — construir HTML/CSS/JavaScript semántico, mantenible y responsive con activos verificados.
Revisión de diseño y anti-decoración AI — evitar patrones visuales genéricos de IA y hacer que cada decisión de diseño sea intencionada.
QA de navegadores y preparación para implementación — inspeccionar la página renderizada, probar interacciones y estados responsivos, corregir defectos y preparar para Vercel.

Resultado principal: un sitio web HTML/CSS/JavaScript funcional listo para Vercel. Conserva un framework o arquitectura de proyecto existente cuando se proporcione; no migres un proyecto funcional sin una razón clara.

1. Principios no negociables

1.1 Hechos antes que decoración

Trata el PRD del usuario, los documentos comerciales, los menús, las listas de precios, los banners y el contenido del sitio web aprobado como la fuente de verdad.
Nunca inventes precios, ingredientes, disponibilidad de productos, horarios de atención, direcciones, cobertura de entrega, certificaciones, premios, testimonios, calificaciones, recuentos de clientes o afirmaciones comerciales.
Cuando falte información, omítela, márcala como NECESITA DATOS o haz una pregunta enfocada si bloquea materialmente la construcción.
Distingue hechos verificados, suposiciones de diseño razonables y contenido que necesita confirmación del cliente.

1.2 Los activos son contenido

Inspecciona los banners, fotos, logotipos, PDF, menús y folletos proporcionados antes de diseñar.
Conserva los logotipos de la marca y la fotografía de productos con precisión. No reemplaces un logotipo proporcionado con una interpretación de IA.
Construye un inventario de activos: nombre de archivo, dimensiones, formato, tema, ubicación probable, fuente y estado de verificación.
Prefiere la fotografía original del negocio. Usa imágenes generadas o de stock solo cuando esté permitido y distínguelas claramente de la evidencia real del cliente/producto.
No fabriques testimonios ni uses personas ilustrativas como si fueran clientes reales.

1.3 Una audiencia, una oferta, una acción principal

Define la audiencia principal y el resultado comercial más importante.
Selecciona una acción de conversión dominante, por ejemplo: pedir por WhatsApp, llamar, visitar la tienda, solicitar presupuesto, reservar cita o comprar.
Las acciones secundarias no deben competir con el CTA principal en la parte superior de la página.
Haz que el texto del CTA sea específico para la acción y el destino, no un genérico "Más información".

1.4 Liderado por la marca, no por la plantilla

Cada negocio necesita una dirección visual intencional propia.
No recicles la misma composición de héroe, paleta, tipografía, diseño de tarjetas, estilo de íconos y orden de secciones en marcas no relacionadas.
Las referencias son para extraer principios e ideas de interacción, no para copiar la identidad de otra marca.
No uses asimetría, tipografía sobredimensionada, parallax, degradados, glassmorphism o animación solo para parecer creativo. Úsalos solo cuando encajen con la marca y mejoren la comunicación.

1.5 Mobile-first y rápido

Diseña primero para pantallas estrechas, luego expande a tablet y escritorio.
Prioriza texto legible, CTA fácil de alcanzar, imágenes de carga rápida, navegación clara y pedidos sin fricción.
Respeta las preferencias de movimiento reducido y evita el movimiento que interfiera con la lectura o la compra.

2. Contextos de negocio compatibles

Adapta la estructura y el lenguaje visual al negocio real:

Comida y bebida: kebab, dimsum, panadería, cafetería, restaurante, catering, marcas de snacks y bebidas.
Venta al por menor y moda: ropa, accesorios, cosméticos, regalos, marcas de productos locales.
Servicios: salón de belleza, reparaciones, educación, servicios para eventos y otros servicios locales.

No fuerces todas las categorías de negocio en la misma estructura de página. Los negocios basados en menús necesitan descubrimiento y pedido de menú; los servicios basados en citas necesitan confianza, explicación del servicio, disponibilidad y reserva; la moda puede necesitar colecciones, información de tallas, materiales y flujo de compra.

3. Resumen del flujo de trabajo

Sigue estas fases en orden. Puedes combinar pasos cuando el proyecto sea pequeño, pero no omitas la inspección de la fuente, la dirección creativa, la implementación responsive o el QA.

Toma de requerimientos y reconocimiento del repositorio.
Extracción de fuente de verdad, contenido y activos.
Audiencia, oferta, objeciones y estrategia de conversión.
Descubrimiento de la vibra específica de la marca y dirección creativa.
Arquitectura de la información, plan de secciones y texto.
Implementación en HTML/CSS/JavaScript.
Revisión de gusto de diseño y anti-decoración AI.
QA en navegadores, pruebas responsivas y de interacción.
SEO, accesibilidad, rendimiento y preparación para Vercel.
Informe de entrega con estado verificado y limitaciones conocidas.

4. Fase 1 — Toma de requerimientos e investigación del proyecto

4.1 Inspeccionar antes de cambiar

Inspecciona el repositorio, el framework existente, los archivos de paquete, las rutas, los componentes, las convenciones CSS y la configuración de implementación.
Identifica si se trata de una construcción nueva, un rediseño o una mejora.
Conserva la arquitectura funcional y los elementos aprobados por la marca a menos que el usuario solicite explícitamente un cambio.
No sobrescribas el trabajo existente antes de comprenderlo.
Identifica las herramientas disponibles de navegador, captura de pantalla, imagen e implementación. No afirmes que se usó una herramienta a menos que realmente se haya invocado.

4.2 Leer todas las entradas proporcionadas

Inspecciona archivos y referencias relevantes, que pueden incluir:

PRD, briefing, guía de marca, catálogo de productos, menú, lista de precios, promociones, folletos, PDF, archivos de Word, hojas de cálculo.
Diseños de banners, logotipos, fotografías de productos, empaques, fotos de tiendas, imágenes de redes sociales.
URLs de sitios web existentes, perfiles sociales, sitios web de referencia, referencias de capturas de pantalla.
Instrucciones del usuario, historial de revisiones, texto aprobado, restricciones y exclusiones.

4.3 Crear una ficha informativa del proyecto

Registra:

Nombre del negocio y categoría.
Ubicación y área de servicio, solo cuando se proporcione o verifique.
Audiencia objetivo y contexto de compra.
Productos/servicios y precios verificados.
Puntos de venta únicos respaldados por evidencia.
Métodos de pedido, reserva, pago, entrega y contacto.
Horario de atención, políticas y restricciones.
Evento de conversión principal.
Identidad de marca y activos existentes.
Desconocidos y suposiciones.

Salida: un PROJECT-FACTS.md conciso o una nota de trabajo equivalente cuando el alcance del proyecto lo justifique.

5. Fase 2 — Extracción de contenido y activos

5.1 Extracción de texto

Extrae texto factual de documentos e imágenes proporcionados.
Reconoce datos duplicados o conflictivos utilizando la fuente más nueva explícitamente aprobada.
Conserva los nombres de productos originales y la ortografía a menos que el usuario solicite edición.
Conserva precios, variantes, tamaños, ingredientes, dimensiones y términos exactamente.
Señala hechos conflictivos en lugar de elegir uno en silencio.

5.2 Catálogo de imágenes y activos

Para cada imagen proporcionada, registra:

Ruta/nombre del activo.
Dimensiones y tipo de archivo.
Tema y contenido visible.
Relevancia para la marca/producto.
Sección propuesta y recorte.
Si el activo es original, de stock, generado o desconocido.
Estado de verificación.

5.3 Reglas de uso de imágenes

Usa imágenes reales de productos para tarjetas de producto y elementos del menú siempre que estén disponibles.
No reemplaces el logotipo real con texto, un icono o un logotipo inventado.
No recortes texto importante, detalles del producto, empaques o elementos de la marca.
Usa object-fit y object-position deliberadamente; diferentes imágenes de origen pueden necesitar diferentes recortes.
Optimiza archivos grandes en formatos responsivos adecuados cuando las herramientas lo permitan.
Añade texto alternativo significativo; usa texto alternativo vacío para imágenes puramente decorativas.
Verifica cada URL de imagen final o ruta local en el navegador.

Salida: un mapa de activos y una lista de activos faltantes.

6. Fase 3 — Estrategia de conversión

6.1 Brief de conversión

Define:

Audiencia: ¿Quién es más probable que compre o consulte?
Contexto: ¿De dónde vienen los visitantes y qué saben ya?
Oferta: ¿Qué se está vendiendo o solicitando?
Valor: ¿Qué beneficio tangible recibe el cliente?
Fricción: ¿Qué dudas impiden la acción?
Prueba: ¿Qué evidencia real puede reducir esas dudas?
Acción: ¿Qué exactamente debería hacer el visitante a continuación?

6.2 Descubrimiento de objeciones

Considera objeciones relevantes, como:

Precio y valor.
Calidad y frescura del producto.
Porción, tamaño, ingredientes o materiales.
Confianza, higiene, fiabilidad y calidad del servicio.
Ubicación, entrega y disponibilidad.
Pasos de reserva, pago o pedido.
Política de devolución, cancelación o garantía.

Solo aborda objeciones con información respaldada. No inventes pruebas.

6.3 Jerarquía del mensaje

Título principal: comunica la oferta o el resultado, no solo el nombre del negocio.
Subtítulo: aclara lo que se ofrece, para quién y por qué es importante.
CTA principal: verbo específico más acción clara.
Beneficios: conecta las características con los resultados del cliente.
Prueba: coloca evidencia real de respaldo cerca de las afirmaciones que respalda.
FAQ: resuelve la fricción de compra restante.
CTA final: reelabora el siguiente paso claramente.

6.4 Ejemplos de CTA

Comida: "Pesar Dimsum via WhatsApp", "Ver Menú", "Pesar para Evento".
Cafetería: "Ver Menú de Café", "Pesar para Recoger", "Ver Ubicación".
Moda: "Comprar Colección", "Ver Guía de Tallas".
Servicios: "Reservar Cita", "Solicitar Presupuesto", "Consultar via WhatsApp".

Verifica las URLs de destino, números, plantillas de mensajes y parámetros de seguimiento antes de la entrega.

7. Fase 4 — Descubrimiento de la vibra y dirección creativa específica de la marca

7.1 Lee la marca antes de seleccionar un estilo

Deduce del negocio:

Personalidad y posicionamiento de la marca.
Textura, material, origen, contexto o artesanía del producto.
Expectativas de la audiencia y mentalidad de compra.
Contexto local/cultural, solo cuando esté respaldado.
Convenciones de la competencia que vale la pena diferenciar.
La sensación que el sitio web debería evocar.
Con qué no debería confundirse nunca el sitio web.

7.2 Crear una dirección única

Escribe una tesis visual breve que especifique:

Nombre y concepto de la dirección.
Estado de ánimo y respuesta emocional deseada.
Roles tipográficos y justificación.
Paleta de colores con roles semánticos.
Enfoque de diseño/composición.
Dirección artística de la imagen y principios de recorte.
Tratamiento de superficie, borde y profundidad.
Elemento de diseño característico.
Principios de movimiento.
Adaptación móvil.

No te limites a mapear cada proyecto a un estilo preestablecido. Combina influencias visuales de manera reflexiva, pero haz que la combinación sea coherente y apropiada.

7.3 Verificación de frescura y anti-convergencia

Antes de codificar, pregúntate:

¿Podría este diseño pertenecer a cualquier marca no relacionada?
¿Es la composición del héroe simplemente el defecto de IA más común?
¿Están justificadas las elecciones de color y fuente por la marca?
¿Hay una idea visual reconocible?
¿Están las secciones organizadas para esta audiencia y objetivo de conversión?
¿Tiene la experiencia móvil su propia composición en lugar de simplemente encoger la de escritorio?

Si el concepto parece genérico, revisa la dirección artística antes de la implementación.

7.4 Sistema de diseño

Define tokens antes del estilo de los componentes:

Colores: fondo, superficie, texto, texto atenuado, borde, primario, acento, estados semánticos.
Tipografía: display, título, cuerpo, etiqueta, metadatos.
Escala tipográfica y alturas de línea.
Escala de espaciado.
Anchuras de contenedor y puntos de interrupción.
Reglas de radio y borde.
Elevación/profundidad.
Duración y easing del movimiento.

Usa un sistema restringido y específico de la marca. No prohíbas universalmente una fuente, color, diseño o efecto; evítalo cuando sea un defecto injustificado.

Salida: DESIGN.md o una especificación de diseño documentada equivalente.

8. Fase 5 — Arquitectura de la información y composición de secciones

8.1 Elegir secciones según las necesidades del negocio

Las secciones posibles incluyen:

Barra de anuncios.
Encabezado/navegación.
Héroe.
Resumen de productos o servicios.
Menú/catálogo/colección.
Beneficios y diferenciadores.
Ingredientes/materiales/proceso.
Cómo pedir o reservar.
Galería.
Testimonios/reseñas (solo reales).
Ubicación y horario de atención (solo verificados).
Precios/paquetes (solo verificados).
FAQ.
Contacto y CTA final.
Pie de página.

Esta es una biblioteca de componentes, no un orden obligatorio. Selecciona, renombra, combina, elimina y reordena las secciones según el briefing y el recorrido del visitante.

8.2 Prueba de propósito de la sección

Cada sección debe responder al menos una pregunta:

¿Qué necesita entender el cliente?
¿Con qué decisión u objeción ayuda?
¿Qué evidencia proporciona?
¿Qué acción facilita?

Elimina secciones que no añadan valor significativo.

8.3 Requisitos del héroe

La primera pantalla debe dejar claro:

Qué negocio/producto/servicio es este.
Para quién es o qué ofrece.
Por qué el visitante debería importarle.
Cuál es la siguiente acción.

Usa el mejor activo de marca/producto disponible. No fuerces un héroe de dos columnas, título centrado, maqueta de panel flotante o degradado decorativo.

9. Fase 6 — Implementación en HTML/CSS/JavaScript

9.1 Selección del stack

Si se proporciona un proyecto existente, conserva su stack a menos que se solicite explícitamente una migración.
Para una nueva página estática, por defecto usa HTML5 semántico, CSS externo y JavaScript vainilla mínimo.
Usa React/Vite/Next.js solo cuando lo solicite el proyecto o esté justificado.
No añadas un framework o dependencia solo para animar un elemento pequeño.
Fija o documenta las dependencias; evita scripts innecesarios y bibliotecas remotas.

9.2 Estructura estática sugerida

proyecto/
├── index.html
├── styles.css
├── script.js
├── assets/
│   ├── images/
│   ├── icons/
│   └── fonts/
├── README.md
└── vercel.json        # solo cuando sea necesario

9.3 Requisitos HTML

Usa landmarks semánticas: header, nav, main, section, article, footer, aside.
Cada sección debe tener un encabezado.
Usa alt significativo en cada <img>.
El botón del CTA principal debe ser un <a> o <button> con un atributo href o onclick funcional.
Todos los enlaces deben tener un destino verificable.
Las URLs de navegación pueden ser marcadores en una página de una sola página.
Usa loading="lazy" para imágenes debajo del pliegue y fetchpriority="high" para la imagen del héroe.
Incluye metadatos del viewport, etiqueta de título y meta descripción.

9.4 Estilo CSS

Usa un único styles.css externo, a menos que el proyecto justifique CSS Modules, Tailwind o un preprocesador.
Organiza CSS por: base/reset, tokens de diseño, diseño, componentes, utilidades, consultas de medios.
Escribe consultas de medios en mobile-first (min-width).
Define un contenedor centrado con max-width y padding.
Usa grid y flexbox para el diseño; evita flotadores y posicionamiento absoluto para el flujo principal.
No uses !important.
Usa unidades relativas (rem, em, %) para el texto y el espaciado, px o vw para los bordes.
Verifica que la densidad de píxeles y la entrega de imágenes sean correctas.
Usa variables CSS (--prop) para los tokens de diseño.
Incluye prefers-color-scheme, prefers-reduced-motion y consultas de medios de contraste.
Prueba el zoom del texto (200%) para verificar que el diseño sea resistente.
Usa técnicas de maquetación de imágenes y relación de aspecto para evitar cambios de diseño.

9.5 JavaScript

Mantén el JS mínimo y vainilla.
Carga el script de forma diferida o al final del <body>.
Usa delegación de eventos para múltiples elementos similares.
No bloquees la representación con solicitudes síncronas.
Maneja los estados de carga, vacío y error de red.
Usa Intersection Observer para la carga diferida y la animación de entrada.

9.6 Incluir scripts de terceros

No añadas analytics, píxeles de anuncios, mapas incrustados, widgets de chat o reproductores de video sin una razón clara.
Si el proyecto necesita un mapa, usa un enlace de Google Maps en lugar de un iframe.
Si el proyecto necesita un formulario, usa un servicio de formularios externo (como Formspree) o una acción mailto: para empezar.
Si el proyecto necesita un carrito o pago, usa un enlace externo en lugar de JavaScript personalizado a menos que se especifique lo contrario.

9.7 Estados de componentes

Cubre al menos estos estados visibles para elementos interactivos:

Enlace: :link, :visited, :hover, :focus-visible.
Botón: normal, hover, focus, active, disabled.
Campo de formulario: normal, focus, error, éxito.
Diálogo/off-canvas: abierto, cerrado, transición.
Estado vacío: cuando la lista de productos/revisiones está vacía.
Estado de error: cuando los datos no se pueden cargar.

9.8 Progresividad y rendimiento

El contenido principal debe ser visible y funcional sin JavaScript.
La animación y la interactividad deben ser mejoras progresivas.
No hagas que el héroe dependa de una cuadrícula de JavaScript, un lienzo, WebGL o una biblioteca de animación.
La puntuación de Lighthouse para rendimiento debe ser al menos 90 (objetivo).
Después de la implementación, verifica la velocidad de carga en una conexión 3G simulada y un dispositivo de gama baja.

10. Fase 7 — Revisión de gusto de diseño y anti-decoración AI

10.1 Revisión de autenticidad de la marca

Pregunta para cada sección:

¿Podría esta sección existir tal cual en el sitio web de un competidor?
¿Hemos usado el activo más distintivo de la marca aquí?
¿Se siente personalizado o de estantería?
¿Tomamos una decisión de diseño que ninguna otra marca tomaría?

10.2 Lista de verificación de señales de alerta de AI

Marca las secciones que utilizan estos patrones comunes de IA:

Título centrado y hero de dos columnas con mockup.
Mockup de dashboard flotante o dispositivo.
Degradados y glassmorphism sin justificación de marca.
Tarjetas con iconos para beneficios sin fotos de productos reales.
Secciones de testimonios con nombres genéricos y comillas.
Secciones de estadísticas ("99% de satisfacción") sin pruebas.
Sección de equipo con fotos de archivo.
Animaciones que no sirven a la comprensión o conversión.

10.3 Pasos de corrección

Elimina o reemplaza la sección por una basada en activos reales.
Reemplaza el mockup con el producto o la foto del local.
Cambia el icono genérico por fotografía del producto o demostración del proceso.
Elimina testimonios y estadísticas falsos a menos que el cliente los haya proporcionado.
Simplifica las animaciones que distraen de la acción principal.

Salida: informe de revisión con cada problema y corrección aplicada.

11. Fase 8 — QA en navegadores, pruebas responsivas y de interacción

11.1 Pruebas de diseño

Abre la página en un navegador real (Chrome, Firefox, Safari).
Verifica que todas las imágenes se carguen y muestren con el recorte y la relación de aspecto correctos.
Verifica logotipos, iconos, fuentes y elementos visuales personalizados.
Verifica en pantalla estrecha (320-480px), mediana (768px), ancha (1024px-1280px) y muy ancha (1440px+).
Verifica la legibilidad en modo claro y oscuro.

11.2 Pruebas de interacción

Haz clic en cada enlace y botón.
Verifica los objetivos de WhatsApp, teléfono, mapa y correo electrónico.
Envía formularios (si los hay) con datos válidos, datos faltantes y entrada no válida.
Verifica el CTA: ¿es clickable, visible y preciso?
Verifica la navegación: ¿los enlaces de anclaje se desplazan a la sección correcta?

11.3 Pruebas de contenido

Verifica que todos los precios, nombres de productos y horarios coincidan con la fuente de verdad.
Verifica que no haya texto de relleno, lorem ipsum o texto genérico.
Verifica los estados NEEDS DATA; no deben estar visibles en la versión final.

11.4 Correcciones y registro

Registra el estado actualizado de cada fallo después de la corrección.
Vuelve a probar en los mismos navegadores y anchos de ventana.
Asegúrate de que la puntuación de Lighthouse sea aceptable antes de la implementación.

12. Fase 9 — SEO, accesibilidad, rendimiento y preparación para Vercel

12.1 SEO en la página

Establece <title> descriptivo con el nombre del negocio y la ubicación.
Escribe una <meta name="description"> natural, atractiva y que incluya palabras clave.
Usa un solo <h1> que coincida con el propósito de la página.
Usa encabezados jerárquicos (h2, h3, h4).
Usa atributos alt descriptivos para imágenes.
Marca el nombre del negocio, la dirección y el número de teléfono con JSON-LD cuando sea apropiado.

12.2 Accesibilidad

Todos los elementos interactivos deben ser accesibles por teclado.
El foco visible debe estar presente en todos los elementos interactivos.
El contraste de color del texto debe cumplir con AA (relación de contraste >= 4.5:1 para texto normal).
Los enlaces de salto deben estar presentes.
Los atributos ARIA deben usarse solo cuando los elementos HTML semánticos sean insuficientes.
Los lectores de pantalla deben experimentar una jerarquía y flujo de contenido lógicos.

12.3 Preparación para Vercel

El proyecto debe ser una carpeta de sitio estático o un framework soportado por Vercel.
Incluye un vercel.json solo cuando sea necesario para reglas de reescritura o encabezados. Para sitios estáticos simples, Vercel detecta automáticamente la configuración.
Todas las rutas de activos deben ser relativas y verificadas.
Antes de la entrega, prueba la construcción local.

13. Fase 10 — Informe de entrega

Genera un informe final que incluya:

Resumen del proyecto: nombre, categoría, stack.
Estado de la fuente de verdad: qué se utilizó y qué se verificó.
Estado de los activos: mapa con verificación de cada imagen.
Decisiones de diseño: breve justificación de la dirección visual.
Checklist de QA: páginas probadas, resultados y correcciones registradas.
Estado de Vercel: comprobación de la implementación.
Limitaciones conocidas: elementos que no se pudieron verificar, datos faltantes, problemas conocidos.
Elementos de acción: lo que el cliente necesita proporcionar a continuación (fotos reales, contenido, precios, etc.).

14. Principios de comunicación con el usuario

Comunica el progreso en etapas discretas, no con secuencias de comandos.
Muestra tu trabajo: comparte capturas de pantalla del progreso real y archivos editados.
Pide permiso antes de sobrescribir contenido existente.
Haz invitaciones claras: "¿Quieres que ajuste la sección de héroe o pasamos a la siguiente sección?"
Cuando faltan datos, no los inventes. Pregunta o marcadores.
Cuando no estés seguro, di "No lo sé". No inventes contenido o código que no hayas verificado.
Cuando te pidan que cambies algo del diseño final, haz el cambio en el archivo fuente, no solo con CSS en línea en las herramientas de desarrollo.
Cuando ejecutes comandos de terminal, confirma que se ejecutaron antes de afirmar el resultado.

15. Metodología aplicable

Esta habilidad se puede adaptar a varios agentes y plataformas, incluyendo pero no limitado a:

Proyectos de código abierto.
Agentes de IA en Cursor, Windsurf, Claude Code, Claude Desktop, Codex.
Proyectos de estudiantes y talleres.
Pequeñas agencias digitales.

Sigue los principios de esta habilidad independientemente de la salida, ya sea código sin archivos escritos en el disco, archivos escritos en un repositorio real o una implementación desplegada.

Preguntar en tu IA favorita

Documentación