dennisyjlee/prototype-reel

Prototype reel

Prototíparlo como si fuera real, luego contar la historia con video.

Un mock estático muestra cómo se ve una pantalla. No puede mostrar cómo se siente el producto: qué carga primero, dónde cae el pulgar, qué sucede cuando falla. Esta skill construye prototipos que se comportan como lo que se está construyendo, los pone frente a personas para recibir comentarios y luego conduce el mismo prototipo fotograma a fotograma para generar un video explicativo. No hay grabación de pantalla, así que un cambio en el diseño significa una re-renderización, no una nueva grabación.

Las reglas aquí provienen de rondas de revisión reales. Cada una comenzó como una nota de un revisor y se convirtió en un valor por defecto para que la nota nunca tuviera que darse dos veces.

Cuándo usarlo (y cuándo no)

• Prototipa cuando la idea depende del comportamiento: tiempos, carga, transiciones, gestos, casos extremos o un flujo de varios pasos. También cuando los revisores reaccionan constantemente a las imágenes en lugar de a la experiencia.
• Haz un video cuando la audiencia no puede hacer clic: una diapositiva en bucle, un tile de sitio web, una actualización asíncrona, un caso de estudio. El video es cómo el prototipo se comparte a escala.
• Sáltalo para preguntas de diseño o visuales que una imagen estática responde, y para ideas muy tempranas donde un wireframe es más barato. Prototipa una vez que la dirección esté elegida.

Flujo de trabajo

Haz esto en orden. No te adelantes a la renderización.

1. Carga el contexto. Obtén los diseños reales (archivo de diseño, capturas de pantalla, tokens de diseño), el flujo y el objetivo. Pregunta qué debe entender la audiencia después de ver o hacer clic. Lee references/fidelity.md.
2. Enumera estados y comportamientos primero. Antes del código, escribe cada pantalla, estado y transición: carga, vacío, error, éxito, atrás, el toast, el caso extremo. Una línea cada uno. Confirma la lista con la persona.
3. Construye HTML en vivo. Comienza desde kit/shell.html. Reconstruye las pantallas como DOM real con objetivos táctiles reales, nunca capturas de pantalla con hotspots. Lee references/behavior.md.
4. Haz clic tú mismo. Recorre cada ruta tanto en escritorio como en móvil con un navegador sin interfaz gráfica. Captura cada estado. Cero errores de consola. Corrige antes de compartir.
5. Comparte para recibir comentarios. Publica un enlace con subtítulos y sugerencias táctiles activadas (references/sharing.md). Registra cada nota en el formato de references/feedback-log.md: la nota, la regla en que se convierte.
6. Escribe la lista de tomas. Una línea por latido: tiempo | en pantalla | acción | toma | punto narrativo. Nombra cada latido como una toma (establecimiento, inserto, corte en acción, emparejamiento, recompensa; consulta references/pacing.md, Gramática cinematográfica). Una idea por latido. Obtén una aprobación antes de construir el video.
7. Vista previa, luego renderiza. Conduce el prototipo con un reloj pausado y captura fotogramas. Envía primero una vista previa de baja resolución (15 fps, mitad de tamaño). Renderiza a máxima calidad solo después de que los tiempos estén aprobados. Lee references/pacing.md y references/motion-tokens.md.
8. QA, luego entrega. Ejecuta cada verificación en references/qa.md y di lo que verificaste en el mensaje de entrega. Una corrección cambia solo lo que se señaló.

Innegociables

• DOM vivo, no imágenes con hotspots. Imágenes solo para fotos, logotipos y medios.
• El texto usa los tokens del diseño (familia, tamaño, altura de línea, tracking), nunca valores manuales. Confirma que las fuentes estén instaladas donde renderices.
• Los toasts y superposiciones se colocan sobre el contenido. Nunca empujan la página.
• Una familia de easing por pieza. Ease-out para entradas, nunca ease-in en la interfaz, nunca escala desde 0. Sin rebote en la interfaz, excepto en el momento de recompensa (consulta motion-tokens.md, Jugar es para la recompensa).
• Espera después de aterrizar en una nueva pantalla antes de que algo se mueva: aproximadamente 0.9 s para una pantalla ligera, 1.4 s por defecto, aproximadamente 2.4 s para pantallas con mucho texto.
• Enmarca el toque con su contexto: acerca la fila o el grupo, no solo el botón.
• El lenguaje cinematográfico nunca anula cómo se comporta la interfaz. Cada elemento se anima en su propia capa.
• Marcador de toque solo en toques. Sin dedo en desplazamientos.
• Los bucles de diapositivas se mantienen en 20 s o menos a menos que la historia necesite más y la persona esté de acuerdo. Los clips explicativos solo repiten el momento que enseñan.
• Vista previa de baja resolución antes de cualquier renderizado completo.
• Sin entrega sin la verificación de QA.
• Cuando un revisor da una nota, conviértela en una regla y escríbela.

Archivos

• references/behavior.md: hacer que el prototipo se comporte como el producto real
• references/fidelity.md: coincidir exactamente con el diseño de origen
• references/sharing.md: configurarlo para recibir comentarios
• references/pacing.md: ritmo de presentación para videos explicativos
• references/motion-tokens.md: easing, duraciones y patrones de movimiento
• references/qa.md: las verificaciones que cada entrega supera
• references/feedback-log.md: cómo las notas se convierten en reglas, con ejemplos reales
• kit/shell.html: caparazón de prototipo neutral (barra de herramientas, escritorio/móvil, marco de dispositivo, subtítulos, sugerencias táctiles)
• kit/proto.css, kit/proto.js: transiciones, hojas, toasts, esqueletos, cursor