jamesonedge/interactive-mockup

Mockup interactivo

Explora alternativas reales, deja que el usuario elija y luego haz que la elección funcione en un navegador, sin rediseñarla silenciosamente.

Cuándo usarlo

• "Haz un mockup", "prototipo", "muéstrame algunas direcciones", "haz esto clicable".
• Una revisión de diseño ha producido una especificación y el usuario quiere sentirla.
• Pantallas nuevas donde la arquitectura de la información aún está abierta.

Cuándo no usarlo

• Solo crítica, sin construcción: usa un flujo de revisión de diseño.
• Implementación de producción en el framework real de la aplicación.
• Un simple cambio de padding, color o texto.
• Cualquier cosa que necesite datos reales de usuario o de producción. Los prototipos usan solo datos sintéticos.

Entradas

• La tarea y las restricciones (plataforma, viewport, tokens si están disponibles).
• Datos sintéticos representativos. Márcalos como sintéticos en la interfaz de usuario. Nunca pegues datos de producción o personales.
• Opcional: una revisión de diseño o especificación a respetar.
• Opcional: una dirección que el usuario ya haya elegido. Si es así, salta la divergencia y ve directamente al paso 3.

Flujo de trabajo

1. Diverge: dos o tres briefs de dirección

Escribe un brief por dirección usando templates/direction-brief.md. Cada dirección comparte las mismas restricciones, datos y tarea. Deben diferir en la arquitectura de la información o el modelo de interacción —por ejemplo, lista-primero vs modo-enfoque vs tablero— no solo en el esquema de colores.

• Si tu runtime soporta workers verdaderamente independientes (subagentes o sesiones separadas), genera las direcciones de forma independiente y menciónalo.
• De lo contrario, generarlas en serie y etiquetarlas: "Direcciones producidas en serie por un agente."

Construye cada una como un archivo HTML estático y autónomo a partir de templates/direction.html. Estático significa diseño y estados representativos; las interacciones aún no son necesarias.

2. Compara y deja que el usuario elija

Crea una página de comparación a partir de templates/comparison.html que enlace cada dirección y establezca los compromisos significativos (qué optimiza cada una, qué sacrifica, para quién es adecuada). Detente y pide al usuario que elija. No construyas la versión interactiva antes de que elija, a menos que delegue explícitamente la elección.

3. Injerto estricto: construye el prototipo interactivo

Sigue references/graft-rules.md. En resumen:

1. Lee el código HTML de la dirección elegida.
2. Preserva su estructura de marcado, CSS y decisiones visuales.
3. Asigna un espacio de nombres a cualquier nueva clase o ID que pueda colisionar.
4. Añade interacciones funcionales con JavaScript vainilla.
5. Registra cada cambio en un ledger usando templates/change-ledger.md. Cualquier cosa que no sea una adición pura necesita una razón.

Sin rediseño silencioso. Si la dirección elegida tiene un defecto, documéntalo en el ledger y pregunta antes de cambiarlo.

4. Control de calidad

Verifica el prototipo contra references/prototype-quality.md: offline, viewport meta, responsivo, teclado, foco visible, movimiento reducido, estados vacío/carga/error, sin acciones primarias muertas, datos sintéticos etiquetados.

Valores predeterminados

• Un archivo .html autónomo por artefacto: CSS y JS en línea, sin CDN, sin fuentes web, sin imágenes externas (usa SVG en línea o CSS).
• Pila de fuentes del sistema.
• Funciona desde file:// sin servidor.
• Nunca publicar, desplegar o subir automáticamente.

Salidas

<output-dir>/
├── directions/
│   ├── a-<name>.html
│   ├── b-<name>.html
│   └── c-<name>.html   (opcional)
├── comparison.html
├── prototype.html
└── change-ledger.md

Honestidad

Un prototipo demuestra interacción y diseño. No es evidencia de viabilidad nativa, rendimiento, conformidad de accesibilidad o preparación para producción. Menciónalo en la entrega.

Aviso de licencia

El siguiente aviso acompaña a esta habilidad autónoma y sus archivos de soporte.

Licencia MIT

Copyright (c) 2026 jamesonedge

Por la presente se otorga permiso, sin costo, a cualquier persona que obtenga una copia
 de este software y los archivos de documentación asociados (el "Software"), para tratar
 en el Software sin restricción, incluidos, entre otros, los derechos
 para usar, copiar, modificar, fusionar, publicar, distribuir, sublicenciar y/o vender
copias del Software, y para permitir a las personas a quienes se les
proporcione el Software hacer lo mismo, sujeto a las siguientes condiciones:

El aviso de copyright anterior y este aviso de permiso se incluirán en todas las
copias o partes sustanciales del Software.

EL SOFTWARE SE PROPORCIONA "TAL CUAL", SIN GARANTÍA DE NINGÚN TIPO, EXPRESA O
IMPLÍCITA, INCLUYENDO PERO NO LIMITADO A GARANTÍAS DE COMERCIABILIDAD,
IDONEIDAD PARA UN PROPÓSITO PARTICULAR Y NO INFRACCIÓN. EN NINGÚN CASO LOS
AUTORES O TITULARES DE DERECHOS DE AUTOR SERÁN RESPONSABLES DE NINGUNA RECLAMACIÓN,
DAÑOS U OTRA RESPONSABILIDAD, YA SEA EN UNA ACCIÓN CONTRACTUAL, EXTRA CONTRACTUAL O DE OTRO TIPO,
QUE SURJA DE O EN CONEXIÓN CON EL SOFTWARE O SU USO U OTRO TIPO DE ACCIÓN EN EL
SOFTWARE.