给你的 Codex 桌面端换张脸:CodeDrobe 换肤方案完全指南

OpenAI 的 Codex 桌面应用界面做得规整,看久了总归有点单调。你想给它换套衣服,又怕把官方安装包搞坏导致用不了。CodeDrobe 就是解决这个问题的一套开源工具,它能在 macOS 和 Windows 上给 Codex 做外部换肤,整个过程不碰官方的任何底层文件。

CodeDrobe Desktop 管理 Codex 自定义主题

下面这张图来自 Unsplash,挺能代表我换完主题后写代码的那种沉浸心境。

图片来源:Unsplash

CodeDrobe 到底干了什么?

它通过本机 Chromium DevTools Protocol(CDP)向 Codex 的渲染进程注入 CSS 和图片,实现外观替换。

我最早看到这类需求时,第一反应是去解包 app.asar,改里面的样式文件。这招虽然管用,但后遗症很明显,每次官方一更新,你的改动就被覆盖了,甚至可能导致应用签名失效起不来。CodeDrobe 走了另一条路。Codex 本质上是个 Electron 套壳应用,底层跑的是 Chromium。CDP 是 Chromium 暴露出来的调试协议,平时我们用它来打开 F12 开发者工具。CodeDrobe 利用这个协议,在 Codex 启动后连接上去,直接往渲染页面的 DOM 里塞自定义样式。

这样做有个直接的好处,就是页面跳转、渲染器重载或者 Codex 自动更新之后,主题会重新应用,不需要你手动再去刷一遍。

摘要:基于 CDP 的外部注入方案,不修改任何官方文件即可改变 Codex 界面外观,且能跨更新持久生效。

为什么说这套方案相对安全?

因为它只在本地回环地址通信,且拒绝执行任何外部脚本。

安全是个相对的概念,没有绝对的安全。但对比直接替换二进制文件,CodeDrobe 的边界划得比较清楚。修改 app.asar 或者替换 Windows 下的可执行文件,会破坏应用签名,macOS 的 Gatekeeper 可能会直接拦截,Windows 上也会遇到权限和更新校验的麻烦。

CodeDrobe 规避了这些底层文件系统的碰撞。CDP 连接强制绑定到 127.0.0.1,只接受来自本机的连接请求,外部网络根本碰不到这个端口。在主题包的设计上,它只允许包含数据文件、CSS 和本地图片,直接拒绝了主题 JavaScript 的存在。这从源头上避免了主题作者夹带私货的可能性。导入主题时,如果有远程 CSS 资源的引用,也会被直接拦截。

它不会动你的 API Key 或 Base URL 配置,不会偷偷把你切成某个第三方中转服务。应用和恢复主题时,你原有的其他 Codex 配置都会保留。

摘要:通过限制通信范围、禁止 JS 和远程资源,在不侵入官方包的前提下把风险降到最低。

怎么把 CodeDrobe 装到你的环境里?

用 Node.js 20 以上版本,通过 npx 命令行安装对应的 Skill。

前置条件很明确:macOS 12 及以上,或者 Windows 10/11,外加 Node.js 20 及以上版本。安装过程不复杂,打开终端,敲一行命令就行。

如果你只想在当前项目里用,就在项目目录下运行:

npx skills add anhao/codedrobe-codex-skill

如果你希望所有项目都能随时调用这个能力,加上 --global 参数:

npx skills add anhao/codedrobe-codex-skill --global

装完之后,用 npx skills list 或者 npx skills list --global 确认一下有没有装上。

有个细节很容易踩坑,命令里的 skills 是复数,如果你习惯性地敲成 npx skill,就会报错。以后要更新,对应的命令是 npx skills update codedrobe-codex-theme,同样要注意复数形式。

摘要:依赖 Node.js 20+,通过 npx 完成项目级或全局级的 Skill 安装,注意命令复数形式。

在 Codex 里用自然语言换肤是什么体验?

把 Skill 装好后,直接在对话框里用大白话告诉 Codex 你想要什么主题。

这是我觉得 CodeDrobe 设计得比较巧妙的地方。它把自己的能力说明写在了 SKILL.md 文件里,Codex 读取这个文件后,就知道该怎么调用底层的脚本。你不需要去记什么参数,直接打字就行。

比如你输入”给 Codex 应用 Dream 主题”,它就会去调对应的启动脚本。如果你想根据一张本地图片做主题,可以说”根据这张参考图片创建一个深色海洋主题”。做完了想打包,就说”把 Dream 主题导出为 .codex-theme 文件”。玩腻了想恢复原样,一句”恢复 Codex 原生界面”就搞定。甚至你可以让它”验证当前主题并保存截图”,它会乖乖跑完验证流程把图存好。

