Лекції
Почати
Почати навчання
JavaRush /Курси /ChatGPT Apps /Візуальний дизайн: теми, кольори, типографіка, відступи т...

Візуальний дизайн: теми, кольори, типографіка, відступи та готові бібліотеки

ChatGPT Apps
Рівень 8 , Лекція 3
Відкрита

1. Контекст: ваш застосунок — гість у домі ChatGPT

Перш ніж малювати кнопки й добирати шрифти, варто прийняти просту реальність: користувач не відкриває «ваш сайт» — він перебуває в ChatGPT. А в ChatGPT уже є свої:

  • колірна схема,
  • шрифти та розміри,
  • відступи й компонування елементів.

Ваш віджет відображається всередині цього оточення, найчастіше в iframe. Звідси простий висновок: візуально застосунок має бути природним продовженням інтерфейсу ChatGPT, а не банером, який ви ніби привезли з 2008 року.

Офіційні настанови OpenAI саме про це: не ламати системні кольори та шрифти, додавати лише помірні брендові акценти й дотримуватися базової типографіки та сітки платформи.

На практиці це означає три речі.

По‑перше, фон, базовий колір тексту та стандартна типографіка — усе це має наслідуватися від ChatGPT або від системних змінних, а не працювати за принципом «я художник — я так бачу».

По‑друге, якщо ви хочете «власний стиль», зосередьте його в акцентах: основні кнопки, бейджі, стани виділення. Але не райдужний фон і не кастомний шрифт Comic Sans — навіть якщо дуже хочеться «для душі».

По‑третє, inline‑ і fullscreen‑режими одного й того самого застосунку мають візуально належати до одного світу: однакові кольори CTA, однакові радіуси й відступи карток, однакова типографіка. Користувач не повинен відчувати, що під час переходу з inline у fullscreen він потрапив в інший продукт.

Далі розберемо все пошарово: кольори й теми, типографіку, відступи та сітку, а потім — як Tailwind і shadcn/ui допомагають усе це зібрати докупи.

Інсайт

Пісочниця ChatGPT не лише обмежує функціональність вашого віджета, а й додає йому власні стилі.

По‑перше — це тег <html>.

Оригінал із сайту:

<html lang="ru">

У пісочниці:

<html lang="en-US" data-theme="light" class="light" style="--safe-area-inset-top: 0px; --safe-area-inset-bottom: 0px; --safe-area-inset-left: 0px; --safe-area-inset-right: 0px;">

По‑друге — це «рідні» CSS‑стилі, щоб ваш віджет більше скидався на ChatGPT: 

