prototipo

Construye vistas estáticas clicables — validan flujo y diseño antes de escribir lógica, y luego se conectan (no se tiran).

Paso 1 — Contexto

Lee design/README.md + design/tokens.css (sistema y tokens), el mapa de vistas en docs/architecture/screens.md y el README.md del proyecto. Si no hay mapa de pantallas, constrúyelo primero con la persona. Al terminar, marca en ese mapa las vistas que pasen a estado prototipo.

Paso 2 — Inventario de vistas

Parte del catálogo estándar y márcalo contra el mapa:

• Públicas: landing/home, precios (si hay pago), sobre/about, contacto, 404 y 500.
• Legales: términos, privacidad, cookies. La plantilla no trae estos textos — maqueta la estructura de la página y deja el contenido marcado como pendiente.
• Auth (si hay cuentas): login, registro, recuperar contraseña.
• App: las vistas propias del recorrido crítico (dashboard, la acción de valor, ajustes/cuenta).

Confirma con la persona cuáles entran en el prototipo (default: todas las del recorrido crítico + landing + legales).

Paso 3 — Construir

Sobre los tokens, no sobre una librería. No hay vistas de ejemplo versionadas a proposito: envejecen y acaban contradiciendo al design system. Se construye con design/tokens.css y primitivas HTML nativas (<dialog>, <details>, popover), que traen foco, teclado y Escape resueltos.

• Formato según el stack: el sistema de plantillas o de componentes que ya use el proyecto. Si aún no está instanciado, HTML plano importando tokens.css.
• Si el destino es móvil: la maqueta sirve de spec de contenido y jerarquía, pero el layout, la navegación (tabs, no sidebar) y el catálogo de pantallas son distintos — hay pantallas que solo existen en móvil (onboarding, permisos, sin conexión) y vistas web que no tienen equivalente.
• Solo tokens semánticos del design system; estados loading/empty/error visibles donde aplique (con datos de ejemplo realistas, no "lorem ipsum").
• Imágenes/ilustraciones desde las fuentes aprobadas de design/README.md (unDraw, Unsplash, DiceBear…) — optimizadas y con alt.
• Navegación real entre vistas (links funcionando) — el prototipo se recorre completo.
• Modo claro y oscuro (prefers-color-scheme + data-theme="dark") y textos para es/en (sin hardcodear cadenas si el preset ya tiene i18n).

Paso 4 — Validar

Recorre el prototipo contra el recorrido crítico de la definición y lista lo que chirría (pasos de más, información faltante). Cierra con: vistas creadas, decisiones de diseño tomadas, y qué vista conectar primero cuando empiece la implementación.

Si el plugin Impeccable está disponible, pasa /impeccable audit sobre las vistas generadas antes de darlas por listas (ver design/README.md → Herramientas de diseño con IA).

NO añadas lógica de negocio, ni JS más allá de navegación/toggles triviales, ni inventes vistas fuera del mapa sin proponerlas antes.