Código abierto. Nuevas posibilidades.

Design Oracle analiza sitios web con Playwright para extraer su sistema de diseño (colores, tipografía, componentes) y exportarlo como config de Tailwind v4, React JSX, JSON o un reporte DESIGN.md.

Panda es un framework de CSS-in-JS universal y type-safe para sistemas de diseño. Extrae estilos en tiempo de compilación, genera CSS moderno con capas de cascada y variables, y es compatible con la mayoría de los frameworks de JS.

Dembrandt es una CLI de Node.js que renderiza sitios con Playwright, lee estilos DOM computados y convierte colores, tipografía, espaciado, bordes, sombras, animaciones y componentes en tokens de diseño W3C, con verificaciones de deriva en CI y soporte MCP.

oh-my-design es una CLI de código abierto que integra sistemas de diseño en agentes de codificación con IA. Con un comando instala 440+ referencias de diseño, 28 skills y 20 roles especializados para Claude Code, Codex, Cursor y OpenCode, generando un DESIGN.md portátil con filosofía, tokens y contratos de componentes.

Chromatic es una herramienta de compilación para gestionar sistemas de diseño multiplataforma a partir de archivos de design-tokens, compatible con expresiones, temas y salidas en Sass, CSS, iOS, Android y HTML.

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.

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.

design-md-hub es un repositorio open-source con 120 especificaciones DESIGN.md de marcas, extraídas de sitios en producción, para que agentes IA generen UI coherente.

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.

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.

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.

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.

Colección curada de archivos DESIGN.md extraídos de sitios web y marcas reales. Coloca un archivo DESIGN.md en la raíz de tu proyecto y deja que los agentes de codificación IA generen interfaces de usuario coherentes con la identidad visual, colores, tipografía y patrones de diseño de la marca.

Better Design es un servidor MCP de código abierto y un registro de shadcn/ui que proporciona a los agentes de IA sistemas de diseño, tokens CSS semánticos, principios de UI y reglas de revisión orientadas a WCAG.

brandmd es una CLI que extrae el sistema de diseño de un sitio web a un archivo DESIGN.md válido según @google/design.md, proporcionando contexto de marca a agentes como Claude Code y Cursor. Se ejecuta localmente sin API key.

GlassKit es una biblioteca de componentes CSS sin dependencias con una estética de glassmorphism inspirada en iOS 26 Liquid Glass: temas, tokens de diseño, clases de utilidad y una Constructable Stylesheet para Shadow DOM.

Una skill de Claude para inspeccionar y construir sistemas de diseño en Figma, con auditorías en modo solo lectura (WCAG, cumplimiento de tokens, estados interactivos, etc.) y un modo de construcción que crea componentes, añade slots y exporta tokens.css y reglas de IA para integración diseño-código.

Marigold es una implementación de React del Marigold Design System, basada en react-aria y Tailwind CSS. El monorepo incluye paquetes de componentes y temas, Storybook, documentación en Next.js y lanzamientos vía Changesets.