<style>
  html,body,#root{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;margin:0;padding:0}
  html,body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Helvetica Neue,Arial,sans-serif!important}
  button,input,textarea,select{font-family:inherit}
  html{background-color:#fff}
  html.dark{background-color:#212121}
  html.mobileSkybridge.dark{background-color:#000}
  @supports (font: -apple-system-body){html.mobileSkybridge{font:-apple-system-body}}
</style>

Про це краще памʼятати — так буде менше сюрпризів.

2. Теми й кольори: живемо у світлому та темному світах

Світла й темна теми

Інтерфейс ChatGPT уже підтримує світлу й темну теми. Ваш віджет показується в одній із них, і користувач може перемикатися між ними будь‑коли. Отже, будь‑які жорстко «зашиті» білі або чорні фони — потенційна міна.

Уявіть віджет, який малює білий фон і чорний текст. У світлій темі він виглядає ще більш‑менш. У темній — як прожектор в очі. Зворотна ситуація з чорним фоном у світлій темі не краща. Саме тому офіційні рекомендації радять не «зашивати» кольори жорстко, а спиратися на тему та змінні хоста.

В Apps SDK оточення зазвичай надає вам API або CSS‑змінні для поточної теми. У документації трапляються варіанти на кшталт window.openai.theme і використання стандартних CSS‑змінних ChatGPT. Також ніхто не скасовував prefers-color-scheme та утиліти dark: у Tailwind.

Ідея приблизно така: ваш віджет має автоматично підлаштовуватися під тему хоста в таких речах, як:

  • фон карток (трохи світліший/темніший за базовий фон),
  • колір тексту (достатній контраст),
  • межі, тіні та hover‑стани.

Приклад найпростішої обгортки для теми з Tailwind:

// components/AppShell.tsx
export function AppShell({ children }: { children: React.ReactNode }) {
  return (
    <div className="bg-background text-foreground">
      {/* bg-background/text-foreground перевизначаються темою */}
      {children}
    </div>
  );
}

Де bg-background і text-foreground — це не стандартні класи Tailwind, а псевдоніми до CSS‑змінних вашої дизайн‑системи (наприклад, із shadcn/ui). А вони, своєю чергою, привʼязані до світлої/темної теми ChatGPT.

Системні кольори проти брендових акцентів

OpenAI доволі прямо каже: системні кольори ChatGPT змінювати не можна. Базовий текст, стандартні панелі чату та фон — усе це має залишатися в загальних кольорах платформи. Ваше поле — акценти всередині віджета: CTA‑кнопки (call to action — основна дія), бейджі, невеликі елементи.

На практиці для GiftGenius це означає, що:

  • фон картки подарунка близький до системного,
  • текст — звичного кольору, як і текст у чаті,
  • фірмовий колір GiftGenius використовується для основної кнопки «Обрати подарунок» і, можливо, для бейджа знижки.

Можна уявити це як таблицю:

Вебінар JavaRush
Елемент Що робити Чого уникати
Фон віджета Наслідувати від ChatGPT Ставити яскравий брендовий градієнт
Основний текст Наслідувати системний колір Робити кольоровим/сірим до нечитаємості
Основна CTA‑кнопка Використовувати брендовий акцентний колір Малювати на ній «райдугу» та пʼять кольорів
Вторинні кнопки/посилання Близькі до системних посилань Робити їх такими ж яскравими, як CTA
Тіні/рамки Ніжні, мінімалістичні Товсті неонові обводки

Міні‑приклад із Tailwind для основного кольору:

// styles/globals.css (фрагмент)
:root {
  --gift-accent: 222 84% 56%; /* hsl */
}

.dark {
  --gift-accent: 222 84% 64%; /* трохи світліший для dark */
}

// components/GiftButton.tsx
export function GiftButton({ children }: { children: React.ReactNode }) {
  return (
    <button className="rounded-md bg-[hsl(var(--gift-accent))] px-4 py-2 text-sm font-medium text-white hover:opacity-90">
      {children}
    </button>
  );
}

Ви не чіпаєте фон усього віджета, зате акуратно застосовуєте свій колір до основної CTA‑кнопки.

Контраст і WCAG без фанатизму

Навіть якщо ви не готуєтеся складати іспит із WCAG, є простий орієнтир: текст має бути читабельним. Що менший шрифт, то вищим має бути контраст. У матеріалах із доступності радять тримати контраст тексту відносно фону не нижче приблизно 4.5:1 для основного тексту. У стандарти доступності тут глибоко не занурюємося: нам потрібен один практичний орієнтир — достатній контраст тексту й фону.

На практиці:

  • не використовуйте світло‑сірий текст на світло‑сірому фоні заради «елегантності»;
  • уникайте темно‑сірого тексту на майже чорному фоні в темній темі;
  • перевіряйте хоча б «на око»: якщо ви мружитеся, користувачеві теж буде некомфортно.

Можете домовитися із собою так: будь‑який другорядний текст (підписи, підказки) все одно має лишатися читабельним. Нехай він буде трохи менш акцентним за кольором і розміром, але не «повністю примарним».

3. Типографіка: системні шрифти, ієрархія й трохи здорового глузду

Системні шрифти замість «власної» гарнітури

Офіційні настанови закликають використовувати системні шрифти платформи на кшталт SF Pro, Roboto та їхніх аналогів і не підʼєднувати власний вебшрифт. Причина не лише в продуктивності, а й у тому, що ваш застосунок має виглядати «рідним» елементом інтерфейсу.

У Next.js‑застосунку найпростіше зробити так, щоб усе всередині віджета наслідувало базовий системний стек. У Tailwind це зазвичай уже налаштовано як font-sans. Якщо хочете підкреслити це явніше: 

// app/layout.tsx (фрагмент)
export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body className="font-sans antialiased">
        {children}
      </body>
    </html>
  );
}

Не потрібно підʼєднувати три гарнітури через Google Fonts. Для навчального GiftGenius строгий системний шрифт виглядатиме охайніше, ніж умовний Lobster.

Ієрархія розмірів

Нам достатньо кількох рівнів типографіки: заголовок блока, підзаголовок/ключовий параметр, основний текст і підпис.

Для inline‑картки GiftGenius, наприклад, зручно домовитися про такі рівні:

Роль Tailwind‑клас Приклад
Заголовок картки 
text-base font-semibold
 Назва подарунка
Ключовий параметр 
text-sm font-medium
 Ціна або категорія
Опис 
text-sm text-muted-foreground
 Короткий опис
Підпис/дрібниці 
text-xs text-muted-foreground
 Доставка, магазин

Міні‑компонент картки:

// components/GiftCard.tsx
type GiftCardProps = {
  title: string;
  price: string;
  description: string;
};

export function GiftCard({ title, price, description }: GiftCardProps) {
  return (
    <div className="rounded-lg border bg-card p-4">
      <h3 className="text-base font-semibold">{title}</h3>
      <p className="mt-1 text-sm font-medium text-emerald-600">{price}</p>
      <p className="mt-2 text-sm text-muted-foreground">{description}</p>
    </div>
  );
}

Тут:

  • немає величезного H1;
  • уся інформація компактна;
  • ієрархія зчитується за розміром і насиченістю шрифту.

Вирівнювання та довжина рядків

Чат‑інтерфейс зазвичай вузький, особливо в inline‑режимі. Тож можна не ускладнювати собі життя: звичайне вирівнювання ліворуч і довжина рядка в межах 40–60 символів цілком комфортні.

Корисні звички:

  • не центрувати довгі тексти в картці — їх складніше читати;
  • не писати ВСЕ ВЕЛИКИМИ ЛІТЕРАМИ;
  • не робити базовий текст меншим за 14 px (у Tailwind це text-sm) без справді вагомої причини.

Якщо сумніваєтеся, памʼятайте: читатиме втомлена людина в телефоні в метро, а не ви з ідеальним 27‑дюймовим монітором.

4. Відступи, щільність і сітка

Якщо кольори й шрифти — це «фарби», то відступи — це повітря. Без них навіть найакуратніші картки перетворюються на кашу.

OpenAI у своїх рекомендаціях підкреслює: елементи не мають бути «склеєними». Відступи й радіуси краще брати з дизайн‑системи або UI‑фреймворку (Tailwind, shadcn/ui тощо), а горизонтальне гортання слід мінімізувати.

Принцип «дихати»

Найпростіший патерн: використовувати єдину шкалу відступів (наприклад, крок 4 px або 8 px) і не вигадувати щоразу «свій» розмір. У Tailwind це вже вбудовано: p-2, p-3, p-4, gap-3 тощо.

Приклад невеликої сітки для списку подарунків в inline‑режимі:

// components/GiftListInline.tsx
export function GiftListInline({ children }: { children: React.ReactNode }) {
  return (
    <div className="flex flex-col gap-3">
      {children}
    </div>
  );
}

Кожна картка відділена gap-3, має свої внутрішні p-4 — і цього вже досить, щоб список не виглядав як «простирадло».

Колонки: inline проти fullscreen

У документах із UX для Apps SDK рекомендують для inline‑віджета триматися 1–2 колонок карток. А для fullscreen можна дозволити собі 2–3 — за достатньої ширини.

Причина проста: у чаті ширина обмежена, особливо на мобільному. Дві колонки — це вже на межі читабельності. У fullscreen ви отримуєте майже весь екран і можете розмістити контент щільніше.

Орієнтовна схема:

flowchart LR
  subgraph Inline
    A[1 колонка
вузький екран]
    B[2 колонки
на десктопі]
  end

  subgraph Fullscreen
    C[2 колонки
основний сценарій]
    D[3 колонки
для сіток/каталогів]
  end

Реалізація в Tailwind для GiftGenius:

// components/GiftGrid.tsx
export function GiftGrid({ fullscreen, children }: { fullscreen?: boolean; children: React.ReactNode }) {
  const base = fullscreen ? "grid-cols-2 md:grid-cols-3" : "grid-cols-1 sm:grid-cols-2";

  return (
    <div className={`grid gap-4 ${base}`}>
      {children}
    </div>
  );
}

В inline‑режимі ви даєте одну колонку на мобільному й дві на ширших екранах. У fullscreen одразу робите 2–3 колонки залежно від ширини.

Уникаємо горизонтального гортання

Чат за своєю природою вертикальний. Користувач звик гортати вниз, а не вбік. Тому:

  • намагайтеся, щоб таблиці й картки вкладалися в ширину контейнера;
  • не задавайте фіксовані ширини на кшталт width: 600px; для елемента, який живе в гнучкому контейнері;
  • використовуйте max-w-full, overflow-x-auto лише як «останній шанс», а не як варіант за замовчуванням.

Для карток GiftGenius зручно задавати w-full і дозволяти сітці вирішувати, скільки вміститься в ряд.

5. Адаптивність усередині контейнера ChatGPT

У звичайному фронтенді у вас є повний контроль над viewport. У ChatGPT цей контроль обмежений: ваш віджет поміщено в контейнер чату, який має свої розміри та правила. Apps SDK дає кілька корисних «містків»: максимальну висоту, safe area для вирізів екрана, тип пристрою тощо.

maxHeight і вертикальні обмеження

В inline‑режимі ChatGPT може обмежувати висоту віджета, щоб він не «зʼїдав» увесь екран. Хуки на кшталт useMaxHeight() дають змогу дізнатися, скільки місця зараз можна чесно зайняти, і додати внутрішнє гортання там, де це потрібно.

Псевдокод:

// Псевдокод, не справжній API:
const maxHeight = useMaxHeight();

return (
  <div style={{ maxHeight, overflowY: "auto" }}>
    <GiftGrid>{/* ... */}</GiftGrid>
  </div>
);

Так ви уникаєте ситуації, коли віджет упирається в нижній край екрана, а повідомлення в чаті «зʼїжджають» кудись у минуле життя.

safe area і мобільні пристрої

На мобільних пристроях зверху й знизу можуть бути вирізи, статус‑бар, системні панелі. Apps SDK дає змогу отримати safeArea і підлаштувати відступи так, щоб нічого не поїхало під «чубчик» телефона.

На рівні CSS можна додати додаткові внутрішні відступи (padding):

// Псевдокод
const { top, bottom } = useSafeArea(); // припустимо, поверне { top: 8, bottom: 16 }

return (
  <div style={{ paddingTop: top, paddingBottom: bottom }}>
    {/* контент */}
  </div>
);

У межах лекції нам важливіше зрозуміти сам принцип: віджет має поважати обмежувач висоти та безпечну область. Інакше UX миттєво перетворюється на «прогорніть ще тричі, щоб побачити кнопку».

6. Tailwind і shadcn/ui: не вигадувати кнопки заново

Писати весь UI вручну на чистому CSS сьогодні — майже екстремальний спорт. У контексті ChatGPT Apps значно простіше взяти перевірену бібліотеку й налаштувати її під вимоги платформи. У курсі ми спираємося на Tailwind і shadcn/ui як на базовий стек.

Tailwind як словник відступів і кольорів

Tailwind дає зручний набір утиліт:

  • відступи (p-4, gap-3),
  • розміри (text-sm, text-base),
  • кольори (text-muted-foreground, bg-card), які в shadcn/ui та подібних системах уже привʼязані до CSS‑змінних теми.

Це ідеально лягає на вимоги ChatGPT:

  • ви не вигадуєте довільні відступи,
  • послідовно задаєте розміри тексту,
  • не ламаєте системні кольори, а використовуєте заздалегідь узгоджені токени.

shadcn/ui як набір охайних компонентів

shadcn/ui (і схожі бібліотеки) надає готові Card, Button, Input, Tabs тощо, налаштовані на Tailwind‑тему. Це значно пришвидшує збирання охайного, мінімалістичного інтерфейсу, особливо для карток GiftGenius.

Приклад GiftCard із використанням shadcn/ui:

// components/GiftCardShadcn.tsx
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Button } from "@/components/ui/button";

