¿Qué hace Creación de Páginas de Aterrizaje?
Esto captura cómo Favour realmente construye páginas de aterrizaje que no parecen plantillas, destilado de sus propias conversaciones pasadas construyendo Allowance, didii, Revolut Founder Mode, TrashPay y el sitio de la Conferencia FlutterBytes, y refinado repetidamente por su retroalimentación directa en compilaciones de prueba hechas con esta habilidad. No es una guía genérica de "mejores prácticas para páginas de aterrizaje" — es específica de lo que él sigue usando, corrigiendo y rechazando. También es un documento vivo: revisa references/build-log.md antes de comenzar y agrega al finalizar.
El objetivo cada vez: algo con un punto de vista genuino, no una plantilla competente con el nombre del cliente cambiado. Y crucialmente: un concepto que se lea como obvio e intencional a primera vista, no uno que solo tenga sentido una vez explicado.
Antes de nada: ¿hay suficiente con qué trabajar?
Si el brief no da un producto real para enganchar un concepto — sin nombre, sin idea de para quién es, sin pista de tono, nada que lo separe de la versión genérica de esta idea — detente y pregunta. Una o dos preguntas precisas son mejores que inventar una dirección provisional y descubrir después que no encajaba.
Dos momentos más específicos para preguntar en lugar de asumir:
- Si una sección se beneficiaría claramente de una foto real (no una representación abstracta o vectorial), pide una antes de continuar. Si no está disponible, dilo e improvisa con degradados y trabajo lineal en lugar de fingir una foto de archivo.
- Si una sección necesita contenido de muestra representativo (nombres de ejemplo, tarjetas de muestra, datos de marcador de posición), propón primero una versión e invita explícitamente a cambios, en lugar de finalizar silenciosamente tu propia suposición.
Si hay suficiente — un nombre real, una audiencia real, un punto de diferencia real, incluso aproximado — continúa.
Stack de compilación
El objetivo por defecto es Next.js, TypeScript, Tailwind CSS y Framer Motion. Ese es el stack real detrás de cada proyecto del que se extrae esta habilidad. Nunca HTML plano o JS vainilla como entregable.
Si el entorno de trabajo no puede renderizar ese stack en vivo, dilo claramente en lugar de sustituir silenciosamente algo más débil. Aún así, construye componentes reales de React, nunca JS vainilla, y aproxima el movimiento previsto con transiciones CSS o la API de Animaciones Web para la vista previa — pero ofrece también el código base real de Next.js/TypeScript/Framer Motion como archivos descargables, y di claramente si un entorno que realmente pueda ejecutar y capturar la pantalla de ese stack (Claude Code, por ejemplo) es donde esto pertenece, especialmente cuando el juicio visual real sobre la salida comience a importar más que una mirada rápida.
Los formularios siempre envían a un Formulario de Google
Cualquier formulario en el sitio — lista de espera, contacto, consulta, inscripción para hablar, pedido/reserva, lo que sea — es un formulario personalizado y construido con el propio diseño del sitio cuyos envíos se reenvían a un Formulario de Google detrás de escena a través del enlace de relleno previo de ese formulario. El visitante nunca ve un Formulario de Google en bruto; ven el estilo del sitio, y los datos aterrizan en las respuestas del Formulario de Google (y su hoja de cálculo de respuestas vinculada).
Pide esto temprano, tan pronto como esté claro que el sitio necesita un formulario — es una dependencia de la persona, como las fotos. Pídeles que creen un Formulario de Google con campos que coincidan con lo que recopila el formulario del sitio y que envíen su enlace de relleno previo. Luego asigna cada campo del sitio a la ID de entrada del Formulario de Google correspondiente analizada de ese enlace de relleno previo y envíalo en el manejador de envío del formulario (el enfoque estándar es un POST al endpoint /formResponse del formulario con los parámetros entry.<id>, o un equivalente). Si la persona aún no ha proporcionado el enlace, construye la interfaz de formulario personalizada completamente pero deja el objetivo de envío claramente marcado y señalado, en lugar de inventar un endpoint.
Siempre dale a la persona los pasos para obtener el enlace de relleno previo de un Formulario de Google, ya que la mayoría de la gente no sabe dónde está:
- Abre el Formulario de Google en modo de edición.
- Haz clic en el menú de desbordamiento de tres puntos ⋮ en la esquina superior derecha.
- Elige "Obtener enlace de relleno previo".
- Rellena cada campo con un valor de marcador de posición reconocible (por ejemplo, escribe el nombre del campo en él), luego haz clic en "Obtener enlace" en la parte inferior.
- Haz clic en "Copiar enlace" en la ventana emergente y envíalo.
Ese enlace contiene cada entry.<id> del campo y es exactamente lo que se necesita para mapear los campos del formulario personalizado al Formulario de Google.
Tipo y color, elegidos con la persona, no decididos solo
Antes de comprometerte con cualquiera, haz una breve verificación visual en lugar de decidir en silencio:
- Tipo: revisa
references/typeface-library.mdpara candidatos no recientemente sobreexplotados, luego propón tres candidatos de tipografía de exhibición distintivos y no obvios y renderiza realmente el nombre del producto en cada uno, de la forma que el entorno admita (una imagen, una vista previa rápida, un componente en vivo) — nunca simplemente enumeres nombres de fuentes como texto. Deja que la persona elija a partir de letras reales, no una suposición de cómo suena un nombre. Una tipografía genuinamente nueva fuera de la biblioteca también es una opción bienvenida — si se elige, agrégala areferences/typeface-library.mddespués. Nunca te saltes este paso de propuesta y confirmación — incluso cuando una recomendación fuerte sea obvia o una tipografía de la biblioteca ya se vaya a usar, aún así presenta los candidatos y confirma en lugar de decidir en silencio. - Color y tema: propón una paleta (4 a 6 valores nombrados) con la razón detrás de cada elección fundamentada en el tema, y decide deliberadamente el tema claro u oscuro aquí en lugar de predeterminar a oscuro (ver la regla de tema en
references/taste-rules.md— muchas marcas se ven mejor en claro). Confirma ambos antes de que sean finales. - Dirección de estilo: junto con el tipo y el color, elige una familia de estilo dominante para toda la página de entre las familias nombradas en
references/section-bank.md(aurora/brillo pastel, brillo neo-tech oscuro, orgánico limpio-tech, editorial/brutalista, minimalista de alto contraste, lujo/exhibición premium, corporativo B2B/fintech) — elegida por una razón específica del brief, no por costumbre. Este es el carril por el que se comprará en el banco de secciones más tarde; tomar prestado de fuera es un acento deliberado, no un valor predeterminado.
Ambas compilaciones de prueba hasta ahora se saltaron esto y decidieron ambas solas — funcionó bien dos veces, pero eso es suerte, no el proceso funcionando como se pretende.
Tipo de sitio primero
Determina cuál de estas siete formas es esto antes de cualquier otra cosa — las reglas de gusto y el marco a continuación se aplican a todas, pero el inventario de secciones y, para los tipos de negocio, europeo y mini-negocio, el enfoque visual difiere:
- Página de aterrizaje de producto (Allowance, didii, TrashPay) — centrada en lista de espera o descarga, precios, casos de uso, cuadrícula de características.
- Portafolio / página de caso de estudio (Revolut Founder Mode) — la propia presentación de concepto de un diseñador: un bloque de biografía, estadísticas del mundo real para justificar relevancia, "contáctanos" en lugar de una lista de espera.
- Página de evento / conferencia (FlutterBytes) — exhibición de oradores, historial de ediciones pasadas, crédito al equipo organizador, patrocinadores, agenda.
- Página de negocio (una marca de moda, una panadería, un salón, un estudio — un negocio del mundo real establecido, no una startup) — vende un producto o servicio real que ya existe, por lo que se inclina hacia muchas imágenes y atmósfera primero en lugar de una cuadrícula de características primero. Apunta a que aproximadamente el 75% de las secciones se construyan alrededor de fotografías reales (menú/libro de look/galería/espacio), con las reglas de movimiento característico y animación superpuestas a las imágenes en lugar de reemplazarlas.
- Híbrido — una mezcla deliberada de dos o tres de los anteriores (un producto que también promociona un evento, un negocio con un portafolio de trabajo pasado). Elige el tipo dominante para la estructura general y el espaciado, luego toma prestadas las secciones específicas que el tipo secundario necesita.
- Sitio web europeo — un sitio limpio, sobrio y con sensación premium al estilo del trabajo de estudio/plantilla de Framer europeo de alta gama. Los mismos fundamentos que los demás, pero el héroe es deliberadamente simple: una o más fotografías reales adecuadas (obtenidas y descargadas de Unsplash, Pexels o Pixabay) colocadas como fondo del héroe dentro de un marco rectangular redondeado de ~98% de ancho, sin un concepto visual característico ocupado superpuesto. Sin lista de espera. Simple, pero no aburrido.
- Página de aterrizaje de mini-negocio — una página única ajustada y premium, exactamente cuatro secciones (héroe, oferta, prueba, contacto), construida para presentar negocios establecidos, a menudo tradicionales, que aún no tienen presencia web — distribuidores de maquinaria, exportadores a granel, fabricantes, proveedores industriales, mayoristas. Esta tiene que ser lo suficientemente convincente por sí sola para hacer que un negocio sin sitio web crea en tener uno, por lo que se apoya fuertemente en fotografías reales premium, señales de confianza reales (estadísticas, logotipos de clientes, certificaciones) y un héroe variado y seguro — consulta
references/site-types.mdpara las cinco iteraciones de héroe entre las que rotar y la sección obligatoria de Contáctenos.
Lee references/site-types.md para el inventario de secciones y notas estructurales para cada una. Si no es genuinamente ninguna de estas, trátalo como lo más cercano a una página de aterrizaje de producto y adáptalo.
El proceso
-
Orientarse. Nombre de la marca, qué hace, para quién es, cualquier sitio de referencia o estado de ánimo nombrado. Si está claro que el sitio necesitará un formulario (lista de espera, contacto, consulta, pedido), plantea la dependencia del Formulario de Google ahora según la sección de formularios anterior — pídele a la persona que cree el Formulario de Google y envíe su enlace de relleno previo, para que no sea una carrera al final.
-
Encuentra el único concepto central antes de tocar cualquier sección. No una lista de características — la única cosa que el usuario realmente obtiene o siente de este producto, expresada como una oración simple, más dos o tres ideas de apoyo. Cada movimiento característico de sección se verificará contra esto más tarde. También pregúntale directamente a la persona si ya tiene conceptos, visuales o ideas que le encantaría incluir o ilustrar — especialmente para el héroe — para que su propia visión alimente el concepto en lugar de ser sobrescrita por uno inventado.
-
Elige el tipo y el color con la persona (arriba), fundamentado en el tema, no decidido solo.
-
Decide el tipo de sitio (arriba) y hojea su inventario de secciones. Revisa
references/build-log.mdpara ver lo que usaron los proyectos recientes, para que este no rime con el anterior por accidente. -
Ejecuta cada sección a través del checklist de admisión a continuación, uno al lado del otro, luego califica honestamente antes de escribir cualquier diseño o código.
Admisión, por sección:
- ¿Qué es esta sección y cuánto peso visual merece? Un héroe merece más que una viñeta de confianza.
- ¿De qué trata el producto en general y de qué trata esta sección específicamente, basado en su título, subtítulo y contenido reales — no una etiqueta genérica para su categoría?
- ¿Qué concepto se sigue de ese contenido, específicamente? Revisa
references/concept-gallery.mdpara conceptos ya inventados — reutiliza uno que no se esté enfriando, adapta uno o inventa algo nuevo y agrégalo allí después. - ¿Qué ofrece el banco de diseño de secciones? Extrae dos o tres filas candidatas de
references/section-bank.md(coincidentes por categoría de sección, luego por la dirección de estilo del proyecto), pésalas contra una opción inventada desde cero y adapta la ganadora según las reglas de adaptar-nunca-transplantar del banco — la paleta, las tipografías y las especificaciones de píxeles de la fila se reasignan a este proyecto, y la sección aún tiene que pasar la prueba de dos segundos para esta marca específica. - ¿Qué animación o interacción de hover le da vida? La columna de movimiento del banco es un vocabulario del que dibujar aquí (trazos de desplazamiento, contadores de odómetro, expansiones de flex-grow, entradas escalonadas, revelaciones de máscara) — aún así, nunca el mismo primitivo dos veces en una página.
- ¿Qué tan largos son el título y el subtítulo? Los cortos pueden llevar un tratamiento centrado/rodeado (ver los arquetipos de diseño en
references/taste-rules.md); los más largos no pueden. - ¿Qué diseño y qué movimiento característico usó la sección inmediatamente anterior a esta, y qué usó el último proyecto? No repitas ninguno.
Califica honestamente, usando comprobaciones falseables en lugar de números cómodos:
- ¿Cae el concepto en uno de los tres valores predeterminados genéricos de diseño de IA (crema cálida + serifa + terracota, casi negro + un acento ácido, o estilo periódico de regla fina) sin una razón específica del brief? Eso es un fallo — vuelve a la admisión.
- ¿Aparecería esta elección exacta si el mismo prompt se ejecutara para un producto completamente diferente? Si es así, aún no es lo suficientemente específico.
- ¿Un extraño captaría lo que representa en aproximadamente dos segundos, sin subtítulo? Un concepto que solo funciona una vez explicado ha fallado, independientemente de lo inteligente que fuera el razonamiento.
Calificar es una disciplina que siempre se ejecuta, no algo que mostrar — la persona ve el concepto resultante y un veredicto simple, no un marcador. Y sé honesto sobre la limitación real: sin una forma de ver realmente un renderizado, la autocalificación está más cerca de una revisión de código cuidadosa que de un juicio visual genuino, así que inclínate hacia lo escéptico en lugar de lo generoso. Si el entorno puede ejecutar y capturar la pantalla de la compilación, úsalo — una mirada real es mejor que predecir una.
-
Construye el primer borrador completo, usando los conceptos calificados más las reglas permanentes en
references/taste-rules.md. -
Ve sección por sección y verifica la calidad de cada una individualmente, contra la página construida. Para cada sección, pregúntate:
- ¿Esta sección se conecta visiblemente con el concepto central del paso 2, o solo ilustra su propia característica de forma aislada?
- ¿El lado no textual de cualquier sección de dos columnas está realmente vivo — una mini-interfaz animada, un fragmento de pantalla o un concepto autocontenido — o es una imagen plana muerta? No "¿son dos columnas?", sino "¿hay algo estático aquí que no debería estar?"
- ¿Es esto una tarjeta con borde simple donde un divisor desvaneciente o algo más considerado serviría mejor? ¿Se mantiene toda la página dentro de una o dos secciones que usan tarjetas en total? Si es una tarjeta, ¿tiene un toque de personalización real (relleno de degradado brillante, borde similar al vidrio, icono animado) y una interacción de hover real?
- ¿Todos los iconos son de la biblioteca de iconos personalizados elegida (Lucide/Phosphor/Heroicons/Tabler), sin emojis que ocupen su lugar?
Cualquier cosa que no pase se corrige inmediatamente, no se pospone para una segunda pasada.
-
Haz una pasada final de consistencia rápida: ¿cada sección se siente como parte de la misma página? ¿El uso del color es consistente? ¿La animación no es abrumadora? ¿El tono se mantiene constante del héroe al pie de página?
Una vez que está construido
- Confirma con la persona. Muestra la página completa, no solo una sección. Pregúntales si el concepto central es claro y si la página se siente distintiva.
- Si hay cambios, elige las correcciones más importantes (máximo 3) y haz esas, en lugar de intentar arreglar todo a la vez.
- Después de la finalización, agrega cualquier nuevo concepto o tipografía a
references/concept-gallery.mdyreferences/typeface-library.mdrespectivamente, y registra la compilación enreferences/build-log.mdcon lo que se usó, qué funcionó y qué no.
Referencias
references/build-log.md— historial de compilaciones pasadas para evitar repetición accidental.references/taste-rules.md— reglas permanentes de gusto que siempre se aplican (regla del héroe, regla de dos columnas, regla de animación, regla de tipografía, regla de titulares, regla de tema).references/section-bank.md— banco de diseños de secciones con categorías y direcciones de estilo.references/concept-gallery.md— conceptos visuales ya inventados para reutilizar o adaptar.references/typeface-library.md— tipografías usadas en compilaciones pasadas.references/site-types.md— inventario de secciones y notas estructurales para cada tipo de sitio.
Este es un documento vivo. Se esperan actualizaciones a medida que se complete más trabajo y se recopile retroalimentación.