Communitygithub.com

plugin87/token-build

Richte die Token-Build-Pipeline ein oder führe sie aus — transformiere die DTCG-Tokens/*.json (Quelle der Wahrheit) in plattformspezifische Artefakte (CSS-Variablen, Tailwind-@theme, JS/TS, iOS-Asset-Katalog, Android, Compose) mit Style Dictionary / Tokens Studio / W3C DTCG-Export. Verwende dies, wenn der User plattformübergreifende Theme-Dateien aus Tokens generieren, Token-CI einrichten oder Multi-Plattform-Token-Ausgabe wünscht.

Was ist token-build?

Diese Fertigkeit definiert eine automatisierte Build-Pipeline für Design-Tokens, die auf dem W3C-DTCG-Standard basieren. Aus einer einzigen Quelle der Wahrheit (`tokens/*.json`) werden plattformspezifische Artefakte generiert: CSS-Variablen (`:root`), Tailwind v4 `@theme`, typisierte JS/TS-Module, iOS-Asset-Kataloge (einschließlich `Color.DS`/`Spacing`), Android `colors.xml` und Jetpack-Compose-Theme-Dateien. Unterstützt werden die Tools **Style Dictionary** (Standard), **Tokens Studio** (mit Figma-Integration) und W3C-DTCG-Export. Die Pipeline beachtet strenge Auflösungsregeln: Aliasse werden für jede Plattform aufgelöst, semantische und Komponenten-Tokens werden nach außen gegeben (Primitives bleiben intern), und Überschreibungen für Dark/Brand/Density (`tokens/theming.json`) werden als reine Deltas ausgegeben. Eine integrierte CI-Workflow-Kopplung stellt sicher, dass bei Änderungen an `tokens/*.json` ein Validierungsskript (`scripts/validate_tokens.py`) läuft, die Artefakte neu generiert werden und überholte Einträge einen Fehler verursachen. Ein separater Kontrast-Check (`scripts/contrast.py`) kann für Farben eingerichtet werden. Die Definition of Done erfordert, dass `validate_tokens.py` ohne Fehler durchläuft, die Regeneration keinen Diff zu den eingecheckten Artefakten ergibt und Dark/Brand/Density-Ausgaben nur Deltas enthalten.

Funktioniert mit~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
Original anzeigen→Alle Skills durchsuchen

In Ihrer bevorzugten KI fragen

Öffnet einen neuen Chat, in dem dieser Agent-Skill bereits geladen ist.

OpenAIChatGPTClaudeClaudeGeminiGeminiGrokGrokPerplexityPerplexityDeepSeekDeepSeek

Dokumentation

Fertigkeit: Token-Build

Wandle die DTCG-Token-Quelle der Wahrheit in plattformreife Ausgaben um. Tokens werden einmal erstellt; jede Plattformausgabe wird generiert.

Schritte

  1. Lese workflows/token-build.md (Architektur, Tool-Optionen, Auflösungsregeln, Ausgabeziele, CI).
  2. Wähle das Werkzeug: Style Dictionary (Multi-Plattform, Standard), Tokens Studio (Figma-eigene Tokens – paart sich mit figma-integration), W3C-DTCG-Export oder ein kleines benutzerdefiniertes Skript (Vorbild scripts/validate_tokens.py).
  3. Beachte die Auflösungsregeln: löse Aliase zu endgültigen Werten je Plattform auf; gib semantische + Komponenten-Tokens nach außen (Primitives bleiben intern); erzeuge Basis + Dark/Brand/Density-Überschreibungen (tokens/theming.json) nur als Deltas; formatiere nach $type.
  4. Generiere die angefragte(n) Zielplattform(en): CSS :root-Variablen, Tailwind v4 @theme, typisiertes JS/TS, iOS-Asset-Katalog + Color.DS/Spacing, Android colors.xml/Compose-Theme.
  5. Richte CI ein: bei Änderungen an tokens/*.json führe scripts/validate_tokens.py aus, generiere neu, schlage fehl, wenn eingecheckte Artefakte veraltet sind; schalte Farben mit scripts/contrast.py.

Verifikation (Definition of Done)

  • python3 scripts/validate_tokens.py besteht (keine unaufgelösten Aliase).
  • Neugenerierung erzeugt keinen Diff zu den eingecheckten Artefakten.
  • Dark/Brand/Density-Ausgaben enthalten nur Deltas, keine vollständigen Duplikate.

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.

Verwandte Skills

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