type GiftCardProps = {
  title: string;
  price: string;
  description: string;
};

export function GiftCardShadcn(props: GiftCardProps) {
  return (
    <Card>
      <CardHeader>
        <CardTitle className="text-base">{props.title}</CardTitle>
      </CardHeader>
      <CardContent className="space-y-2">
        <p className="text-sm font-medium text-emerald-600">{props.price}</p>
        <p className="text-sm text-muted-foreground">{props.description}</p>
        <Button className="mt-2">Обрати подарунок</Button>
      </CardContent>
    </Card>
  );
}

Головне тут не сам shadcn, а принципи:

  • заголовок не гігантський;
  • опис читабельний;
  • кнопка оформлена за спільною дизайн‑системою, а не «своїм шляхом».

Налаштування під ChatGPT

У реальному проєкті ви можете підлаштувати палітру під мінімалістичний стиль ChatGPT: світлий фон, мʼякі тіні, охайні радіуси. План модуля прямо пропонує спиратися на наявну дизайн‑систему, а не створювати власний всесвіт.

Простий підхід:

  • взяти базу shadcn/ui;
  • залишити системний шрифт;
  • налаштувати один‑два брендові кольори в токенах primary / accent;
  • переконатися, що і inline, і fullscreen використовують ті самі токени.

