design-tokens

A collection of DESIGN.md files analysis by popular brand design systems. Drop one into your project and let coding agents generate a matching UI.

🐼 Universal, Type-Safe, CSS-in-JS Framework for Design Systems ⚡️

Shopify's Polaris Design System - React implementation (Deprecated)

Build consistent, themeable React apps based on constraint-based design principles

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+.

A build system for creating cross-platform styles.

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.

180 free CSS3, Figma, Sketch & PSD gradients — plus a JSON dataset for design tools, generators, and AI agents.

This is the official DTCG repository for the design tokens site and specification.

Turn reference UIs (images, screenshots, URLs) into quantified Design DNA JSON—tokens, qualitative style, visual effects—then generate matching UI from your content.

Theo is a an abstraction for transforming and formatting Design Tokens

Official repository of the plugin 'Tokens Studio for Figma' (Figma Tokens)

A list of resources on all things to do with Design Tokens

The Design Token Framework — Adopt a unified design language across platforms, codebases, and teams

🎨 Figma plugin to export design tokens to json in an amazon style dictionary compatible format.

Make posters, social posts, slides and landing pages in the coding agent or chat you already use (Copilot, Claude, Codex, Cursor), with 198 design systems, checks and PDF/PNG/PowerPoint export.

Open-source design-method engine for Claude Code, Codex & Cursor. One agent skill with 22 internal workflows for fixed design judgment, multiple grammars, semantic palettes, reference compilation, and evidence-verified UI. MIT.

📒 A curated list of bookmarks, resources and articles about design systems focused on developers.

Figmagic is the missing piece between DevOps and design: Generate design tokens, export graphics, and extract design token-driven React components from your Figma documents.