#Design-tokens
Showing 26 of 26 repositories tagged #design-tokens, ranked by stars
Shopify's Polaris Design System - React implementation (Deprecated)
🐼 Universal, Type-Safe, CSS-in-JS Framework for Design Systems ⚡️
Build consistent, themeable React apps based on constraint-based design principles
Extract any website’s design system into tokens in seconds: logo, colors, typography, borders & more. One command.
📒 A curated list of bookmarks, resources and articles about design systems focused on developers.
A set of React components for the PatternFly project.
🖌️ Make your <script> lighter and your <style> smarter
Display design token documentation generated from your stylesheets and icon files. Preview design token changes in the browser. Add your design tokens to your Storybook Docs pages using the custom Doc Blocks.
Design engine for Claude Code, Codex & Cursor — teaches design judgment, not just data. 74 rules, 48 components, 7 brand skins (Toss/Stripe/Linear/Notion/Raycast/Arc/Vercel), a named motion system (5 seeds + 20+ moves), 15 /ss-* skills. Stop shipping AI UI that looks generated. MIT.
Visual development environment for CSS
👩🎨 Access your design tokens with ease
Turn Claude into a Senior Design Architect — DTCG design tokens, 42 components, WCAG 2.2 accessibility, any-framework code, 138 design systems, and runnable skills.
Give your AI coding agent a design system. One command installs 300+ hand-verified company DESIGN.md references + skills into Claude Code, Codex, Cursor, and OpenCode. Free, MIT, zero AI calls.
Material Design DSP
Design data, including design tokens, component schemas, and tooling for Spectrum, Adobe's design system.
Extract and reproduce design systems from any website using deterministic analysis and LLM interpretation.
Extract design tokens (colors, typography, spacing, border radius, shadows) from any public website. Generates JSON and CSS custom properties for local projects. Available as an AI agent skill (Claude, Cursor, Codex) and standalone CLI.
Design tokens in, CSS and components out.
200 production-grade DESIGN.md design systems for the world's best apps. Framework-neutral plus SwiftUI, Jetpack Compose, and Expo. Hand one to your AI agent, ship pixel-matched UI.
Command line tool for exporting resources and generating code from your Figma files
Extract full product DNA from any live URL. Brand voice, UX patterns, content strategy, visual design, accessibility, SEO, performance, tech stack detection, CRO audit, design system maturity, PLG detection, enterprise readiness. 64 extraction passes. 20 intelligence engines. 138 tests.
Build consistent, themeable React Native apps based on constraint-based design principles
Production-grade design context for AI coding workflows. Extract a real design system from any URL — colors, typography, spacing, breakpoints — as a portable DESIGN.md.
Generate DESIGN.md, Tailwind themes, tokens, and prompts from any website.
Design system and UI toolkit for building complex frontend applications, wallets, explorers, and developer tools.
Generate Google Stitch compatible DESIGN.md files from any website using AI vision. Bring your own Gemini, OpenAI, Claude, or Ollama key. No backend, no cost.