Программное обеспечение для совместной работы · Новый ресурс
Дизайн-система Monday Vibe.
Создайте рабочую доску доставки с токенами Vibe 4 и элементами управления React. Разберитесь, чем семантические цвета действий отличаются от меток на доске, изучите именованные шаги отступов и сокращённые записи шрифтов, а также настройте CSS, необходимую новому приложению.
Независимая интерпретация HTML/CSS на основе проверенных параметров палитры светлой темы Vibe, отступов и типографики; системный шрифт в качестве запасного. · Справочник по реализации
02
Справочник по дизайн-системе Monday Vibe
Открытый исходный код Vibe 4 и интеграция с @vibe/core. Ниже приведены проверенные значения светлой темы и определения стилей; цвета меток на доске отличаются от семантических ролей успеха и ошибки. В нативном примере используются настоящие элементы управления Vibe Button внутри таблицы HTML, принадлежащей приложению.
Создавайте интерфейс на основе актуальных точек входа Vibe — дизайн-система Monday Vibe
Основные компоненты и токены CSS импортируются отдельно
В Vibe 4 именованные компоненты React доступны через @vibe/core, а переменные CSS — через @vibe/core/tokens. Подключите оба пакета в новом клиентском приложении. Компонент может добавлять собственные стили и при этом использовать переменные из файла токенов. В примере доски используются нативная структура таблицы и настоящие элементы управления Vibe Button, а данные строк и выбор управляются приложением.
Старый пакет monday-ui-react-core относится к Vibe 2. Для Vibe 3 выпускаются критические исправления, но не новые функции. В этом руководстве рассматривается актуальный интерфейс Vibe 4 и пронумерованные переменные отступов. Интеграция не является клиентом monday.com SDK и не подключается к учётным записям, рабочим пространствам или элементам API.
Цвета действий и метки доски выполняют разные функции — дизайн-система Monday Vibe
Используйте семантические роли для элементов управления
Для основных действий используйте основную роль и соответствующий ей цвет при наведении. Для выделения используйте фон выбранного элемента, а для обычного текста — основные и вторичные текстовые роли. Используйте значения темы как согласованный набор, а не меняйте цвет фона страницы отдельно от остальных. В этом локальном примере сохранена проверенная светлая тема.
В исходных данных есть категориальные цвета доски наряду с семантическими цветами обратной связи. Зелёный цвет статуса «Готово» — #00c875, а семантический цвет положительного действия — #00854d. Для ячеек со статусами используются цвета доски и контрастный, хорошо читаемый текст; статусы «В работе», «Заблокировано» и «Готово» обозначены словами, поэтому цвет никогда не служит единственным признаком состояния.
Используйте полную сокращённую запись шрифта — дизайн-система Monday Vibe
Для заголовков и рабочих строк предусмотрена разная типографика
В исходных данных для заголовков указан Poppins, а для основного текста — Figtree с резервными шрифтами для разных письменностей. Текущая сокращённая запись h1-medium — 600 32px/40px, а text2-normal — 400 14px/20px. Применяйте сокращённую запись через свойство шрифта CSS, чтобы начертание, размер, высота строки и семейство оставались связанными. В исходных данных также есть устаревшие псевдонимы заголовков; не подменяйте ими стили с другим масштабом без пояснений.
Vibe не подключает рекомендованные файлы шрифтов автоматически. Добавьте в приложение HTML документированную ссылку на таблицу стилей Figtree/Poppins или разместите у себя файлы с подходящей лицензией. В автономном примере явно используются системные запасные шрифты, поэтому его отображение — это интерпретация, а не утверждение о точном соответствии типографике monday.com.
Компактная доска без уменьшенных элементов управления — дизайн-система Monday Vibe
Ритм задаётся пронумерованными отступами
Используйте --space-8 между соседними действиями на панели инструментов, --space-16 для внутренних отступов панели и --space-24 между разделами доски. Это точные имена из актуального исходного кода. Их расположение — решение, принятое для этого приложения. В шкале также есть шаг в два пикселя для точного выравнивания и более крупные значения — до восьмидесяти пикселей — для композиции.
Редактируемая таблица с панелью пакетных действий — дизайн-система Monday Vibe
Явно задавайте структуру данных
У каждого элемента задачи есть постоянный id, название, владелец и статус. Заголовки столбцов поясняют эти значения. Флажок в строке добавляет id в Set; при изменении статуса нужный объект заменяется, а массив не изменяется напрямую. Действие «Завершить выбранные» использует тот же Set и обновляет только выбранные строки. Сводка выполненных задач формируется на основе строк.
Основная кнопка пакетных действий отключена, если Set выбора пуст.
Третичное действие в строке циклически меняет локальный статус для демонстрации.
Действие сброса восстанавливает исходные строки и очищает выбор.
Передавайте состояние через настоящий Button API — дизайн-система Monday Vibe
Состояния «Отключено», «Загрузка» и «Нажато» различаются
В нативном примере свойство disabled отключает недоступное пакетное действие. Состояния загрузки и успеха не показываются, поскольку удалённой операции нет. При подключении реального слоя сохранения связывайте loading с жизненным циклом запроса и обновляйте состояние успеха только после подтверждения. В исходных данных Button также предусмотрено свойство active для оформления и aria-pressed для семантики переключателя; одно не заменяет другое.
Не выдавайте локальные изменения за работу сервиса
В актуальном сообщении указано, сколько локальных элементов изменилось. В нём не говорится, что доска monday.com была обновлена. При перезагрузке восстанавливаются исходные демонстрационные данные. Для производственной интеграции потребуется отдельно реализовать разрешения для рабочего пространства, обработку ошибок и синхронизацию за пределами слоя дизайн-системы.
Сохраняйте смысл строк при изменении ширины — дизайн-система Monday Vibe
Тщательно перестройте демонстрационный интерфейс
На узком экране автономная доска отображает каждую строку в виде карточки с подписями. Названия столбцов повторяются в виде видимых подписей, чтобы ответственные и статусы оставались понятными. Это решение по компоновке приложения, а не утверждение, что Vibe автоматически преобразует любую таблицу. В стандартном стартовом примере вместо этого используется семантическая таблица в подписанной области с горизонтальной прокруткой — такой вариант подходит для более плотных данных.
Перед использованием библиотеки задайте border-box для элементов и псевдоэлементов. Без этого ячейка фиксированной ширины с отступами может превысить заданный размер, особенно если внутри плотного столбца расположена кнопка. Сохраняйте гибкость внешнего контейнера и разрешайте перенос элементов панели инструментов.
Дизайн-система Monday Vibe: выбор и статус должны иметь независимые названия
Добавьте подпись каждому элементу управления в строке
Флажок выбора включает название рабочего элемента в доступное имя. Каждое действие для изменения статуса содержит название элемента и его текущий статус. Вежливое сообщение о статусе сообщает результат пакетного действия. Пользователи клавиатуры могут выбирать строки, запускать пакетную команду и сбрасывать доску с помощью стандартных элементов управления; страница не имитирует навигацию по таблице стрелками, как в электронных таблицах.
Выберите «Передача дизайна» и убедитесь, что пакетное действие стало доступным.
Выберите все элементы и проверьте, что текст статуса совпадает с вычисленным количеством.
Сбросьте доску и убедитесь, что данные и флажки выбора вернулись к исходному состоянию.
Дизайн-система Monday Vibe: полноценная клиентская точка входа
Установка, импорт, монтирование
Приведённая ниже настройка — точка входа main.jsx для клиентского проекта на React с корневым элементом. Установите react, react-dom и @vibe/core@4, один раз загрузите токен CSS и подключите указанные глобальные стили. В текущем пакете используются экспорты ES-модулей. Извлечение стилей на стороне сервера описано как экспериментальная возможность; в этом стартовом примере используется клиентский рендеринг.
Сохраните весь документ как index.html и откройте его в браузере. Независимая интерпретация HTML/CSS с палитрой светлой темы Vibe, размерами интервалов и типографики, проверенными по официальным источникам; системный резервный шрифт.
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>
Панель пакетных действий меняет статусы демонстрационных задач. Цвета меток описывают рабочий процесс этой доски и не заменяют семантические токены действий Vibe.
Полный пример нативной реализации
Полная реализация из раздела настройки собрана здесь вместе с пояснениями к отдельным частям API. Следуйте документированным требованиям к пакетам и сборке из раздела настройки.
Полноценная локальная точка входа для доски; добавьте board.css из примера компонента. Шрифты не включаются в комплект автоматически. Нативный пакет API проверен по официальному источнику; в этой среде пример пакета не компилировался.
Стили доски на основе токенов
Используйте экспорт tokens для компоновки и типографики. Внешняя область сохраняет возможность работать с семантической таблицей на узких экранах.
Вместо этой внешней таблицы стилей можно настроить лицензированный шрифт с самостоятельным размещением.
04
Monday Vibe Настройка AI-агента для дизайн-системы
Отправная точка для реализации
Полноценная локальная точка входа для доски; добавьте board.css из примера компонента. Шрифты не включаются в комплект автоматически. Нативный пакет API проверен по официальному источнику; в этой среде пример пакета не компилировался.
Создайте указанную доску поставки Vibe 4. Импортируйте @vibe/core/tokens, используйте актуальные переменные нумерованных интервалов и полные сокращённые записи шрифтов; не смешивайте семантические цвета обратной связи с цветами меток доски. Реализуйте локальный выбор строк, изменение статусов и вычисление количества выполненных задач. Используйте disabled для кнопки пакетного действия; не имитируйте удалённое сохранение.
05
Monday Vibe Источники и границы применимости дизайн-системы
Независимый справочник по Vibe 4 и демонстрация локальной доски. Нет подключения к аккаунту monday.com, данным рабочего пространства или SDK. В стандартном стартовом примере используются реальные элементы управления Vibe Button и разметка таблицы, принадлежащая приложению.
