Кастомизация UI ChatGPT / Claude / Gemini — шире чаты, лучше шрифты, скрытие апселлов

15 мая 2026 · автор JustZix Team

Ты проводишь 4 часа в день в ChatGPT, Claude или Gemini. У каждого UI по умолчанию сделан выбор, нацеленный на новичка: узкие пузыри сообщений (~700px на мониторе 1920px), тонкий sans-serif в блоках кода (щуришься, чтобы отличить l от 1), баннеры «Upgrade to Pro», выпрашивающие подписку. Всё решаемо за 5 минут с JustZix. CSS-правила + JS-observer, сохранены один раз, работают вечно. Никакого трекинга, никакого аккаунта, никаких уловок «powered by».

ChatGPT (chat.openai.com / chatgpt.com) — 3 CSS-правила

Совпадение домена: *://chatgpt.com/* и *://chat.openai.com/* (легаси-домен).

1. Более широкие пузыри сообщений (max-width 1200px)

/* Дефолт ChatGPT: max-width ~768px. Опытный пользователь на 1080p+ = впустую */
.text-message, [data-message-author-role] > div {
  max-width: min(1200px, 92vw) !important;
}
/* Также контейнер ввода промпта */
form .stretch, form[data-type="unified-composer"] {
  max-width: min(1200px, 92vw) !important;
}

2. Моноширинный для блоков кода (Fira Code с лигатурами)

pre code, code, .markdown code, .prose code {
  font-family: 'Fira Code', 'JetBrains Mono', ui-monospace, monospace !important;
  font-variant-ligatures: contextual !important;
  font-size: 14px !important;
  line-height: 1.6 !important;
}
/* Больше padding в блоках кода = легче читать */
pre {
  padding: 16px !important;
  border-radius: 8px !important;
}

3. Скрыть баннер «Upgrade to Plus» + чипы предложений

/* Баннер вверху сайдбара «Upgrade your plan» */
nav a[href*="upgrade"], nav button[aria-label*="Upgrade"],
[data-testid="upgrade-button"], [class*="upgrade-banner"] {
  display: none !important;
}
/* Сетка предложенных промптов над вводом — помеха для опытных пользователей */
[class*="suggestions"], [class*="prompt-card"] {
  display: none !important;
}

Claude.ai — широкий чат + сохранение сайдбара

Домен: *://claude.ai/*. Claude по умолчанию использует чат с max-width 720px даже на 4K. Решаем:

/* Главная область разговора */
.h-screen [class*="max-w-"], main [class*="max-w-3xl"],
[data-testid="conversation"] > div {
  max-width: min(1180px, 90vw) !important;
}
/* Блоки кода — у Claude уже есть моноширинный, но слишком мелкий и без лигатур */
pre, code {
  font-family: 'Fira Code', 'JetBrains Mono', ui-monospace, monospace !important;
  font-variant-ligatures: contextual !important;
}
pre {
  font-size: 13px !important;
  line-height: 1.55 !important;
}
/* Панель Artifact (правая боковая панель) шире, когда открыта */
[data-testid="artifact-panel"] {
  width: 50% !important;
  min-width: 600px !important;
}

Бонус: Ctrl+Enter отправляет сообщение (по умолчанию Enter = перенос строки в textarea Claude). Если предпочитаешь просто Enter:

// JS-правило на claude.ai
document.addEventListener('keydown', (e) => {
  if (e.key === 'Enter' && !e.shiftKey && !e.ctrlKey && e.target.tagName === 'TEXTAREA') {
    // Только когда в textarea есть текст (разрешает Enter в пустой textarea)
    if (e.target.value.trim()) {
      e.preventDefault();
      const sendBtn = document.querySelector('button[aria-label*="end"], button[type="submit"]');
      if (sendBtn) sendBtn.click();
    }
  }
}, true);

Gemini (gemini.google.com) — самый непростительный дефолт

Домен: *://gemini.google.com/*. У Gemini худший дефолт — чат заперт в ~640px на 4K, с низким контрастом.

/* Более широкий чат */
[class*="conversation-container"], chat-window, main {
  max-width: min(1240px, 92vw) !important;
}
[class*="user-query"], [class*="model-response"] {
  max-width: 100% !important;
}

/* Лучший контраст текста — дефолт Gemini это #5f6368 на #ffffff (3.5:1, проваливает WCAG AA) */
.markdown, [class*="response-content"] {
  color: #202124 !important;
}

