ralvarez-ai/landing-page-designer

Diseñador de páginas de aterrizaje (rondas de propuestas)

El método para proponer páginas de aterrizaje en rondas, en qué se basa cada decisión y las comprobaciones que una página debe superar antes de que alguien la vea. Aguas arriba de esta habilidad: website-concept-architect (qué es el sitio). Aguas abajo: ui-ux-architect (portar a la aplicación).

0. El trabajo, y lo que no es

• Dibujar, no refactorizar. La salida son propuestas bajo <proposals-dir>/<date>/<product>/. No tocar el código de envío de la aplicación; no hacer commit ni push a menos que el propietario lo indique.
• Una página está terminada solo cuando pasa la barra de verificación (sección 8) y sus afirmaciones están rastreadas (sección 2).
• Trabajar en rondas. Cada ronda produce nuevas direcciones, mantiene las antiguas como biblioteca de ideas y termina con una recomendación y la razón por la que supera a las demás.

1. El listón (qué significa "impresionante")

Juzga cada captura de pantalla contra esta lista.

1. Cinco segundos. Un desconocido puede decir qué hace el producto, para quién es y por qué es diferente, solo con el primer viewport.
2. Un dispositivo. La página se recuerda por una cosa específica y exclusiva del producto, no por un color. Los buenos dispositivos son literales: el cursor en el logotipo usado como un cursor real; un número real que se mueve; un intercambio agente-servidor mostrado como las dos llamadas que realmente son; una notificación push que llega a un teléfono en el momento que lo dice el texto.
3. Concreto, no abstracto. Cada afirmación apunta a algo en el producto o su código.
4. Los píxeles reales vencen a la ilustración. Una captura de pantalla recortada del producto en funcionamiento supera a cualquier dibujo del mismo.
5. Di la compensación. El texto indica qué hace, para quién es y la única cosa que acepta a cambio (autoalojado: tus actualizaciones y copias de seguridad; un servicio compartido: una dependencia más; solo entrega: la política permanece en la aplicación).
6. Prohibido: fotografía de archivo, degradados morados, cuadrículas bento de tarjetas grises con un icono cada una, "Confiado por 10,000 equipos", testimonios inventados, métricas falsas.

2. Investigación primero: hechos con fuentes

Antes de dibujar, construye una tabla de hechos por producto: afirmación, valor, archivo fuente. Lee el código, no el marketing.

• Dónde mirar: README.md, AGENTS.md/CLAUDE.md, documentos de diseño y ADR, CHANGELOG.md, validadores y códigos de error, registros de herramientas/endpoints, asignaciones wire/proto, constantes de worker/reintentos, el componente de la marca, el archivo de tokens de tema, la vista de aterrizaje existente.
• Hechos que vale la pena encontrar: nombres exactos de herramientas y cuántas son destructivas; códigos de error y mensajes; constantes (intentos de reintento, base de backoff y tope, intervalo de sondeo, límites de confianza); campos de solicitud (cuéntalos en la asignación wire, no en el doc); rutas; comandos reales de inicio rápido.
• Verifica recuentos y nombres en el código. Los docs se desvían: unos "seis campos" documentados pueden ser ocho en el código; un README puede apuntar a un directorio que ya no existe; un ejemplo principal puede usar una unidad que el servidor rechaza.
• Señala, nunca arregles en silencio. Las inconsistencias (marca obsoleta en capturas, capturas que no coinciden, doc vs código) van en NOTES.md y, si es relevante, en la página.
• Etiqueta los datos ilustrativos en la página (entradas de ejemplo, ids, horas, texto de notificación). El lector debe distinguir lo real de lo de muestra sin las notas.

3. Marca y familia

