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, 50 components, WCAG 2.2 AA-AAA, 138 design systems, any-framework code, and 43 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.

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.

Skill and template for GTC design tokens model.

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

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.

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

Personal Next.js starter: App Router, TypeScript, StyleX, pnpm, ESLint/Prettier, SVGR

AI-Native Design System with code as the source of truth to unify AI-driven UI/UX design in production. Powered by DTCG tokens, Tailwind v4, shadcn/ui, Storybook, Playwright, Bun, and Turborepo.

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

Sample project showing usage of W3C Design Tokens in Style Dictionary

Component Description Format — a design-system-agnostic format describing UI components