Índice de enlaces externos a sistemas de diseño
Índice de navegación de enlaces externos a sistemas de diseño públicos de empresas / comunidades, para consultar tokens de diseño, componentes y estándares de sistemas de diseño existentes.
⚠️ Este skill es una capa de indexación de recursos: solo incluye enlaces y una breve descripción, sin profundizar en metodologías. La arquitectura de tokens, la nomenclatura jerárquica y la metodología de implementación multiplataforma se encuentran en el skill local
design-system; ambos skills tienen roles complementarios y no se repiten aquí.
Cómo usar (revelación progresiva)
Este SKILL.md es una capa de índice de enrutamiento: cada una de las 5 categorías enumera 2-3 elementos clásicos con una indicación de qué es / cuándo leerlo. Si necesitas una lista más extensa, lee el archivo de referencia correspondiente: references/<categoría>.md (solo un nivel de profundidad, sin anidar más).
Primero, identifica la categoría según la tabla de abajo y luego lee la referencia correspondiente según sea necesario, evitando cargar todo de una vez.
Fuente de datos: klaufel/awesome-design-systems + jbranchaud/awesome-react-design-systems.
Ejemplos de activación: Consulta los sistemas de diseño de las principales empresas / Encuentra una librería de componentes React / Herramientas y estándares de design tokens / Elige una herramienta de pattern library.
Consulta rápida por categoría (primero localiza, luego profundiza)
Si no tienes claro qué categoría elegir, consulta esta tabla primero y luego lee el archivo correspondiente para evitar leer las 5 categorías completas:
| Tu necesidad | Ve a leer |
|---|---|
| Consultar un sistema de diseño maduro de una gran empresa | references/major-company-systems.md |
| Elegir una cadena de herramientas de design tokens / alinearte con el estándar W3C | references/design-tokens.md |
| Montar un entorno de desarrollo de componentes, sitio de documentación o pattern library | references/pattern-libraries.md |
| Elegir una librería de componentes adoptable para un proyecto React Web | references/react-ds-libraries.md |
| Elegir un kit de UI para un proyecto React Native | references/react-native-ds-libraries.md |
Límite: si tu objetivo es «cómo diseñar la arquitectura de tokens», esto no está en este índice; ve al skill local
design-system. Si es «cómo escribir componentes en React», ve areact-best-practices. Este índice solo responde «qué sistemas de diseño / librerías existen que pueda consultar o adoptar».
Ejemplo de ruta (cómo funciona la revelación progresiva)
Usuario: «Ayúdame a elegir una librería de componentes React para un panel de administración empresarial»
- Localiza la categoría → Esto pertenece a «Librerías de sistemas de diseño React», no a tokens ni pattern libraries.
- Primero lee los seleccionados de esa categoría (Ant Design / MUI / Blueprint); en la mayoría de los casos es suficiente.
- Si necesitas más opciones → lee
references/react-ds-libraries.md; si aún no es suficiente → salta al directorio original de awesome.- Una vez seleccionado, los detalles de implementación corresponden a
react-best-practices/frontend-design, no se tratan en este índice.
Sistemas de diseño de las principales empresas
Qué es: Sistemas de diseño completos y públicos de las grandes empresas (tokens + componentes + estándares + documentación). Cuándo leerlo: Cuando quieras consultar el sistema de diseño de una empresa en particular, seleccionar un sistema maduro como referencia, o realizar una investigación competitiva de lenguajes de diseño.
Seleccionados (los más clásicos):
- Google Material Design - Sistema de diseño de Google para productos intuitivos y hermosos.
- Microsoft Fluent UI - Sistema de diseño multiplataforma de código abierto de Microsoft (web/Apple/Android).
- IBM Carbon - Sistema de diseño de código abierto de IBM para productos y experiencias.
→ Lista completa en references/major-company-systems.md (Polaris, Atlassian, Lightning, Primer, Pajamas, Photon, Atlaskit + recursos genéricos de DS).
Recursos de tokens de diseño
Qué es: Herramientas para la especificación, generación, transformación y sincronización multiplataforma de design tokens. Cuándo leerlo: Cuando necesites elegir una cadena de herramientas de tokens, alinearte con el estándar W3C, extraer tokens desde Figma o distribuir tokens entre múltiples plataformas.
Seleccionados:
- Design Tokens W3C Community Group - Grupo comunitario del W3C que define una especificación de formato para design tokens.
- Style Dictionary - Sistema de compilación de Amazon para definir estilos una vez y usarlos en cualquier plataforma.
- Theo - Abstracción de Salesforce para transformar y formatear design tokens.
→ Lista completa en references/design-tokens.md (DesignTokens.dev, Diez, Figmagic, Superposition, Validator, Awesome Design Tokens, Abstract Connect, exportación de Zeplin, etc.).
Recursos de pattern library
Qué es: Herramientas de entorno de desarrollo aislado de componentes y orquestación de bibliotecas de patrones (tipo Storybook). Cuándo leerlo: Cuando necesites montar un entorno de desarrollo de componentes, un sitio de documentación, un flujo de trabajo de diseño atómico o elegir una plataforma de colaboración de documentación.
Seleccionados:
- Storybook - Construye componentes de UI de forma aislada para React, Vue, Angular y más.
- Pattern Lab - Construye UIs impulsadas por patrones utilizando principios de diseño atómico.
- React Styleguidist - Entorno de desarrollo de componentes React aislado con una guía de estilo viva.
→ Lista completa en references/pattern-libraries.md (Styled System, Stencil, Zeroheight, Backlight, Storybook DS, lista de addons, etc.).
Librerías de sistemas de diseño para React
Qué es: Librerías de componentes React listas para usar / sistemas de diseño empresariales que se pueden adoptar directamente. Cuándo leerlo: Cuando necesites elegir una librería de componentes React para SaaS, paneles de administración o dashboards, o evaluar soluciones empresariales de sistemas de diseño.
Seleccionados:
- Ant Design - Ant Financial - sistema de diseño para aplicaciones empresariales (Naturaleza y Determinismo).
- Material UI - Componentes React que implementan Material Design de Google.
- Blueprint - Palantir - kit de UI basado en React para la web.
→ Lista completa en references/react-ds-libraries.md (Grommet, Garden, Backpack, Ring UI, Canvas, Atlaskit, cf-ui, Mineral UI, Spark, Swarm, Uniform, Lightning React y más de 20 más).
Librerías de sistemas de diseño para React Native
Qué es: Kits de UI listos para usar y multiplataforma para React Native. Cuándo leerlo: Cuando necesites elegir una librería de componentes madura para tu app de React Native y evitar construir la UI desde cero.
Seleccionados:
- React Native Elements - Kit de UI multiplataforma para React Native.
- React Native Paper - Componentes React Native que cumplen con Material Design.
- NativeBase - GeekyAnts - componentes UI multiplataforma esenciales para React Native y Vue Native.
→ Lista completa en references/react-native-ds-libraries.md (Shoutem UI, Teaset, etc.).
Directorio general de awesome
Para directorios generales más completos de awesome relacionados con diseño, consulta sindresorhus/awesome. Este skill se basa principalmente en los siguientes dos:
- klaufel/awesome-design-systems — Directorio principal de sistemas de diseño empresariales / tokens / pattern libraries.
- jbranchaud/awesome-react-design-systems — Directorio principal de librerías de sistemas de diseño para React / React Native.
Skills locales relacionados
Este índice solo se encarga de «qué sistemas de diseño existen que puedas consultar o adoptar»; la metodología y los detalles de implementación corresponden a los siguientes skills locales:
design-system— Arquitectura de tokens, nomenclatura jerárquica, metodología de implementación multiplataforma (backend metodológico de este índice).react-native-skills— Patrones de componentes y estilos para React Native.react-best-practices/frontend-design— Implementación de React y frontend, detalles de diseño.design-assets-index— Índice de recursos de diseño (iconos, tipografías, ilustraciones, etc.).