• Cada producto mantiene su propia marca y acento. Copia la ruta real de la marca desde su componente y los tokens reales (fondos, texto, apagado, acento, texto de acento, colores semánticos) desde el archivo de tokens, ambos temas.
• Fuentes: solo las del producto, copiadas como woff2 en fonts/. Inspecciónalas antes de elegir una voz tipográfica:

  python -c "from fontTools.ttLib import TTFont; t=TTFont('inter-latin.woff2'); print([(a.axisTag,a.minValue,a.maxValue) for a in t['fvar'].axes])"
  

  Una fuente variable declarada en todo su rango de peso puede dar numerales de pelo fino para un producto y un peso pesado cinético para otro, sin nuevas fuentes.
• Un kit de marca de organización es familia, no plantilla. Úsalo para pequeños detalles compartidos (una marca de pie, un crédito de pie de página en currentColor), nunca como la identidad del producto.
• Capa de familia: un archivo compartido con tokens de espaciado, tipo y movimiento, encabezado, botones, pie de página, riel de sección, control de película, botón de copia y el kit de movimiento. Los productos anulan el color, la voz tipográfica y la composición. Varias páginas deben leerse como hermanas con personalidades distintas.

4. Dirección de arte por producto

Decide una personalidad antes del diseño; deja que impulse el tipo, la cuadrícula, el peso del color y el ritmo. Ejemplos que funcionaron:

Personalidad	Voz tipográfica	Composición y ritmo
Tranquilo, editorial (finanzas)	Una enorme figura principal con peso ligero y numerales tabulares; mono para líneas de contabilidad	Amplio espacio en blanco, cuadrícula asimétrica, una banda nocturna, una captura real a sangre
Ruidoso, cinético (fitness)	Peso negro, tracking negativo ajustado, numerales sobredimensionados	Banda de acento a sangre con un ticker, reglas duras, secciones ruidosas y tranquilas alternadas
Técnico, exacto (identidad)	Anotaciones mono, grandes numerales mono	Cuadrícula de fondo de pelo fino, figuras numeradas con leyendas, diagramas anotados
Escueto, rítmico (notificaciones)	Palabras de estado mono gigantes	Regla de tiempo como motivo recurrente, espacio negativo, una sección fijada

• Evita el esqueleto predeterminado (ceja, h1, lede, dos botones, lista de confianza, brillo) a menos que lo cambies con intención. Una ronda donde cada producto comparte un esqueleto ha fracasado.
• Marca el ritmo de una página larga como una película: una sección tranquila, una ruidosa, un momento a sangre, una banda oscura, un cambio de fondo. El espaciado uniforme se lee como cosido.
• Diseña para 390 px a propósito: recortes propios de capturas para teléfonos, diagramas que se reordenan (apilar, bus lateral) en lugar de encogerse, contenido de la película sobre el pliegue.
• Verificación de hoja de contactos: renderiza los primeros viewports de todos los productos lado a lado (ambos temas, 1440 y 390). Busca uniformidad y rupturas familiares.

5. La película de héroe

Una secuencia coreografiada por producto que cuenta el producto en 4 a 8 segundos y se asienta en un estado final estático.

• El estado final es el HTML simple. JS desactivado y movimiento reducido lo muestran de inmediato; la película solo anima hacia él (un reset() para el estado inicial, pasos [ms, fn(instant)], limpieza con end()).
• Se reproduce una vez al verla, nunca en bucle; se pausa cuando la pestaña está oculta; tiene un control visible de Pausa/Reproducir (WCAG 2.2.2). La escritura dentro de una película está controlada por la línea de tiempo de la película, por lo que Pausa también la congela.
• Cuenta la verdad en secuencia. Usa el comportamiento real como trama: solicitud → rechazada con el error real → reenviar → guardado; tres copias → una; en cola → sondeo → enviado. No falsifiques un punto destacado que los datos no respalden.
• Movimientos de elemento compartido (un total volando hacia la figura heroica, tablas volando hacia una base de datos) hacen una escena en lugar de una lista de revelaciones.
• Texto accesible: la capa de escritura visible tiene aria-hidden; la oración completa está en un span .sr una vez.

6. Reglas de movimiento

