Open source. Open possibilities.

Codex is the design system for Wikimedia, offering Vue 3 and CSS components, design tokens, icons, and a VitePress documentation site. It supports internationalization and meets WCAG 2.1 AA accessibility standards.

designlang is a Playwright-based CLI that reads a website's live DOM and extracts its design system: DTCG tokens, Tailwind config, Figma variables, shadcn theme, component anatomy, motion tokens, brand voice, WCAG contrast audits, and multi-platform emitters, plus MCP server and Chrome extension.

A curated English-language collection of bookmarks, resources, articles, and tools about design systems for developers, covering design tools, design tokens, pattern libraries, component testing, books, and talks.

Tinte compiles a design system into an Agent Plugin: it extracts an identity from a reference, emits SKILL.md plus tokens.css, and lints colors that bypass the tokens. The same config also outputs shadcn presets, editor themes and terminal color schemes.

brandmd is a CLI that extracts a website's design system into a spec-valid DESIGN.md passing the official @google/design.md linter, giving Claude Code, Cursor and other coding agents brand context before they write UI. Runs locally with no API key by default.

GlassKit is a dependency-free CSS component library with a glassmorphism look inspired by iOS 26 Liquid Glass: themes, design tokens, utility classes and a Constructable Stylesheet for Shadow DOM.

A Claude skill for inspecting and building Figma design systems, providing read-only audits (WCAG, token compliance, interactive states, etc.) and a build mode that creates components, adds slots, and optionally exports tokens.css and AI rules for seamless design‑to‑code integration.

Marigold is a React implementation of the Marigold Design System, built on react-aria and Tailwind CSS. The monorepo ships component and theme packages, a Storybook workspace, a Next.js documentation site, Vitest tests and CI-driven releases via Changesets.

Design Oracle analyzes a website with Playwright and extracts its design system—colors, typography, spacing, components and UX patterns—then exports Tailwind v4 config, React JSX, JSON design tokens or a DESIGN.md report. It runs standalone or as an MCP server for AI agents.

Panda is a universal, type-safe CSS-in-JS framework for design systems. It extracts styles at build time, outputs modern CSS with cascade layers and variables, supports recipes and variants, and works with most JS frameworks.

Dembrandt is a Node.js CLI that renders a site with Playwright, reads computed DOM styles, and turns colors, typography, spacing, borders, shadows, motion and components into W3C design tokens, with CI drift gates and MCP support.

Chromatic is a build tool for managing cross-platform design systems from design-token files. It supports expressive token expressions, themes, YAML/JSON input, and generates Sass, CSS, iOS, Android, and HTML style-guide outputs.

A lightweight, modular and customizable design system built with vanilla CSS, using CSS variables, mobile-first responsive principles and accessibility practices. It includes examples, design tokens, build and lint scripts, format conversion, and a CDN-ready combined CSS file.

DesignMD is a CLI tool that extracts live design systems from any URL — colors, typography, spacing, breakpoints, and interaction states — and outputs a portable DESIGN.md file optimized for AI coding agents.