Konu filtreleri, genişletilebilir kanıt bağlamı ve kalıcı yerel not defteri içeren eksiksiz bir geri bildirim okuma çalışma alanında Wanda’nın gerçek tema rollerini ve belirteç söz dizimini kullanın.
Wonderflow Wanda Tasarım Sistemi Temel Değerleri, Temalar ve CSS Kullanımı
İki renk düzeyini anlayın
Wanda’nın temel renk token’ları, hsl() sarmalayıcısı olmadan 214 66% 44% gibi HSL kanallarıdır. --global-interactive-text gibi tema rolleri, tam bir CSS rengine karşılık gelir. Tam bir tema değerini yeniden sarmalamak geçersiz olur; temel kanalların etrafında hsl() kullanmamak da geçersizdir. Tabloda tam rol değerleri ve standart boyutlar ayrı ayrı gösterilir.
Derleme zamanı veya çalışma zamanı token’larını bilinçli seçin
Belgelenen token() gösterimi Wanda’nın PostCSS yapılandırması tarafından işlenir. Bu, tarayıcıda çalışan bir CSS işlevi değildir. Bunun yerine, düz bir HTML projesi yayımlanmış tokens.css dosyasını içe aktarabilir ve var() kullanabilir. Çalışan örnek, standart özel özelliklerle yayımlanmış themes.css dosyasını kullanır; bu nedenle gizli bir PostCSS derleme adımı gerektirmez.
Wonderflow Wanda Tasarım Sistemi Açık ve Koyu Tema Rolleri
Anlamsal yüzeyi birlikte değiştirin
Wanda, açık ve koyu tema eşlemeleri sunar. Örnek, kökteki data-theme değerini değiştirir; tema stil sayfası da ön plan, yüzey, kenarlık ve vurgu rollerini birlikte değiştirir. Tema değişikliği sunum durumudur, araştırma durumunu sıfırlamaz; bu nedenle seçimler ve kaydedilen notlar değişmeden kalır.
CTA rolünü ana yerel eylem için ayırın
Kırmızı CTA çifti, kaydedilen notları gözden geçirmek için bir kez kullanılır. Konu etiketlerinde nötr vurgu rolleri, duygu durumu etiketlerinde ise yeşil, sarı ve kırmızı çiftler kullanılır. Her etiketin yazılı bir duygu durumu da vardır; böylece renk algısındaki farklılıklar anlamı ortadan kaldırmaz. Örnek, her kart için ayrı bir vurgu paleti uydurmaz.
Wonderflow Wanda Tasarım Sistemi Geri Bildirim İçeriği ve Kanıt Sınırları
Gözlemi yorumdan ayrı tutun
Her kartta, yazılmış bir gözlem ve genişletilebilir bir bağlam notu bulunur. Bağlam, örneğin neyi gösterdiğini açıklar ve sıklık ya da önem derecesine ilişkin iddialardan özellikle kaçınır. Gerçek bir geri bildirim aracı, tek bir alıntıyı dayanaksız bir eğilime dönüştürmek yerine kaynağı ve analiz sınırını korumalıdır.
Süslemeyle kanıt uydurmayın
Örnekte uydurma müşteri kimlikleri, yıldız puanları veya model güven skorları yoktur. Filtreleme, açılır içerik ve kaydedilen durumu göstermek için yazılmış beş not yeterlidir. Canlı bir üründe araştırmanın kaynağı ve erişim kuralları veri sözleşmesinde yer almalıdır; alıntıların hoş göründüğü bir kart bunları sağlayamaz.
Wonderflow Wanda Tasarım Sistemi Filtreleme ve Not Defteri Durumu
Konu ve duygu durumu koşullarını birleştirin
İki yerel seçme alanı AND filtresi uygular. Eşleşen not bulunmayan bir bileşimde kullanıcıya görünür bir kurtarma mesajı ve sıfırlama eylemi sunulur. Sonuç sayısı, daha büyük bir veri kümesinden alınmış izlenimi vermek yerine, yazılmış beş not üzerinden hesaplandığını belirtir. Bunların tümü eksiksiz kaynak kodunda görülebilir.
Kaydedilen notları görünürlükten bağımsız tutun
Wonderflow Wanda Tasarım Sistemi Kartlar, Açılır İçerik ve Duyarlı Düzen
Kanıtı kontrollerden ayırmak için boşluk kullanın
Geniş ekranlarda her not kartında 16px köşe yarıçapı ve 24px iç boşluk kullanılır. Etiketler konuyu belirtir, alıntı daha büyük puntoyla gösterilir ve kaydetme eyleminden önce genişletilebilir bağlam yer alır. Not defteri, notların yanında daha sakin bir yüzeyde bulunur. Bunlar Wanda’nın değerleriyle ifade edilen özgün kompozisyon tercihleridir; yerel bir araştırma kartı bileşeni oldukları iddia edilmez.
Mobilde okuma sırasını koruyun
768px genişlikte not defteri gözlemlerden sonra gelir ve kart dolgusu 16px’e düşer. Konu ve duygu durumu kontrolleri tam genişlikte satırlara dönüşür. Genişletilen bağlam belge akışında kalır; başka bir notın üzerine binmez veya onu gizlemez. Kartların yüksekliği sabit değildir, bu nedenle uzun alıntılar da okunabilir kalır.
Wonderflow Wanda Tasarım Sistemi Yerel React Kurulumu ve HTML Sınırı
Wanda araç zincirinin tamamını hesaba katın
Resmî kurulumda react-components, themes, symbols ve tokens kullanılır; bileşen CSS için gereken PostCSS yapılandırmasını @wonderflow/config sağlar. React giriş noktası core.css dosyasını ve themes paketini içe aktarır. Yalnızca react-components paketini kurup tüm tema rollerinin mevcut olduğunu varsaymak eksik bir entegrasyondur. Herkese açık kurulum sayfasında ayrıca 10.6 üzeri sürümlerde Tailwind uyumluluğuna ilişkin bir uyarı bulunur.
Bu örneği yerel bileşen iddiasında bulunmadan kullanın
Çalıştırılan önizleme, özgün anlamsal HTML ile Wanda 16.0.0 tema CSS değerlerini kullanır. React Button, Select veya açılır içerik bileşenlerini çalıştırmaz. Bu sınır bilinçli olarak belirgindir: eksiksiz kaynak kodu statik bir sunucuyla çalıştırılabilir; yerel React geçişinde ise güncel bileşen API’leri ve derleme yapılandırması doğrulanmalıdır.
Wonderflow Wanda Tasarım Sistemi Eksiksiz Kaynak Kod ve Ajan İncelemesi
Gerçek önizlemeyi yeniden oluşturun
Sabitlenmiş tema paketini kurun, oluşturulan themes.css dosyasını sağlanan index.html ve wanda.css dosyalarının yanına kopyalayın ve dizini sunun. Kaynak kodda beş notun tamamı, filtreleme, açılır içerik, kaydedilen durum ve geri bildirim bulunur. Önizleme, çalışma zamanında ağ bağımlılığı olmaması için aynı stil sayfasını yerel olarak içerir.
@wonderflow/themes 16.0.0 paketini kurun ve oluşturulan CSS dosyasını kopyalayın.
index.html ve wanda.css dosyalarının tamamını kaydedin.
Sonuç vermeyen bir filtre uygulayın, sıfırlayın ve bir not kaydedin.
Temayı değiştirin ve not defterinin korunduğunu doğrulayın.
Hata ve geçiş durumlarını inceleyin
Ajan’dan filtre paydasını, sonuç vermeyen filtre için kurtarma durumunu, kaydedilen notların kalıcılığını ve inceleme sonucunun geçersiz kılınmasını korumasını isteyin. Her iki görünümü ve genişletilmiş uzun bir notu kontrol edin. Yerel inceleme yalnızca seçilen örnekleri özetler; ayrı bir uygulama ve kanıt kaynağı olmadan bu sonuç AI analizi veya müşteri doğrulaması olarak adlandırılmamalıdır.
token() işlevini çalışma zamanı CSS olarak değerlendirmeyin.
Temel HSL kanallarını tam tema renklerinden ayrı tutun.
Yazılmış örnekleri gerçek araştırma kanıtlarından ayrı tutun.
Wonderflow Wanda Tasarım Sistemi Bileşen Örnekleri
index.html — eksiksiz geri bildirim çalışma alanı
Özgün anlamsal HTML ve uygulama durumunun tamamı. Kopyalanan Wanda tema stil sayfasını kullanır.
html
<!doctype html><html lang="en" data-theme="light"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Feedback study</title><link rel="stylesheet" href="wanda-theme.css"><link rel="stylesheet" href="wanda.css"><body><main><header><div><span class="eyebrow">PRODUCT RESEARCH / AUTHORED SAMPLE NOTES</span><h1>Explore the feedback</h1><p>Read individual observations before turning a theme into a decision.</p></div><button id="theme" aria-pressed="false">Dark theme</button></header><div class="filters"><label>Topic <select id="topic" aria-label="Topic"><option value="all">All topics</option><option>Setup</option><option>Search</option><option>Export</option></select></label><label>Sentiment <select id="sentiment" aria-label="Sentiment"><option value="all">All sentiments</option><option value="positive">Positive</option><option value="mixed">Mixed</option><option value="negative">Negative</option></select></label><button id="reset">Reset filters</button></div><div class="workspace"><section><div class="section-heading"><h2>Sample observations</h2><span id="count" role="status"></span></div><div id="notes"></div><div id="empty" hidden><h3>No observations match</h3><p>Clear a filter to see the authored examples again.</p></div></section><aside><h2>Research notebook</h2><p>Save observations to keep them together while comparing topics.</p><ul id="saved"></ul><p id="hint">No observations saved yet.</p><button class="cta" id="review">Review saved notes</button><p id="result" role="status"></p></aside></div><footer>Original interface using Wanda 16.0.0 theme and token values. All quotations are written for this specimen, not real customer feedback or research findings.</footer></main>
<script>
const data=[{id:1,topic:'Setup',sentiment:'positive',quote:'The first checklist made it clear what I needed to prepare.',context:'Authored onboarding observation; one sample, not a measured trend.'},{id:2,topic:'Search',sentiment:'negative',quote:'I could not tell whether the filter was still active after I changed the search.',context:'Authored state-visibility observation; investigate with actual users.'},{id:3,topic:'Export',sentiment:'mixed',quote:'The file was useful, but I wanted to check the included columns first.',context:'Authored export observation; no frequency or severity estimate.'},{id:4,topic:'Setup',sentiment:'mixed',quote:'I understood the steps but needed an explanation of one unfamiliar term.',context:'Authored terminology observation; the term is intentionally unspecified.'},{id:5,topic:'Search',sentiment:'positive',quote:'Seeing a count beside each topic helped me narrow the list.',context:'Authored topic-navigation observation; not an endorsement.'}];const saved=new Set();const $=id=>document.getElementById(id);function render(){const visible=data.filter(n=>($('topic').value==='all'||n.topic===$('topic').value)&&($('sentiment').value==='all'||n.sentiment===$('sentiment').value));$('count').textContent=visible.length+' of '+data.length+' notes';$('empty').hidden=!!visible.length;$('notes').replaceChildren(...visible.map(n=>{let a=document.createElement('article');a.innerHTML=`<div class="tags"><span>${n.topic}</span><span class="${n.sentiment}">${n.sentiment}</span></div><blockquote>${n.quote}</blockquote><details><summary>Read sample context</summary><p>${n.context}</p></details><button class="save" aria-pressed="${saved.has(n.id)}" aria-label="${saved.has(n.id)?'Remove':'Save'} note ${n.id}">${saved.has(n.id)?'Saved to notebook':'Save to notebook'}</button>`;a.querySelector('.save').onclick=()=>{saved.has(n.id)?saved.delete(n.id):saved.add(n.id);$('result').textContent='';render()};return a}));$('saved').replaceChildren(...data.filter(n=>saved.has(n.id)).map(n=>{let l=document.createElement('li');l.textContent=n.topic+': '+n.quote;return l}));$('hint').hidden=!!saved.size}
$('topic').onchange=render;$('sentiment').onchange=render;$('reset').onclick=()=>{$('topic').value='all';$('sentiment').value='all';render()};$('review').onclick=()=>{$('result').textContent=saved.size?`${saved.size} authored notes ready for local review. No analysis has been generated.`:'Save a note before reviewing.'};$('theme').onclick=()=>{const dark=$('theme').getAttribute('aria-pressed')!=='true';$('theme').setAttribute('aria-pressed',dark);document.documentElement.dataset.theme=dark?'dark':'light'};render();
</script>
</body></html>
Tema değerleri, yapay bir paletten değil kurulu paketten alınır.
04
Wonderflow Wanda Tasarım Sistemi Ajanı Kurulumu
Uygulamaya Başlangıç Noktası
Yerel önizleme, yayımlanmış aynı tema CSS dosyasını içerir. HTML uygulaması PostCSS veya React gerektirmez.
sh
npm install @wonderflow/[email protected]
cp node_modules/@wonderflow/themes/dist/themes.css wanda-theme.css
# Save the complete index.html and wanda.css examples beside that file.
python3 -m http.server 8080
Projeniz İçin Bir İstem
Ajan İstemi
Eksiksiz özgün HTML örneğiyle Wanda 16.0.0 tema rollerini kullanarak bir geri bildirim not defteri oluşturun. AND filtrelemesini, beş notluk açık paydayı, genişletilmiş bağlamı, kaydedilen durumun kalıcılığını ve eski inceleme sonuçlarının temizlenmesini koruyun. Derleme zamanı token() kullanımını CSS değişkenlerinden ayrı tutun ve yazılmış gözlemleri asla müşteri araştırması olarak sunmayın.
05
Wonderflow Wanda Tasarım Sistemi Kaynakları ve Kapsamı
Wanda themes ve tokens 16.0.0 kullanan bir OpenDesign uygulama çalışması. Arayüz özgün HTML; yerel Wanda React çalışma zamanı değildir. Tüm alıntılar bu örnek için yazılmıştır; müşteri kanıtı veya araştırma bulgusu değildir.