Так ви отримуєте цілісне візуальне ядро без зайвих зусиль.

7. Візуальна мова GiftGenius: збираємо все докупи

Давайте систематизуємо, що для нашого умовного GiftGenius уже можна вважати «візуальною мовою».

По‑перше, колірна схема. Фон і текст наслідуються від ChatGPT. Акцентний колір — ненавʼязливий, але помітний; він застосовується до CTA‑кнопок і, можливо, бейджів зі знижками. У темній темі цей акцент трохи світліший, щоб зберігати контраст.

По‑друге, типографіка. Базовий системний шрифт; розміри text-sm для основного тексту й text-base для заголовків карток. Курсив і ВЕЛИКІ ЛІТЕРИ використовуються рідко — лише за потреби. Заголовки у fullscreen‑майстрі на крок вищі, але все ще без кричущих text-4xl.

По‑третє, відступи й сітка. В inline‑режимі список подарунків — одна або дві колонки з gap-3/gap-4, кожна картка з p-4. У fullscreen‑режимі — 2–3 колонки, кроки майстра з достатніми проміжками між формами й кнопками. Жодного горизонтального гортання в основних сценаріях.

Невелика схема для екранів GiftGenius:

graph TD
  A[Inline: список подарунків] --> B[GiftCard
кольори/типографіка/CTA]
  A --> C[GiftGrid 1-2 колонки]

  D[Fullscreen: майстер добору] --> E[Крок 1
форма]
  D --> F[Крок 2
фільтри/діапазони]
  D --> G[Крок 3
підтвердження]
  
  B --> H[GiftButton
брендовий акцент]

