Estado 3 · Plástico

Éste es el estado que más fácil es malinterpretar. El Estado 3 no es “web bonita con IA”. No es generación aleatoria de layouts. No es personalización silenciosa al estilo Spotify Daylist. Es algo más modesto y, a la vez, más exigente: un sistema que puede regenerarse en runtime dentro de policies estrictas y publicadas, y que declara cuándo lo hace.

La tesis

Un componente plástico, como un material plástico, mantiene su materia (tokens, contratos, estructura semántica) y adopta formas distintas según el contexto. En un sistema agéntico con Estado 3 activado, el contexto puede ser hora local del lector, preferencia de esquema de color, modo reducido de movimiento, tipo de dispositivo, velocidad de lectura, idioma, región geográfica del caso de estudio, bandwidth disponible, postura del dispositivo.

Con toda esa información, y solo esa (sin PII, sin perfilado, sin seguimiento entre sitios), un agente regenera una variante del componente que mejora la experiencia para ese lector concreto. Y lo declara.

Ciclo de vida de un componente

Diagrama axonométrico del ciclo de vida del componente (cinco estados, 01 a 05). Visible en pantalla ancha.

Cinco estados. Los cuatro primeros están en producción hoy (en sistemas maduros; no en esta web todavía). El quinto, el plástico, es el que esta página demuestra parcialmente con reglas deterministas.

Cinco demos ejecutadas

Lo que viene no describe el Estado 3. Lo ejecuta con reglas publicadas. Ninguna demo usa modelo, agente, ni telemetría externa. Son funciones puras de hora local, scroll, zona horaria e historial en tu navegador.

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).

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 Estado 2 (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 → estado 1 → estado 2 → estado 3 → 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

Hay un argumento filosófico central. 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 del Estado 3 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é.

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.

1. Nunca modifica la tesis central del sitio. Los tres estados son fijos. El agente puede variar tono, densidad, ejemplos. No la doctrina.
2. Nunca inventa citas, fuentes, URLs, nombres de advisory. Solo el corpus auditado.
3. Nunca personaliza identidad del lector más allá de señales no-PII. Hora, dispositivo, preferencias, scroll. Nunca email, nunca perfilado.
4. Nunca oculta que es el agente quien regenera. Cada variante lleva marcador visible y timestamp.
5. Respeta Do-Not-Track desactivando toda telemetría no esencial.
6. Rollback automático si la composición falla policies OPA, contract test o accesibilidad. No publica algo roto.
7. Toda mutación en Fase 0 es determinista y declarada. Ninguna regla de plasticidad en esta página usa LLM, agente ni telemetría. Son funciones puras de hora local, velocidad de scroll, zona horaria e historial de visitas en tu navegador. Su código fuente es auditable en el repo. Cuando lleguen los agentes en Fase 3, 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.

Arquitectura técnica

Lo que hay hoy

• HTML semántico y progresive enhancement.
• CSS con oklch() (Baseline cross-browser desde mayo de 2023).
• Intl.DateTimeFormat (ECMAScript 2012).
• localStorage (Web Storage API, 2009).
• IntersectionObserver (Chrome 51 en 2016, cross-browser estable desde Safari 12.1 en marzo de 2019).
• Ninguna dependencia cliente pesada. Sin framework. Sin build step de IA.

Lo que vendrá en Fase 3

• Astro endpoint /api/chat con Claude Sonnet (o sucesor). Prompts de restricción fuertes.
• MCP server propio en mcp.tresestados.design. Expone list_tokens, get_component_contract, search_corpus, validate_composition, render_preview.
• pgvector en Supabase para RAG sobre el corpus MDX. Ver técnica en Nº 007.
• OPA en WASM en el edge evaluando cada composición propuesta.
• Vista previa en <iframe sandbox> con CSP estricta y Shadow DOM.

Nada de esto está activo hoy. El Estado 3 completo es la ambición declarada, no la realización presente. La Fase 0 ya demuestra que una parte del Estado 3 (plasticidad por policy, sin agente) es posible con herramientas deterministas publicadas en 1995 (CSS), 2012 (Intl) y 2023 (oklch()).

Materia y forma

Un componente plástico mantiene la materia (tokens, contratos, schema, aria semántica) y adopta formas distintas según el contexto de lectura. Lo que cambia es el tamaño, la densidad, la animación, el ejemplo geográfico, el tono de la microcopy. Lo que no cambia es el contract. El lector ve la forma; el sistema protege la materia. Cuando la mutación rompe contract, el sistema vuelve al canónico y lo declara. Eso es el Estado 3.

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, sobre todo, presumir de Estado 3 cuando lo que se tiene es Estado 1 con un wrapper de LLM encima.

El Estado 3 honesto se gana. Viene después del Estado 1 sólido y del Estado 2 gobernable. Saltárselos es un atajo que el lector paga.

Qué viene

Este sitio crecerá por fases hacia su Estado 3 completo. En 2027, cuando el Compendio tenga treinta o cuarenta fichas y el MCP esté público, se activará la primera regeneración real en /estados/estado-3 y /manifiesto. Será visible, etiquetada, reversible. Las cinco demos de esta página se convertirán en seis o siete cuando el agente entre al sistema. Pero el principio de declaración no cambiará.