Topics / #design-tokens

Design-tokens projects on GitHub

Shared design values like colors and spacing encoded as reusable tokens.

As of , the most-starred Design-tokens projects on GitHub are awesome-design-md (122.1K stars), yeti (29.8K stars) and components (25K stars). GitHub.Locker tracks 13 Design-tokens repositories with 211.6K stars combined. The fastest-growing on October 17 was awesome-design-md, with +163 stars in a day.

13Projects
211.6KStars in total
+345Stars in a day
Browse in the catalog →github.com/topics/design-tokens ↗

Hot right now

Most stars gained in a day · Oct 17

+163

awesome-design-md

VoltAgent/awesome-design-md · ★ 122.1K

This is a curated collection of DESIGN.md files — plain-text design system documents analyzed from real websites like Claude, Stripe, Nike and Tesla — that you drop into a project so an AI coding agent generates UI matching that brand's visual language.

+96

open-claude-ui

Caho1/open-claude-ui · ★ 1.2K

A high-fidelity open-source React UI component library and motion engine that reverse-engineers and recreates Anthropic's official Claude desktop app design system (CDS), down to the exact spring physics, surface colors, and audio pipeline.

+29

open-pencil

open-pencil/open-pencil · ★ 9.1K

OpenPencil is an open-source AI-native design editor and Figma alternative. It opens .fig and .pen files, has built-in AI, and doubles as a programmable toolkit with a headless Vue SDK for building custom editors.

+23

ux-ui-agent-skills

plugin87/ux-ui-agent-skills · ★ 2.3K

A Claude Code skill/plugin pack that turns Claude into a senior UX/UI design architect — generating DTCG design tokens, 52 components, and WCAG 2.2 AA/AAA accessible code for any framework, then checking the output against 50+ automated quality gates instead of trusting the model's self-report.

The all-time top

13 projects · by stars

  1. #1 · VoltAgent/awesome-design-md

    awesome-design-md

    This is a curated collection of DESIGN.md files — plain-text design system documents analyzed from real websites like Claude, Stripe, Nike and Tesla — that you drop into a project so an AI coding agent generates UI matching that brand's visual language.

    122.1K
  2. #2 · foundation/yeti

    yeti

    Yeti is a CSS-first, native, zero-build layout and styling framework for web designers, made by Foundation. It is the successor to Foundation for Sites - version 6 continues on the v6 branch with bug fixes and keeps shipping to npm as foundation-sites 6.x.

    29.8K
  3. #3 · angular/components

    components

    This is the official Angular team repository for component infrastructure and Material Design UI components for Angular apps, covering npm packages like @angular/material, @angular/cdk, and @angular/aria.

    25K
  1. 4

    semi-design

    10.4KDouyinFE/semi-design · TypeScript

    Semi Design is a comprehensive design system and React UI library: 80+ production-quality components kept stable since 2019, plus tooling that connects design and code — a Figma Design-to-Code plugin and a DSM platform for custom design tokens.

  2. 5

    open-pencil

    9.1Kopen-pencil/open-pencil · TypeScript

    OpenPencil is an open-source AI-native design editor and Figma alternative. It opens .fig and .pen files, has built-in AI, and doubles as a programmable toolkit with a headless Vue SDK for building custom editors.

  3. 6

    design-extract

    4.3KManavarya09/design-extract · HTML

    Designlang (the 'design-extract' CLI) points a headless browser at any live URL and reads the site's complete design system off the DOM in one command, emitting 17+ files including DTCG tokens, Tailwind config, shadcn theme, Figma variables, motion tokens, component anatomy, and brand voice.

  4. 7

    awesome-claude-design

    4.1KVoltAgent/awesome-claude-design

    A curated collection of 68 ready-to-use DESIGN.md files - one-page briefs describing a brand's visual language - that you drop into Claude Design to scaffold a full UI design system (colors, type, components, preview cards, working UI kit) in one shot.

  5. 8

    ux-ui-agent-skills

    2.3Kplugin87/ux-ui-agent-skills · JavaScript

    A Claude Code skill/plugin pack that turns Claude into a senior UX/UI design architect — generating DTCG design tokens, 52 components, and WCAG 2.2 AA/AAA accessible code for any framework, then checking the output against 50+ automated quality gates instead of trusting the model's self-report.

  6. 9

    sales-crm

    1.7Kkargulstudio/sales-crm · TypeScript

    Kargul Starter is a boilerplate for building web projects with Next.js 16, React 19, and Tailwind CSS 4, shipped with a strict set of build conventions.

  7. 10

    open-claude-ui

    1.2KCaho1/open-claude-ui · TypeScript

    A high-fidelity open-source React UI component library and motion engine that reverse-engineers and recreates Anthropic's official Claude desktop app design system (CDS), down to the exact spring physics, surface colors, and audio pipeline.

  8. 11

    arc-library

    804kuratlielia/arc-library · TypeScript

    A free, open source library of 100 React components and 22 blocks with calm, physical motion. Items install as plain source code via the shadcn CLI or copy-paste, and every one has a live preview at uiarc.dev.

  9. 12

    boardui

    632BoardUI/boardui · TypeScript

    BoardUI is a React design system for agentic interfaces: UI pieces an AI product needs (chat, thinking indicators, agent logs) plus the usual dashboard pieces (tables, cards, forms), delivered as source files you copy into your own project.

  10. 13

    Core-Framework

    190CoreBunch/Core-Framework · TypeScript

    Core Framework is a visual CSS framework and design-token builder you use across the web, WordPress, and Figma to build a design system once and export portable, production-ready CSS.

Often tagged together