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.
Código abierto. Nuevas posibilidades.
Descubre proyectos de código abierto de calidad, envía proyectos de forma anónima y reclama y edita tu propio proyecto.
Un poco de curiosidad. Un mundo de código abierto.
THE FIRST COLLECTIONSaas UI es un sistema de diseño y registro de componentes para productos SaaS basados en Chakra UI. Ofrece un preset de Chakra, componentes editables vía CLI, hooks, formularios, paquetes de autenticación y modales, además de documentación y Storybook.
Primer CSS es la implementación de CSS del Primer Design System de GitHub, distribuido como el paquete npm @primer/css. Proporciona archivos fuente Sass/SCSS con clases de utilidad y estilos de componentes. El proyecto está ahora en modo de mantenimiento (KTLO).
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.
Un servidor MCP que proporciona conocimientos expertos en diseño y marketing para agentes de IA, abarcando UI/UX, SEO, GEO y pautas específicas para web, iOS, Android y macOS.
Franken UI (franken-ui/ui) es una biblioteca de componentes de UI orientada a HTML basada en UIkit 3, extendida con LitElement e inspirada en shadcn/ui. Su README ahora solo anuncia la migración a 0build.
Braid es el sistema de diseño tematizable de SEEK Group, distribuido como una biblioteca de componentes de React. Proporciona temas, BraidProvider y componentes estilizados con Vanilla Extract.
El Sistema de Diseño de Priceline es la biblioteca de componentes UI de código abierto y estándar de diseño de Priceline.com. Busca unificar patrones de interfaz, acelerar diseño y desarrollo, y promover accesibilidad, internacionalización y diseño web responsive.
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.
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.
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.
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.