Design Tokens
Design Tokens manages design token files using the DTCG 2025.10 standard with a dependency-free Python core. It scaffolds token sets, validates them against the spec, merges project overrides with global brand bases, resolves aliases, and exports to CSS custom properties. The skill also generates preview pages, design documentation, and generation prompts for on-brand image creation.
Design Tokens helps you set up, validate, and export design tokens in the DTCG 2025.10 standard format for consistent brand systems.
AI-generated summary based on this skill's SKILL.md
Decision gist · record as of 2026-07-27
Design Tokens helps you set up, validate, and export design tokens in the DTCG 2025.10 standard format for consistent brand systems. Design Tokens manages design token files using the DTCG 2025.10 standard with a dependency-free Python core. It scaffolds token sets, validates them against the spec, merges project overrides with global brand bases, resolves aliases, and exports to CSS custom properties. The skill also generates preview pages, design documentation, and generation prompts for on-brand image creation.
Use it when
- Design Tokens provides a dependency-free Python core to get you started quickly.
- Design Tokens handles the complete token lifecycle: scaffolding token sets, validating them against the DTCG 2025.10 standard.
Install
glebis/claude-skills/design-tokens · repository language: JavaScript
generated, unverified - the skill's exact subdirectory could not be determined; check the repository on GitHub
Open directory. Skills are indexed for reading, not audited. Review a skill's body before installing it.
Frequently asked questions
AI-generated answers based on this skill's SKILL.md and metadata
What are design tokens and how do they work?
Design Tokens manages design token files using the DTCG 2025.10 standard. Design tokens are reusable design decisions—like colors, typography, and spacing—stored as variables. Design Tokens scaffolds token sets, validates them against the spec, resolves aliases between tokens, and exports them to CSS custom properties so your entire design system stays synchronized across projects.
How do I implement design tokens in my project?
Design Tokens provides a dependency-free Python core to get you started quickly. It scaffolds token sets for your project, merges project-specific overrides with global brand bases, and exports to CSS custom properties automatically. The skill handles the full workflow—from organizing your tokens to generating preview pages and design documentation—so you can integrate a complete token system without manual setup.
What design token management features does this skill offer?
Design Tokens handles the complete token lifecycle: scaffolding token sets, validating them against the DTCG 2025.10 standard, merging project overrides with global brand bases, resolving token aliases, and exporting to CSS custom properties. It also generates preview pages and design documentation to keep your team aligned on token usage and changes.
Can Design Tokens help with design tokens for UI and style guides?
Yes. Design Tokens generates preview pages and comprehensive design documentation that serve as living style guides. It also creates generation prompts for on-brand image creation, ensuring your UI stays consistent. The skill's validation and export features guarantee your tokens meet the DTCG standard and work seamlessly across CSS and design tools.
What tools or systems does Design Tokens use for organization?
Design Tokens uses the DTCG 2025.10 standard as its foundation for token organization and validation. It includes a dependency-free Python core for processing, scaffolding, merging, and exporting tokens. The skill organizes tokens into sets, resolves aliases, and exports to CSS custom properties, making it compatible with modern design workflows and frameworks.
Does Design Tokens support design tokens automation and workflow?
Design Tokens automates the entire token workflow: scaffolding sets, validating against the DTCG spec, merging overrides with brand bases, resolving aliases, and exporting to CSS. It also generates preview pages and documentation automatically, reducing manual work and keeping your design system synchronized across all projects.
Let your AI agent find skills like this
Example. Real query, live index.
You found this page by searching. An agent finds it by wishing: SkillFed indexes 56,283 agent skills by what they can do, searchable in plain language.
wish › “Understand what design tokens are and how they work”
Give your agent the search over MCP, or paste the wish link into any chat. No install? Search from any chat →
Related skills
design-md lets you create and validate DESIGN.md files—Google's open spec for encoding design systems as machine-readable tokens plus human-readable rationale. The included CLI lints structure, checks WCAG color contrast, diffs versions for regressions, and exports to Tailwind or W3C DTCG JSON formats.
design-md helps you create and maintain formal design token specifications using Google's open DESIGN.md format. Write machine-readable tokens in YAML paired with human-readable guidance, then lint for WCAG contrast compliance, diff versions for regressions, and export to Tailwind or W3C DTCG JSON formats.
Design System converts visual references into two synchronized outputs: a YAML token spec in Google's design.md format for coding agents, and a self-contained HTML style guide for human review. Reads imagery, derives tokens for color, typography, spacing, and components, then generates both files as a single source of truth that never drifts.
Design Spec Extraction converts visual inputs—screenshots, mockups, and design exports—into structured JSON specifications following W3C Design Tokens standards. The skill uses a 7-pass serial architecture to extract layout, colors, typography, components, spacing, accessibility data, and state information, writing each phase to disk for validation and resumption.
Manage design tokens using the W3C Design Token Community Group specification with a three-tier hierarchy (global, alias, component) that enables theme switching without touching component definitions. Built-in support for OKLCH color spaces ensures perceptually uniform shade scales, while Style Dictionary integration transforms tokens into CSS variables, Tailwind themes, and platform-specific outputs. Includes guidance on contrast enforcement, dark mode implementation, versioning strategies, and design-to-code pipelines.
This skill bridges design and development by automating the Figma-to-code pipeline. It covers extracting design tokens from Figma Variables, mapping Auto Layout to CSS Flexbox/Grid, documenting component specifications, and validating production UI against Figma designs using visual regression.
More skills design-spec (MIT) · Product Design (unlicensed) · design-md-validator (MIT)