Crea un tablero de entregas funcional con tokens de Vibe 4 y controles de React. Distingue los colores semánticos de acción de las etiquetas del tablero, explora los pasos de espaciado con nombre y las abreviaturas tipográficas, y conoce la configuración explícita de CSS que necesita una aplicación nueva.
Interpretación independiente de HTML/CSS basada en la paleta, el espaciado y las dimensiones tipográficas verificadas del tema claro de Vibe; fuente alternativa del sistema. · Referencia de implementación
02
Referencia de diseño del sistema de diseño Monday Vibe
Fuente pública de Vibe 4 e integración con @vibe/core. Los valores siguientes son las definiciones verificadas del tema claro y los estilos; los colores de las etiquetas del tablero son distintos de los roles semánticos de éxito/error. El ejemplo nativo usa controles Button reales de Vibe dentro de una tabla HTML gestionada por la aplicación.
Sistema de diseño Monday Vibe: desarrolla con los puntos de entrada actuales de Vibe
Los componentes principales y los CSS de tokens se importan por separado
Vibe 4 expone componentes React con nombre mediante @vibe/core y las variables CSS mediante @vibe/core/tokens. Importa ambos en una aplicación cliente nueva. Un componente puede inyectar sus propios estilos y, aun así, depender de las variables que proporciona el archivo de tokens. El ejemplo del tablero usa la estructura nativa de una tabla y controles Button reales de Vibe, con datos de filas y selección gestionados por la aplicación.
El paquete anterior monday-ui-react-core pertenece a Vibe 2. Vibe 3 se mantiene para corregir problemas críticos, no para añadir funciones. Esta guía usa la interfaz actual de Vibe 4 y las variables de espaciado numeradas. La integración no es un cliente del SDK de monday.com ni tiene conexión API con ninguna cuenta, espacio de trabajo o elemento.
Sistema de diseño Monday Vibe: los colores de las acciones y las etiquetas del tablero cumplen funciones distintas
Usa roles semánticos para los controles
Las acciones principales usan el rol principal y su color correspondiente al pasar el cursor. La selección usa el fondo de selección, mientras que para la lectura normal se usan los roles de texto principal y secundario. Usa los valores del tema como un conjunto integrado, en lugar de cambiar solo el fondo del body. Este estudio local se mantiene en el tema claro verificado.
La fuente incluye colores categóricos para el tablero, además de colores semánticos para comentarios. El verde de Hecho es #00c875, mientras que el color semántico positivo es #00854d. Las celdas de estado de nuestras filas usan los colores del tablero con texto de contraste legible, conservan las palabras En curso, Atascado y Hecho, y nunca dependen únicamente del color para describir el estado.
Sistema de diseño Monday Vibe: usa la declaración abreviada completa de fuente
Los títulos y las filas de trabajo tienen estilos propios
La fuente asigna Poppins a los títulos y Figtree al contenido del cuerpo, con alternativas compatibles con distintos sistemas de escritura. La declaración abreviada actual h1-medium es 600 32px/40px, mientras que text2-normal es 400 14px/20px. Aplica la declaración con la propiedad CSS font para mantener vinculados el peso, el tamaño, la altura de línea y la familia tipográfica. La fuente también contiene alias de encabezado anteriores; no los sustituyas silenciosamente por otros de escala diferente.
Vibe no importa automáticamente los archivos de fuentes recomendados. Añade el enlace a la hoja de estilos documentada de Figtree/Poppins a la aplicación HTML o aloja archivos con la licencia adecuada. El ejemplo sin conexión usa explícitamente fuentes alternativas del sistema, por lo que su representación es una interpretación y no pretende reproducir con exactitud la tipografía de monday.com.
Sistema de diseño Monday Vibe: un tablero compacto sin controles comprimidos
Los espacios numerados marcan el ritmo
Usa --space-8 entre acciones contiguas de la barra de herramientas, --space-16 para el relleno del panel y --space-24 entre las secciones del tablero. Todos son nombres exactos de la fuente actual. Estas ubicaciones son decisiones propias de esta aplicación. La escala también incluye un intervalo de dos píxeles para ajustes precisos y valores mayores, de hasta ochenta píxeles, para la composición.
Sistema de diseño Monday Vibe: una tabla editable con una barra de herramientas para acciones por lotes
Mantén explícita la estructura de los datos
Cada elemento de trabajo tiene un id estable, un título, una persona responsable y un estado. Los encabezados de columna nativos explican esos valores. La casilla de una fila añade el id a un Set; al cambiar el estado, se reemplaza el objeto correspondiente en lugar de modificar la matriz. La acción Completar selección lee ese mismo Set y actualiza solo las filas seleccionadas. El resumen de elementos completados se obtiene a partir de las filas.
El botón principal de acción por lotes está desactivado cuando el Set de selección está vacío.
La acción terciaria de cada fila cambia el estado local para la demostración.
La acción de restablecimiento recupera las filas iniciales y borra la selección.
Sistema de diseño Monday Vibe: expón el estado mediante el Button real API
Desactivado, en carga y presionado son estados distintos
El ejemplo nativo usa disabled para indicar que una acción por lotes no está disponible. No muestra los estados de carga ni de éxito porque no hay ninguna operación remota. Si conectas una capa de persistencia real, vincula loading al ciclo de vida de la solicitud y actualiza el estado de éxito solo después de recibir la confirmación. La fuente de Button también incluye active para la apariencia y aria-pressed para la semántica de alternancia; uno no sustituye al otro.
No presentes los cambios locales como si fueran una operación de servicio
El mensaje en pantalla indica cuántos elementos locales han cambiado. No afirma que se haya actualizado un tablero de monday.com. Al volver a cargar, aparecen de nuevo los datos de ejemplo iniciales. Una integración de producción necesitaría permisos explícitos del espacio de trabajo, gestión de errores y sincronización fuera de la capa del sistema de diseño.
Sistema de diseño Monday Vibe: conserva el significado de las filas en distintos anchos
Reorganiza la demostración con criterio
En una pantalla estrecha, el tablero sin conexión convierte cada fila en una tarjeta de elemento con etiquetas. Los nombres de columna se repiten como etiquetas visibles para que la persona responsable y el estado sigan siendo comprensibles. Esta es una decisión de diseño de la aplicación, no una afirmación de que Vibe transforme automáticamente todas las tablas. Como alternativa para datos más densos, el inicio nativo conserva una tabla semántica dentro de una región de desbordamiento horizontal con etiqueta.
El ajuste global del modelo de caja es un requisito previo
Aplica box-sizing: border-box a los elementos y pseudoelementos antes de usar la biblioteca. De lo contrario, una celda de ancho fijo con relleno puede superar el tamaño previsto, sobre todo si incluye un botón dentro de una columna densa. Mantén flexible el contenedor exterior y permite que las acciones de la barra de herramientas pasen a otra línea.
Sistema de diseño Monday Vibe: la selección y el estado necesitan nombres independientes
Etiqueta cada control de fila
Una casilla de selección incluye el título del elemento de trabajo en su nombre accesible. Cada acción de estado incluye tanto el nombre del elemento como el estado actual. Un mensaje de estado no intrusivo informa del resultado del lote. Las personas que usan el teclado pueden seleccionar filas, activar el comando por lotes y restablecer el tablero mediante controles nativos; la página no inventa un comportamiento de teclas de flecha propio de las hojas de cálculo.
Selecciona Transferencia de diseño y confirma que la acción por lotes quede disponible.
Completa la selección y comprueba que el texto del estado coincida con el recuento calculado.
Restablece el tablero y verifica que tanto los datos como la selección de casillas vuelvan a su estado inicial.
Sistema de diseño Monday Vibe: una entrada completa del lado del cliente
Instala, importa y monta
La configuración siguiente es una entrada main.jsx para un proyecto de cliente React que contiene un elemento raíz. Instala react, react-dom y @vibe/core@4, carga una sola vez los tokens CSS y aplica la hoja de estilos global indicada. El paquete actual usa exportaciones de módulos ES. La extracción de estilos del lado del servidor está documentada como experimental; este inicio usa deliberadamente la representación en el cliente.
Monday Vibe Ejemplos de componentes del sistema de diseño
Muestra interactiva independiente completa
Guarda el documento completo como index.html y ábrelo en un navegador. Interpretación independiente HTML/CSS que usa dimensiones verificadas de la paleta del tema claro, el espaciado y la tipografía de Vibe, con fuentes alternativas del sistema.
HTML
<!doctype html><html lang="en"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Weekly delivery — Vibe study</title><style>*{box-sizing:border-box}body{margin:0;background:#f6f7fb;color:#323338;font:14px/20px Arial,sans-serif}button,input{font:inherit}button{cursor:pointer;border:0;border-radius:4px;padding:8px 16px;background:white;color:#323338}button:hover{background:#e7e9ef}button:disabled{opacity:.45;cursor:not-allowed}button:focus-visible,input:focus-visible{outline:3px solid #0073ea;outline-offset:2px}.shell{display:grid;grid-template-columns:180px minmax(0,1fr);min-height:600px}aside{padding:24px 16px;border-right:1px solid #d0d4e4;background:#fff}.brand{font-size:20px;font-weight:bold;margin-bottom:40px}.brand span{color:#0073ea}aside p{font-size:12px;color:#676879}aside strong{display:block;background:#cce5ff;padding:12px;border-radius:4px;color:#323338}main{padding:32px;min-width:0}h1{font-size:32px;line-height:40px;font-weight:600;margin:0 0 8px}.sub{color:#676879}.overview{margin:24px 0;display:grid;grid-template-columns:1fr 2fr;gap:24px;align-items:center}.count{font-size:32px;line-height:40px}.count small{font-size:14px;color:#676879}.bar{display:flex;border-radius:8px;overflow:hidden;height:16px;background:#e7e9ef}.bar span{transition:width .15s}.legend{display:flex;gap:16px;font-size:12px;margin-top:8px}.legend span:before{content:'●';color:var(--c);margin-right:4px}.tools{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:24px}.primary{background:#0073ea;color:white}.primary:hover{background:#0060b9}h2{font-size:18px;line-height:24px;color:#784bd1;font-weight:600}.board{border-left:6px solid #784bd1;border-radius:8px;background:white;overflow:hidden}.row,.head{display:grid;grid-template-columns:36px minmax(180px,1fr) 90px 130px;align-items:center;min-height:52px;border-bottom:1px solid #d0d4e4}.head{color:#676879;min-height:36px;font-size:12px}.row>*{padding:12px}.head>*{padding:8px}.row label{display:flex;align-items:center;justify-content:center}.row input{accent-color:#0073ea}.row .status{border-radius:0;height:100%;font-weight:500}.status[data-status=Working]{background:#fdab3d}.status[data-status=Stuck]{background:#df2f4a;color:white}.status[data-status=Done]{background:#00c875}.person{display:inline-flex;align-items:center;gap:8px}.avatar{width:24px;height:24px;border-radius:50%;background:#eceff8;display:inline-grid;place-items:center;font-size:11px}.row.selected{background:#f0f7ff}#message{min-height:24px;margin-top:16px;color:#676879}.mobile-label{display:none}footer{padding:16px 24px;color:#676879;font-size:11px;border-top:1px solid #d0d4e4}@media(max-width:800px){.shell{grid-template-columns:1fr}aside{display:none}main{padding:24px}}@media(max-width:560px){main{padding:16px}.overview{grid-template-columns:1fr;gap:12px}.head{display:none}.row{grid-template-columns:36px 1fr}.row .person,.row .status{grid-column:2}.row .status{margin:0 12px 12px;width:calc(100% - 24px);border-radius:4px}.mobile-label{display:inline;color:#676879;margin-right:8px}.row{padding:8px 0}.legend{flex-wrap:wrap}}</style><div class="shell"><aside><div class="brand"><span>▰</span> workroom</div><p>TEAM WORKSPACE</p><strong>Weekly delivery</strong><p>Sample project<br>No external account</p></aside><main><h1>Weekly delivery</h1><div class="sub">A shared view of the work moving this week.</div><section class="overview" aria-label="Completion summary"><div class="count"><span id="done">1</span><small> / 3 completed</small></div><div><div class="bar" aria-hidden="true"><span id="working-bar" style="background:#fdab3d"></span><span id="stuck-bar" style="background:#df2f4a"></span><span id="done-bar" style="background:#00c875"></span></div><div class="legend"><span style="--c:#fdab3d">Working</span><span style="--c:#df2f4a">Stuck</span><span style="--c:#00c875">Done</span></div></div></section><div class="tools"><button class="primary" id="complete" disabled>Complete selected</button><button id="reset">Reset board</button><span id="selection" style="padding:8px;color:#676879">0 selected</span></div><h2>▼ This week</h2><div class="board"><div class="head" aria-hidden="true"><span></span><span>Item</span><span>Owner</span><span>Status</span></div><div id="rows"></div></div><p id="message" role="status">Select items or click a status to change it locally.</p></main></div><footer>Independent Vibe 4 HTML/CSS study. Published light-theme and board-label colors; system fallback fonts. No monday.com workspace connection.</footer><script>
const initial=[{id:1,title:'Design handoff',owner:'Maya',status:'Working'},{id:2,title:'Accessibility review',owner:'Theo',status:'Stuck'},{id:3,title:'Release notes',owner:'Sam',status:'Done'}],states=['Working','Stuck','Done'];let items=structuredClone(initial),selection=new Set();const $=id=>document.getElementById(id);function totals(){$('done').textContent=items.filter(x=>x.status==='Done').length;for(const state of states)$(state.toLowerCase()+'-bar').style.width=items.filter(x=>x.status===state).length/items.length*100+'%';$('complete').disabled=!selection.size;$('selection').textContent=selection.size+' selected'}function render(){$('rows').replaceChildren();for(const item of items){const row=document.createElement('div');row.className='row'+(selection.has(item.id)?' selected':'');const label=document.createElement('label'),check=document.createElement('input');check.type='checkbox';check.checked=selection.has(item.id);check.setAttribute('aria-label','Select '+item.title);check.onchange=()=>{check.checked?selection.add(item.id):selection.delete(item.id);row.classList.toggle('selected',check.checked);totals()};label.append(check);const name=document.createElement('span');name.textContent=item.title;const person=document.createElement('span');person.className='person';const av=document.createElement('span');av.className='avatar';av.setAttribute('aria-hidden','true');av.textContent=item.owner[0];const pl=document.createElement('span');pl.className='mobile-label';pl.textContent='Owner';person.append(pl,av,document.createTextNode(item.owner));const status=document.createElement('button');status.className='status';status.dataset.status=item.status;status.textContent=item.status;status.setAttribute('aria-label',item.title+': '+item.status+'. Change status');status.onclick=()=>{item.status=states[(states.indexOf(item.status)+1)%states.length];status.dataset.status=item.status;status.textContent=item.status;status.setAttribute('aria-label',item.title+': '+item.status+'. Change status');totals();$('message').textContent=item.title+' is now '+item.status+' locally.'};row.append(label,name,person,status);$('rows').append(row)}totals()}
$('complete').onclick=()=>{let n=selection.size;items.forEach(x=>{if(selection.has(x.id))x.status='Done'});selection.clear();render();$('message').textContent=n+' local items completed.'};$('reset').onclick=()=>{items=structuredClone(initial);selection.clear();render();$('message').textContent='Board reset.'};render();
</script></html>
La barra de herramientas por lotes cambia los estados de las tareas de ejemplo. Los colores de las etiquetas describen el flujo de trabajo de este tablero y no sustituyen a los tokens semánticos de acción de Vibe.
Entrada de implementación nativa completa
La implementación completa de la configuración, reunida aquí junto con las explicaciones específicas de API. Sigue los requisitos documentados de paquetes y compilación en la sección de configuración.
Entrada completa de tablero local; añade board.css a partir del ejemplo de componente. Las fuentes no se incluyen automáticamente. Paquete nativo API cotejado con la fuente oficial; el ejemplo del paquete no se ha compilado en este entorno.
Hoja de estilos del tablero basada en tokens
Usa la exportación de tokens para la disposición y la tipografía. La región principal mantiene la tabla semántica utilizable en pantallas estrechas.
Una configuración de fuentes con licencia y alojamiento propio puede sustituir esta hoja de estilos externa.
04
Configuración del agente del sistema de diseño Monday Vibe
Punto de partida para la implementación
Entrada completa de tablero local; añade board.css a partir del ejemplo de componente. Las fuentes no se incluyen automáticamente. Paquete nativo API cotejado con la fuente oficial; el ejemplo del paquete no se ha compilado en este entorno.
Crea el tablero de entregas de Vibe 4 proporcionado. Importa @vibe/core/tokens, usa las variables de espaciado numeradas actuales y abreviaturas completas para las fuentes, y mantén diferenciados los colores semánticos de respuesta y los colores de las etiquetas del tablero. Implementa la selección local de filas, la edición de estados y un recuento derivado de elementos completados. Usa disabled en el botón de acciones por lote; no simules el guardado remoto.
05
Fuentes y alcance del sistema de diseño Monday Vibe
Referencia independiente de Vibe 4 y demostración local del tablero. Sin cuenta de monday.com, datos del espacio de trabajo ni conexión con el SDK. El iniciador nativo usa controles reales de Vibe Button y marcado de tabla propio de la aplicación.
