ui-variants — три версії, одна сторінка

Замість «я вгадую → ти кажеш не те → я переробляю» користувач бачить 3 версії живцем і тикає пальцем. Найчастіша відповідь — «шапку з B, а блоки з C». Це і є потрібний дизайн.

Варіанти — чернетка на викид. Переможець переписується начисто, решта видаляється.

Крок 1. Признач місце

За замовчуванням — існуюча сторінка. Варіанти рендеряться на тому самому роуті, з тими самими даними, шапкою й меню. Окрема порожня сторінка бреше: у вакуумі будь-який варіант виглядає добре.

Нової сторінки ще нема, але вона житиме всередині наявної (новий блок дашборда, новий крок форми) — це теж існуюча сторінка. Монтуй варіанти всередину неї.

Окремий роут — лише коли вбудувати справді нікуди. Тоді назви шлях так, щоб було видно чернетку: /prototype-<назва>.

Крок 2. Зроби варіанти РІЗНИМИ

Три сітки карток з різними кольорами — це шпалери, не варіанти. Кожен варіант має сперечатися про структуру: інший лейаут, інша ієрархія (що головне на екрані), інша головна дія.

Тримай кожен у межах: реальні дані сторінки, наявна система стилів проєкту (Tailwind/shadcn/CSS-модулі — що вже є), окремий компонент VariantA / VariantB / VariantC.

Два варіанти вийшли схожі → переписуй один із прямою забороною повторювати структуру першого.

Спільна шапка — норма. Спільний лейаут — вбиває сенс: кожен варіант має право викинути лейаут.

Крок 3. Підключи перемикач

Готовий компонент лежить у tools/VariantSwitcher.tsx — скопіюй у проєкт, не переписуй з нуля. Він працює і в Next.js, і у Vite/React Router: читає ?variant= напряму з адреси, стрілки ← → на клавіатурі, і сам ховається в продакшн-збірці.

const variant = useVariant(VARIANTS);
return <>
  {variant === 'A' && <VariantA {...data} />}
  {variant === 'B' && <VariantB {...data} />}
  {variant === 'C' && <VariantC {...data} />}
  <VariantSwitcher variants={VARIANTS} />
</>;

Завантаження даних лишається вище перемикача — міняється тільки те, що видно.

Крок 4. Перевір сам, потім віддай

Підніми прев'ю і пройдися всіма трьома через read_page / get_page_text: кожен варіант рендериться, 0 помилок у консолі. Скріншоти в чат не постити.

Віддавай одним рядком — посилання з трьома адресами:

?variant=A — Класика  ·  ?variant=B — Бічне меню  ·  ?variant=C — Крупний екран

Крок 5. Прибери за собою

Варіант обрано → перепиши переможця начисто в реальний код (варіанти писалися без тестів і обробки помилок — не тягни їх у прод як є). Програші й перемикач видали з основної гілки: залишені варіанти гниють і плутають наступного читача.

Хочеш зберегти всі три — окрема гілка variants/<назва>, не main.

Не роби так

• Варіанти відрізняються кольором чи текстом — це правка, не варіант.
• Більше 5 варіантів — далі це вже не вибір, а шум. Норма — 3.
• Варіант пише в базу. Прототип лише читає; треба запис — заглушка.
• Переможець їде в прод копіпастом.