Caso de estudio 04 · Proyecto propio · IA + código · 2026
Mundial 2026 — Construir la experiencia que diseñé.
Un explorador interactivo del Mundial construido sobre SYX con GSAP, Three.js y Leaflet. El encargo, los límites y los criterios de aceptación se escribieron antes de la primera línea de código y se publicaron con él, que es justo la parte de un proyecto propio que normalmente hay que creerse.
En 30 segundos
- La tensión
- SYX solo podía enseñarse a sí mismo. Nada demostraba que pudiera sostener un proyecto editorial con ambición visual real.
- Mi decisión
- Escribir el encargo, los límites y los criterios de aceptación antes de la primera línea de código, y publicarlos junto al resultado.
- La evidencia
- 11 especificaciones, 28 criterios de aceptación y 8 pantallas publicadas sobre GSAP, Three.js y Leaflet. Recontado el 22 de agosto de 2026.
- Qué cambió
- Una pieza cerrada que responde hasta dónde llego más allá de la entrega. La revisión que nunca programé es la parte que cambiaría.
- Rol
- Product Designer · constructor
- Base
- SYX
- Interacción
- GSAP · Three.js · Leaflet
- Modo
- Desarrollo asistido por IA
Por qué lo construí
SYX solo sabía enseñarse a sí mismo, y eso no demuestra nada.
El sistema tenía documentación, un escaparate de tokens y una página explicando su propia arquitectura: todo sobre SYX. Un design system no se demuestra describiéndose. Se demuestra sosteniendo un producto en el que es el medio y no el tema. Lo que quería averiguar era si SYX aguantaba un proyecto editorial con más ambición visual que nada de lo que había sostenido hasta entonces.
Evidencia de producto real
El entregable es la experiencia funcionando.
Esta vista previa renderiza directamente dentro del caso de estudio el explorador del Mundial 2026 ya publicado. Da contexto visual inmediato manteniendo la experiencia completa a un clic.
SYX / EXPLORADOR INTERACTIVO
2026Idea de producto → interacción → código asistido por IA → experiencia funcionando
Antes de escribir código
Once documentos antes de la primera línea.
Alcance, pantallas, capa de datos, directrices de motion y 3D, theming, reglas de build — y dos que pesaron más que el resto: los límites y los criterios de aceptación. Están en el repositorio, fechados, y cualquiera puede abrirlos. Para eso se publican. En un proyecto propio nadie puede saber si el encargo se escribió antes del resultado o después, a menos que el encargo sea público.
- 00-project-overviewQué es el producto y para quién es
- 01-strategy-and-boundariesQué tiene que ser el proyecto, y qué no puede ser nunca
- 02-syx-architecture-mandatory-rulesLas reglas de arquitectura que el build no puede romper
- 03-design-system-applicationCómo se aplica SYX a este producto concreto
- 04-product-scope-and-screensLas vistas del MVP y para qué sirve cada una
- 05-data-sources-and-data-layerFuentes públicas, y la capa de normalización entre ellas y la interfaz
- 06-storytelling-motion-and-3d-guidelinesHasta dónde pueden llegar el motion y el 3D
- 07-multitheming-specCómo cambia un tema sin reescribir componentes
- 08-file-structure-and-deliverablesQué se entrega y dónde vive
- 09-build-rules-and-local-developmentCómo se compila y cómo se ejecuta en local
- 10-quality-checklistVeintiocho criterios para validar el resultado contra el encargo
La línea que tuve que trazar
Trabajo en medios deportivos. Estaba construyendo un producto del Mundial en mi tiempo libre.
Eso es un conflicto esperando a que alguien lo lea mal, así que las reglas se escribieron antes que ninguna otra cosa.
- Lo que el proyecto tenía que ser
- Un explorador editorial con datos públicos y un escaparate del design system, sobre fuentes abiertas legítimas. Editorial en el tono, exploratorio en la estructura, y sin disimular que es una pieza de portfolio.
- Lo que no podía ser, se lea como se lea
- Nada de apuestas, ni porra, ni predictor, ni fantasy, ni clasificaciones de usuarios. Ningún nombre que se parezca a un producto de redacción, ningún dato interno o privado, y ninguna insinuación de estrategia de dentro.
La construcción
El trabajo era coordinar tres librerías, no añadirlas.
GSAP para el motion, Leaflet para el mapa, Three.js como capa de acento acotada, en ocho pantallas sobre Vite y Sass. Meter cualquiera de las tres en una página es fácil. Hacer que compartan un solo lenguaje de interacción en ocho pantallas, dentro de las reglas de tokens y componentes que SYX ya impone, es donde estaba el proyecto de verdad. Aquí no hubo equipo: los once documentos eran lo único que me mantenía honesto. La IA aceleró la implementación; la intención, los límites y el sistema ya estaban escritos.
El listón, y qué hice con él
Escribí veintiocho criterios de aceptación y no volví a abrirlos.
La lista cubre ocho áreas: arquitectura, cuánto se ve SYX en el resultado, encuadre de producto, capa de datos, motion, multitheming, entrega y una pasada final. La escribí como parte del encargo y nunca la pasé como revisión de cierre. Algo sí dio: mientras construía, iba decidiendo qué se le permitía ser al proyecto. Lo que no dio es aquello para lo que estaba hecha. Una lista de comprobación sin fecha en el calendario es documentación, no control.
- Especificaciones
- 11
- Criterios de aceptación
- 28
- Pantallas entregadas
- 8
Qué pasó después
Una pieza cerrada, y la que abro cuando alguien pregunta hasta dónde llego.
El repositorio no se mueve desde marzo y no le hace falta: esto es una pieza terminada, no un producto con hoja de ruta. Lo que hace hoy es contestar una pregunta más rápido que cualquier descripción: hasta dónde llega esto más allá del hand-off. Ese es el trabajo que tiene ahora.
Conclusión
El sistema aguanta en un registro visual más alto que su propia documentación.
Lo que quería comprobar era si SYX podía servir a un proyecto editorial con ambición visual de verdad —motion, 3D, cartografía, varios temas— sin que la arquitectura cediera por debajo. Pudo, y esa es la respuesta que me llevo. Lo que cambiaría es la parte que ya sé: los criterios se escribieron y la revisión nunca se puso en el calendario, así que el proyecto estuvo gobernado al principio y sin gobierno al final.