# Système de conception Wonderflow Wanda

## Aperçu de l’interface du système de conception Wonderflow Wanda

Filtrez les observations rédigées, examinez leur contexte, enregistrez des notes et changez de thème Wanda.

## 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.

### Rôles de thème avec valeurs claires et sombres

| Nom / règle | Valeur / configuration | Utilisation |
| --- | --- | --- |
| --global-foreground | light hsl(221 10% 30%) / dark hsl(220 16% 85%) | Rôle de thème associé utilisé par l’exemple de retours. |
| --global-background | light hsl(0 0% 100%) / dark hsl(0 0% 0%) | Rôle de thème associé utilisé par l’exemple de retours. |
| --global-interactive-text | light hsl(214 66% 44%) / dark hsl(206 72% 67%) | Rôle de thème associé utilisé par l’exemple de retours. |
| --cta-default | light hsl(0 100% 44%) / dark hsl(0 100% 44%) | Rôle de thème associé utilisé par l’exemple de retours. |
| --cta-dark | light hsl(0 100% 38%) / dark hsl(0 100% 38%) | Rôle de thème associé utilisé par l’exemple de retours. |
| --cta-foreground | light hsl(0 0% 100%) / dark hsl(0 0% 100%) | Rôle de thème associé utilisé par l’exemple de retours. |
| --dimmed-0 | light hsl(210 20% 98%) / dark hsl(225 11% 7%) | Rôle de thème associé utilisé par l’exemple de retours. |
| --dimmed-1 | light hsl(220 19% 91%) / dark hsl(218 11% 14%) | Rôle de thème associé utilisé par l’exemple de retours. |
| --dimmed-2 | light hsl(220 16% 85%) / dark hsl(219 13% 22%) | Rôle de thème associé utilisé par l’exemple de retours. |
| --highlight-green-background | light hsl(149 100% 91%) / dark hsl(166 100% 13%) | Rôle de thème associé utilisé par l’exemple de retours. |
| --highlight-green-foreground | light hsl(156 100% 23%) / dark hsl(145 76% 75%) | Rôle de thème associé utilisé par l’exemple de retours. |
| --highlight-red-background | light hsl(343 100% 96%) / dark hsl(350 100% 15%) | Rôle de thème associé utilisé par l’exemple de retours. |
| --highlight-red-foreground | light hsl(351 92% 37%) / dark hsl(351 100% 81%) | Rôle de thème associé utilisé par l’exemple de retours. |
| --highlight-yellow-background | light hsl(60 100% 89%) / dark hsl(22 100% 19%) | Rôle de thème associé utilisé par l’exemple de retours. |
| --highlight-yellow-foreground | light hsl(25 100% 34%) / dark hsl(38 100% 77%) | Rôle de thème associé utilisé par l’exemple de retours. |
### Primitives d’espacement

| Nom / règle | Valeur / configuration | Utilisation |
| --- | --- | --- |
| --space-4 | 0.250rem | Utilisez token() à la compilation ou importez le fichier de propriétés personnalisées CSS. |
| --space-8 | 0.500rem | Utilisez token() à la compilation ou importez le fichier de propriétés personnalisées CSS. |
| --space-16 | 1.000rem | Utilisez token() à la compilation ou importez le fichier de propriétés personnalisées CSS. |
| --space-24 | 1.500rem | Utilisez token() à la compilation ou importez le fichier de propriétés personnalisées CSS. |
| --space-32 | 2.000rem | Utilisez token() à la compilation ou importez le fichier de propriétés personnalisées CSS. |
| --space-48 | 3.000rem | Utilisez token() à la compilation ou importez le fichier de propriétés personnalisées CSS. |
### Primitives d’arrondi

| Nom / règle | Valeur / configuration | Utilisation |
| --- | --- | --- |
| --radius-4 | 0.250rem | Utilisez token() à la compilation ou importez le fichier de propriétés personnalisées CSS. |
| --radius-8 | 0.500rem | Utilisez token() à la compilation ou importez le fichier de propriétés personnalisées CSS. |
| --radius-16 | 1.000rem | Utilisez token() à la compilation ou importez le fichier de propriétés personnalisées CSS. |
| --radius-24 | 1.500rem | Utilisez token() à la compilation ou importez le fichier de propriétés personnalisées CSS. |
### Primitives de points de rupture

