# Sistema di progettazione Wonderflow Wanda

## Anteprima dell’interfaccia del sistema di progettazione sistema di design Wonderflow Wanda

Filtra le osservazioni originali, esamina il contesto, salva le note e cambia il tema Wanda.

## Riferimento di progettazione del sistema di progettazione sistema di design Wonderflow Wanda

JSON chiaro/scuro di @wonderflow/themes 16.0.0 e JSON dei token web di @wonderflow/tokens 16.0.0, verificati sulla documentazione pubblica per sviluppatori.

### Ruoli del tema con valori chiari e scuri

| Nome / regola | Valore / configurazione | Utilizzo |
| --- | --- | --- |
| --global-foreground | light hsl(221 10% 30%) / dark hsl(220 16% 85%) | Ruolo del tema associato, utilizzato nell’esempio di feedback. |
| --global-background | light hsl(0 0% 100%) / dark hsl(0 0% 0%) | Ruolo del tema associato, utilizzato nell’esempio di feedback. |
| --global-interactive-text | light hsl(214 66% 44%) / dark hsl(206 72% 67%) | Ruolo del tema associato, utilizzato nell’esempio di feedback. |
| --cta-default | light hsl(0 100% 44%) / dark hsl(0 100% 44%) | Ruolo del tema associato, utilizzato nell’esempio di feedback. |
| --cta-dark | light hsl(0 100% 38%) / dark hsl(0 100% 38%) | Ruolo del tema associato, utilizzato nell’esempio di feedback. |
| --cta-foreground | light hsl(0 0% 100%) / dark hsl(0 0% 100%) | Ruolo del tema associato, utilizzato nell’esempio di feedback. |
| --dimmed-0 | light hsl(210 20% 98%) / dark hsl(225 11% 7%) | Ruolo del tema associato, utilizzato nell’esempio di feedback. |
| --dimmed-1 | light hsl(220 19% 91%) / dark hsl(218 11% 14%) | Ruolo del tema associato, utilizzato nell’esempio di feedback. |
| --dimmed-2 | light hsl(220 16% 85%) / dark hsl(219 13% 22%) | Ruolo del tema associato, utilizzato nell’esempio di feedback. |
| --highlight-green-background | light hsl(149 100% 91%) / dark hsl(166 100% 13%) | Ruolo del tema associato, utilizzato nell’esempio di feedback. |
| --highlight-green-foreground | light hsl(156 100% 23%) / dark hsl(145 76% 75%) | Ruolo del tema associato, utilizzato nell’esempio di feedback. |
| --highlight-red-background | light hsl(343 100% 96%) / dark hsl(350 100% 15%) | Ruolo del tema associato, utilizzato nell’esempio di feedback. |
| --highlight-red-foreground | light hsl(351 92% 37%) / dark hsl(351 100% 81%) | Ruolo del tema associato, utilizzato nell’esempio di feedback. |
| --highlight-yellow-background | light hsl(60 100% 89%) / dark hsl(22 100% 19%) | Ruolo del tema associato, utilizzato nell’esempio di feedback. |
| --highlight-yellow-foreground | light hsl(25 100% 34%) / dark hsl(38 100% 77%) | Ruolo del tema associato, utilizzato nell’esempio di feedback. |
### Primitivi di spaziatura

| Nome / regola | Valore / configurazione | Utilizzo |
| --- | --- | --- |
| --space-4 | 0.250rem | Usa token() in fase di compilazione oppure importa il file delle proprietà personalizzate CSS. |
| --space-8 | 0.500rem | Usa token() in fase di compilazione oppure importa il file delle proprietà personalizzate CSS. |
| --space-16 | 1.000rem | Usa token() in fase di compilazione oppure importa il file delle proprietà personalizzate CSS. |
| --space-24 | 1.500rem | Usa token() in fase di compilazione oppure importa il file delle proprietà personalizzate CSS. |
| --space-32 | 2.000rem | Usa token() in fase di compilazione oppure importa il file delle proprietà personalizzate CSS. |
| --space-48 | 3.000rem | Usa token() in fase di compilazione oppure importa il file delle proprietà personalizzate CSS. |
### Primitivi dei raggi

