Используйте настоящие роли тем и синтаксис токенов Wanda в полноценном рабочем пространстве для чтения отзывов: с фильтрами по темам, раскрывающимся контекстом подтверждений и постоянно доступным локальным блокнотом.
Исходная разметка HTML с нативной темой Wanda 16.0.0 CSS; без среды выполнения компонентов React. · Справочник по реализации
02
Справочник по дизайну дизайн-системы Wonderflow Wanda
JSON для светлой и тёмной тем из @wonderflow/themes 16.0.0 и JSON токенов для веба из @wonderflow/tokens 16.0.0; проверено по открытой документации для разработчиков.
Роли темы со значениями для светлого и тёмного режимов
Примитивы, темы и использование CSS в дизайн-системе Wonderflow Wanda
Разберитесь в двух уровнях цвета
Примитивные цветовые токены Wanda — это каналы HSL, например 214 66% 44%, без обёртки hsl(). Роли темы, например --global-interactive-text, разрешаются в полный цвет CSS. Повторная обёртка полного значения темы будет недопустима; недопустимо и опускать hsl() для примитивных каналов. В таблице отдельно указаны полные значения ролей и обычные размеры.
Осознанно выбирайте токены времени сборки или времени выполнения
Указанная в документации запись token() обрабатывается конфигурацией PostCSS Wanda. Это не функция CSS браузера. Вместо неё обычный проект HTML может импортировать опубликованный файл tokens.css и использовать var(). В рабочем образце подключён опубликованный файл themes.css со стандартными пользовательскими свойствами, поэтому скрытый этап сборки PostCSS не требуется.
Роли светлой и тёмной темы дизайн-системы Wonderflow Wanda
Переключайте связанные семантические поверхности вместе
Wanda предоставляет соответствия для светлой и тёмной тем. В образце атрибут data-theme переключается на корневом элементе, а таблица стилей темы одновременно заменяет роли текста, поверхности, границ и выделения. Выбор и сохранённые заметки остаются без изменений, поскольку переключение темы меняет только представление, а не сбрасывает состояние исследования.
Используйте роль CTA только для основного локального действия
Красная пара CTA используется один раз — для просмотра сохранённых заметок. Для тегов тем применяются нейтральные роли выделения, а для тегов тональности — зелёные, жёлтые и красные пары. У каждого тега также указана тональность, поэтому различия в цветовосприятии не лишают его смысла. Для каждой карточки не создаётся отдельная палитра акцентных цветов.
Содержание обратной связи и границы доказательств в дизайн-системе Wonderflow Wanda
Отделяйте наблюдение от интерпретации
Каждая карточка содержит подготовленное наблюдение и раскрываемую заметку с контекстом. В контексте объясняется, что иллюстрирует образец, и явно указано, что он не позволяет судить о частоте или серьёзности проблемы. Настоящий инструмент для работы с отзывами должен сохранять источник и отделять данные от анализа, а не превращать отдельную цитату в неподтверждённую тенденцию.
Не создавайте видимость доказательств с помощью оформления
В примере нет вымышленных личностей клиентов, оценок в звёздах или показателей уверенности модели. Пяти подготовленных заметок достаточно, чтобы показать фильтрацию, раскрытие содержимого и сохранение состояния. В реальном продукте происхождение исследовательских данных и правила доступа должны быть частью контракта данных; привлекательная карточка с цитатой не может заменить их.
Фильтрация и состояние исследовательского блокнота в дизайн-системе Wonderflow Wanda
Сочетайте ограничения по теме и тональности
Два нативных раскрывающихся списка применяют фильтры по принципу И. Если выбранное сочетание не находит заметок, показываются сообщение с подсказкой и действие для сброса. В счётчике результатов указан знаменатель — пять подготовленных заметок, — а не подразумевается количество из более крупного набора данных. Всё это видно в полном исходном коде.
Не связывайте сохранённые заметки с их видимостью
Карточки, раскрытие содержимого и адаптивная компоновка в дизайн-системе Wonderflow Wanda
Разделяйте доказательства и элементы управления с помощью отступов
На широком экране у каждой карточки заметки радиус 16px и внутренние отступы 24px. Теги обозначают тему, цитата набрана более крупным шрифтом, а раскрываемый контекст расположен перед действием сохранения. Блокнот занимает более спокойную поверхность рядом с заметками. Это оригинальные решения по компоновке, реализованные с помощью значений Wanda, а не утверждение о наличии нативного компонента для исследовательских карточек.
Сохраните последовательность чтения на мобильных устройствах
При ширине 768px блокнот перемещается под наблюдения, а внутренние отступы карточек сокращаются до 16px. Элементы управления темой и тональностью растягиваются на всю ширину. Раскрываемый контекст остаётся в потоке документа: он не накладывается на другие заметки и не перекрывает их. Высота карточек не фиксирована, поэтому длинные цитаты остаются читаемыми.
Нативная настройка React и границы HTML в дизайн-системе Wonderflow Wanda
Учитывайте весь инструментарий Wanda
В официальной инструкции по установке указаны react-components, themes, symbols и tokens; пакет @wonderflow/config обеспечивает необходимую настройку PostCSS для компонентов CSS. Точка входа React импортирует core.css и пакет themes. Установка только react-components с предположением, что доступны все роли тем, — неполная интеграция. На странице установки также есть предупреждение о совместимости с Tailwind для версий выше 10.6.
Используйте этот образец, не выдавая его за набор нативных компонентов
В запущенном предпросмотре используется тема Wanda 16.0.0 CSS и исходная семантическая разметка HTML. Компоненты Wanda React Button, Select или раскрытия содержимого здесь не используются. Это намеренное и явно обозначенное ограничение: полный исходный код можно запустить со статическим сервером, а при переходе на нативный React необходимо проверить актуальные API компонентов и конфигурацию сборки.
Полный исходный код и проверка агентом для дизайн-системы Wonderflow Wanda
Воспроизведите фактический предпросмотр
Установите закреплённую версию пакета темы, скопируйте созданный им файл themes.css рядом с предоставленными index.html и wanda.css, затем запустите сервер для этой директории. Исходный код включает все пять заметок, фильтрацию, раскрытие содержимого, сохранение состояния и обратную связь. В предпросмотре используется локальная копия той же таблицы стилей, чтобы не зависеть от сети во время работы.
Установите @wonderflow/themes 16.0.0 и скопируйте созданный им файл CSS.
Сохраните полные файлы index.html и wanda.css.
Примените фильтр, чтобы получить пустой результат, сбросьте его и сохраните заметку.
Переключите тему и убедитесь, что содержимое блокнота не изменилось.
Проверьте состояния ошибок и переходов
Попросите агента сохранить знаменатель фильтра, восстановление после пустого результата, сохранение заметок и сброс устаревшего результата проверки. Проверьте оба режима отображения и длинную раскрытую заметку. Локальная проверка лишь обобщает выбранные образцы; её нельзя называть анализом ИИ или подтверждением со стороны клиентов без отдельной реализации и источника доказательств.
Не используйте token() как CSS времени выполнения.
Отделяйте примитивные каналы HSL от полных цветов темы.
Отделяйте подготовленные образцы от реальных исследовательских данных.
index.html — полное рабочее пространство для обратной связи
Исходная семантическая разметка HTML и всё состояние приложения. Используется скопированная таблица стилей темы Wanda.
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>
Значения темы взяты из установленного пакета, а не из искусственно созданной палитры.
04
Wonderflow Wanda Настройка агента дизайн-системы
Отправная точка для реализации
В локальном предпросмотре используется копия той же опубликованной темы CSS. Для приложения HTML не требуются PostCSS или 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
Запрос для вашего проекта
Промпт для AI-агента
Создайте исследовательский блокнот для обратной связи на основе ролей темы Wanda 16.0.0, используя полный оригинальный пример HTML. Сохраните фильтрацию по принципу И, явно укажите знаменатель — пять заметок, обеспечьте раскрытие контекста, сохранение заметок и очистку устаревших результатов проверки. Разграничивайте использование token() на этапе сборки и переменные CSS; никогда не представляйте подготовленные наблюдения как исследование клиентов.
05
Источники и область применения дизайн-системы Wonderflow Wanda
Исследование приложения OpenDesign с использованием тем и токенов Wanda 16.0.0. Интерфейс представляет собой оригинальную реализацию HTML, а не среду выполнения нативных компонентов Wanda React. Все цитаты подготовлены специально для этого образца и не являются отзывами реальных клиентов или результатами исследования.
