Verwenden Sie Wandas echte Theme-Rollen und Token-Syntax in einem vollständigen Arbeitsbereich zum Lesen von Feedback – mit Themenfiltern, aufklappbarem Belegkontext und einem dauerhaft verfügbaren lokalen Notizbuch.
Eigenständiges HTML mit nativem Wanda-16.0.0-Theme CSS; keine React-Komponentenlaufzeit. · Implementierungsreferenz
02
Designreferenz zum Wonderflow Wanda-Designsystem
JSON-Dateien für helle und dunkle Themes von @wonderflow/themes 16.0.0 sowie JSON-Dateien mit Web-Design-Token von @wonderflow/tokens 16.0.0, anhand der öffentlichen Entwicklerdokumentation verifiziert.
Grundbausteine, Themes und Verwendung von CSS im Wonderflow Wanda-Designsystem
Die zwei Ebenen der Farben verstehen
Die primitiven Farb-Design-Token von Wanda sind HSL-Kanäle wie 214 66% 44%, ohne den hsl()-Wrapper. Theme-Rollen wie --global-interactive-text ergeben eine vollständige CSS-Farbe. Wird ein vollständiger Theme-Wert nochmals umschlossen, ist das ungültig; primitive Kanäle ohne hsl() zu verwenden, ist ebenfalls ungültig. Die Tabelle enthält vollständige Rollenwerte und gewöhnliche Dimensionen separat.
Build-Time- oder Runtime-Token gezielt auswählen
Die dokumentierte token()-Notation wird von Wandas PostCSS-Konfiguration verarbeitet. Sie ist keine CSS-Funktion im Browser. Ein einfaches HTML-Projekt kann stattdessen das veröffentlichte tokens.css importieren und var() verwenden. Die funktionsfähige Komponente nutzt das veröffentlichte themes.css mit Standard-Custom-Properties und erfordert daher keinen verborgenen PostCSS-Build-Schritt.
Rollen für helle und dunkle Themes im Wonderflow Wanda-Designsystem
Die semantische Oberfläche gemeinsam umschalten
Wanda stellt Zuordnungen für helle und dunkle Themes bereit. Die Komponente ändert data-theme am Root-Element; das Theme-Stylesheet ersetzt gemeinsam die Rollen für Vordergrund, Oberfläche, Rahmen und Hervorhebung. Auswahl und gespeicherte Notizen bleiben unverändert, denn ein Theme-Wechsel ist ein Darstellungsstatus und setzt nicht den Forschungsstatus zurück.
Die CTA-Rolle der wichtigsten lokalen Aktion vorbehalten
Das rote CTA-Paar wird einmalig für die Überprüfung gespeicherter Notizen verwendet. Themen-Tags verwenden neutrale Hervorhebungsrollen, während Stimmungstags grüne, gelbe und rote Paare verwenden. Jeder Tag enthält zudem eine schriftliche Stimmungsangabe, sodass die Bedeutung auch bei unterschiedlicher Farbwahrnehmung erhalten bleibt. Die Komponente erfindet keine eigene Akzentpalette für jede Karte.
Feedback-Inhalte und Grenzen der Beleglage im Wonderflow Wanda-Designsystem
Beobachtung und Interpretation getrennt halten
Jede Karte enthält eine verfasste Beobachtung und eine ausklappbare Kontextnotiz. Der Kontext beschreibt, was das Beispiel veranschaulicht, und vermeidet ausdrücklich Aussagen zu Häufigkeit oder Schweregrad. Ein echtes Feedback-Tool sollte die Grenze zwischen Quelle und Analyse wahren, statt aus einem einzelnen Zitat einen unbelegten Trend abzuleiten.
Keine Belege durch Dekoration vortäuschen
Das Beispiel enthält keine erfundenen Kundenidentitäten, Sternebewertungen oder Konfidenzwerte des Modells. Fünf verfasste Notizen genügen, um Filterung, Offenlegung und gespeicherte Zustände zu veranschaulichen. In einem Produkt im Livebetrieb gehören Herkunft der Recherche und Zugriffsregeln in den Datenvertrag; eine ansprechende Zitatkarte kann diese Angaben nicht ersetzen.
Wonderflow Wanda Designsystem: Filterung und Notizbuchstatus
Themen- und Stimmungsfilter kombinieren
Die beiden nativen Auswahlfelder wenden einen UND-Filter an. Gibt es für eine Kombination keine passende Notiz, erscheint eine sichtbare Meldung mit einer Möglichkeit zum Zurücksetzen. Die Ergebnisanzahl nennt ihre Bezugsgröße: fünf verfasste Notizen. So entsteht nicht der Eindruck, sie stamme aus einem größeren Datensatz. All dies ist im vollständigen Quellcode zu sehen.
Gespeicherte Notizen unabhängig von der Sichtbarkeit halten
Wonderflow Wanda Designsystem: Karten, Offenlegung und responsives Layout
Mit Abständen Belege von Steuerelementen trennen
Auf großen Bildschirmen haben die einzelnen Notizkarten einen Radius von 16px und einen Innenabstand von 24px. Tags führen das Thema ein, das Zitat ist größer gesetzt und der ausklappbare Kontext steht vor der Speicheraktion. Neben den Notizen liegt das Notizbuch auf einer zurückhaltenderen Fläche. Dies sind eigenständige Kompositionsentscheidungen mit Werten von Wanda, keine Behauptung, es handle sich um eine native Forschungskarten-Komponente.
Die Lesereihenfolge auf Mobilgeräten beibehalten
Bei 768px wird das Notizbuch hinter die Beobachtungen verschoben und der Innenabstand der Karten auf 16px reduziert. Die Themen- und Stimmungsfilter werden zu Zeilen in voller Breite. Ausgeklappter Kontext bleibt im Dokumentfluss und überlagert oder verdeckt keine andere Notiz. Die Karten haben keine feste Höhe, sodass auch längere Zitate lesbar bleiben.
Wonderflow Wanda Designsystem – native React-Einrichtung und HTML-Abgrenzung
Die vollständige Wanda-Toolchain berücksichtigen
Für die offizielle Installation werden react-components, themes, symbols und tokens verwendet. @wonderflow/config stellt dabei die erforderliche PostCSS-Konfiguration für Komponente CSS bereit. Der Eintrag React importiert core.css und das themes-Paket. Nur react-components zu installieren und davon auszugehen, dass alle Theme-Rollen vorhanden sind, ergibt keine vollständige Integration. Die öffentliche Installationsseite weist außerdem auf die Tailwind-Kompatibilität von Versionen über 10.6 hin.
Dieses Beispiel verwenden, ohne native Komponenten zu behaupten
Die ausgeführte Vorschau verwendet Wanda 16.0.0 Theme CSS mit eigenständigem semantischem HTML. Die Komponenten React Button, Select oder Disclosure kommen darin nicht zum Einsatz. Diese Abgrenzung ist bewusst gewählt und klar erkennbar: Der vollständige Quellcode lässt sich mit einem statischen Server ausführen. Bei einer Migration auf natives React müssen hingegen die aktuellen Komponenten-APIs und die Build-Konfiguration geprüft werden.
Wonderflow Wanda Designsystem: vollständiger Quellcode und Agentenprüfung
Die tatsächliche Vorschau reproduzieren
Installieren Sie das festgelegte Theme-Paket, kopieren Sie die generierte Datei themes.css neben die bereitgestellten Dateien index.html und wanda.css und stellen Sie das Verzeichnis bereit. Der Quellcode enthält alle fünf Notizen, die Filterung, die Offenlegung, den gespeicherten Status und Feedback. Die Vorschau bindet dasselbe Stylesheet lokal ein, damit keine Laufzeit-Netzwerkverbindung erforderlich ist.
@wonderflow/themes 16.0.0 installieren und die generierte Datei CSS kopieren.
Die vollständigen Dateien index.html und wanda.css speichern.
Einen Filter ohne Treffer anwenden, zurücksetzen und eine Notiz speichern.
Das Theme wechseln und prüfen, ob das Notizbuch erhalten bleibt.
Fehler- und Übergangszustände prüfen
Bitten Sie den Agenten, den Nenner des Filters, die Wiederherstellung bei leeren Ergebnissen, den gespeicherten Status von Notizen und die Ungültigmachung von Prüfergebnissen beizubehalten. Prüfen Sie beide Darstellungen und eine lange, ausgeklappte Notiz. Die lokale Prüfung fasst nur ausgewählte Beispiele zusammen. Ohne separate Implementierung und Belegquelle darf sie nicht als KI-Analyse oder Kundenvalidierung bezeichnet werden.
token() nicht als Laufzeit-CSS behandeln.
Primitive HSL-Kanäle von vollständigen Theme-Farben getrennt halten.
Verfasste Beispiele klar von echten Recherchebelegen abgrenzen.
Eigenständiges semantisches HTML und der gesamte Anwendungsstatus. Verwendet das kopierte Wanda-Theme-Stylesheet.
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>
Die Theme-Werte stammen aus dem installierten Paket und nicht aus einer künstlich erzeugten Palette.
04
Wonderflow Wanda Designsystem-Agent einrichten
Ausgangspunkt für die Implementierung
Die lokale Vorschau bindet dasselbe veröffentlichte Theme CSS ein. Die Anwendung HTML benötigt weder PostCSS noch React.
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
Ein Prompt für dein Projekt
Agenten-Prompt
Erstellen Sie mit den Theme-Rollen von Wanda 16.0.0 ein Feedback-Notizbuch auf Grundlage des vollständigen eigenständigen Beispiels HTML. Behalten Sie die UND-Filterung, den expliziten Nenner von fünf Notizen, den ausgeklappten Kontext, die dauerhafte Speicherung und das Löschen veralteter Prüfergebnisse bei. Trennen Sie die Build-Time-Verwendung von token() von CSS-Variablen und stellen Sie verfasste Beobachtungen niemals als Kundenforschung dar.
05
Wonderflow Wanda Designsystem: Quellen und Umfang
Eine Anwendungsstudie OpenDesign mit Wanda themes und tokens 16.0.0. Die Benutzeroberfläche ist ein eigenständiges HTML und keine native Wanda-Laufzeitumgebung React. Alle Zitate sind verfasste Beispielinhalte und keine Kundenbelege.