По‑четверте, сумісність із host‑контекстом. Усі елементи поводяться передбачувано під час перемикання світлої/темної теми, поважають maxHeight і не ховаються під safe area. Кольори не конфліктують із ChatGPT, а CTA‑кнопки скрізь виглядають однаково, щоб користувач на рівні мʼязової памʼяті знав, куди натискати.

Такий набір рішень уже робить ваш застосунок придатним до демонстрації не лише програмістам, а й реальним користувачам або продакт‑менеджерам: буде що обговорити, крім «тут у нас MCP, а тут Agents SDK».

8. Доступність (Accessibility Guidelines, WCAG AA)

Ми вже побіжно згадували WCAG, коли говорили про контраст тексту й фону в розділі 2.3. Там нам був потрібен один практичний орієнтир — не вбивати читабельність. Тепер подивимося на доступність трохи ширше: як той самий інтерфейс працює для тих, хто не сприймає його візуально, і як він виглядає для ChatGPT у голосовому режимі.

WCAG AA — це рівень стандарту доступності з міжнародного набору правил WCAG (Web Content Accessibility Guidelines), які описують, як робити сайти та інтерфейси доступними для людей із різними обмеженнями щодо зору, моторики, когнітивних особливостей тощо.

Головна ідея WCAG AA — перетворити інтерфейс із просто «теоретично доступного» на по‑справжньому придатний до використання. Цей рівень включає десятки вимог, які безпосередньо впливають на якість взаємодії. Серед них — той самий поріг контрасту тексту й фону близько 4.5:1, про який ми вже говорили, а також вимоги до розміру областей натискання, станів фокусу, повідомлень про помилки у формах тощо.

Окремий шар — підтримка технологій доступності, зокрема скрінрідерів. Рівень AA вимагає коректної семантики: заголовки мають бути заголовками, списки — списками, кнопки — кнопками. А інтерактивні елементи повинні мати правильно призначені ролі та текстові альтернативи. Це дає змогу користувачам, які працюють із програмами VoiceOver, TalkBack або NVDA, повноцінно розуміти структуру та зміст інтерфейсу.

Screen reader (екранний читець)

Screen reader (екранний читець) — це програма, яка озвучує та/або структурує вміст екрана, даючи змогу людям із порушеннями зору користуватися компʼютером, смартфоном або веб‑застосунками.

Але screen reader — це не просто «програма, що читає текст уголос». Це повноцінна система взаємодії з інтерфейсом, яка перетворює візуальне представлення сайту чи застосунку на доступну для сприйняття звукову та структуровану навігацію.

ChatGPT, screen reader і WCAG AA

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

