Panda é um framework CSS-in-JS universal e type-safe para sistemas de design. Ele extrai estilos no build, gera CSS moderno com camadas de cascata e variáveis, suporta recipes e variants, e funciona com a maioria dos frameworks JS.
Código aberto. Novas possibilidades.
Descubra projetos open source de qualidade, envie projetos anonimamente e reivindique e edite seu próprio projeto.
Um pouco de curiosidade. Um mundo de código aberto.
THE FIRST COLLECTIONDembrandt é uma CLI Node.js que renderiza sites com Playwright, lê estilos DOM computados e converte cores, tipografia, espaçamento, bordas, sombras, movimento e componentes em tokens de design W3C, com gates de drift em CI e suporte MCP.
oh-my-design instala referências de sistema de design e habilidades em agentes de codificação de IA. Um comando adiciona 440+ referências de design de empresa, 28 habilidades e 20 papéis especializados ao Claude Code, Codex, Cursor e OpenCode. Produz um DESIGN.md portátil com filosofia, tokens e contratos de componente.
Chromatic é uma ferramenta de build para gerenciar sistemas de design multiplataforma a partir de arquivos de design-tokens, suportando expressões, temas e saídas em Sass, CSS, iOS, Android e HTML.
Um sistema de design leve, modular e customizável construído com vanilla CSS, utilizando variáveis CSS, princípios responsivos mobile-first e práticas de acessibilidade.
DesignMD é uma CLI que extrai sistemas de design ao vivo de qualquer URL — cores, tipografia, espaçamento, breakpoints e estados de interação — e gera um arquivo DESIGN.md portável otimizado para agentes de codificação por IA.
design-md-hub é um repositório open-source com 120 sistemas de design de marcas, cada um em um arquivo DESIGN.md extraído de sites reais, permitindo que agentes de IA gerem UI fiel à identidade visual.
Codex é o sistema de design da Wikimedia, oferecendo componentes Vue 3 e CSS, tokens de design, ícones e um site de documentação VitePress. Suporta internacionalização e cumpre os padrões de acessibilidade WCAG 2.1 AA.
designlang é um CLI baseado em Playwright que extrai sistemas de design de URLs ao vivo, gerando tokens DTCG, config Tailwind, variáveis Figma, temas shadcn, anatomia de componentes, motion tokens, auditorias WCAG e emissores multi-plataforma.
Uma coleção selecionada de marcadores, recursos, artigos e ferramentas em inglês sobre design systems para desenvolvedores, abrangendo ferramentas de design, design tokens, bibliotecas de padrões, testes de componentes, livros e palestras.
Tinte compila um design system em um Agent Plugin: extrai a identidade de uma referência, gera SKILL.md e tokens.css, e valida cores. A mesma config gera presets shadcn, temas de editor e esquemas de terminal.
Coleção curada de arquivos DESIGN.md extraídos de sites reais e marcas. Adicione um DESIGN.md ao seu projeto e permita que agentes de codificação IA gerem interfaces alinhadas à identidade visual, cores, tipografia e padrões de layout da marca.
Better Design é um servidor MCP de código aberto e registro shadcn/ui que fornece a agentes de codificação IA sistemas de design, tokens CSS semânticos, princípios de UI e regras de revisão WCAG.
brandmd é uma CLI que extrai o sistema de design de um site para um DESIGN.md válido, passando no linter oficial @google/design.md, fornecendo contexto de marca para Claude Code, Cursor e outros agentes.
GlassKit é uma biblioteca de componentes CSS sem dependências com visual glassmorphism inspirado no iOS 26 Liquid Glass: temas, tokens de design, classes utilitárias e Constructable Stylesheet para Shadow DOM.
Uma skill Claude para inspecionar e construir sistemas de design no Figma, oferecendo auditorias em modo só leitura (WCAG, conformidade de tokens, estados interativos etc.) e um modo build que cria componentes, adiciona slots e exporte tokens.css e regras de IA para integração design-código.
Marigold é uma implementação em React do Marigold Design System, construída com react-aria e Tailwind CSS. O monorepo inclui pacotes de componentes e temas, Storybook, documentação em Next.js, testes Vitest e releases via Changesets.
Design Oracle analisa websites com Playwright para extrair sistemas de design — cores, tipografia, espaçamento e componentes — exportando configurações Tailwind v4, React JSX, tokens JSON ou relatórios DESIGN.md.