/* Цвета блоков кода — у Gemini подсветка синтаксиса с низким контрастом */
pre code .keyword, pre code .token.keyword { color: #d73a49 !important; }
pre code .string,  pre code .token.string  { color: #032f62 !important; }
pre code .comment, pre code .token.comment { color: #6a737d !important; font-style: italic !important; }

Сценарий 1 — TOGGLE3 для смены ширины

Иногда узко (читаешь длинный текст), иногда широко (код). TOGGLE3 с 3 состояниями:

// Действие TOGGLE3 «📐 Ширина»
states[0] = { label: 'Narrow', value: '760' }
states[1] = { label: 'Wide',   value: '1180' }
states[2] = { label: 'Max',    value: '92vw' }

// Code:
document.documentElement.style.setProperty('--jz-chat-width',
  value.endsWith('vw') ? value : value + 'px');

А CSS-правило использует эту переменную:

main, [class*="conversation"] {
  max-width: var(--jz-chat-width, 1180px) !important;
}

3 клика = 3 ширины. Memory по доменам хранит твой последний выбор.

Сценарий 2 — SLIDER для управления размером шрифта

Блоки кода слишком мелкие = щуришься. SLIDER 10-20px:

// Действие SLIDER «🔤 Размер кода»
min: 10, max: 20, step: 1, defaultValue: 14, unit: 'px'

code: |
  document.documentElement.style.setProperty('--jz-code-size', value + 'px');

CSS-правило:

pre, code, pre code { font-size: var(--jz-code-size, 14px) !important; }

Перетащи слайдер → живой предпросмотр. Идеально во время screen-share с командой (зумируй до 18-20px, легко читать издалека).

Сценарий 3 — Output Console как дневник промптов

Очень специфический приём для опытных пользователей: логируй каждое отправленное сообщение в Output Console для истории промптов:

// JS-правило
const observer = new MutationObserver((mutations) => {
  for (const m of mutations) {
    for (const node of m.addedNodes) {
      if (node.nodeType !== 1) continue;
      const userMsg = node.matches('[data-message-author-role="user"]')
        ? node : node.querySelector('[data-message-author-role="user"]');
      if (userMsg && !userMsg.dataset.jzLogged) {
        userMsg.dataset.jzLogged = '1';
        const txt = userMsg.textContent.trim().slice(0, 200);
        JUSTZIX.log(`[prompt] ${txt}${txt.length === 200 ? '…' : ''}`);
      }
    }
  }
});
observer.observe(document.body, { childList: true, subtree: true });
JUSTZIX.info('Дневник промптов активен.');

Открой pane Output Console, защёлкнутый сбоку → видишь историю своих промптов (обрезанных до 200 символов). Копируй-вставляй в документ в конце дня. Ноль трекинга вне сервера.

Ловушки

Селекторы меняются. Чат-приложения часто выпускают рестайлинги UI каждые несколько недель. [data-message-author-role] стабилен (на основе ARIA), но [class*="upgrade-banner"] совпадает с чем угодно, где есть «upgrade-banner» в классе — хрупко. Тестируй ежемесячно.
!important — последнее средство. ИИ-чат-приложения используют Tailwind с классами с хеш-суффиксом — твои переопределения должны выигрывать по специфичности. Кроме того: некоторые стили inline (атрибут style) — тогда помогает !important + селектор :where().
Переопределение тёмной темы. Если у приложения есть переключатель тёмной темы (Claude, ChatGPT), твой color: в CSS может конфликтовать с темой. Используй CSS-переменные страницы, если доступны: color: var(--text-primary, #202124) !important.
MutationObserver может быть дорогим. Чат-приложения рендерят сотни узлов в секунду во время потокового ответа. Троттли/фильтруй в колбэке.
Single-page app + авто-reload. CSS-правила JustZix применяются один раз при загрузке. Смена маршрута SPA может отрендерить новую nav без полной перезагрузки. CSS-правило остаётся активным (тег style в head), но если ты используешь JS-правило для очистки DOM → тебе нужен MutationObserver или слушатель смены URL (popstate / hashchange).

Что делать дальше

3 самых используемых ИИ-чат-приложения, один сетап JustZix на приложение. Смотри также связанные статьи:

Скрытие cookie-баннеров — та же схема (CSS + !important) для надоедливых оверлеев
TOGGLE3 — трёхпозиционный переключатель (пример выше)
SLIDER — нативный диапазон для размера шрифта
Мини-IDE во вкладке — полная карта инструментов JustZix

Установи JustZix — вставь правила из этой статьи, и ИИ-чат-приложения будут выглядеть ровно так, как ты хочешь. Никакого аккаунта, никакого сервера, никакого трекинга.

Оцени эту статью

Оценок пока нет — оцени первым.