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.
En una analogía · Es la diferencia entre decir "pon esto a 18 grados" y "ponlo en modo confort": el segundo lleva dentro la decisión, no el número.
El mecanismo: la intención viaja en tres sitios
Un token llamado azul-500 solo dice un color. Uno llamado color.accion.primaria dice además para qué sirve. Pero el nombre es solo el primero de los tres sitios donde un token puede llevar su intención, y un agente aprovecha los tres:
{
"color": {
"accion": {
"primaria": {
"$value": "{color.azul.500}",
"$type": "color",
"$description": "Únicamente para la acción principal de la vista. Si hay dos, una de las dos no es primaria.",
"$extensions": {
"ida.uso": { "maxPorVista": 1, "prohibidoEn": ["texto-corrido"] }
}
}
}
}
}
- El nombre (
accion.primaria) permite elegir por significado. - La
$descriptionlleva el criterio en prosa: es lo que el agente lee cuando duda, y donde cabe la regla que no cabe en un nombre. - Las
$extensionsllevan la intención en datos que una máquina valida: cuántas veces, dónde no. Esto convierte la intención en guardrail comprobable.
La prueba de fuego: pídele a un agente “un botón secundario para esta tarjeta”. Con tokens sin intención elegirá por estética (y a veces acertará); con estos tres niveles, elige por contrato.
Cómo se construye, en tres pasos
- Audita los nombres: lista tus tokens y marca cuáles nombran valor (
gris-100,radius-4) en lugar de propósito. Esos son primitivos: no los borres, pero que nada los consuma directamente. - Escribe la
$descriptionde los 20 tokens más usados como una instrucción a un desconocido, no como una etiqueta (“Fondo de las superficies elevadas. Nunca para el fondo de página.”). - Mueve a
$extensionslo que sea regla dura (límites de uso, pares prohibidos) para que la validación lo lea sin interpretar prosa.
La guía Tokens que hablan al agente recorre el proceso completo sobre el formato W3C DTCG; el término token semántico explica la capa de nombres en detalle.
Lecturas de referencia
A seguir
Seguir leyendo
- El ParteFigma Code Connect reduce tokensFigma Code Connect permite a los diseñadores mapear componentes de diseño con código real, lo que reduce la cantidad de tokens necesarios
- GuíaAuditoría AI-readiness de un design system en 7 pasosProcedimiento completo para diagnosticar si un design system existente es consumible por agentes: fuentes de verdad, tokens, APIs de componente, principios, exposición, governance y plan de cierre.
- 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.
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.