| Nom / règle | Valeur / configuration | Utilisation |
| --- | --- | --- |
| --breakpoint-extra-small | 30em | Utilisez token() à la compilation ou importez le fichier de propriétés personnalisées CSS. |
| --breakpoint-small | 48em | Utilisez token() à la compilation ou importez le fichier de propriétés personnalisées CSS. |
| --breakpoint-medium | 60em | Utilisez token() à la compilation ou importez le fichier de propriétés personnalisées CSS. |
| --breakpoint-large | 80em | Utilisez token() à la compilation ou importez le fichier de propriétés personnalisées CSS. |
### Primitives de durée

| Nom / règle | Valeur / configuration | Utilisation |
| --- | --- | --- |
| --duration-100 | 0.10s | Utilisez token() à la compilation ou importez le fichier de propriétés personnalisées CSS. |
| --duration-200 | 0.20s | Utilisez token() à la compilation ou importez le fichier de propriétés personnalisées CSS. |
| --duration-250 | 0.25s | Utilisez token() à la compilation ou importez le fichier de propriétés personnalisées CSS. |
| --duration-300 | 0.30s | Utilisez token() à la compilation ou importez le fichier de propriétés personnalisées CSS. |
## Guide complet du système de conception Wonderflow Wanda

Un guide pratique pour choisir, appliquer et évaluer ce système dans une interface réelle.

Des conseils complets, un point de départ pour la mise en œuvre et des liens vers les sources.

## 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é

L’enregistrement ajoute une note à un Set local. Le filtrage peut masquer sa carte sans la retirer du carnet. Lorsque l’état d’une note enregistrée est modifié, tout ancien résultat de révision est effacé afin que la confirmation corresponde à la sélection actuelle. Le carnet affiche le texte réel des notes : son contenu peut ainsi être consulté, au lieu d’être résumé par un simple badge indiquant leur nombre.

## 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.

1. Installez @wonderflow/themes 16.0.0 et copiez le fichier CSS généré.

2. Enregistrez les fichiers index.html et wanda.css complets.

3. Appliquez un filtre sans résultat, réinitialisez-le et enregistrez une note.

4. 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.

```
<!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>
```

Référence du code

- Enregistrez les fichiers sous les noms index.html et wanda.css, côte à côte avec wanda-theme.css.

### wanda.css — composition avec de véritables rôles de thème

Les cartes adaptatives et la mise en page du carnet utilisent les propriétés personnalisées publiées.

