En los propios términos del Skill
Genera arquitecturas de tokens de diseño de tres capas (primitivo → semántico → componente), especificaciones de componentes y diapositivas de presentación conformes con la marca. Los tokens primitivos definen valores en bruto como --color-blue-600. Los tokens semánticos los alían según su propósito (--color-primary). Los tokens de componente especifican el uso por componente (--button-bg).
El skill proporciona scripts de generación y validación para variables CSS, integración con el theme de Tailwind, y un sistema contextual de diapositivas que utiliza búsqueda BM25 en 15 estructuras de presentación, 25 layouts y arcos emocionales sparkline de Duarte. Todas las diapositivas deben importar design-tokens.css y usar exclusivamente variables CSS. Se requiere Chart.js para la visualización de datos. Admite la obtención de imágenes de Pexels y Unsplash.
Qué produce
- Informe de validación de tokens que identifica valores codificados de forma fija en el código fuente que deberían referenciar tokens
Cómo funciona
- 01Cargar referencia de arquitectura de tokens
El skill carga references/token-architecture.md para establecer la estructura de tokens de tres capas antes de generar o validar tokens.
- 02Generar CSS a partir de una configuración JSON
Ejecute generate-tokens.cjs con un archivo de configuración JSON para generar un archivo CSS con la estructura de tokens de tres capas como variables CSS.
- 03Buscar estrategias de diapositivas por objetivo
Utilice la búsqueda BM25 mediante search-slides.py para encontrar estructuras de deck, arcos emocionales y beats de sparkline coincidentes en slide-strategies.csv, con filtrado opcional por dominio (copy o chart) y posición contextual.
- 04Aplicar flujo de decisión contextual
Analice el objetivo, consulte slide-layout-logic.csv para el layout y el indicador break_pattern, slide-typography.csv para la escala tipográfica, slide-color-logic.csv para el tratamiento del color y slide-backgrounds.csv para la categoría de imagen.
- 05Generar HTML con design tokens
Cree el HTML de la diapositiva que importe assets/design-tokens.css, use var() para todo el estilo, incluya Chart.js para los gráficos y añada las clases de navegación y animación de slide-animations.css.
- 06Validar el cumplimiento de tokens
Ejecute slide-token-validator.py para comprobar que el HTML de la diapositiva generado usa exclusivamente variables CSS y no contiene valores de color, tipografía o espaciado codificados directamente.