03 / Продукт / PORTFOLIO CONCEPT

EMBERВыбор, который можно объяснить.

Сделать подбор кофе понятным: показать, почему выбран лот, насколько близка альтернатива и какой ответ изменит результат.

ember.interaction

ЗАПИСЬ СЦЕНАРИЯ / БЕЗ ЗВУКА

Запись работающего интерфейса. Видео загружается только после нажатия кнопки; сценарий описан ниже текстом.

РОЛЬ И КОНТЕКСТ

От структуры
до взаимодействия.

Учебный проект, созданный совместно с AI-ассистентом. Работа включала визуальное направление, адаптивную вёрстку, клиентскую логику, автоматические проверки и публикацию. Это не коммерческий заказ; клиенты и бизнес-результаты не заявляются.

Архитектура

Next.js App Router и статические страницы, React для интерактивных сценариев, SCSS Modules и Framer Motion. Контент и чистые расчёты отделены от компонентов.

01Каталог лотов
02Ранжирование по правилам
03Три группы ответов
04Результат и сравнение

Решения и компромиссы

Прозрачные веса

Вкус, способ приготовления и молоко дают отдельные баллы. Интерфейс показывает вклад каждого ответа; баллы не называются процентом качества или гарантией вкуса.

Объяснимая альтернатива

Показывается ближайший лот и разница баллов. При ничьей объясняется стабильный порядок каталога. Для альтернативы ищется одно изменение ответа, которое действительно меняет первое место.

Те же правила во всех представлениях

Рекомендация и сравнение используют общую функцию ранжирования. Все 18 допустимых профилей проверяются на согласованность результата и объяснения.

ПРОВЕРЬ САМ

Один конкретный сценарий

Выбери фильтр, чёрный кофе и шоколадный профиль. Изучи объяснение ничьей, затем примени предложенное изменение ответа: форма и основной результат обновятся вместе.

Повторить в демо

Ключевые части кода

content/coffee.js
components/TasteFinder.jsx
components/CoffeeComparison.jsx
components/CoffeeLab.jsx

Открыть исходники Полный разбор в демо

Границы реализации

Бренд, лоты и цены демонстрационные. Правила иллюстративны и не основаны на дегустационном исследовании. Нет AI-сервиса, заказа, оплаты или отправки email.

Браузерные проверки выполняются в CI. Реальные устройства и скринридеры требуют отдельного ручного прохода.