Discover quality open-source projects, submit projects anonymously, and claim and edit your own project.
A little curiosity. A world of open source.
THE FIRST COLLECTIONChromatic 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.
A collection of 120 plain-text DESIGN.md brand design specifications reverse engineered from live production sites, letting AI coding agents generate on-brand UI. Each brand includes real colors, typography, components and guardrails plus a self-contained preview.html.
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.
Curated collection of DESIGN.md files extracted from real websites and brands. Drop a DESIGN.md into your project and let AI coding agents generate UI consistent with that brand's visual identity, colors, typography, and layout patterns.
Better Design is an open-source MCP server and shadcn/ui registry that supplies AI coding agents with design systems, semantic CSS tokens, component overrides, UI principles, icon matching, and WCAG-oriented review rules. It includes 31 themes and connects to Claude Code, Cursor, VS Code/GitHub Copilot, Claude Desktop, and other MCP clients.
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.
oh-my-design installs design system references and skills into AI coding agents. One command adds 440+ company design references, 28 skills, and 20 specialist roles to Claude Code, Codex, Cursor, and OpenCode. Produces a portable DESIGN.md with philosophy, tokens, and component contracts.
