Cluster Popup — UI Design
UI-расширение к SF-AI Item View: попап со сравнением похожих товаров от ретейлеров-конкурентов на данных Market360.
Product cards
Snapshot отправленный клиенту. Три плашки: source · approved · pending. Match bar, per-param heatmap chips, slide-карусель Unsplash-фото, Monica с чекмарком, group-expand Show More с notes.
Open Backup snapshotProduct cards · v2
Итерация после первого фидбека клиента (6 плашек, 7 параметров, group expand, Monica внизу). Заморожена для сравнения с V3.
Open Backup snapshotProduct cards · v3
Третья итерация — фидбек APM: добавлен статус Declined (третий рядом с Approved / Pending), Price Dynamics (delta-chip динамики цены), Monica перенесена выше — статус виден без раскрытия.
Open React · TypeScript · SCSSProduct cards · v4
Реимплементация V3 в виде React+TS-приложения с plain SCSS + BEM. Готово к интеграции в их систему — клиентский программист может npm install + npm run dev.
Open preview Archived · A/B/C/D comparisonProduct cards · v5
4 варианта расположения hover-action кнопок для клиентского сравнения: A (bordered overlay), B (frosted pill в status row), C (напротив retailer), D (top-right corner). Клиент выбрал — Variant B.
Open Working copy · Variant BProduct cards · v6
Финальная design-итерация после A/B/C/D сравнения. Variant B (frosted-glass pill в status row, hover-reveal) применён ко всем плашкам. Per-status логика: Pending → Approve+Cancel, Approved → Cancel, Declined → Approve, Source → нет кнопок. Готово к передаче программисту в React+TS+SCSS.
Open Audit · 2026-05-13UX Review
Структурный аудит V2 — что работает, что плохо, насколько быстро клиент-аналитик понимает страницу. Score, чек-лист «закрыть до показа» и roadmap V3.
Open FoundationsUI Kit
Дизайн-токены и компоненты из Figma SF-UI — фон, типографика, кольцо термометра, кнопки, теги. Источник истины для всех approach-ей.
OpenResources
Project stages
-
01WireframeIn progress
-
02DesignPending
-
03Front-endPending
-
04Back-endPending
-
05TestingPending