Use os papéis de tema e a sintaxe de tokens reais do Wanda em um espaço completo para ler feedback, com filtros por tópico, contexto expansível de evidências e um caderno local persistente.
HTML original com o tema nativo Wanda 16.0.0 CSS; sem runtime de componentes React. · Referência de implementação
02
Referência de design do sistema sistema de design Wonderflow Wanda
@wonderflow/themes 16.0.0 em JSON para temas claro/escuro e @wonderflow/tokens 16.0.0 em JSON para tokens web, verificados com base na documentação pública para desenvolvedores.
Primitivos, temas e uso de CSS no sistema de design Wonderflow Wanda
Entenda os dois níveis de cor
Os tokens de cor primitivos do Wanda são canais HSL, como 214 66% 44%, sem o invólucro hsl(). As funções de tema, como --global-interactive-text, são resolvidas em uma cor CSS completa. Envolver novamente um valor completo de tema o tornaria inválido; omitir hsl() nos canais primitivos também é inválido. A tabela registra separadamente os valores completos das funções e as dimensões comuns.
Escolha intencionalmente entre tokens de compilação e de runtime
A notação documentada token() é processada pela configuração PostCSS do Wanda. Ela não é uma função CSS do navegador. Um projeto HTML simples pode, em vez disso, importar o tokens.css publicado e usar var(). O exemplo funcional usa o themes.css publicado com propriedades personalizadas padrão; por isso, não exige uma etapa de compilação PostCSS oculta.
Funções dos temas claro e escuro do sistema de design Wonderflow Wanda
Alterne a superfície semântica em conjunto
Wanda oferece mapeamentos para temas claro e escuro. O exemplo altera data-theme no elemento raiz e permite que a folha de estilos do tema substitua, em conjunto, as funções de primeiro plano, superfície, borda e destaque. A seleção e as notas salvas permanecem inalteradas, pois a troca de tema é um estado de apresentação, não uma redefinição do estado da pesquisa.
Reserve a função de CTA para a principal ação local
O par de CTA vermelho é usado uma vez, para revisar as notas salvas. As tags de tópico usam funções neutras de destaque, enquanto as tags de sentimento usam pares verde, amarelo e vermelho. Cada tag também apresenta o sentimento por escrito, para que diferenças na percepção das cores não eliminem o significado. O exemplo não inventa uma paleta de destaque separada para cada cartão.
Limites de conteúdo e evidências do sistema de design Wonderflow Wanda para feedback
Mantenha a observação separada da interpretação
Cada cartão contém uma observação redigida e uma nota de contexto expansível. O contexto descreve o que a amostra ilustra e evita explicitamente alegações sobre frequência ou gravidade. Uma ferramenta real de feedback deve preservar a distinção entre fonte e análise, em vez de transformar uma única citação em uma tendência sem respaldo.
Não invente provas com elementos decorativos
O exemplo não contém identidades de clientes, avaliações por estrelas nem pontuações de confiança de modelos fabricadas. Cinco notas redigidas bastam para demonstrar filtragem, expansão de conteúdo e estado salvo. Em um produto ativo, a procedência da pesquisa e as regras de acesso devem fazer parte do contrato de dados; um cartão de citação atraente não pode fornecê-las.
Filtragem e estado do caderno do sistema de design Wonderflow Wanda
Combine os critérios de tópico e sentimento
Os dois seletores nativos aplicam um filtro AND. Uma combinação sem notas correspondentes exibe uma mensagem de recuperação e uma ação para redefinir os filtros. A contagem dos resultados informa seu denominador, cinco notas redigidas, em vez de sugerir uma contagem de um conjunto de dados maior. Tudo isso está visível no código-fonte completo.
Mantenha as notas salvas mesmo quando estiverem ocultas
Cartões, expansão de conteúdo e layout responsivo do sistema de design Wonderflow Wanda
Use o espaçamento para separar as evidências dos controles
Em telas largas, cada cartão de nota usa raio de 16px e espaçamento interno de 24px. As tags apresentam o tópico, a citação aparece em um tamanho de texto maior e o contexto expansível fica antes da ação de salvar. O caderno ocupa uma superfície mais discreta ao lado das notas. Essas são escolhas originais de composição expressas com os valores de Wanda, não uma alegação de que exista um componente nativo de cartão de pesquisa.
Mantenha a sequência de leitura no celular
Em 768px, o caderno passa para depois das observações e o preenchimento dos cartões diminui para 16px. Os controles de tópico e sentimento ocupam linhas de largura total. O contexto expandido permanece no fluxo do documento; não sobrepõe nem encobre outra nota. Os cartões não têm altura fixa, então citações mais longas continuam legíveis.
Sistema de design Wonderflow Wanda: configuração nativa em React e limites da versão HTML
Considere toda a cadeia de ferramentas do Wanda
A instalação oficial usa react-components, themes, symbols e tokens, com @wonderflow/config fornecendo a configuração PostCSS necessária para o componente CSS. A entrada React importa core.css e o pacote themes. Instalar apenas react-components e presumir que todas as funções de tema estejam disponíveis é uma integração incompleta. A página pública de instalação também alerta sobre a compatibilidade com Tailwind em versões posteriores à 10.6.
Use este exemplo sem alegar que ele contém componentes nativos
A prévia executada usa o tema CSS do Wanda 16.0.0 com HTML semânticos originais. Ela não executa os componentes Button, Select ou de expansão de conteúdo de React. Esse limite é intencional e visível: o código-fonte completo pode ser executado com um servidor estático, enquanto uma migração para React nativo deve verificar as APIs atuais dos componentes e a configuração de build.
Código-fonte completo e revisão pelo agente do sistema de design Wonderflow Wanda
Reproduza a prévia real
Instale o pacote de tema com versão fixada, copie o arquivo themes.css gerado para a mesma pasta de index.html e wanda.css e disponibilize o diretório em um servidor. O código-fonte inclui todas as cinco notas, a filtragem, a expansão de conteúdo, o estado salvo e o feedback. A prévia inclui a mesma folha de estilos localmente para evitar dependência de rede durante a execução.
Instale @wonderflow/themes 16.0.0 e copie o CSS gerado.
Salve os arquivos completos index.html e wanda.css.
Filtre até não haver resultados, redefina os filtros e salve uma nota.
Troque o tema e confirme que o caderno permanece intacto.
Revise os estados de falha e transição
Peça ao agente para manter o denominador do filtro, a recuperação para resultados vazios, a persistência das notas salvas e a invalidação da revisão. Confira as duas aparências e uma nota longa expandida. A revisão local apenas resume as amostras selecionadas; ela não deve ser apresentada como análise de IA nem como validação de clientes sem uma implementação separada e uma fonte de evidências.
Não trate token() como CSS em tempo de execução.
Mantenha os canais HSL primitivos separados das cores completas do tema.
Mantenha as amostras redigidas separadas das evidências de pesquisas reais.
Exemplos de componentes do sistema de design Wonderflow Wanda
index.html — espaço de trabalho completo para feedback
HTML semânticos originais e todo o estado da aplicação. Usa a folha de estilos do tema Wanda copiada.
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>
Os valores do tema vêm do pacote instalado, não de uma paleta sintética.
04
Configuração do agente de IA do sistema de design Wonderflow Wanda
Ponto de partida para implementação
A prévia local inclui o mesmo CSS de tema publicado. A aplicação HTML não precisa de PostCSS nem 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
Um prompt para seu projeto
Prompt para agente de IA
Crie um caderno de feedback com as funções de tema do Wanda 16.0.0 usando o exemplo original completo de HTML. Preserve a filtragem AND, o denominador explícito de cinco notas, o contexto expandido, a persistência do estado salvo e a limpeza de revisões obsoletas. Mantenha separado o uso de token() em tempo de build das variáveis CSS e nunca apresente observações redigidas como pesquisa com clientes.
05
Fontes e escopo do sistema de design Wonderflow Wanda
Um estudo de aplicação OpenDesign que usa os temas e tokens 16.0.0 do Wanda. A interface é um HTML original, não o runtime nativo de React do Wanda. Todas as citações são conteúdo de amostra redigido, não evidências de clientes nem resultados de pesquisa.