这种交互方式把底层的跨平台逻辑(macOS 用 .sh,Windows 用 .ps1)完全屏蔽了,体验很顺滑。

摘要:通过 SKILL.md 让 Codex 理解自然语言指令,自动适配底层平台脚本完成主题操作。

不想用自然语言,能不能直接敲命令?

可以,仓库里按平台提供了独立的脚本文件。

有时候我更偏爱命令行,觉得可控性更强。在 Mac 上,安装主题用 scripts/install-codedrobe.sh --theme dream,启动用 scripts/start-codedrobe.sh --theme dream。Windows 换成了 PowerShell 脚本,后缀变成了 .ps1,参数用 -Theme 指定。

这两个平台的脚本实现细节不同,但最终效果一致。如果你只是想快速体验,不想装全局的 Skill,直接去仓库里把对应平台的目录拉下来跑脚本也完全可行。Mac 用户可以直接双击 Install Codex Dream Skin.command 这个文件来启动安装流程,连终端都不用开。

摘要:macOS 提供 Shell 脚本,Windows 提供 PowerShell 脚本,支持脱离 Skill 的独立命令行操作。

换完肤还能正常用吗?

能,侧栏、输入框这些原生控件全都能正常点击和输入。

有些换肤工具其实是截一张全屏图贴上去,你点哪里都没反应,也就是个静态壁纸。CodeDrobe 的方案保留了侧栏、建议卡、项目选择、输入框这些原生控件,它们依然可以正常交互。这就意味着换肤只是改了”衣服”,没有截断”手脚”。你在换肤后的界面里写代码、切换项目、调出历史记录,操作逻辑和官方原版没有任何区别。

摘要:换肤只改变视觉呈现,不覆盖原生 DOM 节点,保证界面的完整可交互性。

自己捏一个主题并导出给别人用

通过创建脚本指定主题 ID、名称和封面图,再用导出脚本打包成独立文件。

官方预设的主题看多了,总想自己搞点不一样的。CodeDrobe 支持根据设计描述、配色方案或者本地参考图来生成新主题,这部分可以借助 AI 来完成文案和 CSS 的编写。

具体到操作层面,先用 create-theme.mjs 命令来创建一个主题骨架:

node scripts/create-theme.mjs --id ocean-calm --name "Ocean Calm" --art /absolute/cover.png

这里有个细节,--art 参数必须给绝对路径,如果给相对路径脚本是找不到图片的,这点我在测试时卡了一会儿。

调好效果后,用导出脚本把它打包:

node scripts/export-theme.mjs --theme ocean-calm --output /absolute/ocean-calm.codex-theme

生成的 .codex-theme 文件是独立的,里面包含了数据、CSS 和本地图片。你可以直接发给朋友,他们导入后就能用。

摘要:通过两个 Node 脚本完成主题的初始化与打包导出,生成可移植的 .codex-theme 文件。

出了问题怎么退回来?

用验证脚本检查状态,用恢复脚本一键还原官方外观。

折腾外观最怕的就是搞乱了回不去。我之前用其他修改工具时,经常遇到改完之后侧栏错位,想还原却发现找不到原来的文件备份。CodeDrobe 因为本身就不改官方文件,所以恢复起来很干净。

你可以先用验证功能生成一张当前界面的截图,看看哪里不对。如果觉得不行,直接执行恢复流程。它会把你注入的 CSS 和图片全部移除,Codex 会瞬间变回刚安装时的样子。因为其他的 Codex 配置(比如你的模型设置、快捷键)在注入和恢复时都是保留的,所以不用担心连带重置。提交问题反馈之前,项目也建议你先跑一下 Verify 和 Restore 自检,确认是不是主题本身引起的显示异常。

摘要:提供截图验证与一键恢复功能,因为未修改原始文件,还原过程无损且不影响其他配置。

嫌命令行麻烦,有没有图形界面?

有,官方提供了一个叫 CodeDrobe Desktop 的独立桌面软件。

不是所有人都喜欢对着黑框框敲命令。如果你想要图形化、一键操作的主题管理器,可以去 anhao/codedrobe-desktop 仓库下载现成的安装包。在这个桌面软件里,主题效果会直观地展示出来,切换起来点几下鼠标就完事。对不想碰终端的用户来说,这是最省事的入口。

摘要:CodeDrobe Desktop 提供了可视化的主题管理能力,适合偏好 GUI 操作的用户。

