Mosin112/build-prototype

Paso 4 · Prototipo clicable

El prototipo permite a las partes interesadas sentir los árboles de comportamiento antes de que comience la ingeniería. Es una demostración del contrato, no una especificación de diseño: debe mostrar cada rama, incluyendo errores y casos límite, no solo el camino feliz.

Lee primero: los árboles aprobados en work/<item>/03-trees/, el concepto, context/product.md y context/writing-style.md. Usa ../../examples/price-alerts/04-prototype/index.html (en relación a este skill) como implementación de referencia de la estructura a continuación.

Requisitos

1. Un archivo autónomo: work/<item>/04-prototype/index.html. Incluye todo el CSS y JS en línea. Sin paso de compilación, sin solicitudes externas excepto fuentes web opcionales, para que pueda abrirse desde el disco, adjuntarse a un ticket o publicarse como enlace.

2. Pantallas: cada estado distinto es un elemento con data-screen="<id>". Solo una es visible a la vez. La navegación ocurre a través de los botones del propio prototipo, como en el producto real.

3. Controles de escenario: un panel lateral, claramente separado de la UI del producto, con interruptores para cada estado while y condición if en los árboles (verificado/no verificado, límite alcanzado, notificaciones desactivadas, simular un movimiento de precio…). Cambiar un interruptor debe cambiar lo que la UI del producto hace, para que cada rama sea alcanzable.

4. Mapa de cobertura: un bloque <script type="application/json" id="tree-coverage"> que mapea cada línea then y and de cada árbol a la pantalla que la demuestra:

   {
     "trees": {
       "functional/price-alert-creation": [
         { "line": "then the alert is saved as active", "screen": "alerts" },
         { "line": "and the alert's direction is set to above or below the current price", "screen": "alerts" }
       ],
       "functional/price-alert-trigger": [
         { "line": "then no further notification is sent", "screen": null, "reason": "Not visible: absence of a notification" }
       ]
     }
   }
   

   screen: null solo está permitido con una reason (resultados solo en backend o "no pasa nada").

5. Panel de cobertura visible: renderiza el mapa de cobertura en el panel lateral como una lista de verificación de líneas de árbol; al hacer clic en una línea, salta a su pantalla con el escenario correcto establecido. Esto es lo que hace que el prototipo sea una herramienta de revisión.

6. Texto realista: usa los mensajes exactos de los árboles. Marca los datos de muestra como datos de muestra.

7. Marca: sigue los tokens de diseño en context/product.md; de lo contrario, usa un estilo neutral y accesible. Funciona en ancho de teléfono. Foco de teclado visible.

Verificación

Ejecuta python3 .pm-harness/pm_check.py prototype work/<item>/03-trees work/<item>/04-prototype/index.html. Falla si alguna línea del árbol falta en el mapa de cobertura o apunta a una pantalla que no existe. Corrige hasta que pase.

Aprobación

Guía al PM a través del árbol de Journey en el prototipo, luego cualquier rama que elijan. Recopila comentarios. Si los comentarios cambian el comportamiento, actualiza los árboles primero, vuelve a ejecutar la comprobación de árboles, luego actualiza el prototipo. Cuando el PM lo apruebe, establece stage: prototype en 01-idea.md y ofrece /pm-harness:create-eng-tickets. Si el equipo del PM usa Figma para el diseño final, indica qué pantallas deben ser tomadas por un diseñador.