Communitygithub.com

plugin87/design-tokens

Generieren, erweitern oder prüfen Sie Design-Tokens im DTCG-Format mit einer 3-stufigen Architektur (primitiv → semantisch → Komponente). Verwenden Sie dies, wenn der Nutzer eine Farbpalette, eine Typografieskala, Abstands-/Schatten-/Radius-/Bewegungs-Tokens, Multi-Brand-Theming oder die Validierung von Token-Dateien wünscht. Enthält Farben, Typografie, Abstände, Schatten, Rahmen, Breakpoints, Bewegung, Verläufe, Deckkraft, Unschärfe, Größen, Zustände, Theming.

Was ist design-tokens?

Dieses Skill ermöglicht die Erstellung und Pflege von Design-Tokens im DTCG-Format (mit `$type`/`$value`) unter Einhaltung eines 3-stufigen Architektursystems: primitive (Rohwerte), semantische (Zweck-Aliase) und komponentenspezifische Tokens. Es deckt alle gängigen Design-Token-Kategorien ab, darunter Farben, Typografie, Abstände, Schatten, Rahmen, Breakpoints, Bewegung, Verläufe, Deckkraft, Unschärfe, Größen, Zustände und Multi-Brand-Theming. Der Prozess beginnt mit dem Einlesen von Projektregeln (z. B. 4px-Basis, Major Third-Skala, OKLCH-Paletten) und vorhandener Token-Dateien, erzeugt neue Werte und validiert diese mittels eines Python-Scripts auf JSON-Korrektheit und Alias-Auflösung. Der Skill ist für Entwickler gedacht, die konsistente, barrierefreie und thematisierbare Designsysteme in Projekten wie Claude Code, Cursor oder Codex umsetzen möchten.

Funktioniert mit✓Claude Code~Codex CLI~Cursor
npx skills add https://github.com/plugin87/ux-ui-agent-skills/tree/main/.claude/skills/design-tokens
Original anzeigen→Alle Skills durchsuchen

In Ihrer bevorzugten KI fragen

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

OpenAIChatGPTClaudeClaudeGeminiGeminiGrokGrokPerplexityPerplexityDeepSeekDeepSeek

Dokumentation

Skill: Design-Tokens

Erzeugen und Pflegen von DTCG-Tokens ($type/$value) gemäß dem 3-stufigen System des Projekts.

Schritte

  1. Lies .claude/rules/tokens-and-color.md → „Token-System“ + „Farbrichtlinien“ und .claude/rules/typography-and-spacing.md für die Regeln (4px-Basis, Major-Third-Skala, OKLCH-Palettenerzeugung, Dark-Mode auf semantischer Ebene).
  2. Lies die relevanten vorhandenen Dateien in tokens/, um die Struktur zu übernehmen: colors.json, typography.json, spacing.json, shadows.json, borders.json, breakpoints.json, motion.json, gradients.json, opacity.json, blur.json, sizing.json, states.json, theming.json.
  3. Erzeuge/erweitere Tokens:
    • Primitive = Rohwerte (niemals direkt verwendet). Semantisch = Zweck-Aliase. Komponenten = komponentenspezifisch.
    • Neue Paletten: erzeuge 11 OKLCH-Farbtöne; prüfe, dass 500 ≥ 4,5:1 auf Weiß (Text) und 600 ≥ 3:1 (UI) ist – verwende dazu das Skill a11y-audit / scripts/contrast.py.
    • Multi-Brand/Dichte → theming.json.
  4. Validiere: führe python3 scripts/validate_tokens.py aus (JSON-Gültigkeit + Alias-Auflösung).

Ausgabe

DTCG-JSON. Bei jedem Token muss $description vorhanden sein. Referenziere, hartcodiere nicht.

Individual skills in this repo

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

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/token-build

Set up or run the token build pipeline — transform the DTCG tokens/*.json (source of truth) into platform artifacts (CSS variables, Tailwind @theme, JS/TS, iOS Asset Catalog, Android, Compose) with Style Dictionary / Tokens Studio / W3C DTCG export. Use when the user wants to generate platform theme files from tokens, wire token CI, or multi-platform token output.

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/video-frames

Extract frames or short clips from videos using ffmpeg.

community

steipete/summarize

Summarize or transcribe URLs, YouTube/videos, podcasts, articles, transcripts, PDFs, and local files.

community

openclaw/openclaw

Use when testing, fixing, or extending the OpenClaw Control UI GUI with Vitest + Playwright end-to-end checks, mocked Gateway WebSocket flows, mocked dashboard runs, screenshots/videos, or agent-verifiable browser proof.

community

obra/superpowers

Obra superpowers agent skills.

community

affaan-m/ECC

See, Understand, Act on video and audio. See- ingest from local files, URLs, RTSP/live feeds, or live record desktop; return realtime context and playable stream links. Understand- extract frames, build visual/semantic/temporal indexes, and search moments with timestamps and auto-clips. Act- transcode and normalize (codec, fps, resolution, aspect ratio), perform timeline edits (subtitles, text/image overlays, branding, audio overlays, dubbing, translation), generate media assets (image, audio...

community

affaan-m/everything-claude-code

End-to-end marketing campaign planning and execution. Covers audience research, positioning, campaign angle definition, landing page copy, email sequences, social posts, ad copy, short-form video scripts, and content calendars. Use as the orchestration layer for multi-channel product launches. Use when planning or executing a multi-channel product launch, or producing landing page, email, social, or ad copy.

community