Згідно з вимогами ChatGPT Store, підтримка стандарту WCAG AA є обовʼязковою для кожного застосунку. Кожен віджет і кожен інструмент (tool) мають мати максимально якісні та детальні описи, а верстка — бути виконаною відповідно до стандартів WCAG AA: коректна семантика, читабельні підписи, передбачувані стани.

Тому вимога WCAG AA — це не окрема «фіча для людей з особливими потребами», а базовий дизайн‑принцип для того, щоб платформа ChatGPT Apps могла повноцінно працювати з вашим застосунком, зокрема коли користувач спілкується з нею в голосовому режимі.

До сценаріїв voice‑UX, відмінностей голосового діалогу від текстового та вимог ChatGPT Store ми ще повернемося окремо — в інших уроках цього модуля й у модулі про публікацію застосунку. Але все це стоїть на фундаменті, який ви щойно побачили: «голосовий режим = мультимодальність + доступність (WCAG AA + скрінрідери)».

9. Типові помилки візуального дизайну ChatGPT App

Помилка № 1: Жорстко зашиті білий/чорний фон і кольори тексту.
Розробник малює білий фон і чорний текст, не замислюючись про темну тему. У світлій темі це ще якось працює, а в темній — перетворюється на прожектор і псує весь UX. Правильніше використовувати системні кольори та тему хоста (CSS‑змінні, prefers-color-scheme або API Apps SDK), а свої кольори лишати лише для акцентів.

Помилка № 2: Занадто агресивний брендинг.
Зʼявляється яскравий градієнтний фон, кастомний шрифт, строкаті рамки. Віджет починає виглядати як промо‑банер, а не як частина інтерфейсу ChatGPT. Настанови вимагають навпаки: мінімалістичний «рідний» вигляд, з акуратним використанням брендових кольорів лише в ключових елементах — наприклад, в основних кнопках.

Помилка № 3: Відсутність ієрархії в типографіці.
Усі тексти одного розміру й ваги, або навпаки — три рівні заголовків на маленькій картці, ще й ВЕЛИКИМИ ЛІТЕРАМИ. Користувач не розуміє, що головне: назва, ціна чи опис. Краще заздалегідь домовитися про 3–4 рівні й усюди їх дотримуватися: заголовок, ключовий параметр, основний текст, підпис.

Помилка № 4: Злиплі елементи без відступів.
Картки притиснуті одна до одної, текст — впритул до краю, кнопки — впритул до тексту. На десктопі це ще терпимо, а на мобільному перетворюється на візуальний шум. Варто використовувати єдину шкалу відступів (наприклад, класи Tailwind p-4, gap-3) і не економити на «повітрі».

Помилка № 5: Спроба впхнути 4–5 колонок в inline‑режимі.
Розробник подумки все ще на сторінці інтернет‑магазину й робить у чаті плитку з чотирьох вузеньких карток. На широкому екрані це виглядає спірно, а на мобільному — взагалі нечитаємо; ще й зʼявляється горизонтальне гортання. В inline‑віджеті зазвичай вистачає однієї‑двох колонок; третій стовпець залиште fullscreen‑режиму.

Помилка № 6: Ігнорування обмежень висоти та safe area.
Віджет малює гігантський список без внутрішнього гортання й без урахування maxHeight, тож кнопки опиняються «нижче дна екрана». Або елементи ховаються під виріз екрана на мобільному. Варто використовувати дані про максимальну висоту та безпечну область, щоб коректно розподіляти висоту й відступи всередині.

Помилка № 7: Непослідовний вигляд кнопок і карток між inline і fullscreen.
В inline‑режимі кнопка зелена й заокруглена, а у fullscreen — синя й квадратна. Користувач втрачає відчуття єдиного продукту. Потрібно винести базові стилі кнопок і карток у спільний компонент/тему й використовувати їх в усіх режимах.

Помилка № 8: «Авторський» шрифт і декоративні витребеньки.
Підключення важкого вебшрифту «щоб було красиво» ламає візуальну узгодженість із ChatGPT і часом псує продуктивність. Рекомендації платформи кажуть використовувати системні шрифти й охайну типографіку. Якщо дуже хочеться виразитися як дизайнер — краще попрацюйте над іконками та мікротекстами (microcopy), а не над «шрифтовою революцією».

Коментарі
ЩОБ ПОДИВИТИСЯ ВСІ КОМЕНТАРІ АБО ЗАЛИШИТИ КОМЕНТАР,
ПЕРЕЙДІТЬ В ПОВНУ ВЕРСІЮ