Habilidad de Aplicación Gamificada
Produce un prototipo móvil multipantalla en una única página oscura de presentación. Tres marcos de teléfono lado a lado, cada uno su propio momento en el viaje.
Flujo de trabajo
- Lee el DESIGN.md activo (inyectado arriba). Para aplicaciones gamificadas, apoya en tipografía de título en negrita y una paleta más brillante y amplia que la mayoría de los productos — las misiones se ven como misiones gracias a los colores.
- Elige la marca + propuesta de valor de la instrucción. Genera nombres de misiones reales (ej. "Cuerpo — 20 min de fuerza: flexiones y planchas", "Leer — Cuatro mil semanas", "Escuchar — Huberman Lab · Arquitectura del sueño", "Nutrir — Cocina un almuerzo alto en proteínas", "Mente — 10 min de meditación enfocada", "Ver — The Bear · T3 E4").
- Escenario — página oscura a sangría completa (negro casi puro
#0e0d0co token oscuro de DS) con un suave gradiente de foco superior. Sobre los teléfonos, una fila de subtítulo pequeña: "PROTOTIPO HI-FI · IPHONE" a la izquierda, marca registrada a la derecha, ambas en mono. - Teléfonos — tres marcos de teléfono de 360×780 en una fila horizontal (se
apilan en ventanas estrechas). Cada teléfono:
- Bisel negro de 12 px, radio de esquina 44 px, muesca de isla dinámica.
- Barra de estado (hora / señal / batería).
- Contenido específico del teléfono (abajo).
- Barra de pestañas inferior con 5 iconos (Hoy, Biblioteca, Estadísticas, ⊕ CTA central, Perfil). Pestaña activa en acento.
- Teléfono 1 — póster de portada (ventas/propuesta de valor):
- Barra de estado.
- Cejilla PROTOTIPO HI-FI · IPHONE.
- Título grande en display ("Misiones diarias para convertirte en una mejor persona."), acento en "convertirte".
- Cuerpo de 1–2 oraciones en serifa/sans apagado.
- Línea de consejo en mono ("Toca las misiones para abrir el detalle. Alterna [tema] en la barra de herramientas para cambiar tema y diseño.")
- Sutil avance de desplazamiento hacia la siguiente pantalla en el borde inferior.
- Teléfono 2 — panel de misiones de hoy (la pantalla principal):
- Saludo "Buenos días, Sam" + pequeña campana de XP sonando.
- Cinta de nivel — "LV 14 · Nivel 14 · 1648 / 2480 XP" con una barra de progreso dentro de una cinta glassmórfica.
- Sub-línea: "8 misiones esperando · gana 430 XP hoy".
- Cuadrícula 3×2 de fichas de misión. Cada ficha: esquinas redondeadas, color pastel de acento, chip de glifo en la esquina superior izquierda, título, línea meta pequeña, píldora "+NN XP" en la esquina inferior derecha.
- Barra de pestañas inferior.
- Teléfono 3 — detalle de la misión:
- Flecha de retroceso + título de pantalla ("Misión").
- Bloque hero con el color de acento de la misión, título grande de misión en serifa ("Cuerpo — fuerza"), cuerpo narrativo corto, sello "RECOMPENSA +90 XP".
- Lista de verificación de pasos (3–4 microtareas, una hecha, dos pendientes).
- CTA grande primaria "Empezar misión" en la parte inferior en acento.
- Escribe un único documento HTML:
<!doctype html>hasta</html>, CSS inline.- Todo en CSS — sin imágenes. Usa
linear-gradienty SVG inline para los chips de fichas e iconos de pestañas. data-od-iden el escenario, cada teléfono, cada región de cada marco.
- Autocomprobación:
- Tres marcos, cada uno con un propósito distinto. No tres copias de la misma pantalla.
- Los colores de las fichas no dominan — cada ficha de misión usa un pastel diferente sobre la misma superficie neutra.
- Se lee como gamificado y adulto — juguetón, no infantil.
Contrato de salida
Emitir entre etiquetas <artifact>:
<artifact identifier="game-slug" type="text/html" title="Mobile — App Name">
<!doctype html>
<html>...</html>
</artifact>
Una oración antes del artefacto, nada después.