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.