ES

← Todos los artículos

Tutoriales

Personalizar la UI de ChatGPT / Claude / Gemini — chats más anchos, mejores fuentes, ocultar los upsells

· por JustZix Team

Pasas 4 horas al día en ChatGPT, Claude o Gemini. Cada UI predeterminada toma decisiones orientadas al novato: burbujas de mensajes estrechas (~700px en un monitor de 1920px), sans-serif fina en los bloques de código (entornas los ojos para distinguir l de 1), banners «Upgrade to Pro» que imploran una suscripción. Todo resoluble en 5 minutos con JustZix. Reglas CSS + observer JS, guardados una vez, funcionan para siempre. Sin tracking, sin cuenta, sin trucos «powered by».

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

Match de dominio: *://chatgpt.com/* y *://chat.openai.com/* (dominio legacy).

1. Burbujas de mensajes más anchas (max-width 1200px)

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

2. Monospace para los bloques de código (Fira Code con ligaduras)

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;
}
/* Más padding en los bloques de código = lectura más fácil */
pre {
  padding: 16px !important;
  border-radius: 8px !important;
}

3. Ocultar el banner «Upgrade to Plus» + los chips de sugerencias

/* Banner en lo alto de la sidebar «Upgrade your plan» */
nav a[href*="upgrade"], nav button[aria-label*="Upgrade"],
[data-testid="upgrade-button"], [class*="upgrade-banner"] {
  display: none !important;
}
/* Cuadrícula de prompts sugeridos sobre el input — estorbo para los power users */
[class*="suggestions"], [class*="prompt-card"] {
  display: none !important;
}

Claude.ai — chat ancho + mantener la sidebar

Dominio: *://claude.ai/*. Claude usa por defecto un chat con max-width 720px incluso en 4K. Lo resolvemos:

/* Área principal de la conversación */
.h-screen [class*="max-w-"], main [class*="max-w-3xl"],
[data-testid="conversation"] > div {
  max-width: min(1180px, 90vw) !important;
}
/* Bloques de código — Claude ya tiene monospace, pero demasiado pequeña y sin ligaduras */
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;
}
/* Panel Artifact (panel lateral derecho) más ancho cuando está abierto */
[data-testid="artifact-panel"] {
  width: 50% !important;
  min-width: 600px !important;
}

Bonus: Ctrl+Enter envía el mensaje (default Enter = salto de línea en el textarea de Claude). Si prefieres solo Enter:

// Regla JS en claude.ai
document.addEventListener('keydown', (e) => {
  if (e.key === 'Enter' && !e.shiftKey && !e.ctrlKey && e.target.tagName === 'TEXTAREA') {
    // Solo cuando el textarea tiene texto (permite Enter en un textarea vacío)
    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) — el default menos perdonable

Dominio: *://gemini.google.com/*. Gemini tiene el peor default — chat enjaulado en ~640px en un 4K, con bajo contraste.

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

/* Mejor contraste del texto — el default Gemini es #5f6368 sobre #ffffff (3.5:1, falla WCAG AA) */
.markdown, [class*="response-content"] {
  color: #202124 !important;
}

/* Colores de los bloques de código — Gemini tiene un syntax highlighting de bajo contraste */
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 de uso 1 — TOGGLE3 para cambiar el ancho

A veces estrecho (lees long-form), a veces ancho (código). TOGGLE3 con 3 estados:

// Acción TOGGLE3 «📐 Ancho»
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');

Y la regla CSS usa esa variable:

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

3 clics = 3 anchos. La memory por dominio conserva tu última elección.

Caso de uso 2 — SLIDER para el control del tamaño de la fuente

Bloques de código demasiado pequeños = entornas los ojos. SLIDER 10-20px:

// Acción SLIDER «🔤 Tamaño código»
min: 10, max: 20, step: 1, defaultValue: 14, unit: 'px'

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

Regla CSS:

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

Arrastra el slider → vista previa en vivo. Perfecto durante un screen-share con tu equipo (zoom hasta 18-20px, fácil de leer desde lejos).

Caso de uso 3 — Output Console como diario de los prompts

Truco de power user muy específico: loguea cada mensaje que envías en la Output Console para un historial de los prompts:

// Regla 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 de los prompts activo.');

Abre un pane Output Console enganchado a un lado → ves el historial de tus prompts (truncados a 200 caracteres). Copia-pega en un documento al final del día. Cero tracking off-server.

Trampas

Qué hacer después

Las 3 apps de chat IA más usadas, un setup JustZix por app. Mira también los artículos relacionados:

Instala JustZix — pega las reglas de este artículo y las apps de chat IA tendrán exactamente el aspecto que quieres. Sin cuenta, sin servidor, sin tracking.

aichatgptclaudegeminicssux

Valora este artículo

Sin valoraciones — sé el primero.

Ver también

Pruébalo tú mismo

Instala JustZix y pega cualquier snippet de este artículo. Dos minutos de cero a una regla funcionando en todos tus dispositivos.

Obtener JustZix

Funciones · Cómo funciona · Ejemplos · Casos de uso