Vibe 4 tasarım belirteçleri ve React kontrolleriyle çalışan bir teslimat panosu oluşturun. Anlamsal eylem renklerini pano etiketlerinden, adlandırılmış boşluk adımlarını, yazı tipi kısaltmalarını ve yeni bir uygulamanın gerektirdiği açık CSS kurulumundan ayırt edin.
Doğrulanmış Vibe açık tema paleti, aralıkları ve tipografi ölçülerini kullanan bağımsız HTML/CSS yorumu; sistem yedek yazı tipi. · Uygulama başvurusu
02
Monday Vibe Tasarım Sistemi Tasarım Başvurusu
Vibe 4 herkese açık kaynak kodu ve @vibe/core entegrasyonu. Aşağıdaki değerler, doğrulanmış açık tema ve stil tanımlarıdır; pano etiketi renkleri anlamsal başarı/hata rollerinden farklıdır. Yerel örnekte, uygulamaya ait bir HTML tablo içinde gerçek Vibe Button kontrolleri kullanılır.
Monday Vibe Tasarım Sistemi Güncel Vibe giriş noktalarını kullanarak oluşturun
Temel bileşenler ve belirteç CSS ayrı içe aktarımlardır
Vibe 4, @vibe/core üzerinden adlandırılmış React bileşenlerini; @vibe/core/tokens üzerinden ise CSS değişkenlerini sunar. Yeni bir istemci uygulamasında ikisini de içe aktarın. Bir bileşen, belirteç dosyasının sağladığı değişkenlere bağlı kalırken kendi stillerini ekleyebilir. Pano örneğinde yerel satır verileri ve seçim durumu kullanılır; tablo yapısı yerel HTML öğelerinden, kontroller ise gerçek Vibe Button bileşenlerinden oluşur.
Eski paket nesillerini birlikte kullanmaktan kaçının
Eski monday-ui-react-core paketi Vibe 2'ye aittir. Vibe 3, yeni özellikler yerine kritik düzeltmeler için sürdürülmektedir. Bu kılavuzda güncel Vibe 4 arayüzü ve numaralı aralık değişkenleri kullanılır. Bu entegrasyon, monday.com SDK istemcisi değildir; hesap, çalışma alanı veya öğe API bağlantısı içermez.
Monday Vibe Tasarım Sistemi Eylem renkleriyle pano etiketleri farklı işlevlere sahiptir
Kontrollerde anlamsal rolleri kullanın
Birincil eylemlerde, eşleşen üzerine gelme rengiyle birlikte birincil rolü kullanın. Seçim için seçili arka planı, normal metinler içinse birincil ve ikincil metin rollerini kullanın. Gövde arka planını tek başına değiştirmek yerine tema değerlerini birbiriyle uyumlu bir bütün olarak kullanın. Bu yerel incelemede doğrulanmış açık tema kullanılır.
Kaynakta anlamsal geri bildirim renklerinin yanı sıra kategorik pano renkleri de bulunur. Tamamlandı için kullanılan yeşil #00c875, anlamsal olumlu renk olan #00854d'den farklıdır. Satır durumu hücrelerinde pano renklerini, okunaklılığı koruyan karşıt metinlerle birlikte kullanın. Devam Ediyor, Takıldı ve Tamamlandı metinlerini koruyun; durumu yalnızca renkle belirtmeyin.
Monday Vibe Tasarım Sistemi Tam yazı tipi kısa yazımını kullanın
Başlıklar ve iş satırları farklı bir görsel dile sahiptir
Kaynakta başlıklar için Poppins, gövde içeriği için Figtree; ayrıca betiklere uygun yedek yazı tipleri tanımlanır. Güncel h1-medium kısa yazımı 600 32px/40px, text2-normal ise 400 14px/20px değerlerini kullanır. Kalınlık, boyut, satır yüksekliği ve aile değerlerinin bir arada kalması için kısa yazımı CSS font özelliğiyle uygulayın. Kaynakta eski başlık takma adları da bulunur; bunların farklı ölçeklerini sessizce kullanmayın.
Vibe, önerilen yazı tipi dosyalarını sizin için içe aktarmaz. Belgelenmiş Figtree/Poppins stil sayfası bağlantısını uygulamanın HTML öğesine ekleyin veya uygun lisanslı dosyaları kendiniz barındırın. Çevrimdışı örnekte sistem yedek yazı tipleri açıkça kullanılır; bu nedenle görüntüleme, monday.com tipografisinin birebir aynısı olduğu iddiasını taşımaz.
Monday Vibe tasarım sistemi Kontrolleri sıkıştırmadan kompakt bir pano
Ritmi numaralı aralıklar belirler
Bitişik araç çubuğu eylemleri için --space-8, panel dolgusu için --space-16 ve pano bölgeleri arasındaki boşluk için --space-24 kullanın. Bunlar güncel kaynakta yer alan tam adlardır. Bu yerleşimler uygulama için yapılmış tercihlerdir. Ölçek, hassas hizalama için iki piksellik bir adımın yanı sıra kompozisyon için seksen piksele kadar daha büyük değerler de içerir.
Monday Vibe Tasarım Sistemi Toplu işlem araç çubuğuna sahip düzenlenebilir tablo
Veri yapısını açıkça tanımlayın
Her iş öğesinin sabit bir kimliği, başlığı, sahibi ve durumu vardır. Yerel sütun başlıkları bu değerleri açıklar. Satır onay kutusu kimliği bir Set'e ekler; durum değişikliği diziyi değiştirmek yerine eşleşen nesneyi yenisiyle değiştirir. Seçilenleri tamamla eylemi aynı Set'i okur ve yalnızca seçili satırları günceller. Tamamlanma özeti satırlardaki verilerden türetilir.
Seçim Set'i boşken birincil toplu işlem düğmesi devre dışıdır.
Satır başına sunulan üçüncül eylem, gösterim amacıyla yerel durumu sırayla değiştirir.
Sıfırlama eylemi ilk satırları geri yükler ve seçimi temizler.
Monday Vibe Tasarım Sistemi Durumu gerçek Button API aracılığıyla belirtin
Devre dışı, yükleniyor ve basılı durumları birbirinden farklıdır
Yerel örnekte, kullanılamayan bir toplu işlem için disabled kullanılır. Uzak bir işlem olmadığından yükleniyor veya başarı durumu gösterilmez. Gerçek bir kalıcı depolama katmanı bağlarsanız yükleniyor durumunu istek yaşam döngüsüne bağlayın ve başarı durumunu yalnızca onay alındıktan sonra güncelleyin. Button kaynağı, görünüm için active ve geçiş denetimi anlamı için aria-pressed özelliklerini de sunar; biri diğerinin yerini tutmaz.
Yerel düzenlemeleri hizmet iddiasına dönüştürmeyin
Canlı ileti, yerel olarak kaç öğenin değiştiğini söyler. monday.com panosunun güncellendiğini söylemez. Sayfa yeniden yüklendiğinde örnek veriler başlangıç durumuna döner. Üretim ortamında entegrasyon için tasarım sistemi katmanının dışında açık çalışma alanı izinleri, hata yönetimi ve eşitleme gerekir.
Monday Vibe tasarım sistemi Satır anlamını farklı genişliklerde koruyun
Gösterimi yeniden akışa duyarlı biçimde düzenleyin
Çevrimdışı pano, dar ekranda her satırı etiketli bir öğe kartı olarak gösterir. Sahip ve durum bilgilerinin anlaşılır kalması için sütun adları görünür etiketler olarak yinelenir. Bu, uygulamaya özgü bir yerleşim tercihidir; Vibe'ın her tabloyu otomatik olarak dönüştürdüğü iddiası değildir. Yerel başlangıç şablonu, daha yoğun veriler için alternatif olarak etiketli bir yatay kaydırma alanında anlamsal tabloyu korur.
Kitaplığı kullanmadan önce öğelere ve sözde öğelere border-box uygulayın. Aksi hâlde, sabit genişlikli bir hücreye eklenen dolgu, özellikle yoğun bir sütunun içine düğme yerleştirildiğinde, hücrenin amaçlanan boyutunu aşabilir. Dış kapsayıcıyı esnek tutun ve araç çubuğundaki eylemlerin alt satıra geçmesine izin verin.
Monday Vibe Tasarım Sistemi Seçim ve durumun birbirinden bağımsız adları olmalı
Her satır kontrolünü etiketleyin
Bir seçim kutusunun erişilebilir adı, iş öğesinin başlığını içerir. Her durum eyleminin adı, öğe adını ve mevcut durumu da içerir. Kibar bir durum iletisi toplu işlemin sonucunu bildirir. Klavye kullananlar yerel kontrollerle satırları seçebilir, toplu komutu etkinleştirebilir ve panoyu sıfırlayabilir; sayfa, elektronik tabloya özgü ok tuşu davranışları uydurmaz.
Design handoff öğesini seçin ve toplu işlemin kullanılabilir hâle geldiğini doğrulayın.
Seçimi tamamlayın; durum metni ile hesaplanan sayının birbiriyle eşleştiğini kontrol edin.
Sıfırlayın ve hem verilerin hem de onay kutusu seçiminin başlangıç durumuna döndüğünü doğrulayın.
Monday Vibe Tasarım Sistemi Tam bir istemci tarafı giriş noktası
Yükleme, içe aktarma ve bağlama
Aşağıdaki kurulum, kök öğe içeren bir React istemci projesi için main.jsx giriş noktasıdır. react, react-dom ve @vibe/core@4 paketlerini yükleyin, token CSS değerini bir kez içe aktarın ve listelenen genel stil sayfasını uygulayın. Mevcut paket ES modülü dışa aktarımlarını kullanır. Sunucu tarafında stil çıkarma deneysel olarak belgelenmiştir; bu başlangıç şablonu özellikle istemci tarafında görüntüleme kullanır.
Belgenin tamamını index.html adıyla kaydedip tarayıcıda açın. Doğrulanmış Vibe açık tema paleti, boşluk ve tipografi ölçülerini kullanan bağımsız HTML/CSS yorumu; sistem yedek yazı tipi.
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>
Toplu işlem araç çubuğu, örnek görevlerin durumlarını değiştirir. Etiket renkleri bu panonun iş akışını tanımlar; Vibe anlamsal eylem tokenlarının yerine geçmez.
Tam yerel uygulama girişi
Kurulumdan itibaren tam uygulama; odaklanmış API açıklamalarının yanında burada bir araya getirilmiştir. Kurulum bölümünde belgelenen paket ve derleme ön koşullarını izleyin.
Eksiksiz yerel pano giriş noktası; bileşen örneğindeki board.css dosyasını ekleyin. Yazı tipleri otomatik olarak pakete dahil edilmez. Yerel API paketi resmî kaynağa göre denetlendi; bu ortamda paket örneği derlenmedi.
Token tabanlı pano stil sayfası
Yerleşim ve tipografi için tokens dışa aktarımını kullanın. Üst bölge, dar genişliklerde anlamsal tablonun kullanılabilir kalmasını sağlar.
Bu harici stil sayfasının yerine lisanslı, kendi sunucunuzda barındırılan bir yazı tipi kurulumu kullanılabilir.
04
Monday Vibe Tasarım Sistemi AI Ajanı Kurulumu
Uygulamaya Başlangıç Noktası
Eksiksiz yerel pano giriş noktası; bileşen örneğindeki board.css dosyasını ekleyin. Yazı tipleri otomatik olarak pakete dahil edilmez. Yerel API paketi resmî kaynağa göre denetlendi; bu ortamda paket örneği derlenmedi.
Sağlanan Vibe 4 teslimat panosunu oluşturun. @vibe/core/tokens paketini içe aktarın, güncel numaralı boşluk değişkenlerini ve eksiksiz yazı tipi kısaltmalarını kullanın; anlamsal geri bildirim renklerini pano etiketi renklerinden ayrı tutun. Satır seçimini, durum düzenlemelerini ve türetilmiş tamamlanma sayısını yerel olarak uygulayın. Toplu işlem düğmesinde disabled kullanın; uzaktan kaydetme davranışını taklit etmeyin.
05
Monday Vibe Tasarım Sistemi Kaynakları ve Kapsamı
Bağımsız Vibe 4 referansı ve yerel pano gösterimi. monday.com hesabı, çalışma alanı verisi veya SDK bağlantısı yoktur. Yerel başlangıç şablonu, gerçek Vibe Button kontrollerini ve uygulamanın kendi tablo işaretlemesini kullanır.