那些主题长什么样?

风格很杂,从赛博朋克到二次元都有。

仓库里放了不少主题效果预览,看得出作者在审美上没设限。

主题风格 视觉感受
粉系定制 整体偏暖,适合想要温馨感的人
财神打工 把娱乐元素拉满,写代码时旁边有个喜庆的视觉暗示
红白科幻 对比度很高,有种赛博朋克的硬核感
清透定制 走极简路线,不抢视觉焦点
灵感小宇宙 带点迷幻色彩,看着容易发散思维
紫夜限定 偏暗调,适合深夜写代码不刺眼
初音未来 经典 IP 定制,纯粹的粉丝向
舞台黑金 聚光灯效果,有种演出的华丽感

下面是几张从桌面端截取的实际运行图,可以看到不同主题下界面的真实表现:

KUN Stage Dream / Fiona Dilraba Rose
Codex KUN Stage 主题 Codex Dream Fiona 主题 Codex Dilraba Rose 主题

粉系定制
粉系定制

财神打工
财神打工版

红白科幻
红白科幻

清透定制
清透定制

灵感小宇宙
灵感小宇宙

紫夜限定
紫夜限定

初音未来
初音未来

舞台黑金
舞台黑金

这些图只是示意,说明这套工具的上限很高。你完全可以把自己的猫、喜欢的插画放进去当背景。不过要注意,效果图里的部分人物或 IP 形象仅作展示,如果你打算把自己做的主题商用或者公开再分发,得自行确认肖像权和商标授权的问题。

如果你想参与开发

跑测试和检查打包内容是第一步。

如果你是从源码编译,或者想给这个项目提 PR,有两个命令比较关键。npm test 会跑 Core 测试,确保基础逻辑没被破坏。npm run pack:check 会检查待发布包的内容是否完整。提 PR 的时候,项目要求你按模板写清改动,并且勾选对应的自测项(比如 Mac 下的测试脚本、验证和恢复流程),这点在协作规范上要求得比较严。

许可证和版权边界

代码开源,但素材有各自的版权。

Skill、运行时代码、主题格式和文档本身使用的是 Apache License 2.0 开源协议。但这不意味着里面的所有东西都能随便拿去用。二进制图片、第三方素材和付费主题内容不会自动采用这个代码协议,它们有单独的资产许可说明。另外,Apache 协议不会授予 CodeDrobe 名称和 Logo 的使用权。这套边界划得很清晰,作为使用者,只要你不拿它的 Logo 去做竞品或者把付费主题拿出来二次售卖,基本不会碰到法律红线。


实用摘要 / 操作清单

  1. 确认系统版本(macOS 12+ 或 Win 10/11)并安装 Node.js 20+。
  2. 终端运行 npx skills add anhao/codedrobe-codex-skill 安装 Skill。
  3. 在 Codex 对话框里直接输入”给 Codex 应用 Dream 主题”等自然语言指令。
  4. 或者在仓库目录下直接运行对应平台的 .sh.ps1 脚本。
  5. 自制主题时,用 create-theme.mjs 初始化,注意图片路径必须是绝对路径。
  6. export-theme.mjs 导出 .codex-theme 文件分享给他人。
  7. 出现显示异常时,运行验证截图,并使用恢复功能还原官方界面。

一页速览

CodeDrobe 是一套给 OpenAI Codex 桌面端换肤的开源工具。它不修改 app.asar 或官方可执行文件,而是通过绑定在本机 127.0.0.1 的 CDP 协议向渲染层注入 CSS 和图片。主题包内禁止包含 JS 和远程 CSS 资源。安装依赖 Node.js 20+,支持通过 npx skills 安装后在 Codex 内用自然语言控制,也支持直接调用平台脚本。换肤后所有原生控件保持可交互状态,且支持一键无损恢复。

FAQ

会破坏 Codex 的官方签名吗?
不会,它不修改官方安装目录下的任何文件。

换肤后输入框还能用吗?
能用,注入的是装饰性样式,不覆盖原生 DOM 节点。

主题包里能带脚本吗?
不能,导入时会直接拒绝包含 JavaScript 的主题。

支持 Linux 吗?
目前只支持 macOS 12 及以上和 Windows 10/11。

它会偷偷改我的 API 配置吗?
不会,换肤与 API Key、Base URL 等配置完全隔离。

怎么把自己做的主题发给别人?
用 export 脚本导出为 .codex-theme 文件,对方导入即可。

用错了怎么恢复原版?
执行恢复流程即可,因为没改原文件,还原是无损的。