design-tokens

Uma coleção de análises de arquivos DESIGN.md por sistemas de design de marcas populares. Coloque um no seu projeto e deixe que agentes de programação gerem uma interface correspondente.

🐼 Framework CSS-in-JS universal e com segurança de tipos para sistemas de design ⚡️

Construa aplicativos React consistentes e customizáveis baseados em princípios de design orientados a restrições

Um sistema de build para criar estilos multiplataforma.

Extraia o sistema de design completo de qualquer site com um comando. Tokens DTCG, semânticos+primitivos+compostos, servidor MCP para Claude Code/Cursor/Windsurf, emissores multiplataforma (iOS SwiftUI, Android Compose, Flutter, WordPress), Tailwind v4, variáveis Figma, shadcn/ui, auditoria de saúde CSS, remediação WCAG, extensão Chrome. MIT, Playwright, Node 20+.

Extraia o sistema de design de qualquer site em tokens em segundos: logotipo, cores, tipografia, bordas e mais. Um comando.

180 gradientes gratuitos em CSS3, Figma, Sketch e PSD — além de um conjunto de dados JSON para ferramentas de design, geradores e agentes de IA.

Este é o repositório oficial do DTCG para o site e especificação de tokens de design.

Transforme IUs de referência (imagens, capturas de tela, URLs) em Design DNA JSON quantificado — tokens, estilo qualitativo, efeitos visuais — e gere IUs correspondentes a partir do seu conteúdo.

Repositório oficial do plugin 'Tokens Studio for Figma' (Figma Tokens).

Uma lista de recursos sobre tudo relacionado a Design Tokens

🎨 Plugin do Figma para exportar tokens de design para JSON em um formato compatível com o Amazon Style Dictionary

Motor de método de design de código aberto para Claude Code, Codex e Cursor. 23 habilidades de agente para julgamento de design fixo, gramáticas múltiplas, paletas semânticas, compilação de referência e UI verificada por evidências. MIT.

Transforme o Claude em um Arquiteto Sênior de Design — tokens de design DTCG, 42 componentes, acessibilidade WCAG 2.2, código para qualquer framework, 138 sistemas de design e habilidades executáveis.

📒 Uma lista selecionada de favoritos, recursos e artigos sobre design systems focados em desenvolvedores.

O Figmagic é a peça que faltava entre DevOps e design: gere tokens de design, exporte gráficos e extraia componentes React orientados por tokens de design a partir dos seus documentos do Figma.

Um conjunto de componentes React para o projeto PatternFly.

🖌️ Deixe seu <script> mais leve e seu <style> mais inteligente

Exibir documentação de design tokens gerada a partir de suas folhas de estilo e arquivos de ícones. Visualize alterações de design tokens no navegador. Adicione seus design tokens às suas páginas do Storybook Docs usando os Doc Blocks personalizados.

Compile seu design system em um Agent Plugin. Extraia uma identidade de qualquer referência, emita SKILL.md + tokens.css e faça lint do que ignorar seus tokens.

Ambiente de desenvolvimento visual para CSS

Uma especificação para definir objetos de tema e design tokens para uso com componentes de UI

Design system pronto para uso para Unity 6 UI Toolkit (UIDocument + PanelRenderer, UXML + USS): tokens, suporte a material de shader fx, 42 componentes, 120 ícones, responsivo para dispositivos móveis, tema escuro. Uma folha de estilo, zero dependências. Valido em combate em um jogo cross-play comercial.

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.

Helios Design System