IT

← Tutti gli articoli

Tutorial

Personalizzare la UI di ChatGPT / Claude / Gemini — chat più larghe, font migliori, nascondere gli upsell

· di JustZix Team

Passi 4 ore al giorno in ChatGPT, Claude o Gemini. Ogni UI predefinita fa scelte mirate al neofita: bolle di messaggi strette (~700px su un monitor da 1920px), sans-serif sottile nei blocchi di codice (strizzi gli occhi per distinguere l da 1), banner «Upgrade to Pro» che implora un abbonamento. Tutto risolvibile in 5 minuti con JustZix. Regole CSS + observer JS, salvati una volta, funzionano per sempre. Niente tracciamento, niente account, niente trucchetti «powered by».

ChatGPT (chat.openai.com / chatgpt.com) — 3 regole CSS

Match di dominio: *://chatgpt.com/* e *://chat.openai.com/* (dominio legacy).

1. Bolle di messaggi più larghe (max-width 1200px)

/* Default ChatGPT: max-width ~768px. Power user su 1080p+ = sprecato */
.text-message, [data-message-author-role] > div {
  max-width: min(1200px, 92vw) !important;
}
/* Anche il container di input del prompt */
form .stretch, form[data-type="unified-composer"] {
  max-width: min(1200px, 92vw) !important;
}

2. Monospace per i blocchi di codice (Fira Code con legature)

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;
}
/* Più padding nei blocchi di codice = lettura più facile */
pre {
  padding: 16px !important;
  border-radius: 8px !important;
}

3. Nascondere il banner «Upgrade to Plus» + i chip di suggerimenti

/* Banner in cima alla sidebar «Upgrade your plan» */
nav a[href*="upgrade"], nav button[aria-label*="Upgrade"],
[data-testid="upgrade-button"], [class*="upgrade-banner"] {
  display: none !important;
}
/* Griglia di prompt suggeriti sopra l'input — ingombro per i power user */
[class*="suggestions"], [class*="prompt-card"] {
  display: none !important;
}

Claude.ai — chat largo + mantenere la sidebar

Dominio: *://claude.ai/*. Claude usa di default una chat con max-width 720px anche su 4K. Risolviamo:

/* Area principale della conversazione */
.h-screen [class*="max-w-"], main [class*="max-w-3xl"],
[data-testid="conversation"] > div {
  max-width: min(1180px, 90vw) !important;
}
/* Blocchi di codice — Claude ha già monospace, ma troppo piccolo e senza legature */
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;
}
/* Pannello Artifact (pannello laterale destro) più largo quando aperto */
[data-testid="artifact-panel"] {
  width: 50% !important;
  min-width: 600px !important;
}

Bonus: Ctrl+Invio invia il messaggio (default Invio = a capo nella textarea di Claude). Se preferisci solo Invio:

// Regola JS su claude.ai
document.addEventListener('keydown', (e) => {
  if (e.key === 'Enter' && !e.shiftKey && !e.ctrlKey && e.target.tagName === 'TEXTAREA') {
    // Solo quando la textarea ha del testo (permette Invio in una textarea vuota)
    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) — il default meno perdonabile

Dominio: *://gemini.google.com/*. Gemini ha il default peggiore — chat ingabbiata in ~640px su un 4K, con basso contrasto.

/* Chat più larga */
[class*="conversation-container"], chat-window, main {
  max-width: min(1240px, 92vw) !important;
}
[class*="user-query"], [class*="model-response"] {
  max-width: 100% !important;
}

/* Miglior contrasto del testo — il default Gemini è #5f6368 su #ffffff (3.5:1, fallisce WCAG AA) */
.markdown, [class*="response-content"] {
  color: #202124 !important;
}

/* Colori dei blocchi di codice — Gemini ha un syntax highlighting a basso contrasto */
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; }

Caso d'uso 1 — TOGGLE3 per cambiare la larghezza

A volte stretto (leggi long-form), a volte largo (codice). TOGGLE3 con 3 stati:

// Azione TOGGLE3 «📐 Larghezza»
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');

E la regola CSS usa quella variabile:

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

3 clic = 3 larghezze. La memory per dominio conserva la tua ultima scelta.

Caso d'uso 2 — SLIDER per il controllo della dimensione del font

Blocchi di codice troppo piccoli = strizzi gli occhi. SLIDER 10-20px:

// Azione SLIDER «🔤 Dimensione codice»
min: 10, max: 20, step: 1, defaultValue: 14, unit: 'px'

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

Regola CSS:

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

Trascina lo slider → anteprima dal vivo. Perfetto durante uno screen-share con il tuo team (zoom fino a 18-20px, facile da leggere da lontano).

Caso d'uso 3 — Output Console come diario dei prompt

Trucco da power user molto specifico: logga ogni messaggio che invii nella Output Console per uno storico dei prompt:

// Regola 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('Diario dei prompt attivo.');

Apri un pane Output Console agganciato a lato → vedi lo storico dei tuoi prompt (troncati a 200 caratteri). Copia-incolla in un documento a fine giornata. Zero tracciamento off-server.

Trappole

Cosa fare dopo

Le 3 app di chat IA più usate, un setup JustZix per app. Vedi anche gli articoli correlati:

Installa JustZix — incolla le regole di questo articolo e le app di chat IA avranno esattamente l'aspetto che vuoi. Niente account, niente server, niente tracciamento.

aichatgptclaudegeminicssux

Valuta questo articolo

Nessuna valutazione — sii il primo.

Vedi anche

Provalo tu stesso

Installa JustZix e incolla qualsiasi snippet di questo articolo. Due minuti da zero a una regola funzionante su tutti i tuoi dispositivi.

Ottieni JustZix

Funzionalità · Come funziona · Esempi · Casi d'uso