Design Tokenpor Owl-Listener

Design Token Skill.

Da a las decisiones visuales nombres y relaciones que los componentes puedan reutilizar.

Sistemas de diseño
Especificaciones

Revisión de la fuente · Design TokenSKILL.md

Tarea Sistemas de diseño Produce • Una categorización de tokens y un esquema de nomenclatura • Relaciones entre tokens globales, alias y de componente • Orientación sobre uso y control de versiones Antes de empezar Aporta los valores visuales existentes, ejemplos de componentes y restricciones de nomenclatura. La skill define los nombres de los tokens y sus relaciones; la herramienta de exportación y la integración con el framework requieren una configuración aparte.

Resumen editorial · fuente revisada 2026-10-07 · no es un ejemplo generado

01 Qué hace

Design Token: Define una base semántica

Categorías de tokens de diseño, relaciones en tres niveles, nomenclatura, uso y orientación sobre versiones.

Flujo de trabajo basado en la fuenteNo es una prueba de ejecución

El enfoque de trabajo

Design Token define la base de un sistema de diseño. Abarca color, espaciado, tipografía, elevación, bordes y movimiento, con reglas de nomenclatura y uso que conectan los valores en bruto con su significado semántico.

La estructura de tres niveles separa los valores globales, los alias semánticos y los tokens específicos de componente. Esa distinción ayuda a un equipo a cambiar un valor sin perder la razón por la que se usa. La auditoría del uso existente y el mapeo multimarca son tareas explícitamente distintas.

Entregables esperados

Una categorización de tokens y un esquema de nomenclatura
Relaciones entre tokens globales, alias y de componente
Orientación sobre uso y control de versiones

Ver el brief de ejemplo

Del brief a la revisión

01
Inventariar las bases
Enumera los valores que el producto necesita para color, maquetación, tipografía, elevación y movimiento.
02
Definir los niveles
Separa las escalas en bruto de los roles semánticos y añade nombres específicos de componente solo donde sean útiles.
03
Documentar el consumo
Explica dónde se aplican los alias y cómo deben referirse a ellos los componentes en lugar de usar valores fijos en el código.

02 Cuándo usarlo

Cuándo usarla

Aporta los valores visuales existentes, ejemplos de componentes y restricciones de nomenclatura. La skill define los nombres de los tokens y sus relaciones; la herramienta de exportación y la integración con el framework requieren una configuración aparte.

Buen encaje

Una nueva capa de tokensÚsala cuando existen los valores visuales, pero no sus nombres y roles compartidos.
Bases inconsistentesDa un vocabulario común a las decisiones repetidas de espaciado o color.

Límites que conviene revisar

No es una auditoría automatizadaLa fuente remite la auditoría del uso existente a otra skill.
No es un pipeline de compilaciónDescribe la arquitectura de tokens, no garantiza una exportación ni una integración con un framework.

Aporta estos insumos

Valores actualesProporciona las decisiones de paleta, tipografía, espaciado y elevación.
Necesidades de los componentesMuestra usos y estados representativos.
Restricciones de nomenclaturaIndica las convenciones de la plataforma y las expectativas de control de versiones.

03 Decisiones importantes

Decisiones que importan

Los nombres conservan la intención
Los alias semánticos conservan la intención cuando cambian los valores en bruto.
Los niveles evitan confusiones
Un color global y un color de estado de un botón no deben tratarse como nombres intercambiables.

04 Ejemplo de brief

Prueba un brief concreto

El brief de ejemplo siguiente no se ha probado. Revisa la configuración de la skill antes de usarlo.

Revisar la configuración

Carga el SKILL.md de esta tarea desde el repositorio designer-skills en la ubicación de skills compatible con tu agente. El archivo de entrada no establece ningún comando de instalación universal.

Archivo fuente original

https://github.com/Owl-Listener/designer-skills/blob/9a6930cf84a822eb458624bd11c61aac5bbdf224/design-systems/skills/design-token/SKILL.md

Empieza con un solo entregable

Adapta el alcance, el material de origen y las restricciones de este brief antes de ejecutar la skill.

Brief de ejemplo

Usa design-token para definir una capa de tokens para este pequeño sistema de producto. Separa las escalas en bruto, los alias semánticos y los tokens de componente necesarios. Mapea los ejemplos de botón y tarjeta proporcionados, documenta las reglas de nomenclatura y evita afirmar que existe un pipeline de exportación que no hemos implementado.

Inspeccionar el resultado

Comprueba el resultado real con estos criterios observables.

Los alias se resuelven en valores definidos.
Los nombres comunican el uso y no una apariencia accidental.
Los componentes hacen referencia al nivel de token previsto.

OpenDesign ofrece un espacio de trabajo de diseño local para agentes de programación. Este listado no significa que la skill esté incluida ni que se incluyan sus herramientas externas, credenciales y dependencias de software.

Descargar OpenDesign Leer la guía de inicio rápido

05 Fuente y licencia

Fuente y licencia

Esta página describe la revisión fija de la fuente enlazada abajo. El comportamiento y los requisitos originales pueden cambiar.

Propietario de la fuente: Owl-Listener
Repositorio: Owl-Listener/designer-skills
Archivo de la skill: design-systems/skills/design-token/SKILL.md
Licencia: MIT
Versión revisada: 2026-10-07 · 9a6930cf84a8

Resumen editorial de la fuente

Categorías de tokens de diseño, relaciones en tres niveles, nomenclatura, uso y orientación sobre versiones.

Resumen original de OpenDesign, basado en la fuente enlazada. Las estrellas del repositorio son una señal de popularidad con fecha, no el uso de la skill ni una puntuación de calidad.

06 Preguntas antes de empezar

Preguntas antes de empezar

¿Los tokens son solo colores?

No. La fuente incluye espaciado, tipografía, elevación, bordes y movimiento.

¿Debe cada componente usar valores en bruto?

La fuente recomienda usar referencias semánticas en lugar de valores en bruto directos.

¿Sirve para varias marcas?

La entrada distingue la arquitectura básica de tokens de una tarea theming-system distinta.

OpenDesign

Haz espacio para la próxima iteración de diseño.

Mantén tu brief, el material de origen y el trabajo de diseño juntos en un espacio de trabajo local. Revisa la configuración propia de la skill antes de añadirla a tu flujo de trabajo.

Descargar OpenDesign Explorar skills de diseño