| Nome / regola | Valore / configurazione | Utilizzo |
| --- | --- | --- |
| --radius-4 | 0.250rem | Usa token() in fase di compilazione oppure importa il file delle proprietà personalizzate CSS. |
| --radius-8 | 0.500rem | Usa token() in fase di compilazione oppure importa il file delle proprietà personalizzate CSS. |
| --radius-16 | 1.000rem | Usa token() in fase di compilazione oppure importa il file delle proprietà personalizzate CSS. |
| --radius-24 | 1.500rem | Usa token() in fase di compilazione oppure importa il file delle proprietà personalizzate CSS. |
### Primitivi dei breakpoint

| Nome / regola | Valore / configurazione | Utilizzo |
| --- | --- | --- |
| --breakpoint-extra-small | 30em | Usa token() in fase di compilazione oppure importa il file delle proprietà personalizzate CSS. |
| --breakpoint-small | 48em | Usa token() in fase di compilazione oppure importa il file delle proprietà personalizzate CSS. |
| --breakpoint-medium | 60em | Usa token() in fase di compilazione oppure importa il file delle proprietà personalizzate CSS. |
| --breakpoint-large | 80em | Usa token() in fase di compilazione oppure importa il file delle proprietà personalizzate CSS. |
### Primitivi delle durate

| Nome / regola | Valore / configurazione | Utilizzo |
| --- | --- | --- |
| --duration-100 | 0.10s | Usa token() in fase di compilazione oppure importa il file delle proprietà personalizzate CSS. |
| --duration-200 | 0.20s | Usa token() in fase di compilazione oppure importa il file delle proprietà personalizzate CSS. |
| --duration-250 | 0.25s | Usa token() in fase di compilazione oppure importa il file delle proprietà personalizzate CSS. |
| --duration-300 | 0.30s | Usa token() in fase di compilazione oppure importa il file delle proprietà personalizzate CSS. |
## Guida completa al sistema di progettazione sistema di design Wonderflow Wanda

Una guida pratica per scegliere, applicare e valutare questo sistema in un’interfaccia reale.

Indicazioni complete, un punto di partenza per l’implementazione e link alle fonti.

## Primitivi, temi e utilizzo di CSS nel sistema di progettazione sistema di design Wonderflow Wanda

### Comprendi i due livelli del colore

> I token di colore primitivi di Wanda sono canali HSL, come 214 66% 44%, senza il wrapper hsl(). I ruoli del tema, come --global-interactive-text, si risolvono in un colore CSS completo. Racchiudere nuovamente un valore completo del tema non è valido; non è valido nemmeno omettere hsl() attorno ai canali primitivi. La tabella riporta separatamente i valori completi dei ruoli e le dimensioni standard.

### Scegli consapevolmente tra token in fase di compilazione o di esecuzione

La notazione documentata token() viene elaborata dalla configurazione PostCSS di Wanda. Non è una funzione CSS del browser. Un progetto HTML semplice può invece importare il file tokens.css pubblicato e usare var(). L’esempio funzionante usa themes.css pubblicato con le proprietà personalizzate standard, quindi non richiede una fase di compilazione PostCSS nascosta.

## Ruoli del tema chiaro e scuro del sistema di progettazione sistema di design Wonderflow Wanda

### Cambia insieme le superfici semantiche

Wanda mette a disposizione mappature per i temi chiari e scuri. L’esempio modifica data-theme sull’elemento radice e lascia che il foglio di stile del tema sostituisca insieme i ruoli di testo, superficie, bordo ed evidenziazione. La selezione e le note salvate restano invariate, perché cambiare tema modifica la presentazione, non azzera lo stato della ricerca.

### Riserva il ruolo CTA all’azione principale locale

La coppia CTA rossa viene usata una sola volta per consultare le note salvate. Le etichette degli argomenti usano ruoli di evidenziazione neutri, mentre quelle del sentimento usano coppie verde, gialla e rossa. Ogni etichetta riporta anche il sentimento per iscritto, così una differenza nella percezione dei colori non ne cancella il significato. L’esempio non inventa una tavolozza di accenti distinta per ogni scheda.

## Contenuti del feedback e limiti delle prove nel sistema di progettazione sistema di design Wonderflow Wanda

### Tieni separate l’osservazione e l’interpretazione

Ogni scheda contiene un’osservazione originale e una nota di contesto espandibile. Il contesto descrive cosa illustra l’esempio ed evita esplicitamente affermazioni sulla frequenza o sulla gravità. Un vero strumento di feedback dovrebbe preservare la distinzione tra fonte e analisi, anziché trasformare una singola citazione in una tendenza non comprovata.

### Non creare prove artificiali con elementi decorativi