• Puerta: contenido visible por defecto; un script de cabecera añade html.anim solo cuando prefers-reduced-motion lo permite; cada regla de ocultar o animar está bajo .anim.
• Opacidad solo en revelaciones de una sola vez (IntersectionObserver, termina en 1). Los efectos vinculados al desplazamiento (animation-timeline: view()/scroll(), scrubbing sticky) animan transform, clip-path o stroke solamente: un estado de texto semitransparente falla el contraste en axe.
• Permitido: animaciones CSS impulsadas por desplazamiento con respaldo estático, Transiciones de Vista para el cambio de tema (limpieza circular desde el alternador), resortes CSS linear(), animación de peso variable, contadores que escriben el texto final cuando el movimiento está desactivado.
• El contenido que se mueve automáticamente (tickers, reproducción automática) necesita un control de pausa y se pausa al pasar el ratón/enfocar.
• Mide el cambio de diseño; reserva espacio para contadores y texto escrito.

7. Capturas

• Solo del producto en ejecución, nunca un mockup del mismo. Genera datos de demostración de forma determinista para que los números coincidan entre capturas (o di en la página que no lo hacen).
• Recorta con intención (un panel por punto), ambos temas, 2x, más recortes separados para teléfono.
• Recorta la marca obsoleta y señálalo. Indica en los pies de foto cuando el lenguaje de la interfaz de usuario difiere del de la página.
• Implementa como un par <img> de claro/oscuro con height:auto, un alt significativo y marcadores posicionados en el espacio de coordenadas de la captura (mídelo; los marcadores se desvían).
• Si la compilación está bloqueada (paquetes privados, token faltante), dilo, etiqueta los datos dibujados como ilustrativos y lista el desbloqueo exacto.

8. Requisitos estrictos y barra de verificación

Cada página:

• HTML autocontenido, CSS y SVG en línea, sin CDN, solo las fuentes del producto; bajo 200 KB excluyendo capturas.
• Claro y oscuro mediante data-theme con un alternador (preferencia almacenada, valor predeterminado del sistema).
• Hitos, un h1, orden de encabezados sin espacios, enlace de salto, focus-visible, objetivos de 44 px, respaldo forced-colors.

Comprobaciones (todas deben pasar antes de mostrar a alguien):

1. verify.js: axe-core (wcag2a/2aa/21aa/22aa + best-practice) a 390x844 y 1440x800 × claro/oscuro × movimiento/reducido = 8 ejecuciones, cero violaciones. En modo movimiento, desplaza toda la página primero para que se activen las revelaciones. También: sin desplazamiento horizontal; imágenes bloqueadas aún legibles; JS desactivado aún legible.
2. Verificación del analizador HTML para texto tragado: un <token> o <no-reply@…> sin procesar en texto se convierte en una etiqueta y axe no te lo dirá. Escapa como <.
3. Prueba de humo por página: haz clic en cada control a 1440 y 390, falla en pageerror, ejecuta axe nuevamente en estados finales interactivos (diálogos abiertos, después de aplicar).
4. Capturas de pantalla: película estabilizada y movimiento reducido, ambos temas, ambos anchos. Míralas e itera al menos dos veces como un director de arte severo.
5. Di lo que no está cubierto: lector de pantalla, Safari/Firefox, dispositivos reales, pruebas de usuario de la afirmación de cinco segundos.

9. Trampas (cada una costó tiempo una vez)

