Usa los roles de tema y la sintaxis de tokens reales de Wanda en un espacio de trabajo completo para leer comentarios, con filtros por tema, contexto de evidencia desplegable y un cuaderno local persistente.
HTML original con el tema nativo Wanda 16.0.0 CSS; sin entorno de ejecución de componentes React. · Referencia de implementación
02
Referencia de diseño del sistema de diseño Wonderflow Wanda
JSON de temas claro/oscuro de @wonderflow/themes 16.0.0 y JSON de tokens web de @wonderflow/tokens 16.0.0, verificados con la documentación pública para desarrolladores.
Primitivas, temas y uso de CSS en el sistema de diseño Wonderflow Wanda
Comprende los dos niveles de color
Los tokens de color primitivos de Wanda son canales HSL, como 214 66% 44%, sin el contenedor hsl(). Los roles del tema, como --global-interactive-text, se resuelven en un color CSS completo. Volver a envolver un valor completo del tema lo invalidaría; omitir hsl() en los canales primitivos también es incorrecto. La tabla registra por separado los valores completos de los roles y las dimensiones habituales.
Elige deliberadamente entre tokens en tiempo de compilación o de ejecución
La notación token() documentada se procesa mediante la configuración de PostCSS de Wanda. No es una función CSS del navegador. En un proyecto HTML sencillo, puedes importar tokens.css, el archivo publicado, y usar var(). El ejemplo funcional utiliza themes.css, también publicado, con propiedades personalizadas estándar, por lo que no requiere un paso oculto de compilación de PostCSS.
Roles para temas claro y oscuro del sistema de diseño Wonderflow Wanda
Cambia a la vez las superficies semánticas
Wanda ofrece correspondencias para los temas claro y oscuro. El ejemplo cambia data-theme en el elemento raíz y deja que la hoja de estilos del tema sustituya conjuntamente los roles de primer plano, superficie, borde y resaltado. La selección y las notas guardadas se mantienen sin cambios, porque cambiar de tema es un estado de presentación, no un reinicio del estado de investigación.
Reserva el rol CTA para la acción local principal
El par CTA rojo se usa una sola vez para revisar las notas guardadas. Las etiquetas de temas usan roles neutros de resaltado, mientras que las etiquetas de sentimiento usan pares verde, amarillo y rojo. Cada etiqueta también expresa por escrito el sentimiento, de modo que las diferencias en la percepción del color no eliminan el significado. El ejemplo no inventa una paleta de acento distinta para cada tarjeta.
Contenido de comentarios y límites de la evidencia en el sistema de diseño Wonderflow Wanda
Mantén separadas la observación y la interpretación
Cada tarjeta contiene una observación redactada y una nota contextual desplegable. El contexto explica qué ilustra la muestra y evita explícitamente afirmaciones sobre frecuencia o gravedad. Una herramienta real para comentarios debe preservar la distinción entre fuente y análisis, en vez de convertir una sola cita en una tendencia sin fundamento.
No fabriques pruebas con elementos decorativos
El ejemplo no incluye identidades de clientes, valoraciones con estrellas ni puntuaciones de confianza del modelo inventadas. Cinco notas redactadas bastan para demostrar el filtrado, la divulgación y el estado guardado. En un producto real, la procedencia de la investigación y las reglas de acceso deben formar parte del contrato de datos; una atractiva tarjeta con una cita no puede proporcionarlas.
Filtrado y estado del cuaderno del sistema de diseño Wonderflow Wanda
Combinar criterios de tema y sentimiento
Los dos selectores nativos aplican un filtro AND. Si una combinación no devuelve ninguna nota, se muestra un mensaje para recuperarse de esa situación y una acción para restablecer los filtros. El recuento de resultados indica su denominador —cinco notas redactadas—, en lugar de sugerir un recuento de un conjunto de datos más amplio. Todo esto puede verse en el código fuente completo.
Mantener las notas guardadas aunque no estén visibles
Tarjetas, divulgación y diseño adaptable del sistema de diseño Wonderflow Wanda
Usar el espaciado para separar la información de los controles
Cada tarjeta de nota usa un radio de 16 px y un espaciado interno de 24 px en pantallas anchas. Las etiquetas presentan el tema, la cita tiene un tamaño de texto mayor y el contexto expandible aparece antes de la acción para guardar. El cuaderno ocupa una superficie más discreta junto a las notas. Estas son decisiones de composición originales expresadas con los valores de Wanda; no se afirma que exista un componente nativo de tarjeta de investigación.
Mantener intacta la secuencia de lectura en móviles
A 768 px, el cuaderno pasa después de las observaciones y el relleno de las tarjetas se reduce a 16 px. Los controles de tema y sentimiento ocupan filas de ancho completo. El contexto expandido permanece en el flujo del documento; no se superpone ni oculta otra nota. Las tarjetas no tienen una altura fija, por lo que las citas más largas siguen siendo legibles.
Configuración nativa de sistema de diseño Wonderflow Wanda y límites de React y HTML
Contemplar la cadena de herramientas completa de Wanda
La instalación oficial utiliza react-components, themes, symbols y tokens; @wonderflow/config proporciona la configuración de PostCSS necesaria para el componente CSS. La entrada React importa core.css y el paquete themes. Instalar únicamente react-components y dar por hecho que están disponibles todos los roles del tema es una integración incompleta. La página pública de instalación también advierte de la compatibilidad con Tailwind para las versiones posteriores a la 10.6.
Usar este ejemplo sin atribuirle componentes nativos
La vista previa ejecutada utiliza Wanda 16.0.0 theme CSS con HTML semánticos originales. No ejecuta los componentes Button, Select ni de divulgación de React. Este límite es deliberado y visible: el código fuente completo puede ejecutarse con un servidor estático, mientras que una migración a React nativo debe verificar las API actuales de los componentes y la configuración de compilación.
Código fuente completo y revisión del agente del sistema de diseño Wonderflow Wanda
Reproducir la vista previa real
Instala el paquete del tema fijado en una versión, copia su archivo themes.css generado junto a los archivos index.html y wanda.css proporcionados y sirve el directorio. El código fuente incluye las cinco notas, el filtrado, la divulgación, el estado guardado y los comentarios. La vista previa incluye la misma hoja de estilos localmente para evitar depender de la red en tiempo de ejecución.
Instala @wonderflow/themes 16.0.0 y copia su archivo CSS generado.
Guarda los archivos completos index.html y wanda.css.
Filtra hasta obtener un resultado vacío, restablece los filtros y guarda una nota.
Cambia el tema y confirma que el cuaderno permanece intacto.
Revisar los estados de error y transición
Pide al agente que conserve el denominador del filtro, la recuperación ante resultados vacíos, la persistencia de las notas guardadas y la invalidación de la revisión. Comprueba ambas apariencias y una nota larga expandida. La revisión local solo resume las muestras seleccionadas; no debe presentarse como análisis de IA ni como validación de clientes sin una implementación independiente y una fuente de evidencia.
No trates token() como CSS en tiempo de ejecución.
Mantén separados los canales HSL primitivos y los colores completos del tema.
Distingue las muestras redactadas de la evidencia de investigación real.
Ejemplos de componentes del sistema de diseño Wonderflow Wanda
index.html — espacio de trabajo de comentarios completo
HTML semánticos originales y todo el estado de la aplicación. Usa la hoja de estilos del tema de 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>
Los valores del tema proceden del paquete instalado, no de una paleta sintética.
04
Configuración del agente de sistema de diseño Wonderflow Wanda
Punto de partida para la implementación
La vista previa local incluye el mismo tema publicado CSS. La aplicación HTML no necesita PostCSS ni 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
Una instrucción para tu proyecto
Instrucción para el agente
Crea un cuaderno de comentarios con los roles del tema Wanda 16.0.0 usando el ejemplo completo y original de HTML. Conserva el filtrado AND, un denominador explícito de cinco notas, el contexto expandido, la persistencia del estado guardado y el borrado de revisiones obsoletas. Mantén separado el uso de token() en tiempo de compilación de las variables CSS y nunca presentes observaciones redactadas como investigación con clientes.
05
Fuentes y alcance del sistema de diseño Wonderflow Wanda
Un estudio de una aplicación OpenDesign que utiliza los temas y tokens de Wanda 16.0.0. La interfaz es un HTML original, no el entorno de ejecución nativo de Wanda React. Todas las citas son contenido de muestra redactado, no evidencia de clientes.
