Glosario del diseño agéntico
Definiciones técnicas del vocabulario que el claustro usa en clase y en el libro. En castellano, con cifras y fuente cuando aplica.
-
$extensions (DTCG)
Un apartado libre dentro del formato estándar de tokens (DTCG) donde cada equipo puede guardar información extra propia sin estropear el formato común. Es el hueco oficial para añadir datos a medida: por ejemplo, con qué otros colores combina un token, qué usos están prohibidos o qué nivel de contraste cumple.
Leer entrada -
Accesibilidad sobre UI generada por IA
Asegurarse de que las pantallas creadas por una IA se pueden usar por todo el mundo, también por personas con alguna discapacidad: que haya suficiente contraste de color, que todo funcione solo con el teclado y que un lector de pantalla (el programa que lee la pantalla en voz alta a personas ciegas) entienda lo que hay. Para esto último ayudan las etiquetas ARIA, unas marcas invisibles que describen cada elemento para esos lectores. Conviene comprobarlo de forma automática, pero con revisión de una persona.
Leer entrada -
Agente (en diseño de producto)
Programa construido sobre un modelo de lenguaje que percibe un entorno (un repositorio, un canvas, una API), decide una secuencia de acciones y las ejecuta con herramientas, en bucle, hasta cumplir un objetivo verificable.
Leer entrada -
AI-readiness de un design system
Hasta qué punto un design system está preparado para que lo use una IA por su cuenta: con los valores de diseño (tokens) en un formato estándar, la documentación escrita de forma que una máquina pueda leerla, las reglas dichas de forma explícita y una vía de conexión (un servidor MCP) para que el agente lo consulte.
Leer entrada -
Alucinación
Cuando una IA da una respuesta que suena convincente pero es falsa o se la ha inventado. En diseño con agentes se reduce dándole datos reales con los que trabajar (tokens, reglas) y comprobando después lo que produce, para que improvise lo menos posible.
Leer entrada -
Atomic Design
Una forma de construir interfaces empezando por las piezas más pequeñas y combinándolas en otras cada vez mayores, igual que en química los átomos forman moléculas. Lo propuso Brad Frost y ordena las pantallas en cinco niveles, de lo más simple a lo más completo, para que todo encaje y se reutilice en vez de rehacerse.
Leer entrada -
Auditoría
Una revisión ordenada y completa del sistema de diseño (sus componentes, sus valores base de estilo o tokens, su accesibilidad) para ver cómo está antes de decidir qué cambiar: qué es coherente y qué no, qué falta por cubrir y qué incumple las reglas.
Leer entrada -
Casos Vivos
Formato de contenido del I.D.A. basado en casos reales y versionados de sistemas agénticos, frente a ejemplos teóricos estáticos.
Leer entrada -
Claude Code
Asistente de programación de Anthropic que trabaja desde la terminal (la pantalla negra donde se escriben comandos) o desde el IDE (el programa donde se escribe el código). Lee tu proyecto entero, entiende cómo encaja y hace cambios en varios archivos a la vez por su cuenta; además puede conectarse a servidores externos (los llamados MCP) para usar más herramientas.
Leer entrada -
Componente
Una pieza de la interfaz (lo que el usuario ve y toca) que se reutiliza una y otra vez, como un botón, un campo de texto o una tarjeta. Tiene unas opciones, unos estados (por ejemplo, activo o deshabilitado) y un comportamiento definidos, y existe tanto en el código como en la herramienta de diseño, siempre igual en los dos sitios.
Leer entrada -
Contratos / guardrails
Límites claros y comprobables que marcan qué puede y qué no puede hacer una IA dentro del sistema. No le dicen cómo trabajar, pero impiden que se salga de lo permitido, y como son automáticos, se puede verificar que se cumplen.
Leer entrada -
Convenciones de nomenclatura
Las reglas para poner nombre de forma ordenada a los valores base de estilo (los tokens, como un color o un espaciado con nombre) y a los componentes. Los nombres se construyen por niveles (a qué grupo pertenece, de qué tipo es, para qué sirve, qué variante y qué tamaño), de manera que cualquiera adivine cómo se llama algo y lo encuentre sin tener que buscar a ciegas.
Leer entrada -
Core Web Vitals
Tres medidas con las que Google resume si una web se siente bien al usarla de verdad: cuánto tarda en aparecer lo importante, si responde al instante cuando tocas algo, y si no se mueve sola mientras lees. Se calculan a partir de visitas reales, no de una prueba de laboratorio.
Leer entrada -
Cursor
Programa para escribir código (un IDE, es decir, el entorno donde se programa) creado por Anysphere a partir de VS Code, con la IA integrada de serie. Lee y recuerda todo el proyecto, puede cambiar varios archivos a la vez por su cuenta y conectarse a servidores externos (los llamados MCP) para usar más herramientas.
Leer entrada -
Design Engineer
Un perfil que trabaja a la vez en el diseño y en el código: hace prototipos y construye la interfaz final (lo que el usuario ve y toca) él mismo, sin tener que pasarle el diseño a otra persona para que lo programe. Al juntar las dos partes, evita que se pierdan detalles en el traspaso de diseño a desarrollo.
Leer entrada -
Design System Architect
La persona que diseña y mantiene la estructura de fondo de un sistema de diseño: cómo se organizan los valores base de estilo (los tokens) y los componentes para que el sistema aguante el paso del tiempo, crezca sin romperse y, cuando se trabaja con IA, lo puedan entender y usar también los agentes. Decide las reglas y los cimientos, no cada pantalla concreta.
Leer entrada -
Design tokens
Nombres con valor guardado que recogen las decisiones de diseño de un producto (este color, este espacio, esta tipografía) en un formato que sirve igual para web, móvil o cualquier plataforma, y que entienden tanto las personas como las máquinas. En vez de copiar el código de un color por todas partes, le pones un nombre y lo usas. El término lo acuñó el equipo de Salesforce (Jon Levine y Jina Anne, hacia 2014).
Leer entrada -
Design-to-code
El conjunto de procesos y herramientas que convierten un diseño en el código que de verdad acaba funcionando en el producto. El reto de siempre es que en ese paso no se pierda nada ni se invente nada; herramientas como Code Connect y los MCP (canales que dan contexto a la IA) buscan que la traducción sea fiel y reutilice los componentes que ya tienes.
Leer entrada -
Diseño agéntico
Forma de diseñar pensando en que quien va a usar el design system no es solo una persona, sino también una IA que lee el sistema, decide y crea las pantallas por su cuenta. Por eso todo (valores, componentes, reglas) se escribe de forma clara y precisa para que la máquina no tenga que improvisar.
Leer entrada -
Documentación legible por agentes
Documentar el sistema no solo con textos para personas, sino también en formatos ordenados (como JSON, YAML o Markdown) que una IA puede leer e interpretar sin equivocarse. Así el agente entiende las normas tal cual, sin tener que adivinarlas.
Leer entrada -
Duplas (designer-developer pairing)
Trabajar diseñador y desarrollador juntos y en contacto continuo, en lugar de pasarse el trabajo por turnos. En el I.D.A. la pareja suma un tercer miembro: un agente de IA que colabora con los dos.
Leer entrada -
EN 301 549
La lista de requisitos técnicos de accesibilidad que usa la Unión Europea para productos y servicios digitales. Es el documento concreto que traduce "esto tiene que ser accesible" en comprobaciones precisas, y recoge dentro las pautas WCAG. Por sí sola no obliga a nada: cobra fuerza porque la ley europea de accesibilidad (la EAA) la señala como vara de medir.
Leer entrada -
Escalera de autonomía
Marco del I.D.A. que decide, tarea por tarea, qué puede hacer la IA por su cuenta y qué necesita que una persona lo apruebe. La autonomía se da por niveles: poca al principio y más a medida que el agente demuestra que acierta.
Leer entrada -
European Accessibility Act (EAA)
La ley europea que obliga a que muchos productos y servicios digitales (tiendas online, banca, transporte, ebooks) puedan usarlos también las personas con discapacidad. EAA son sus siglas en inglés. Es obligatoria desde el 28 de junio de 2025; en España la aplica la Ley 11/2023.
Leer entrada -
Fábrica de interfaces
Metáfora del I.D.A. para un sistema en el que los agentes producen interfaces a escala a partir de las reglas, tokens y contratos que define el humano.
Leer entrada -
Figma Code Connect
Una función de Figma que conecta cada elemento de diseño con el trozo de código real que le corresponde en tu proyecto. Así, cuando un agente de IA genera pantallas, usa tus componentes ya construidos en lugar de inventarse otros nuevos. La conexión se le pasa al agente a través de un MCP (un canal por el que las herramientas le dan contexto al modelo).
Leer entrada -
Figma MCP (Dev Mode MCP server)
Una conexión que pasa al agente de IA los datos reales de un diseño de Figma (sus colores, sus componentes, sus medidas) en vez de una simple imagen. Así, cuando el agente convierte el diseño en código, parte de la información exacta y no tiene que adivinar mirando una captura. MCP es el estándar que hace posible esa conexión.
Leer entrada -
Fuente única de verdad
La idea de que cada decisión de diseño tenga un único sitio oficial donde se define, y que todo lo demás (el diseño, el código, la documentación) salga de ahí. Así nunca hay dos versiones que se contradicen: si algo hay que cambiar, se cambia en ese origen y el cambio llega a todas partes.
Leer entrada -
Generación de UI por IA
Que un programa de IA construya la interfaz (las pantallas, lo que el usuario ve y toca) a partir de un diseño, unos valores base de estilo (los tokens, como colores o espaciados con nombre) y unas reglas. Lo bien o mal que salga depende de lo claro y ordenado que esté el sistema del que parte: si el origen es un caos, la IA también se equivoca.
Leer entrada -
Gobernanza progresiva / ejecutable
Modelo en el que las reglas del sistema se escriben como código que se puede comprobar solo y se aplican automáticamente en la línea que revisa y publica cada cambio (lo que se llama CI/CD), en vez de depender de que una persona las repase a mano.
Leer entrada -
Governance agéntica
Modelo de gobierno de un design system que trata a los agentes como consumidores y contribuidores de primera clase: las reglas del sistema se publican en formatos legibles por máquina y los flujos de contribución definen explícitamente qué puede hacer un agente y qué requiere revisión humana.
Leer entrada -
Governance de design systems
Las normas que deciden cómo evoluciona un sistema de diseño: quién puede proponer un cambio, quién lo aprueba, cómo se publica una nueva versión y cómo se mantiene todo con el tiempo. En resumen, las reglas del juego para que el sistema crezca con orden y no a empujones.
Leer entrada -
Handoff (traspaso)
El momento en que el equipo de diseño entrega su trabajo al de desarrollo para que lo construya. Cuando ese traspaso es rígido (diseño termina, lanza el material por encima del muro y se desentiende), se pierden detalles y aparecen errores; por eso las formas de trabajar modernas prefieren la colaboración continua en lugar de una entrega seca.
Leer entrada -
Librería
Un paquete con todos los componentes, estilos y valores base de diseño (los tokens) ya listos, que se publica con un número de versión para que los equipos lo usen. Puede vivir en Figma (para diseñar), en npm (el almacén de paquetes de código que usan los desarrolladores) o en ambos, y todos cogen de ahí en vez de fabricar cada uno lo suyo.
Leer entrada -
Linting de tokens
Una revisión automática que comprueba que los valores base de estilo (los tokens, como colores o espaciados con nombre) se usan bien según las reglas del sistema. Avisa, por ejemplo, cuando alguien escribe un color a mano en vez de usar el token correspondiente, o cuando sigue usando un token que ya está retirado.
Leer entrada -
llms.txt
Archivo Markdown servido en la raíz de un sitio (/llms.txt) que propone Jeremy Howard en septiembre de 2024 como índice curado para modelos de lenguaje: qué es el sitio, qué documentos importan y dónde están sus versiones en texto plano.
Leer entrada -
MCP (Model Context Protocol)
Protocolo abierto publicado por Anthropic en noviembre de 2024 que estandariza cómo un cliente agéntico (Claude, Cursor, un agente custom) consulta sistemas externos en tiempo real mediante tres primitivas: resources, tools y prompts.
Leer entrada -
Prompt de sistema
Las instrucciones de fondo que se le dan a una IA antes de que empiece a trabajar y que siguen activas todo el rato: qué papel tiene, qué puede y qué no puede hacer, y con qué criterios responder. No las ve el usuario, pero condicionan todo lo que el asistente contesta o produce.
Leer entrada -
Rego / Open Policy Agent (OPA)
Una herramienta para escribir reglas que una máquina aplica sola. OPA (Open Policy Agent, "agente de políticas abierto") es el programa que toma una decisión de sí o no; Rego es el lenguaje en el que se escriben esas reglas. En vez de que una persona revise a mano si algo cumple, defines la norma una vez y el sistema la comprueba en cada cambio.
Leer entrada -
Servidor MCP
Pieza de software que sigue el estándar MCP (un protocolo común para que las IA hablen con otros programas) y le ofrece a un asistente de IA cosas que puede usar: herramientas que ejecutar, datos que leer e instrucciones listas. En diseño con agentes, suele exponer el design system para que herramientas como Claude Code o Cursor lo consulten directamente.
Leer entrada -
Sistema de diseño
El conjunto de principios, piezas reutilizables (los componentes), valores base de estilo (los tokens, como colores o espaciados con nombre), pautas y documentación que un equipo comparte para diseñar y construir sus productos. Es una base común y viva (se actualiza con el tiempo) que hace que todo lo que se crea sea coherente, aunque lo hagan muchas personas distintas.
Leer entrada -
Style Dictionary
Herramienta open source (origen Amazon, 2017) que compila design tokens desde JSON canónico a cualquier formato de salida: CSS custom properties, Swift, Android XML, documentación. Desde la versión 4 acepta el formato W3C DTCG de forma nativa.
Leer entrada -
Theming
Poder cambiar el aspecto de un producto (por ejemplo el modo claro y el oscuro, o los colores de marcas distintas) sin rehacer nada por dentro. Se logra cambiando solo los valores base de estilo (los tokens, como los colores o los espaciados con nombre) mientras la estructura y los componentes siguen siendo los mismos.
Leer entrada -
Token de componente
Valor de diseño (token) atado a una pieza y a una propiedad muy concretas, por ejemplo el fondo del botón principal (button-background-primary). Suele apuntar a un token más general, y es el nivel que da más control fino sobre un elemento sin tocar el resto.
Leer entrada -
Token primitivo
Token de la capa base de un design system: un valor crudo con nombre descriptivo (color, medida, fuente) que no expresa intención de uso. Los tokens semánticos y de componente se construyen referenciándolo.
Leer entrada -
Token semántico
Token que expresa intención de uso (acción, peligro, superficie, énfasis) y resuelve a un token primitivo por referencia. Es la capa que traduce valores en decisiones y la que consumen componentes y agentes.
Leer entrada -
Token W3C DTCG
Estructura JSON estandarizada por el W3C Design Tokens Community Group para describir un valor de diseño (color, espacio, tipografía) junto con su tipo, sus alias y sus extensiones legibles por agentes.
Leer entrada -
Tokens con intención
Forma de definir los tokens (los valores guardados de diseño, como un color o un espaciado) en la que el nombre recoge el para qué de la decisión, no solo el número. Así una IA puede elegir el token adecuado por lo que significa, no por su valor.
Leer entrada -
Tokens Studio
Complemento (plugin) para Figma que sirve para crear, organizar y mantener sincronizados los tokens (los valores guardados de diseño). Entiende el formato estándar W3C DTCG y puede exportar los tokens al código con la herramienta Style Dictionary.
Leer entrada -
Trazabilidad
Poder seguir el rastro de cada decisión de diseño desde su origen hasta donde acaba apareciendo. Por ejemplo, partir de un color base (un token primitivo, el valor más elemental del sistema), ver en qué componentes se usa y en qué pantallas del producto final aparece, tanto en las herramientas de diseño como en el código.
Leer entrada -
Tres estados (clásico / agéntico / plástico)
Marco del I.D.A. que ordena los design systems según quién los usa y cuánto se adaptan solos: clásico (pensado para personas), agéntico (preparado para que una IA lo lea y lo ejecute) y plástico (capaz de generarse y reconfigurarse según el contexto).
Leer entrada -
UX Engineer
Un perfil a caballo entre el diseño y la parte de programación que el usuario ve directamente en pantalla (el front-end). Habla los dos idiomas, el de diseño y el de código, y hace de puente entre ellos. Cuando se trabaja con IA, además dirige a los agentes que se encargan de producir el trabajo: les marca qué hacer y revisa el resultado.
Leer entrada -
Validación en CI
Comprobación automática de los tokens, los componentes y las reglas que se ejecuta dentro de la línea que revisa y publica cada cambio (lo que se llama CI/CD). Si un cambio no cumple los criterios, lo frena antes de que entre en el proyecto.
Leer entrada -
Variante
Una versión preparada de un mismo componente que cambia según unas opciones: por ejemplo un botón en su forma principal o secundaria, grande o pequeño, normal o desactivado. En lugar de crear un componente distinto para cada combinación, defines uno solo con opciones y eliges la que necesitas.
Leer entrada -
W3C Design Tokens Community Group (DTCG)
Grupo de la comunidad del W3C (el organismo que fija los estándares de la web) que ha creado un formato común y abierto, no atado a ninguna marca, para definir e intercambiar los design tokens (los valores guardados de diseño) entre distintas herramientas y plataformas.
Leer entrada -
WCAG 2.2
La guía de referencia mundial para que una web pueda usarla cualquier persona, también quien no ve, no oye o no puede usar el ratón. WCAG son las siglas en inglés de "Pautas de Accesibilidad para el Contenido Web". La versión 2.2 (de octubre de 2023) es la vigente y suma 9 comprobaciones nuevas respecto a la anterior.
Leer entrada