product-landing

Product Landing

Construye un sitio de marketing de una sola página para un producto único con un estilo visual coherente. Los archivos de sección en references/ contienen las reglas detalladas; este archivo contiene el flujo de trabajo y las reglas compartidas por todas las secciones.

Flujo de trabajo

Paso 1 — Preguntar (un solo mensaje, antes de escribir cualquier código)

Recopila la información bloqueante a continuación en un solo mensaje. Pregunta en el idioma del usuario.

• Omite cada elemento que el usuario ya haya proporcionado en su solicitud.
• Si no falta nada, omite este paso por completo.
• Ofrece un valor por defecto para cada elemento para que el usuario pueda responder brevemente u omitirlo.

Elemento	Valor por defecto si se omite
Nombre del producto + qué hace en una oración	— (obligatorio, no se puede omitir)
4–8 características clave	Derivar de la descripción del producto
Acción principal: etiqueta del botón + enlace	"Comenzar" → #
Precios: planes, precios, moneda — o "sin sección de precios"	Sin sección de precios
Color de marca	#229ED9

NO preguntes sobre nombre legal, dirección, contactos o enlaces a páginas legales — usa marcadores de posición (ver Paso 5). NO hagas rondas de seguimiento. Después de la respuesta, construye.

Paso 2 — Planificar

Decide en silencio, sin preguntar:

• Modo de visualización de características (agent / command / search / task) — ver references/features.md.
• 1–3 ejemplos por característica, los 3–4 pasos de "cómo funciona", todos los encabezados y el texto.

Paso 3 — Leer las reglas de la sección

Lee cada archivo justo antes de construir su sección, en orden de página:

1. references/hero.md — barra de navegación + hero
2. references/features.md — showcase de características + tabla (usa assets/feature-showcase.js)
3. references/how-it-works.md
4. references/pricing.md — omitir si no hay sección de precios
5. references/final-cta.md
6. references/footer.md

Paso 4 — Construir

Genera esta estructura de archivos (a menos que el usuario haya solicitado un framework):

• index.html

• css/styles.css

• js/main.js

• js/feature-showcase.js

• index.html — solo marcado. Sin bloques <style>, sin atributos style="" excepto donde un script los establezca, sin JS en línea. El único <script> en línea permitido es el bloque de ejemplos JSON de la sección de características.

• css/styles.css — todos los estilos. Comienza con los tokens de diseño en :root, luego las secciones en orden de página, cada una bajo un encabezado de comentario (/* ===== Hero ===== */).

• js/main.js — comportamiento de la página escrito por ti (estado de la barra de navegación, menú móvil, año en el pie de página, etc.).

• js/feature-showcase.js — copia assets/feature-showcase.js byte por byte. Nunca lo combines con main.js ni lo edites.

• Incluye archivos así:

  • <link rel="stylesheet" href="css/styles.css"> en <head>;
  • <script src="js/feature-showcase.js" defer></script> y <script src="js/main.js" defer></script> al final de <head>.

• Solo scripts simples — sin type="module", sin imports. La página debe funcionar al abrirse directamente desde el disco (file://).

• Solo rutas relativas, para que la carpeta se pueda subir a cualquier servidor tal cual.

Paso 5 — Verificar e informar

1. Revisa la lista de verificación de cada archivo de sección y la lista global a continuación. Corrige lo que falle.
2. Responde al usuario con una lista breve de todos los marcadores de posición que debe completar (nombre legal, dirección, contactos, enlaces a páginas legales, enlaces #, precios $XX).

Reglas globales

Hechos

Nunca inventes hechos sobre el negocio: precios, planes, números, nombres de clientes, testimonios, nombre legal, dirección, correos electrónicos, handles, URL. Usa marcadores de posición obvios y enuméralos en el Paso 5.

Tokens de diseño

Define estos como variables CSS en :root y úsalos exclusivamente:

:root {
  --brand: #229ED9;              /* reemplazado por el color de marca del usuario */
  --brand-tint: color-mix(in srgb, var(--brand) 12%, white);
  --text: #0A0A0A;
  --text-muted: #6B6B70;
  --surface: #EEEEF1;            /* tarjetas, placas */
  --bg: #FFFFFF;
  --hairline: rgba(0, 0, 0, 0.08);
  --font: "Inter", system-ui, -apple-system, sans-serif;
  --container: 1040px;
}

• Solo tema claro. Un color de acento (--brand); todo lo demás es negro, gris y blanco.
• Fuente: Inter de Google Fonts (pesos 400, 500, 600, 700, 800).
• Iconos: Phosphor Icons a través de https://unpkg.com/@phosphor-icons/[email protected] (versión fija).

Encabezado de sección (compartido por características, cómo funciona, precios)

• H2: clamp(32px, 5vw, 48px), peso 800, letter-spacing: -0.03em, line-height: 1.05, --text, alineado a la izquierda.
• Subtítulo opcional: 18px, regular, --text-muted, ancho máximo ~540px, 12px debajo.

Espaciado y ritmo

• Contenedor de contenido: max-width: var(--container), padding lateral 24px (16px en móvil).
• Espacio vertical entre secciones: clamp(80px, 12vw, 140px).
• Alterna secciones pesadas y ligeras. Nunca hagas dos secciones interactivas consecutivas.

Texto

• Sencillo, concreto, humano. Oraciones cortas. Sustantivos y números reales.
• Palabras prohibidas: sin fisuras, potente, revolucionario, desbloquear, sobrealimentar, sin esfuerzo, de vanguardia.
• Todo el texto de la página en el idioma que el usuario solicitó (por defecto: el idioma de la descripción del producto).

Animación

• Solo sutil: elevaciones al pasar el ratón, transiciones de 150–250 ms, fundido opcional una sola vez al hacer scroll.
• Todo respeta prefers-reduced-motion.
• La única animación en bucle en la página es el pulso de la marca del héroe (ver references/hero.md). Sin otras animaciones infinitas.

Lista de verificación global

• Solo las secciones listadas en el Paso 3, en ese orden.
• Solo colores de los tokens; un color de acento.
• Sin hechos inventados sobre el negocio; todos los marcadores de posición reportados al usuario.
• El CTA del héroe, el CTA de la barra de navegación y el CTA final son la misma acción.
• Sin desplazamiento horizontal de página a 375px; todo legible en móvil.
• Conceptos básicos de teclado y lector de pantalla: botones reales, texto alternativo, estados de enfoque visibles.
• Cada <script> en línea termina solo en su etiqueta de cierre real: sin </script dentro de código JS, comentarios o cadenas.
• Archivos: index.html, css/styles.css, js/main.js, js/feature-showcase.js — nada más, sin CSS/JS en línea.
• js/feature-showcase.js es idéntico a assets/feature-showcase.js.
• El bloque de ejemplos JSON no contiene texto </script.
• La página funciona cuando index.html se abre directamente desde el disco.