自定义 ChatGPT / Claude / Gemini 的 UI —— 更宽的聊天、更好的字体、隐藏推销

15 5月 2026 · 作者 JustZix Team

你每天在 ChatGPT、Claude 或 Gemini 里花 4 个小时。每套默认 UI 都做了面向新手的选择：窄消息气泡（在 1920px 显示器上约 700px）、代码块里的细 sans-serif（你得眯着眼分辨 l 和 1）、「Upgrade to Pro」横幅恳求你订阅。这一切都能用 JustZix 在 5 分钟内解决。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;
}
/* 代码块里更多内边距 = 更容易阅读 */
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/*。即便在 4K 上 Claude 默认也用 max-width 720px 的聊天。我们来修：

/* 主对话区 */
.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+回车发送消息（默认回车 = 在 Claude 的文本框里换行）。如果你更喜欢只用回车：

// claude.ai 上的 JS 规则
document.addEventListener('keydown', (e) => {
  if (e.key === 'Enter' && !e.shiftKey && !e.ctrlKey && e.target.tagName === '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 的默认最糟 —— 在 4K 上聊天被关在约 640px 里，对比度还低。

/* 更宽的聊天 */
[class*="conversation-container"], chat-window, main {
  max-width: min(1240px, 92vw) !important;
}
[class*="user-query"], [class*="model-response"] {
  max-width: 100% !important;
}

/* 更好的文本对比度 —— Gemini 默认是 #ffffff 上的 #5f6368（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 切换宽度

有时窄（读长文），有时宽（看代码）。带 3 个状态的 TOGGLE3：

// TOGGLE3 动作「📐 宽度」
states[0] = { label: 'Narrow', value: '760' }
states[1] = { label: 'Wide',   value: '1180' }
states[2] = { label: 'Max',    value: '92vw' }

// 代码：
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; }

拖动滑块 → 实时预览。在和你的团队屏幕共享时很完美（放大到 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('提示词日记已激活。');

打开一个吸附在侧边的 Output Console pane → 你看到你的提示词历史（截断到 200 字符）。一天结束时复制粘贴到一个文档里。零的服务器外追踪。

坑

选择器会变。聊天应用经常每隔几周就发布 UI 改版。[data-message-author-role] 是稳定的（基于 ARIA），但 [class*="upgrade-banner"] 匹配任何类名里带「upgrade-banner」的东西 —— 脆弱。每月测试。
!important 是最后手段。AI 聊天应用用带哈希后缀类名的 Tailwind —— 你的覆盖必须在优先级上胜出。此外：有些样式是内联的（style 属性）—— 那时 !important + 一个 :where() 选择器有帮助。
深色模式覆盖。如果应用有深色模式开关（Claude、ChatGPT），你 CSS 里的 color: 可能与主题冲突。如果有的话用页面的 CSS 变量：color: var(--text-primary, #202124) !important。
MutationObserver 可能很贵。聊天应用在流式响应期间每秒渲染几百个节点。在回调里节流/过滤。
单页应用 + 自动重新加载。JustZix 的 CSS 规则在加载时应用一次。一次 SPA 路由切换可能渲染出一个新 nav 而没有完整重新加载。CSS 规则保持激活（head 里的 style 标签），但如果你用一条 JS 规则做 DOM 清理 → 你需要一个 MutationObserver 或 URL 变化监听器（popstate / hashchange）。

接下来做什么

三大最常用的 AI 聊天应用，每个应用一套 JustZix 配置。另见相关文章：

隐藏 cookie 横幅 —— 同样的套路（CSS + !important）应付烦人的叠层
TOGGLE3 —— 三态切换器（上面的例子）
SLIDER —— 用于字号的原生范围
标签页里的迷你 IDE —— JustZix 工具的完整地图

安装 JustZix —— 粘上本文的规则，AI 聊天应用就会变成你想要的样子。没有账号、没有服务器、没有追踪。

为这篇文章评分

暂无评分 — 成为第一个。