Caso de estudio 05 · Proyecto propio · Sistema editorial AI-native · 2026
Darle a la IA un sistema con el que pensar y construir.
SYX ya gobernaba cómo se construye una página. Nada gobernaba qué debía decir. ATLAS es un segundo sistema, generado aparte, que lleva las reglas de un dominio —los medios digitales— y se las pasa a SYX para que las ejecute. Este caso es la prueba de si dos sistemas se pueden apilar sin que ninguno pierda el control.
En 30 segundos
- La tensión
- SYX gobernaba cómo se construye una página. Nada gobernaba qué debía decir.
- Mi decisión
- Un segundo sistema, ATLAS, generado aparte: seis dominios de conocimiento y diez patrones de motion que entregan sus reglas a SYX.
- La evidencia
- Dos registros opuestos, ATELIER y OBSIDIANA, que comparten 32 tokens semánticos y 3 primitivos. Recontado el 22 de agosto de 2026.
- Qué cambió
- El stack sostiene dos registros sobre una sola API semántica. Los 17 MB y 57 MB de media son el coste que no aceptaría en producción.
- Rol
- Diseñador de sistemas
- Modelo mental
- ATLAS · intención editorial
- Ejecución
- SYX · ejecución gobernada
- Sistema
- SCSS · GSAP · ScrollTrigger · Lenis
Acto 01
La prueba que me puse
El punto de partida
SYX gobierna cómo se construye una página. Nada gobernaba qué debía decir.
SYX es mi design system: tokens, accesibilidad, arquitectura y un validador que tumba el build. Responde a cómo se construye algo. No tiene opinión sobre jerarquía editorial, sobre la distancia entre un retrato y un dossier, sobre cuándo una página debe ir lenta. Quería saber si ese segundo cuerpo de reglas se podía generar aparte —como sistema propio, con su vocabulario— y si SYX aceptaría órdenes suyas. ATLAS es ese segundo sistema. Los medios digitales son el dominio con el que lo probé.
Criterio de éxito
Dos registros opuestos, un solo sistema.
Escribí el listón antes de empezar, para que el resultado no pudiera moverlo por lo bajo.
- Lo que me propuse demostrar
- Dos experiencias long-form que compartan la API semántica y discrepen en todo lo demás —tipografía, paleta, motion, tensión— construidas sin editar SYX y sin bajar el suelo de accesibilidad.
- Qué habría contado como fracaso
- Un solo registro, o dos que solo se diferenciaran en el color. Un sistema que produce una sola cosa no es un sistema: es una plantilla.
Lo que acepté
Dos registros, y un presupuesto de media que no aceptaría en producción.
Dos restricciones deliberadas, y prefiero decir el precio a omitirlo.
- Lo que compró la restricción
- Dos registros lo bastante separados como para que compararlos signifique algo, y un lenguaje de motion llevado a su techo en vez de a un punto medio seguro. La prueba necesitaba los dos extremos.
- Lo que costó
- Dos registros demuestran variación, no que la API semántica escale: eso pedía un cuarto y un quinto. Y las piezas cargan un presupuesto de media indefendible en un producto de cliente: 14.6 MB y 52.9 MB de vídeo.
- ATELIER · media declarado
- 17 MB
- OBSIDIANA · media declarado
- 57 MB
- Registros construidos
- 2
Acto 02
Cómo se construyeron las reglas
La decisión de la que cuelga el proyecto
El conocimiento troceado en dominios, cargados a demanda.
Troceé las reglas en seis dominios que se cargan por separado, dentro de un mind-system público de 340 ficheros, para que una tarea lea solo el dominio que necesita en vez del cuerpo entero de reglas. Todo lo demás sale de ahí. Trocear el conocimiento es lo que hace que un segundo sistema salga lo bastante barato como para consultarlo en cada tarea, y un segundo sistema que nadie consulta es documentación, no gobernanza.
- brandingPercepción de prestigio: fundamentos, y las reglas que salen de ellos
- frontAccesibilidad, arquitectura CSS, semántica, mejora progresiva
- motionDiez patrones, más fundamentos, capacidades y un glosario
- syxTokens, temas, color OKLCH y el pipeline de SCSS
- uiSistemas tipográficos, teoría del color, oficio de interfaz
- uxHeurísticas, leyes de UX, microinteracciones, escritura para interfaces
Separación de responsabilidades
ATLAS decide cómo debe sentirse la experiencia. SYX decide cómo se construye.
ATLAS es el modelo mental editorial; SYX es el ejecutor. La separación impide que la dirección creativa se cuele en las reglas de implementación, y es lo que hace depurable el apilado: cuando una pieza sale mal, o es un problema de intención o es un problema de build, y los dos viven en repositorios distintos.
Conocimiento, no prompts
Diez patrones de motion pasaron a ser parte del sistema, no parte de un prompt.
El dominio de motion documenta diez patrones reutilizables: intención narrativa, parámetros, controles de GSAP, el prompt que invoca cada uno y el fallback de reduced-motion al que degrada. Un patrón escrito dentro del sistema lo carga un modo; un patrón descrito en un prompt se redescubre en cada tarea. Esa es toda la distancia entre contexto e instrucción.
- character-cascadeLas letras entran una detrás de otra
- cursor-followerUna marca que sigue al puntero
- draw-svg-pathUna línea que se dibuja sola
- horizontal-scrollEl scroll vertical convertido en lateral
- magnetic-buttonUn control que tira hacia el puntero
- mask-revealContenido que descubre una máscara en movimiento
- parallaxCapas que viajan a distintas profundidades
- pinned-scrubUna sección fijada y recorrida por la posición del scroll
- scramble-textCaracteres que se resuelven en palabras
- typewriterTexto que se teclea al entrar
Acto 03
Lo que demostró
Evidencia de producto real
El mismo sistema. Dos registros editoriales radicalmente distintos.
ATELIER y OBSIDIANA se renderizan directamente desde las experiencias publicadas en GitHub Pages. Las vistas previas son intencionadamente no interactivas aquí; cada proyecto puede abrirse por separado para explorar todo el motion y el comportamiento del scroll.
La medición
Treinta y dos tokens semánticos compartidos. Tres primitivos compartidos.
Que dos páginas se parezcan o no es una opinión, así que en vez de opinar conté. ATELIER declara 35 tokens semánticos y OBSIDIANA declara 37; 32 de esos nombres son los mismos. Debajo, ATELIER declara 15 primitivos y OBSIDIANA 14, y solo 3 coinciden. Las dos piezas hablan una API semántica casi idéntica sobre valores de identidad casi enteramente distintos, que es el comportamiento que el apilado tenía que producir, dicho de una forma que quien lee puede ir a recontar.
- Tokens semánticos compartidos
- 32
- Primitivos compartidos
- 3
- Dominios de conocimiento
- 6
Acto 04
Lo que dejó
Adónde fue el patrón
El método se mudó a un dominio que no tiene nada de editorial.
ATLAS no se absorbió dentro de SYX: el tráfico fue al revés, y SYX sigue intacto. Lo que viajó fue la forma: un sistema de dominio encima de un sistema de ejecución, con el conocimiento troceado en dominios cargables. SYX-mail aplica esa forma al email HTML, donde las restricciones son Outlook y Gmail en vez de la jerarquía editorial: un modelo mental, seis dominios de conocimiento, un modo. Este portfolio también funciona así: ocho skills de dominio sobre un enrutador que decide cuáles carga cada tarea. Ninguno de los dos va de medios, y esa es la parte que hace que la prueba valga algo.
Conclusión
Escribir el patrón cuesta más que escribir el código.
Documentar los diez patrones de motion llevó más tiempo que implementarlos habría llevado en las dos piezas que los usan. El conocimiento escrito solo sale a cuenta por encima de cierto número de piezas, y yo no sabía ese número cuando empecé; sigo sin saberlo. Así que la lectura honesta de este proyecto es más estrecha que la ambición que lo movió: demuestra que dos sistemas componen, no que escribir el segundo fuera el camino más barato.
Abrir ATELIER ↗Abrir OBSIDIANA ↗Explorar el repositorio ↗SYX en GitHub ↗SYX-mail en GitHub ↗