dtcg

Extract any website's complete design system with one command. DTCG tokens, semantic+primitive+composite, MCP server for Claude Code/Cursor/Windsurf, multi-platform emitters (iOS SwiftUI, Android Compose, Flutter, WordPress), Tailwind v4, Figma variables, shadcn/ui, CSS health audit, WCAG remediation, Chrome extension. MIT, Playwright, Node 20+.

Extract any website’s design system into tokens in seconds: logo, colors, typography, borders & more. One command.

Turn Claude into a senior design architect: DTCG tokens, 52 components, WCAG 2.2 AA-AAA, 138 design systems, any-framework code, and 50 objective gates that fail the build instead of faking success.

Use DTCG tokens JSON to generate code for web, mobile, native apps, and more

Claude skill that analyzes images, websites, and Figma files and generates a structured design.md with token system, component inventory, and reconstruction notes.

Universal Design Tokens (UDT) is a collection of libraries and utilities for working with DTCG design tokens files.

A free, open-source add-on for Claude, ChatGPT, Codex and Cursor that turns a few plain answers into a design system, so everything you build looks like it belongs together.

The most powerful Figma Console MCP capabilities, repackaged as Markdown skills for the native Figma MCP server — design tokens, variables, component analysis, WCAG lint, a11y audits, version history, FigJam & Slides.

Component contracts: one machine-readable source of truth that generates both a React library and a Figma library, proves they match with a three-way differ, extracts contracts back out of existing code or designs, and runs the whole loop in a browser playground. Candidate spec for design-system contracts.

A Typescript implementation of the Design Tokens Format Module specification

Mint audits your legacy CSS and generates a clean, exportable design system from the chaos.

Playground repo for designers learning AI design system workflows: a small, real design system on Base UI and React, in Storybook and mirrored to Figma.

Claude plugin for auditing live web apps: capture screenshots, generate demo videos, document components, extract design tokens, map shadcn/ui, and find UI inconsistencies. Built by Legion Code Inc.

Skill and template for GTC design tokens model.

Check, lint, and convert design tokens to CSS. DTCG JSON, HRDT YAML, and DESIGN.md support.

Build a Tailwind CSS theme (v3 and v4) from design tokens — DTCG or Style Dictionary format — with light, dark and any other themes

See how design tokens relate: DTCG 2025.10 tokens drawn as pills, joined by lines to the tokens they reference

Web-based validator for W3C DTCG design tokens (2025.10 spec)

Open source packages of Quantum, the Thales Design System, starting with design tokens defined via the Design Tokens Format (DTCG) specification

Bootstrap 6's design system as portable design tokens, and a visual theme builder that writes them.