Monte um painel de entregas funcional com tokens do Vibe 4 e controles de React. Entenda a diferença entre cores semânticas de ação e rótulos do painel, os níveis de espaçamento nomeados, as formas abreviadas de fonte e a configuração explícita de CSS necessária para uma nova aplicação.
Interpretação independente de HTML/CSS, com paleta, espaçamentos e dimensões tipográficas do tema claro do Vibe verificados; fonte substituta do sistema. · Referência de implementação
02
Referência de design do sistema de design Monday Vibe
Integração com o Vibe 4, suas fontes públicas e @vibe/core. Os valores abaixo correspondem às definições verificadas do tema claro e dos estilos; as cores dos rótulos do quadro são distintas das cores semânticas de sucesso/erro. O exemplo nativo usa controles Button reais do Vibe dentro de uma tabela HTML pertencente à aplicação.
Desenvolva com os pontos de entrada atuais do Vibe no sistema de design Monday Vibe
Os componentes principais e os tokens CSS são importados separadamente
O Vibe 4 disponibiliza componentes React nomeados por meio de @vibe/core e as variáveis CSS por meio de @vibe/core/tokens. Importe ambos em uma nova aplicação cliente. Um componente pode injetar seus próprios estilos e ainda depender de variáveis fornecidas pelo arquivo de tokens. O exemplo do quadro usa a estrutura nativa de tabela e controles Button reais do Vibe, com dados de linhas e seleção pertencentes à aplicação.
O pacote antigo monday-ui-react-core pertence ao Vibe 2. O Vibe 3 recebe manutenção para correções críticas, não para novos recursos. Este guia usa a interface atual do Vibe 4 e as variáveis de espaçamento numeradas. A integração não é um cliente do SDK do monday.com e não tem conexão com conta, espaço de trabalho ou item API.
No sistema de design Monday Vibe, as cores de ação e os rótulos do quadro têm funções diferentes
Use funções semânticas nos controles
As ações primárias usam a função primária e sua cor correspondente ao passar o cursor. A seleção usa o plano de fundo de selecionado, enquanto a leitura normal usa as funções de texto primário e secundário. Use os valores do tema como um conjunto integrado, em vez de alterar apenas o plano de fundo do corpo. Este estudo local permanece no tema claro verificado.
A fonte inclui cores categóricas do quadro, além das cores semânticas de feedback. O verde de Done é #00c875, enquanto a cor semanticamente positiva é #00854d. As células de status das linhas usam as cores do quadro com texto contrastante e legível, mantêm as palavras Working, Stuck e Done e nunca dependem apenas da cor para descrever o estado.
Use o atalho tipográfico completo no sistema de design Monday Vibe
Títulos e linhas de trabalho têm estilos próprios
A fonte define Poppins para títulos e Figtree para o conteúdo do corpo, com alternativas compatíveis com diferentes sistemas de escrita. O atalho atual h1-medium é 600 32px/40px, enquanto text2-normal é 400 14px/20px. Aplique o atalho com a propriedade CSS font para manter peso, tamanho, altura da linha e família tipográfica integrados. A fonte também contém aliases de cabeçalho mais antigos; não os substitua silenciosamente por opções de escala diferente.
Carregue os arquivos de fontes de forma deliberada
O Vibe não importa os arquivos de fontes recomendados por você. Adicione o link documentado da folha de estilos de Figtree/Poppins à aplicação HTML ou hospede arquivos licenciados adequadamente. O exemplo offline usa explicitamente fontes substitutas do sistema; portanto, sua renderização é uma interpretação, não uma alegação de reproduzir exatamente a tipografia do monday.com.
Um quadro compacto sem controles comprimidos no sistema de design Monday Vibe
Os espaçamentos numerados definem o ritmo
Use --space-8 entre ações adjacentes da barra de ferramentas, --space-16 no preenchimento interno do painel e --space-24 entre as regiões do quadro. Todos são nomes exatos da fonte atual. Essas disposições são escolhas feitas para esta aplicação. A escala também inclui uma etapa de dois pixels para alinhamentos finos e valores maiores, de até oitenta pixels, para a composição.
Uma tabela editável com barra de ferramentas para ações em lote no sistema de design Monday Vibe
Mantenha explícita a estrutura dos dados
Cada item de trabalho tem um id estável, um título, um responsável e um status. Os cabeçalhos nativos das colunas explicam esses valores. A caixa de seleção de uma linha adiciona o id a um Set; ao alterar o status, o objeto correspondente é substituído, em vez de mutar o array. A ação Concluir selecionados lê o mesmo Set e atualiza apenas as linhas selecionadas. O resumo de conclusão é derivado das linhas.
O botão primário para ações em lote fica desativado quando o Set de seleção está vazio.
A ação terciária de cada linha percorre os status locais para fins de demonstração.
A ação de redefinição restaura as linhas iniciais e limpa a seleção.
Exponha o estado por meio do componente Button API real no sistema de design Monday Vibe
Desativado, carregando e pressionado são estados diferentes
O exemplo nativo usa disabled para uma ação em lote indisponível. Não exibe carregamento nem sucesso porque não há operação remota. Se conectar uma camada de persistência real, associe loading ao ciclo de vida da solicitação e atualize o estado de sucesso somente após a confirmação. A fonte do Button também expõe active para a aparência e aria-pressed para a semântica de alternância; um não substitui o outro.
Não transforme edições locais em alegações sobre um serviço
A mensagem dinâmica informa quantos itens locais foram alterados. Ela não diz que um quadro do monday.com foi atualizado. Ao recarregar a página, os dados de exemplo iniciais são restaurados. Uma integração de produção exigiria permissões explícitas do espaço de trabalho, tratamento de erros e sincronização fora da camada do sistema de design.
Preserve o significado das linhas em diferentes larguras no sistema de design Monday Vibe
Adapte a demonstração de forma cuidadosa
No quadro offline, cada linha se transforma em um cartão de item identificado em telas estreitas. Os nomes das colunas são repetidos como rótulos visíveis para manter claros o responsável e o status. Essa é uma escolha de layout da aplicação, não uma alegação de que o Vibe transforma automaticamente todas as tabelas. Como alternativa para dados mais densos, o exemplo inicial nativo mantém uma tabela semântica em uma região identificada com rolagem horizontal.
Aplique border-box a elementos e pseudoelementos antes de usar a biblioteca. Sem isso, uma célula de largura fixa com preenchimento interno pode ultrapassar o tamanho previsto, especialmente quando há um botão dentro de uma coluna densa. Mantenha flexível o contêiner externo e permita que as ações da barra de ferramentas quebrem para a linha seguinte.
Seleção e status precisam de nomes independentes no sistema de design Monday Vibe
Identifique cada controle de linha
Uma caixa de seleção inclui o título do item de trabalho em seu nome acessível. Cada ação de status inclui o nome do item e o status atual. Uma mensagem de status cortês informa o resultado do lote. Usuários de teclado podem selecionar linhas, ativar o comando em lote e redefinir o quadro usando controles nativos; a página não inventa o comportamento das teclas de seta de planilhas.
Selecione Design e confirme que a ação em lote fica disponível.
Conclua a seleção e verifique se o texto do status e a contagem derivada estão de acordo.
Redefina e verifique se os dados e a seleção das caixas de seleção voltam ao estado inicial.
Uma entrada completa do lado do cliente no sistema de design Monday Vibe
Instale, importe e monte
A configuração abaixo é uma entrada main.jsx para um projeto cliente React que contém um elemento raiz. Instale react, react-dom e @vibe/core@4, carregue os tokens CSS uma vez e aplique a folha de estilos global indicada. O pacote atual usa exportações de módulos ES. A extração de estilos no servidor está documentada como experimental; este exemplo inicial usa renderização no cliente deliberadamente.
Exemplos de componentes do sistema de design Monday Vibe
Exemplo interativo completo e independente
Salve o documento completo como index.html e abra-o em um navegador. Interpretação independente de HTML/CSS, com paleta, espaçamentos e dimensões tipográficas do tema claro do Vibe verificados; fonte substituta do 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>
A barra de ferramentas para ações em lote altera os status das tarefas de exemplo. As cores dos rótulos descrevem o fluxo de trabalho deste quadro e não substituem os tokens semânticos de ação do Vibe.
Entrada da implementação nativa completa
A implementação completa, desde a configuração, reunida aqui com as explicações específicas de API. Siga os pré-requisitos documentados de pacote e compilação na configuração.
Entrada completa para o board local; adicione board.css do exemplo do componente. As fontes não são incluídas automaticamente. O pacote nativo API foi conferido com a fonte oficial; este ambiente não compilou o exemplo do pacote.
Folha de estilos do board baseada em tokens
Use a exportação de tokens para layout e tipografia. A região pai mantém a tabela semântica utilizável em larguras estreitas.
Uma configuração de fontes licenciadas e hospedadas localmente pode substituir esta folha de estilos externa.
04
Configuração do agente de IA do sistema de design Monday Vibe
Ponto de partida para implementação
Entrada completa para o board local; adicione board.css do exemplo do componente. As fontes não são incluídas automaticamente. O pacote nativo API foi conferido com a fonte oficial; este ambiente não compilou o exemplo do pacote.
Crie o board de entregas Vibe 4 fornecido. Importe @vibe/core/tokens, use as variáveis de espaçamento numeradas atuais e as declarações abreviadas completas de fonte, e mantenha as cores semânticas de feedback distintas das cores dos rótulos do board. Implemente a seleção local de linhas, a edição de status e uma contagem derivada de conclusão. Use disabled no botão de ação em lote; não simule salvamento remoto.
05
Fontes e escopo do sistema de design Monday Vibe
Referência independente do Vibe 4 e demonstração de um board local. Sem conta monday.com, dados de workspace ou conexão com SDK. O starter nativo usa controles Button reais do Vibe e marcação de tabela mantida pela aplicação.