L’esempio non contiene identità di clienti inventate, valutazioni a stelle o punteggi di confidenza del modello. Cinque note originali bastano a dimostrare il filtraggio, i contenuti espandibili e lo stato dei salvataggi. In un prodotto reale, la provenienza della ricerca e le regole di accesso fanno parte del contratto dei dati; una scheda con una citazione accattivante non può sostituirle.

## Filtri e stato del taccuino nel sistema di progettazione sistema di design Wonderflow Wanda

### Combina i criteri per argomento e sentimento

I due menu a discesa nativi applicano un filtro AND. Se una combinazione non restituisce note corrispondenti, viene mostrato un messaggio di recupero e un’azione per azzerare i filtri. Il conteggio dei risultati specifica il denominatore, cinque note originali, invece di suggerire che il dato provenga da un insieme più ampio. Tutto questo è visibile nel codice sorgente completo.

### Mantieni le note salvate indipendenti dalla loro visibilità

Salvare aggiunge una nota a un Set locale. I filtri possono nascondere la scheda senza rimuoverla dal taccuino. Se si modifica una nota salvata, il vecchio risultato della revisione viene cancellato, così la conferma resta allineata alla selezione corrente. Il taccuino mostra il testo effettivo delle note, rendendone ispezionabile il contenuto invece di visualizzare solo il conteggio su un badge.

## Schede, contenuti espandibili e layout adattivo nel sistema di progettazione sistema di design Wonderflow Wanda

### Usa la spaziatura per separare le prove dai controlli

Su uno schermo ampio, ogni scheda delle note usa un raggio di 16px e una spaziatura interna di 24px. Le etichette introducono l’argomento, la citazione usa un testo più grande e il contesto espandibile precede l’azione di salvataggio. Il taccuino occupa una superficie più discreta accanto alle note. Sono scelte compositive originali espresse con i valori di Wanda, non l’affermazione che esista un componente nativo per le schede di ricerca.

### Mantieni intatta la sequenza di lettura su dispositivi mobili

A 768px il taccuino si sposta dopo le osservazioni e la spaziatura interna delle schede si riduce a 16px. I controlli per argomento e sentimento diventano righe a larghezza piena. Il contesto espanso resta nel flusso del documento: non si sovrappone né nasconde altre note. Le schede non hanno un’altezza fissa, quindi anche le citazioni più lunghe restano leggibili.

## Configurazione nativa di React e limiti di HTML nel sistema di progettazione sistema di design Wonderflow Wanda

### Considera l’intera toolchain di Wanda

L’installazione ufficiale usa react-components, themes, symbols e tokens, con @wonderflow/config che fornisce la configurazione PostCSS necessaria per i componenti CSS. L’entry point React importa core.css e il pacchetto themes. Installare solo react-components e presumere che siano disponibili tutti i ruoli del tema è un’integrazione incompleta. La pagina pubblica sull’installazione segnala inoltre problemi di compatibilità con Tailwind per le versioni successive alla 10.6.

### Usa questo esempio senza dichiarare che impiega componenti nativi

L’anteprima eseguita usa il tema Wanda 16.0.0 CSS con HTML semantico originale. Non esegue i componenti Button, Select o di visualizzazione dei contenuti di React. Questo limite è intenzionale e visibile: il codice sorgente completo può essere eseguito con un server statico, mentre una migrazione a React nativo deve verificare le API dei componenti e la configurazione di compilazione attuali.

## Codice sorgente completo e revisione dell’agente per il sistema di progettazione sistema di design Wonderflow Wanda

### Riproduci l’anteprima effettiva

Installa il pacchetto del tema con versione bloccata, copia il file themes.css generato accanto ai file index.html e wanda.css forniti e avvia un server nella directory. Il codice sorgente include tutte e cinque le note, i filtri, i contenuti espandibili, lo stato dei salvataggi e il feedback. L’anteprima include lo stesso foglio di stile in locale per evitare dipendenze di rete in fase di esecuzione.

1. Installa @wonderflow/themes 16.0.0 e copia il file CSS generato.

2. Salva i file completi index.html e wanda.css.

3. Filtra per ottenere un risultato vuoto, azzera i filtri e salva una nota.

4. Cambia tema e verifica che il taccuino resti intatto.

### Esamina gli stati di errore e di transizione

