Utilisez les rôles de thème et la syntaxe des jetons réels de Wanda dans un espace de travail complet dédié à la consultation des retours, avec filtres par sujet, contexte justificatif dépliable et carnet local persistant.
HTML original avec le thème natif Wanda 16.0.0 CSS ; aucun runtime de composants React. · Référence de mise en œuvre
02
Référence de conception du système système de design Wonderflow Wanda
Fichiers JSON clair/sombre de @wonderflow/themes 16.0.0 et fichiers JSON des jetons Web de @wonderflow/tokens 16.0.0, vérifiés à partir de la documentation publique destinée aux développeurs.
Primitives, thèmes et utilisation de CSS du système de conception Wonderflow Wanda
Comprendre les deux niveaux de couleur
Les jetons de couleur primitifs de Wanda sont des canaux HSL, tels que 214 66% 44%, sans l’enveloppe hsl(). Les rôles de thème, comme --global-interactive-text, produisent une couleur CSS complète. Envelopper de nouveau une valeur de thème complète serait invalide ; omettre hsl() autour des canaux primitifs l’est également. Le tableau distingue les valeurs complètes des rôles des dimensions ordinaires.
Choisir délibérément entre les jetons de compilation et d’exécution
La notation documentée token() est traitée par la configuration PostCSS de Wanda. Ce n’est pas une fonction CSS du navigateur. Un projet HTML classique peut plutôt importer tokens.css publié et utiliser var(). L’exemple fonctionnel utilise themes.css publié et des propriétés personnalisées standard ; aucune étape de compilation PostCSS cachée n’est donc nécessaire.
Rôles des thèmes clair et sombre du système de design Wonderflow Wanda
Changer ensemble les surfaces sémantiques
Wanda propose des correspondances pour les thèmes clair et sombre. L’exemple modifie data-theme à la racine et laisse la feuille de style du thème remplacer ensemble les rôles de premier plan, de surface, de bordure et de mise en évidence. La sélection et les notes enregistrées restent inchangées, car le changement de thème relève de la présentation et ne réinitialise pas l’état de recherche.
Réserver le rôle CTA à l’action locale principale
La paire rouge du CTA n’est utilisée qu’une seule fois, pour consulter les notes enregistrées. Les étiquettes de sujet utilisent des rôles de mise en évidence neutres, tandis que celles de sentiment utilisent des paires vertes, jaunes et rouges. Chaque étiquette comporte aussi une mention écrite du sentiment : une différence de perception des couleurs n’en efface donc pas le sens. L’exemple ne crée pas de palette d’accentuation distincte pour chaque carte.
Contenu des retours et limites des preuves du système de design Wonderflow Wanda
Distinguer l’observation de l’interprétation
Chaque carte contient une observation rédigée et une note de contexte dépliable. Cette note explique ce qu’illustre l’exemple et évite explicitement toute affirmation sur la fréquence ou la gravité. Un véritable outil de retours doit préserver la distinction entre la source et l’analyse, plutôt que de présenter une citation isolée comme une tendance étayée.
Ne pas fabriquer de preuves avec des éléments décoratifs
L’exemple ne comporte ni identités de clients fictives, ni notes en étoiles, ni scores de confiance d’un modèle. Cinq notes rédigées suffisent à illustrer le filtrage, l’affichage du contexte et l’état des éléments enregistrés. Dans un produit en service, la provenance de la recherche et les règles d’accès doivent figurer dans le contrat de données ; une carte de citation attrayante ne peut pas les fournir.
Filtrage et état du carnet du système de design Wonderflow Wanda
Combiner les critères de sujet et de sentiment
Les deux menus select natifs appliquent un filtre ET. Si aucune note ne correspond à la combinaison, un message de récupération et une action de réinitialisation s’affichent. Le nombre de résultats précise son dénominateur — les cinq notes rédigées — au lieu de laisser croire qu’il provient d’un jeu de données plus vaste. Tout cela est visible dans le code source complet.
Ne pas lier les notes enregistrées à leur visibilité
Cartes, affichage du contexte et mise en page adaptative du système de design Wonderflow Wanda
Utiliser l’espacement pour distinguer les preuves des commandes
Sur grand écran, chaque carte de note présente un rayon de 16px et un espacement intérieur de 24px. Les étiquettes introduisent le sujet, la citation est affichée dans un corps plus grand et le contexte dépliable précède l’action d’enregistrement. Le carnet occupe une surface plus discrète à côté des notes. Il s’agit de choix de composition originaux exprimés avec les valeurs de Wanda, et non d’une prétendue carte de recherche native.
Préserver l’ordre de lecture sur mobile
À 768px, le carnet passe après les observations et le remplissage des cartes est réduit à 16px. Les commandes de sujet et de sentiment occupent chacune une ligne sur toute la largeur. Le contexte déplié reste dans le flux du document ; il ne recouvre ni ne masque les autres notes. Les cartes n’ont pas de hauteur fixe, ce qui garantit la lisibilité des citations plus longues.
Configuration native du système de design Wonderflow Wanda et limites de React et HTML
Prendre en compte toute la chaîne d’outils Wanda
L’installation officielle utilise react-components, themes, symbols et tokens ; @wonderflow/config fournit la configuration PostCSS requise pour les composants CSS. Le point d’entrée React importe core.css et le package themes. Installer uniquement react-components en supposant que tous les rôles de thème sont disponibles constitue une intégration incomplète. La page d’installation publique signale également des problèmes de compatibilité avec Tailwind pour les versions supérieures à 10.6.
Utiliser cet exemple sans prétendre qu’il s’agit de composants natifs
L’aperçu exécuté utilise le thème CSS de Wanda 16.0.0 et des HTML sémantiques originales. Il n’exécute pas les composants Button, Select ou de divulgation de React. Cette limite est délibérée et visible : le code source complet peut être exécuté avec un serveur statique, tandis qu’une migration vers React natif doit vérifier les API actuelles des composants et la configuration de compilation.
Code source complet et révision par agent IA du système de design Wonderflow Wanda
Reproduire l’aperçu réel
Installez le package de thème avec sa version fixe, copiez themes.css généré à côté des fichiers index.html et wanda.css fournis, puis servez le répertoire. Le code source comprend les cinq notes, le filtrage, l’affichage du contexte, l’état des éléments enregistrés et les retours. L’aperçu intègre la même feuille de style localement afin d’éviter toute dépendance réseau à l’exécution.
Installez @wonderflow/themes 16.0.0 et copiez le fichier CSS généré.
Enregistrez les fichiers index.html et wanda.css complets.
Appliquez un filtre sans résultat, réinitialisez-le et enregistrez une note.
Changez de thème et vérifiez que le carnet reste intact.
Vérifier les états d’échec et de transition
Demandez à l’agent de préserver le dénominateur du filtrage, la récupération en cas de résultat vide, la persistance des notes enregistrées et l’invalidation de la révision. Vérifiez les deux thèmes ainsi qu’une note dont le contexte déplié est long. La révision locale résume uniquement les exemples sélectionnés ; elle ne doit pas être présentée comme une analyse par IA ou une validation client sans mise en œuvre distincte et source de preuves dédiée.
Ne pas traiter token() comme du CSS à l’exécution.
Distinguer les canaux HSL primitifs des couleurs de thème complètes.
Distinguer les exemples rédigés des preuves issues de recherches réelles.
Exemples de composants du système de design Wonderflow Wanda
index.html — espace de travail complet pour les retours
HTML sémantique originale et état complet de l’application. Utilise la feuille de style de thème Wanda copiée.
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>
Les valeurs du thème proviennent du package installé, et non d’une palette synthétique.
04
Configuration de l’agent IA du système de design Wonderflow Wanda
Point de départ de l’implémentation
L’aperçu local regroupe le même thème publié CSS. L’application HTML n’a besoin ni de PostCSS ni de 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
Un prompt pour votre projet
Prompt pour l’agent IA
Créez un carnet de retours avec les rôles de thème Wanda 16.0.0 à partir de l’exemple complet d’origine HTML. Préservez le filtrage par ET, un dénominateur explicite de cinq notes, le contexte développé, la persistance de l’état enregistré et l’effacement des révisions obsolètes. Distinguez l’utilisation de token() à la compilation des variables CSS, et ne présentez jamais les observations rédigées comme une étude auprès de clients.
05
Sources et périmètre du système de design Wonderflow Wanda
Étude d’une application OpenDesign utilisant les thèmes et les jetons Wanda 16.0.0. L’interface est une création originale HTML, et non l’environnement d’exécution natif de Wanda React. Toutes les citations sont des exemples rédigés, et non des témoignages de clients.
