Open Design AI – Página de Lista de Espera

Habilidad de Página de Lista de Espera

Las páginas de prelanzamiento son tu primer apretón de manos con los futuros usuarios. Esta habilidad construye una entrada enfocada y honesta: tu identidad de marca, lo que estás creando y un camino claro para unirse a la lista temprana. Sin escasez artificial, sin falsas cuentas regresivas, sin tácticas de inflación—solo un recipiente limpio y optimizado para móviles canalizando el interés genuino.

Flujo de Trabajo

Pre-vuelo: Cargar plantilla resistente y base de marca

0. Cargar la identidad de marca — Lee DESIGN.md para obtener el sistema de colores, la combinación tipográfica y las reglas espaciales. Esta es tu base. Una página de lista de espera vive o muere por la coherencia con la marca que representa. Si DESIGN.md falta, pide al usuario que proporcione uno antes de continuar.
1. Leer y copiar la plantilla reutilizable — Lee assets/template.html. Esta plantilla es la semilla resistente para todas las salidas. Cópiala a index.html como tu base. No escribas HTML desde cero ni te desvíes de esta estructura. La plantilla tiene todo el diseño requerido, estructura de formulario, decoraciones, estilos de enfoque y andamios de accesibilidad integrados.

Pasos: Reemplazo de tokens con validación y escape