Chiedi all’agente di mantenere il denominatore dei filtri, il recupero dai risultati vuoti, la persistenza delle note salvate e l’invalidazione della revisione. Controlla entrambe le modalità di visualizzazione e una nota lunga espansa. La revisione locale riassume solo i campioni selezionati: non va presentata come analisi dell’IA o convalida da parte dei clienti senza un’implementazione distinta e una fonte di prove.

- Non trattare token() come CSS in fase di esecuzione.

- Tieni distinti i canali HSL primitivi dai colori completi del tema.

- Tieni distinti i campioni originali dalle prove di ricerca reali.

## Esempi di componenti del sistema di progettazione sistema di design Wonderflow Wanda

### index.html — area di lavoro completa per il feedback

HTML semantico originale e tutto lo stato dell’applicazione. Usa il foglio di stile del tema Wanda copiato.

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

Riferimento del codice

- Salva come index.html accanto a wanda.css e wanda-theme.css.

### wanda.css — composizione con ruoli di tema reali

Le schede adattive e il layout del taccuino usano le proprietà personalizzate pubblicate.

```
*{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}}
```

Riferimento del codice

- I valori del tema provengono dal pacchetto installato, non da una tavolozza sintetica.

## Configurazione dell’agente del sistema di progettazione sistema di design Wonderflow Wanda

### Punto di partenza per l’implementazione

L’anteprima locale include lo stesso CSS del tema pubblicato. L’applicazione HTML non richiede PostCSS né 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 per il tuo progetto

```
Crea un taccuino di feedback con i ruoli del tema Wanda 16.0.0 usando l’esempio completo con HTML originale. Mantieni il filtraggio AND, il denominatore esplicito di cinque note, il contesto espanso, la persistenza dello stato dei salvataggi e la cancellazione delle revisioni non più valide. Tieni separato l’uso di token() in fase di compilazione dalle variabili CSS e non presentare mai le osservazioni originali come ricerca sui clienti.
```

## Fonti e ambito del sistema di progettazione sistema di design Wonderflow Wanda

Uno studio applicativo OpenDesign che usa temi e token Wanda 16.0.0. L’interfaccia è un HTML originale, non il runtime React nativo di Wanda. Tutte le citazioni sono contenuti d’esempio scritti appositamente, non testimonianze di clienti né risultati di ricerca.

- Token di progettazione Formato dei canali HSL, token(), accesso a CSS e JavaScript.

- Installazione Insieme di pacchetti nativi, configurazione PostCSS e note sulla compatibilità.

- Uso dei temi Chiavi del tema, data-theme e responsabilità di chi li utilizza.

- Panoramica di Wanda Ambito del sistema e accesso alla documentazione pubblica.

## Risorse correlate al sistema di progettazione sistema di design Wonderflow Wanda

### Workday Canvas

Crea un piano di apprendimento locale con FormField composto, TextInput controllato e PrimaryButton di Canvas Kit, distinguendo le fonti attuali dei token semantici dai vecchi esempi di migrazione a space.x4.

### Zendesk Garden

Una guida Garden per l’assistenza, con alias reali del tema, scale tipografiche e dei raggi, un compositore di risposte completo, bozze locali gestite in base alla visibilità e recupero dei campi.

### Adeo Mozaic

Crea una composizione pratica per il controllo delle quantità usando l’unità magica da 16px di Mozaic, controlli coordinati da 48px, import SCSS reali e classi BEM. Il pianificatore di scaffali rende visibili i limiti, gli errori tipizzati e un riepilogo locale dei materiali.


- [Riferimento per l’implementazione](https://design.wonderflow.ai/get-started/documentation/develop/design-tokens)
- [Fonte](https://design.wonderflow.ai/get-started/documentation/develop/using-themes)
- [Fonte](https://design.wonderflow.ai/get-started/documentation/develop/design-tokens)
- [Riferimento del codice](https://design.wonderflow.ai/get-started/documentation/develop/design-tokens)
- [Token di progettazione Formato dei canali HSL, token(), accesso a CSS e JavaScript.](https://design.wonderflow.ai/get-started/documentation/develop/design-tokens)
- [Installazione Insieme di pacchetti nativi, configurazione PostCSS e note sulla compatibilità.](https://design.wonderflow.ai/get-started/documentation/develop/installation)
- [Uso dei temi Chiavi del tema, data-theme e responsabilità di chi li utilizza.](https://design.wonderflow.ai/get-started/documentation/develop/using-themes)
- [Panoramica di Wanda Ambito del sistema e accesso alla documentazione pubblica.](https://design.wonderflow.ai/)