• Especificidad CSS: una regla de cambio de tema para imágenes debe superar las reglas de componente (img.sl, no .crop img).
• Medir un elemento oculto da 0 (lente, zoom): muestra, luego mide.
• Los pasos inactivos atenuados por opacidad fallan el contraste: enfatiza con borde/fondo en su lugar.
• role="list" necesita hijos listitem; los títulos de sección no deben saltar de h1 a h3.
• Los fondos de brillo/malla necesitan a sangre, una máscara y body{overflow-x:clip}.
• Un <code> irrompible en una celda de cuadrícula causa desplazamiento horizontal a 390; un pre desplazable falla scrollable-region-focusable (dale tabindex="0", role="region" y una etiqueta única, o usa pre-wrap).
• Los nombres de clase genéricos chocan entre CSS compartido y de producto (.tl, .copy): espacio de nombres de clases de familia.
• cqw se resuelve contra un contenedor ancestro, nunca el elemento en sí.
• Un aria-label que difiere del texto visible rompe label-in-name; pon contexto extra en un span .sr.
• Una cadena de plantilla Python que falta su prefijo f filtra {label} en el nombre accesible: grepea la salida.
• Las imágenes con loading="lazy" faltan en las capturas de pantalla de página completa; no es un defecto.
• Las páginas ensambladas por extracción no se actualizan cuando una fuente cambia hasta que se vuelve a ejecutar el ensamblador.

10. Proceso

1. Lee el resumen/traspaso, el código del producto y los docs; construye la tabla de hechos y las banderas (sección 2).
2. Inventario de marca: ruta de marca, tokens, fuentes (ejes), capturas existentes y sus problemas.
3. Ronda de direcciones: 3 direcciones pequeñas y diferentes por producto, cada una construida alrededor de un dispositivo. Mantenlas como la biblioteca de ideas.
4. Comentarios del propietario → combina las mejores ideas en una página larga (riel de sección, FAQ, inicio rápido real con botón de copia, un bloque ponderado "qué aceptas").
5. Eleva el listón: una capa de familia compartida primero, luego una página con dirección de arte por producto con una película de héroe. Los productos independientes se pueden construir en paralelo (un agente por producto, capa de familia de solo lectura, sugerencias reportadas y aplicadas una vez, luego todas las páginas reconstruidas y reverificadas).
6. Revisen juntos: hojas de contactos, correcciones de consistencia en la capa de familia, reverificación completa.
7. Entrega: por producto un NOTES.md (concepto, real vs muestra, banderas, tabla de verificación); un HANDOFF.md para la próxima sesión (objetivo, decisiones, banderas, debilidades, próximas ideas); vistas previas independientes solo para visualización con fuentes y capturas en línea; un resumen breve con una recomendación por producto y por qué gana.

11. Archivos y herramientas

<proposals-dir>/<date>/
  HANDOFF.md                  resumen para la próxima sesión
  <product>/direction-N.html  páginas; NOTES.md; fonts/; shots/
  _tools/verify.js            axe x8, desbordamiento, imágenes bloqueadas, JS desactivado
  _tools/family.py            shell compartido, tokens, kit de movimiento (film, count, type, onView)
  _tools/build_<product>.py   un generador por producto
  _tools/settled.js           captura de pantalla después de que la película se estabilice
  _tools/standalone.py        copia solo de visualización con fuentes y capturas en línea
  _tools/smoke_<product>.js   pruebas de humo de interacción

Los generadores llevan rutas codificadas de la sesión que los creó; corrige sys.path y las rutas de salida antes de ejecutar. verify.js espera [email protected] instalado en un verify/node_modules hermano.

12. Lista de verificación antes de mostrar una página

• El primer viewport pasa la prueba de cinco segundos; el dispositivo único es visible allí.
• Cada número y nombre rastreado hasta un archivo; datos de muestra etiquetados en la página; banderas en NOTES.md.
• Compensación expresada claramente y con peso visual.
• La película de héroe se estabiliza; el estado final es el HTML predeterminado; Pausa/Reproducir funciona; movimiento reducido y JS desactivado se leen bien.
• Los efectos vinculados al desplazamiento usan solo transform/clip/stroke; las revelaciones son de una sola vez.
• Diseñado para 390 px (recortes propios, diagramas reordenados), no solo apilados.
• verify.js TODO LIMPIO (8 ejecuciones), verificación del analizador limpia, prueba de humo limpia, bajo 200 KB.
• Miraste las capturas de pantalla, ambos temas, ambos anchos, y cambiaste algo por lo que viste.