Performante Funnel · Plan

Design System Expansion

5 фаз многосторонней работы по фидбеку Тимура 2026-05-30. Mobile responsive sweep, color/effects audit, реальные креативы из pipeline, brand visual language, интеграция в v20.

Класс 3 · план на дни Связано с D29 component library A — срочно, mobile critical

Что просил Тимур

Раскладка фидбека в 9 пунктов — основа для разбиения на фазы.

  1. Hero InstaInput на mobile — кнопка трёхэтажная рядом с input'ом. Pattern: button-stack-below на mobile, full-width. Применить ко всей воронке.
  2. AnalysisCard / ModuleCard и подобные — иконка слева + длинный текст справа = пустота под иконкой. Pattern: иконка над текстом, на mobile и адаптивно.
  3. Tabs работают нормально, кнопки ОК — одобрено, не трогаем.
  4. Цвета — пройтись по акцентам, гармония, сочетания.
  5. Эффекты кнопок (shadows, glows, hover) — formal tokens в design-system.
  6. Графические элементы (blobs, gradients, decorative shapes) — описать как named patterns.
  7. CreativeGrid — заменить градиенты-плейсхолдеры на реальные креативы из pipeline (gemini-3-pro-image). На лендинге много примеров.
  8. Floating creatives декоративный фон где уместно.
  9. Brand visual language — единая стилистика иллюстраций: абстракции, 3D-модели, цвета бренда, wow-эффект. Применить на Hero / баннеры / illustration-блоки.

5 фаз

Каждая фаза — own deliverables, скиллы/агенты, эстимейт.

AMobile responsive sweep1-2 дня · СРОЧНО

2 critical responsive паттерна по всему v19 → создать v20.

  • A1. Input+button stack-on-mobile (Hero, Confirm-tariff auth, Chat-helper, и т.д.)
  • A2. Icon-top на mobile для всех cards с icon+text (AnalysisCard ×5, ModuleCard ×6, EcosystemProductCard ×6, AIRecommendationCard, MenuListItem, AIFeedItem, CompetitorRow, LeadRow)
  • A3. Sweep остальных responsive issues через Playwright на 375/768/1280
Агенты/Skills
frontend-engineer + Playwright MCP
Артефакт
v20 + 4 screenshots viewport
BColor + Effects + Patternsполдня

Доfикcировать design-system.md до полной спецификации (сейчас базовые есть, эффекты и графика не описаны).

  • B1. Color harmony audit — mint/amber/rose/purple/sky — сочетания, разрешённые pair'ы как color-pairings
  • B2. Button effects formal tokens (shadow-primary / shadow-accent / hover / focus / disabled)
  • B3. Graphic elements as patterns (Hero blobs, gradient backgrounds, decorative shapes, sparkles) — назвать и описать
Агенты/Skills
taste-skill audit + ручная фиксация
Артефакт
design-system.md v2
CРеальные креативы из pipeline1 день

Заменить gradient-placeholders на real creatives. Floating creatives как декоративный фон.

  • C1. Сгенерировать 6-9 креативов через gemini-3-pro-image (~$1.20 batch): стома + beauty + барбер (или другие ниши — открытый вопрос #3)
  • C2. Заменить в CreativeGrid funnel + dashboard. Сохранить overlay (AI·Variant badge, hover regen)
  • C3. Floating creatives декоративный фон — локация и плотность открыты (вопрос #2)
Агенты/Skills
media agent + multi_ref_v10 pipeline
Артефакт
9 креативов + integration в v20 + floating pattern
DBrand visual language1-2 дня

Определить визуальный язык бренда + сгенерировать illustration batch.

  • D1. Brand visual language spec — абстракции, 3D-модели, палитра, wow-эффект, узнаваемые мотивы, 3-5 reference brands (открытый вопрос #1)
  • D2. 5-8 illustrations в стилистике: section banners, Hero illustration replacement (открытый вопрос #4), empty states dashboard, decoration
  • D3. Embed в v20 где утверждено
Агенты/Skills
researcher (language) + media (gen) + taste-skill
Артефакт
brand-visuals.md + 5-8 illustrations + integration
EИнтеграция в v20полдня

Финальная сборка из всех результатов A+B+C+D + audit + публикация.

  • E1. v20 = v19 + все правки A+B+C+D
  • E2. system-architect + web-design-guidelines + Playwright audit
  • E3. Mobile sweep 375 / 768 / 1280
  • E4. Symlink funnel.obahoba.com → v20
  • E5. D31 в decisions.md с full changelog
  • E6. Обновить components/CATALOG + новые компоненты в library
  • E7. Обновить funnel-components.obahoba.com
Агенты/Skills
frontend-engineer + verifier + system-architect
Артефакт
v20 live + D31 + обновлённый каталог

Порядок выполнения

A в первую очередь — критичный live regression. D можно стартовать параллельно (research не блокирует).

Day 1 — срочно
A (mobile responsive sweep) → быстрый v19.1 fix критики. Параллельно — старт D (brand visual language research).

Day 2
B (color/effects audit) + D continued (D1 → D2 generation).

Day 3
C (генерация креативов через gemini-3-pro-image) + D2 illustration batch.

Day 4
E (интеграция всё в v20 + публикация + обновление каталога).

4 открытых вопроса — нужны твои ответы до старта C+D

A и B можно стартовать без ответов. C и D нужно зафиксировать решения до генерации.

#1 Brand visual language reference — какие brands берём для inspiration? uprock.ru (как в D15) / Stripe / Linear / Vercel / Notion / что-то ещё? Или researcher сам найдёт 3-5 кандидатов и принесёт moodboard?
#2 Floating creatives background — где в воронке (Hero illustration card / Section «Что меняется» / новая декоративная секция / Footer)? Плотность — mosaic-grid texture opacity 0.1 / clear floating cards с parallax / horizontal scroll carousel?
#3 Ниши для генерации 6-9 креативов — стома + beauty + барбер + кафе ок? Или другие сегменты?
#4 Hero illustration card — заменять текущий analysis-preview на brand illustration или оставить? Preview = part of value-prop, замена может сломать messaging.

Что НЕ в этом плане (отложено)