Código abierto. Nuevas posibilidades.

Un sistema de diseño ligero, modular y personalizable creado con vanilla CSS, que utiliza variables CSS, principios responsivos mobile-first y prácticas de accesibilidad.

El Sistema de Diseño de Helsinki (HDS) es un sistema de diseño de código abierto del Ayuntamiento de Helsinki, que ofrece componentes React accesibles, estilos CSS y design tokens, junto con documentación y recursos de diseño.

DesignMD es una herramienta CLI que extrae sistemas de diseño en vivo de cualquier URL — colores, tipografía, espaciado, breakpoints y estados de interacción — y genera un archivo DESIGN.md optimizado para agentes de codificación con IA.

CompoMo (@ds-mo/ui) es una biblioteca de componentes web de Stencil.js agnóstica al framework, estilizada con los tokens de diseño TokoMo, que incluye adaptadores generados para Angular, React y Vue junto con un servidor de metadatos MCP.

Tailgrids es una biblioteca de componentes UI de React de código abierto creada con Tailwind CSS, que ofrece más de 100 componentes listos para producción, bloques de UI y plantillas, con soporte para TypeScript y modo oscuro.

Chakra UI es un sistema de componentes de React de código abierto para crear aplicaciones web y productos SaaS accesibles rápidamente. Incluye paquetes instalables, soporta Next.js RSC y tiene licencia MIT.

Lightswind UI es una biblioteca de componentes React documentada en inglés y distribuida como código fuente vía CLI. Ofrece más de 160 componentes animados y accesibles, junto con un servidor MCP para herramientas de IA.

Codex es el sistema de diseño de Wikimedia, que ofrece componentes de Vue 3 y CSS, tokens de diseño, iconos y un sitio de documentación en VitePress. Soporta internacionalización y cumple los estándares de accesibilidad WCAG 2.1 AA.

El sistema de diseño Cloudscape, creado por AWS en 2016, ofrece componentes React accesibles y estilos globales listos para construir aplicaciones web a gran escala, con documentación en el sitio web de Cloudscape.

Skeleton es un sistema de diseño adaptativo basado en Tailwind CSS que ofrece componentes listos para usar para frameworks web populares, junto con documentación, un generador de temas y canales comunitarios.

Ark UI es una biblioteca de componentes headless y sin estilos del equipo de Chakra UI, que ofrece más de 45 primitivas de UI accesibles basadas en máquinas de estado Zag.js con la misma API para React, Solid, Vue y Svelte.

Carbon es el sistema de diseño de código abierto de IBM para productos y experiencias. Este monorepo proporciona librerías de React y web components, estilos Sass, tokens de diseño, iconos, pictogramas y herramientas.

@alifd/next es la biblioteca de componentes React configurable de Alibaba Fusion para sistemas de backend empresarial. Se integra con paquetes de temas de Fusion Design y admite instalaciones vía npm o navegador.

Flowbite es una biblioteca de componentes de UI de código abierto basada en Tailwind CSS que ofrece componentes interactivos impulsados por atributos de datos, con APIs de JS vanilla, tipos de TypeScript y soporte para React, Vue, Svelte y Angular.

HeroUI Native es una biblioteca de componentes de UI para React Native bajo licencia Apache-2.0, diseñada para ser hermosa, rápida y moderna, con documentación y aplicaciones de ejemplo y vista previa.

designlang es una CLI basada en Playwright que lee el DOM en vivo de un sitio web y extrae su sistema de diseño: tokens DTCG, configuración de Tailwind, variables de Figma, tema shadcn, anatomía de componentes, tokens de movimiento, voz de marca, auditorías WCAG y emisores multiplataforma, más servidor MCP y extensión de Chrome.

Arco Design Vue es una biblioteca integral de componentes UI para Vue 3 basada en el sistema Arco Design, que ofrece más de 60 componentes TypeScript listos para usar y tokens de tema personalizables.

Una colección seleccionada de marcadores, recursos, artículos y herramientas en inglés sobre sistemas de diseño para desarrolladores, que abarca herramientas de diseño, design tokens, librerías de patrones, pruebas de componentes, libros y charlas.

Una biblioteca de componentes Svelte que implementa el Carbon Design System de IBM, con más de 90 componentes accesibles y tipados, cinco temas integrados y paquetes complementarios de iconos, pictogramas y gráficos.

Tinte compila un sistema de diseño en un Agent Plugin: extrae una identidad de una referencia, emite SKILL.md y tokens.css, y analiza colores que omiten los tokens. También genera presets de shadcn y temas de editor.