2. Mapear tokens a partir de entradas — Para cada marcador de posición en la plantilla (por ejemplo, {{PRODUCT_NAME}}, {{BG_EXPRESSION}}, {{BORDER_EXPRESSION}}, {{LOGO_MARK}}), sigue las reglas de reemplazo a continuación:
   • Tokens de texto ({{PRODUCT_NAME}}, {{TAGLINE}}): Escapa en HTML <, >, &, ", ' antes de insertarlos en nodos de texto HTML o valores de atributos.
   • Tokens HTML ({{LOGO_MARK}}): Si usas iniciales de texto, escápalas en HTML por defecto. Si usas SVG en línea, debes sanitizarlo estrictamente usando una lista blanca: elimina etiquetas <script>, manejadores de eventos (on*), <foreignObject>, referencias externas (href, xlink:href, url()), y cualquier atributo/elemento no permitido antes de la inserción. Si el SVG no se puede sanitizar de forma segura, recurre a iniciales de texto escapadas. Nunca emitas HTML sin procesar y sin sanitizar. Asegúrate de que cualquier SVG escale limpiamente dentro de su contenedor.
   • Tokens de expresión de color ({{BG_EXPRESSION}}, {{FG_EXPRESSION}}, {{ACCENT_EXPRESSION}}, {{DECO_EXPRESSION}}, {{STRIPE_EXPRESSION}}, {{SUCCESS_EXPRESSION}}, {{BORDER_EXPRESSION}}, {{BTN_LABEL_EXPRESSION}}, {{TICKER_BG_EXPRESSION}}, {{TICKER_FG_EXPRESSION}}, {{DECO_STROKE_EXPRESSION}}, {{LOGO_SHADOW_EXPRESSION}}, {{LOGO_FG_EXPRESSION}}): Deben adherirse estrictamente a una gramática de color explícita (#hex, rgb/rgba, hsl/hsla, oklch, o color-mix() usando solo variables locales). Rechaza firmemente cualquier entrada que contenga ;, {}, <, >, comentarios (/*), @, url(, o referencias externas para prevenir inyección CSS. No envuelvas en # ni agregues comillas extra. Ejemplos: rgba(196, 169, 154, 0.38), color-mix(in srgb, var(--fg) 38%, transparent), #FDE8DF. Inserta tal cual en las variables CSS de :root. Deriva --success de DESIGN.md si está presente; de lo contrario, usa solo el fallback permitido #2D6A4F.
   • Tokens de nombre de fuente ({{DISPLAY_FONT_CSS}}, {{BODY_FONT_CSS}}): Son valores CSS de font-family, ya entrecomillados si contienen espacios (por ejemplo, 'DM Sans', Syne). Insértalos tal cual en las declaraciones --font-display y --font-body; NO agregues comillas extra.
   • Tokens de URL de fuente ({{DISPLAY_FONT_URL}}, {{BODY_FONT_URL}}): Los espacios deben codificarse como + para la URL de Google Fonts (por ejemplo, DM+Sans, IBM+Plex+Serif). Valida que la URL esté bien formada antes de la inserción.
3. Verificar reglas de mapeo de tokens — Todos los tokens de color están ahora en variables CSS:
   • --bg = {{BG_EXPRESSION}} (ej. #FDE8DF)
   • --fg = {{FG_EXPRESSION}} (ej. #1A1410)
   • --accent = {{ACCENT_EXPRESSION}} (insignia de marca)
   • --deco = {{DECO_EXPRESSION}} (decoración principal)
   • --deco-stripe = {{STRIPE_EXPRESSION}} (franja de acento)
   • --input-border = {{BORDER_EXPRESSION}} (expresión CSS completa con opacidad)
   • --success = {{SUCCESS_EXPRESSION}} o fallback #2D6A4F
   • --btn-label = {{BTN_LABEL_EXPRESSION}} (color de texto del botón para contraste)
   • --ticker-bg = {{TICKER_BG_EXPRESSION}} (fondo del ticker animado)
   • --ticker-fg = {{TICKER_FG_EXPRESSION}} (texto del ticker animado)
   • --deco-stroke = {{DECO_STROKE_EXPRESSION}} (trazos SVG, típicamente apagados con 12–15% de opacidad)
   • --logo-shadow = {{LOGO_SHADOW_EXPRESSION}} (sombra del contenedor del logotipo, tono sutil de primer plano)
   • --logo-fg = {{LOGO_FG_EXPRESSION}} (color de texto contrastante para las iniciales del logotipo)
4. Diseño adaptable — La plantilla incluye escalado mobile-first:
   • 375px: el formulario se apila en una columna, el logotipo se reduce a 40px, la decoración se comprime, sin desplazamiento horizontal.
   • 768px: cómodo espacio de dos columnas.
   • 1440px+: diseño centrado con espacio en blanco generoso.
   • Verifica que todo el texto siga siendo legible y que la entrada de correo electrónico + el botón estén completamente visibles (sin recortes) a 375×667 y 390×844.

Validación: Ejecutar compuertas de calidad resistentes antes de emitir

5. Ejecutar la lista de verificación de calidad — Lee references/checklist.md. Valida cada compuerta P0 antes de emitir:
   • Exactamente una CTA (formulario de correo electrónico)
   • Sin temporizador de cuenta regresiva, sin prueba social falsa, sin emoji
   • Sin desplazamiento horizontal a 375px
   • La entrada de correo electrónico tiene type="email" y required; el nombre no tiene required
   • El formulario NO usa novalidate; JS usa la protección checkValidity()
   • El mensaje de éxito tiene role="status" o aria-live="polite"
   • Todos los colores de DESIGN.md o fallback permitido; sin valores hex inventados
   • Todo el texto de usuario está escapado en HTML; los tokens de color se adhieren a la gramática estricta; las fuentes están codificadas en URL
   • Pasar P0 o no emitir. Si falla alguna compuerta P0, pregunta al usuario o corrige los mapeos de tokens e inténtalo de nuevo.
6. Verificar compuertas P1 para envío de calidad (recomendado):
   • Estados hover y active en el botón de envío
   • Validación de formulario con retroalimentación clara
   • La animación del ticker respeta prefers-reduced-motion: reduce
   • Todos los elementos interactivos tienen estilos de enfoque visibles (input:focus incluye outline)
   • Soporte de teclado Tab/Enter
   • Contraste WCAG AA para texto del cuerpo (≥4.5:1) y etiqueta del botón (≥4.5:1)
   • Logotipo con alt/aria-label presente; ticker tiene aria-hidden="true"
   • <html lang=""> está configurado

Salida

7. Emitir HTML limpio — Archivo único, CSS en línea, SVG para gráficos. Marca los elementos interactivos con data-od-id (título, formulario, logotipo, ticker, cuadrícula, etc.) para que los agentes puedan personalizar sin analizar.

Compuertas de calidad

Esta habilidad impone un flujo de trabajo basado en plantillas y resistente para garantizar el cumplimiento. Debes seguir esta ruta de ejecución; desviarse de la plantilla descalifica la salida.

Ejecución obligatoria basada en plantilla:

• Lee assets/template.html como tu base; no escribas HTML desde cero.
• Cópialo a index.html y reemplaza solo los tokens {{PLACEHOLDER}} con valores validados/escapados.
• Ejecuta cada compuerta P0 en references/checklist.md antes de emitir; si alguna falla, corrígela y vuelve a validar.

Compuertas P0 (deben pasar):

• Una sola CTA: El formulario de correo electrónico es el único elemento interactivo. Sin navegación, sin botones secundarios, sin enlaces sociales.
• Colocación del logotipo: Fijo arriba a la izquierda, coincide con el color de acento de DESIGN.md, se reduce en móvil (50px → 40px).
• Consistencia de color: Cada color de la paleta de DESIGN.md. Única excepción codificada permitida: #2D6A4F para --success.
• Sin antipatrones: Sin temporizador de cuenta regresiva, sin prueba social falsa, sin iconos emoji, sin lorem ipsum.
• Integridad del contenido: El título y el texto se vinculan directamente a las entradas product_name y tagline—sin texto de relleno.
• Ajuste móvil: Sin desplazamiento horizontal a 375px. La entrada de correo electrónico y el botón de envío están completamente visibles (sin recortes) a 375×667 y 390×844. El desbordamiento vertical es desplazable, no oculto.
• Disciplina tipográfica: Solo fuentes de display + cuerpo (regla de 2 fuentes). Tamaño consistente en todas las secciones.
• Estructura del formulario: Dos campos (nombre opcional, correo electrónico obligatorio), protección checkValidity(), mensaje de éxito con role="status".
• Escape de tokens: Todo el texto proporcionado por el usuario escapado en HTML; los tokens de color se adhieren a la gramática estricta y no contienen caracteres inseguros (;, {}, <, >, /*, @, url(); los nombres de fuente están codificados en URL; {{LOGO_MARK}} son iniciales de texto escapadas o SVG en línea estrictamente sanitizado (sin scripts, sin manejadores de eventos, sin foreignObject, sin hrefs externos).

Compuertas P1 (deben pasar para un envío de calidad):

• Sección hero visualmente distinta y visible sin desplazamiento.
• Botón de envío de correo electrónico tiene estados hover y active.
• La validación del formulario proporciona retroalimentación clara.
• La página se puede desplazar (sin recortes) en todos los viewports móviles; la CTA visible sin desplazamiento.
• Animación del ticker pausada/eliminada bajo prefers-reduced-motion: reduce.
• Todos los elementos interactivos tienen estilos de enfoque visibles (outline, no solo outline:none).
• Teclado: Tab llega a cada campo del formulario; Enter envía.
• Contraste WCAG AA: Texto del cuerpo ≥4.5:1, etiqueta del botón ≥4.5:1.
• Logotipo con alt/aria-label presente; ticker tiene aria-hidden="true".
• <html lang=""> configurado con el código de idioma correcto.

Moderación decorativa:

• La zona inferior mejora sin distraer. Opacidad, trazos sutiles, animación apagada.
• Sin degradado que abarque más del 20% de la altura del viewport.
• Espiral, franja, cuadrícula o ticker usan solo colores de DESIGN.md.

Salida

Solo emite después de que todas las compuertas P0 en references/checklist.md pasen.

Emitir el artefacto entre etiquetas:

<artifact identifier="waitlist-id" type="text/html" title="Coming Soon — {{PRODUCT_NAME}}">
<!doctype html>
<html lang="en">
...
</html>
</artifact>

Una línea de descripción sobre el artefacto; nada debajo.

Post-emisión: Si el usuario solicita cambios, actualiza el index.html en el lugar y vuelve a ejecutar las compuertas de la lista P0 antes de emitir la siguiente versión. No omitas la validación en iteraciones.