```
*{box-sizing:border-box}body{margin:0;background:var(--global-background);color:var(--global-foreground);font:16px/1.5 system-ui,sans-serif}main{padding:32px}header{display:flex;align-items:start;justify-content:space-between;gap:24px;border-bottom:1px solid var(--dimmed-1);padding-bottom:24px}h1{font-size:32px;line-height:1.25;margin:8px 0 16px}h2{font-size:20px;margin:0}h3{font-size:18px}.eyebrow,footer{font-size:12px}p{margin:8px 0 16px}.filters{display:flex;flex-wrap:wrap;gap:16px;align-items:center;margin:24px 0}label{display:flex;gap:8px;align-items:center}button,select{background:var(--global-background);color:var(--global-foreground);font:inherit;padding:8px 16px;min-height:44px;border:1px solid var(--dimmed-2);border-radius:8px}button{cursor:pointer}.workspace{display:grid;grid-template-columns:1.7fr 1fr;gap:32px}.section-heading{display:flex;justify-content:space-between;gap:16px;margin-bottom:16px}#count{font-size:14px}article{padding:24px;border:1px solid var(--dimmed-1);border-radius:16px;margin-bottom:16px}.tags{display:flex;gap:8px;font-size:12px}.tags span{padding:4px 8px;background:var(--highlight-gray-background);color:var(--highlight-gray-foreground);border-radius:4px}.tags .positive{background:var(--highlight-green-background);color:var(--highlight-green-foreground)}.tags .negative{background:var(--highlight-red-background);color:var(--highlight-red-foreground)}.tags .mixed{background:var(--highlight-yellow-background);color:var(--highlight-yellow-foreground)}blockquote{margin:16px 0;font-size:20px;line-height:1.4}details{font-size:14px;margin:16px 0}summary{cursor:pointer;color:var(--global-interactive-text)}.save{font-size:14px}.save[aria-pressed=true]{border-color:var(--global-interactive-text);color:var(--global-interactive-text)}aside{background:var(--dimmed-0);padding:24px;border-radius:16px;align-self:start}aside p,aside li{font-size:14px}aside ul{padding-left:20px}aside li{margin:16px 0}.cta{background:var(--cta-default);color:var(--cta-foreground);border-color:var(--cta-default)}.cta:hover{background:var(--cta-dark)}button:focus-visible,select:focus-visible,summary:focus-visible{outline:3px solid var(--global-interactive-text);outline-offset:3px}footer{border-top:1px solid var(--dimmed-1);padding-top:16px;margin-top:32px}#empty{padding:24px;background:var(--dimmed-0);border-radius:16px}[hidden]{display:none!important}@media(max-width:767px){main{padding:16px}.workspace{grid-template-columns:1fr;gap:24px}header{display:block}header button{margin-top:8px}.filters label{width:100%;justify-content:space-between}.filters select{flex:1}article{padding:16px}h1{font-size:28px}.section-heading{align-items:center}}
```

Référence du code

- Les valeurs du thème proviennent du package installé, et non d’une palette synthétique.

## 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.

```
npm install @wonderflow/themes@16.0.0
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

```
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.
```

## 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.

- Jetons de design Format des canaux HSL, token(), accès à CSS et JavaScript.

- Installation Ensemble de packages natifs, configuration PostCSS et notes de compatibilité.

- Utilisation des thèmes Clés de thème, data-theme et responsabilités des consommateurs.

- Présentation de Wanda Périmètre du système et accès à la documentation publique.

## Ressources connexes au système de design Wonderflow Wanda

### Workday Canvas

Élaborez un parcours d’apprentissage local avec le composant composé FormField de Canvas Kit, TextInput contrôlé et PrimaryButton, en distinguant les sources actuelles des jetons sémantiques des anciens exemples de migration space.x4.

### Zendesk Garden

Guide Garden pour le support, avec de véritables alias de thème, des échelles typographiques et de rayons, un composeur de réponse complet, des brouillons locaux tenant compte de la visibilité et la récupération des champs.

### Adeo Mozaic

Créez une interface pratique de contrôle des quantités avec l’unité magique de 16 px de Mozaic, des commandes assorties de 48 px, de véritables imports SCSS et des classes BEM. Le planificateur de rayonnage permet d’observer les limites, les erreurs typées et un récapitulatif local des matériaux.


- [Référence de mise en œuvre](https://design.wonderflow.ai/get-started/documentation/develop/design-tokens)
- [Source](https://design.wonderflow.ai/get-started/documentation/develop/using-themes)
- [Source](https://design.wonderflow.ai/get-started/documentation/develop/design-tokens)
- [Référence du code](https://design.wonderflow.ai/get-started/documentation/develop/design-tokens)
- [Jetons de design Format des canaux HSL, token(), accès à CSS et JavaScript.](https://design.wonderflow.ai/get-started/documentation/develop/design-tokens)
- [Installation Ensemble de packages natifs, configuration PostCSS et notes de compatibilité.](https://design.wonderflow.ai/get-started/documentation/develop/installation)
- [Utilisation des thèmes Clés de thème, data-theme et responsabilités des consommateurs.](https://design.wonderflow.ai/get-started/documentation/develop/using-themes)
- [Présentation de Wanda Périmètre du système et accès à la documentation publique.](https://design.wonderflow.ai/)