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.
En una analogía · Es ponerle a un color el cargo que ocupa: no dices "azul 500", dices "color-de-acción", y mañana puedes cambiar quién ocupa el cargo.
También conocido como: semantic token · alias token · token de intención
Qué es un token semántico
El token semántico nombra la intención, no el valor: color.action.primary, color.feedback.error, surface.raised, space.inset.comfortable. Su $value es una referencia a un primitivo:
{
"color": {
"action": {
"primary": {
"$value": "{color.blue.500}",
"$type": "color",
"$description": "Acciones principales: botones primarios, links de avance."
}
}
}
}
Es la capa donde vive el criterio del sistema. Un primitivo dice “existe este azul”; el semántico dice “este azul significa acción”.
La capa que consumen los agentes
Cuando un agente genera UI contra un design system, la pregunta que hace no es “¿qué colores hay?” sino “¿qué color uso para un botón destructivo?”. Esa pregunta solo tiene respuesta si la capa semántica existe y está bien nombrada. Por eso:
- Un sistema con buena capa semántica es consultable: el agente mapea intención a token sin adivinar.
- Un sistema solo-primitivos obliga al agente a decidir por estética, que es exactamente el tipo de decisión que no se le debe delegar.
- Las
$extensionsdel formato DTCG permiten enriquecer el semántico con reglas operativas (superficies permitidas, contraste mínimo) que el agente puede validar antes de aplicar.
Nomenclatura: el contrato
La convención más extendida es categoría.concepto.variante (color.action.primary, color.action.primary.hover). Tres reglas prácticas:
- El nombre debe sobrevivir a un rebrand.
color.brand.principalsobrevive;color.azul-corporativono. - Cada nombre, una decisión. Si dos semánticos resuelven siempre al mismo primitivo y nadie sabe por qué hay dos, sobra uno.
- Los estados son variantes, no tokens nuevos.
hover,pressed,disabledcuelgan del concepto, no inauguran categoría.
Ver también
La semana 4 de la cohorte reconstruye la capa semántica de tu sistema real con $extensions legibles por agentes. La versión condensada está en la mini-formación de tokens.
Lecturas de referencia
A seguir
Seguir leyendo
- GuíaFigma MCP para design systems: el circuito diseño-código sin handoffQué expone el servidor MCP de Figma, cómo lo consume un agente como Claude Code o Cursor, y qué tiene que tener tu design system para que el circuito funcione de verdad.
- GuíaCómo se implementa un MCP server para tu design systemAnatomía mínima de un servidor Model Context Protocol que expone los tokens, principios y componentes de tu sistema a un cliente agéntico.
- El ParteAgent Plugins estandarizaAgent Plugins 1.0.0 es una iniciativa que busca estandarizar la forma en que se empacan y distribuyen habilidades de agentes y servidores MCP
Recibe la próxima guía en tu correo
Una guía operativa nueva cada poco: cómo se construye, qué decisiones implica y qué no se hace. Sin ruido, solo cuando hay algo útil.