Design Before / After

Головна ідея: показати, а не описати

Не-дизайнер не відчує фразу «контраст 3.6:1 нижче норми». Але він миттєво зрозуміє, коли побачить той самий сірий напис поряд із читабельним, у справжньому розмірі. Сила цього скіла — у вірності оригіналу: рендеримо реальний зламаний елемент (справжній блідий сірий, справжню крихітну кнопку), а поряд — виправлений. Це переконує сильніше за будь-який опис.

Тому ключове правило: рендер реального елемента в реальному масштабі, а не схематична іконка «до/після».

Коли застосовувати

• Після дизайн-огляду (impeccable / web-quality-audit / accessibility / ручний аудит), що знайшов конкретні виправні проблеми.
• Коли користувач просить наглядно показати, що саме не так і як стане краще.
• НЕ для генерації нового дизайну з нуля (це інші скіли) — лише для візуалізації порівняння вже знайденої проблеми та її фіксу.

Вхід: список проблем

Кожна проблема — це:

• num — порядковий номер (01, 02…)
• title — коротка назва («Контраст цифр-лічильників»)
• why — один рядок, чому це шкодить гостю
• type — contrast | tap-target | font-size | hierarchy | spacing | color
• before — реальний стан (колір/розмір/текст)
• after — запропонований стан
• metricBefore / metricAfter — вимір («2.4:1» → «7:1», «28px» → «48px»)

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

Як рендерити

1. Один раз виклич mcp__visualize__read_me з modules: ["mockup"] — щоб мати актуальні CSS-змінні й правила. Не озвучуй цей виклик користувачу.
2. Збери один віджет через mcp__visualize__show_widget: по одній секції на кожну проблему, згори вниз.
3. Кожна секція:
   • Заголовок: № NN (приглушений) + title (15px/500) + рядок why (13px, secondary).
   • Сітка з двох колонок 1fr 1fr, gap 12px: ліворуч Було, праворуч Стало.
4. Кожна колонка — це білий «мі-екран» (.scr): background:#fff; border:1px solid #e6e6e6; border-radius:8px. Усередині — реальний елемент.
   • Стало отримує рамку 2px solid var(--color-border-success) — зелений сигнал «правильний варіант».
   • Підпис під екраном: іконка ti-x (червоне --color-text-danger) + метрика для «Було»; ti-check (зелене --color-text-success) + метрика для «Стало».
   • Маленька мітка зверху: «Було» (tertiary) / «Стало» (success).

Рендер за типом проблеми

• contrast — справжній текст у справжньому сірому на білому (Було), і той самий текст темнішим/жирнішим (Стало). Підпис: «#a6a6a6 · 2.4:1» → «#565656 · 7:1».
• tap-target — кнопка реальної висоти, а ПОЗАДУ неї — напівпрозоре коло Ø44px (середній дотик пальця). Якщо кнопка менша за коло — видно, що палець не влучає. Було: коло червонувате, кнопка 28px менша. Стало: кнопка 48px ховає коло (зеленувате). Підпис: «Ціль 28px < палець 44px» → «48px ≥ 44px».
• font-size — той самий рядок дрібним (12px) і нормальним (15px), на екранах однакової висоти, щоб різниця розміру впадала в око.
• hierarchy — структура заголовків. Напр. Було: великий h1 про другорядне; Стало: h1 про суть сторінки, другорядне — у малий чип.
• spacing — той самий блок зі стиснутими відступами vs дихаючими.
• color — зразок кольору-проблеми поряд із виправленим.

Правила рендеру (і чому)

• Реальний масштаб і справжні значення. Якщо кнопка 28px — малюй 28px. Сенс скіла в чесному «1:1», а не в стилізованій схемі.
• Білий фон екранів-зразків — завжди. Сайт переважно світлий; білий екран читається однаково в світлій і темній темі хоста, тож хардкод темного тексту всередині .scr безпечний. Хром віджета (заголовки, мітки, підписи) роби на CSS-змінних (--color-text-primary/secondary/tertiary), щоб жив в обох темах.
• Мінімум 11px на будь-якому тексті (вимога рендерера).
• Без position: fixed (iframe схлопнеться). Контейнери з висотою — у потоці.
• Без скріншотів. Наглядність дає справжній HTML, а не картинка; до того ж скріни в чаті блокують сесію. Це перевага, не обмеження.
• Мова міток — українська (Було/Стало) або мова користувача.

Шаблон і приклад

• tools/before-after-template.html — скелет однієї секції з двома екранами та спец-блоком «палець-коло» для тап-зон. Копіюй секцію під кожну проблему. кнопка-палець, шрифт, заголовок H1) — еталон тону й щільності.

Після віджета

Коротко в тексті відповіді (поза віджетом, бо текст у віджет не кладемо):

• що показує кожна пара;
• чого НЕ видно у візуалі (напр. alt-описи, які «під капотом») — чесно;
• наступний крок: виправити в коді / зберегти як файл / поглибити огляд.