Design Token Kit: Give Your LLM a Design Language, Not a Screenshot
Website: https://design-token-kit.github.io/
Stop teaching AI to guess pixels. Teach it to think in design tokens. Validate, convert, and showcase design tokens for consistent, AI-native design systems.
- Overview
- Why Tokens First
- Features
- Build
- Publish
- Packages
- Package Documentation
- Supported Formats
Overview
The project provides tools for working with design tokens.
Design tokens use a format where design rules are stored in a machine-readable way. These rules can later be converted to CSS and other UI formats.
The project implements the design token format defined by the Design Tokens Community Group (DTCG). See the specification at https://www.designtokens.org.
Supported input formats:
- DTCG JSON
- HRDT YAML
- DESIGN.md
DTCG JSON is the standard format defined by the Design Tokens Community Group.
HRDT stands for Human-Readable Design Tokens. It is a compact YAML-based token format designed to be easier for humans to read and write than raw DTCG JSON.
DESIGN.md is a markdown-based format with YAML frontmatter, designed for human-centric design system documentation. Supported for reading and conversion to DTCG JSON. DTCG token trees can be converted to DESIGN.md via --outform design-md.
HRDT YAML files are automatically converted to DTCG JSON and then passed to the standard command pipeline: checking, CSS conversion, showcase generation, and statistics reporting.
Node.js 18 or newer is required.
Why Tokens First
We ran a small blind experiment with several independent agents on the same UI task: build a product card. One group generated HTML/CSS directly. The other had one extra requirement: define the design in DTCG tokens first, using three layers: primitive, semantic, and component.