Problema
Una herramienta inspecciona una web y devuelve colores, tipografías, radios y espacios. El resultado se parece a un sistema de diseño porque tiene nombres, valores y quizá un archivo exportable. Pero ha recuperado la superficie renderizada, no las decisiones que la producen.
El mismo color puede representar texto principal, estado de error o decoración. El mismo espacio puede ser ritmo interno de un componente o separación entre secciones. Sin propósito, estado y contexto, el token solo dice «este valor apareció». No explica cuándo debe usarse, qué puede sustituirlo ni quién autoriza el cambio.
La especificación estable del Design Tokens Community Group define un formato para intercambiar tokens entre herramientas. Esa interoperabilidad es valiosa; no convierte por sí sola una extracción en un sistema.
Tesis
Extraer tokens recupera vocabulario visual. Reconstruir un sistema exige recuperar gramática, comportamiento y gobierno.
El token es una decisión nombrada y portable: valor, tipo, descripción, alias o metadata. El sistema relaciona esas decisiones con componentes, estados, patrones, accesibilidad, código, ownership y reglas de evolución. Confundir ambos niveles produce una biblioteca que replica el aspecto inicial y se rompe en cuanto aparece un contexto nuevo.
La pregunta útil no es «¿hemos capturado todos los colores?». Es «¿podemos explicar por qué existe cada decisión, dónde se aplica y qué prueba evita que cambie sin intención?».
Framework
Una reconstrucción fiable avanza por capas:
| Capa | Qué contiene | Qué no puede inferirse solo mirando píxeles |
|---|---|---|
| valor | color, tamaño, duración o familia | propósito |
| token semántico | intención como texto, superficie o peligro | regla de uso |
| componente | propiedades, estados y composición | comportamiento permitido |
| patrón | relación entre componentes y contenido | decisión de producto |
| gobierno | owner, versión, pruebas y deprecación | autoridad |
El formato DTCG permite asociar nombre, valor, tipo y descripción, organizar grupos y crear referencias. Su Resolver Module añade conjuntos, modificadores y orden de resolución para contextos como tema, tamaño o modos de accesibilidad. Esto revela un límite importante: incluso un estándar rico necesita que alguien modele los contextos. La herramienta puede transportar la decisión; no inventa correctamente su intención.
El U.S. Web Design System ofrece otro contraste. Presenta tokens como paletas discretas que reducen el continuo de opciones y los conecta con variables, funciones, mixins y utilidades usadas por componentes. El valor aislado importa menos que el efecto y la forma consistente de aplicarlo.
Por eso una extracción debe empezar como inventario, no como fuente de verdad. Agrupa repeticiones, detecta inconsistencias y formula hipótesis semánticas. Después contrasta esas hipótesis con código, documentación, estados, contenido real y personas responsables del sistema.
Por qué importa ahora
Los agentes pueden inspeccionar una interfaz, proponer tokens y generar componentes con rapidez. Esa capacidad reduce el coste de migrar estilos, pero también hace fácil legitimar errores históricos. Si una web contiene cinco variantes accidentales del mismo gris, el extractor puede convertir deuda en taxonomía.
El problema se amplifica con temas y marcas. Un mapeo por valor confunde equivalencia visual con equivalencia semántica. Dos botones pueden compartir color y tener distinta autoridad. Un modo oscuro no es invertir una paleta; debe conservar jerarquía, contraste, estados y significado.
También aparece una falsa sensación de propiedad. Copiar valores de una interfaz ajena no concede derechos sobre tipografías, iconos, ilustraciones o patrones protegidos. Y reproducir un aspecto no explica las decisiones internas que mantienen el sistema cuando cambia producto, canal o audiencia.
La extracción sí aporta valor cuando se usa para auditar. Puede localizar valores sin nombre, desviaciones entre producto y librería, componentes que no consumen tokens o áreas donde la marca depende de excepciones manuales. La diferencia está en el verbo: observar antes de gobernar.
Anti-ejemplo
Un equipo extrae estilos de su producto, genera un JSON y lo declara nueva fuente de verdad. Sustituye valores repetidos, pero no revisa estados de foco, error, carga ni contraste. Tampoco distingue decisiones globales de ajustes locales.
La migración parece limpia hasta que llega una segunda marca. El token blue-500 funciona como enlace, acción primaria y gráfico decorativo. Cambiarlo para una función rompe las otras. El fichero contiene todos los valores y ninguna semántica útil.
Otro fallo consiste en nombrar tokens por apariencia: small, gray-light, rounded. Esos nombres describen el presente y bloquean la evolución. Un token semántico debe sobrevivir a un cambio de valor sin mentir sobre su función.
Protocolo (3 pasos)
- Extrae como evidencia. Conserva origen, selector, componente, estado y frecuencia junto a cada valor detectado.
- Modela intención. Separa primitivos de tokens semánticos y vincula cada decisión con componentes, estados y requisitos de accesibilidad.
- Gobierna la migración. Asigna owner, versiona aliases y deprecaciones, y prueba temas, breakpoints y estados antes de declarar la nueva fuente de verdad.
| Resultado | Uso correcto | Gate |
|---|---|---|
| inventario | detectar repetición y deriva | procedencia conservada |
| taxonomía | nombrar decisiones | semántica revisada |
| sistema | operar producto y marca | componentes y pruebas conectados |
Relacionado
- Brand Systems vs Brand Output: por qué producir más ya no construye marca
- A2UI: la interfaz generativa necesita un catálogo gobernado
- Stitch, Pomelli y la marca como pipeline agéntico
Fuentes consultadas
- Design Tokens Format Module 2025.10
- Design Tokens Resolver Module 2025.10
- U.S. Web Design System: Design tokens
Próximo paso
Extrae una pantalla y conserva el resultado como inventario. Después intenta justificar cada token con intención, componente, estado y owner. Todo valor que no pueda cruzar esas capas todavía no pertenece al sistema: es una pista que necesita investigación.