Erstelle mit Vibe-4-Tokens und React-Steuerelementen ein funktionsfähiges Lieferboard. Erfahre, worin sich semantische Aktionsfarben und Board-Beschriftungen unterscheiden, wie benannte Abstandsstufen und Schrift-Kurzschreibweisen funktionieren und welche explizite Einrichtung von CSS eine neue Anwendung benötigt.
Unabhängige Interpretation von HTML/CSS mit verifizierter Vibe-Farbpalette für helle Themes sowie Abstands- und Typografiewerten; System-Ersatzschriftart. · Implementierungsreferenz
02
Designreferenz zum Monday Vibe-Designsystem
Öffentliche Vibe-4-Quelle und Integration von @vibe/core. Die Werte unten entsprechen den verifizierten Definitionen für helle Themes und Stile; die Farben der Board-Labels unterscheiden sich von den semantischen Rollen für Erfolg und Fehler. Das native Beispiel verwendet echte Vibe-Button-Steuerelemente in einer anwendungseigenen HTML-Tabelle.
Monday Vibe Designsystem – auf den aktuellen Vibe-Einstiegspunkten aufbauen
Kernkomponenten und Token CSS werden separat importiert
Vibe 4 stellt benannte Komponenten React über @vibe/core und die Variablen CSS über @vibe/core/tokens bereit. Importiere beides in einer neuen Client-Anwendung. Eine Komponente kann ihre eigenen Styles einfügen und dennoch auf Variablen aus der Token-Datei angewiesen sein. Das Board-Beispiel verwendet eine native Tabellenstruktur und echte Vibe-Button-Steuerelemente; Zeilendaten und Auswahl werden von der Anwendung verwaltet.
Das ältere Paket monday-ui-react-core gehört zu Vibe 2. Vibe 3 wird für kritische Fehlerbehebungen gepflegt, erhält jedoch keine neuen Funktionen. Dieser Leitfaden verwendet die aktuelle Vibe-4-Schnittstelle und nummerierte Abstandsvariablen. Bei der Integration handelt es sich weder um einen monday.com-SDK-Client noch besteht eine Verbindung zu einem Konto, Arbeitsbereich oder Element API.
Monday Vibe Designsystem – Aktionsfarben und Board-Bezeichnungen erfüllen unterschiedliche Aufgaben
Für Steuerelemente semantische Rollen verwenden
Primäre Aktionen verwenden die primäre Rolle mit der dazugehörigen Hover-Farbe. Für die Auswahl dient der ausgewählte Hintergrund, für normalen Text die primäre und sekundäre Textrolle. Verwende die Theme-Werte als zusammengehöriges Set, statt die Hintergrundfarbe des Bodys isoliert zu ändern. Diese lokale Studie bleibt beim verifizierten hellen Theme.
Die Quelle enthält neben semantischen Feedbackfarben auch kategorische Board-Farben. Das Grün für „Done“ ist #00c875, während die semantische Positivfarbe #00854d lautet. In unseren Statuszellen verwenden wir die Board-Farben mit kontrastreichem, gut lesbarem Text. Die Bezeichnungen „Working“, „Stuck“ und „Done“ bleiben erhalten, damit der Zustand niemals allein durch die Farbe vermittelt wird.
Monday Vibe Designsystem – die vollständige Font-Kurzschreibweise verwenden
Titel und Arbeitszeilen haben unterschiedliche Stimmen
Die Quelle weist Titeln Poppins und Textinhalten Figtree zu, jeweils mit Fallbacks für verschiedene Schriftsysteme. Die aktuelle Kurzschreibweise für h1-medium lautet 600 32px/40px, für text2-normal 400 14px/20px. Wende die Kurzschreibweise mit der Property CSS font an, damit Schriftschnitt, Größe, Zeilenhöhe und Schriftfamilie aufeinander abgestimmt bleiben. Die Quelle enthält außerdem ältere Überschriften-Aliase. Ersetze sie nicht stillschweigend durch eine andere Skalierung.
Vibe importiert die empfohlenen Schriftdateien nicht automatisch. Füge den dokumentierten Stylesheet-Link für Figtree/Poppins in die Anwendung HTML ein oder hoste selbst entsprechend lizenzierte Dateien. Das Offline-Beispiel verwendet ausdrücklich System-Fallback-Schriften. Die Darstellung ist daher eine Interpretation und erhebt nicht den Anspruch, die Typografie von monday.com exakt wiederzugeben.
Monday Vibe Designsystem – ein kompaktes Board ohne zusammengepresste Steuerelemente
Nummerierte Abstände geben den Rhythmus vor
Verwende --space-8 für benachbarte Aktionen in der Werkzeugleiste, --space-16 für den Innenabstand eines Panels und --space-24 zwischen Board-Bereichen. Das sind die exakten Namen aus der aktuellen Quelle. Die konkrete Platzierung ist eine Entscheidung für diese Anwendung. Die Skala umfasst außerdem einen Zwei-Pixel-Schritt für feine Ausrichtung sowie größere Werte bis zu achtzig Pixeln für die Gestaltung des Layouts.
Monday Vibe Designsystem – eine bearbeitbare Tabelle mit Werkzeugleiste für Sammelaktionen
Die Datenstruktur klar definieren
Jedes Arbeitselement hat eine stabile ID, einen Titel, eine verantwortliche Person und einen Status. Native Spaltenüberschriften erläutern diese Werte. Ein Kontrollkästchen in einer Zeile fügt die ID zu einem Set hinzu. Bei einer Statusänderung wird das passende Objekt ersetzt, statt das Array zu verändern. Die Aktion „Ausgewählte abschließen“ liest dasselbe Set aus und aktualisiert nur die ausgewählten Zeilen. Die Abschlussübersicht wird aus den Zeilen abgeleitet.
Der primäre Button für Sammelaktionen ist deaktiviert, wenn das Auswahl-Set leer ist.
Die tertiäre Aktion in jeder Zeile wechselt zu Demonstrationszwecken den lokalen Status.
Die Zurücksetzen-Aktion stellt die ursprünglichen Zeilen wieder her und hebt die Auswahl auf.
Monday Vibe Designsystem – Status über den tatsächlichen Button API bereitstellen
Deaktiviert, ladend und gedrückt sind unterschiedliche Zustände
Das native Beispiel verwendet disabled für eine nicht verfügbare Sammelaktion. Es zeigt weder einen Lade- noch einen Erfolgszustand an, da kein Remote-Vorgang stattfindet. Bindest du eine echte Persistenzschicht an, verknüpfe loading mit dem Lebenszyklus der Anfrage und setze den Erfolgsstatus erst nach einer Bestätigung. Die Button-Quelle stellt außerdem active für die Darstellung und aria-pressed für die Umschalter-Semantik bereit. Das eine ersetzt nicht das andere.
Lokale Änderungen nicht als Dienstleistung darstellen
Die Live-Meldung gibt an, wie viele lokale Elemente geändert wurden. Sie behauptet nicht, dass ein Board auf monday.com aktualisiert wurde. Beim Neuladen werden die ursprünglichen Beispieldaten wiederhergestellt. Für eine Produktivintegration wären außerhalb der Designsystem-Ebene explizite Berechtigungen für den Arbeitsbereich, eine Fehlerbehandlung und eine Synchronisierung erforderlich.
Monday Vibe Designsystem – die Bedeutung von Zeilen über verschiedene Bildschirmbreiten hinweg erhalten
Die Darstellung des Beispiels durchdacht anpassen
Auf einem schmalen Bildschirm stellt das Offline-Board jede Zeile als beschriftete Elementkarte dar. Die Spaltennamen werden als sichtbare Bezeichnungen wiederholt, damit Verantwortliche und Status verständlich bleiben. Das ist eine Layoutentscheidung der Anwendung und keine Behauptung, Vibe wandle automatisch jede Tabelle um. Als Alternative für umfangreichere Daten behält der native Einstieg eine semantische Tabelle in einem beschrifteten Bereich mit horizontalem Overflow bei.
Wende border-box auf Elemente und Pseudoelemente an, bevor du die Bibliothek verwendest. Andernfalls kann eine Zelle mit fester Breite durch Innenabstände ihre vorgesehene Größe überschreiten, insbesondere wenn ein Button in einer schmalen Spalte verschachtelt ist. Gestalte den äußeren Container flexibel und ermögliche den Umbruch der Aktionen in der Werkzeugleiste.
Monday Vibe Designsystem – Auswahl und Status brauchen unabhängige Bezeichnungen
Jedes Steuerelement in einer Zeile beschriften
Ein Auswahlkästchen enthält den Titel des Arbeitselements in seinem zugänglichen Namen. Jede Statusaktion enthält sowohl den Elementnamen als auch den aktuellen Status. Eine höfliche Statusmeldung gibt das Ergebnis der Stapelaktion aus. Nutzerinnen und Nutzer, die die Tastatur verwenden, können Zeilen auswählen, den Stapelbefehl ausführen und das Board über native Bedienelemente zurücksetzen; die Seite erfindet kein Tabellenkalkulationsverhalten für Pfeiltasten.
Wählen Sie „Designübergabe“ aus und bestätigen Sie, dass die Stapelaktion verfügbar wird.
Schließen Sie die Auswahl ab und prüfen Sie, ob Statustext und abgeleitete Anzahl übereinstimmen.
Setzen Sie alles zurück und prüfen Sie, ob Daten und Auswahlkästchen in den Ausgangszustand zurückkehren.
Die folgende Einrichtung ist ein main.jsx-Einstiegspunkt für ein React-Clientprojekt mit einem Root-Element. Installieren Sie react, react-dom und @vibe/core@4, laden Sie Token CSS einmal und wenden Sie das aufgeführte globale Stylesheet an. Das aktuelle Paket verwendet ES-Modul-Exporte. Die serverseitige Extraktion von Styles ist als experimentell dokumentiert; dieses Starterprojekt verwendet bewusst clientseitiges Rendering.
Speichern Sie das vollständige Dokument als index.html und öffnen Sie es in einem Browser. Unabhängige Interpretation von HTML/CSS mit überprüfter Farbpalette des Vibe-Hellmodus sowie den dazugehörigen Abmessungen für Abstände und Typografie; Fallback-Systemschriftart.
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>
Die Stapel-Symbolleiste ändert die Statuswerte der Beispielaufgaben. Die Beschriftungsfarben beschreiben den Workflow dieses Boards und ersetzen nicht die semantischen Aktions-Token von Vibe.
Vollständiger Einstieg für die native Implementierung
Die vollständige Implementierung aus dem Setup, hier zusammen mit den gezielten Erläuterungen zu API zusammengestellt. Beachte die in den Setup-Anweisungen dokumentierten Voraussetzungen für Pakete und Builds.
Vollständiger Einstiegspunkt für ein lokales Board; ergänzen Sie board.css aus dem Komponentenbeispiel. Schriftarten werden nicht automatisch mitgeliefert. Das native Paket API wurde anhand der offiziellen Quelle geprüft; in dieser Umgebung wurde das Paketbeispiel nicht kompiliert.
Tokenbasiertes Stylesheet für das Board
Verwenden Sie den Token-Export für Layout und Typografie. Der übergeordnete Bereich hält die semantische Tabelle auch bei schmalen Ansichten nutzbar.
Diese externe Stylesheet-Datei kann durch eine Einrichtung mit selbst gehosteter, lizenzierter Schriftart ersetzt werden.
04
Monday Vibe Designsystem – Einrichtung für AI Agents
Ausgangspunkt für die Implementierung
Vollständiger Einstiegspunkt für ein lokales Board; ergänzen Sie board.css aus dem Komponentenbeispiel. Schriftarten werden nicht automatisch mitgeliefert. Das native Paket API wurde anhand der offiziellen Quelle geprüft; in dieser Umgebung wurde das Paketbeispiel nicht kompiliert.
Erstellen Sie das bereitgestellte Vibe-4-Bereitstellungsboard. Importieren Sie @vibe/core/tokens, verwenden Sie die aktuellen nummerierten Abstandsvariablen und vollständigen Schriftart-Kurzschreibweisen und halten Sie semantische Feedbackfarben von den Beschriftungsfarben des Boards getrennt. Implementieren Sie die lokale Zeilenauswahl, Statusänderungen und eine abgeleitete Anzahl abgeschlossener Einträge. Verwenden Sie disabled für die Stapelschaltfläche; simulieren Sie kein Speichern auf einem Remote-Server.
05
Monday Vibe Designsystem – Quellen und Geltungsbereich
Unabhängige Vibe-4-Referenz und lokale Board-Demonstration. Kein monday.com-Konto, keine Workspace-Daten und keine SDK-Verbindung. Das native Starterprojekt verwendet echte Vibe-Button-Steuerelemente und ein anwendungseigenes Tabellen-Markup.
