004 ensayo
Estado 3 · Expresión
Una pantalla se recompone en milisegundos; un tabique no. El tercer estado es donde la decisión toma forma, y donde aparece la variable que el diseño digital casi nunca ha tenido que mirar: cuánto cuesta volver atrás.
Cada mutación de esta página es una regla determinista publicada. Ninguna consulta servidores externos; ninguna depende de un modelo.
- Cromatismo temporal
- Densidad editorial
- Ejemplos geográficos
- Camino de lectura
Todas las mutaciones viven en tu navegador (localStorage). Este botón las desactiva todas de una vez.
Una pantalla es un resultado. Un flujo es un resultado. Una distribución en planta es un resultado. Una selección de materiales es un resultado. Una escena de iluminación es un resultado. Lo que los une no es su forma: es que, antes de existir, alguien tuvo que decidir qué importa, qué está permitido, qué puede variar y qué debe permanecer.
El Estado 3 es donde la decisión toma cuerpo. Y es también donde aparece la diferencia que separa de verdad un design system digital de uno espacial: la materia tiene coste de reversión.
El mismo sistema, dos expresiones
Una decisión gobernada puede renderizarse en medios distintos sin dejar de ser la misma decisión.
DECISIÓN
│
┌──────────────┼──────────────┐
▼ ▼ ▼
interfaz servicio espacio
tokens + flujo + materiales +
componentes contenido componentes
│ │ │
▼ ▼ ▼
pantalla proceso lugarLo que cambia entre las tres columnas no es el criterio. Es el renderer. Y sobre todo, es cuánto cuesta cambiar de opinión después.
Cuatro grados de reversibilidad
Ésta es la aportación propia del sistema, y la razón por la que trasladar
tokens → components → patterns del software a la arquitectura sin añadir
nada más sería insuficiente.
coste de deshacer ↑
│
│ STRUCTURAL
│ evidencia + técnico + aprobación
│
│ EMBEDDED
│ validación + muestra + aprobación
│
│ FIXABLE
│ regla + compatibilidad
│
│ LOOSE
│ criterio / prueba
└────────────────────────────→ compromiso| Grado | Qué significa | En pantalla | En espacio |
|---|---|---|---|
| Loose | mover o sustituir | cambiar una preferencia de interfaz | mover una mesa, una cortina, un panel |
| Fixable | desmontar sin obra | cambiar una composición | sustituir mobiliario o textiles |
| Embedded | requiere obra | cambiar de versión del sistema | pavimento, revestimiento, instalación vista |
| Structural | alteración costosa, técnica o regulada | migración de plataforma | tabiquería, huecos, instalaciones |
A cada grado le corresponde un umbral de evidencia distinto, y de ahí sale una regla que sencillamente no existe en un design system digital:
rule: alto-coste-de-reversion
cuando:
reversibilidad: [embedded, structural]
exige:
- evidencia
- responsable
- aprobación explícita
- alternativas consideradas
motivo:
"el coste de equivocarse supera el coste de validar"O dicho en una línea:
Cuanto más cuesta deshacer una decisión, menos debería depender de una intuición no documentada.
No significa eliminar la intuición. Significa saber dónde basta y dónde necesita prueba.
Plástico no significa infinitamente variable
Una expresión que puede adaptarse no tiene derecho a volverse impredecible. De ahí un principio que ordena la libertad de mutación por consecuencia:
Cuanto mayor es la consecuencia de una decisión, menor debería ser la libertad de mutación de lo que la representa.
Lo que hace gobernable esa libertad es declararla pieza por pieza:
plasticidad:
puede_cambiar:
- densidad
- orden de la información
- explicación de apoyo
no_puede_cambiar:
- permisos
- semántica destructiva
- confirmación requerida
- contrato de accesibilidadUn sistema plástico no es el que cambia todo. Es el que sabe qué puede cambiar, en qué condiciones, a qué coste y cómo volver atrás.
Ciclo de vida de una pieza
Expresión a coste cero: cinco demos ejecutadas
Lo que viene no describe el Estado 3: lo ejecuta. Y sirve de contraste deliberado. Estas cinco mutaciones cuestan cero deshacerlas —basta recargar— y por eso pueden correr en tiempo real sin pedir permiso a nadie. Ninguna usa modelo, agente ni telemetría externa: son funciones puras de hora local, scroll, zona horaria e historial en tu navegador.
Guarda esa sensación de gratuidad. Es exactamente la que no existe cuando la decisión pesa kilos.
Demo uno · Cromatismo temporal
El rojo de acento que está viendo ahora mismo en esta página depende de la hora local del lector. De seis a once, baja 10% de saturación (amanecer). De once a diecisiete, es el rojo canónico. De diecisiete a veintiuno, baja 12% (atardecer). De veintiuno a seis, saturación reducida 18% (noche).
TL;DR: el rojo cambia su saturación según la hora local. Determinista, sin modelo. Reversibilidad: loose.
Demo dos · Densidad editorial
Esta página detecta velocidad de lectura. Si después de veinte segundos no has hecho scroll, aparecen notas marginales expandidas. Si has hecho scroll rápido (más de 2000px en diez segundos), aparecen TL;DR cada dos párrafos.
Las notas marginales y los TL;DR están escritos a mano en el MDX. La mutación es qué se muestra, no qué se genera. Esta distinción es crítica: no hay texto inventado; hay texto seleccionado.
Demo tres · Ejemplo geográfico
Los casos citados a continuación cambian según tu zona horaria. En España hoy puedes leer una lista cualitativa de design systems públicos como Polaris (Shopify), Carbon (IBM), Lightning (Salesforce) cuyos repositorios públicos contienen elementos compatibles con lo que aquí llamamos criterio gobernable (tokens en JSON, contract tests, exposición vía API documentada). La lista es inevitablemente parcial; el ejercicio es ilustrativo.
La detección usa Intl.DateTimeFormat().resolvedOptions().timeZone, que el navegador proporciona sin cookies. Si la zona horaria no encaja en una región conocida, se cae al listado global.
Demo cuatro · Camino de lectura
Al final de esta página, si has visitado otras antes, aparecerá el siguiente paso sugerido. La sugerencia viene de un orden publicado (manifiesto → reglas → decisiones → expresión → colofón) y de lo que ya está registrado en tu localStorage.
Demo cinco · Contador de mutaciones
El contador sticky arriba de esta página cuenta en tiempo real cuántas de las cuatro reglas deterministas anteriores se han aplicado para ti. Al hacer click se expande: muestra cada mutación con su estado actual, el botón para desactivarla individualmente, y el botón de desactivarlas todas de una vez. Las desactivaciones persisten en localStorage.
Por qué declarar la mutación es esencial
La regeneración silenciosa es una forma de manipulación incluso cuando es bienintencionada. El lector merece saber cuándo el texto que lee fue generado, reescrito o ajustado por un agente. Cuando una tienda online cambia precios dinámicamente sin decirlo, nos indignamos. Cuando un news site cambia titulares por A/B sin etiquetarlo, nos incomoda. El principio es el mismo: la capacidad de mutar conlleva el deber de declarar.
Por eso cada sección regenerada lleva visible un <aside> con el nombre de la regla, el estado actual, y el botón para desactivarla. No hay nada oculto. La regeneración se vuelve parte de la obra: la forma mutante y la forma canónica conviven en el mismo documento, y el lector sabe cuál está viendo y por qué.
En materia ocurre lo mismo con otro nombre. Un espacio que cambió respecto a lo proyectado y no lo registró ha perdido la única información que hacía útil el registro. La excepción no documentada es la mutación silenciosa del mundo físico.
Deontología del Estado 3
Siete reglas innegociables. Las seis primeras están también en /colofon#deontologia, como parte del método editorial. La séptima es específica de este estado.
- Nunca modifica la tesis central del sitio. Los tres estados son fijos. El agente puede variar tono, densidad, ejemplos. No la doctrina.
- Nunca inventa citas, fuentes, URLs, nombres de advisory, materiales, proveedores ni plazos. Solo el corpus auditado.
- Nunca personaliza identidad del lector más allá de señales no-PII. Hora, dispositivo, preferencias, scroll. Nunca email, nunca perfilado.
- Nunca oculta que es el agente quien regenera. Cada variante lleva marcador visible y timestamp.
- Respeta
Do-Not-Trackdesactivando toda telemetría no esencial. - Rollback automático si la composición falla policies, contract test o accesibilidad. No publica algo roto.
- Toda mutación en Fase 1 es determinista y declarada. Ninguna regla de plasticidad en esta página usa LLM, agente ni telemetría. Su código fuente es auditable en el repo. Cuando lleguen los agentes, esta página publicará aviso explícito con cambio de versión.
La séptima regla es la que separa un Estado 3 serio de una copia techno-solutionist. Diferencia plasticidad por policy de magia por modelo.
Expresión a coste capital: la materia
Todo lo anterior corre en un medio donde deshacer cuesta una recarga. El resto del trabajo del estudio ocurre en el otro extremo de la tabla.
Ahí la plasticidad no sucede en runtime: sucede antes de la obra, explorando alternativas bajo restricciones, y después de la obra, en lo que todavía puede moverse sin romper nada. Entre medias hay un momento irreversible que ningún sistema debería tratar como un despliegue.
Por eso la ambición honesta del Estado 3 físico no es arquitectura que se genere sola. Es algo más serio y más raro:
La inteligencia del proyecto persiste después de haber terminado de diseñarlo.
Una habitación puede saber qué escenas de luz admite. Un material puede saber por qué fue elegido y qué sustitutos son aceptables. Una pieza puede saber cuándo debe reemplazarse. Un proyecto puede conservar las alternativas rechazadas y el motivo. Y una reforma futura puede consultar ese corpus en vez de empezar otra vez desde cero.
El desarrollo aplicado está en el Caso 00 · Lo Peix y en el apartamento de 45 m².
Lo que el Estado 3 no justifica
No justifica generación sin corpus. No justifica agentes con acceso ilimitado. No justifica personalización agresiva. No justifica ocultar qué es humano y qué es generado. No justifica prometer que un software certifica lo que jurídicamente requiere revisión profesional. Y no justifica, sobre todo, presumir de plasticidad cuando lo que se tiene es un catálogo con un wrapper de LLM encima.
El Estado 3 honesto se gana. Viene después de reglas escritas y decisiones documentadas. Saltárselos es un atajo que alguien paga: en pantalla, el lector; en obra, el cliente.
Regenera una pieza aquí mismo
Esta sección no es un mockup: es el sistema ejecutándose sobre su propio corpus. Escribe una intención —un botón, una card, una sección— y recupera las fichas relevantes, llama a un modelo con instrucciones cerradas, valida la paleta contra los tokens publicados y te devuelve una pieza renderizada en un sandbox. Si pides algo que las reglas no autorizan (un color fuera de la paleta, una combinación prohibida como Tooltip dentro de Modal), el corpus rehúsa y te dice exactamente qué regla lo impide.
Tres cosas que no verás en un chatbot al uso: la mutación se declara en el panel de abajo, las citas te llevan a la ficha exacta que justificó cada decisión, y cualquier intento de inventar un color fuera del corpus se convierte en un rechazo explícito. El catálogo no es decoración: es la barandilla que el generador tiene obligación de tocar.
Si prefieres una página dedicada sin el resto del ensayo alrededor, el taller está en /componer.
Ejemplos ya hechos
Seis peticiones precocinadas que documentan de qué es capaz el corpus y dónde se niega. Haz clic en una y el generador se dispara con ella. Las tres primeras sirven la pieza; las tres siguientes demuestran la barandilla.
Regenera una pieza aquí mismo
Pídele al corpus una pieza. No inventará colores ni combinará piezas prohibidas: está obligado a citar las fichas que justifican la decisión, y si no puede, te lo dice.
Revisión · Septiembre 2026 · Los tres estados en aplicación: el método