Workbeat Design System
Workbeat Design System
Catálogo, documentación API, ejemplos y changelog del WDS para producto, desarrollo y agentes de IA.
La base compartida para construir experiencias Workbeat consistentes y accesibles en todos sus módulos.
El sistema compartido de componentes, patrones y reglas que se integra en los distintos proyectos y módulos de la plataforma Workbeat. Todo lo que ves aquí se renderiza con el código real de src/design-system.
94
Componentes
Primitivos, layout y shell
43
Patrones
Superficies completas
228
Ejemplos en vivo
8 escenarios reales
20
Guías
Reglas y playbooks
2
Themes
Base + presentaciones disponibles
Tokens semánticos
Color, tipografía, radios y sombras salen de tokens. Así los módulos de Workbeat comparten una base visual y pueden ajustar su presentación sin cambiar componentes.
Themes y modo oscuro
Los themes permiten adaptar la presentación entre productos Workbeat o a preferencias de clientes, conservando los mismos componentes y reglas.
Accesible por defecto
Primitivas sobre Radix con foco visible, roles y etiquetas obligatorias donde hacen falta (IconBtn, formularios, diálogos).
Listo para agentes de IA
Skills wds-*, plantillas de prompt y documentación en texto para que un agente construya pantallas con las mismas reglas.
Explora por categoría
Cada componente tiene ejemplos en vivo, API generada desde los tipos y, cuando aplica, guía y skill para agentes.
Formularios e inputs
17 componentes
Entradas de datos, controles de selección y composición de formularios.
Navegación
8 componentes
Breadcrumbs, tabs, paginación, menús y rails de navegación.
Overlays y acciones
11 componentes
Diálogos, drawers, popovers, menús contextuales, comandos y notificaciones.
Datos y superficies
16 componentes
Tarjetas, tablas, listas operativas y componentes de seguimiento.
Feedback y estado
12 componentes
Badges, alertas, callouts, progreso, carga y avatares.
Archivos y comentarios
9 componentes
Carga de archivos, adjuntos, comentarios e imágenes.
Analítica y tiempo
6 componentes
Charts, calendarios, heatmaps, carruseles y mapas.
Utilidades de layout
5 componentes
Acordeones, colapsables, scroll, paneles redimensionables y separadores.
Shell de aplicación
8 componentes
Estructura raíz de un producto Workbeat: sidebar, headers, mega menú y SideCanvas.
Iconos
2 componentes
Iconografía oficial del DS.
Claro y oscuro, misma pieza
Los componentes sólo consumen tokens semánticos: el modo oscuro y las distintas presentaciones se resuelven sin crear variantes por módulo.
Producto y diseño
Recorre escenarios reales, compara patrones y valida cómo se ve cada flujo en los themes y en modo oscuro.
Desarrollo
Integra el DS local, consulta props y tipos generados desde el código y copia ejemplos listos para usar.
Agentes de IA
Sigue las skills wds-* del repo, el playbook y las plantillas de prompt del DS.
Las paletas fijas se separan de los roles configurables del theme y la escala categórica crece de siete a diez colores. Los componentes afectados usan tokens semánticos y los ejes de IndexBar reciben su tamaño tipográfico desde el token correspondiente.
El WDS incorpora colores categóricos y foregrounds para series de gráficas, lectura de tokens para canvas y tamaños tipográficos en ejes. Las iniciales de Avatar escalan con su tamaño; las superficies y portales usan la escala de capas compartida, conservando la profundidad histórica de SideCanvas.
El portal adopta workbeatia2.1@a665905 (anterior: bb72dd2): 5 archivos nuevos y 36 modificados del WDS, con skills y guardas de agentes sincronizadas.
Árbol jerárquico + ficha con tabs que preserva contexto al cambiar de nodo, con maestro-detalle en desktop y móvil.
Consulta de expediente con resumen, datos clave y bloques relacionados que preserva contexto sin reubicar al usuario.
Productos por departamento con expandir/colapsar, columna sticky, moneda MXN y agregados que se recalculan al filtrar.