Prototipos HTML: el handoff como un link versionado
Un repositorio de prototipos HTML publicado automáticamente que reemplazó la entrega de archivos de diseño en el equipo de UX de Simetrik: cada prototipo es una carpeta con su brief, su estado y su changelog, y se comparte como un link.
El handoff dejó de ser un evento y pasó a ser un link versionado.
En el equipo de UX de Simetrik reemplazamos la entrega de archivos de diseño por un repositorio de prototipos HTML publicado automáticamente. Cada prototipo es una carpeta con su página, su brief y su historial de cambios, y se comparte como un link que se pega en el ticket, en el chat o en la reunión.
El stack, elegido por velocidad
Tailwind por CDN, Alpine.js para la interactividad, Lucide para los iconos y los tokens del sistema de diseño de la empresa. Cero instalación, cero build, cero dependencias: un archivo que se abre en el navegador. La restricción es deliberada: si montar un prototipo cuesta instalar dependencias, no se monta.
<!doctype html>
<html lang="es">
<head>
<script src="https://cdn.tailwindcss.com"></script>
<script defer src="https://unpkg.com/alpinejs"></script>
<script src="https://unpkg.com/lucide@latest"></script>
</head>
<body x-data="{ vista: 'propuesta' }">
<!-- el prototipo, con los tokens del sistema de diseño -->
</body>
</html>El flujo
Publicar un prototipo nuevo son cinco pasos y un push. El sitio se actualiza solo en alrededor de un minuto.
Cada prototipo lleva un README con un template obligatorio: qué resuelve, para quién, cuándo se actualizó y en qué estado está. Un prototipo viejo se marca como deprecado en vez de quedar flotando como una falsa fuente de verdad.
# <Nombre del prototipo>
Breve descripción de qué resuelve y para qué audiencia.
**Última actualización:** YYYY-MM-DD
**Estado:** 🟢 Activo | 🟡 En revisión | 🔴 Deprecado
## Cómo verlo
## Decisiones
## ChangelogPor qué funciona mejor que un archivo de diseño
- —Es un link: no requiere cuenta ni permisos en la herramienta de diseño.
- —Se puede revisar como código: el cambio de un prototipo tiene su diff.
- —Habla el idioma del destino: el ingeniero lee la estructura en HTML en vez de interpretarla desde una imagen.
- —Tiene fecha y estado, así que se sabe si sigue vigente.
El detalle que acorta la aprobación
Los prototipos de comparación incluyen el estado actual del producto junto a la propuesta. Mostrar el antes y el después en el mismo lugar hace que la conversación de aprobación dure diez minutos en vez de una reunión.
El backlog de UX también vive ahí. En lugar de una hoja de cálculo, cada ítem es una carpeta numerada con su brief y, cuando existe, su mock. Numerar las carpetas fija la prioridad en el sistema de archivos: el orden es el backlog.
El sesgo que hay que vigilar
Prototipar en HTML empuja a diseñar lo que es fácil de hacer en HTML. Vale la pena romperlo a propósito de vez en cuando, y explorar primero sin pensar en cómo se construye.