Communitygithub.com

plugin87/token-build

Configura o ejecuta el pipeline de compilación de tokens: transforma los tokens DTCG `tokens/*.json` (fuente de verdad) en artefactos de plataforma (variables CSS, Tailwind `@theme`, JS/TS, Asset Catalog de iOS, Android, Compose) con Style Dictionary / Tokens Studio / exportación W3C DTCG. Úsalo cuando el usuario quiera generar archivos de tema de plataforma a partir de tokens, conectar CI de tokens o generar salida de tokens multiplataforma.

¿Qué es token-build?

Esta habilidad permite transformar tokens de diseño DTCG (fuente de verdad única) en artefactos listos para cada plataforma, como variables CSS, Tailwind `@theme`, tipos JS/TS, Asset Catalog de iOS u `colors.xml` de Android. Soporta múltiples herramientas: Style Dictionary (por defecto y multiplataforma), Tokens Studio (para tokens vinculados a Figma), exportación W3C DTCG o scripts personalizados basados en `validate_tokens.py`. Respeta reglas de resolución de alias, expone tokens semánticos y de componente (manteniendo primitivas internas), y genera deltas para temas oscuro, de marca y densidad. Incluye integración CI que valida y regenera automáticamente al modificar los archivos de tokens, y verifica contraste de color con `contrast.py`. Es ideal para equipos de desarrollo que necesitan mantener un único origen de tokens y desplegar temas consistentes en web, iOS y Android.

Compatible con~Claude Code~Codex CLI~Cursor
Part ofDesign & UI
npx skills add https://github.com/plugin87/ux-ui-agent-skills/tree/main/.claude/skills/token-build
Ver original→Ver todas las habilidades

Preguntar en tu IA favorita

Abre un nuevo chat con esta habilidad de agente ya precargada.

OpenAIChatGPTClaudeClaudeGeminiGeminiGrokGrokPerplexityPerplexityDeepSeekDeepSeek

Documentación

Habilidad: Compilación de Tokens

Convierte la fuente de verdad de tokens DTCG en salidas listas para cada plataforma. Los tokens se crean una vez; cada salida de plataforma se genera automáticamente.

Pasos

  1. Lee workflows/token-build.md (arquitectura, opciones de herramientas, reglas de resolución, destinos de salida, CI).
  2. Elige la herramienta: Style Dictionary (multiplataforma, la predeterminada), Tokens Studio (tokens de Figma — combinado con figma-integration), exportación W3C DTCG, o un script personalizado pequeño (modelado en scripts/validate_tokens.py).
  3. Respeta las reglas de resolución: resuelve alias a valores finales por plataforma; expone tokens semánticos y de componente (los primitivos se mantienen internos); emite sobreescrituras base + oscuro/marca/densidad (tokens/theming.json) solo como deltas; formatea según $type.
  4. Genera los destinos solicitados: variables CSS :root, Tailwind v4 @theme, JS/TS con tipos, Asset Catalog de iOS + Color.DS/Spacing, colors.xml de Android/theme de Compose.
  5. Conecta CI: al cambiar tokens/*.json, ejecuta scripts/validate_tokens.py, regenera y falla si los artefactos comprometidos están desactualizados; controla colores con scripts/contrast.py.

Verificación (definición de completado)

  • python3 scripts/validate_tokens.py pasa (sin alias sin resolver).
  • Regenerar no produce diferencias respecto a los artefactos comprometidos.
  • Las salidas oscuro/marca/densidad contienen solo deltas, no duplicados completos.

Individual skills in this repo

This repo contains 7 individual skills — each has its own dedicated page.

plugin87/design-tokens

Generate, extend, or audit design tokens in DTCG format with the 3-tier architecture (primitive → semantic → component). Use when the user wants a color palette, type scale, spacing/shadow/radius/motion tokens, multi-brand theming, or wants to validate token files. Covers colors, typography, spacing, shadows, borders, breakpoints, motion, gradients, opacity, blur, sizing, states, theming.

plugin87/governance

Govern how the design system evolves — SemVer for tokens/components, the contribution workflow, deprecation policy, and change communication. Use when the user wants to add/promote/deprecate a component or token, decide a version bump, set up a contribution process, or keep the system from fragmenting.

plugin87/image-to-code

Turn a reference image, screenshot, or mockup into token-driven, accessible code — infer the design system from the reference (palette, type scale, spacing, radius, layout archetype), map it to the 3-tier tokens, rebuild it, then verify with the kit's gates. Use when the user provides a design/screenshot and wants matching UI code.

plugin87/performance

Optimize UI performance against Core Web Vitals — LCP, INP, CLS — with loading/code-split strategy, layout-shift prevention, and animation performance rules. Use when the user wants to improve speed, fix jank or layout shift, hit Web Vitals budgets, or make a UI feel fast on low-end devices.

plugin87/prototype

Move an idea up the fidelity ladder (content-first → wireframe → low-fi → high-fi → code) with a validation plan at each level, plus user-journey mapping and usability-testing scripts. Use when the user wants to prototype, wireframe, map a user flow, or plan/run usability testing.

plugin87/redesign

Upgrade an existing website or app to premium quality without breaking functionality — audit the current design, identify generic/AI tells, then apply taste and system rules surgically. Use when the user wants to improve, modernize, polish, or "make better" an existing UI/codebase.

plugin87/ux-writing

Write or review UI copy — buttons, errors, empty states, microcopy, notifications, labels — using the voice & tone system (clear, concise, useful, human, honest) with the what→why→how error formula and inclusive-language rules. Use when the user needs interface copy, error messages, empty-state text, or a copy review.

Skills relacionados

steipete/sag

ElevenLabs text-to-speech with mac-style say UX.

community

steipete/oracle

Oracle CLI second-model review/debug/refactor/design with selected files, dry-run token checks, API or browser engine.

community

steipete/peekaboo

Capture and automate macOS UI with the Peekaboo CLI.

community

mattpocock/design-an-interface

Generate multiple radically different interface designs for a module using parallel sub-agents. Use when user wants to design an API, explore interface options, compare module shapes, or mentions "design it twice".

community

mattpocock/prototype

Build a throwaway prototype to flesh out a design — a runnable terminal app for state/business-logic questions, or several radically different UI variations toggleable from one route.

community

mattpocock/grill-me

Interview the user relentlessly about a plan or design until reaching shared understanding, resolving each branch of the decision tree. Use when user wants to stress-test a plan, get grilled on their design, or mentions "grill me".

community